@media(max-width:1200px){

.hero-right{

padding:35px;

}

.hero-card{

max-width:700px;

}

}
@media(max-width:768px){

.hero-right{

padding:25px;

}

.hero-card h2{

font-size:40px;

}

.detail-item{

flex-direction:column;

align-items:flex-start;

gap:8px;

}

}
.menu-toggle{

    display:none;

    font-size:30px;

    color:#fff;

    cursor:pointer;

}

@media(max-width:992px){

.navbar{

position:fixed;

top:82px;

left:-100%;

width:280px;

height:100vh;

background:#111;

padding:40px 25px;

transition:.4s;

}

.navbar.active{

left:0;

}

.navbar ul{

flex-direction:column;

gap:25px;

}

.menu-toggle{

display:block;

}

.header-buttons{

display:none;

}

}
@media(max-width:768px){

.hero{

grid-template-columns:1fr;

}

.hero-left{

min-height:520px;

}

.hero-content{

padding:0 20px 25px;

}

.hero-content h1{

font-size:42px;

}

.hero-content h2{

font-size:20px;

}

.hero-features{

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

}

.hero-right{

padding:30px 20px;

}

.hero-card h2{

font-size:42px;

}

}

@media(max-width:480px){

.hero-left{

min-height:480px;

}

.hero-content h1{

font-size:32px;

}

.hero-content h2{

font-size:16px;

}

.hero-features{

grid-template-columns:1fr;

}

.hero-card{

max-width:100%;

}

}
@media(max-width:991px){

.hamburger{

display:block;

}

.header-buttons{

display:none;

}

.navbar{

position:fixed;

top:80px;

left:-100%;

width:280px;

height:100vh;

background:#111;

transition:.4s;

padding:40px;

}

.navbar.active{

left:0;

}

.navbar ul{

display:flex;

flex-direction:column;

gap:25px;

}

}
@media(max-width:991px){

.hero{

grid-template-columns:1fr;

}

.hero-right{

width:100%;

}

}
/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:1200px){

.about-grid{

grid-template-columns:1fr;

gap:60px;

}

.about-left{

text-align:center;

}

.section-line{

margin:25px auto;

}

.about-buttons{

justify-content:center;

}

.about-right{

max-width:900px;

margin:auto;

}

}

@media(max-width:768px){

.about{

padding:80px 0;

}

.about-left h2{

font-size:48px;

}

.about-left p{

font-size:16px;

line-height:30px;

}

.about-right{

grid-template-columns:1fr;

}

.info-card{

padding:30px;

}

.about-buttons{

flex-direction:column;

}

.about-buttons .btn{

width:100%;

justify-content:center;

}

}

@media(max-width:480px){

.about-left h2{

font-size:38px;

}

.section-tag{

font-size:11px;

padding:8px 18px;

}

.info-card{

padding:24px;

}

.info-card h3{

font-size:42px;

}

.info-card h4{

font-size:24px;

}

.icon{

width:60px;

height:60px;

font-size:24px;

}

}
/*==========================================
TABLET
==========================================*/

@media (max-width:991px){

.about{

padding:70px 0;

overflow:hidden;

}

.about-grid{

display:flex;

flex-direction:column;

gap:40px;

}

.about-left{

width:100%;

}

.about-right{

width:100%;

display:grid;

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

gap:20px;

}

.about-left h2{

font-size:52px;

line-height:1.1;

}

}
/*==========================================
MOBILE
==========================================*/

