/*-------------------------------- root --------------------------------*/
:root{
    --white: #F7FFFA;
    --black: #00050F;
    --blue: #5384EB;
    --green: #09E8B2;
    --ligthGreen: #DFFFEA;

    --fs--superTitle: clamp(38px, calc(4vw + 2rem), 84px);
    --fs--Title: clamp(36px, calc(2vw + 1rem), 64px);
    --fs--SubTitle: clamp(20px, calc(0.8vw + 1rem), 42px);
    --fs--Text: clamp(1rem, 2vw, 1.125rem);
    --fs--TextNav: 	clamp(0.975rem, 1.6vw, 1.1rem);
}

html{
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'michroma';
    src: url(./MichromaRegular.ttf);
    font-display: swap;
}

@font-face {
    font-family: 'swissLight';
    src: url(./Swiss721BT-Light.otf);
    font-display: swap;
}

@font-face {
    font-family: 'swissBold';
    src: url(./Swiss721BT-Bold.otf);
    font-display: swap;
}

@font-face {
    font-family: 'swissRegular';
    src: url(./Swiss721BT-Roman.otf);
    font-display: swap;
}

html{
        max-width: 100vw;
}

body{
    margin: 0;
    padding: 0;
    background-color: var(--white);
    overflow: hidden;
}

p:hover{
    cursor: default;
}

/*-------------------------------- Scroll Bar --------------------------------*/
/* Works on Firefox */
* {
    scrollbar-width:thin;
    scrollbar-color: var(--green) var(--white);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 15px;
}

*::-webkit-scrollbar-track {
    background: var(--white);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--green);
    border-radius: 0px;
    border: 0px solid var(--white);
}

/*-------------------------------- animations --------------------------------*/
.reveal-home {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.reveal-home.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/*-------------------------------- loader --------------------------------*/
.loaderContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: var(--white);
    z-index: 500;
    position: fixed;
    top: 0;
    left: 0;
    transition: opacity 0.5s ease;
    opacity: 1;
    pointer-events: all;
}

.loaderContainer.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loaderContainer video {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    object-fit: cover;
}

/*-------------------------------- Nav --------------------------------*/
header{
    position: fixed;
    width: 100%;
    height: max-content;
    display: flex;
    flex-direction: column;
    padding-top: 3.4%;
    padding-bottom: 0px;
    transition: all 0.3s ease-in-out;
    margin-top: 0px;
    z-index: 300;
    background-color: transparent;

}

.smaller{
    padding-top: 1%;
    padding-bottom: 0%;
}

nav{
    display: flex;
}

.containernav{
    width: 95vw;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    display: flex;
}

.eleContainer{
    background-color: var(--ligthGreen);
    width: max-content;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 14px;

}

.spaceNav{
    margin-left: 32px;
}

.spaceNav2{
    margin-left: 32px;
    margin-right: 32px;
}

.eleNav{
    font-size: var(--fs--TextNav);
    color: var(--black);
    text-decoration: none;
    font-family: 'swissLight';
    transition: all .2s ease;
}

.eleNav:hover{
    scale: 1.1;
    color: var(--blue);
}


#ham{
    display: none;
}

#xham{
    display: none;
}

/*-------------------------------- botones lengauje --------------------------------*/
.botonLenguaje{
    background: none;
    border: none;
    color: var(--black);
    font-size: calc(var(--fs--Text) + 4px);
    position: absolute;
    margin-left: 52px;
    font-family: 'swissLight';
    transition: scale 0.3s ease;
}

.selected{
    background-color: var(--ligthGreen);
    border-radius: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 22px;
    padding-right: 22px;
    margin-top: -12px;
}

.botonLenguaje:hover{
    color: var(--blue);
    cursor: pointer;
    scale: 1.1;
}

/*-------------------------------- home --------------------------------*/
.home{
    width: 100vw;
    height: 100vh;
    display: flex;
}

.imgNav{
    width: 14%;
    height: auto;
    position: absolute;
    margin-top: 2.5%;
    padding-top: 22px;
    margin-left: 5vw;
    padding-bottom: 22px;
}

.logoNav{
    width: 100%;
}

.imgNav2{
    width: 3.2%;
    height: auto;
    position: absolute;
    margin-top: 2.5%;
    padding-top: 22px;
    margin-left: auto;
    /* margin-right: 5vw; */
    left: auto;
    right: 5vw;
    padding-bottom: 22px;
}

.logoNav2{
    width: 100%;
}

