/* ======================================================
   Architecture Website Framework
   Responsive CSS
   Version 1.0
======================================================*/


/*==========================================
Large Laptops
==========================================*/

@media (max-width:1400px){

    :root{

        --container:1200px;

    }

}


/*==========================================
Laptops
==========================================*/

@media (max-width:1200px){

    :root{

        --container:1100px;

        --section-padding:100px;

    }

    .hero-left h1{

        font-size:68px;

    }

    .hero-right img{

        height:700px;

    }

}


/*==========================================
Tablets
==========================================*/

@media (max-width:992px){

    :root{

        --section-padding:90px;

        --section-gap:60px;

    }

    .menu-btn{

        display:flex;

    }

    .nav-menu{

        position:fixed;

        top:var(--header-height);

        right:-100%;

        width:300px;

        height:calc(100vh - var(--header-height));

        background:var(--surface);

        flex-direction:column;

        justify-content:flex-start;

        align-items:flex-start;

        padding:50px 35px;

        gap:30px;

        box-shadow:var(--shadow-md);

        transition:var(--transition);

    }

    .nav-menu.active{

        right:0;

    }

    .hero-grid,
    .about-grid{

        grid-template-columns:1fr;

    }

    .hero{

        padding-top:150px;

    }

    .hero-left{

        order:2;

    }

    .hero-right{

        order:1;

    }

    .hero-left h1{

        font-size:60px;

    }

    .hero-right img{

        height:600px;

    }

    .projects,
    .services-grid,
    .instagram-grid{

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

    }

    .footer-grid{

        grid-template-columns:1fr 1fr;

    }

}
/*==========================================
Mobile
==========================================*/

@media (max-width:768px){

    :root{

        --section-padding:80px;

    }

    .hero{

        padding-top:130px;

    }

    .hero-left h1{

        font-size:48px;

    }

    .section-title{

        margin-bottom:60px;

    }

    .section-title h2{

        font-size:44px;

    }

    .about-content h2{

        font-size:46px;

    }

    .cta-box{

        padding:60px 35px;

    }

    .cta-box h2{

        font-size:46px;

    }

    .projects,
    .services-grid,
    .instagram-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}
/*==========================================
Small Mobile
==========================================*/

@media (max-width:576px){

    :root{

        --section-padding:70px;

    }

    .container{

        width:92%;

    }

    .navbar{

        height:80px;

    }

    .logo img{

        height:46px;

    }

    .hero{

        padding-top:120px;

    }

    .hero-left h1{

        font-size:40px;

        line-height:1;

    }

    .hero-left p{

        font-size:16px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:stretch;

    }

    .btn{

        width:100%;

    }

    .section-title h2{

        font-size:38px;

    }

    .project-content{

        padding:24px;

    }

    .service-card{

        padding:35px 30px;

    }

    .cta-box{

        padding:50px 25px;

    }

    .cta-box h2{

        font-size:38px;

    }

    .back-to-top{

        right:20px;

        bottom:20px;

    }

}