/* ==========================================================
   Everything Estate
   Responsive Stylesheet
   ========================================================== */


/* ==========================================================
   Large Desktop
   ========================================================== */

@media (max-width:1400px){

    .hero h1{

        font-size:64px;

    }

}


/* ==========================================================
   Desktop
   ========================================================== */

@media (max-width:1200px){

    .container{

        width:min(calc(100% - 40px),1100px);

    }

    .service-grid{

        gap:50px;

    }


}


/* ==========================================================
   Tablet Landscape
   ========================================================== */

@media (max-width:992px){

    .header-inner{

        min-height:80px;

    }

    .logo img{

        width:220px;

    }

    .primary-navigation{

        position:fixed;

        top:80px;

        right:-100%;

        width:300px;

        height:calc(100vh - 80px);

        background:#fff;

        transition:.35s ease;

        box-shadow:-8px 0 24px rgba(0,0,0,.08);

        padding:40px;

    }

    .primary-navigation.open{

        right:0;

    }

    .primary-navigation ul{

        flex-direction:column;

        gap:24px;

    }

    .mobile-nav-toggle{

        display:block;

    }

    .hero{

        min-height:850px;

    }

    .hero h1{

        font-size:56px;

    }

    .hero-subtitle{

        font-size:24px;

    }

    
    .contact-grid{

    grid-template-columns:1fr;

}

    .service-grid.reverse .service-image,

    .service-grid.reverse .service-content{

        order:initial;

    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;

    }

    .footer-brand p{

        margin-inline:auto;

    }

}


/* ==========================================================
   Tablet Portrait
   ========================================================== */

@media (max-width:768px){

    body{

        font-size:17px;

    }

    .hero{

        text-align:center;

        min-height:760px;

    }

    .hero-content{

        margin-inline:auto;

    }

    .hero h1{

        font-size:46px;

    }

    
    .background-section{

    min-height:auto;

    padding:80px 0;

}

.service-panel{

    width:100%;

    padding:36px;

}

.align-left,
.align-right{

    margin:0;

}

    .section-header h2{

    font-size:38px;

}

    .contact-card{

        padding:32px;

    }

}


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

@media (max-width:576px){

    .container{

        width:calc(100% - 32px);

    }

    .header-inner{

        min-height:72px;

    }

    .logo img{

        width:180px;

    }

    .primary-navigation{

        top:72px;

        width:100%;

        height:calc(100vh - 72px);

    }

    .hero{

        min-height:680px;

    }

    .hero h1{

        font-size:36px;

        line-height:1.15;

    }

    .hero-subtitle{

        font-size:20px;

    }

    
    .section-label{

        font-size:12px;

    }

    .section-header h2{

    font-size:32px;

}

    .contact-card{

        padding:24px;

    }

    .footer-grid{

        padding:60px 0 40px;

    }

}


/* ==========================================================
   Small Phones
   ========================================================== */

@media (max-width:400px){

    .hero h1{

        font-size:31px;

    }

    
}