.leftContainer{
    background-color: var(--white);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 100px;
}

.rightContainer{
    background-image: url(./imgFondoHome.webp);
    background-size: cover;
    background-position: right;
    flex: 1;
}

.copyHome{
    width: 105%;
    margin-left: 10%;
    z-index: 200;
    margin-bottom: 50px;
}

.textHome{
    font-size: var(--fs--Text);
    color: var(--black);
    margin-left: 10%;
    font-family: 'swissRegular';
}

.texthome2{
    margin-top: -10px;
}

.btnAboutUs{
    margin-top: 50px;
    margin-left: 10%;
    background-color: var(--green);
    width: max-content;
    font-size: var(--fs--Text);
    font-family: 'swissBold';
    padding: 1rem 4rem;
    border-radius: 50px;
    transition: all 0.5s ease;
}

.textBtnAbout{
    text-decoration: none;
    color: var(--white);
}

.btnAboutUs:hover{
    cursor: pointer;
    scale: 1.1;
}

/*-------------------------------- weOffer --------------------------------*/
.weOfferSection{
    background-color: var(--black);
    display: flex;
    flex-direction: column;
    padding-top: 120px;
    padding-bottom: 120px;
}

.textWeOffer{
    color: var(--white);
    font-size: var(--fs--Text);
    width: 48vw;
    margin-left: auto;
    margin-right: auto;
}

.textOfferBold{
    font-family: 'swissBold';
    margin-bottom: 20px;
}

.textOfferRegular{
    font-family: 'swissLight';
}


/*-------------------------------- aboutUsIntro --------------------------------*/
.aboutUsIntro{
    width: 100vw;
    display: flex;
    margin-bottom: 0px;
    height: 64vh;
}

.imgAboutUsContainer{
    background-color: var(--white);
    flex: 1;
    display: flex;
}

.imgAboutUs{
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
    width: 23%;
}

.aboutUsIntroInfo{
    background-color: var(--ligthGreen);
    flex: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 24vw;
}

.aboutUsIntroInfoCotainer{
    width: 24vw;
    margin-left: auto;
    margin-right: auto;
}

.aboutUsIntroTitle{
    color: var(--black);
    font-size: var(--fs--Title);
    font-family: 'swissRegular';
    margin-bottom: 64px;
    text-transform: uppercase;
}

.aboutUsIntroText{
    color: var(--black);
    font-size: var(--fs--Text);
    font-family: 'swissLight';
    margin-top: 0px;
    margin-bottom: 64px;
}

.btnAboutUsIntro{
    margin-top: 0px;
    background-color: var(--blue);
    width: max-content;
    font-size: var(--fs--Text);
    font-family: 'swissBold';
    padding: 1rem 4rem;
    border-radius: 50px;
    transition: all 0.5s ease;
}

.textBtnAboutIntro{
    text-decoration: none;
    color: var(--ligthGreen);
}

.btnAboutUsIntro:hover{
    cursor: pointer;
    scale: 1.1;
}


/*-------------------------------- contactUS --------------------------------*/
.contactSection{
    width: 100vw;
    display: flex;
    margin-top: 0px;
    margin-bottom: 0px;
    height: 64vh;
}

.contatUsInfo{
    background-color: var(--ligthGreen);
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* width: 24vw; */
}

.aboutUsIntroInfoCotainer{
    width: 24vw;
    margin-left: auto;
    margin-right: auto;
}

.contactUsTitle{
    color: var(--black);
    font-size: var(--fs--Title);
    font-family: 'swissRegular';
    margin-bottom: 64px;
    text-transform: uppercase;
}

.contactUsText{
    color: var(--black);
    font-size: var(--fs--Text);
    font-family: 'swissLight';
    margin-top: 0px;
    margin-bottom: 64px;
}

.imgContactSection{
    flex: 1;
    background-image: url(./imgFondoContacto.webp);
    background-size: cover;
    background-position: center;
}

.btnContactUs{
    margin-top: 0px;
    background-color: var(--blue);
    width: max-content;
    font-size: var(--fs--Text);
    font-family: 'swissBold';
    padding: 1rem 4rem;
    border-radius: 50px;
    transition: all 0.5s ease;
}

.textBtnContact{
    text-decoration: none;
    color: var(--ligthGreen);
}

.btnContactUs:hover{
    cursor: pointer;
    scale: 1.1;
}

.modal {
    position: fixed;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
    z-index: 600;
}

