html{
    overflow-x:hidden;
}
/*-------------------------------- Scroll Bar --------------------------------*/
/* Works on Firefox */
* {
    scrollbar-width:thin;
    scrollbar-color: var(--blueSe) var(--white);
}   

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

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

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

/*--------------------------------fonts--------------------------------*/
@font-face {
    font-family: ClashGroteskMedium;
    src: url(./ClashGrotesk-Medium.otf);
    font-display: swap;
}

@font-face {
    font-family: NacelleRegular;
    src: url(./Nacelle-Regular.otf);
    font-display: swap;
}

@font-face {
    font-family: NacelleLight;
    src: url(./Nacelle-Light.otf);
    font-display: swap;
}



/*--------------------------------root--------------------------------*/
:root {
    --bluePr: #1222FF;
    --blueSe: #0C43FF;
    --blueOpacity: #1222ff51;
    --blueOpacity2:rgba(18, 34, 255, 0.917);
    --white: #F2F2F2;
    --black: #000818;
    --blueDeg:linear-gradient(140deg, rgba(2,123,255,1) 0%, rgba(18,33,255,1) 100%);    
}

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

p, h1{
    color: var(--black);
}


/*---------------------------------------- Pantalla de carga ----------------------------------------*/
#hiddenBody{
    overflow:hidden;
}

#loaderP{
    z-index: 100;
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--white);
}

#loader{
    width: 140px;
    height: 140px;
    display: flex;
    color: var(--blueSe);
    margin: auto;
    
    --c:#0000 calc(100% - 40px),currentColor calc(100% - 38px) 98%,#0000;
    background:
        radial-gradient(farthest-side at left,var(--c)) right /50% 100%,
        radial-gradient(farthest-side at top ,var(--c)) bottom/100% 50%;
    background-repeat: no-repeat;
    animation: f8-0 2s infinite linear .25s;
}
#loader::before{
    content:"";
    width:50%;
    height: 50%;
    background:radial-gradient(farthest-side at bottom right,var(--c));
    animation: f8-1 .5s infinite linear;
}


@keyframes f8-0 {
    0%   ,12.49% {transform: rotate(0deg)}
    12.5%,37.49% {transform: rotate(90deg)}
    37.5%,62.49% {transform: rotate(180deg)}
    62.5%,87.49% {transform: rotate(270deg)}
    87.5%,100%   {transform: rotate(360deg)}
}

@keyframes f8-1 {
    0%      {transform: perspective(300px) rotateY(0)      rotate(0)} 
    50%     {transform: perspective(300px) rotateY(180deg) rotate(0)} 
    80%,100%{transform: perspective(300px) rotateY(180deg) rotate(90deg)}
}


/*---------------------------------------- Nav ----------------------------------------*/
.header{
    width: 100vw;
    background-color: transparent;
    padding: 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    will-change: transform;
}

.menu-btn {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 30px;
    width: 37px;
    margin-top: 30px;
    margin-right: 5%;
    float: right;
    z-index:50;
}

#ham{
    display: inline;
    margin-top: 30px;
    z-index: 50;
    color: var(--blueSe);
    scale: 1.1;
    transition: transform 0.3s ease-in-out;
}

#ham:hover{
    color: var(--bluePr);
    scale: 1.2;
}

#ham.activeHam{
    display: none;
}

#xham{
    display: none;
    margin-top: 30px;
    z-index: 200;
    color: var(--white);
    scale: 1.1;
}

#xham:hover{
    color: rgb(181, 181, 181);
    scale: 1.2;
}

#xham.activeXHam{
    display: inline;
}

.btn-line {
    width: 100%;
    height: 5px;
    border-radius: 2px;
    background-color: #e3e3e3;
    background-color: rgb(223, 223, 223);
    z-index: 50;
}

.menu {
    position: absolute;
    top: 0px;
    right: 0;
    background-color: var(--blueSe);
    width: 40%;
    height: 100vh;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease-in-out;
}

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

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

.menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.menu-items li {
    margin-bottom: 20px;
}

.menu-items a {
    text-decoration: none;
    color:var(--white);
    font-size: 1.2rem;
    font-family: ClashGroteskMedium;
    font-weight: medium;
}

.menu-items a:hover {
    color: rgb(181, 181, 181);
}


