/*
 * Reformatted version of the supplied CSS.
 * Formatting only: CSS selectors, properties, and values are preserved.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root
{
    --ink:#171717;
    --muted:#6e6b64;
    --cream:#f5f1e8;
    --gold:#c9a66b;
    --dark:#11110f;
    --line:#ddd5c7
}
html
{
    scroll-behavior:smooth
}
body
{
    font-family:'DM Sans',sans-serif;
    color:var(--ink);
    background:var(--cream)
}
h1
h2
h3
h4
{
    font-family:'Playfair Display',serif;
    font-weight:500
}
h2
{
    font-size:clamp(2.3rem,5vw,4rem);
    line-height:1.02
}
h2 span
h1 em
{
    color:var(--gold);
    font-style:italic
}
.site-nav
{
    background:rgba(10,10,9,.65);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.12);
    padding:28px 0
}
.navbar-brand
{
    letter-spacing:.13em;
    font-size:.9rem
}
.brand-mark
{
    display:inline-grid;
    place-items:center;
    width:30px;
    height:30px;
    border:1px solid var(--gold);
    color:var(--gold);
    margin-right:7px
}
.brand-light
{
    font-weight:400;
    color:#ddd
}
.nav-link
{
    color:#eee!important;
    font-size:.82rem;
    letter-spacing:.08em;
    text-transform:uppercase
}
.btn-gold
{
    background:var(--gold);
    border-color:var(--gold);
    color:#17130c;
    font-weight:600
}
.btn-gold:hover
{
    background:#dfbd83;
    border-color:#dfbd83;
    color:#17130c
}
/* =========================================================
   HERO — FINAL
   Seamless black → image transition
   ========================================================= */

.hero {
    min-height: 100vh;
    background: #111;
    position: relative;
    overflow: hidden;
    color: #fff;
}


/* =========================================================
   HERO BACKGROUND
   ========================================================= */

.hero:before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 72% 40%,
            rgba(201,166,107,.12),
            transparent 35%
        ),
        #111;

    z-index: 0;
}


/* =========================================================
   HERO IMAGE
   ========================================================= */

.hero-art {
    position: absolute;

    top: 0;
    right: 0;

    width: 68%;
    height: 100%;

    z-index: 1;

    overflow: hidden;

    opacity: .95;
}


/* Actual image */

.hero-art img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    display: block;

    animation: heroImageBreath 24s ease-in-out infinite alternate;

    transform-origin: center center;

    will-change: transform;
}


/* =========================================================
   SEAMLESS LEFT → RIGHT IMAGE FADE
   THIS IS THE IMPORTANT PART
   ========================================================= */

.hero-art::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            #111 0%,
            #111 8%,

            rgba(17,17,17,.98) 16%,

            rgba(17,17,17,.90) 24%,

            rgba(17,17,17,.72) 32%,

            rgba(17,17,17,.48) 40%,

            rgba(17,17,17,.25) 47%,

            rgba(17,17,17,.08) 54%,

            rgba(17,17,17,0) 62%
        );
}


/* =========================================================
   SLIGHT IMAGE DARKENING
   ========================================================= */

.hero-art::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.10),
            transparent 45%,
            rgba(0,0,0,.20)
        );
}


/* =========================================================
   DECORATIVE GLOW
   ========================================================= */

.hero-glow {
    position: absolute;

    width: 60%;
    height: 60%;

    right: 5%;
    top: 18%;

    z-index: 3;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse,
            rgba(201,166,107,.13),
            transparent 65%
        );

    animation: heroGlow 8s ease-in-out infinite alternate;
}


/* =========================================================
   DECORATIVE BUILDING
   ========================================================= */

.hero-building {
    position: absolute;

    right: 8%;
    top: 9%;

    width: 52%;
    height: 72%;

    z-index: 3;

    background:
        linear-gradient(
            110deg,
            transparent 0 12%,
            rgba(201,166,107,.10) 12% 17%,
            transparent 17% 23%,
            rgba(255,255,255,.05) 23% 28%,
            transparent 28% 34%,
            rgba(201,166,107,.09) 34% 40%,
            transparent 40% 47%,
            rgba(255,255,255,.06) 47% 54%,
            transparent 54% 61%,
            rgba(201,166,107,.09) 61% 68%,
            transparent 68%
        );

    clip-path:
        polygon(
            22% 0,
            100% 8%,
            90% 95%,
            0 100%,
            8% 8%
        );

    border: 1px solid rgba(255,255,255,.08);

    animation:
        buildingDrift 18s ease-in-out infinite alternate;
}


.hero-building:after {
    content: "";

    position: absolute;
    inset: 4% 8%;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 31px,
            rgba(255,255,255,.07) 32px 33px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 42px,
            rgba(201,166,107,.08) 43px 44px
        );
}


/* =========================================================
   CONTENT
   ========================================================= */

.hero .container {
    position: relative;
    z-index: 5;
}

.hero .row {
    position: relative;
    z-index: 5;
}


/* =========================================================
   TYPOGRAPHY
   ========================================================= */

.eyebrow,
.section-kicker {
    font-size: .72rem;
    letter-spacing: .22em;
    font-weight: 700;
    color: var(--gold);
    text-transform: uppercase;
}


.hero h1 {
    font-size: clamp(3.8rem, 8vw, 7.5rem);
    line-height: .9;
    margin: 24px 0;
}


.hero .lead {
    max-width: 650px;

    color: #d4d0c8;

    font-size: 1.12rem;
    line-height: 1.75;
}


.hero-note {
    font-size: .8rem;
    color: #aaa;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.hero .btn-gold {
    transition:
        transform .25s cubic-bezier(.22,1,.36,1),
        box-shadow .25s ease,
        background-color .25s ease;
}


.hero .btn-gold:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(201,166,107,.22);
}


.hero .btn-gold .bi-arrow-right {
    display: inline-block;

    transition:
        transform .25s cubic-bezier(.22,1,.36,1);
}


.hero .btn-gold:hover .bi-arrow-right {
    transform: translateX(4px);
}


.hero .btn-outline-light {
    transition:
        transform .25s ease,
        background-color .25s ease;
}


.hero .btn-outline-light:hover {
    transform: translateY(-2px);
}


/* =========================================================
   HERO ENTRANCE ANIMATION
   ========================================================= */

.hero .eyebrow {
    opacity: 0;
    animation:
        heroFadeUp .7s cubic-bezier(.22,1,.36,1) .15s forwards;
}


.hero h1 {
    opacity: 0;
    animation:
        heroFadeUp .9s cubic-bezier(.22,1,.36,1) .28s forwards;
}


.hero .lead {
    opacity: 0;
    animation:
        heroFadeUp .75s cubic-bezier(.22,1,.36,1) .48s forwards;
}


.hero .d-flex {
    opacity: 0;
    animation:
        heroFadeUp .75s cubic-bezier(.22,1,.36,1) .62s forwards;
}


@keyframes heroFadeUp {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   IMAGE MOTION
   ========================================================= */

@keyframes heroImageBreath {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.035);
    }

}


@keyframes buildingDrift {

    from {
        transform: translate3d(0,0,0);
    }

    to {
        transform: translate3d(-8px,5px,0);
    }

}


@keyframes heroGlow {

    from {
        opacity: .65;
        transform: scale(1);
    }

    to {
        opacity: .95;
        transform: scale(1.06);
    }

}


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

@media (min-width: 768px) {

    .hero-art {
        width: 68%;
        right: 0;
    }

}


/* =========================================================
   MOBILE HERO — IMAGE SEAMLESSLY MERGES INTO CONTENT
   ========================================================= */