.modal-bg {
    position: absolute;
    background: #5383eb86;
    width: 100%;
    height: 100%;
}

.modal-container {
    border-radius: 10px;
    background: var(--ligthGreen);
    position: relative;
    padding: 30px;
    width: 36vw;
}

.modal-close {
    position: absolute;
    right: 32px;
    top: 30px;
    outline: none;
    appearance: none;
    color: var(--black);
    background: none;
    border: 0px;
    font-weight: bold;
    cursor: pointer;
    scale: 1.8;
    font-family: 'swissRegular';
    transition: all 0.3s ease;
}

.modal-close:hover{
    scale: 2.2;
    color: var(--blue);
}

/*-------------------------------- form --------------------------------*/
.form-signin{
    margin-left: 26px;
    margin-right: 26px;
    margin-top: 62px;
}

.alert{
    margin-top: 25px;
    font-size: var(--fs--Text);
    color: var(--blue);
    font-family: 'swissBold';
}

.tituloPrinForm{
    margin-top: 18px;
    font-size: var(--fs--Text);
    color: var(--blue);
    font-family: 'swissBold';
    margin-bottom: 6px;
}

.tituloForm{
    margin-top: 18px;
    font-size: var(--fs--Text);
    color: var(--black);
    font-family: 'swissRegular';
    margin-bottom: 6px;
}

.form-control{
    font-size: var(--fs--Text);
    font-family: 'swissLight';
    background-color: var(--white);
    border: 0.5px solid var(--blue);
    border-radius: 14px;
    padding: 6px;
    padding-left: 12px;
    width: 100%;
}

.btn-lg{
    font-size: var(--fs--Text);
    font-family: 'swissBold';
    margin-top: 36px;
    padding: 0.6rem 3.6rem;
    border: 0.5px solid var(--blue);
    border-radius: 14px;
    background-color: var(--blue);
    color: var(--white);
    transition: all 0.3s ease;
}

.btn-lg:hover{
    scale: 1.11;
    cursor: pointer;
}

/*-------------------------------- empower --------------------------------*/
.empowercontainer{
    background-image: url(./empowerContainerImg.webp);
    height: 64vh;
    background-size: cover;
    background-position: bottom;
    display: flex;
    flex-direction: column;
}

.copyEmpower{
    width: 52%;
    margin-top: auto;
    margin-bottom: -5px;
    margin-left: auto;
    margin-right: auto;
}


/*-------------------------------- empower --------------------------------*/
.aboutUs{
    width: 100vw;
    height: auto;
    background-color: var(--ligthGreen);
    display: flex;

}

.infoAboutUsContainer{
    width: 48vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    margin-bottom: 200px;
}

.aboutUsTitle{
    text-transform: uppercase;
    font-size: var(--fs--Title);
    margin-top: 0px;
    margin-bottom: 10px;
    color: var(--blue);
    font-family: 'swissRegular';
}

.whyChoose{
    margin-top: 0px;
    font-size: var(--fs--SubTitle);
    color: var(--black);
    font-family: 'swissBold';
}

.textAboutContainer{
    margin-top: 38px;
}

.titlesAbout{
    /* font-weight: bold; */
    font-family: 'swissBold' !important;
}

.textAboutUs{
    font-size: var(--fs--Text);
    margin: 0;
    display: inline;
    font-family: 'swissLight';
}


/*-------------------------------- stretegy --------------------------------*/
.strategy{
    width: 100vw;
    height: 74vh;
    background-image: url(./ourStrategyImg.webp);
    background-size: cover;
    background-position: bottom;
    display: flex;
    flex-direction: column;
}

/* .logoStrategy{
    width: 4%;
    margin-left: 5%;
    margin-top: 5%;
} */

.titleStrategy{
    font-family: 'michroma';
    font-size: var(--fs--superTitle);
    color: var(--ligthGreen);
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: 0px;
}

.stretegy2{
    width: 100vw;
    height: 52vh;
    background-color: var(--black);
    margin-top: -10px;
    display: flex;
    flex-direction: column;
}