/*---------------------------------------- home ----------------------------------------*/
#home{
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#circle2{
    position: absolute;
    top: auto;
    left: auto;
    bottom: 0px;
    right: 0px;
    width: 10%;
    rotate: 180deg;
}

#logoHome{
    position: absolute;
    width: 50%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}


/*---------------------------------------- aboutUs ----------------------------------------*/
#aboutUs{
    display: flex;
}


.aboutElements{
    margin-left: 10%;
    margin-top: 80px;
}

.titleAboutUs{
    font-family: ClashGroteskMedium;
    font-size: 2.8rem;
}

.textAboutUs{
    font-family: NacelleRegular;
    font-size: 1.9rem;
    max-width: 51%;
}


/*Problem Solving*/
.titleAboutUs:nth-child(3){
    margin-top: 100px;
    text-align: left;
    margin-left: calc(50% - 11%);
    margin-right: 10%;
}

.textAboutUs:nth-child(4){
    text-align: left;
    max-width: 51%;
    margin-left: auto;
    margin-right: 10%;
}


/*Our Solution*/
.titleAboutUs:nth-child(5){
    margin-top: 100px;
}


/*Our Goals*/
.titleAboutUs:nth-child(7){
    margin-top: 100px;
    text-align: left;
    margin-left: calc(50% - 11%);
    margin-right: 10%;
}

.textAboutUs:nth-child(8){
    text-align: left;
    max-width: 51%;
    margin-left: auto;
    margin-right: 10%;
}


/*---------------------------------------- sepAzul ----------------------------------------*/
#sepAzul{
    margin-top: 100px;
    width: 100%;
    height: 100vh;
    background-image: url(./fondoFooter.webp);
    background-size: cover;
    display: flex;
    flex-direction: column;
}

.titleSep{
    position: relative;
    margin-top: 70px;
    margin-left: 10%;
    font-family: NacelleLight;
    font-size: 1.5rem;
    font-weight: 100;
    color: var(--white);
}

.imgSep1{
    position: relative;
    width: 15%;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

.imgSep2{
    position: relative;
    width: 22%;
    margin-left: auto;
    margin-right: 9%;
    margin-bottom: 70px;
}


/*---------------------------------------- team ----------------------------------------*/
#teamAndKey{
    margin-top: 100px;
    margin-left: 10%;
}

.titleTeam{
    font-family: ClashGroteskMedium;
    font-size: 2.8rem;
}

.membersTeam{
    display: flex;
    flex-direction: column;
    max-width: 90%;
}

.imgMembers{
    width: 30%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.tittleMembers{
    font-family: ClashGroteskMedium;
    font-size: 2.2rem;
}

.textMembers{
    max-width: 90%;
    font-family: NacelleRegular;
    font-size: 1.6rem;
}


/*---------------------------------------- partners ----------------------------------------*/
.partnersResor{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 80px;
}

.titlePartners{
    font-family: ClashGroteskMedium;
    font-size: 2.8rem;
}

.imgPartContainer{
    display: flex;
    width: 100%;
    margin: 0px;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.imgPartContainer :nth-child(n){
    width: 22%;
    margin-top: auto;
    margin-bottom: auto;
}


/*---------------------------------------- footer ----------------------------------------*/
footer{
    margin-top: 50px;
    background-color:  var(--blueSe);
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.imgFooter{
    width: 13%;
    margin-top: auto;
    margin-bottom: auto;
}

.textFooter{
    margin-top: auto;
    margin-bottom: auto;
    font-family: ClashGroteskMedium;
    font-size: 3.2rem;
    color: var(--white);
    margin-left: 80px;
    padding-top: 40px;
    padding-bottom: 40px;
}


/*---------------------------------------- Responsive ----------------------------------------*/
/*---------------------------------------- 900px ----------------------------------------*/
@media screen and (max-width: 900px){
    /*---------------------------------------- home ----------------------------------------*/
    #circle2{
        width: 17%;
    }

    #logoHome{
        width: 60%;
    }


    /*---------------------------------------- aboutUs ----------------------------------------*/
    .aboutElements{
        margin-top: 70px;
    }

    .titleAboutUs{
        font-size: 2rem;
    }

    .textAboutUs{
        font-size: 1.4rem;
        max-width: 65%;
    }

    /*Problem Solving*/
    .titleAboutUs:nth-child(3){
        margin-top: 70px;
        margin-left: calc(25%);
    }

    /*Our Solution*/    
    .titleAboutUs:nth-child(5){
        margin-top: 70px;
    }
    .textAboutUs:nth-child(4){
        max-width: 65%;
    }

    /*Our Goals*/
        .titleAboutUs:nth-child(7){
        margin-top: 70px;
        margin-left: calc(25%);
    }
    .textAboutUs:nth-child(8){
        max-width: 65%;
    }

    /*---------------------------------------- sepAzul ----------------------------------------*/
    .titleSep{
        margin-top: 60px;
        font-size: 1.4rem;
    }

    .imgSep1{
        width: 30%;
    }

    .imgSep2{
        width: 25%;
        margin-bottom: 60px;
    }


    /*---------------------------------------- team ----------------------------------------*/
    #teamAndKey{
        margin-top: 80px;
    }

    .titleTeam{
        font-size: 2rem;
    }

    .imgMembers{
        width: 40%;
        margin-top: 60px;
    }

    .tittleMembers{
        font-size: 1.8rem;
    }

    .textMembers{
        font-size: 1.4rem;
    }


    /*---------------------------------------- partners ----------------------------------------*/
    .partnersResor{
        margin-top: 70px;
    }

    .titlePartners{
        font-size: 2rem;
    }

    .imgPartContainer :nth-child(n){
        width: 23%;
    }


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

    .textFooter{
        font-size: 3rem;
        padding-top: 35px;
        padding-bottom: 35px;
    }
}