@media (max-width: 767px) {

    .hero {
        min-height: auto !important;
        height: auto !important;
        background: #111 !important;
        overflow: hidden;
    }


    /* -----------------------------------------------------
       IMAGE AREA
       ----------------------------------------------------- */

    .hero-art {
        position: relative !important;

        top: auto !important;
        right: auto !important;
        left: auto !important;

        width: 100% !important;
        height: 280px !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;

        z-index: 1;

        /*
         * IMPORTANT:
         * Do NOT clip the gradient at the bottom.
         */
        overflow: visible !important;
    }


    .hero-art img {
        position: absolute;

        top: 0;
        left: 0;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover;

        object-position: center center;

        display: block;

        animation: none !important;
    }


    /* -----------------------------------------------------
       REMOVE DESKTOP DECORATIONS
       ----------------------------------------------------- */

    .hero-building,
    .hero-glow {
        display: none !important;
    }


    /* -----------------------------------------------------
       IMAGE → BLACK CONTENT GRADIENT
       
       IMPORTANT:
       This extends BELOW the image.
       ----------------------------------------------------- */

    .hero-art::after {
        content: "";

        position: absolute;

        left: 0;
        right: 0;

        /*
         * Start inside the image
         */
        bottom: -90px;

        /*
         * Extend into the content
         */
        height: 170px;

        z-index: 3;

        pointer-events: none;

        background: linear-gradient(
            to bottom,

            rgba(17,17,17,0) 0%,

            rgba(17,17,17,.08) 10%,

            rgba(17,17,17,.20) 25%,

            rgba(17,17,17,.42) 40%,

            rgba(17,17,17,.68) 55%,

            rgba(17,17,17,.88) 72%,

            #111 100%
        );
    }


    /*
     * Remove the old image darkening layer.
     * We don't want another overlay fighting the fade.
     */

    .hero-art::before {
        display: none !important;
    }


    /* -----------------------------------------------------
       CONTENT
       ----------------------------------------------------- */

    .hero .container {
        position: relative;

        z-index: 5;

        margin-top: 0 !important;

        padding-left: 24px;
        padding-right: 24px;
    }


    .hero .row {
        min-height: auto !important;

        padding-top: 25px !important;
        padding-bottom: 35px !important;

        align-items: center !important;
    }


    .hero .col-lg-7 {
        width: 100%;
    }


    /* -----------------------------------------------------
       EYEBROW
       ----------------------------------------------------- */

    .hero .eyebrow {
        text-align: center;

        font-size: .68rem;

        letter-spacing: .16em;

        margin-bottom: 18px;
    }


    /* -----------------------------------------------------
       HEADING
       ----------------------------------------------------- */

    .hero h1 {
        text-align: center;

        font-size: 3rem;

        line-height: .94;

        margin: 0 0 24px;
    }


    /* -----------------------------------------------------
       DESCRIPTION
       ----------------------------------------------------- */

    .hero .lead {
        max-width: 100%;

        text-align: center;

        font-size: .95rem;

        line-height: 1.65;

        margin-bottom: 25px;
    }


    /* -----------------------------------------------------
       CTA
       ----------------------------------------------------- */

    .hero .d-flex {
        width: 100%;

        flex-direction: column;

        align-items: center;

        gap: 10px !important;
    }


    .hero .d-flex .btn {
        width: 100%;

        min-height: 54px;

        display: flex;

        align-items: center;

        justify-content: center;
    }


    /* -----------------------------------------------------
       LOCATION
       ----------------------------------------------------- */

    .hero-note {
        text-align: center;

        margin-top: 18px !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero .eyebrow,
    .hero h1,
    .hero .lead,
    .hero .d-flex {

        opacity: 1;

        animation: none;

    }


    .hero-art img,
    .hero-building,
    .hero-glow {

        animation: none;

    }


    .hero .btn-gold,
    .hero .btn-outline-light {

        transition: none;

    }

}
/* =========================================================
   HERO IMAGE — START BELOW NAVBAR
   ========================================================= */

@media (min-width: 768px) {

    .hero-art {
        top: 82px;
        height: calc(100% - 82px);
    }

}
.section
{
    padding:110px 0
}
.section-light
{
    background:var(--cream)
}
.section-dark
{
    background:var(--dark)
}
.section-sub
{
    color:#aaa;
    max-width:620px;
    margin:auto
}
.feature-image
{
    height:620px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,#1e2b31,#7a6651 46%,#d0c2a8 47%,#303a36)
}
.art-exterior:before
{
    content:"";
    position:absolute;
    left:22%;
    top:7%;
    width:58%;
    height:80%;
    background:linear-gradient(90deg,#222 0 8%,#b18e61 8% 11%,#222 11% 20%,#c4a16c 20% 23%,#222 23% 31%,#c4a16c 31% 34%,#222 34% 43%,#c4a16c 43% 46%,#222 46% 55%,#c4a16c 55% 58%,#222 58% 67%,#c4a16c 67% 70%,#222 70% 79%,#c4a16c 79% 82%,#222 82%);
    clip-path:polygon(12% 0,100% 7%,91% 100%,0 96%);
    box-shadow:20px 30px 80px rgba(0,0,0,.45)
}
.art-exterior:after
{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(15,18,18,.75)),radial-gradient(circle at 20% 80%,rgba(201,166,107,.5),transparent 28%)
}
.tower-lines
{
    position:absolute;
    left:26%;
    top:10%;
    width:50%;
    height:76%;
    background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(255,255,255,.13) 31px 32px);
    z-index:2;
    clip-path:polygon(12% 0,100% 8%,91% 100%,0 96%)
}
.art-label
{
    position:absolute;
    z-index:3;
    left:35px;
    bottom:30px;
    color:#fff;
    letter-spacing:.22em;
    font-size:.8rem
}
.stats-strip
{
    background:#171714;
    color:#fff
}
.stat
{
    padding:42px 20px;
    border-right:1px solid rgba(255,255,255,.12);
    text-align:center
}
.stat strong
{
    font-family:'Playfair Display';
    font-size:2.6rem;
    color:var(--gold);
    display:block
}
.stat span
{
    font-size:.72rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#aaa
}
.amenity
{
    height:150px;
    border:1px solid rgba(255,255,255,.13);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    transition:.25s
}
.amenity:hover
{
    border-color:var(--gold);
    transform:translateY(-3px)
}
.amenity i
{
    font-size:1.8rem;
    color:var(--gold);
    margin-bottom:15px
}
.amenity h5
{
    font-size:.9rem;
    color:#eee;
    font-weight:500
}
.plan-card
{
    background:#fff;
    box-shadow:0 15px 50px rgba(40,35,25,.08)
}
.plan-art
{
    height:330px;
    position:relative;
    overflow:hidden;
    background:#ddd
}
.plan-art:before
{
    content:"";
    position:absolute;
    inset:15%;
    border:3px solid rgba(50,50,45,.75);
    background:repeating-linear-gradient(90deg,transparent 0 28%,rgba(50,50,45,.35) 29% 30%),repeating-linear-gradient(0deg,transparent 0 24%,rgba(50,50,45,.35) 25% 26%)
}
.plan-2bhk
{
    background:linear-gradient(135deg,#e9e3d6,#b9aa91)
}
.plan-3bhk
{
    background:linear-gradient(135deg,#d7ddd8,#8d9b91)
}
.plan-art span
{
    position:absolute;
    right:22px;
    top:20px;
    background:#171714;
    color:#fff;
    padding:7px 13px;
    font-size:.72rem;
    letter-spacing:.1em
}
.gallery-section
{
    background:#ebe5d8
}
.gallery-grid
{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    grid-template-rows:280px 280px;
    gap:14px
}
.gallery-item
{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#252824,#8e7556);
    display:flex;
    align-items:flex-end;
    padding:24px;
    color:#fff
}
.gallery-item:before
{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(145deg,rgba(255,255,255,.08),transparent 45%,rgba(0,0,0,.55))
}
.gallery-item span
{
    position:relative;
    z-index:2;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:.72rem
}
.gallery-a
{
    grid-row:1/3;
    background:linear-gradient(155deg,#17262b,#8e795e 50%,#25302d)
}
.gallery-b
{
    background:linear-gradient(135deg,#6f654e,#d4c2a0)
}
.gallery-c
{
    background:linear-gradient(135deg,#20332a,#778264)
}
.gallery-d
{
    background:linear-gradient(135deg,#bcae99,#544b40);
    grid-column:2/4
}


 /* ==========================================================================
    GALLERY — HOVER INTERACTION
    ========================================================================== */

.gallery-item {
    
    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        box-shadow .4s ease;
}


/* Image */

.gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.22, 1, .36, 1),
        filter .5s ease;

    will-change: transform;
}


/* Existing overlay — make it transition smoothly */

.gallery-item:before {
    transition:
        background .45s ease,
        opacity .45s ease;
}


/* Caption */

.gallery-item span {
    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease;
}


/* ==========================================================================
   HOVER
   ========================================================================== */

.gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .14);
}


.gallery-item:hover img {
    transform: scale(1.06);
    filter: brightness(.88);
}


.gallery-item:hover:before {
    opacity: .85;
}


.gallery-item:hover span {
    transform: translateY(-5px);
}


/* ==========================================================================
   MOBILE — DON'T USE THE HOVER LIFT
   ========================================================================== */

@media (max-width: 767px) {

    .gallery-item:hover {
        transform: none;
        box-shadow: none;
    }

    .gallery-item:hover img {
        transform: scale(1.03);
    }

    .gallery-item:hover span {
        transform: none;
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .gallery-item,
    .gallery-item img,
    .gallery-item:before,
    .gallery-item span {
        transition: none;
    }

    .gallery-item:hover {
        transform: none;
        box-shadow: none;
    }

    .gallery-item:hover img,
    .gallery-item:hover span {
        transform: none;
    }

}
.location-list
{
    border-top:1px solid var(--line);
    margin-top:30px
}
.location-list div
{
    display:flex;
    justify-content:space-between;
    padding:15px 0;
    border-bottom:1px solid var(--line);
    font-size:.9rem
}
.location-list span
{
    color:var(--muted)
}
.map-card
{
    height:470px;
    background:#d7d8d1;
    position:relative;
    overflow:hidden;
    background-image:linear-gradient(32deg,transparent 48%,rgba(255,255,255,.75) 49% 51%,transparent 52%),linear-gradient(118deg,transparent 45%,rgba(255,255,255,.7) 46% 48%,transparent 49%)
}
.map-road
{
    position:absolute;
    background:#a8a9a1;
    height:12px;
    transform:rotate(-28deg)
}
.r1
{
    width:130%;
    left:-15%;
    top:46%
}
.r2
{
    width:100%;
    left:10%;
    top:25%;
    transform:rotate(20deg)
}
.r3
{
    width:90%;
    left:5%;
    top:70%;
    transform:rotate(8deg)
}
.map-pin
{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    background:#171714;
    color:#fff;
    padding:10px 16px;
    border-radius:4px;
    font-size:.75rem;
    box-shadow:0 10px 25px rgba(0,0,0,.25)
}
.map-pin i
{
    color:var(--gold);
    font-size:1.2rem;
    margin-right:6px
}
.map-metro
{
    position:absolute;
    left:10%;
    top:18%;
    background:#fff;
    padding:9px 12px;
    font-size:.72rem;
    box-shadow:0 5px 15px rgba(0,0,0,.1)
}
.emi-section
{
    background:#ded6c6
}
.emi-card
{
    background:#fff;
    padding:38px;
    box-shadow:0 15px 50px rgba(30,25,18,.08)
}
.emi-card label
{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.1em;
    color:#777;
    margin-bottom:7px
}
.emi-result
{
    padding:20px;
    background:#171714;
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center
}
.emi-result span
{
    font-size:.8rem;
    color:#aaa
}
.emi-result strong
{
    font-family:'Playfair Display';
    font-size:2rem;
    color:var(--gold)
}
.faq .accordion-item
{
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.12)
}
.faq .accordion-button
{
    background:transparent;
    color:#fff;
    padding:24px 0;
    font-weight:500
}
.faq .accordion-button:not(.collapsed)
{
    background:transparent;
    color:var(--gold);
    box-shadow:none
}
.faq .accordion-button:focus
{
    box-shadow:none
}
.faq .accordion-body
{
    color:#aaa;
    padding:0 0 24px
}
.cta-section
{
    padding:110px 20px;
    background:linear-gradient(135deg,#1b1a17,#2b261e);
    color:#fff
}
.cta-section h2
{
    font-size:clamp(2.8rem,6vw,5rem)
}
/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
    background: #11110f;
    color: #fff;
    padding: 65px 0 25px;
}


/* ==========================================================================
   MAIN
   ========================================================================== */

.footer-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;

    padding-bottom: 45px;

    border-bottom: 1px solid rgba(255,255,255,.12);
}


/* ==========================================================================
   BRAND
   ========================================================================== */

.footer-logo {
    width: 150px;
    height: auto;
    display: block;
    margin-bottom: 22px;
}

.footer-address {
    margin: 0;

    color: #aaa59c;

    font-size: .85rem;
    line-height: 1.8;
}


/* ==========================================================================
   IMPORTANT INFORMATION
   ========================================================================== */

.footer-disclaimer {
    max-width: 560px;
    margin-left: auto;
}

.footer-heading {
    color: #fff;

    font-size: .75rem;
    font-weight: 600;

    letter-spacing: .12em;
    text-transform: uppercase;

    margin-bottom: 18px;
}

.footer-disclaimer p {
    margin: 0;

    color: #77736c;

    font-size: .72rem;
    line-height: 1.7;
}


/* ==========================================================================
   BOTTOM BAR
   ========================================================================== */

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding-top: 22px;
}