.textStrategyContainer{
    width: 48vw;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

.textStrategy{
    color: var(--white);
    font-size: var(--fs--Text);
    font-family: 'swissLight';
}


/*-------------------------------- footer --------------------------------*/
footer{
    background-color: var(--white);
    display: flex;
    flex-direction: column;
}

.imgFooter{
    width: 24%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 82px;
}

.footerContainer{
    display: flex;
    justify-content: space-between;
    padding-left: 5vw;
    padding-right: 5vw;
    margin-top: 72px;
    margin-bottom: 54px;
}

.btnFooter{
    background-color: var(--green);
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-top: auto;
    margin-bottom:auto;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.btnFooter:hover{
    scale: 1.1;
    cursor: pointer;
    box-shadow: 10px 5px 5px var(--ligthGreen);
}

.btnFooter svg{
    fill: var(--black);
    margin-top: 5px;
    margin-bottom: auto;
    font-family: 'swissBold';
    
}

.redesFooter{
    /* margin-top: 52px; */
    display: flex;
    justify-content: center;
    width: auto;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: auto;
    margin-bottom: auto;
}

.aFooter2{
    margin-left: 35px;
}

.icoRedes{
    width: 3rem;
    fill: var(--black);
    transition: all 0.24s ease;
}

.icoRedes:hover{
    fill: var(--green);
    scale: 1.1;
}

.derechosFooter{
    font-size: var(--fs--Text);
    color: var(--black);
    font-family: 'swissLight';
    margin-top: auto;
    margin-bottom: auto;
    margin-left: -170px;
    margin-right: 0px;
}


/*-------------------------------- respuesta --------------------------------*/
.containerRespuesta{
    background-color: var(--ligthGreen);
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    width: 100vw;
    height: 100vh;
    text-align: center;
}

.textoRespuesta{
    font-size: var(--fs--Text);
    color: var(--black);
    font-family: 'swissRegular';
    width: 90vw;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.btnRegresar{
    max-width: 90vw ;
}

/*-------------------------------- responsive --------------------------------*/
@media screen and (max-width: 1200px) {
        /*-------------------------------- nav --------------------------------*/
    nav{
        margin-top: 0px;
    }

    .menu-btn {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 24px;
        width: 24px;
        margin: 20px;
        margin-top: 10px;
        margin-left: auto;
        float: right;
        z-index:50;
        margin-right: 5vw;
        background-color: var(--ligthGreen);
        padding: 25px;
        border-radius: 26px;
    }

    #ham{
        display: inline;
        margin-top: 0px;
        z-index: 50;
        color: var(--black);
        fill: var(--black);
        scale: 1.8;
        transition: transform 0.3s ease-in-out;
    }

    #ham:hover{
        color: var(--blue);
        fill: var(--blue);
        scale: 1.9;
    }

    #ham.activeHam{
        display: none;
    }

    #xham{
        display: none;
        margin-top: 0px;
        z-index: 50;
        color: var(--black);
        fill: var(--black);

        scale: 1.8;
    }

    #xham:hover{
        color: var(--blue);
        fill: var(--blue);
        scale: 1.9;
    }

    #xham.activeXHam{
        display: inline;
    }

    .menu {
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--ligthGreen);
        width: 100%;
        margin-left: 0px;
        height: 100vh;
        transform: scaleY(0);
        transform-origin: top;
        transition: transform 0.3s ease-in-out;
        flex-direction: column;
        justify-content: center;
    }

    .eleContainer{
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        border-radius: 0px;
        flex-direction: column;
    }

    .eleNav {
        padding-left: 40px;
        padding-right: 40px;
        font-size: var(--fs--SubTitle);
        text-align: center;
    }

    .spaceNav {
        margin-top: 40px;
        margin-left: 0px;
    }

    .btnContainer {    
        margin-left: auto;
        margin-right: auto;
        margin-top: 60px; /* Espacio para separarlo del último enlace */
        position: relative; /* Para contener a los botones absolutos */
        width: 100%;
        height: 60px; /* Le damos altura porque sus hijos flotan */
        display: flex;
        justify-content: center;
    }

    .botonLenguaje {
        margin-left: 0px;
        padding-left: 0px;
        position: absolute;
        
        /* El truco mágico para centrar posiciones absolutas */
        left: 50%;
        transform: translateX(-50%);
    }

    .selected {
        border-radius: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        /* Igualamos los paddings izquierdo y derecho para que sea simétrico */
        padding-left: 58px; 
        padding-right: 58px; 
        margin-top: -10px; /* Quitamos el 120px que tenías para que no se baje tanto */
        font-size: var(--fs--SubTitle);
        text-align: center;
    }

    .menu.active {
        transform: scaleY(1);
    }

    .menu.disactive {
        transform: scaleY(0);
    }

    a{
        text-decoration: none;
        color: var(--blue);
    }

    .navElements{
        margin-bottom: 20px;
        text-align: center;
    }

    /*-------------------------------- home --------------------------------*/
    .logoNav2{
    display: none;
    }
}


