footer {
    height: 70%;
    width: 100%;
    left: 0;
    position: relative;
    top: 10rem;
    overflow: hidden;
    z-index: 110;
    background-image: url(/src/Inicio/Fondo\ footer.jpg);
    background-size: cover;
    background-position: center;
    
}

.footer .container-footer h1 {
    font-size: 2.3rem;
}

h2 {
    font-size: 1.5rem;
    color: var(--textcolor);
}

h3 {
    color: var(--textcolor);
    font-size: 1.4rem;
}

p {
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--whitecolor);
}

.container-footer {
    display: grid;
    grid-template-columns: 50% 50%;
    position: relative;
    margin: 0;
}

.container-footer .box-information {
    position: relative;
    
    top: 0;
    height: 100%;
    display: block;
    text-align: center;
    z-index: 110;
    width: 100%;
    padding: 1rem;
    
}

.container-footer .box-information .footer-logo {
    height: auto;
    width: auto;
    position: relative;
    text-align: center;
    z-index: 110;
}

.footer-logo img {
    width: 30rem;
    padding: 1rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.container-footer .box-information h1 {
    font-size: 2.3rem;
    color: var(--whitecolor);
    margin-bottom: 1rem;
}

.container-footer .box-socials {
    position: relative;
    height: auto;
    width: 100%;
    text-align: center;
    z-index: 110;
    
}

.box-socials .socials-details {
    
    position: relative;
    display: block;
    top: 10%;
    animation: pulse-animation 3s infinite ease-in-out;
    left: 0;
}

@keyframes pulse-animation {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


.container-footer .box-socials h1 {
    font-size: 2.3rem;
    color: white;
}

.box-socials i {
    justify-content: center;
    align-items: center;
    padding: .7rem;


    border-radius: 50%;
    font-size: 3.3rem;

    margin: 2.5rem 1.5rem 3rem 0;
    transition: .5s ease;
    text-align: center;
    color: var(--whitecolor);
    background: transparent;
    border: .2rem solid var(--whitecolor);

}

.container-footer .box-socials i:hover {
    color: var(--bgcolor);
    background: var(--secondarycolor);
}

.nav-links {
    top: 40%;
    position: relative;
    width: 100%;
    display: none;
}

.nav-links a {
    margin: .8rem;
    font-size: 1.58rem;
    color: var(--whitecolor);
    font-weight: 600;
    text-decoration: underline;
}


/*+-++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

.container-footer .info-contact {
    height: auto;
    width: 50%;
    display: block;
    position: relative;
    padding-top: 2rem;
    text-align: center;
    z-index: 110;
    display: none;
    border: solid green;
}

.info-contact .contact-details {
    width: 100%;
    text-align: center;
    justify-content: center;

}

.container-footer .info-contact .sucursal-box {
    border-radius: 1.5rem;
    height: 20%;
    width: 75%;
    align-items: center;
    padding: 1.5rem;
    background-color: var(--azulmarino);
    border: solid pink;
    left: 50%;
    transform: translateX(-50%);
    position: relative;

}

.sucursal-box h2,
.sucursal-box h3 {
    color: var(--whitecolor);
    padding-bottom: 0.5rem;
}

.sucursal-box h3 {
    font-weight: 500;
}

.sucursal-box a {
    color: var(--whitecolor);
    font-size: 1.2rem;
    border-radius: 3rem;
    background-color: rgba(255, 255, 255, 0.35);
    padding: 0.5rem;
    position: relative;
}

.container-footer .info-contact h1 {
    color: white;
    font-size: 2.3rem;
    margin-bottom: 2rem;
}

.footer-text {
    margin-top: 2rem;
    position: relative;
    text-align: center;
}

.footer-text p {
    font-size: 1.5rem;
    font-weight: 500;
    z-index: 999;
}

.sucursales-swiper {
    /*
    left: 50%;
    transform: translateX(-5%);*/
    position: relative;
    /* top: 40%;*/
    /* transform: translateY(-50%);*/
    width: 70%;
    overflow: hidden;
    /*border:  solid green;*/
    left: 50%;
    transform: translateX(-50%);
}

.sucursales-slide {
    /*border: solid black;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;*/


    overflow: visible;
    text-align: center;
    padding: 2rem;
    position: relative;
}

.contact-details .swiper-button-next {
    top: 60%;
    right: 15%;
    padding-left: 0;
    position: absolute;
    color: var(--whitecolor);
}

.contact-details .swiper-button-prev {
    top: 60%;
    left: 15%;
    padding-right: 0;
    position: absolute;
    color: var(--whitecolor);
}



/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.circle-footer {
    position: absolute;
    display: block;
    position: absolute;
    width: 450rem;
    height: 440rem;
    background: var(--rojo);
    border-radius: 50%;
    bottom: 15%;
    left: -80%;
    z-index: 80;
    box-shadow: rgba(255, 253, 253, 0.56) 0px 22px 70px 4px;
    display: none;
}

.circle-footer::after {
    content: "";
    display: none;
    position: absolute;
    width: 400rem;
    height: 450rem;
    background: var(--whitecolor);
    border-radius: 50%;
    bottom: 4%;
    left: 11%;
    z-index: 85;
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}


/*Responsive footer*/

@media (max-width: 1670px) {
    .nav-links a {
        font-size: 1.3rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.2rem;
        color: var(--textcolor);
    }

    h3 {
        color: var(--textcolor);
        font-size: 1.1rem;
    }

    p {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--whitecolor);
    }

    .container-footer .box-contact .sucursal-box {
        height: 15rem;
        width: 30rem;
    }
}

