/* ==========================================
   Responsive.css
========================================== */


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

@media (max-width:1200px){

.container{
    width:95%;
}

.hero h1{
    font-size:56px;
}

.service-grid,
.product-grid,
.why-grid{
    grid-template-columns:repeat(2,1fr);
}

}



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

@media (max-width:992px){

section{
    padding:80px 0;
}

/* Header */

.header .container{
    height:72px;
}

@media (max-width:992px){

.navbar{
    display:none;
}

.navbar.active{
    display:flex;
    flex-direction:column;
}

.nav-item{
    width:100%;
}

.dropdown-menu{

    position:static;
    display:none;
    width:100%;
    box-shadow:none;
    border-radius:0;
    margin-top:10px;
    padding-left:20px;
    background:#f8fafc;

}

.nav-item.active .dropdown-menu{
    display:block;
}

.dropdown-menu a{
    display:block;
    padding:12px 15px;
    font-size:16px;
}

}

.mobile-toggle{
    display:block;
}

.header-action .btn-primary{
    display:none;
}


/* Hero */

.hero{
    padding:110px 0 60px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;
}

.hero-right{
    order:1;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.hero-right img{
    width:100%;
    max-width:650px;
    height:auto;
    display:block;
    margin:auto;
    object-fit:contain;
    animation:none;
}

.hero-left{
    order:2;
    width:100%;
}

.hero h1{
    font-size:46px;
    line-height:1.15;
}

.hero p{
    font-size:18px;
    max-width:100%;
}

.hero-buttons,
.hero-features{
    justify-content:center;
}

.hero-buttons{
    flex-wrap:wrap;
}

.hero-features{
    gap:15px;
}


/* Real Estate */

.estate-grid{
    grid-template-columns:1fr;
    text-align:center;
}

.estate-grid img{
    max-width:500px;
    margin:auto;
}


/* Grid */

.service-grid,
.product-grid,
.why-grid,
.blog-grid{
    grid-template-columns:repeat(2,1fr);
}

.stats-grid{
    grid-template-columns:repeat(2,1fr);
}


/* Footer */

.footer-grid{
    grid-template-columns:repeat(2,1fr);
    gap:35px;
}

}



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

@media (max-width:768px){

.hero h1{
    font-size:42px;
}

.hero p{
    font-size:17px;
}

.section-title h2{
    font-size:34px;
}

.service-grid,
.product-grid,
.why-grid,
.blog-grid,
.stats-grid,
.footer-grid{
    grid-template-columns:1fr;
}

.hero-buttons{
    flex-direction:column;
    gap:15px;
}

.btn-primary,
.btn-outline{
    width:100%;
}

.footer-grid{
    text-align:center;
}

.social-links{
    justify-content:center;
}

}



/* ==========================================
   <=480px
========================================== */

@media (max-width:480px){

.logo h2{
    font-size:20px;
}

.logo span{
    font-size:11px;
}

.hero{
    padding-top:100px;
}

.hero h1{
    font-size:34px;
    line-height:1.2;
}

.hero p{
    font-size:16px;
}

.hero-right img{
    max-width:100%;
}

.service-card,
.product-card,
.why-card{
    padding:25px;
}

.cta h2{
    font-size:34px;
}

.cta p{
    font-size:16px;
}

}