/*==================================================
RESPONSIVE
1200px
==================================================*/

@media (max-width:1200px){

    .container{

        width:94%;

    }

    .hero-content h1{

        font-size:54px;

    }

    .services-grid{

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

    }

    .why-grid{

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

    }

    .gallery-grid{

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

    }

}


/*==================================================
RESPONSIVE
992px
==================================================*/

@media (max-width:992px){

    section{

        padding:80px 0;

    }

    .hero{

        height:90vh;

    }

    .hero-content{

        width:92%;

    }

    .hero-content h1{

        font-size:46px;

    }

    .hero-content p{

        font-size:18px;

    }

    .section-title h2{

        font-size:38px;

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin:0 auto 25px;

    }

    .gallery-grid{

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

    }

}


/*==================================================
RESPONSIVE
MENÚ MÓVIL
==================================================*/

@media (max-width:900px){

    #menu-mobile{

        display:block;

        color:#fff;

        z-index:10001;

    }

    header.active #menu-mobile{

        color:#111;

    }

    #nav{

        position:fixed;

        top:0;

        right:-100%;

        width:300px;

        height:100vh;

        background:#111;

        transition:.35s;

        padding-top:120px;

        z-index:10000;

    }

    #nav.active{

        right:0;

    }

    #nav ul{

        flex-direction:column;

        gap:0;

    }

    #nav li{

        border-bottom:1px solid rgba(255,255,255,.08);

    }

    #nav a{

        display:block;

        color:#fff !important;

        padding:22px 35px;

        font-size:17px;

    }

}
/*==================================================
RESPONSIVE
768px
==================================================*/

@media (max-width:768px){

    header{

        padding:18px 0;

    }

    .logo img{

        height:50px;

    }

    .hero{

        height:100vh;

    }

    .hero-content{

        width:92%;

    }

    .hero-content span{

        font-size:13px;

        letter-spacing:2px;

    }

    .hero-content h1{

        font-size:38px;

        line-height:1.15;

    }

    .hero-content p{

        font-size:17px;

        margin-bottom:35px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn-principal,

    .btn-secundario{

        width:260px;

    }

    .section-title{

        margin-bottom:50px;

    }

    .section-title h2{

        font-size:34px;

    }

    .section-title p{

        font-size:16px;

    }

    .services-grid,

    .why-grid,

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .contact-form{

        padding:30px;

    }

    .contact-info h2{

        font-size:34px;

    }

    .swiper-button-next,

    .swiper-button-prev{

        display:none;

    }

}


/*==================================================
RESPONSIVE
576px
==================================================*/

@media (max-width:576px){

    section{

        padding:70px 0;

    }

    .hero-content h1{

        font-size:30px;

    }

    .hero-content p{

        font-size:16px;

    }

    .section-title h2{

        font-size:28px;

    }

    .why-card,

    .service-card{

        padding:35px 25px;

    }

    .gallery-item img{

        height:240px;

    }

    .contact-form{

        padding:25px;

    }

    .contact-item{

        gap:15px;

    }

    .contact-item i{

        width:50px;

        height:50px;

        font-size:20px;

    }

    .footer-grid{

        gap:35px;

    }

    .footer-logo{

        width:160px;

    }

}


/*==================================================
RESPONSIVE
400px
==================================================*/

@media (max-width:400px){

    .hero-content h1{

        font-size:26px;

    }

    .hero-content p{

        font-size:15px;

    }

    .btn-principal,

    .btn-secundario{

        width:100%;

        padding:14px 20px;

    }

    .section-title h2{

        font-size:25px;

    }

    .contact-info h2{

        font-size:28px;

    }

    .contact-form{

        padding:20px;

    }

    .gallery-item img{

        height:200px;

    }

    .whatsapp{

        width:58px;

        height:58px;

        right:18px;

        bottom:18px;

        font-size:30px;

    }

    #top{

        width:54px;

        height:54px;

        left:18px;

        bottom:18px;

        font-size:20px;

    }

}


/*==================================================
RESPONSIVE
320px
==================================================*/

@media (max-width:320px){

    .hero-content h1{

        font-size:22px;

    }

    .hero-content p{

        font-size:14px;

    }

    .section-title h2{

        font-size:22px;

    }

    .service-card,

    .why-card{

        padding:25px 18px;

    }

}