:root {
            --gold: #a28455;
            --gold-caa: #caa56a;
            --gold-d4: #d4af37;
            --gold-d0: #d0aa4a;
            --gold-light: #d0aa4a;
            --gold-btn: #c9a96e;
            --beige: #fffbef;
            --beige2: #fbf7ea;
            --bg: #111111;
            --bg2: #0e0e0e;
            --bg3: #191919;
            --grey: #9d9d9d;
            --light-grey: #9d9d9d;
            --dark-grey: #3f3f3f;
            --glass: rgba(226, 226, 226, 0.2);
            --Gold-Gradient-Dark-1: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(90deg, #A1701D 0%, #D0AA4A 100%);
            --white: #ffffff;
            --font-fredoka: 'Fredoka', sans-serif;
            --font-faustina: 'Faustina', serif;
            --gold-dark:#a1701d;
            --gold-mid:#c9a96e;
            --card-bg-start:rgba(0,   0,   0,   0.64);
            --card-bg-end:rgba(34,  34,  34,  0.64);


      --gold-rich:     #CAA56A;
      --gold-d4af35:   #D4AF35;
      --gold-border:   rgba(212,175,53,0.4);
      --gold-glow:     rgba(212,175,53,0.3);
      --gold-fill:     rgba(212,175,53,0.1);
      --bg-main:       #0A0A0A;
      --bg-section:    #111111;
      --bg-card:       rgba(255,255,255,0.03);
      --border-subtle: rgba(255,255,255,0.1);
      --grey-dim:      #6B7280;
        }

        *,
        *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background: var(--bg);
            color: var(--beige);
            font-family: 'Faustina', serif;
            overflow-x: hidden;
        }

        ::-webkit-scrollbar {
            width: 5px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--gold);
            border-radius: 3px;
        }

        img {
            max-width: 100%;
        }

        a {
            text-decoration: none;
        }

        .fit-custom-container{
            max-width: 1550px;
            margin: auto;
        }
        /* ════════════════════════════════════
           HERO — Updated from design v2
        ════════════════════════════════════ */
        #hero {
            position: relative;
            width: 100%;
            min-height: 740px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            background: #0c0c0c;
        }

        /* Background image */
        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
        }

        .hero-bg img {
            width: 100%;
            height: 100%;
            object-fit: unset;
            object-position: center top;
            transform: scale(1.04);
            animation: slowZoom 18s ease-in-out infinite alternate;
        }

        @keyframes slowZoom {
            from {
                transform: scale(1.04);
            }

            to {
                transform: scale(1.0);
            }
        }

        /* Gradient overlay — bottom fade to black */
        .hero-grad {
            position: absolute;
            inset: 0;
            z-index: 1;
            /* background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.0) 0%,
                    rgba(0, 0, 0, 0.05) 35%,
                    rgba(12, 12, 12, 0.78) 65%,
                    #0c0c0c 100%); */
        }

        /* Content layer */
        .hero-content {
            position: relative;
            z-index: 2;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            width: 100%;
            max-width: 1402px;
            margin: 0 auto;
            padding: 120px 0 0;
            text-align: center;
        }

        /* ── Property title block ── */
        .hero-title-block {
            width: 100%;
            padding: 0 60px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0px;
            animation: heroFadeUp 1s cubic-bezier(0.76, 0, 0.24, 1) 0.2s both;
        }

        /* Title row: grad-line ← NAME → grad-line */
        .hero-title-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            width: 100%;
        }

        .hero-title-line {
            flex: 1;
            max-width: 215px;
            height: 2px;
            background: linear-gradient(to right, rgba(0, 0, 0, 0), var(--gold-light));
        }

        .hero-title-line.rev {
            background: linear-gradient(to left, rgba(0, 0, 0, 0), var(--gold-light));
        }

        .hero-property-name {
            font-family: var(--font-fredoka);
            font-weight: 300;
            font-size: clamp(30px, 4vw, 30px);
            color: var(--white);
            text-align: center;
            white-space: nowrap;
            letter-spacing: 0.5px;
            line-height: 1;
            padding: 0px 20px;
            margin-bottom: 0;
            margin-top: 0;
            text-transform: none;
        }

        /* Location subtitle */
        .hero-location {
            font-family: var(--font-fredoka);
            font-weight: 300;
            font-size: clamp(14px, 1.6vw, 17px);
            color: var(--light-grey);
            text-align: center;
            width: 100%;
            letter-spacing: 0.3px;
            margin: 0;
        }

        /* ── Stats bar ── */
        .hero-stats-bar {
            position: relative;
            width: 85%;
            padding: 0 60px;
            margin-top: 10px;
            animation: heroFadeUp 1s cubic-bezier(0.76, 0, 0.24, 1) 0.45s both;
        }

        .hero-stats-inner {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            position: relative;
        }

        /* Gold vertical dividers */
        .hero-stat-divider {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--gold-light));
        }

        .hero-stat-divider:nth-of-type(1) {
            left: 25%;
        }

        .hero-stat-divider:nth-of-type(2) {
            left: 50%;
        }

        .hero-stat-divider:nth-of-type(3) {
            left: 75%;
        }

        .hero-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 0px;
            padding: 0 12px 4px;
            text-align: center;
            text-transform: uppercase;
            cursor: default;
            transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .hero-stat:hover {
            transform: translateY(-4px);
        }

        .hero-stat-lbl {
            font-family: var(--font-fredoka);
            font-weight: 300;
            font-size: clamp(14px, 1.1vw, 28px);
            color: var(--gold-light);
            line-height: 28px;
            transition: color 0.3s;
        }

        .hero-stat-val {
            font-family: var(--font-faustina);
            font-weight: 400;
            font-size: clamp(14px, 0.8vw, 22px);
            color: var(--white);
            line-height: normal;
        }

        /* ── RERA Button ── */
        .hero-rera-wrap {
            display: flex;
            justify-content: center;
            margin-top: 18px;
            padding-bottom: 54px;
            animation: heroFadeUp 1s cubic-bezier(0.76, 0, 0.24, 1) 0.65s both;
        }

        .hero-rera-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border: 1px solid var(--gold);
            padding: 10px 40px;
            height: 32px;
            font-family: var(--font-fredoka);
            font-size: clamp(12px, 1.2vw, 12px);
            color: var(--beige);
            background: transparent;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            transition: color 0.4s, border-color 0.3s;
            white-space: nowrap;
        }

        .hero-rera-btn:hover {
            background: var(--Gold-Gradient-Dark-1);
            color: var(--white);
            border: 1px solid var(--gold-caa);
        }

        .hero-rera-btn img {
            width: 17px;
            height: 16px;
            object-fit: contain;
            filter: brightness(10);
        }

        /* ── Animation ── */
        @keyframes heroFadeUp {
            from {
                opacity: 0;
                transform: translateY(24px);
            }

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

        /* ════════════════════════════════════
           SECTION SHARED
        ════════════════════════════════════ */
        .sec {
            padding: 80px 164px;
        }

        .sec-center {
            text-align: center;
        }

        .sec-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 44px;
            color: #fff;
            line-height: normal;
            text-align: right;
        }

        .sec-title-center {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            color: #fff;
            line-height: normal;
            text-align: center;
            font-size: 52px;
            text-transform: uppercase;
        }

        .sec-title-gold {
            color: var(--gold);
        }

        .sec-subtitle {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 18px;
            color: var(--gold);
            text-align: center;
            line-height: 28px;
            margin-top: 8px;
        }

        .sec-body {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 17px;
            color: #fff;
            line-height: 28px;
            text-align: center;
        }

        /* ════════════════════════════════════
           COVER IMAGE
        ════════════════════════════════════ */
        #cover {
            padding: 0 164px 0;
            margin-bottom: 0;
        }

        .cover-img {
            width: 100%;
            border-radius: 4px;
            overflow: hidden;
        }

        .cover-img img {
            width: 100%;
            height: 100%;
            max-height: 500px;
            object-position: center;
        }

        /* ════════════════════════════════════
           WELCOME
        ════════════════════════════════════ */
        #welcome {
            padding: 30px 164px 5px;
        }

        .welcome-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .welcome-line {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 44px;
            color: #fff;
            line-height: 28px;
            display: block;
            margin-bottom: 12px;
        }

        .welcome-line.gold {
            color: var(--gold);
            line-height: normal;
        }

        .welcome-line.sm {
            font-size: 32px;
            line-height: normal;
        }

        /* ════════════════════════════════════
           HIGHLIGHTS
        ════════════════════════════════════ */
        #highlights {
            padding: 0 100px 60px;
        }

        .highlights-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 44px;
            color: #fff;
            line-height: normal;
            text-align: center;
            margin-bottom: 40px;
            margin-top: 50px;
        }

        .highlights-grid {
            display: flex;
            gap: 18px;
            flex-wrap: nowrap;
            justify-content: center;
            margin-bottom: 40px;
        }

        .hl-card {
            background: var(--glass);
            border-radius: 8px;
            padding: 20px;
            width: 227px;
            min-height: 122px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            transition: background .3s, transform .3s;
            cursor: default;
        }

        .hl-card:hover {
            background: rgba(226, 226, 226, .3);
            transform: translateY(-4px);
        }

        .hl-val {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 38px;
            color: var(--beige);
            line-height: 42px;
            text-transform: capitalize;
        }

        .hl-label {
            font-family: 'Faustina', serif;
            font-size: 18px;
            color: var(--beige);
            text-transform: capitalize;
        }

        /* ════════════════════════════════════
           GOLD OUTLINE BUTTON
        ════════════════════════════════════ */
        .btn-gold {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--gold);
            padding: 10px 40px;
            height: 42px;
            font-family: 'Fredoka', sans-serif;
            font-size: 18px;
            color: var(--beige);
            background: transparent;
            cursor: pointer;
            white-space: nowrap;
            transition: background .25s, color .25s;
            text-decoration: none;
        }

        .btn-gold:hover {
            background: var(--Gold-Gradient-Dark-1);
            border: 1px solid var(--gold-caa);
            color: var(--white);
        }

        /* ════════════════════════════════════
           AMENITIES TICKER
        ════════════════════════════════════ */
        #amenities {
            padding: 25px 0;
        }

        .amenities-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 44px;
            color: #fff;
            text-align: center;
            line-height: 28px;
            margin-bottom: 40px;
        }

        .ticker-wrap {
            overflow: hidden;
            position: relative;
            -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
        }

        .ticker-track {
            display: flex;
            animation: ticker-scroll 22s linear infinite;
            width: max-content;
        }

        .ticker-wrap:hover .ticker-track {
            animation-play-state: paused;
        }

        @keyframes ticker-scroll {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }

        .amenity-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 320px;
            height: 180px;
            border: 1px solid var(--dark-grey);
            gap: 10px;
            flex-shrink: 0;
            transition: border-color .3s, background .3s;
            cursor: default;
        }

        .amenity-item:hover {
            border-color: var(--gold);
            background: rgba(162, 132, 85, .08);
        }

        .amenity-icon {
            width: 65px;
            height: 65px;
            object-fit: contain;
        }

        .amenity-name {
            font-family: 'Faustina', serif;
            font-size: 18px;
            color: var(--beige);
            text-transform: uppercase;
            line-height: 28px;
            text-align: center;
        }

        /* ════════════════════════════════════
           FLOOR PLANS & PRICING
        ════════════════════════════════════ */
        

        #floorplans {
            padding: 60px 164px 60px;
            background: var(--bg);
        }

        .fp-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: start;
            margin-top: 40px;
        }

        .fp-img {
            border-radius: 4px;
            overflow: hidden;
            max-width: 700px;
        }

        .fp-img img {
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        .fp-cards {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        .fp-card {
            border: 1px solid rgba(102, 102, 102, .5);
            border-radius: 4px;
            padding: 16px;
            background: linear-gradient(112.78deg, rgba(255, 255, 255, 0) 64.47%, rgba(208, 170, 74, .1) 100%);
            transition: border-color .3s;
        }

        .floor-plan-act-inact.active {
            border-color: var(--gold);
        }

        .fp-card:hover {
            border-color: var(--gold);
        }

        .fp-unit-name {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 28px;
            color: var(--beige);
            line-height: 28px;
        }

        .fp-unit-size {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 18px;
            color: var(--grey);
            line-height: 28px;
            margin-bottom: 14px;
        }

        .fp-btns {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .fp-btns .btn-gold {
            padding: 10px 24px;
            font-size: 16px;
        }

        .fp-note {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 16px;
            color: #fff;
            line-height: 1.6;
            margin-top: 16px;
        }

        .fp-cta-row {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 40px;
        }
         
        /* ================new floor plan csss=============*/
    /* ─── Variables ──────────────────────────────────────────────────────── */



    /* ─── Page wrapper ───────────────────────────────────────────────────── */
    .page-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 40px 20px;
      background: var(--bg-section);
    }

    /* ─── Section Container ──────────────────────────────────────────────── */
    .fp-section {
      display: flex;
      gap: 48px;
      align-items: center;
      width: 100%;
      max-width: 1240px;
      padding: 20px;
    }

    /* ─── Left: Floor Plan Visual ────────────────────────────────────────── */
    .fp-visual-panel {
      flex-shrink: 0;
      width: 596px;
      position: relative;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      border-radius: 12px;
      backdrop-filter: blur(6px);
      padding: 33px;
      box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
      overflow: hidden;
    }

    /* Ambient glow top-left */
    .fp-visual-panel::before {
      content: '';
      position: absolute;
      top: -96px;
      left: -96px;
      width: 256px;
      height: 256px;
      background: rgba(202,165,106,0.15);
      filter: blur(50px);
      border-radius: 50%;
      pointer-events: none;
    }

    .fp-image-wrapper {
      position: relative;
      width: 100%;
      height: 530px;
      cursor: pointer;
      overflow: hidden;
      border-radius: 6px;
    }

    .fp-image-wrapper img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                  opacity 0.35s ease;
      transform-origin: center center;
    }

        /* ── True 0→100% zoom on card switch ── */
    .fp-image-wrapper.zooming img#fpImage {
      animation: zoomFromZero 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    @keyframes zoomFromZero {
      0%   { transform: scale(0);    opacity: 0; }
      55%  { opacity: 1; }
      75%  { transform: scale(1.06); }
      100% { transform: scale(1);    opacity: 1; }
    }

    /* Gold ring that expands outward as image zooms in */
    .fp-image-wrapper.zooming {
      animation: ringExpand 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    /* Floor Map overlay */
    .fp-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.85);
      z-index: 9000;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
    }
    .fp-modal-overlay.active { display: flex; }
    .fp-modal-box {
      position: relative;
      max-width: 720px;
      width: 90%;
      background: #181818;
      border: 1px solid rgba(162,132,85,0.35);
      border-radius: 12px;
      overflow: hidden;
      animation: modalIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    @keyframes modalIn {
      from { transform: scale(0.85); opacity: 0; }
      to   { transform: scale(1);    opacity: 1; }
    }
    .fp-modal-box img { width: 100%; display: block; }
    .fp-modal-close {
      position: absolute;
      top: 14px; right: 14px;
      width: 34px; height: 34px;
      background: rgba(0,0,0,0.6);
      border: 1px solid rgba(162,132,85,0.4);
      border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--gold);
      font-size: 18px;
      transition: background 0.2s;
    }
    .fp-modal-close:hover { background: rgba(162,132,85,0.3); }

    /* Price panel */
    .fp-price-panel {
      display: none;
      position: absolute;
      inset: 0;
      background: rgba(10,10,10,0.92);
      border-radius: 6px;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      backdrop-filter: blur(8px);
      animation: fadeSlideUp 0.35s ease forwards;
      z-index: 10;
    }
    .fp-price-panel.active { display: flex; }
    @keyframes fadeSlideUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .fp-price-label {
      font-family: 'Fredoka', sans-serif;
      font-weight: 300;
      font-size: 14px;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--grey);
    }
    .fp-price-value {
      font-family: 'Fredoka', sans-serif;
      font-weight: 400;
      font-size: 48px;
      background: linear-gradient(90deg, #D9C369 0%, #C69C3E 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
    }
    .fp-price-sub {
      font-family: 'Work Sans', sans-serif;
      font-size: 14px;
      color: var(--grey-dim);
      letter-spacing: 0.5px;
    }
    .fp-price-close {
      margin-top: 8px;
      background: none;
      border: 1px solid rgba(162,132,85,0.5);
      color: var(--gold);
      font-family: 'Fredoka', sans-serif;
      font-size: 13px;
      letter-spacing: 1px;
      padding: 6px 20px;
      cursor: pointer;
      border-radius: 3px;
      transition: background 0.2s;
    }
    .fp-price-close:hover { background: rgba(162,132,85,0.15); }

    /* ─── Right: Info Panel ──────────────────────────────────────────────── */
    .fp-info-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }

    .fp-title {
      font-family: 'Fredoka', sans-serif;
      font-weight: 300;
      font-size: 35px;
      color: var(--white);
      letter-spacing: -1.2px;
      line-height: 1;
      margin-bottom: 8px;
      margin-top: 0;
    }
    .fp-desc {
      font-family: 'Faustina', sans-serif;
      font-weight: 300;
      font-size: 18px;
      color: var(--grey);
      line-height: 1.55;
    }

    /* ─── BHK Cards Wrapper ──────────────────────────────────────────────── */
    .bhk-cards-outer {
      position: relative;
    }

    /* Scroll track */
    .bhk-cards {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none; /* Firefox */
      padding-bottom: 4px;
      cursor: grab;
    }
    .bhk-cards:active { cursor: grabbing; }
    .bhk-cards::-webkit-scrollbar { display: none; }

    .bhk-card {
      flex: 0 0 calc(50% - 6px);
      scroll-snap-align: start;
      background: var(--bg-card);
      border: 1px solid var(--border-subtle);
      backdrop-filter: blur(6px);
      padding: 22px 20px;
      cursor: pointer;
      transition: border-color 0.3s, box-shadow 0.3s, opacity 0.3s;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      min-width: 0;
    }

    /* 3 cards → show 2.4 at a time; 4 cards → same */
    .bhk-cards.has-many .bhk-card {
      flex: 0 0 calc(50% - 6px);
    }

    .bhk-card:not(.active) { opacity: 0.62; }

    .bhk-card.active {
      /* border-color: rgba(201,169,110,0.6);
      box-shadow: 0 0 20px 0 var(--gold-glow);
      opacity: 1; */
      border: 1px solid rgba(255, 255, 255, 0.10);
      /* background: linear-gradient(107deg, rgba(201, 169, 110, 0.03) 3.45%, rgba(201, 169, 110, 0.03) 96.48%); */
      background: linear-gradient(
107deg,
rgba(201,169,110,0.5) 0%,
rgba(201,169,110,0.3) 50%,
rgba(201,169,110,0.5) 100%
);
      box-shadow: 0 0 15px 0 rgba(212, 175, 53, 0.30);
      backdrop-filter: blur(6px);
    }

    /* Gold shimmer overlay on active */
    .bhk-card.active::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        rgba(201,169,110,0.18) 0%,
        rgba(201,169,110,0.08) 50%,
        rgba(201,169,110,0.18) 100%);
      border-radius: inherit;
      pointer-events: none;
    }

    .bhk-card-type {
      font-family: 'Work Sans', sans-serif;
      font-weight: 600;
      font-size: 18px;
      color: var(--white);
      line-height: 1.4;
      margin-bottom: 5px;
    }
    .bhk-card-size {
      font-family: 'Work Sans', sans-serif;
      font-weight: 400;
      font-size: 13px;
      color: #D1D5DB;
      margin-bottom: 4px;
    }
    .bhk-card-facing {
      font-family: 'Work Sans', sans-serif;
      font-weight: 400;
      font-size: 10px;
      color: var(--grey-dim);
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    /* Active indicator pip */
    .bhk-card.active .bhk-active-pip { display: block; }
    .bhk-active-pip {
      display: none;
      position: absolute;
      top: 10px;
      right: 10px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 8px var(--gold);
    }

    /* Scroll nav arrows */
    .bhk-scroll-nav {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-top: 0px;
    }
    .bhk-scroll-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid rgba(162,132,85,0.4);
      background: transparent;
      color: var(--gold);
      font-size: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
      line-height: 1;
    }
    .bhk-scroll-btn:hover { background: rgba(162,132,85,0.2); }
    .bhk-scroll-btn:disabled { opacity: 0.3; cursor: default; }


    /* ─── Action Buttons ─────────────────────────────────────────────────── */
    .fp-actions {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 12px;
    }
    .btn-row {
      display: flex;
      gap: 16px;
    }

    /* Ghost gold border buttons */
    .btn-ghost {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 17px;
      border: 1px solid var(--gold-border);
      background: transparent;
      color: var(--gold);
      font-family: 'Fredoka', sans-serif;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.35px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
      white-space: nowrap;
    }
    .btn-ghost:hover {
      background: rgba(162,132,85,0.12);
      border-color: var(--gold);
    }
    .btn-ghost.active-btn {
      background: rgba(162,132,85,0.18);
      border-color: var(--gold);
    }
    .btn-ghost svg { flex-shrink: 0; }

    /* Filled gold-tint buttons */
    .btn-filled {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 17px;
      border: 1px solid var(--gold-border);
      background: var(--gold-fill);
      color: var(--white);
      font-family: 'Fredoka', sans-serif;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 0.35px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .btn-filled:hover { background: rgba(212,175,53,0.18);color: var(--white); }

    /* Contact Us CTA */
    .btn-contact {
      width: 100%;
      padding: 18px;
      border: 2px solid var(--gold);
      background: transparent;
      color: var(--gold);
      font-family: 'Fredoka', sans-serif;
      font-weight: 400;
      font-size: 16px;
      letter-spacing: 3.2px;
      text-transform: uppercase;
      text-align: center;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      display: block;
    }
    .btn-contact:hover {
      background: var(--Gold-Gradient-Dark-1);
      color: var(--white);
    }

    /* ─── Scrollbar navigator (side arrow like Figma) ────────────────────── */
    .fp-nav-arrow {
      position: absolute;
      right: -18px;
      top: 50%;
      transform: translateY(-50%);
      width: 36px;
      height: 36px;
      background: rgba(162,132,85,0.15);
      border: 1px solid rgba(162,132,85,0.35);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.2s;
      z-index: 2;
      color: var(--gold);
      font-size: 16px;
    }
    .fp-nav-arrow:hover { background: rgba(162,132,85,0.3); }


        /* ══════════════════════════════════
       WALKTHROUGH SECTION youtube
    ══════════════════════════════════ */
        #walkthrough {
            background: var(--bg2);
            padding: 40px 164px 50px;
            position: relative;
        }

        /* top gold line */
        #walkthrough::before {
            content: '';
            position: absolute;
            top: 0;
            left: 10%;
            right: 10%;
            height: 1.5px;
            background: linear-gradient(to right,
                    rgba(0, 0, 0, 0) 0%,
                    var(--gold-d0) 25%,
                    var(--gold-d0) 75%,
                    rgba(0, 0, 0, 0) 100%);
        }

        /* bottom gold line */
        #walkthrough::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 10%;
            right: 10%;
            height: 1.5px;
            background: linear-gradient(to right,
                    rgba(0, 0, 0, 0) 0%,
                    var(--gold-d0) 25%,
                    var(--gold-d0) 75%,
                    rgba(0, 0, 0, 0) 100%);
        }

        /* ── Title ── */
        .wt-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: clamp(28px, 3.6vw, 54px);
            color: #fff;
            text-align: center;
            line-height: 1.15;
            margin-bottom: 12px;
            letter-spacing: 0.5px;
        }

        /* ── Eye + subtitle ── */
        .wt-sub {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: clamp(13px, 1.25vw, 20px);
            color: var(--grey);
            margin-bottom: 36px;
        }

        .wt-sub-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22px;
            height: 22px;
            flex-shrink: 0;
        }

        .wt-sub-icon svg {
            width: 22px;
            height: 22px;
        }

        /* ══════════════════════════════════
       VIDEO WRAPPER
    ══════════════════════════════════ */
        .wt-video-wrap {
            position: relative;
            width: 100%;
            max-width: 664px;
            margin: 0 auto;
            border-radius: 10px;
            overflow: hidden;
            background: #000;
            aspect-ratio: 16 / 9;
            box-shadow: 0 10px 48px rgba(0, 0, 0, 0.65);
        }

        /* ── Thumbnail layer ── */
        .wt-thumb-layer {
            position: absolute;
            inset: 0;
            z-index: 2;
            cursor: pointer;
        }

        .wt-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.55s ease, filter 0.4s ease;
        }

        .wt-thumb-layer:hover .wt-thumb {
            transform: scale(1.04);
            filter: brightness(0.68);
        }

        /* dark overlay on thumb */
        .wt-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.15);
            transition: background 0.35s;
        }

        .wt-thumb-layer:hover .wt-overlay {
            background: rgba(0, 0, 0, 0.32);
        }

        /* ── YouTube play button ── */
        .wt-play-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 72px;
            height: 50px;
            pointer-events: none;
            transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s;
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
        }

        .wt-thumb-layer:hover .wt-play-btn {
            transform: translate(-50%, -50%) scale(1.15);
            filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)) brightness(1.08);
        }

        .yt-bg {
            fill: #ff0000;
        }

        .yt-shadow {
            fill: rgba(0, 0, 0, 0.3);
        }

        .yt-triangle {
            fill: #fff;
        }

        /* ── Iframe (hidden until clicked) ── */
        .wt-iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: none;
            display: none;
            z-index: 3;
        }

        /* ── Caption ── */
        .wt-caption {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: clamp(12px, 1.15vw, 18px);
            color: var(--grey);
            text-align: center;
            margin-top: 18px;
            letter-spacing: 0.4px;
        }

        /* ── CTA button ── */
        .wt-cta-wrap {
            display: flex;
            justify-content: center;
            margin-top: 28px;
        }

        .wt-phone-icon {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
        }

        /* ─────────────────────────────────────────────
       UIKIT MODAL OVERRIDES
    ───────────────────────────────────────────── */
        #priceModal .uk-modal-dialog {
            background: transparent !important;
            box-shadow: none !important;
            padding: 0 !important;
            width: auto !important;
            max-width: none !important;
            border-radius: 0 !important;
        }

        /* ─────────────────────────────────────────────
       PRICE DETAILS CARD  (matches Figma exactly)
    ───────────────────────────────────────────── */
        .custom_popup_modal_pricing {
            position: relative;
            width: 535px;
            border: 1px solid var(--gold-mid);
            border-radius: 8px;
            padding: 19px 32px 32px;
            background-image: linear-gradient(119.14deg,
                    rgba(0, 0, 0, 0.97) 9.516%,
                    rgb(34, 34, 34) 89.744%);
            box-shadow: 4px 10px 10px 0px rgba(0, 0, 0, 0.25);
            overflow: visible;
        }

        /* ── Gold decorative divider line above heading ── */
        .custom_popup_modal_pricing::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 240px;
            height: 1px;
            background: linear-gradient(90deg,
                    rgba(0, 0, 0, 0) 0%,
                    var(--gold-mid) 30%,
                    var(--gold-dark) 50%,
                    var(--gold-mid) 70%,
                    rgba(0, 0, 0, 0) 100%);
        }

        /* ── CLOSE BUTTON ── */
        .custom_pricing_popup_button {
            position: absolute;
            top: 14px;
            right: 16px;
            color: var(--gold-mid) !important;
            opacity: 1 !important;
            transition: color .2s;
        }

        .custom_pricing_popup_button:hover {
            color: #fff !important;
        }

        /* ── HEADING ── */
        .custom_pricing_popup_heading_dv {
            margin-bottom: 30px;
        }

        .custom_pricing_popup_heading_dv h3 {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 32px;
            line-height: 42.67px;
            letter-spacing: 2px;
            color: #fff;
            text-transform: uppercase;
            text-align: center;
        }

        /* ── GOLD SEPARATOR under heading ── */
        .heading-separator {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            margin-top: 6px;
        }

        .sep-line-left {
            width: 96px;
            height: 1px;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, var(--gold-mid) 100%);
        }

        .sep-diamond {
            width: 48px;
            height: 1px;
            background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 49.99%, var(--gold) 100%);
        }

        .sep-line-right {
            width: 96px;
            height: 1px;
            background: linear-gradient(90deg, var(--gold-mid) 0%, rgba(0, 0, 0, 0) 100%);
        }

        /* ── PRICING TABLE WRAPPER ── */

        .pricing_table_wrapper {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        /* ── EACH ROW ── */
        .pricing_table {
            width: 100%;
            border-collapse: collapse;
        }

        .pricing_table tr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid var(--gold-mid);
            border-radius: 4px;
            padding: 0 17px;
            height: 71.33px;
            margin-bottom: 16px;
            box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
        }

        .pricing_table tr:last-child {
            margin-bottom: 0;
        }

        /* Row gradient alternates */
        .pricing_table tr:nth-child(1) {
            background-image: linear-gradient(44.32deg,
                    rgba(133, 133, 133, 0.5) 4.66%,
                    rgba(31, 31, 31, 0.2) 45.56%);
        }

        .pricing_table tr:nth-child(2) {
            background-image: linear-gradient(46.83deg,
                    rgba(31, 31, 31, 0.2) 13.64%,
                    rgba(133, 133, 133, 0.5) 95.69%);
        }

        .pricing_table tr:nth-child(3) {
            background-image: linear-gradient(43.90deg,
                    rgba(133, 133, 133, 0.5) 4.72%,
                    rgba(31, 31, 31, 0.2) 47.62%);
        }

        .pricing_table td {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 28px;
            line-height: 37.33px;
            color: #fff;
            border: none;
            padding: 0;
            background: transparent;
        }

        .pricing_table td.label {
            text-align: left;
        }

        .pricing_table td.value {
            text-align: right;
        }

        /* ── CTA BUTTON ── */
        .price-cta-btn, .price-cta-btn:hover {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 54px;
            margin-top: 16px;
            border: 1px solid var(--gold-mid);
            border-radius: 4px;
            box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
            cursor: pointer;
            font-family: 'Fredoka', sans-serif;
            font-weight: 500;
            font-size: 20px;
            line-height: 28px;
            color: #fff;
            letter-spacing: 0.5px;
            text-align: center;
            background-image: linear-gradient(90deg,
                    rgba(0, 0, 0, 0.2) 0%,
                    rgba(0, 0, 0, 0.2) 100%),
                linear-gradient(90deg,
                    var(--gold) 0%,
                    var(--gold) 100%);
            transition: all 0.3s ease;
            border: none;
            outline: none;
        }

        /* ── MODAL ENTRANCE ANIMATION ── */
        #priceModal .uk-modal-dialog {
            animation: pricePopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        @keyframes pricePopIn {
            from {
                opacity: 0;
                transform: scale(0.88) translateY(28px);
            }

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

        /* ════════════════════════════════════
           GALLERY
        ════════════════════════════════════ */
        #gallery {
            padding: 25px 164px 60px;
        }

        .gallery-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 52px;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            line-height: normal;
            margin-bottom: 40px;
        }

        .gallery-sub {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 28px;
            margin-bottom: 40px;
        }

        .gallery-slider {
            position: relative;
            overflow: hidden;
            border-radius: 4px;
            height: 550px;
        }

        .gallery-track {
            display: flex;
            transition: transform .6s cubic-bezier(.25, .46, .45, .94);
            height: 100%;
        }

        .gallery-slide {
            flex-shrink: 0;
            width: 100%;
            height: 100%;
        }

        .gallery-slide img {
            width: 100%;
            height: 100%;
        }

        .gallery-nav {
            display: flex;
            gap: 26px;
            justify-content: center;
            margin-top: 20px;
        }

        .gallery-btn {
            width: 34px;
            height: 34px;
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: .8;
            transition: opacity .2s;
        }

        .gallery-btn:hover {
            opacity: 1;
        }

        .gallery-btn img {
            width: 9px;
            height: 18px;
            object-fit: contain;
        }



        /* popup modal download brochure         */
        /* ── UIKIT MODAL OVERRIDES ── */
        /* ── POPUP CONTAINER ── */
        .popup-wrap {
            position: relative;
            width: 100%;
            height: 500px;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 4px 4px 45px 0px rgba(255, 185, 0, 0.27);
        }

        /* ── LEFT IMAGE SIDE ── */
        .popup-image-side {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
        }

        .popup-image-side img {
            width: 100%;
            height: 100%;
            object-fit: fill;
            display: block;
            border-radius: 4px;
        }

        /* Dark gradient overlay — left clear, right dark */
        .popup-image-side::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 4px;
            background: linear-gradient(123.24deg,
                    rgba(0, 0, 0, 0.00) 10.28%,
                    rgba(0, 0, 0, 0.20) 30.77%,
                    rgba(0, 0, 0, 0.50) 49.04%,
                    rgba(0, 0, 0, 1.00) 87.02%);
        }

        /* ── RIGHT FORM PANEL ── */
        .popup-form-panel {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            max-width: 380px;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 28px 24px 24px 20px;
            z-index: 2;
        }

        /* ── CLOSE BUTTON ── */
        .popup-close {
            position: absolute;
            top: 17px;
            right: 20px;
            width: 17px;
            height: 17px;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .popup-close::before,
        .popup-close::after {
            content: '';
            position: absolute;
            width: 1.85px;
            height: 22.2px;
            /* background: var(--gold-light); */
            background: var(--white);
            border-radius: 2.5px;
            transition: background 0.2s;
        }

        .popup-close::before {
            transform: rotate(45deg);
        }

        .popup-close::after {
            transform: rotate(-45deg);
        }

        .popup-close:hover::before,
        .popup-close:hover::after {
            background: var(--gold-light);
        }

        /* ── HEADING AREA ── */
        .popup-heading {
            margin-bottom: 22px;
        }

        .popup-heading h2 {
            font-family: 'Fredoka', sans-serif;
            font-weight: 400;
            font-size: 26.17px;
            line-height: normal;
            color: var(--text-white);
            margin-bottom: 8px;
        }

        .popup-heading .tagline {
            font-family: 'Faustina', serif;
            font-weight: 500;
            font-size: 17.99px;
            letter-spacing: 0.73px;
            /* color: var(--gold-light); */
            color: #ffba00;
            display: block;
        }

        /* ── FORM FIELDS ── */
        .form-field {
            display: flex;
            flex-direction: column;
            gap: 1px;
            margin-bottom: 16px;
        }

        .form-field label {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 14px;
            line-height: 42px;
            color: var(--text-white);
            display: block;
            height: 16px;
            line-height: 16px;
        }

        .field-underline {
            height: 1px;
            width: 100%;
            background: linear-gradient(90deg,
                    rgba(0, 0, 0, 0.2) 0%,
                    rgba(0, 0, 0, 0.2) 100%),
                linear-gradient(90deg,
                    #a1701d 0%,
                    #d0aa4a 100%);
            margin-top: 2px;
        }

        .form-field input,
        .form-field input:focus,
        .form-field input:active {
            background: transparent !important;
            border: none;
            outline: none;
            color: var(--text-white);
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 16px;
            padding: 0;
            width: 100%;
            caret-color: var(--gold-light);
        }

        /* remove chrome autofill white background */
        .form-field input:-webkit-autofill,
        .form-field input:-webkit-autofill:hover,
        .form-field input:-webkit-autofill:focus,
        .form-field input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
            -webkit-text-fill-color: var(--text-white) !important;
            transition: background-color 5000s ease-in-out 0s;
        }

        .form-field input::placeholder {
            /* color: rgba(255,255,255,0.0); */
            color: var(--white);
            font-size: 16px;
        }

        .form-field input:focus~.field-underline {
            background: linear-gradient(90deg, #a1701d 0%, #e5c560 100%);
        }

        /* ── PRIVACY NOTE ── */
        .privacy-note {
            font-family: 'Faustina', serif;
            font-weight: 400;
            font-size: 8px;
            letter-spacing: 0.7px;
            color: var(--text-white);
            line-height: 13.2px;
            margin-bottom: 14px;
            width: 216px;
        }

        /* ── CTA BUTTON ── */
        .view_n_mappp, .view_n_mappp:hover {
            display: flex;
            align-items: center;
            font-family: Fredoka;
            justify-content: center;
            position: absolute;
            bottom: 11px;
            left: 20px;
            width: 100%;
            max-width: 140px;
            border: 1px solid var(--gold);
            border-radius: 4px;
            background: var(--Gold-Gradient-Dark-1);
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            padding: 6px 0;
            color: #fff;
        }

        .btn-explore {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            border: 1px solid var(--gold);
            border-radius: 4px;
            background: var(--Gold-Gradient-Dark-1);
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            padding: 10px 0;
        }

        .btn-explore span {
            font-family: 'Fredoka', sans-serif;
            font-weight: 400;
            font-size: 14px;
            color: var(--white);
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .btn-explore:hover {
            background: var(--Gold-Gradient-Dark-1);
            border: 1px solid var(--gold-caa);
            box-shadow: 0 0 20px rgba(255, 185, 0, 0.15);
        }

        .btn-explore:hover span {
            color: var(--white);
        }

        /* ── DECORATIVE SVG OVERLAY (left vertical accent) ── */
        .popup-deco {
            position: absolute;
            left: 370px;
            top: 0;
            bottom: 0;
            width: 3px;
            z-index: 3;
            pointer-events: none;
        }

        .popup-deco::before {
            content: '';
            position: absolute;
            top: 24px;
            bottom: 24px;
            left: 0;
            width: 1px;
            background: linear-gradient(180deg,
                    transparent 0%,
                    rgba(196, 165, 106, 0.4) 20%,
                    rgba(196, 165, 106, 0.6) 50%,
                    rgba(196, 165, 106, 0.4) 80%,
                    transparent 100%);
        }

        /* ── MODAL ANIMATION ── */
        #popup-modal .uk-modal-dialog {
            animation: popupIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
            border-radius: 6px;
        }

        @keyframes popupIn {
            from {
                opacity: 0;
                transform: scale(0.9) translateY(24px);
            }

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

        /* ── SUCCESS STATE ── */
        .success-overlay {
            display: none;
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.92);
            border-radius: 4px;
            z-index: 20;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            animation: fadeIn 0.3s ease;
        }

        .success-overlay.show {
            display: flex;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .success-check {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            border: 2px solid rgba(229, 197, 96, 0.5);
            background: rgba(229, 197, 96, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            animation: popCheck 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
        }

        @keyframes popCheck {
            from {
                transform: scale(0);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .success-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 400;
            font-size: 22px;
            color: #fff;
        }

        .success-sub {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 13px;
            letter-spacing: 0.5px;
            color: var(--gold-light);
        }


        /* ════════════════════════════════════
   MASTER PLAN
════════════════════════════════════ */
        .master_plan_details_cls {
            padding: 70px 10px 0px 10px;
            background: var(--bg2);
        }

        #masterplan {
            padding: 45px 164px;
            background: var(--beige2)
        }

        .masterplan-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 52px;
            color: var(--dark-grey);
            text-align: center;
            text-transform: uppercase;
            line-height: normal;
            margin-bottom: 40px
        }

        .masterplan-sub {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 18px;
            color: var(--dark-grey);
            text-align: center;
            line-height: 28px;
            margin-bottom: 36px
        }

        .masterplan-img {
            border-radius: 8px;
            overflow: hidden;
            width: 100%;
            max-width: 1339px;
            margin: 0 auto;
            position: relative;
            display: inline-block;
        }

        .masterplan-img img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }
        /* zoom icon */
            .masterplan-img::after{
                content: "";
                position: absolute;
                top: 50%;
                left: 50%;
                width: 60px;
                height: 60px;
                transform: translate(-50%, -50%) scale(0);
                background: url('https://www.51international.com/assets/dit/fiftyone/images/icon/master-zoom-icon.png') no-repeat center;
                background-size: contain;
                transition: 0.3s ease;
                pointer-events: none;
            }

            /* show icon on hover */
            .masterplan-img:hover::after{
                transform: translate(-50%, -50%) scale(1);
            }
        /* ════════════════════════════════════
   LOCATION MAP
════════════════════════════════════ */
        .location_details-cls {
            padding: 50px 10px 0px 10px;
            background: var(--bg2)
        }

        #location {
            padding: 0px 164px 60px;
            /* background: var(--beige2) */
        }

        .location-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 52px;
            color: var(--dark-grey);
            text-align: center;
            text-transform: uppercase;
            line-height: normal;
            margin-bottom: 46px
        }

        .location-body {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 18px;
            color: var(--dark-grey);
            text-align: center;
            line-height: 28px;
            margin-bottom: 36px
        }

        .location-map {
            border-radius: 4px;
            overflow: hidden;
            width: 100%
        }

        .location-map img {
            width: 100%;
            height: auto;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        /* ════════════════════════════════════
           LOCATION ADVANTAGES
        ════════════════════════════════════ */
        #loc-adv {
            padding: 60px 164px;
            background: var(--bg3);
        }

        .loc-adv-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 52px;
            color: #fff;
            text-align: center;
            text-transform: uppercase;
            line-height: normal;
            margin-bottom: 40px;
        }

        .loc-adv-sub {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 18px;
            color: #fff;
            text-align: center;
            line-height: 28px;
            margin-bottom: 40px;
        }

        .loc-adv-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        .adv-card {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            border-radius: 16px;
            border: 0.926px solid rgba(254, 154, 0, 0.20);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.20);
        }

        .adv-icon {
            width: 66px;
            height: 66px;
            padding: 15px;
            object-fit: contain;
            border:1px solid #FE9A00;
            border-radius: 14px;
            opacity: 0.8;
            background: var(--Gold-Gradient-Dark-1, linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(90deg, #A1701D 0%, #D0AA4A 100%));
        }

        .adv-title {
            font-family: Fredoka;
            font-size: 24px;
            font-style: normal;
            font-weight: 300;
            line-height: 32px;
            letter-spacing: 0.6px;
            text-transform: capitalize;
            background: linear-gradient(90deg, #C9A96E 0%, #E5C560 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .location-advantages-divider{
            background: linear-gradient(90deg, rgba(254, 154, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);
            width: 63.99px;
            height: 0.998px;
        }
        .adv-item {
            font-family: 'Faustina', serif;
            margin: 0;
            color: rgba(209, 213, 220, 0.90);
            font-size: 16px;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            text-transform: capitalize;
        }
        .adv-item::before{
            content: "";
            transform: translateY(-50%);
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            margin-right: 8px;
            background: var(--gold, linear-gradient(0deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.20) 100%), #CAA56A);
        }

        /* ════════════════════════════════════
           ABOUT DEVELOPER
        ════════════════════════════════════ */
        #about-dev {
            padding: 60px 164px;
            background: var(--bg2);
        }

        .about-dev-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 52px;
            color: #fff;
            text-align: center;
            line-height: normal;
            margin-bottom: 32px;
        }

        .about-dev-body {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 18px;
            color: #fff;
            line-height: 28px;
            text-align: center;
            max-width: 1401px;
            margin: 0 auto;
        }

        /* ════════════════════════════════════
           FAQ
        ════════════════════════════════════ */
        #faq {
            padding: 60px 164px;
            background: var(--bg2);
        }

        .faq-title {
            font-family: 'Fredoka', sans-serif;
            font-weight: 300;
            font-size: 38px;
            color: var(--gold);
            text-transform: capitalize;
            margin-bottom: 36px;
            text-align: center;
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            max-width: 697px;
            margin: 0 auto;
        }

        .faq-item {
            background: var(--bg2);
            box-shadow: 4px 4px 10px rgba(0, 0, 0, .25);
            padding: 22px 20px 0 20px;
            position: relative;
            cursor: pointer;
        }

        .faq-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, #caa56a, #caa56a);
            opacity: .4;
        }

        .faq-q-wrap {
            display: flex;
            gap: 4px;
            align-items: flex-end;
            flex-wrap: wrap;
        }

        .faq-ques {
            font-family: 'Faustina', serif;
            font-weight: 700;
            font-size: 20px;
            color: var(--gold);
            white-space: nowrap;
        }

        .faq-q-text {
            font-family: 'Fredoka', sans-serif;
            font-size: 24px;
            color: var(--gold);
            line-height: 1.2;
        }

        .faq-ans-wrap {
            display: flex;
            gap: 6px;
            align-items: flex-start;
            margin-top: 12px;
            overflow: hidden;
            max-height: 0;
            transition: max-height .5s ease, margin-top .3s;
        }

        .faq-item.open .faq-ans-wrap {
            max-height: 300px;
        }

        .faq-item.open .faq-q-arrow {
            transform: rotate(90deg);
        }

        .faq-ans {
            font-family: 'Faustina', serif;
            font-size: 20px;
            color: var(--beige);
            white-space: nowrap;
            flex-shrink: 0;
        }

        .faq-ans-text {
            font-family: 'Faustina', serif;
            font-weight: 300;
            font-size: 18px;
            color: var(--beige);
            line-height: 1.6;
        }

        .faq-q-arrow {
            margin-left: auto;
            font-size: 14px;
            color: var(--gold);
            transition: transform .3s;
            display: inline-block;
            font-family: 'Faustina', serif;
        }

        /* ════════════════════════════════════
           SCROLL REVEAL
        ════════════════════════════════════ */
        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .75s, transform .75s;
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
            color: var(--beige);
        }

        .reveal.d1 {
            transition-delay: .1s;
        }

        .reveal.d2 {
            transition-delay: .2s;
        }

        .reveal.d3 {
            transition-delay: .3s;
        }

        .reveal.d4 {
            transition-delay: .4s;
        }
        .zoom-container {
            overflow: hidden;
            position: relative;
        }

        .zoom-container img {
            width: 100%;
            transition: transform 0.1s ease;
            transform-origin: center center;
        }
        .dot-btn-dv-floor{display:flex; justify-content:right; align-items:center; margin-top:0px;}
        /* ════════════════════════════════════
           RESPONSIVE
        ════════════════════════════════════ */
        @media (max-width: 1200px) {
            .highlights-grid {
                display: flex;
                flex-wrap: wrap;
            }

            .sec,
            #welcome,
            #highlights,
            #floorplans,
            #gallery,
            #loc-adv,
            #about-dev,
            #faq {
                padding-left: 40px;
                padding-right: 40px;
            }

            #cover {
                padding-left: 40px;
                padding-right: 40px;
            }

            .second-section-image-property {
                padding: 40px 164px 0;
            }

            .fp-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .loc-adv-grid {
                grid-template-columns: 1fr 1fr;
            }

            .hero-title-block {
                padding: 0 32px;
            }

            .hero-stats-bar {
                padding: 0 32px;
            }

            .hero-title-line {
                max-width: 160px;
            }
        }
        @media (max-width: 1100px) {
            .fp-visual-panel { width: 480px; }
            .fp-image-wrapper { height: 420px; }
            }
        @media (max-width: 900px) {
            .fp-section { flex-direction: column; gap: 32px; }
            .fp-visual-panel { width: 100%; max-width: 560px; margin: 0 auto; }
            .fp-image-wrapper { height: 360px; }
            .fp-title { font-size: 36px; }
            }
        @media (max-width: 560px) {
            .fp-image-wrapper { height: 280px; }
            .fp-title { font-size: 28px; text-align: center; margin-bottom: 40px; }
            .fp-desc{display: none;}
            .bhk-cards { flex-direction: row;min-width: 350px;gap: 10px; }
            .bhk-card { padding: 0px 10px;padding-bottom:12px}
            .bhk-card-type{font-size: 15px;}
            .bhk-card-size{margin-top: 0;}
            .bhk-card-price{margin: 0;font-size: 13px;}
            .btn-row { flex-direction: row; }
            .btn-contact{display: none;}
            .btn-filled span{ display: none; }
            .btn-ghost,.btn-filled,.btn-contact{padding:8px;font-size: 12px;}
            .dot-btn-dv-floor{display: none;}
            .page-wrapper{min-height: auto;padding: 40px 0;}
            .bhk-cards.has-many .bhk-card {flex: 0 0 calc(44% - 6px);}
            .hl-card {padding: 6px;flex-direction: column;justify-content: center;align-items: center;gap: 0px;}
            .fp-visual-panel{margin-top: 15px;padding: 10px;}
            }

        @media (max-width: 768px) {
              .hl-val{
                font-size: 30px;
                white-space: nowrap;
              }
             .fp-section {
                flex-direction: column-reverse;
                gap: 0px;
            }
            .location-title{
                margin-bottom: 0;
            }

             .hero-bg img {
                width: 100%;
                height: 100%;
                max-height: 500px;
                object-fit: fill;
                object-position: center top;
            }
            .hero-stats-bar {
                padding: 0 32px;
                width: 100%;
            }
            .popup-wrap {
                width: calc(100vw - 32px);
                height: auto;
                min-height: 420px;
            }

            .popup-form-panel {
                width: 100%;
                background: rgba(0, 0, 0, 0.75);
                backdrop-filter: blur(8px);
                padding: 80px 24px 28px;
            }

            .popup-deco {
                display: none;
            }

            .custom_popup_modal_pricing {
                width: calc(100vw - 32px);
                padding: 18px 16px 24px;
            }

            .pricing_table td {
                font-size: 18px;
            }

            .custom_pricing_popup_heading_dv h3 {
                font-size: 22px;
            }

            #masterplan,
            #location {
                padding: 45px 6px;
            }

            #walkthrough {
                padding: 40px 9px 50px;
            }

            .second-section-image-property,
            .sec,
            #welcome,
            #highlights,
            #floorplans,
            #gallery,
            #loc-adv,
            #about-dev{
                padding-left: 20px;
                padding-right: 20px;
            }

            #faq {
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 0;
                padding-bottom: 0;
            }
            .faq-q-text{
                font-size: 20px;
            }
            #cover {
                padding-left: 20px;
                padding-right: 20px;
            }
            .faq-q-wrap {
                display: flex;
                gap: 4px;
                align-items: center;
                flex-wrap: nowrap;
            }

            #hero {
                min-height: 730px;
            }

            /* Hero mobile */
            .hero-title-block {
                padding: 0 20px;
            }

            .hero-property-name {
                white-space: normal;
                font-size: 28px;
            }

            .hero-title-line {
                max-width: 60px;
            }

            .hero-stats-bar {
                padding: 0 20px;
                margin-top: 20px;
            }

            .hero-stats-inner {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px 0;
            }

            .hero-stat-divider:nth-of-type(1) {
                left: 50%;
            }

            .hero-stat-divider:nth-of-type(2),
            .hero-stat-divider:nth-of-type(3) {
                display: none;
            }

            .hero-stats-inner::after {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                top: 50%;
                height: 1px;
                background: rgba(162, 132, 85, 0.2);
            }

            .hero-stat {
                padding: 12px 8px;
            }

            .hero-stat-lbl {
                font-size: 14px;
            }

            .hero-stat-val {
                font-size: 13px;
            }

            .hero-rera-wrap {
                padding-bottom: 28px;
            }

            .hero-rera-btn {
                font-size: 14px;
                padding: 10px 28px;
            }

            /* Other sections */
            .highlights-title,
            .welcome-line.sm,
            .amenities-title,
            .gallery-title,
            .loc-adv-title,
            .about-dev-title,
            .faq-title {
                font-size: 28px;
                line-height: normal;
            }

            .adv-title {
                font-size: 30px;
            }

            .adv-item {
                font-size: 16px;
            }

            .loc-adv-grid {
                grid-template-columns: 1fr;
            }

            .gallery-slider {
                height: 300px;
            }

            .hl-card {
                width: calc(50% - 10px);
            }

            .cover-img {
                height: 220px;
            }

            .sec-title,
            .sec-title-center {
                font-size: 28px;
            }

            .welcome-line {
                font-size: 32px;
            }
        }

        @media (max-width: 480px) {
            .hero-property-name {
                font-size: 22px;
            }

            .hero-title-line {
                max-width: 32px;
            }

            .hero-location {
                font-size: 13px;
            }
        }