.footer-bottom small {
    color: #66635d;
    font-size: .68rem;
}

.footer-credit {
    text-align: right;
}

.footer-credit strong {
    color: var(--gold);
    font-weight: 500;
}


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

@media (max-width: 767px) {

    .footer {
        padding: 50px 0 22px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 35px;

        padding-bottom: 35px;
    }

    .footer-disclaimer {
        margin-left: 0;
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .footer-credit {
        text-align: left;
    }

    .footer-logo {
        width: 135px;
    }

}
.sticky-enquiry
{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:1000
}
.enquiry-modal
{
    border:0;
    border-radius:0;
    padding:15px
}
.enquiry-modal .modal-title
{
    font-family:'Playfair Display';
    font-size:2rem;
    color:#171717 !important;
}
@media(max-width:991px)
{

    .hero h1
    {
        font-size:4.2rem
    }
    .section
    {
        padding:75px 0
    }
    .gallery-grid
    {
        grid-template-columns:1fr 1fr;
        grid-template-rows:240px 240px
    }
    .gallery-a
    {
        grid-row:auto
    }
    .gallery-d
    {
        grid-column:auto
    }
    .feature-image
    {
        height:450px
    }
}
@media(max-width:575px)
{
    .hero h1
    {
        font-size:3.4rem
    }
    .gallery-grid
    {
        display:grid;
        grid-template-columns:1fr
    }
    .gallery-item
    .gallery-a
    .gallery-d
    {
        grid-column:auto;
        grid-row:auto;
        height:240px
    }
    .stat
    {
        padding:28px 10px
    }
    .stat strong
    {
        font-size:2rem
    }
    .emi-result
    {
        display:block
    }
    .emi-result strong
    {
        display:block;
        margin-top:8px
    }
}
/* ==========================================================================
   CONNECTIVITY SECTION
   ========================================================================== */

.connectivity-section {
    background: var(--cream);
}


/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.connectivity-header {
    max-width: 900px;
    margin: 0 auto 55px;
    text-align: center;
}

.connectivity-header .section-kicker {
    text-align: center;
}

.connectivity-header h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.connectivity-header .connectivity-intro {
    max-width: 680px;
    margin: 20px auto 0;
    text-align: center;

    color: var(--muted);
    line-height: 1.7;
}


/* ==========================================================================
   ACCORDION
   ========================================================================== */

.connectivity-accordion {
    border-top: 1px solid var(--line);
    margin-top: 0;
}

.connectivity-accordion .accordion-item {
    background: transparent;

    border: 0;
    border-bottom: 1px solid var(--line);

    border-radius: 0;
}


/* Accordion button */

.connectivity-accordion .accordion-button {
    background: transparent;
    color: var(--ink);

    padding: 24px 4px;

    box-shadow: none;
    border-radius: 0;

    font-family: 'DM Sans', sans-serif;
    font-size: .95rem;
    font-weight: 600;
}

.connectivity-accordion .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--ink);

    box-shadow: none;
}


/* Remove Bootstrap focus shadow */

.connectivity-accordion .accordion-button:focus {
    box-shadow: none;
}


/* Accordion arrow */

.connectivity-accordion .accordion-button::after {
    width: .7rem;
    height: .7rem;

    background-size: .7rem;
}


/* ==========================================================================
   ACCORDION TITLE
   ========================================================================== */

.connectivity-title {
    display: flex;
    align-items: center;

    gap: 16px;
}


/* ==========================================================================
   CONNECTIVITY ICON
   ========================================================================== */

.connectivity-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(201, 166, 107, .55);

    color: var(--gold);

    font-size: 1.15rem;
}


/* ==========================================================================
   ACCORDION CONTENT
   ========================================================================== */

.connectivity-accordion .accordion-body {
    padding: 0 45px 20px 68px;
}


/* ==========================================================================
   CONNECTIVITY ROW
   ========================================================================== */

.connectivity-row {
    display: grid;

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

    column-gap: 20px;

    padding: 9px 0;

    border-bottom: 1px solid rgba(221, 213, 199, .7);

    font-size: .86rem;

    line-height: 1.45;
}

.connectivity-row:last-child {
    border-bottom: 0;
}


.connectivity-row span {
    color: var(--muted);
}


.connectivity-row strong {
    color: var(--ink);

    font-size: .82rem;

    font-weight: 600;

    white-space: nowrap;

    text-align: right;
}


.connectivity-row small {
    grid-column: 1 / -1;

    color: var(--gold);

    font-size: .68rem;

    margin-top: 2px;
}


/* ==========================================================================
   GOOGLE MAP
   ========================================================================== */

.connectivity-map {
    width: 100%;

    height: 562px;

    overflow: hidden;

    background: #ddd;

    border: 1px solid var(--line);
}


.connectivity-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


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

@media (max-width: 991px) {

    .connectivity-header {
        margin-bottom: 40px;
    }


    .connectivity-map {
        width: 100%;
        height: 450px;
    }


    .connectivity-map iframe {
        width: 100%;
        height: 450px;
    }

}


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

@media (max-width: 575px) {

    .connectivity-section {
        padding: 75px 0;
    }


    /* Header */

    .connectivity-header {
        margin-bottom: 30px;
    }


    .connectivity-header .connectivity-intro {
        font-size: .88rem;
        line-height: 1.65;
    }


    /* Accordion */

    .connectivity-accordion .accordion-button {
        padding: 18px 2px;

        font-size: .88rem;
    }


    .connectivity-title {
        gap: 12px;
    }


    /* Icons */

    .connectivity-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;

        font-size: 1rem;
    }


    /* Accordion body */

    .connectivity-accordion .accordion-body {
        padding: 0 12px 16px 52px;
    }


    /* Rows */

    .connectivity-row {
        grid-template-columns: minmax(0, 1fr) auto;

        column-gap: 12px;

        padding: 9px 0;

        font-size: .78rem;
    }


    .connectivity-row strong {
        font-size: .75rem;
    }


    .connectivity-row small {
        font-size: .62rem;
    }


    /* Map */

    .connectivity-map {
        width: 100%;

        height: 360px;

        margin-top: 10px;
    }


    .connectivity-map iframe {
        width: 100%;
        height: 360px;
    }

}
/* ==========================================================================
   5. ANIMATIONS & RESPONSIVE
   ========================================================================== */