@media (max-width:767px){

.about{

padding:60px 0;

}

.about-grid{

display:block;

}

.about-left{

margin-bottom:40px;

}

.about-right{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

.info-card{

width:100%;

padding:25px;

}

.about-left h2{

font-size:42px;

}

.about-left p{

font-size:16px;

line-height:30px;

}

.about-buttons{

display:flex;

flex-direction:column;

gap:15px;

}

.about-buttons .btn{

width:100%;

justify-content:center;

}

}
@media (max-width:480px){

.container{

padding:0 20px;

}

.about-left h2{

font-size:34px;

}

.info-card h3{

font-size:42px;

}

.info-card h4{

font-size:24px;

}

.info-card{

border-radius:20px;

padding:20px;

}

.icon{

width:60px;

height:60px;

font-size:24px;

}

}
/*==========================================
LARGE LAPTOP
==========================================*/

@media (max-width:1400px){

    .offerings-grid{
        grid-template-columns:45% 55%;
        gap:50px;
    }

    .offer-right{
        min-height:650px;
    }

    .offer-circle{
        width:300px;
        height:300px;
        left:-70px;
        padding:40px;
    }

    .offer-circle h4{
        font-size:30px;
    }

}


/*==========================================
TABLET
==========================================*/

@media (max-width:991px){

    .offerings{
        padding:80px 0;
    }

    .offerings-grid{

        display:flex;
        flex-direction:column;

        gap:50px;

    }

    .offer-left{

        width:100%;

        text-align:center;

    }

    .section-line{

        margin:25px auto 35px;

    }

    .offer-left p{

        max-width:700px;

        margin:0 auto 40px;

    }

    .offer-cards{

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

    }

    .offer-right{

        width:100%;

        min-height:550px;

    }

    .offer-circle{

        left:50%;

        top:50%;

        transform:translate(-50%,-50%);

    }

}


/*==========================================
MOBILE
==========================================*/

@media (max-width:767px){

    .offerings{

        padding:70px 0;

    }

    .offer-left{

        text-align:center;

    }

    .offer-left h2{

        line-height:1.15;

    }

    .offer-left p{

        font-size:16px;

        line-height:30px;

        margin-bottom:35px;

    }

    .offer-cards{

        grid-template-columns:1fr;

        gap:20px;

    }

    .offer-card{

        width:100%;

        padding:30px;

        text-align:center;

    }

    .offer-icon{

        margin:0 auto 25px;

    }

    .offer-card h3{

        font-size:34px;

    }

    .offer-card p{

        font-size:15px;

        line-height:28px;

    }

    .offer-card .btn{

        width:100%;

        justify-content:center;

    }

    .offer-right{

        min-height:420px;

        border-radius:20px;

    }

    .offer-circle{

        width:260px;

        height:260px;

        padding:30px;

        left:50%;

        top:50%;

        transform:translate(-50%,-50%);

        text-align:center;

        align-items:center;

    }

    .circle-icon{

        margin:0 auto 20px;

        width:60px;

        height:60px;

        font-size:24px;

    }

    .offer-circle h4{

        font-size:26px;

        margin-bottom:12px;

    }

    .offer-circle p{

        font-size:14px;

        line-height:24px;

    }

}


/*==========================================
SMALL MOBILE
==========================================*/

@media (max-width:480px){

    .offerings{

        padding:60px 0;

    }

    .offer-left h2{

        font-size:38px;

    }

    .offer-left p{

        font-size:15px;

        line-height:28px;

    }

    .offer-card{

        padding:25px;

    }

    .offer-card h3{

        font-size:28px;

    }

    .offer-icon{

        width:65px;

        height:65px;

        font-size:26px;

    }

    .offer-right{

        min-height:320px;

    }

    .offer-circle{

        width:220px;

        height:220px;

        padding:22px;

    }

    .offer-circle h4{

        font-size:22px;

    }

    .offer-circle p{

        font-size:13px;

        line-height:20px;

    }

}
@media(min-width:1600px){

.offer-right{

height:850px;

}

.offer-circle{

width:450px;

height:450px;

left:-140px;

}

}@media(max-width:991px){

.offerings-grid{

grid-template-columns:1fr;

}

.offer-right{

height:550px;

}

.offer-circle{

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

}
@media(max-width:767px){

.offer-right{

height:400px;

}

.offer-circle{

width:250px;

height:250px;

padding:30px;

}

}
@media (max-width:767px){

    .offer-right{

        height:320px;

        border-radius:20px;

        overflow:hidden;

    }

    .offer-right img{

        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;

    }

    .offer-circle{

        width:180px;
        height:180px;

        left:20px;
        bottom:20px;

        top:auto;
        transform:none;

        padding:18px;

        border-width:3px;

        align-items:center;
        justify-content:center;
        text-align:center;

    }

    .circle-icon{

        width:50px;
        height:50px;
        font-size:20px;

        margin-bottom:12px;

    }

    .offer-circle h4{

        font-size:22px;
        line-height:1.2;
margin-left:-2px;
        margin-bottom:8px;

    }

    .offer-circle p{

        display:none;

    }

}
/*==================================
RESPONSIVE
===================================*/

@media(max-width:991px){

.living{

padding:90px 0;

}

.living-grid{

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

gap:50px;

}

}

@media(max-width:767px){

.living{

padding:70px 0;

}

.section-heading{

margin-bottom:50px;

}

.small-heading{

letter-spacing:4px;

font-size:13px;

}

.section-heading h2{

font-size:18px;

line-height:1.6;

}

.living-grid{

grid-template-columns:1fr;

gap:40px;

}

.living-item{

text-align:center;

}

.living-icon{

width:75px;

height:75px;

font-size:34px;

}

.living-item h3{

font-size:18px;

max-width:280px;

}

}
/*==========================================
LIFESTYLE RESPONSIVE
==========================================*/

/*=========================
LARGE LAPTOP
==========================*/

@media (max-width:1400px){

    .lifestyle-grid{

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

        gap:25px;

    }

}


/*=========================
TABLET
==========================*/

@media (max-width:991px){

    .lifestyle{

        padding:90px 0;

    }

    .lifestyle-heading{

        max-width:100%;

        text-align:center;

        margin:0 auto 60px;

    }

    .lifestyle-heading p{

        margin:auto;

    }

    .lifestyle-grid{

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

        gap:25px;

    }

    .lifestyle-buttons{

        justify-content:center;

    }

}


/*=========================
MOBILE
==========================*/

@media (max-width:767px){

    .lifestyle{

        padding:70px 0;

    }

    .lifestyle-heading{

        text-align:center;

        margin-bottom:45px;

    }

    .lifestyle-heading h2{

        font-size:42px;

        line-height:1.2;

    }

    .lifestyle-heading p{

        font-size:16px;

        line-height:30px;

    }

    .lifestyle-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .life-card{

        text-align:center;

    }

    .life-content{

        align-items:center;

        text-align:center;

        padding:25px;

    }

    .category{

        margin:0 auto 18px;

    }

    .life-content h3{

        font-size:30px;

    }

    .life-content p{

        font-size:15px;

        line-height:28px;

        margin-bottom:18px;

    }

    .life-content strong{

        font-size:24px;

    }

    .lifestyle-buttons{

        flex-direction:column;

        align-items:center;

        gap:15px;

        margin-top:40px;

    }

    .lifestyle-buttons .btn{

        width:100%;

        max-width:320px;

        justify-content:center;

    }

}


/*=========================
SMALL MOBILE
==========================*/

@media (max-width:480px){

    .lifestyle{

        padding:60px 0;

    }

    .lifestyle-heading h2{

        font-size:36px;

    }

    .lifestyle-heading p{

        font-size:15px;

        line-height:28px;

    }

    .life-image{

        aspect-ratio:16/10;

    }

    .life-content{

        padding:22px;

    }

    .life-content h3{

        font-size:26px;

    }

    .life-content strong{

        font-size:22px;

    }

}
/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:991px){

.footer-wrapper{

flex-direction:column;

text-align:center;

}

.footer-copy{

order:3;

}

.whatsapp-btn{

order:2;

}

}

@media(max-width:576px){

.footer{

padding:25px 15px;

}

.footer-logo img{

width:95px;

}

.footer-copy{

font-size:14px;

line-height:24px;

}

.whatsapp-btn{

padding:12px 18px;

}

.whatsapp-btn span{

font-size:14px;

}

}
@media(max-width:768px){

.rera-box{

width:96%;

height:85vh;

}

#closeRera{

width:40px;

height:40px;

font-size:24px;

}

}
/*==========================================
MOBILE HERO CARD CENTER
==========================================*/

