/*======================================================
    CAFEM 2.0
    RESPONSIVE.CSS
======================================================*/


/*======================================================
    TABLETS (1200px)
======================================================*/

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

    .container{

        width:92%;

    }

    .hero h1{

        font-size:52px;

    }

    .hero p{

        font-size:20px;

    }

}


/*======================================================
    TABLETS (992px)
======================================================*/

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

    .navbar{

        height:80px;

    }

    .logo img{

        width:150px;

    }

    .hero{

        min-height:700px;

    }

    .hero h1{

        font-size:46px;

    }

    .hero p{

        font-size:19px;

    }

    .about-grid,

    .experience-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .about-image img,

    .experience-image img{

        height:420px;

    }

    .services-grid{

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

    }

    .why-grid{

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

    }

    .clients-grid{

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

    }

    .stats-grid{

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

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }
	
	

}
/*======================================================
    MÓVILES (768px)
======================================================*/

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

    body{

        overflow-x:hidden;

    }

    .header{

        height:75px;

    }

    .navbar{

        height:75px;

    }

    .logo img{

        width:130px;

    }
	
	.services-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.service-category{

    font-size:28px;

    margin:50px 0 30px;

}

    /*==========================
      BOTÓN MENÚ
    ==========================*/

    .menu-toggle{

        display:block;

    }

    /*==========================
      MENÚ
    ==========================*/

    .menu{

        display:none;

        position:absolute;

        top:75px;

        left:0;

        width:100%;

        background:#ffffff;

        flex-direction:column;

        box-shadow:0 10px 25px rgba(0,0,0,.12);

        padding:10px 0;

    }

    .menu.active{

        display:flex;

    }

    .menu li{

        width:100%;

    }

    .menu li a{

        padding:18px 25px;

        border-bottom:1px solid #eeeeee;

    }

    /*==========================
      SUBMENÚ
    ==========================*/

    .submenu{

        position:relative;

        top:0;

        width:100%;

        display:none;

        box-shadow:none;

        border-radius:0;

        background:#f7f7f7;

    }

    .dropdown.open .submenu{

        display:block;

    }

    .submenu li a{

        padding-left:45px;

    }

    /*==========================
      HERO
    ==========================*/

    .hero{

        height:auto;

        min-height:700px;

        padding:120px 20px 80px;

    }

    .hero h1{

        font-size:38px;

    }

    .hero p{

        font-size:18px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:320px;

    }

    /*==========================
      TÍTULOS
    ==========================*/

    .section-title h2{

        font-size:34px;

    }

    /*==========================
      ABOUT
    ==========================*/

    .about{

        padding:70px 0;

    }

    .about-content{

        text-align:center;

    }

    .about-content h2{

        font-size:34px;

    }

    .about-image img{

        height:320px;

    }

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

    .services{

        padding:70px 0;

    }

    .services-grid{

        grid-template-columns:1fr;

    }

    .service-card{

        max-width:420px;

        margin:auto;

    }

    /*==========================
      ¿POR QUÉ CAFEM?
    ==========================*/

    .why-grid{

        grid-template-columns:1fr;

    }

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

    .experience{

        padding:70px 0;

    }

    .experience-content{

        text-align:center;

    }

    .experience-content h2{

        font-size:34px;

    }

    .experience-image img{

        height:320px;

    }

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

    .clients-grid{

        grid-template-columns:1fr;

    }

    /*==========================
      ESTADÍSTICAS
    ==========================*/

    .stats-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

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

    .cta h2{

        font-size:34px;

    }

    .cta p{

        font-size:17px;

    }

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

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .social{

        justify-content:center;

    }

}
/*======================================================
    TELÉFONOS PEQUEÑOS (480px)
======================================================*/

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

    .container{

        width:94%;

    }

    .logo img{

        width:110px;

    }

    .hero{

        min-height:620px;

        padding:110px 15px 60px;

    }

    .hero-subtitle{

        font-size:13px;

        letter-spacing:2px;

    }

    .hero h1{

        font-size:30px;

        line-height:1.25;

    }

    .hero p{

        font-size:16px;

        line-height:1.7;

    }

    .btn{

        width:100%;

        max-width:280px;

        padding:15px 20px;

        font-size:16px;

    }

    .section-title{

        margin-bottom:50px;

    }

    .section-title h2{

        font-size:28px;

    }

    .section-title p{

        font-size:15px;

    }

    .about-content h2,

    .experience-content h2{

        font-size:28px;

    }

    .about-content p,

    .experience-content p{

        font-size:15px;

        text-align:left;

    }

    .service-card h3{

        font-size:22px;

    }

    .service-card p{

        font-size:15px;

    }

    .why-card{

        padding:30px 20px;

    }

    .why-card h3{

        font-size:22px;

    }

    .why-card p{

        font-size:15px;

    }

    .client{

        min-height:140px;

    }

    .client img{

        max-width:140px;

    }

    .stat h2{

        font-size:42px;

    }

    .stat p{

        font-size:15px;

    }

    .cta{

        padding:70px 20px;

    }

    .cta h2{

        font-size:28px;

    }

    .cta p{

        font-size:15px;

    }

    .footer{

        padding:50px 0 20px;

    }

    .footer-col h3{

        font-size:22px;

    }

    .footer-col p{

        font-size:15px;

    }

    .social a{

        width:45px;

        height:45px;

    }

    .whatsapp-float{

        width:55px;

        height:55px;

        bottom:20px;

        right:20px;

        font-size:30px;

    }

}