/* --- Keyframes --- */
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.animate__slideInDown {
  animation-duration: 5s;  /* Change 2s to your preferred speed */
}
@keyframes fadeInLeftSimple {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate__fadeInLeft {
  animation-name: fadeInLeftSimple;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes fadeInRightSimple {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate__fadeInRight {
  animation-name: fadeInRightSimple;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes fadeInUpSimple {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}

.animate__fadeInUp {
  animation-name: fadeInUpSimple;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


@keyframes fadeInDownSimple {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate__fadeInDown {
  animation-name: fadeInDownSimple;
  animation-duration: 1.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

@keyframes fadeIn{
  from {
    opacity: 0;
    
  }
  to {
    opacity: 1;
    
  }
}

.animate__fadeIn {
  animation-name: fadeIn;
  animation-duration: 2.5s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


/* Sticky enquiry visibility */
.sticky-enquiry {
    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .4s ease;
}

.sticky-enquiry.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
}
/* =========================================================
   MOBILE — FORCE HERO & NAVBAR TO FULL VIEWPORT WIDTH
   ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

.site-nav,
.hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 767px) {

    .site-nav {
        left: 0 !important;
        right: auto !important;
    }

    .hero {
        left: 0 !important;
        right: auto !important;
    }

}

/* ==========================================================================
   MOBILE HERO — NAVBAR → IMAGE → CENTERED CONTENT
   ========================================================================== */

@media (max-width: 767px) {

    /* -------------------------------------------------------------
       HERO
       ------------------------------------------------------------- */

    .hero {
        min-height: auto !important;
        height: auto !important;
        background: #11110f;
        overflow: hidden;
    }


    /* -------------------------------------------------------------
       IMAGE
       Immediately below navbar
       ------------------------------------------------------------- */

    .hero-art {
        position: relative !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        height: 34svh !important;

        margin: 0 !important;

        opacity: 1;
        overflow: hidden;

        z-index: 1;
    }

    .hero-art img {
        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center center;

        opacity: 1;
    }

    /* No overlay */

    .hero-art::after {
        display: none !important;
    }

    .hero-building,
    .hero-glow {
        display: none !important;
    }


    /* -------------------------------------------------------------
       CONTENT
       ------------------------------------------------------------- */

    .hero .container {
        position: relative;

        width: 100% !important;
        max-width: 100% !important;

        padding-left: 24px;
        padding-right: 24px;

        z-index: 2;
    }

    .hero .row {
        width: 100% !important;

        min-height: auto !important;
        height: auto !important;

        margin: 0 !important;

        padding-top: 28px !important;
        padding-bottom: 30px !important;

        align-items: flex-start !important;
    }

    .hero .col-lg-7 {
        padding-top: 0 !important;

        text-align: center;
    }


    /* -------------------------------------------------------------
       EYEBROW
       ------------------------------------------------------------- */

    .hero .eyebrow {
        font-size: .64rem;

        letter-spacing: .13em;

        margin-bottom: 14px;
    }


    /* -------------------------------------------------------------
       HEADING
       ------------------------------------------------------------- */

    .hero h1 {
        font-size: 2.75rem;

        line-height: .94;

        letter-spacing: -.035em;

        margin: 0 0 20px;
    }


    /* -------------------------------------------------------------
       DESCRIPTION
       ------------------------------------------------------------- */

    .hero .lead {
        max-width: 370px;

        margin: 0 auto;

        color: #d4d0c8;

        font-size: .88rem;

        line-height: 1.55;

        text-align: center;
    }


    /* -------------------------------------------------------------
       BUTTONS
       ------------------------------------------------------------- */

    .hero .d-flex {
        width: 100%;

        flex-direction: column;

        align-items: center;

        gap: 10px !important;

        margin-top: 22px !important;
    }

    .hero .d-flex .btn {
        width: 100%;

        min-height: 50px;

        display: inline-flex;

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

        font-size: .94rem;
    }


    /* -------------------------------------------------------------
       PRIMARY CTA
       ------------------------------------------------------------- */

    .hero .btn-gold {
        box-shadow: 0 8px 22px rgba(0,0,0,.16);
    }


    /* -------------------------------------------------------------
       EXPLORE PROJECT
       Give it slightly more breathing room
       ------------------------------------------------------------- */

    .hero .d-flex .btn-outline-light {
        margin-top: 0;
    }


    /* -------------------------------------------------------------
       LOCATION
       ------------------------------------------------------------- */

    .hero-note {
        margin-top: 16px !important;

        font-size: .7rem;

        line-height: 1.4;

        color: #aaa;

        text-align: center;
    }

}
/* =========================================================
   MOBILE NAVBAR
   Logo visible on hero
   Full navbar appears after hero
   ========================================================= */

@media (max-width: 767px) {

    /* ---------------------------------------------------------
       NAVBAR — INITIAL HERO STATE
       --------------------------------------------------------- */

    .site-nav {
        background: transparent !important;
        border-bottom: 0 !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;

        padding: 10px 0 !important;

        transition:
            background .35s ease,
            backdrop-filter .35s ease,
            border-color .35s ease;
    }


    /* Keep logo INSIDE navbar */

    .site-nav .logo {
        position: relative !important;
        top: auto !important;
        left: auto !important;

        width: 135px !important;
        height: auto;

        display: block;
    }

    .site-nav .navbar-brand {
        padding: 0 !important;
        margin: 0 !important;
    }


    /* Navbar container */

    .site-nav .container {
        width: 100% !important;
        max-width: 100% !important;

        padding-left: 22px !important;
        padding-right: 22px !important;
    }


    /* Hide hamburger while inside hero */

    .site-nav .navbar-toggler {
        display: none;
    }


    /* IMPORTANT:
       DO NOT hide .navbar-collapse here.
       Bootstrap needs to control .collapse / .show.
    */


    /* ---------------------------------------------------------
       NAVBAR AFTER HERO
       --------------------------------------------------------- */

    .site-nav.nav-visible {
        background: rgba(10,10,9,.72) !important;

        border-bottom: 1px solid rgba(255,255,255,.12) !important;

        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }


    /* Show hamburger after hero */

    .site-nav.nav-visible .navbar-toggler {
        display: block;
    }


    /* Hamburger appearance */

    .site-nav .navbar-toggler {
        border: 1px solid rgba(255,255,255,.22);
        border-radius: 8px;

        padding: 8px 10px;

        box-shadow: none !important;
    }

    .site-nav .navbar-toggler:focus {
        box-shadow: none !important;
    }


    /* ---------------------------------------------------------
       MOBILE MENU
       --------------------------------------------------------- */

    .site-nav .navbar-collapse {
        background: none;

        margin-top: 0px;
        padding: 10px 0 14px;

        border-top: 1px solid rgba(255,255,255,.10);
    }

    .site-nav .navbar-nav {
        gap: 0 !important;
    }

    .site-nav .nav-link {
        padding: 13px 4px !important;

        font-size: .78rem;

        color: #eee !important;
    }

}


/* =========================================================
   MOBILE — OVERVIEW CENTER + JUSTIFIED
   ========================================================= */

@media (max-width: 767px) {

    #overview .col-lg-6:first-child {
        text-align: center;
    }

    #overview .section-kicker {
        text-align: center;
    }

    #overview h2 {
        text-align: center;
    }

    #overview h6 {
        text-align: center;
    }

    #overview p {
        text-align: justify;
        text-align-last: center;
    }

    #overview .btn {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

}

/* =========================================================
   MOBILE — RESIDENCES HEADER CENTER ALIGNMENT
   ========================================================= */

@media (max-width: 767px) {

    #plans .row.align-items-end {
        text-align: center;
    }

    #plans .section-kicker {
        text-align: center;
    }

    #plans h2 {
        text-align: center;
    }

    #plans .col-lg-5 {
        text-align: center !important;
        margin-top: 20px;
    }

    #plans .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

}

/* =========================================================
   MOBILE — FOOTER CENTER ALIGNMENT
   ========================================================= */

@media (max-width: 767px) {

    .footer {
        text-align: center;
    }

    .footer-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .footer-brand {
        width: 100%;
        text-align: center;
    }

    .footer-logo {
        margin: 0 auto 18px;
        display: block;
    }

    .footer-address {
        text-align: center;
        margin-bottom: 0;
    }

    .footer-disclaimer {
        width: 100%;
        max-width: 420px;
        text-align: center;
    }

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

    .footer-disclaimer p {
        text-align: center;
        line-height: 1.6;
    }

    .footer-bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;

        text-align: center;
    }

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

}

.ms-auto{
    padding-top:0px;
}


/* =========================================================
   CONFIGURATIONS
   ========================================================= */

.configurations-section {
    background: #ebe5d8;
}