@media screen and (max-width: 1200px){
    /*-------------------------------- home --------------------------------*/
    .imgNav{
    width: 18%;
    }

    .leftContainer{
        flex: 1.5;
    }

    .rightContainer{
        background-position: center;
    }

    .copyHome{
        width: 104%;
    }

    .btnAboutUs{
        padding: 1rem 6rem;
    }


    /*-------------------------------- weOffer --------------------------------*/
    .textWeOffer{
        width: 56vw;
    }


    /*-------------------------------- aboutUsIntro --------------------------------*/
    .imgAboutUsContainer{
        flex: 1.4;
    }

    .imgAboutUs{
        width: 28%;
    }

    .aboutUsIntroInfo{
        width: 48vw;
    }

    .aboutUsIntroInfoCotainer{
        width: 48vw;
    }

    .btnAboutUsIntro{
        padding: 1rem 6rem;
    }


    /*-------------------------------- contactUS --------------------------------*/
    .aboutUsIntroInfoCotainer{
        width: 48vw;
    }

    .imgContactSection{
        flex: 1.2;
        background-position: 30%;
    }

    .btnContactUs{
        padding: 1rem 6rem;
    }

    .modal-container {
        padding: 36px;
        width: 48vw;
    }

    .modal-close {
        scale: 2;
    }

    .modal-close:hover{
        scale: 2.3;
    }


    /*-------------------------------- form --------------------------------*/
    .btn-lg{
        padding: 0.6rem 4.8rem;
    }


    /*-------------------------------- empower --------------------------------*/
    .copyEmpower{
        width: 78%;
    }


    /*-------------------------------- empower --------------------------------*/
    .infoAboutUsContainer{
        width: 56vw;
    }


    /*-------------------------------- stretegy --------------------------------*/
    /* .logoStrategy{
        width: 6%;
    } */

    .textStrategyContainer{
        width: 56vw;
    }


    /*-------------------------------- footer --------------------------------*/
    .footerContainer{
        justify-content: center;
        flex-direction: column;
    }

    .btnFooter{
        background-color: var(--green);
        margin-top: auto;
        margin-bottom: auto;
        display: flex;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-top: auto;
        margin-bottom:auto;
        border-radius: 6px;
        transition: all 0.3s ease;

        position: absolute;
        right: 5vw;
        margin-top: 50px;
    }


    .redesFooter{
        /* margin-top: 52px; */
        display: flex;
        justify-content: center;
        width: auto;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: auto;
        margin-bottom: auto;
    }


    .derechosFooter{
        margin-top: 24px;
        margin-left: 0px;
        margin-right: 0px;
        text-align: center;
    }

    .imgFooter{
        width: 38%;
    }
}


@media screen and (max-width: 900px){
    /*-------------------------------- home --------------------------------*/
    .imgNav{
        width: 24%;
        margin-top: 26px;
    }

    .leftContainer{
        flex: 3;
    }

    .rightContainer{
        background-position: 38%;
    }

    .btnAboutUs{
        padding: 1rem 8rem;
    }

    /*-------------------------------- weOffer --------------------------------*/
    .textWeOffer{
    width: 68vw;
    }

    /*-------------------------------- aboutUsIntro --------------------------------*/
    .imgAboutUsContainer{
    flex: 1.2;
    }

    .imgAboutUs{
    width: 34%;
    }

    .aboutUsIntroInfo{
    width: 52vw;
    }

    .aboutUsIntroInfoCotainer{
    width: 52vw;
    }

    .btnAboutUsIntro{
    padding: 1rem 8rem;
    }


    /*-------------------------------- contactUS --------------------------------*/
    .imgContactSection{
    flex: 0.8;
    background-position: 30%;
    }

    .btnContactUs{
    padding: 1rem 8rem;
    }

    .modal-container {
    padding: 46px;
    width: 74vw;
    }

    .modal-close {
    scale: 3;
    }

    .modal-close:hover{
    scale: 3.2;
    }

    /*-------------------------------- form --------------------------------*/
    .btn-lg{
    padding: 0.9rem 6.8rem;
    }


    /*-------------------------------- empower --------------------------------*/
    .copyEmpower{
    width: 82%;
    }


    /*-------------------------------- empower --------------------------------*/
    .infoAboutUsContainer{
    width: 68vw;
    }


    /*-------------------------------- stretegy --------------------------------*/
    /* .logoStrategy{
    width: 8%;
    } */

    .textStrategyContainer{
    width: 68vw;
    }


    /*-------------------------------- footer --------------------------------*/
    .imgFooter{
    width: 46%;
    }

    .redesFooter{
    margin-top: 92px;
    }

    .aFooter2{
    margin-left: 80px;
    }

    .icoRedes{
    width: 4rem;
    }
}