@media (max-width:767px){

    .hero-card{

        text-align:center;

        padding:35px 25px;

    }

    .hero-card .tag{

        margin:0 auto 25px;

        display:table;

    }

    .hero-card h1{

        text-align:center;

    }

    .hero-card .hero-line{

        margin:25px auto;

    }

    .hero-card p{

        text-align:center;

    }

    .hero-info{

        text-align:center;

    }

    .hero-info li{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:8px;

        text-align:center;

        padding:18px 0;

    }

    .hero-info li strong{

        text-align:center;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:15px;

        margin-top:30px;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:280px;

        justify-content:center;

    }

}
/*==================================
MOBILE HERO FIX
==================================*/

@media (max-width:767px){

    .hero-card{

        padding:35px 20px !important;

        text-align:center !important;

    }

    .hero-card h1{

        text-align:center !important;

    }

    .hero-card p{

        text-align:center !important;

        margin:0 auto 30px !important;

        max-width:100% !important;

        padding:0 !important;

    }

    .hero-card .hero-line{

        margin:20px auto 30px !important;

    }

    /* Information Rows */

    .hero-info{

        width:100%;

    }

    .hero-info li{

        display:block !important;

        text-align:center !important;

        padding:18px 0 !important;

    }

    .hero-info li span,

    .hero-info li strong{

        display:block !important;

        width:100% !important;

        text-align:center !important;

        margin:6px 0 !important;

    }

    /* Buttons */

    .hero-buttons{

        display:flex;

        justify-content:center;

        align-items:center;

        flex-direction:column;

        gap:15px;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:280px;

    }

}
/*==================================
ABOUT SECTION MOBILE FIX
==================================*/

