/*==================================================
    SILPHAC SpA
    responsive.css
    Versión 2.0
==================================================*/


/*==================================================
    01 - NOTEBOOKS
==================================================*/

@media (max-width:1200px){

    .container{

        width:94%;

    }

    h1{

        font-size:56px;

    }

    h2{

        font-size:42px;

    }

}



/*==================================================
    02 - TABLETS
==================================================*/

@media (max-width:992px){

    /* HEADER */

    .navbar .container{

        min-height:80px;

    }

    .logo img{

        height:56px;

    }

    .menu{

        position:fixed;

        top:80px;

        left:-100%;

        width:100%;

        height:calc(100vh - 80px);

        background:#111;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:35px;

        transition:.35s;

    }

    .menu.active{

        left:0;

    }

    .menu-toggle{

        display:block;

    }

    .btn-nav{

        display:none;

    }



    /* HERO */

    .hero{

        min-height:auto;

        padding:120px 0 90px;

    }

    .hero-content{

        max-width:100%;

    }

    .hero h1{

        font-size:52px;

    }

}



/*==================================================
    03 - CELULARES
==================================================*/

@media (max-width:768px){

    .topbar{

        display:none;

    }

    body{

        padding-top:90px;

    }

    section{

        padding:80px 0;

    }

    h1{

        font-size:40px;

    }

    h2{

        font-size:34px;

    }

    h3{

        font-size:24px;

    }

    .hero{

        text-align:center;

    }

    .hero-description{

        font-size:18px;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn-primary,

    .btn-secondary{

        width:100%;

    }

    .hero-features{

        grid-template-columns:1fr;

        gap:18px;

    }

}



/*==================================================
    04 - CELULARES PEQUEÑOS
==================================================*/

@media (max-width:480px){

    .container{

        width:92%;

    }

    h1{

        font-size:34px;

    }

    h2{

        font-size:28px;

    }

    .hero{

        padding-top:60px;

    }

}



/*==================================================
    EXPERIENCIA RESPONSIVE
==================================================*/

@media(max-width:992px){

.experience-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.corporate-strip h2{

    font-size:26px;

}

.experience-grid{

    grid-template-columns:1fr;

}

.experience-card{

    padding:35px 25px;

}

.experience-card h3{

    font-size:42px;

}

}



/*==================================================
    EMPRESA RESPONSIVE
==================================================*/

@media(max-width:992px){

.empresa-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.empresa{

    text-align:center;

}

.empresa-list{

    grid-template-columns:1fr;

}

.empresa-list div{

    justify-content:center;

}

}



/*==================================================
    SERVICIOS RESPONSIVE
==================================================*/

@media(max-width:992px){

.services-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.services-grid{

    grid-template-columns:1fr;

}

.service-card{

    text-align:center;

}

}



/*==================================================
    PROYECTOS RESPONSIVE
==================================================*/

@media(max-width:992px){

.projects-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.project-card img{

    height:260px;

}

.project-info{

    padding:22px;

}

}




/*==================================================
    CLIENTES RESPONSIVE
==================================================*/

@media(max-width:992px){

.clients-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.clients-grid{

    grid-template-columns:1fr;

}

.client-card{

    height:130px;

}

.client-card img{

    max-width:140px;

}

}



/*==================================================
    WHY US RESPONSIVE
==================================================*/

@media(max-width:992px){

.why-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.why-grid{

    grid-template-columns:1fr;

}

}



/*==================================================
    CTA RESPONSIVE
==================================================*/

@media(max-width:768px){

.cta-buttons{

    flex-direction:column;

}

.cta .btn-primary,

.cta .btn-secondary{

    width:100%;

}

}



/*==================================================
    CONTACTO RESPONSIVE
==================================================*/

@media(max-width:992px){

.contact-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.form-grid{

    grid-template-columns:1fr;

}

.contact-form,

.contact-info{

    padding:30px;

}

}



/*==================================================
    MAPA RESPONSIVE
==================================================*/

@media(max-width:768px){

.map iframe{

    height:350px;

}

}



/*==================================================
    FOOTER RESPONSIVE
==================================================*/

@media(max-width:992px){

.footer-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo{

    margin:auto auto 25px;

}

}



/*==================================================
    CLIENTES 2.0
==================================================*/

@media(max-width:768px){

.clients-track img{

    width:120px;

    height:70px;

    margin:0 15px;

    padding:12px;

}

}



@media(max-width:768px){

.prev-image,

.next-image{

    width:45px;

    height:45px;

}

.close-lightbox{

    font-size:42px;

    top:15px;

    right:20px;

}

}