.configurations-intro {
    max-width: 620px;
    margin: 18px auto 0;

    color: #756f65;

    font-size: .95rem;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   CARD
   --------------------------------------------------------- */

.configuration-card {
    height: 100%;

    padding: 38px;

    background: #fff;

    border: 1px solid rgba(30, 30, 25, .10);

    display: flex;
    flex-direction: column;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.configuration-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 16px 35px rgba(20, 18, 14, .10);

    border-color: rgba(201, 166, 107, .45);
}


/* ---------------------------------------------------------
   TYPE
   --------------------------------------------------------- */

.configuration-type {
    color: var(--gold);

    font-size: .72rem;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;

    margin-bottom: 12px;
}


/* ---------------------------------------------------------
   AREA
   --------------------------------------------------------- */

.configuration-area {
    color: #171512;

    font-family: 'DM Sans', serif;

    font-size: 2.25rem;

    line-height: 1.1;

    margin-bottom: 30px;
}

.configuration-area span {
    font-family: inherit;

    font-size: .85rem;

    color: #777;

    letter-spacing: .03em;
}


/* ---------------------------------------------------------
   DETAILS
   --------------------------------------------------------- */

.configuration-details {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

    padding: 20px 0;

    margin-bottom: 20px;

    border-top: 1px solid rgba(30, 30, 25, .10);

    border-bottom: 1px solid rgba(30, 30, 25, .10);
}

.configuration-details > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.detail-label {
    font-size: .65rem;

    color: #8b857b;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.configuration-details strong {
    font-size: .82rem;

    font-weight: 500;

    color: #24221e;
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.configuration-cta {
    align-self: flex-start;

    margin-top: auto;

    padding: 10px 20px;

    font-size: .82rem;
}


/* ---------------------------------------------------------
   FEATURED 3 BHK
   --------------------------------------------------------- */

.configuration-card-featured {
    background: #171f1a;

    border-color: #171f1a;
}

.configuration-card-featured .configuration-type {
    color: var(--gold);
}

.configuration-card-featured .configuration-area {
    color: #fff;
}

.configuration-card-featured .configuration-area span {
    color: #aaa;
}

.configuration-card-featured .configuration-details {
    border-color: rgba(255,255,255,.12);
}

.configuration-card-featured .detail-label {
    color: #999;
}

.configuration-card-featured .configuration-details strong {
    color: #eee;
}


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

@media (max-width: 767px) {

    .configurations-section {
        text-align: center;
    }

    .configurations-intro {
        font-size: .88rem;

        line-height: 1.6;

        max-width: 360px;
    }

    .configuration-card {
        padding: 28px 24px;

        text-align: center;
    }

    .configuration-area {
        font-size: 2rem;
    }

    .configuration-details {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .configuration-cta {
        align-self: center;

        width: 100%;

        min-height: 48px;
    }

}
/* =========================================================
   COMPACT RESIDENTIAL PLANS
   ========================================================= */

.master-plan-card {
    max-width: 1050px;
    margin: 0 auto 28px;
}


/* ---------------------------------------------------------
   IMAGE WRAPPER
   --------------------------------------------------------- */

.plan-image-wrap {
    position: relative;
    overflow: hidden;
    background: #171713;
}


/* Master plan */

.master-plan-card .plan-image-wrap {
    height: 360px;
}


/* Tower plans */

.plan-card .plan-image-wrap {
    height: 270px;
}


/* ---------------------------------------------------------
   IMAGES
   --------------------------------------------------------- */

.plan-image-wrap img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease,
                filter .4s ease;
}


/* ---------------------------------------------------------
   BLUR
   --------------------------------------------------------- */

/* 
   Keep this commented until you are ready.
   Then simply remove the comments.
*/

/*
.plan-image-wrap img {
    filter: blur(5px);
    transform: scale(1.04);
}
*/


/* ---------------------------------------------------------
   DARK OVERLAY
   --------------------------------------------------------- */

.plan-overlay {
    position: absolute;

    inset: 0;

    background: rgba(15, 15, 12, .28);

    pointer-events: none;

    transition: background .3s ease;
}


/* ---------------------------------------------------------
   DOWNLOAD BUTTON
   --------------------------------------------------------- */

.plan-download-btn {
    position: absolute;

    top: 50%;
    left: 50%;

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

    z-index: 3;

    display: inline-flex;

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

    padding: 13px 22px;

    background: var(--gold);

    border: 1px solid var(--gold);

    border-radius: 4px;

    color: #17130c;

    font-size: .78rem;

    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

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

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.plan-download-btn:hover {
    background: #dfbd83;

    color: #17130c;

    transform: translate(-50%, -50%) translateY(-2px);

    box-shadow: 0 12px 28px rgba(0,0,0,.25);
}


/* ---------------------------------------------------------
   IMAGE HOVER
   --------------------------------------------------------- */

.plan-image-wrap:hover img {
    transform: scale(1.025);
}

.plan-image-wrap:hover .plan-overlay {
    background: rgba(15, 15, 12, .40);
}


/* ---------------------------------------------------------
   PLAN CARD
   --------------------------------------------------------- */

.plan-card {
    height: 100%;

    overflow: hidden;

    background: #fff;

    border: 1px solid rgba(30,30,25,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.plan-card:hover {
    transform: translateY(-4px);

    box-shadow: 0 14px 30px rgba(20,18,14,.10);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .master-plan-card {
        margin-bottom: 20px;
    }

    .master-plan-card .plan-image-wrap {
        height: 230px;
    }

    .plan-card .plan-image-wrap {
        height: 220px;
    }

    .plan-download-btn {
        padding: 11px 17px;

        font-size: .72rem;
    }

    .plan-card .p-4 {
        padding: 22px !important;
    }

    .plan-card h3 {
        font-size: 1.35rem;
    }

    .plan-card strong {
        font-size: .85rem;
    }

    .plan-card p {
        font-size: .82rem;

        line-height: 1.55;
    }

}

/* =========================================================
   BROCHURE / RESOURCE SECTION
   ========================================================= */

.brochure-section {
    background: #ebe5d8;
}


/* ---------------------------------------------------------
   MAIN CARD
   --------------------------------------------------------- */

.brochure-card {
    display: grid;

    grid-template-columns: 1.05fr .95fr;

    min-height: 390px;

    overflow: hidden;

    background: #f7f4ed;

    border: 1px solid rgba(30,30,25,.08);
}


/* ---------------------------------------------------------
   CONTENT
   --------------------------------------------------------- */

.brochure-content {
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 55px 60px;
}

.brochure-content h2 {
    max-width: 560px;

    margin: 18px 0;

    font-size: clamp(2.3rem, 4vw, 4rem);

    line-height: .98;
}

.brochure-content p {
    max-width: 520px;

    margin-bottom: 25px;

    color: #716c63;

    font-size: .95rem;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   CTA
   --------------------------------------------------------- */

.brochure-btn {
    align-self: flex-start;

    padding: 11px 22px;

    font-size: .8rem;

    font-weight: 600;
}


/* ---------------------------------------------------------
   BROCHURE IMAGE
   --------------------------------------------------------- */

.brochure-preview {
    position: relative;

    min-height: 390px;

    overflow: hidden;

    background: #d8d1c2;
}

.brochure-image {
    position: absolute;

    inset: 0;

    overflow: hidden;
}

.brochure-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}

.brochure-card:hover .brochure-image img {
    transform: scale(1.025);
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .brochure-card {
        grid-template-columns: 1fr;

        min-height: auto;

        text-align: center;
    }

    .brochure-content {
        padding: 38px 24px 32px;

        align-items: center;
    }

    .brochure-content h2 {
        font-size: 2.25rem;

        line-height: 1;

        margin: 15px 0;
    }

    .brochure-content p {
        max-width: 360px;

        font-size: .85rem;

        line-height: 1.6;
    }

    .brochure-btn {
        align-self: center;

        min-height: 46px;
    }

    .brochure-preview {
        position: relative;

        min-height: 230px;

        height: 230px;
    }

}


/* =========================================================
   AMENITIES HORIZONTAL SLIDER
   ========================================================= */

.amenities-slider-wrap {
    position: relative;
    width: 100%;
}


/* SLIDER */

.amenities-slider {
    display: flex;
    gap: 20px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    padding: 2px 0 10px;

    scrollbar-width: none;
}

.amenities-slider::-webkit-scrollbar {
    display: none;
}


/* EACH CARD */

.amenity-slide {
    flex: 0 0 calc((100% - 100px) / 6);

    scroll-snap-align: start;
}


/* CARD */

.amenity {
    min-height: 185px;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 30px 15px;

    background: transparent;

    border: 1px solid rgba(255,255,255,.13);

    transition:
        border-color .3s ease,
        background-color .3s ease,
        transform .3s ease;
}


/* ICON */

.imgamenities {
    width: 58px;
    height: 58px;

    object-fit: contain;

    margin-bottom: 16px;

    filter:
        brightness(0)
        saturate(100%)
        invert(72%)
        sepia(25%)
        saturate(650%)
        hue-rotate(355deg)
        brightness(90%)
        contrast(88%);

    transition: transform .3s ease;
}


/* TEXT */

.amenity h5 {
    margin: 0;

    color: #eee;

    font-size: .9rem;

    font-weight: 500;

    line-height: 1.35;
}


/* HOVER */

@media (hover: hover) {

    .amenity:hover {
        border-color: var(--gold);

        background: rgba(201,166,107,.035);

        transform: translateY(-3px);
    }

    .amenity:hover .imgamenities {
        transform: translateY(-3px) scale(1.05);
    }

}


/* =========================================================
   ARROWS
   ========================================================= */

.amenities-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(201,166,107,.45);

    background: #10110f;

    color: var(--gold);

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        opacity .25s ease;
}

.amenities-arrow:hover {
    background: var(--gold);
    color: #111;
}

.amenities-prev {
    left: -21px;
}

.amenities-next {
    right: -21px;
}


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

@media (max-width: 991px) {

    .amenity-slide {
        flex: 0 0 calc((100% - 20px) / 2);
    }

    .amenities-slider {
        gap: 20px;

        padding-left: 2px;
        padding-right: 2px;
    }

    .amenities-arrow {
        width: 38px;
        height: 38px;
    }

    .amenities-prev {
        left: -10px;
    }

    .amenities-next {
        right: -10px;
    }

}


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

@media (max-width: 575px) {

    .amenity-slide {
        flex: 0 0 78%;
    }

    .amenity {
        min-height: 160px;
    }

    .imgamenities {
        width: 48px;
        height: 48px;

        margin-bottom: 12px;
    }

    .amenity h5 {
        font-size: .8rem;
    }

    .amenities-arrow {
        display: none;
    }

}







/* =========================================================
   GALLERY CAROUSEL
   ========================================================= */

.gallery-section {
    background: #ebe5d8;
}


/* ---------------------------------------------------------
   SLIDER WRAPPER
   --------------------------------------------------------- */

.gallery-slider-wrapper {
    position: relative;
    width: 100%;
}


/* ---------------------------------------------------------
   SLIDER
   --------------------------------------------------------- */

.gallery-slider {
    display: flex;
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    scrollbar-width: none;

    padding: 0 2px 5px;

    -webkit-overflow-scrolling: touch;
}

.gallery-slider::-webkit-scrollbar {
    display: none;
}


/* ---------------------------------------------------------
   SLIDES
   --------------------------------------------------------- */

.gallery-slide {
    flex: 0 0 calc((100% - 28px) / 3);

    scroll-snap-align: start;
}


/* ---------------------------------------------------------
   IMAGE CARD
   --------------------------------------------------------- */

.gallery-card {
    position: relative;

    width: 100%;

    aspect-ratio: 1.55 / 1;

    overflow: hidden;

    background: #222;

    border-radius: 6px;

    cursor: pointer;
}

.gallery-card img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .5s ease;
}


/* ---------------------------------------------------------
   IMAGE HOVER
   --------------------------------------------------------- */

@media (hover: hover) {

    .gallery-card:hover img {
        transform: scale(1.035);
    }

}


/* ---------------------------------------------------------
   CAPTION
   --------------------------------------------------------- */

.gallery-caption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 35px 18px 16px;

    color: #fff;

    font-size: .75rem;

    letter-spacing: .1em;

    text-transform: uppercase;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.65),
        rgba(0,0,0,0)
    );

    opacity: 0;

    transform: translateY(5px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

@media (hover: hover) {

    .gallery-card:hover .gallery-caption {
        opacity: 1;
        transform: translateY(0);
    }

}


/* =========================================================
   CAROUSEL ARROWS
   ========================================================= */

.gallery-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    width: 42px;
    height: 42px;

    display: flex;

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

    border: 0;

    border-radius: 50%;

    background: #fff;

    color: #222;

    box-shadow: 0 3px 12px rgba(0,0,0,.12);

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.gallery-arrow:hover {
    background: var(--gold);

    color: #17130c;

    transform: translateY(-50%) scale(1.05);
}

.gallery-prev {
    left: -21px;
}

.gallery-next {
    right: -21px;
}


/* =========================================================
   DOTS
   ========================================================= */

.gallery-dots {
    display: flex;

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

    gap: 6px;

    margin-top: 18px;
}

.gallery-dot {
    width: 6px;
    height: 6px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: #b9b2a4;

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;
}

.gallery-dot.active {
    width: 18px;

    border-radius: 10px;

    background: #26382e;
}


/* =========================================================
   LIGHTBOX
   ========================================================= */

.gallery-lightbox {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

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

    padding: 35px 70px;

    background: rgba(10,10,9,.94);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.gallery-lightbox.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* ---------------------------------------------------------
   LIGHTBOX CONTENT
   --------------------------------------------------------- */

.lightbox-content {
    width: min(1100px, 90vw);

    max-height: calc(100vh - 70px);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


/* ---------------------------------------------------------
   IMAGE WRAPPER
   --------------------------------------------------------- */

.lightbox-image-wrapper {
    max-width: 100%;

    max-height: calc(100vh - 130px);

    overflow: auto;

    display: flex;

    justify-content: center;

    align-items: flex-start;

    scrollbar-width: thin;

    scrollbar-color: rgba(255,255,255,.3) transparent;
}


/* ---------------------------------------------------------
   LIGHTBOX IMAGE
   --------------------------------------------------------- */

#lightboxImage {
    display: block;

    width: auto;

    max-width: 100%;

    height: auto;

    max-height: calc(100vh - 150px);

    object-fit: contain;

    border-radius: 2px;

    user-select: none;

    -webkit-user-drag: none;
}


/* ---------------------------------------------------------
   LIGHTBOX INFO
   --------------------------------------------------------- */

.lightbox-info {
    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 20px;

    margin-top: 14px;

    color: #fff;

    font-size: .75rem;

    letter-spacing: .1em;

    text-transform: uppercase;
}

.lightbox-counter {
    color: #aaa;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.lightbox-close {
    position: absolute;

    top: 25px;
    right: 28px;

    z-index: 10;

    width: 44px;
    height: 44px;

    display: flex;

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

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    background: rgba(0,0,0,.25);

    color: #fff;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease;
}

.lightbox-close:hover {
    background: var(--gold);

    border-color: var(--gold);

    color: #17130c;
}


/* =========================================================
   LIGHTBOX ARROWS
   ========================================================= */

.lightbox-arrow {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 10;

    width: 48px;
    height: 48px;

    display: flex;

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

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    background: rgba(0,0,0,.35);

    color: #fff;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.lightbox-arrow:hover {
    background: var(--gold);

    border-color: var(--gold);

    color: #17130c;

    transform: translateY(-50%) scale(1.05);
}

.lightbox-prev {
    left: 25px;
}

.lightbox-next {
    right: 25px;
}


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

@media (max-width: 991px) {

    .gallery-slide {
        flex: 0 0 calc((100% - 14px) / 2);
    }

    .gallery-lightbox {
        padding: 30px 55px;
    }

}


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

@media (max-width: 575px) {

    .gallery-slider {
        gap: 12px;
    }

    .gallery-slide {
        flex: 0 0 88%;
    }

    .gallery-card {
        aspect-ratio: 1.35 / 1;

        border-radius: 5px;
    }

    .gallery-arrow {
        width: 36px;
        height: 36px;
    }

    .gallery-prev {
        left: -8px;
    }

    .gallery-next {
        right: -8px;
    }

    .gallery-caption {
        opacity: 1;

        transform: none;

        padding: 30px 14px 12px;

        font-size: .68rem;
    }


    /* LIGHTBOX */

    .gallery-lightbox {
        padding: 55px 15px 25px;
    }

    .lightbox-content {
        width: 100%;

        max-height: calc(100vh - 80px);
    }

    .lightbox-image-wrapper {
        width: 100%;

        max-height: calc(100vh - 125px);

        overflow: auto;

        justify-content: center;
    }

    #lightboxImage {
        max-width: 100%;

        max-height: calc(100vh - 140px);

        border-radius: 0;
    }

    .lightbox-close {
        top: 12px;
        right: 12px;

        width: 40px;
        height: 40px;
    }

    .lightbox-arrow {
        width: 38px;
        height: 38px;

        top: auto;

        bottom: 18px;

        transform: none;
    }

    .lightbox-arrow:hover {
        transform: scale(1.05);
    }

    .lightbox-prev {
        left: 18px;
    }

    .lightbox-next {
        right: 18px;
    }

    .lightbox-info {
        justify-content: center;

        margin-top: 8px;

        padding: 0 55px;

        text-align: center;
    }

}



/* =========================================================
   FINAL CONTACT / CONVERSION SECTION
   ========================================================= */

.final-contact
{
    background:#10110f;
    color:#fff;
    padding:100px 0;
}

.final-contact-inner
{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
}


/* LEFT */

.final-contact-content
{
    max-width:560px;
}

.final-contact-content .section-kicker
{
    margin-bottom:18px;
}

.final-contact-content h2
{
    font-size:clamp(2.8rem,5vw,5rem);
    line-height:.98;
    margin:0 0 25px;
    color:#fff;
}

.final-contact-content h2 span
{
    color:var(--gold);
}

.final-contact-content > p
{
    max-width:500px;
    color:#bcbab4;
    font-size:1rem;
    line-height:1.8;
}


/* FORM */

.final-contact-form
{
    background:#191b18;
    border:1px solid rgba(201,166,107,.22);
    padding:38px;
}

.form-heading
{
    font-size:1.55rem;
    font-weight:600;
    margin-bottom:6px;
}

.form-subtext
{
    color:#999891;
    font-size:.82rem;
    margin-bottom:25px;
}


/* INPUTS */

.final-contact-form .form-control
{
    min-height:52px;
    border-radius:2px;
    border:1px solid rgba(255,255,255,.16);
    background:#11120f;
    color:#fff;
    padding:0 15px;
    font-size:.85rem;
}

.final-contact-form .form-control::placeholder
{
    color:#85847f;
}

.final-contact-form .form-control:focus
{
    border-color:var(--gold);
    box-shadow:0 0 0 2px rgba(201,166,107,.12);
    background:#11120f;
    color:#fff;
}


/* CTA */

.final-contact-btn
{
    width:100%;
    min-height:54px;
    margin-top:18px;

    background:var(--gold);
    border:1px solid var(--gold);
    color:#17130c;

    font-weight:600;
    border-radius:2px;

    transition:all .25s ease;
}

.final-contact-btn:hover
{
    background:#dfbd83;
    border-color:#dfbd83;
    color:#17130c;
    transform:translateY(-1px);
}


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

@media (max-width:767px)
{
    .final-contact
    {
        padding:70px 0;
    }

    .final-contact-inner
    {
        grid-template-columns:1fr;
        gap:40px;
    }

    .final-contact-content
    {
        max-width:none;
        text-align:center;
    }

    .final-contact-content h2
    {
        font-size:2.7rem;
        line-height:1;
    }

    .final-contact-content > p
    {
        margin-left:auto;
        margin-right:auto;
    }

    .final-contact-form
    {
        padding:25px 20px;
    }

    .form-heading
    {
        font-size:1.35rem;
    }
}




/* =========================================================
   MOBILE STICKY ACTIONS
   ========================================================= */

.mobile-sticky-actions
{
    display:none;
}


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

@media (max-width:767px)
{
    /* Hide desktop sticky button */
    .sticky-enquiry
    {
        display:none !important;
    }

    .mobile-sticky-actions
    {
        position:fixed;
        left:0;
        right:0;
        bottom:0;

        display:flex;
        gap:8px;

        padding:8px;
        padding-bottom:calc(8px + env(safe-area-inset-bottom));

        background:rgba(16,17,15,.96);
        backdrop-filter:blur(14px);

        border-top:1px solid rgba(255,255,255,.12);

        z-index:9999;

        transition:
            opacity .3s ease,
            transform .3s ease,
            visibility .3s ease;
    }

    .mobile-action-btn
    {
        flex:1;

        min-height:52px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:9px;

        border-radius:8px;

        font-size:.88rem;
        font-weight:600;

        text-decoration:none;

        transition:transform .2s ease,
                   background .2s ease;
    }

    .mobile-action-btn i
    {
        font-size:1rem;
    }

    .mobile-enquire
    {
        background:var(--gold);
        border:1px solid var(--gold);
        color:#17130c;
    }

    .mobile-enquire:hover,
    .mobile-enquire:focus
    {
        background:#dfbd83;
        border-color:#dfbd83;
        color:#17130c;
    }

    .mobile-whatsapp
    {
        background:#25351f;
        border:1px solid rgba(201,166,107,.35);
        color:#fff;
    }

    .mobile-whatsapp:hover,
    .mobile-whatsapp:focus
    {
        background:#30452a;
        color:#fff;
    }

    .mobile-action-btn:active
    {
        transform:scale(.98);
    }


    /* Hidden state */
    .mobile-sticky-actions.sticky-hidden
    {
        opacity:0;
        visibility:hidden;
        transform:translateY(100%);
        pointer-events:none;
    }

    /*
       Space for fixed bottom bar.
       Prevents footer/content from being covered.
    */

}


/* =========================================================
   DESKTOP STICKY HIDDEN STATE
   ========================================================= */

@media (min-width:768px)
{
    .sticky-enquiry
    {
        transition:
            opacity .3s ease,
            transform .3s ease,
            visibility .3s ease;
    }

    .sticky-enquiry.sticky-hidden
    {
        opacity:0;
        visibility:hidden;
        transform:translateY(20px);
        pointer-events:none;
    }
}

/* =========================================================
   FINAL MOBILE HERO TRANSITION
   IMAGE → BLACK CONTENT
   ========================================================= */

@media (max-width: 767px) {

    /* HERO */
    .hero {
        background: #11110f !important;
        overflow: hidden !important;
    }


    /* IMAGE WRAPPER */
    .hero-art {
        position: relative !important;

        width: 100% !important;
        height: 34svh !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        z-index: 1 !important;
    }


    /* IMAGE */
    .hero-art img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center center !important;

        /*
         * THIS IS THE ACTUAL SEAMLESS FADE.
         * Image gradually becomes transparent at bottom,
         * revealing the #111 hero background underneath.
         */
        -webkit-mask-image: linear-gradient(
            to bottom,
            #000 55%,
            rgba(0,0,0,.95) 65%,
            rgba(0,0,0,.70) 75%,
            rgba(0,0,0,.35) 86%,
            transparent 100%
        );

        mask-image: linear-gradient(
            to bottom,
            #000 55%,
            rgba(0,0,0,.95) 65%,
            rgba(0,0,0,.70) 75%,
            rgba(0,0,0,.35) 86%,
            transparent 100%
        );

        animation: none !important;
    }


    /* KILL THE OLD OVERLAYS */
    .hero-art::before {
        display: none !important;
    }

    .hero-art::after {
        display: none !important;
    }


    /* DECORATIVE DESKTOP ELEMENTS */
    .hero-building,
    .hero-glow {
        display: none !important;
    }


    /* CONTENT */
    .hero .container {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-top: -45px !important;

        padding-left: 24px !important;
        padding-right: 24px !important;

        z-index: 5 !important;
    }


    .hero .row {
        min-height: auto !important;
        height: auto !important;

        margin: 0 !important;

        padding-top: 28px !important;
        padding-bottom: 30px !important;

        align-items: flex-start !important;
    }


    .hero .col-lg-7 {
        width: 100% !important;

        padding-top: 60px !important;

        text-align: center !important;
    }


    /* EYEBROW */
    .hero .eyebrow {
        text-align: center !important;

        font-size: .64rem !important;

        letter-spacing: .13em !important;

        margin-bottom: 14px !important;
    }


    /* HEADING */
    .hero h1 {
        text-align: center !important;

        font-size: 2.75rem !important;

        line-height: .94 !important;

        letter-spacing: -.035em !important;

        margin: 0 0 20px !important;
    }


    /* DESCRIPTION */
    .hero .lead {
        max-width: 370px !important;

        margin: 0 auto !important;

        color: #d4d0c8 !important;

        font-size: .88rem !important;

        line-height: 1.55 !important;

        text-align: center !important;
    }


    /* BUTTONS */
    .hero .d-flex {
        width: 100% !important;

        flex-direction: column !important;

        align-items: center !important;

        gap: 10px !important;

        margin-top: 22px !important;
    }


    .hero .d-flex .btn {
        width: 100% !important;

        min-height: 50px !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        font-size: .94rem !important;
    }

}

/* =========================================================
   OVERVIEW
   ========================================================= */

.overview-section {
    background: #f4f0e7;
}


/* TOP HEADING */

.overview-heading {
    margin-bottom: 60px;
}

.overview-heading .section-kicker {
    margin-bottom: 14px;
}

.overview-heading h2 {
    max-width: 1100px;
    margin: 0 auto 22px;
}

.overview-subtitle {
    max-width: 700px;
    margin: 0 auto;
    color: #716b62;
    font-size: 1.05rem;
    line-height: 1.6;
}


/* CONTENT */

.overview-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.overview-copy {
    max-width: 620px;
}

.overview-copy p {
    margin: 0 0 22px;
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;
}

.overview-copy p:last-child {
    margin-bottom: 0;
}


/* IMAGE */

.overview-image-wrap {
    display: flex;
    align-items: center;
}

.overview-image {
    width: 100%;
    overflow: hidden;
}

.overview-image img {
    width: 100%;
    height: auto;
    display: block;
}


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

@media (max-width: 767px) {

    .overview-heading {
        margin-bottom: 40px;
    }

    .overview-heading h2 {
        font-size: 2.7rem;
        line-height: 1;
    }

    .overview-subtitle {
        font-size: .95rem;
    }

    .overview-content {
        text-align: center;
    }

    .overview-copy {
        max-width: 100%;
    }

    .overview-copy p {
        text-align: center;
        font-size: .95rem;
        line-height: 1.65;
        margin-bottom: 20px;
    }

    .overview-image-wrap {
        margin-top: 30px;
    }

}
/* =========================================================
   VIOLET PRISM — VISUAL DNA OVERRIDES
   Keeps existing HTML, JS, sliders, modals and interactions intact.
   Background asset: ../assets/images/bgpage.jpg
   ========================================================= */
:root {
    --ink: #f4f0f5;
    --muted: #b8adbf;
    --cream: #17111f;
    --gold: #d6c5a3;
    --dark: #0d0914;
    --line: rgba(235,225,245,.14);
    --violet: #8f5aa9;
    --violet-soft: #b79ac8;
    --violet-deep: #24132f;
}

html, body {
    background: #0d0914;
}

body {
    position: relative;
    isolation: isolate;
    color: var(--ink);
    background-color: #0d0914;
    background-image:
        linear-gradient(rgba(9,6,15,.72), rgba(9,6,15,.82)),
        url('../assets/images/bgpage.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

/* Softens the supplied saturated artwork without changing the asset. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 22%, rgba(123,77,151,.16), transparent 30%),
        radial-gradient(circle at 82% 72%, rgba(58,35,85,.18), transparent 34%),
        linear-gradient(180deg, rgba(7,5,12,.08), rgba(7,5,12,.28));
}


/* ---------------------------------------------------------
   GLOBAL SURFACES — let the background remain the DNA
   --------------------------------------------------------- */
.section,
.section-light,
.configurations-section,
.overview-section,
.gallery-section,
.brochure-section {
    background: transparent !important;
}

.section-dark {
    background: rgba(10,7,17,.42) !important;
}

.section {
    padding: 120px 0;
}

.section-kicker,
.eyebrow {
    color: var(--violet-soft) !important;
    letter-spacing: .24em;
}

h1, h2, h3, h4 {
    color: #f6f1f7;
}

h2 span,
h1 em {
    color: var(--violet-soft) !important;
}

.section-sub,
.overview-subtitle,
.configurations-intro,
.connectivity-header .connectivity-intro {
    color: #c0b6c5 !important;
}

/* ---------------------------------------------------------
   NAVBAR — transparent/glass, changes naturally over scroll
   --------------------------------------------------------- */
.site-nav {
    background: rgba(10,7,16,.42) !important;
    border-bottom: 1px solid rgba(235,225,245,.12) !important;
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
    padding: 22px 0 !important;
    transition: background .35s ease, padding .35s ease, border-color .35s ease;
}

.nav-link {
    color: rgba(249,244,250,.88) !important;
}

.nav-link:hover,
.nav-link:focus {
    color: #fff !important;
}

/* ---------------------------------------------------------
   HERO — preserve the existing project-image composition
   --------------------------------------------------------- */
.hero {
    background:
        linear-gradient(90deg, rgba(8,5,13,.92) 0%, rgba(13,8,20,.78) 42%, rgba(13,8,20,.24) 100%),
        url('../assets/images/bgpage.jpg') center/cover no-repeat !important;
}

.hero::before {
    background:
        radial-gradient(circle at 72% 38%, rgba(132,78,163,.14), transparent 36%),
        linear-gradient(180deg, rgba(8,5,13,.12), rgba(8,5,13,.34)) !important;
}

.hero-art::after {
    background: linear-gradient(
        90deg,
        #0d0914 0%,
        rgba(13,9,20,.98) 10%,
        rgba(13,9,20,.86) 22%,
        rgba(13,9,20,.62) 34%,
        rgba(13,9,20,.32) 46%,
        rgba(13,9,20,.08) 58%,
        rgba(13,9,20,0) 68%
    ) !important;
}

.hero-glow {
    background: radial-gradient(ellipse, rgba(143,90,169,.12), transparent 65%) !important;
}

.hero .lead {
    color: #d4ccd8 !important;
}

/* ---------------------------------------------------------
   BUTTONS — warm champagne against violet, not neon purple
   --------------------------------------------------------- */
.btn-gold {
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: #17111a !important;
}

.btn-gold:hover {
    background: #e2d4b9 !important;
    border-color: #e2d4b9 !important;
    box-shadow: 0 12px 30px rgba(214,197,163,.16) !important;
}

.btn-outline-light {
    border-color: rgba(245,239,247,.48) !important;
    color: #f5eff7 !important;
}

.btn-outline-light:hover {
    background: rgba(255,255,255,.08) !important;
}

/* ---------------------------------------------------------
   STATS — translucent band instead of solid black
   --------------------------------------------------------- */
.stats-strip {
    background: rgba(10,7,16,.68) !important;
    border-top: 1px solid rgba(235,225,245,.10);
    border-bottom: 1px solid rgba(235,225,245,.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.stat {
    border-right-color: rgba(235,225,245,.11) !important;
}

.stat strong {
    color: var(--gold) !important;
}

.stat span {
    color: #b4abb9 !important;
}

/* ---------------------------------------------------------
   OVERVIEW — clean editorial surface
   --------------------------------------------------------- */
.overview-copy p {
    color: #d2cad6;
}

.overview-image {
    border: 1px solid rgba(235,225,245,.12);
    box-shadow: 0 30px 80px rgba(0,0,0,.24);
}

/* ---------------------------------------------------------
   CONFIGURATION — glass cards
   --------------------------------------------------------- */
.configuration-card {
    background: rgba(24,16,31,.58) !important;
    border: 1px solid rgba(235,225,245,.15) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.18);
    backdrop-filter: blur(16px) saturate(115%);
    -webkit-backdrop-filter: blur(16px) saturate(115%);
}

.configuration-card:hover {
    border-color: rgba(183,154,200,.48) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.25) !important;
}

.configuration-type {
    color: var(--violet-soft) !important;
}

.configuration-area,
.configuration-card-featured .configuration-area {
    color: #f6f0f7 !important;
}

.configuration-area span,
.configuration-card-featured .configuration-area span {
    color: #aaa0b0 !important;
}

.configuration-details,
.configuration-card-featured .configuration-details {
    border-color: rgba(235,225,245,.13) !important;
}

.detail-label,
.configuration-card-featured .detail-label {
    color: #a69baa !important;
}

.configuration-details strong,
.configuration-card-featured .configuration-details strong {
    color: #e7dfe9 !important;
}

.configuration-card-featured {
    background: rgba(38,22,49,.72) !important;
    border-color: rgba(143,90,169,.34) !important;
}

/* ---------------------------------------------------------
   AMENITIES — same slider/functionality, adapted to the DNA
   --------------------------------------------------------- */
.amenity {
    background: rgba(17,11,24,.32) !important;
    border-color: rgba(235,225,245,.14) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.amenity:hover {
    border-color: rgba(183,154,200,.65) !important;
    background: rgba(55,31,70,.30) !important;
}

.imgamenities {
    filter: brightness(0) saturate(100%) invert(78%) sepia(10%) saturate(520%) hue-rotate(246deg) brightness(94%) contrast(88%) !important;
}

.amenity h5 {
    color: #eee8f0 !important;
}

.amenities-arrow {
    background: rgba(12,8,18,.82) !important;
    border-color: rgba(183,154,200,.42) !important;
    color: var(--violet-soft) !important;
    backdrop-filter: blur(10px);
}

.amenities-arrow:hover {
    background: var(--violet) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------
   PLANS — retain image/card structure, make cards glass
   --------------------------------------------------------- */
.plan-card,
.master-plan-card {
    background: rgba(20,13,27,.58) !important;
    border: 1px solid rgba(235,225,245,.13);
    box-shadow: 0 24px 70px rgba(0,0,0,.22) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.plan-card h3,
.plan-card strong {
    color: #f3edf5 !important;
}

.plan-card p {
    color: #b8afbd !important;
}

.plan-download-btn {
    background: rgba(13,9,20,.78) !important;
    border: 1px solid rgba(235,225,245,.22);
    color: #f4edf6 !important;
    backdrop-filter: blur(8px);
}

.plan-download-btn:hover {
    background: rgba(143,90,169,.88) !important;
    border-color: rgba(183,154,200,.8) !important;
}

/* ---------------------------------------------------------
   GALLERY — preserve carousel + lightbox, remove beige feel
   --------------------------------------------------------- */
.gallery-section {
    background: rgba(10,7,16,.22) !important;
}

.gallery-card {
    border: 1px solid rgba(235,225,245,.12);
    box-shadow: 0 20px 55px rgba(0,0,0,.18);
}

.gallery-arrow {
    background: rgba(244,239,246,.90) !important;
    color: #211827 !important;
    backdrop-filter: blur(10px);
}

.gallery-arrow:hover {
    background: var(--gold) !important;
    color: #17111a !important;
}

.gallery-dot {
    background: rgba(225,215,230,.35) !important;
}

.gallery-dot.active {
    background: var(--violet-soft) !important;
}

/* ---------------------------------------------------------
   BROCHURE — editorial glass block
   --------------------------------------------------------- */
.brochure-section {
    background: rgba(8,5,13,.20) !important;
}

.brochure-card {
    background: rgba(239,232,242,.10) !important;
    border: 1px solid rgba(235,225,245,.15) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.24);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.brochure-content p {
    color: #c2b8c5 !important;
}

.brochure-btn {
    border-color: rgba(245,239,247,.48) !important;
    color: #f4edf6 !important;
}

.brochure-btn:hover {
    background: rgba(255,255,255,.08) !important;
}

/* ---------------------------------------------------------
   CONNECTIVITY — dark translucent editorial section
   --------------------------------------------------------- */
.connectivity-section {
    background: rgba(9,6,14,.38) !important;
}

.location-list {
    border-color: rgba(235,225,245,.13) !important;
}

.location-list div {
    border-color: rgba(235,225,245,.13) !important;
}

.location-list span {
    color: #a99fad !important;
}

.connectivity-accordion .accordion-item {
    background: rgba(22,14,29,.42) !important;
    border-color: rgba(235,225,245,.12) !important;
}

.connectivity-accordion .accordion-button {
    background: transparent !important;
    color: #eee7f0 !important;
}

.connectivity-accordion .accordion-button:not(.collapsed) {
    color: var(--violet-soft) !important;
}

/* ---------------------------------------------------------
   FOOTER — final deep-violet anchor
   --------------------------------------------------------- */
.footer {
    background: rgba(7,5,11,.88) !important;
    border-top: 1px solid rgba(235,225,245,.10);
}

.footer-address,
.footer-disclaimer p,
.footer-bottom small {
    color: #9e95a4 !important;
}

.footer-heading {
    color: #eee8f0 !important;
}

.footer-credit strong {
    color: var(--gold) !important;
}

/* ---------------------------------------------------------
   MOBILE — preserve responsive structure, remove fixed BG
   --------------------------------------------------------- */
@media (max-width: 767px) {
    body {
        background-attachment: scroll;
        background-position: center top;
    }

    body::before {
        background:
            linear-gradient(180deg, rgba(8,5,13,.18), rgba(8,5,13,.42)),
            radial-gradient(circle at 50% 20%, rgba(123,77,151,.12), transparent 42%);
    }

    .section {
        padding: 88px 0;
    }

    .site-nav {
        padding: 15px 0 !important;
    }

    .configuration-card,
    .brochure-card,
    .plan-card,
    .master-plan-card {
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* ---------------------------------------------------------
   ACCESSIBILITY — retain reduced-motion behaviour
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body {
        background-attachment: scroll;
    }
}

/* =========================================================
   FINAL VIOLET DNA — FULL PAGE BACKGROUND + VIBRANT CTAs
   ========================================================= */

/* Keep the supplied prism artwork visible behind the entire LP.
   Individual sections are translucent so the artwork remains a
   continuous visual layer instead of appearing only in the hero. */
html,
body {
    background: #0d0715 !important;
}

body {
    background-image:
        linear-gradient(180deg, rgba(9,5,17,.56) 0%, rgba(13,7,22,.62) 38%, rgba(8,5,14,.68) 100%),
        url('../assets/images/bgpage.jpg') !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

body::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(152,76,255,.12), transparent 28%),
        radial-gradient(circle at 80% 62%, rgba(218,55,255,.10), transparent 30%),
        linear-gradient(180deg, rgba(7,4,13,.06), rgba(7,4,13,.20)) !important;
}

/* Make all major page sections participate in the same background.
   The dark tints provide readability without creating separate blocks. */
.section,
.section-light,
.configurations-section,
.overview-section,
.gallery-section,
.brochure-section,
.connectivity-section,
.section-dark {
    background: transparent !important;
}

.stats-strip {
    background: rgba(7,4,13,.60) !important;
}

/* Slightly stronger atmosphere for content-heavy areas */
#amenities,
#plans,
#gallery,
#location,
#brochure {
    position: relative;
}

#amenities::before,
#plans::before,
#gallery::before,
#location::before,
#brochure::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg, rgba(10,5,18,.08), rgba(10,5,18,.24));
}

#amenities > .container,
#plans > .container,
#gallery > .container,
#location > .container,
#brochure > .container {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------
   CTA — brighter, richer and more alive against the prism BG
   --------------------------------------------------------- */
.btn-gold {
    background: linear-gradient(135deg, #8b5cf6 0%, #c044e8 52%, #f052c8 100%) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(166,65,231,.28), inset 0 1px 0 rgba(255,255,255,.20);
    text-shadow: 0 1px 12px rgba(0,0,0,.18);
}

.btn-gold:hover,
.btn-gold:focus {
    background: linear-gradient(135deg, #a875ff 0%, #d85af0 52%, #ff6bd9 100%) !important;
    border-color: rgba(255,255,255,.34) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 15px 38px rgba(184,61,239,.40), inset 0 1px 0 rgba(255,255,255,.24);
}

.btn-gold .bi-arrow-right {
    color: #fff !important;
}

/* Desktop sticky Enquire Now */
.sticky-enquiry .btn-gold {
    background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%) !important;
    border-color: rgba(255,255,255,.28) !important;
    box-shadow: 0 12px 34px rgba(101,43,184,.40), inset 0 1px 0 rgba(255,255,255,.18);
}

.sticky-enquiry .btn-gold:hover,
.sticky-enquiry .btn-gold:focus {
    background: linear-gradient(180deg, #c084fc 0%, #9333ea 100%) !important;
}

/* Mobile Enquire Now */
.mobile-enquire {
    background: linear-gradient(135deg, #8b5cf6 0%, #c044e8 55%, #ef4fc7 100%) !important;
    border-color: rgba(255,255,255,.22) !important;
    color: #fff !important;
    box-shadow: 0 8px 24px rgba(151,58,220,.30);
}

.mobile-enquire:hover,
.mobile-enquire:focus {
    background: linear-gradient(135deg, #a875ff 0%, #d85af0 55%, #ff6bd9 100%) !important;
    border-color: rgba(255,255,255,.34) !important;
    color: #fff !important;
}

/* Keep configuration CTAs vivid but slightly calmer than the hero CTA. */
.configuration-cta {
    background: linear-gradient(135deg, #7542d8 0%, #a83fca 100%) !important;
    border-color: rgba(255,255,255,.18) !important;
    color: #fff !important;
}

.configuration-cta:hover,
.configuration-cta:focus {
    background: linear-gradient(135deg, #9565f0 0%, #cf58df 100%) !important;
    color: #fff !important;
}

/* Make the background image breathe very subtly on desktop without
   altering the existing page/scroll functionality. */
@media (min-width: 768px) {
    body {
        background-size: 110% auto;
        background-position: center center;
    }
}

@media (max-width: 767px) {
    body {
        background-attachment: scroll;
        background-size: auto 100%;
        background-position: center top;
    }
}