@media (max-width: 1500px) {
    .container-footer .box-contact .sucursal-box {
        height: 15rem;
        width: 27rem;
    }

    .nav-links a {
        font-size: 1.1rem;
    }

    p {
        font-size: 1.3rem;

        color: var(--whitecolor);
    }
}

@media (max-width: 1300px) {
    .nav-links a {
        font-size: 1rem;
    }

    .container-footer .box-socials h1,
    .container-footer .box-information h1,
    .container-footer .box-contact h1 {
        font-size: 2rem;
    }

    .footer-text p {
        font-size: 1.3rem;
    }

}

@media (max-width:1250px) {
    .nav-links a {
        font-size: 1rem;
    }

    h1 {
        font-size: 1.3rem;
    }


    h3 {
        color: var(--textcolor);
        font-size: 1rem;
    }

    p {
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--whitecolor);
    }

    .container-footer .box-contact .sucursal-box {
        height: 15rem;
        width: 25rem;
    }
}

@media (max-width:1200px) {
    .footer-logo img {
        width: 25rem;
    }
}

@media (max-width:1160px) {

    .box-socials .nav-links a {
        font-size: 1.4rem;
    }

    
}

@media (max-width:700px) {
    .footer .container-footer .box-socials i {
        font-size: 2.5rem;
    }
}

@media (max-width:600px) {

    p,
    .footer-text p {
        font-size: 1rem;
    }

    
    .container-footer .box-socials h1,
    .container-footer .box-information h1 {
        font-size: 1.7rem;
    }
}

@media (max-width:540px) {
    .container-footer .box-information {
        height: 37rem;
        display: none;
    }

    .container-footer {
        border-top: 10px double #FFFFFF;
        height: 13rem;
    }

    .container-footer .box-socials {
        width: 100%;
        height: auto;
        position: absolute;
    }

    .socials-details {
        position: absolute;
        
        padding-top: 2%;
    }

    .container-footer .box-socials .nav-links{
        display: none;
    }

    
}

@media (max-width:350px) {
    .box-socials i {
        color: var(--whitecolor);
        background: transparent;
        border: .2rem solid var(--whitecolor);
    }

    .box-socials i:hover {
        color: var(--bgcolor);
        background: var(--secondarycolor);
    }

    .socials-details {
        position: absolute;
        padding-top: 6%;
        margin-left: 6%;
        
        transform: translate(50%);
    }

}