:root{
    --main-c:rgba(179, 233, 183, 0.7);;
    --border-r:.2rem;
    --second-c:rgb(9, 58, 25);
}

/** Estilos generales **/

html * {
   
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


p {
    font-size: 1.1rem;
}

a{
    text-decoration: none;
}

ul, li {
    list-style: none;
}

.wrap-cta{
    padding: 1.5rem 0;
}

.cta-a{
    color:#fff;
    font-weight: bold;
    font-size: 1.2rem;
    background-color: rgb(9, 58, 25);
    padding: .5rem 1rem;
    border-radius: var(--border-r);
}

h1{
    font-size: 2.8rem;
}

h2{
    font-size: 2.5rem;
    
}

h3{
    font-size: 2.2rem;
    color: #ececec;
}


.header{
    position: fixed;
    width: 100%;
    height: auto;
    display: flex;
    align-items:center;

    justify-content: space-between;
    padding: 2rem;
    background-color: transparent;
    z-index: 90;
    transition-duration: 1s;
}

.abajo, .abajo.nav ul li a{
    margin-top: 10px;
    background-color: #fff;
    padding: 1px 5px;
    
}

.abajo nav ul li a{
    color: var(--second-c);
    
}

.nav{
    justify-self: end;
    padding-right: 3rem;
}

.logo{
    max-width: 9rem;
    min-width: 120px;
    height: auto;
}

.nav-list{
    list-style-type: none;
    display: flex;
    gap: 3rem;
}

.nav-list li:hover{
    text-decoration: underline;
}

.nav-list li a{
    
    font-size: 18px;
    color:#fff;
    font-weight: bold;
}

.abrir-menu,
.cerrar-menu{
    display: none;
    z-index: 100;

}



/* Translate */


.translate img{
    width: 15px;
    height: 15px;
    transition: 1s;

} 

.idioma{
    gap: 5px;
    padding-top: 0rem;
    border: 1px solid rgb(219, 219, 219);
    position:relative;
}

.idioma:hover{
    background-color: rgb(228, 228, 228);
}

.idiomas {
    position: absolute;
    right: 75px;
    top: 5.5rem;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
}

.idiomas li{
    width: 100%;
}

.idiomas li a{
    display: block;
    padding: 10px;
    font-size: 10px;
    color: rgb(85,85,85);
}

.idiomas li a:hover{
    background-color: rgb(219, 219, 219);
}

.idiomas li img{
    border-radius: 50%;
}

/*togle -js */
.toggle{
    visibility:visible;
}

.idiomas.visible{
    opacity: 1;
    visibility: visible;
}
.todas-sections{
    background-color: rgba(7, 69, 11, 0.7);
}
.hero-section{
    position: relative;
    top:0;
    width:100%;
    height: auto;
    background: url(../images/fondo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color:  rgba(64, 89, 65, 0.7);
    background-blend-mode: multiply;
    z-index: 1;
    
    
}

.wrap-hero-section {
    padding: 15rem 3rem;
}

.wrap-hero-section h1, p{
    color: #fff;
} 

.section-trabajos{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    background-color: var(--main-c);
}

.section-trabajos h2{
    
    padding: 4rem;
    
}

.wrap-trabajos-section{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    

}

.wrap-trabajos-section img{
    max-width: 350px;
    height: auto;
    border-radius: 30px;
    box-shadow: 10px 5px 5px var(--second-c);
    
}

.item-trabajos-section{
    padding: 1rem;
   
    height: auto;
    align-self: center;
    
}
.nosotros{
    position: relative;
    padding: 10rem 6rem;
    width:50%;
    height: auto;
    gap:2rem;
    
    
}

.nosotros-titulo{
    display: flex;
    justify-content: center;
    margin: 3rem 1 rem;
    color: #ececec;
}

.nosotros-texto{
    padding: 3rem;
    line-height: 2rem;
}

#nosotros-boton{
    padding: 5rem 1rem;
}


/** Servicios section **/


.wrap-servicios-section{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 3rem 0rem;
    
}

.wrap-title-section {
    justify-self: center;
    padding: 4rem;
    color: #ececec;
}

.wrap-servicios-section p, h4{
    color: #ececec;
   
}

.item-servicios-section{
    padding: 1rem;
    width: 300px;
    height: auto;
}

.item-servicios-section img{
    margin-bottom: 1rem;
    width: 250px;
    height: 225px;
    border-radius: 30px;
    box-shadow: 10px 5px 5px rgb(9, 58, 25);
    object-fit:cover;
}



.wrap-img_two-column{
  padding: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  
}


.wrap-text-column h3{
    padding: 2rem 0;
}

.wrap-text-column p{
    padding-bottom: 1rem;
}


section.two-column-section.form{
   
    padding-left: 2rem;
   
}


.form input, .form textarea{
    display: flex;
    width: auto;
    
    line-height: 1.75rem;
    border: 1.5px solid #fff;
    border-radius: var(--border-r);

}

.form textarea{
    min-height: 200px;
}

input[type="submit"]{

    border: 0;
    display: inline;
    cursor: pointer;
}

/** Footer **/
.footer-section{
    max-width: 1200px;
    margin: 0 auto;

}

.menu-footer-section{
    padding: 1rem 0;

}

.wrap-social-logos ul, .wrap-menu.footer.section ul{
    display: flex;
    justify-content: center;
}

.social-logo{
    max-width: 45px;
    width: 100%;
    padding: 1rem;
}

.wrap-menu-footer-section ul li{
    font-size: 1.1rem;
    padding-left: 1.5rem;
    padding-top: .5rem;
}

.footer-creds{
    display: flex;
    justify-content: center;

}
.text-footer{
    color: #1c1c1c;
}


@media screen and (max-width: 880px) {

    h1{
        font-size: 10vw;
    }

    h2{
        font-size: 8vw;
    }
    h3{
        font-size: 5vw;
    }

    .logo{
        min-width: 90px;
        width: 15%;
        height: auto;
    }

    .todas-sections{
        width: 100%;
        padding: 0;
    }

    .hero-section{

        height: auto;
    }

    .wrap-hero-section{
        padding-top: 14rem;
    }

    .nosotros{
        padding: 5rem 0rem;
        width:auto;
        height: auto;
    }

    .section-trabajos{
        height: 100%;
        padding: 5rem 0rem;
    }



    .section-trabajos h2{
    
        padding:  1rem;
    
    }
    

    .wrap-trabajos-section  {
        width: 100%;
       
    }

    .wrap-trabajos-section img{
        width:70%;
    }

    .wrap-title-section{
        padding: 5em 0em 0em 0em;
    }

    .item-servicios-section{
        padding: 1em 1em; 
    }
    .translate{
        position: absolute;
        top: 0;
        padding-top: 2.2rem;
        padding-right: 5rem;
        
    }

    .idiomas{
        background-color: #ececec;
        border-radius: 1rem;
        top:4rem;
        right: 25px;
        
    }

    
    .option span{
        color:#1c1c1c;
    }


    .idioma{
        border: none;
    }

    .idioma:hover {
        background-color: #4d4949;
            
    }

    .idiomas li a:hover{
         background-color: #4d4949 ;
    }

    .idiomas li a:hover  span {
        color:#ececec;
    }

    
    
    .abrir-menu,
    .cerrar-menu{
        display: block;
        padding-right: 3rem;
        border: 0;
        font-size: 1.25rem;
        background-color: transparent;
        cursor: pointer;
    }

    .abrir-menu{
        color: #1c1c1c;
    }

    .cerrar-menu{
        color: #ececec;
        padding-right: 0rem;
    }

    .nav{
        opacity: 0;
        visibility: hidden;
        height:100%;
        width: 0px;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 1rem;
        position: absolute;
        top: 0;
        right: 0;
        padding: 2rem 5rem;
        bottom: 0;
        background-color: #1c1c1c;
        box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
    }

    .nav.visible{
        opacity: 1;
        visibility: visible;
        height: 100vh;
        width: 130px;
    }

    .nav-list{
        flex-direction: column;
        align-items: end;
    }

    .nav-list li a:hover{
        text-decoration: underline;
    }

    .nav-list li a{
        color: #ececec;
    }

    .abajo nav ul li a{
        color:  #ececec;
    }
    
}


@keyframes show {
    from{
        opacity: 0;
        scale:  15%;

    }

    to{
        opacity: 1;
        scale: 100%;
    }
}

@keyframes show1 {
    from{
        opacity: 0;
        scale:  1%;

    }

    to{
        opacity: 1;
        scale: 100%;
    }
}

@keyframes show2 {
    from{
        opacity: 0;
        scale:  0%;
        transform: translateX(-100%);

    }

    to{
        opacity: 1;
        scale: 100%;
         transform: translateX(0%);
    }
}


.nosotros-texto,
.nosotros-titulo,.wrap-title-section,
#nosotros-boton{
    view-timeline-name: --image;
    view-timeline-axis: block;
    animation-timeline: --image;
    animation-name: show2;

    animation-range: entry 25% cover 30%;
    animation-fill-mode: both;

}

.section-trabajos h2,
.item-trabajos-section, .wrap-servicios-section
{
    view-timeline-name: --image;
    view-timeline-axis: block;
    animation-timeline: --image;
    animation-name: show;

    animation-range: entry 25% cover 30%;
    animation-fill-mode: both;
}