@media (max-width:767px){

    .about-card{

        text-align:center !important;

        align-items:center !important;

        padding:35px 25px !important;

    }

    .about-card .icon{

        margin:0 auto 25px !important;

    }

    .about-card h3{

        text-align:center !important;

        width:100%;

        margin-bottom:10px;

    }

    .about-card h4{

        text-align:center !important;

        width:100%;

        margin-bottom:15px;

    }

    .about-card p{

        text-align:center !important;

        width:100%;

        margin:0 auto;

    }

}
@media (max-width:767px){

.about-card{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

text-align:center;

}

.about-card > *{

width:100%;

text-align:center;

}

.about-card .icon{

margin:0 auto 25px;

}

}
/*==========================================
FINAL MOBILE CENTER FIX
Put this at the VERY END of style.css
==========================================*/

@media (max-width:767px){

    /*--------------------------
    Hero Right Card
    --------------------------*/

    .hero-right,
    .hero-card{

        text-align:center !important;

    }

    .hero-card{

        padding:35px 20px !important;

    }

    .hero-card h1,
    .hero-card h2,
    .hero-card h3,
    .hero-card p{

        text-align:center !important;

        margin-left:auto !important;
        margin-right:auto !important;

        max-width:100% !important;

    }

    .hero-line{

        margin:20px auto !important;

    }

    .hero-info{

        width:100%;

    }

    .hero-info li{

        display:block !important;

        text-align:center !important;

        padding:18px 0 !important;

    }

    .hero-info li span,
    .hero-info li strong{

        display:block !important;

        width:100% !important;

        text-align:center !important;

        margin:8px 0 !important;

    }

    .hero-buttons{

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        justify-content:center !important;

        gap:15px;

    }

    .hero-buttons .btn{

        width:100%;
        max-width:280px;

    }

    /*--------------------------
    About Section
    --------------------------*/

    .about-left{

        text-align:center !important;

    }

    .about-left h2,
    .about-left p{

        text-align:center !important;

        margin-left:auto !important;
        margin-right:auto !important;

    }

    .section-line{

        margin:20px auto !important;

    }

    .about-buttons{

        justify-content:center !important;

        align-items:center !important;

    }

    /*--------------------------
    Info Cards
    --------------------------*/

    .info-card{

        display:flex !important;

        flex-direction:column !important;

        justify-content:center !important;

        align-items:center !important;

        text-align:center !important;

        padding:30px 20px !important;

    }

    .info-card .icon{

        margin:0 auto 20px !important;

    }

    .info-card h3,
    .info-card h4,
    .info-card p{

        width:100% !important;

        text-align:center !important;

    }

}
/*==================================
FINAL HERO MOBILE FIX
==================================*/

@media (max-width:767px){

    .detail-item{

        display:flex !important;

        flex-direction:column !important;

        justify-content:center !important;

        align-items:center !important;

        text-align:center !important;

        gap:10px;

    }

    .detail-item span{

        width:100%;

        text-align:center !important;

    }

    .detail-item strong{

        width:100%;

        text-align:center !important;

    }

}
/* Mobile Divider Fix */

@media (max-width:767px){

    .hero-line,
	.divider
    .section-line,
    .title-line{

        width:80px !important;

        height:3px;

        background:#c89b3c;

        margin:22px auto 28px !important;

        display:block;
		align:CENTER;

    }

}
/*==================================
CENTER DIVIDER ON MOBILE
==================================*/

@media (max-width:767px){

    .divider{

        width:80px !important;

        height:3px;

        background:#c89b3c;

        margin:25px auto !important;

        display:block;

    }

}
@media (max-width:991px){

.menu-toggle{

display:flex;

}

.nav-links{

position:fixed;

top:0;

left:-100%;

width:280px;

height:100vh;

background:#111;

padding:90px 30px;

display:flex;

flex-direction:column;

gap:25px;

transition:.4s;

z-index:9999;

}

.nav-links.active{

left:0;

}

}
/* ==========================
MOBILE MENU
========================== */

@media (max-width:991px){

.menu-toggle{

    display:flex;
    z-index:10002;

}

.nav-links{

    position:fixed;

    top:0;
    left:-100%;

    width:280px;
    height:100vh;

    background:#111;

    padding:90px 35px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:25px;

    transition:.4s;

    z-index:10001;

}

.nav-links.active{

    left:0;

}

.nav-links li{

    list-style:none;

    width:100%;

}

.nav-links li a{

    display:block;

    width:100%;

    color:#fff;

    font-size:20px;

    font-weight:600;

    text-decoration:none;

}

.nav-links li a:hover{

    color:#c89b3c;

}


}
/* Desktop */

@media(min-width:992px){

#mobileMenu{

display:none;

}

}