@media screen and (max-width: 700px){
    /*-------------------------------- home --------------------------------*/
    .home{
        flex-direction: column;
    }

    .imgNav{
        width: 38%;
    }

    .leftContainer{
        flex: 2;
    }

    .leftContainer{
        padding-top: 30%;
    }

    .rightContainer{
        background-position: center;
    }

    .rightContainer{
        background-position: center;
    }

    .copyHome{
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50px;
    }

    .textHome{
        color: var(--black);
        margin-left: auto;
        margin-right: auto;
    }

    .btnAboutUs{
        margin-left: auto;
        margin-right: auto;
        width: 70vw;
        padding: 1.2rem 0rem;
        text-align: center;
    }

    /*-------------------------------- weOffer --------------------------------*/
    .weOfferSection{
    padding-top: 80px;
    padding-bottom: 80px;
    }

    .textWeOffer{
        width: 90vw;
    }

    /*-------------------------------- aboutUsIntro --------------------------------*/
    .aboutUsIntro{
        width: 100vw;
        display: flex;
        flex-direction: column-reverse;
        height: 84vh;
    }

    .imgAboutUsContainer{
        flex: 1;
        margin-top: auto;
        margin-bottom: auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .imgAboutUs{
        margin-left: auto;
        margin-right: auto;
        margin-top: auto;
        margin-bottom: auto;
        width: 14%;
    }

    .aboutUsIntroInfo{
        flex: 4;
        width: 100vw;
    }

    .aboutUsIntroInfoCotainer{
        width: 90vw;
        margin-left: auto;
        margin-right: auto;
    }

    .btnAboutUsIntro{
        width: 70vw;
        margin-left: auto;
        margin-right: auto;
        padding: 1.2rem 0rem;
        text-align: center;
    }


    /*-------------------------------- contactUS --------------------------------*/
    .contactSection{
        flex-direction: column;
        height: 84vh;
    }

    .contatUsInfo{
        flex: 4;
        flex-direction: column;
    }

    .aboutUsIntroInfoCotainer{
        width: 90vw;
    }

    .imgContactSection{
        flex: 2;
        background-position: center;
    }

    .btnContactUs{
        width: 70vw;
        margin-left: auto;
        margin-right: auto;
        padding: 1rem 0rem;
        text-align: center;
    }

    .modal-container {
    border-radius: 10px;
    background: var(--ligthGreen);
    position: relative;
    padding: 20px;
    width: 80vw;
    }


    /*-------------------------------- form --------------------------------*/
    .form-signin{
        margin-left: 0;
        margin-right: 0;
    }

    .form-control{
        width: 94%;
    }

    .btn-lg{
        width: 100%;
    }


    /*-------------------------------- empower --------------------------------*/
    .empowercontainer{
        height: 64vh;
        background-position: 78%;
    }

    .copyEmpower{
        width: 90%;
    }



    /*-------------------------------- empower --------------------------------*/
    .infoAboutUsContainer{
        width: 90vw;
        margin-top: 80px;
        margin-bottom: 80px;
    }

    .aboutUsTitle{
        margin-bottom: 24px;
    }

    .textAboutContainer{
        margin-top: 58px;
    }


    /*-------------------------------- stretegy --------------------------------*/
    .strategy{
        background-position: 35%;
    }

    .titleStrategy{
        margin-left: 5%;
        margin-right: 5%;
        padding-left: 5%;
        padding-right: 5%;
    }

    .textStrategyContainer{
        width: 90vw;
    }

    /*-------------------------------- footer --------------------------------*/
    .imgFooter{
        width: 66%;
    }

    .redesFooter{
        margin-top: 82px;
        justify-content: center;
        width: 90vw;
    }

    .aFooter2{
        margin-left: 60px;
    }

    .icoRedes{
        width: 3.8rem;
    }

    .derechosFooter{
        margin-top: 52px;
    }

    .btnFooter {
    margin-top: 110px;
    }

    .footerContainer {
        margin-top: 2px;
    }
}