@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
/*### Primario

Rojo brillante: rgb (242, 95, 58)
Azul oscuro: rgb (35, 44, 81)

### Neutro

Azul grisáceo oscuro: rgb (143, 148, 167)
Azul muy oscuro: rgb (29, 30, 37)
Rojo muy pálido: rgb (255, 239, 234)
Variante gris claro: rgb (249, 249, 249)*/
:root{
    /*Primarios*/
    --rojo: rgb(242,95,58);
    --azul: rgb(35,44,81);
    /*Secundarios*/
    --azul-gris: rgb(143,148,167);
    --azul-oscuro: rgb(29,30,37);
    --rojo-palido: rgb(255,239,234);
    --gris: rgb(249,249,249);
    /*Font Size*/
    --h1: 2.5rem;
    --h2: 2rem;
    --p: 1rem;
}
*{
    font-family: 'Be Vietnam Pro', sans-serif;
}
h2{
    font-weight: 700;
    font-size: var(--h2);
    color: var(--azul);
}
#mobile{
    display: none;
}
/**HEADER**/
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0vh 10vw 5vh;
    padding-top: 1vh;
}
header nav a{
    color:var(--azul) ;
    text-decoration: none;
    margin: 0 1vw 0 1vw;
    font-weight: 500;
    transition: all 500ms;
}
button{
    background-color: var(--rojo);
    color: #ffffff;
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.25);
    padding: 15px 25px;
    border: none;
    border-radius: 50px;
    transition: all 1000ms;
}

