@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    scroll-padding: 5rem;
}
body{
    min-width: 100vh;  
    transform: none;
}
/* INTRO INDEX */
#intro-img{
    height: 100vh;
    background-image: url("home/intro-img.png");
    background-size: cover;
    background-repeat: no-repeat;
}
/* INTRO EMPRESA */
#emp-img{
    height: 100vh;
    background-image: url("empresa/emp-img.png");
    background-size: cover;
    background-repeat: no-repeat;
}
/* INTRO OBRA */
#obra-img{
    height: 100vh;
    background-image: url("obras/intro-obra.png");
    background-size: cover;
    background-repeat: no-repeat;
}
.logo-navbar{
    max-width: 150px;
}
li{
    list-style: none;
}
header a{
    text-decoration: none;
    color: #0B0C0D;
    font-family: "Work Sans";
    font-weight: 700;
    font-size: 1.5rem;
}
header a:hover{
    color: #DB8D36;
    transition: 0.3s;
}
header{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 12px 0;
    background-color: #fcfcfc;
    position: fixed;
    padding: 0 2rem;
    width: 100%;
    z-index: 1000;
    
}
.navbar{
    width: 100%;
    height: 60px;
    padding: 45px 128px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
.navbar .links{
    display: flex;
    gap: 2.5rem;
}
.navbar .toggle_btn{
    color: #0B0C0D;
    font-size: 3rem;
    cursor: pointer;
    display: none;
}
.dropdown-menu{
    background-color: #fcfcfc;
    width: unset;
    right: 2rem;
    top: 60px;
    overflow: hidden;
    height: 0;
    transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) ;

}
.dropdown-menu.open{
    height: 240px;

}
.dropdown-menu li{
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* INDEX */

.intro{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 144px 128px;
    background-color: #027DBF;
}
.text-intro{
    color: #fcfcfc;
    width: 50%;
}
.intro-t{
    font-family: "Work Sans";
    margin-bottom: 2.25rem;
    font-size: 2.25rem;
    font-weight: 900;

}
.intro-p{
    font-family: "Roboto";
    font-size: 1.25rem;
    line-height: 2.5rem;
}
.img-intro{
    width: 35%;
}
.hardhat{
    width: 100%;
}
.autoShow{
    animation: autoShowAnimation both;
    animation-timeline: view(80% 5%);
}
@keyframes autoShowAnimation{
    from{
        opacity: 0;
        transform: translateY(200px) scale(.7);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.work{
    padding: 40px 128px;
    background-color: #fcfcfc;
}
.work h1{
    font-family: "Work Sans";
    font-size: 4rem;
    margin-bottom: 5rem;
    font-weight: 900;
}
.work h3{
    font-family: "Work Sans";
    font-size: 2rem;
    margin-bottom: 2.5rem;
    font-weight: 900;
}
.work p{
    font-family: "Roboto";
    font-size: 1.25rem;
    line-height: 2rem;
}
.obra-civil{
    display: flex;
    margin-bottom: 8rem;
}
.text-oc{
    color: #0B0C0D ;
    width: 40%;
    margin-right: 20px;
}
.img-oc{
    position: relative;
    width: 60%;
    overflow: hidden;
}
.img-oc img{
    width: 100%;
    aspect-ratio: 1.675;
    object-fit: cover;
}
.acabados{
    display: flex;
    margin-bottom: 8rem;
}
.text-aca{
    color: #0B0C0D ;
    width: 40%;
    margin-left: 20px;
}
.img-aca{
    width: 60%;
}
.img-aca img{
    width: 100%;
    aspect-ratio: 1.675;
}
.renta{
    display: flex;
    margin-bottom: 8rem;
}
.text-rent{
    color: #0B0C0D ;
    width: 40%;
    margin-left: 20px;
}
.img-rent{
    width: 60%;
}
.img-rent img{
    width: 100%;
    aspect-ratio: 1.675;
}
.clientes{
    padding: 40px 0;
    background-color: #fcfcfc;
}
.clientes h2{
    font-family: "Work Sans";
    margin-bottom: 2.25rem;
    font-size: 2.25rem;
    font-weight: 900;
    text-align: center;
    color: #027DBF;
}

.slider{
    width: 90vw;
    height: auto;
    margin: auto;
    overflow: hidden;
    
}
.slider .slide-track{
    display: flex;
    align-items: center;
    animation: scroll 40s linear infinite;
    -webkit-animation: scroll 40s linear infinite;
    width: calc(300px * 8); 
}
.slider .slide{
    width: 300px;
    padding: 0 40px;
}
.slider .slide img{
    width: 100%;
}
@keyframes scroll{
    0%{
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100%{
        -webkit-transform: translateX(calc(-300px * 4));
        transform: translateX(calc(-300px * 4));
    }
}
.form-list{
    display: flex;
    flex-direction: column;

}
label{
    font-family: "Work Sans";
    font-size: 1.5rem;
    margin-bottom: 2.5rem;
    font-weight: 700;
    display: block;
    color: #fcfcfc;
}
input, textarea, select{
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 3em;
  background-color: #003a5a;
  font-family: "Roboto";
  font-size: 1.25rem;
  border: none;
  padding-left: 1rem;
  color: #fcfcfc;
}
textarea{
    padding-top: 5px;
}
.form{
    background-color: #027DBF;
    display: block;
    justify-content: center;
    gap: 8rem;
    padding: 40px 400px;
}
.form p{
    font-family: "Work Sans";
    font-size: 2rem;
    margin-bottom: 2.5rem;
    font-weight: 900;
    color: #fcfcfc;
    text-align: center;
}

footer{
    background-color: #027DBF;
    padding: 80px 130px;
    display: flex;
    
}
.footer-text{
    width: 60%;
    align-content: flex-start;
}
.footer-text h2{
    font-family: "Work Sans";
    margin-bottom: 3rem;
    font-size: 2.25rem;
    font-weight: 900;
    text-align: start;
    color: #fcfcfc;
}
.footer-text p{
    font-family: "Roboto";
    font-size: 1.5rem;
    line-height: 2rem;
    color: #fcfcfc;
    margin-bottom: 3rem;
}
.footer-text .btn{
    font-family: "Work Sans";
    font-weight: 700;
    font-size: 1.25rem;
    padding: 12px 54px;
    cursor: pointer;
    border: none;
    margin-bottom: 3rem;
    background-color: #fcfcfc;
    color: #0B0C0D;
}
.footer-text .btn:hover{
    background-color: #DB8D36;
    color: #fcfcfc;
    transition: all 0.3s ease 0s;

}
.footer-text a{
    font-family: "Roboto";
    font-size: 1.25rem;
    line-height: 2rem;
    color: #fcfcfc;
}
.mail{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.footer-logo{
    width: 40%;
    display: flex;
    justify-content: flex-end;

}
.logo-footer{
    width: 90%;
    justify-content: flex-end;
}

/* EMPRESA */

.about-emp{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 144px 128px;
    background-color: #fcfcfc;
}
.text-emp{
    color: #0B0C0D;
    width: 50%;
}
.text-emp h1{
    font-family: "Work Sans";
    font-size: 4rem;
    margin-bottom: 5rem;
    font-weight: 900;

}
.text-emp p{
    font-family: "Roboto";
    font-size: 1.25rem;
    line-height: 2.5rem;
}
.logo-emp{
    width: 35%;
}
.logo-emp img{
    width: 100%;
}
.valores{
    padding: 80px 128px;
    background-color: #027DBF;
    border-bottom: 6px solid #fcfcfc;
}
.valores h3{
    font-family: "Work Sans";
    font-size: 2rem;
    margin-bottom: 2.5rem;
    font-weight: 900;
    color: #fcfcfc;
}
.valores p{
    color: #fcfcfc;
    font-family: "Roboto";
    font-size: 1.25rem;
    line-height: 2rem;
}
.mision{
    display: flex;
    margin-bottom: 8rem;
   
}
.mision .text{
    width: 60%;
    margin-right: 20px;
}
.img-mision{

    width: 40%;
    overflow: hidden;
    align-content: center;
}
.img-mision img{
    width: 100%;
    height: 200px;
}
.vision{
    display: flex;
    margin-bottom: 8rem;
   
}
.vision .text{
    width: 60%;
    margin-right: 20px;
}
.img-vision{

    width: 40%;
    overflow: hidden;
    align-content: center;
}
.img-vision img{
    width: 100%;
    height: 200px;
}

/* OBRA */
.about-obra{
    background-color: #027DBF;
    display: block;
    padding: 144px 128px;
    color: #fcfcfc;
    width: 100%;
}
.about-obra h1{
    font-family: "Work Sans";
    font-size: 4rem;
    margin-bottom: 5rem;
    font-weight: 900;

}
.about-obra p{
    width: 60%;
    font-family: "Roboto";
    font-size: 1.25rem;
    line-height: 2.5rem;
}
.proyectos{
    padding: 40px 128px;
    background-color: #fcfcfc;
}
.proyectos h3{
    font-family: "Work Sans";
    font-size: 2rem;
    margin-bottom: 2.5rem;
    font-weight: 900;
}
.proyectos p{
    font-family: "Roboto";
    font-size: 1.25rem;
    line-height: 2rem;
}
.faurecia{
    display: flex;
    margin-bottom: 4rem;
}
.faurecia .text{
    color: #0B0C0D ;
    width: 40%;
    margin-left: 20px;
}
.img{
    position: relative;
    width: 60%;
    overflow: hidden;
}
.img img{
    width: 100%;
    aspect-ratio: 1.675;
    object-fit: cover;
}
.autozone{
    display: flex;
    margin-bottom: 4rem;
}
.autozone .text{
    color: #0B0C0D ;
    width: 40%;
    margin-left: 20px;
}
.prologis{
    display: flex;
    margin-bottom: 4rem;
}
.prologis .text{
    color: #0B0C0D ;
    width: 40%;
    margin-left: 20px;
}
.unilever{
    display: flex;
    margin-bottom: 4rem;
}
.unilever .text{
    color: #0B0C0D ;
    width: 40%;
    margin-left: 20px;
}






@media(max-width: 1270px){
    .text-oc{
        width: 50%;
    }
    .img-oc{
        width: 50%;
    }
    .text-aca{
        width: 50%;
    }
    .img-aca{
        width: 50%;
    }
    .text-rent{
        width: 50%;
    }
    .img-rent{
        width: 50%;
    }
    .img-intro{
        width: 40%;
    }
    .hardhat{
        width: 90%;
    }
    .form{
        padding: 2rem 200px ;
    }
}

@media(max-width: 800px){
    .navbar .links{
        display: none;
    }
    .navbar{
        padding: 40px 30px;
    }
    .navbar .toggle_btn{
        display: block;
    }
    .dropdown-menu{
        display: block;
    }
    .intro{
        padding: 48px 30px;
    }
    .text-intro{
        color: #fcfcfc;
        width: 70%;
    }
    .intro-t{
        width: 80%;
        font-family: "Work Sans";
        margin-bottom: 1.5rem;
        font-size: 1.75rem;
        font-weight: 900;
    
    }
    .intro-p{
        font-family: "Roboto";
        font-size: 1rem;
        line-height: 2.5rem;
        width: 90%;
    }
    .img-intro{
        width: 50%;
    }
    .hardhat{
        width: 100%;
    }
    .work{
        padding: 40px 30px;
        background-color: #fcfcfc;
    }
    .work h1{
        text-align: start;
        font-family: "Work Sans";
        font-size: 3rem;
        margin-bottom: 5rem;
        font-weight: 900;
    }
    .work h3{
        font-family: "Work Sans";
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
        font-weight: 900;
    }
    .work p{
        font-family: "Roboto";
        font-size: 1rem;
        line-height: 1.75rem;
    }
    .obra-civil{
        display: flex;
        margin-bottom: 6rem;
    }
    .text-oc{
        color: #0B0C0D ;
        width: 50%;
        margin-right: 20px;
    }
    .img-oc{
        position: relative;
        width: 50%;
        overflow: hidden;
    }
    .img-oc img{
        width: 100%;
        aspect-ratio: 1.675;
        object-fit: cover;
    }
    .acabados{
        display: flex;
        margin-bottom: 8rem;
    }
    .text-aca{
        color: #0B0C0D ;
        width: 50%;
        margin-left: 20px;
    }
    .img-aca{
        width: 60%;
    }
    .img-aca img{
        width: 100%;
        aspect-ratio: 1.675;
    }
    .renta{
        display: flex;
        margin-bottom: 3rem;
    }
    .text-rent{
        color: #0B0C0D ;
        width: 50%;
        margin-right: 20px;
    }
    .img-rent{
        width: 60%;
    }
    .img-rent img{
        width: 100%;
        aspect-ratio: 1.675;
    }
    .clientes{
        padding: 20px 0;
        background-color: #fcfcfc;
    }
    .clientes h2{
        font-family: "Work Sans";
        margin-bottom: 2.25rem;
        font-size: 2.25rem;
        font-weight: 900;
        text-align: center;
        color: #027DBF;
    }
    .slider{
        width: 90%;
        height: auto;
        margin: 0 30px;
    }

    footer{
        background-color: #027DBF;
        padding: 40px 30px;
        display: flex;
        
    }
    .footer-text{
        width: 60%;
        align-content: flex-start;
    }
    .footer-text h2{
        font-family: "Work Sans";
        margin-bottom: 3rem;
        font-size: 2.25rem;
        font-weight: 900;
        text-align: start;
        color: #fcfcfc;
    }
    .footer-text p{
        font-family: "Roboto";
        font-size: 1.5rem;
        line-height: 2rem;
        color: #fcfcfc;
        margin-bottom: 3rem;
    }
    .footer-text .btn{
        font-family: "Work Sans";
        font-weight: 700;
        font-size: 1.25rem;
        padding: 12px 54px;
        cursor: pointer;
        border: none;
        margin-bottom: 3rem;
        background-color: #fcfcfc;
        color: #0B0C0D;
    }
    .footer-text .btn:hover{
        background-color: #DB8D36;
        color: #fcfcfc;
        transition: all 0.3s ease 0s;
    
    }
    .footer-text a{
        font-family: "Roboto";
        font-size: 1.25rem;
        line-height: 2rem;
        color: #fcfcfc;
    }
    .mail{
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    .footer-logo{
        width: 40%;
        display: flex;
       justify-content: center;
    
    }
    .logo-footer{
        width: 90%;
    }
    .about-emp{
        padding: 48px 30px;
    }
    .text-emp{
        width: 60%;
        margin-right: 20px;
    }
    .text-emp p{
        width: 100%;
    }
    .logo-emp{
        width: 40%;
    }
    .valores{
        padding: 48px 30px;
    }
    .about-obra{
        padding: 48px 30px;
    }
    .about-obra h1{
        text-align: start;
        font-family: "Work Sans";
        font-size: 3rem;
        margin-bottom: 2rem;
        font-weight: 900;
    }
    .proyectos{
        padding: 48px 30px;
    }
    .proyectos h3{
        margin-bottom: 2rem;
    }
    .proyectos p{
        font-family: "Roboto";
        font-size: 1rem;
        line-height: 1.75rem;
    }
    .faurecia .text{
        color: #0B0C0D ;
        width: 50%;
        margin-left: 20px;
    }
    .autozone .text{
        color: #0B0C0D ;
        width: 50%;
        margin-left: 20px;
    }
    .prologis .text{
        color: #0B0C0D ;
        width: 50%;
        margin-left: 20px;
    }
    .unilever .text{
        color: #0B0C0D ;
        width: 50%;
        margin-left: 20px;
    }
    .form{
        padding: 48px 150px;
    }

}

@media(max-width: 500px){
    
    .intro{
        display: flex;
        flex-direction: column;
    }
    .text-intro{
        width: 100%;
    }
    .intro{
        padding: 48px 30px;

    }
    .intro-t{
        width: 100%;
        text-align: center;
        font-family: "Work Sans";
        margin-bottom: 3rem;
        font-size: 3rem;
        font-weight: 900;
    
    }
    .intro-p{
        font-family: "Roboto";
        font-size: 2rem;
        line-height: 4rem;
        width: 90%;
        margin-bottom: 5rem;
    }
    .img-intro{
        width: 60%;
    }
    .hardhat{
        width: 100%;
    }
    .work{
        padding: 48px 30px;
    }
    .work h1{
        font-size: 4rem;
        text-align: center;
    }
    .work h3{
        font-size: 3rem;
        text-align: start;
    }
    .work p{
        text-align: start;
        font-size: 2rem;
        width: 100%;
        line-height: 3rem;
        margin-bottom: 2rem;
    }
    .obra-civil{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 8rem;
    }
    .text-oc{
        width: 100%;
        
    }
    .img-oc{
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .acabados{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 8rem;
    }
    .text-aca{
        width: 100%;
        margin-left: 0;
        
    }
    .img-aca{
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .renta{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 8rem;
    }
    .text-rent{
        width: 100%;
        margin-left: 0;
        
    }
    .img-rent{
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .slider{
        width: 90%;
        height: auto;
        margin: 0 30px;
    }
    footer{
        padding: 48px 30px;
        display: flex;
        flex-direction: column;
        
    }
    .footer-text{
        width: 100%;
    }
    .footer-logo{

        width: 100%;
        display: flex;
        justify-content: center;
    
    }
    .logo-footer{
        padding: 56px 30px;
        width: 80%;
        justify-content: center;
       
    } 

     /* empresa */

    .about-emp{
        display: flex;
        flex-direction: column;
        padding: 48px 30px;
    }
    .text-emp{
        width: 100%;
        margin: 0;

    }
    .text-emp h1{
        width: 100%;
        font-family: "Work Sans";
        margin-bottom: 3rem;
        font-size: 4rem;
        font-weight: 900;
        text-align: center;
    
    }
    .text-emp p{
        font-family: "Roboto";
        font-size: 2rem;
        line-height: 4rem;
        width: 90%;
        margin-bottom: 5rem;
    }
    .logo-emp{
        width: 60%;
    }
    .logo-emp img{
        width: 100%;
    }
    .valores{
        padding: 48px 30px;
    }
    .valores h3{
        font-size: 3rem;
        text-align: start;
    }
    .valores p{
        text-align: start;
        font-size: 2rem;
        width: 100%;
        line-height: 3rem;
        margin-bottom: 2rem;
    }
    .mision{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 8rem;
    }
    .mision .text{
        width: 100%;
        
    }
    .img-mision{
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .vision{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 8rem;
    }
    .vision .text{
        width: 100%;
        
    }
    .img-vision{
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .about-obra{
        padding: 12rem 30;
    }
    .about-obra p{
        font-size: 2rem;
        line-height: 4rem;
        width: 90%;
    }
    .about-obra h1{
        font-size: 4rem;
        text-align: center;
    }
    .proyectos{
        width: 100%;
        padding: 48px 30px;
    }
    .proyectos p{
        font-size: 2rem;
        width: 100%;
        line-height: 3rem;
        margin-bottom: 2rem;
    }
    .proyectos h3{
        font-size: 3rem;
        text-align: start;

    }
    .faurecia{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 8rem;
    }
    .faurecia .text{
        width: 100%;
        margin: 0;
    }
    .faurecia .img{
        width: 100%;
    }
    .autozone{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 8rem;
    }
    .autozone .text{
        width: 100%;
        margin: 0;
    }
    .autozone .img{
        width: 100%;
    }
    .prologis{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 8rem;
    }
    .prologis .text{
        width: 100%;
        margin: 0;
    }
    .prologis .img{
        width: 100%;
    }
    .unilever{
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        margin-bottom: 8rem;
    }
    .unilever .text{
        width: 100%;
        margin: 0;
    }
    .unilever .img{
        width: 100%;
    }
    .form{
        padding: 48px 100px;
    }


}