/* ==========================================
   Mobile Header
========================================== */

@media (max-width:992px){

.mobile-toggle{

display:flex;

}

.header-action .btn-primary{

display:none;

}

.navbar{

position:fixed;

top:82px;

right:-100%;

width:320px;

height:calc(100vh - 82px);

background:#fff;

padding:30px;

overflow-y:auto;

transition:.35s ease;

box-shadow:-15px 0 40px rgba(0,0,0,.08);

}

.navbar.active{

right:0;

}

.navbar ul{

flex-direction:column;

align-items:flex-start;

gap:18px;

}

.dropdown .mega-menu{

display:none;

position:static;

width:100%;

margin-top:12px;

padding:12px;

background:#F8FAFC;

border-radius:12px;

opacity:1;

visibility:visible;

transform:none;

box-shadow:none;

}

.dropdown.active .mega-menu{

display:block;

}

body.menu-open{

overflow:hidden;

}

}

/* ==========================================
   HERO MOBILE
========================================== */

@media (max-width:992px){

.hero{

padding:140px 0 70px;

}

.hero-grid{

grid-template-columns:1fr;

gap:40px;

text-align:center;

}

.hero-left{

order:2;

max-width:100%;

}

.hero-right{

order:1;

justify-content:center;

}

.hero-right img{

max-width:600px;

}

.hero h1{

font-size:48px;

letter-spacing:-1px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

}

@media (max-width:576px){

.hero{

padding:120px 0 60px;

}

.hero h1{

font-size:36px;

}

.hero p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-outline{

width:100%;

justify-content:center;

}

.hero-features{

flex-direction:column;

align-items:center;

}

.hero-features div{

width:100%;

justify-content:center;

}

}

@media(max-width:992px){

.service-grid,
.product-grid,
.why-grid,
.stats-grid{

grid-template-columns:repeat(2,1fr);

}

.blog-grid{

grid-template-columns:1fr;

}

.estate-grid{

grid-template-columns:1fr;

text-align:center;

}

}

@media(max-width:576px){

.service-grid,
.product-grid,
.why-grid,
.stats-grid,
.blog-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:34px;

}

.real-estate h2{

font-size:38px;

}

.cta h2{

font-size:38px;

}

}

@media(max-width:992px){

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo{

justify-content:center;

}

.social-links{

justify-content:center;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.footer-bottom-links{

justify-content:center;

}

}

@media(max-width:992px){

.testimonial-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.testimonial-grid{

grid-template-columns:1fr;

}

}