/*======================================================
    PANTALLAS GRANDES (1400px)
======================================================*/

@media screen and (min-width:1400px){

    .container{

        max-width:1320px;

    }

    .hero h1{

        font-size:70px;

    }

    .hero p{

        font-size:24px;

    }

    .section-title h2{

        font-size:48px;

    }

    .about-content h2,

    .experience-content h2{

        font-size:48px;

    }

}
/*======================================================
    GALERÍA - RESPONSIVE
======================================================*/


/*======================================================
    TABLET
======================================================*/

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

    .gallery{

        padding:70px 0 80px;

    }

    .gallery-grid{

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

        gap:25px;

    }

    .gallery-item{

        height:280px;

    }

}


/*======================================================
    CELULAR
======================================================*/

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

    .gallery{

        padding:60px 0 70px;

    }

    .gallery-grid{

        grid-template-columns:1fr;

        gap:25px;

    }

    .gallery-item{

        height:280px;

    }

}


/*======================================================
    CELULAR PEQUEÑO
======================================================*/

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

    .gallery{

        padding:50px 0 60px;

    }

    .gallery-grid{

        gap:20px;

    }

    .gallery-item{

        height:250px;

    }

}
/*======================================================
    CONTACTO - RESPONSIVE
======================================================*/


/*======================================================
    TABLET
======================================================*/

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

    .contact-grid{

        grid-template-columns:1fr;

        gap:30px;

    }


    .contact-info{

        gap:20px;

    }


    .contact-form{

        padding:30px;

    }

}


/*======================================================
    CELULAR
======================================================*/

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

    .contact-section{

        padding:60px 0 70px;

    }


    .contact-grid{

        grid-template-columns:1fr;

        gap:25px;

    }


    .contact-card{

        padding:20px;

        gap:15px;

    }


    .contact-icon{

        width:48px;

        height:48px;

        min-width:48px;

        font-size:18px;

    }


    .contact-card h3{

        font-size:17px;

    }


    .contact-card p{

        font-size:14px;

        line-height:1.6;

    }


    .contact-form{

        padding:25px 20px;

    }


    .contact-form h2{

        font-size:25px;

    }


    .contact-form > p{

        font-size:14px;

        margin-bottom:25px;

    }


    .form-group{

        margin-bottom:16px;

    }


    .form-group input{

        height:46px;

    }


    .form-group input,
    .form-group textarea{

        font-size:14px;

        padding:12px 13px;

    }


    .form-group textarea{

        min-height:130px;

    }


    .contact-form .btn{

        width:100%;

        padding:14px 20px;

    }

}


/*======================================================
    CELULAR PEQUEÑO
======================================================*/

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

    .contact-card{

        padding:18px;

    }


    .contact-icon{

        width:45px;

        height:45px;

        min-width:45px;

    }


    .contact-form{

        padding:22px 17px;

    }


    .contact-form h2{

        font-size:23px;

    }

}

/*======================================================
    GRACIAS - TABLET Y CELULAR
======================================================*/


/*======================================================
    TABLET
======================================================*/

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

    .thank-you-section{

        padding:100px 0 80px;

    }


    .thank-you-content{

        max-width:750px;

        padding:50px 35px;

    }


    .thank-you-content h1{

        font-size:36px;

    }


    .thank-you-content p{

        font-size:15px;

    }


    .thank-you-buttons{

        gap:12px;

    }


    .thank-you-buttons .btn{

        min-width:175px;

        padding:13px 20px;

    }

}


/*======================================================
    CELULAR
======================================================*/

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

    .thank-you-section{

        min-height:auto;

        padding:80px 0 70px;

    }


    .thank-you-content{

        width:90%;

        padding:45px 25px;

    }


    .thank-you-icon{

        width:70px;

        height:70px;

        margin-bottom:20px;

        font-size:28px;

    }


    .thank-you-label{

        font-size:14px;

        letter-spacing:2px;

    }


    .thank-you-content h1{

        font-size:30px;

        line-height:1.3;

    }


    .thank-you-content p{

        font-size:14px;

        line-height:1.7;

    }


    .thank-you-buttons{

        flex-direction:column;

        width:100%;

        gap:12px;

    }


    .thank-you-buttons .btn{

        width:100%;

        min-width:0;

        box-sizing:border-box;

    }

}


/*======================================================
    CELULAR PEQUEÑO
======================================================*/

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

    .thank-you-section{

        padding:60px 0;

    }


    .thank-you-content{

        width:88%;

        padding:35px 18px;

    }


    .thank-you-icon{

        width:65px;

        height:65px;

        font-size:25px;

    }


    .thank-you-content h1{

        font-size:26px;

    }


    .thank-you-content p{

        font-size:14px;

    }


    .thank-you-buttons .btn{

        padding:13px 18px;

        font-size:14px;

    }

}