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

@media(max-width:1200px){

    .hero-content h1{

        font-size:3.8rem;

    }

    .benefits-grid{

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

    }

    .spaces-grid{

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

    }

    .gallery-grid{

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

    }

}

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

@media(max-width:992px){

    section{

        padding:90px 0;

    }

    .hero .container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        order:2;

    }

    .hero-image{

        order:1;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-content p{

        margin:auto auto 40px;

    }

    .about-content{

        grid-template-columns:1fr;

    }

    .about-image{

        order:-1;

    }

}

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

@media(max-width:768px){

    .hero{

        min-height:auto;

        padding-top:140px;

    }

    .hero-content h1{

        font-size:3rem;

    }

    .section-header h2{

        font-size:2.2rem;

    }

    .gallery-grid{

        grid-template-columns:1fr;

    }

    .benefits-grid{

        grid-template-columns:1fr;

    }

    .spaces-grid{

        grid-template-columns:1fr;

    }

    .contact-content h2{

        font-size:2.2rem;

    }

    .modal-content{

        padding:30px;

    }

}

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

@media(max-width:576px){

    .container{

        width:92%;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content span{

        font-size:.8rem;

        letter-spacing:3px;

    }

    .section-header{

        margin-bottom:50px;

    }

    .section-header h2{

        font-size:1.9rem;

    }

    .hero-buttons{

        flex-direction:column;

    }

    .btn,

    .btn-outline{

        width:100%;

    }

    .benefit-card,

    .space-card{

        padding:35px 25px;

    }

    .modal-content{

        width:95%;

        padding:25px;

    }

}