/*---------------------------------------- 600px ----------------------------------------*/
@media screen and (max-width: 600px){
    /*---------------------------------------- Nav ----------------------------------------*/
    .menu-btn{
        margin-top: 10px;
    }

    #ham{
        scale: 1;
    }

    #ham:hover{
        scale: 1.1;
    }

    #xham{
        scale: 1;
    }

    #xham:hover{
        scale: 1.1;
    }

    .menu {
        width: 75%;
    }

    .menu-items a {
        font-size: 1rem;
    }


    /*---------------------------------------- home ----------------------------------------*/
    /* #circle1{
        width: 20%;
    } */

    #circle2{
        width: 20%;
    }

    #logoHome{
        width: 80%;
    }


    /*---------------------------------------- aboutUs ----------------------------------------*/
    .aboutElements{
        margin-top: 70px;
    }

    .titleAboutUs{
        font-size: 20px;
    }

    .textAboutUs{
        font-size: 18px;
        max-width: 80%;
    }

    /*Problem Solving*/
    .titleAboutUs:nth-child(3){
        margin-top: 65px;
        margin-left: 10%;
    }

    .textAboutUs:nth-child(4){
        max-width: 80%;
    }

    /*Our Solution*/
    .titleAboutUs:nth-child(5){
        margin-top: 65px;
    }

    /*Our Goals*/
    .titleAboutUs:nth-child(7){
        margin-top: 65px;
        margin-left: 10%;
    }
    .textAboutUs:nth-child(8){
        max-width: 80%;
    }


    /*---------------------------------------- sepAzul ----------------------------------------*/
    .titleSep{
        margin-top: 50px;
        font-size: 20px;
    }

    .imgSep1{
        width: 45%;
    }

    .imgSep2{
        width: 30%;
        margin-bottom: 50px;
    }


    /*---------------------------------------- team ----------------------------------------*/
    #teamAndKey{
        margin-top: 80px;
    }

    .titleTeam{
        font-size: 20px;
    }

    .imgMembers{
        width: 65%;
        margin-top: 60px;
    }

    .tittleMembers{
        margin-top: 50px;
        font-size: 18px;
    }

    .textMembers{
        font-size: 16px;
    }

    /*---------------------------------------- partners ----------------------------------------*/
    .partnersResor{
        margin-top: 60px;
        
    }

    .titlePartners{
        font-size: 20px;
    }

    .imgPartContainer :nth-child(n){
        width: 45%;
    }

    .imgPartContainer{
        width: 100%;
        margin-right: 10%;
        flex-wrap: wrap;
    }
    

    /*---------------------------------------- footer ----------------------------------------*/
    footer{
        margin-top: 0px;
    }

    .imgFooter{
        width: 20%;
    }

    .textFooter{
        font-size: 28px;
        padding-top: 20px;
        padding-bottom: 20px;
    }


}