/**LAND SECTION QUE DE LAND NO TIENE NADA PERO LAND SECTION PORQUE YO SOY EL DEVELOPER**/
.land-section{
    display: flex;
    justify-content: space-between;
    margin: 12.5vh 10vw;
}
.land-section-landingdiv{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 8vh;
    width: 30vw;
}
.land-section-landingdiv h1{
    font-weight: 700;
    font-size: var(--h1);
    color: var(--azul);
    line-height: 130%;
}
.land-section-landingdiv p{
    font-weight: 500;
    line-height: 160%;
    margin-bottom: 3vh;
    font-size: var(--p);
}
/**ABOUT US SECTION**/
.aboutus-section{
    display: flex;
    margin: 4vh 10vw 15vh;
    gap: 12vw;
}
.aboutus-section-description h2{
    line-height: 130%;
}
.aboutus-section-description p{
    font-weight: 500;
    font-size: var(--p);
    color: black;
    line-height: 160%;
}
.aboutus-section-list div{
    transition: all 1000ms;
}
.aboutus-section-list div::before{
    position: relative;
    top: 35px;
    right: 85px;
    content: "01";
    color: #ffffff ;
    background-color: var(--rojo);
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.25);
    padding: 15px 25px;
    border: none;
    border-radius: 50px;
}
.aboutus-section-list div:nth-child(1)::before{
    content: "01";
}
.aboutus-section-list div:nth-child(2)::before{
    content: "02";
}
.aboutus-section-list div:nth-child(3)::before{
    content: "03";
}
.aboutus-section-list div p:nth-child(1){
    color: var(--azul);
    font-weight: 700;
}
.aboutus-section-list div p:nth-child(2){
    color: var(--azul-gris);
    font-weight: 500;
    line-height: 190%;
}
/**TEAM SECTION**/
.team-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5vh 1vw 0vh;
}
.team-section h2{
    transition: all 200ms;
}
.team-section-avatar{
    display: flex;
    flex-direction: row;
    gap: 3vw;
    margin-top: 5.5vh;
}
.team-section-avatar div{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--gris);
    transition: all 800ms;
}
.team-section-avatar div img{
    width: 6rem;
    position: relative;
    top: -5.5vh;
    transition: all 1000ms;
}
.team-section-avatar div span{
    font-weight: 700;
    font-size: 1rem;
    color: var(--azul);
    padding-top: -10px;
    margin-top: -3vh;
}
.team-section-avatar div p{
    color: var(--azul-gris);
    font-weight: 500;
    line-height: 175%;
    transition: all 1000ms;
}
.team-section button{
    margin-top: 5vh;
}
/**BANNER QUE LE PUSE CALL SECTION PORQUE SUPUSE QUE ERA UNA SECCION DE LLAMADO DE ATENCION COMO PARA QUE PRESIONEN PERO CUANDO EL PROFE DIJO QUE ERA UN BANNER LA VERDAD QUE SI, ES UN BANNER**/
.call-section{
    background-color: var(--rojo);
    display: flex;
    height: 28vh;
    align-items: center;
    justify-content: space-between;
    margin-top: 28vh;
    padding: 0 10vw;
}
.call-section h2{
    color: white;
    word-break: break-word;
    width: 28%;
}
.call-section button{
    background-color: white;
    color: var(--rojo);
    font-weight: 500;
}
/**FOOTER**/
footer{
    background-color: var(--azul-oscuro);
    display: flex;
    justify-content: space-between;
    height: 15vh;
    align-items:stretch;
    padding: 10vh 10vw;
}
.footer-logo{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 12vh;
}
.footer-logo-social{
    display: flex;
    align-items: center;
    gap: 0.9vw;
}
.footer-logo-social a{
    transition: all 1000ms;
}
.footer-logo-social a img{
    width: 130%;
}
footer nav{
    display: flex;
    flex-direction: row;
    gap: 14vw;
}
footer nav div{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2.5vh;
}
footer nav div a{
    text-decoration: none;
    font-weight: 400;
    color: #ffffff;
    font-size: 1rem;
    margin-bottom: 1vh;
}
.footer-div3{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 12vh;
}
.footer-div3 span{
    color: var(--azul-gris);
    font-size: 0.8rem;
}
.button{
    background-color: var(--rojo);
    color: #ffffff;
    box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.25);
    padding: 15px 25px;
    border: none;
    border-radius: 50px;
}
#input{
    padding: 15px 25px;
    border: none;
    border-radius: 50px;
    color: var(--azul-gris);
    background-color: #ffffff;
    margin-right: 0.5vw;
}
#input:focus{
    color: black;
}
/**MEDIA PARA HOVER**/
@media (hover: hover) {
    header nav a:hover{
        border-bottom: 2px solid var(--rojo);
        font-size: 1.1rem;
        font-weight: 500;
    }
    button:hover{
        background-color: #ffffff;
        color: var(--rojo);
        font-weight: 700;
        border: 0.5px solid var(--rojo);
    }
    .aboutus-section-list div:hover{
        background-color: var(--rojo-palido);
        transform: scale(1.1);
    }
    .team-section:hover h2{
        border-bottom: 2.5px solid var(--rojo);
    }
    .team-section-avatar div:hover{
        border: 3px solid var(--rojo);
        transform: scale(1.05);
    }
    .team-section-avatar div:hover img{  
        transform: scale(1.10);
    }
    .team-section-avatar div p:hover{
        color: black;
    }
    footer nav div a:hover{
        font-weight: 500;
        color: var(--rojo);
    }
    .button:hover{
        background-color: #ffffff;
        color: var(--rojo);
        font-weight: 700;
    }
    .footer-logo-social a:hover{
        transform: rotate(12deg) scale(1.5);
        position: relative;
        bottom: 10px;
        filter: invert(39%) sepia(84%) saturate(888%) hue-rotate(336deg) brightness(100%) contrast(90%);
    }
    
}
/**MOBILE**/
@media (max-width:425px){
    header nav{
        display: none;
    }
    header button{
        display: none;
    }
    #mobile{
        display: flex;
    }
    #no-mobile{
        display: none;
    }
    .land-section{
        flex-direction: column-reverse;
    }
    .land-section-landingdiv{
        align-items: center;
        text-align: center;
        width: auto;
    }
    .aboutus-section{
        flex-direction: column;
        margin: 4vh 1vw 12vh;
    }
    .aboutus-section-description{
        text-align: center;
    }
    .aboutus-section-list div:nth-child(2) p:nth-child(1){
        text-align: center;
        margin-left: -16px;
    }
    .aboutus-section-list div:nth-child(3) p:nth-child(1){
        margin-left: 53px;
    }
    .aboutus-section-list div p:nth-child(1){
        background-color:var(--rojo-palido);
        padding: 16px 0px;
        margin-left: 20px;
        text-align: center;
    }
    .aboutus-section-list div p:nth-child(3){
        background-color:var(--rojo-palido);
        padding: 16px 0px;
        margin-left: 20px;
        text-align: center;
    }
    .aboutus-section-list div::before{
        right: 0;
        top:50px
    }
    .call-section{
        flex-direction: column;
        height: auto;
        padding-bottom: 3vh;
        margin-top: 12vh;
    }
    .call-section h2{
        color: white;
        word-break: normal;
        text-align: center;
        width: auto;
    }
    #team-section-avatar-1{
        display: none;
    }
    #team-section-avatar-3{
        display: none;
    }
    footer{
        flex-direction: column-reverse;
        height: auto;
        padding: 10vh 0;
        gap: 10vh;
    }
    footer nav {
        gap: 11vw;
        align-items: flex-start;
        justify-content: center;
    }
    .footer-input{
        flex-direction: row;
    }
    .footer-logo{
        flex-direction: column;
    }
    footer span{
        color: var(--azul-gris);
        font-size: 0.8rem;
        order:3;
    }
    .footer-logo a{
        order: 1;
    }
    .footer-logo div{
        display: flex;
        gap: 7vw;
    }
    .footer-logo img{
        width: 15rem;
    }
    .footer-logo div a img{
        width: 2.5rem;
    }
    .footer-logo div a img:hover{
        width:  2.5rem; ;
    }
    .footer-logo img{
        order: 2;
    }
    #desktop-no{
        display: flex;
    }
}