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

@media (max-width:1200px){

    section{

        padding:110px 0;

    }

    .hero h1{

        font-size:5rem;

    }

    .section-title h2{

        font-size:3.2rem;

    }

    .about-content h2{

        font-size:3.2rem;

    }

}

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

@media (max-width:992px){

    .benefits-grid{

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

    }

    .spaces-grid{

        grid-template-columns:1fr;

    }

    .about-container{

        grid-template-columns:1fr;

        gap:60px;

    }

    .about-content{

        max-width:100%;

    }

    .about-image img{

        height:500px;

    }

}

@media (max-width:992px){

    .gallery-grid{

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

        grid-template-rows:auto;

    }

    .gallery-item.large{

        grid-row:auto;

        grid-column:span 2;

    }

}

/*==================================================
768px
==================================================*/

@media (max-width:768px){

    section{

        padding:90px 0;

    }

    .hero{

        height:auto;

        padding:160px 0 120px;

    }

    .hero h1{

        font-size:4rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

}

@media (max-width:768px){

    .btn,

    .btn-outline{

        width:100%;

        max-width:320px;

        text-align:center;

    }

}

@media (max-width:768px){

    .section-title h2{

        font-size:2.7rem;

    }

    .about-content h2{

        font-size:2.8rem;

    }

}

@media (max-width:768px){

    .benefits-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:768px){

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-item.large{

        grid-column:auto;

    }

    .gallery-item img{

        height:320px;

    }

}

@media (max-width:768px){

    .modal-content{

        padding:35px;

    }

    .modal-header h2{

        font-size:2.3rem;

    }

}

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

@media (max-width:576px){

    .container{

        width:92%;

    }

    .hero h1{

        font-size:3.2rem;

    }

    .subtitle{

        font-size:.8rem;

        letter-spacing:3px;

    }

    .section-title h2{

        font-size:2.3rem;

    }

    .about-content h2{

        font-size:2.3rem;

    }

    .space-content{

        padding:30px;

    }

    .space-content h3{

        font-size:2rem;

    }

}

@media (max-width:576px){

    .about-image img{

        height:350px;

    }

}

@media (max-width:576px){

    .modal-content{

        width:95%;

        padding:30px;

    }

}

/*==================================================
420px
==================================================*/

@media (max-width:420px){

    .hero{

        padding:140px 0 100px;

    }

    .hero h1{

        font-size:2.7rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .section-title{

        margin-bottom:60px;

    }

    .section-title h2{

        font-size:2rem;

    }

    .about-content h2{

        font-size:2rem;

    }

    .benefit-card{

        padding:40px 25px;

    }

    .space-content{

        padding:25px;

    }

    .modal-content{

        padding:25px;

    }

}

/*==================================================
1600px
==================================================*/

@media (min-width:1600px){

    .container{

        max-width:1400px;

    }

    .hero h1{

        font-size:7rem;

    }

    .hero-content{

        max-width:1000px;

    }

}