/*==================================================
1200px
LAPTOP
==================================================*/

@media (max-width:1200px){

    .container{

        width:92%;

    }

    .hero h1{

        font-size:60px;

    }

    .hero p{

        width:100%;

    }

    .about-container{

        gap:50px;

    }

}

/*==================================================
992px
TABLET
==================================================*/

@media (max-width:992px){

    section{

        padding:90px 0;

    }

    .hero{

        height:auto;

        padding:150px 0 90px;

    }

    .hero h1{

        font-size:56px;

    }

    .hero p{

        font-size:18px;

    }

    .benefits-grid{

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

    }

    .about-container{

        grid-template-columns:1fr;

    }

    .gallery-grid{

        grid-template-columns:1fr 1fr;

        grid-template-rows:260px;

    }

    .gallery-item.large{

        grid-row:auto;

        grid-column:1 / 3;

        height:320px;

    }

    .spaces-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
768px
TABLET VERTICAL
==================================================*/

@media (max-width:768px){

    /*-----------------------------
    Secciones
    ------------------------------*/

    section{

        padding:70px 0;

    }

    /*-----------------------------
    Hero
    ------------------------------*/

    .hero{

        padding:120px 0 80px;

    }

    .hero-content{

        text-align:center;

    }

    .hero h1{

        font-size:42px;

    }

    .hero p{

        margin:25px auto;

        font-size:17px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline{

        width:100%;

        max-width:350px;

        text-align:center;

    }

    /*-----------------------------
    Títulos
    ------------------------------*/

    .section-title{

        margin-bottom:50px;

    }

    .section-title h2{

        font-size:34px;

    }

    /*-----------------------------
    Benefits
    ------------------------------*/

    .benefits-grid{

        grid-template-columns:1fr;

    }

    /*-----------------------------
    About
    ------------------------------*/

    .about-content{

        text-align:center;

    }

    .about-content h2{

        font-size:36px;

    }

    /*-----------------------------
    Gallery
    ------------------------------*/

    .gallery-grid{

        display:flex;

        flex-direction:column;

    }

    .gallery-item{

        height:240px;

    }

    .gallery-item.large{

        height:300px;

    }

    /*-----------------------------
    Spaces
    ------------------------------*/

    .space-content{

        padding:30px;

    }

    .space-content h3{

        font-size:28px;

    }

    /*-----------------------------
    Modal
    ------------------------------*/

    .modal-content{

        width:95%;

        padding:35px 25px;

    }

    .modal-header h2{

        font-size:30px;

    }

    .modal-header p{

        font-size:15px;

    }

    /*-----------------------------
    Formulario
    ------------------------------*/

    .contact-form{

        gap:16px;

    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea{

        padding:16px;

        font-size:15px;

    }

    .checkbox{

        font-size:14px;

    }

}

/*==================================================
576px
MÓVIL
==================================================*/

@media (max-width:576px){

    /*-----------------------------
    Secciones
    ------------------------------*/

    section{

        padding:60px 0;

    }

    /*-----------------------------
    Hero
    ------------------------------*/

    .hero{

        min-height:100vh;

        padding:100px 0 60px;

    }

    .hero h1{

        font-size:34px;

        line-height:1.2;

    }

    .hero p{

        font-size:16px;

        line-height:1.7;

    }

    .subtitle{

        font-size:13px;

        letter-spacing:3px;

    }

    /*-----------------------------
    Títulos
    ------------------------------*/

    .section-title{

        margin-bottom:40px;

    }

    .section-title span{

        font-size:13px;

    }

    .section-title h2{

        font-size:30px;

    }

    .section-title p{

        font-size:16px;

    }

    /*-----------------------------
    Benefits
    ------------------------------*/

    .benefit-card{

        padding:35px 25px;

    }

    .benefit-icon{

        font-size:42px;

    }

    .benefit-card h3{

        font-size:20px;

    }

    /*-----------------------------
    About
    ------------------------------*/

    .about-image{

        border-radius:18px;

    }

    .about-content h2{

        font-size:30px;

    }

    /*-----------------------------
    Gallery
    ------------------------------*/

    .gallery-item{

        height:220px;

    }

    .gallery-item.large{

        height:260px;

    }

    /*-----------------------------
    Spaces
    ------------------------------*/

    .space-card img{

        height:240px;

    }

    .space-content{

        padding:25px;

    }

    .space-content h3{

        font-size:24px;

    }

    /*-----------------------------
    Modal
    ------------------------------*/

    .modal{

        padding:15px;

    }

    .modal-content{

        width:100%;

        max-height:95vh;

        padding:28px 22px;

        border-radius:18px;

    }

    .modal-header{

        margin-bottom:25px;

    }

    .modal-header h2{

        font-size:26px;

    }

    .modal-header p{

        font-size:15px;

    }

    .close-modal{

        top:15px;

        right:18px;

        font-size:30px;

    }

    /*-----------------------------
    Formulario
    ------------------------------*/

    .contact-form{

        gap:14px;

    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea{

        padding:15px;

        font-size:15px;

    }

    .contact-form .btn{

        padding:15px;

    }

    .checkbox{

        font-size:13px;

        line-height:1.6;

    }

}

/*==================================================
420px
MÓVIL PEQUEÑO
==================================================*/

@media (max-width:420px){

    /*-----------------------------
    Hero
    ------------------------------*/

    .hero{

        padding:90px 0 50px;

    }

    .hero h1{

        font-size:30px;

    }

    .hero p{

        font-size:15px;

    }

    .hero-buttons .btn,
    .hero-buttons .btn-outline{

        max-width:100%;

        padding:14px 20px;

    }

    /*-----------------------------
    Títulos
    ------------------------------*/

    .section-title h2{

        font-size:26px;

    }

    .section-title p{

        font-size:15px;

    }

    /*-----------------------------
    Benefits
    ------------------------------*/

    .benefit-card{

        padding:30px 20px;

    }

    .benefit-icon{

        font-size:36px;

    }

    .benefit-card h3{

        font-size:18px;

    }

    /*-----------------------------
    About
    ------------------------------*/

    .about-content h2{

        font-size:28px;

    }

    .about-content p{

        font-size:15px;

    }

    /*-----------------------------
    Gallery
    ------------------------------*/

    .gallery-item{

        height:180px;

    }

    .gallery-item.large{

        height:220px;

    }

    /*-----------------------------
    Spaces
    ------------------------------*/

    .space-card img{

        height:200px;

    }

    .space-content{

        padding:20px;

    }

    .space-content h3{

        font-size:22px;

    }

    .space-content p{

        font-size:15px;

    }

    .space-content li{

        font-size:14px;

    }

    /*-----------------------------
    Modal
    ------------------------------*/

    .modal-content{

        padding:24px 18px;

    }

    .modal-header h2{

        font-size:24px;

    }

    .modal-header p{

        font-size:14px;

    }

    .contact-form input,
    .contact-form select,
    .contact-form textarea{

        padding:14px;

        font-size:14px;

    }

    .contact-form textarea{

        min-height:120px;

    }

    .checkbox{

        font-size:12px;

    }

    .close-modal{

        font-size:28px;

    }

}