:root {
    --bg: #ffffff;
    --alt: #f8f2ea;
    --ink: #2b211b;
    --gold: #d91431;
    --mut: #7a6d62;
    --ln: rgba(43, 33, 27, .16);
    --serif: 'Cormorant Garamond', serif
}


/* ---------- 1. BASE ---------- */
html.lenis { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    overflow-x: hidden;
    line-height: 1.7
}

img { display: block; width: 100%; height: 100%; object-fit: cover }
a { color: inherit; text-decoration: none }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px }
.text-muted { color: #000 !important }

/* scroll progress bar */
.lx-bar {
    position: fixed;
    inset: 0 0 auto;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: 0;
    z-index: 2000
}

/* custom cursor (sirf mouse devices) */
.lx-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    z-index: 3000;
    pointer-events: none;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    letter-spacing: .15em;
    color: #fff
}

@media(hover:hover) and (pointer:fine) {
    .lx-cursor { display: flex }
}


/* ---------- 2. HEADER & MENU ---------- */
.lx-head {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1500;
    padding: 28px 0;
    color: #fff;
    transition: background .4s
}

.lx-head.on {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    padding: 14px 0;
    color: var(--ink);
    border-bottom: 0;
    box-shadow: 0 12px 30px -22px rgba(0, 0, 0, .35)
}

.lx-logo {
    font-family: var(--serif);
    font-size: 1.7rem;
    letter-spacing: .3em;
    line-height: 1;
    display: inline-block
}

.lx-logo small {
    display: block;
    font: 300 .6rem 'Jost';
    letter-spacing: .5em;
    color: var(--gold);
    margin-top: 6px
}

.lx-logo img { width: 140px; height: auto }

.lx-nav {
    gap: 2.2rem;
    font-size: .9rem;
    letter-spacing: .14em;
    text-transform: uppercase
}

.lx-nav a:hover { color: var(--gold) }

.lx-burger {
    background: none;
    border: 0;
    width: 44px;
    height: 44px;
    position: relative
}

.lx-burger i {
    position: absolute;
    left: 10px;
    right: 10px;
    height: 1px;
    background: currentColor;
    transition: transform .3s
}

.lx-burger i:first-child { top: 18px }
.lx-burger i:last-child { top: 26px }
.lx-burger.open i:first-child { transform: translateY(4px) rotate(45deg) }
.lx-burger.open i:last-child { transform: translateY(-4px) rotate(-45deg) }

.lx-menu {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 1400;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 12vw;
    gap: 1rem;
    visibility: hidden
}

.lx-menu a { font: 400 2.4rem var(--serif) }


/* ---------- 3. BUTTONS, SECTION SHELL, HEADINGS ---------- */
.lx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: .95rem 2.1rem;
    border: 1px solid var(--gold);
    color: #fff;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    /* red base + dark fill jo hover par left se slide hota hai */
    background-color: var(--gold);
    background-image: linear-gradient(#231a16, #231a16);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 0 100%;
    transition: background-size .55s cubic-bezier(.2, .7, .2, 1), border-color .4s, color .4s, box-shadow .4s
}

.lx-btn:hover {
    background-size: 100% 100%;
    border-color: #231a16;
    color: #fff;
    box-shadow: 0 16px 30px -16px rgba(35, 26, 22, .6)
}

/* outline button: hover par red fill */
.lx-btn-o {
    color: var(--ink);
    border-color: var(--ln);
    background-color: transparent;
    background-image: linear-gradient(var(--gold), var(--gold))
}

.lx-btn-o:hover { border-color: var(--gold); color: #fff }

/* chhota red button (Complete costing details) */
.lx-link {
    border: 0;
    padding: .55rem 1.1rem;
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--gold);
    background-image: linear-gradient(#231a16, #231a16);
    background-repeat: no-repeat;
    background-position: left;
    background-size: 0 100%;
    transition: background-size .5s cubic-bezier(.2, .7, .2, 1)
}

.lx-link:hover { background-size: 100% 100% }

.lx-sec { padding: clamp(71px, 12vw, 60px) 0;
overflow: hidden !important;
}
.lx-alt { background: var(--alt) }

.lx-eyebrow {
    font-size: 1.1rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    color: var(--gold)
}

.lx-h2 { font: 400 clamp(2.1rem, 4.8vw, 4rem)/1.1 var(--serif) }

/* word-by-word reveal wrapper (JS banata hai) */
.lx-w { display: inline-block; overflow: hidden; vertical-align: top }
.lx-w>span { display: inline-block }

/* Section heading block: watermark + eyebrow + h2 + sub  (sab sections me same) */
.lx-hd {
    position: relative;
    text-align: center;
    margin-bottom: 3.5rem;
    padding-top: 1rem
}

.lx-hd:before {
    content: attr(data-wm);
    position: absolute;
    left: 50%;
    top: -.25em;
    transform: translateX(-50%);
    font: 600 clamp(3.5rem, 15vw, 11rem)/1 var(--serif);
    color: rgba(217, 20, 49, .07);
    white-space: nowrap;
    pointer-events: none
}

.lx-hd>* { position: relative }

.lx-hd .lx-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem
}

.lx-hd .lx-eyebrow:before,
.lx-hd .lx-eyebrow:after {
    content: "";
    width: 38px;
    height: 2px;
    background: var(--gold)
}

.lx-hd .lx-h2 {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    max-width: 820px;
    margin: .8rem auto 0
}

.lx-sub { max-width: 520px; margin: 1rem auto 0; color: #000 }


/* ---------- 4. OVERVIEW STATS ---------- */
.lx-stats b {
    display: block;
    /* font: 400 clamp(2.4rem, 5vw, 3.8rem) var(--serif); */
    font-size: 27px;
    color: var(--gold);
    line-height: 1
}

.lx-stats>div { background: var(--alt); padding: 1.5rem 1.4rem }
.lx-stats span { font-size: .85rem; color: #000 }


/* ---------- 5. PRICE CARDS ---------- */
.lx-pc2 {
    position: relative;
    height: 100%;
    background: #231a16;
    color: #fff;
        border: 1px solid #d91431;
    border-radius: 20px;
    padding: 2.6rem 0.9rem 2.4rem;
    overflow: hidden;
    transition: transform .5s, box-shadow .5s
}

.lx-pc2:hover { transform: translateY(-8px); box-shadow: 0 34px 60px -30px rgba(217, 20, 49, .45) }

.lx-pc2:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 64px;
    height: 2px;
    background: var(--gold);
    transition: width .6s
}

.lx-pc2:hover:before { width: 100% }

.lx-pc2 .no {
    position: absolute;
    right: 1.6rem;
    top: 1.4rem;
    font: 500 6.4rem/1 'Jost';
    color: transparent;
    -webkit-text-stroke: 1px rgba(217, 20, 49, .55);
    pointer-events: none
}

.lx-pc2 .lb {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 0 0 .9rem;
    font: 400 1.5rem 'Jost';
    letter-spacing: .3em;
    color: #d91431
}

.lx-pc2 .lb i { width: 22px; height: 1px; background: currentColor }

.lx-pc2 h3 {
    font: 400 clamp(1.9rem, 2.4vw, 2.3rem)/1.2 'Jost';
    margin: 0 0 1.8rem;
    position: relative
}

.lx-pc2 h3 em { font: italic 400 1.1em var(--serif) }

.lx-pc2 .sp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid rgba(255, 255, 255, .22);
    margin-bottom: 1.8rem
}

.lx-pc2 .sp>div { padding: 1.2rem 0.3rem }
.lx-pc2 .sp>div:nth-child(1) { border-right: 1px solid rgba(255, 255, 255, .22) }
.lx-pc2 .sp .w { grid-column: 1/-1; border-top: 1px solid rgba(255, 255, 255, .22) }

.lx-pc2 small {
    display: block;
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #d9cfc3;
    margin-bottom: .4rem
}

.lx-pc2 b { font: 400 1rem/1.3 'Jost' }
.lx-pc2 b span { font-size: .72rem; letter-spacing: .06em; color: #d9cfc3 }

.lx-pc2 em {
    display: block;
    font-style: normal;
    font-size: .8rem;
    color: #b9ada0;
    margin-top: .2rem
}

.lx-pc2 .w b { color: #d91431; font-size: 1.8rem }

.lx-gp {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    padding: 1rem 1.9rem;
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    background-color: transparent;
    background-image: linear-gradient(var(--gold), var(--gold));
    background-repeat: no-repeat;
    background-position: left;
    background-size: 0 100%;
    transition: background-size .55s cubic-bezier(.2, .7, .2, 1), border-color .4s, gap .3s
}

.lx-gp:hover { background-size: 100% 100%; border-color: var(--gold); gap: 1.5rem }


/* ---------- 6. SITE & FLOOR PLAN ----------
   Tabs + ek blurred plan. Plan par click -> enquiry popup (data-pop). */

/* Tabs */
.lx-seg {
    display: flex;
    justify-content: center;
    gap: .3rem;
    background: var(--alt);
    padding: .4rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 2.6rem;
    overflow-x: auto
}

.lx-seg button {
    position: relative;
    background: transparent;
    border: 0;
    padding: .95rem 2.1rem;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
    transition: background .35s, color .35s, box-shadow .35s
}

.lx-seg button:hover { background: #fff; color: var(--gold); box-shadow: 0 12px 24px -16px rgba(43, 33, 27, .5) }

.lx-seg button.on,
.lx-seg button.on:hover { background: var(--gold); color: #fff; box-shadow: 0 14px 28px -14px rgba(217, 20, 49, .7) }

/* Plan: blurred drawing sheet */
.lx-plan {
    position: relative;
    display: block;
    width: 100%;
    min-height: 460px;
    padding: 0;
    border: 0;
    color: var(--ink);
    text-align: center;
    background-color: #fff;
    background-image:
        linear-gradient(rgba(35, 26, 22, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(35, 26, 22, .05) 1px, transparent 1px);
    background-size: 32px 32px;
    box-shadow: 0 40px 80px -50px rgba(35, 26, 22, .5);
    overflow: hidden;
    cursor: pointer
}

.lx-plan img {
    position: absolute;
    inset: 2rem;
    width: calc(100% - 4rem);
    height: calc(100% - 4rem);
    object-fit: contain;
    mix-blend-mode: multiply;
    filter: blur(9px);
    transform: scale(1.02);
    user-select: none;
    transition: filter .6s, transform .8s
}

.lx-plan:hover img { filter: blur(6px); transform: scale(1.05) }

/* gold corner marks */
.lx-plan:before,
.lx-plan:after {
    content: "";
    position: absolute;
    width: 34px;
    height: 34px;
    border: 0 solid var(--gold);
    pointer-events: none;
    z-index: 4
}

.lx-plan:before { left: 18px; top: 18px; border-width: 2px 0 0 2px }
.lx-plan:after { right: 18px; bottom: 18px; border-width: 0 2px 2px 0 }

/* Overlay: lock icon + title + button */
.lx-plan-lock {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, .38)
}

.lx-plan-ic {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin-bottom: .8rem;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    box-shadow: 0 16px 34px -14px rgba(217, 20, 49, .75);
    transition: transform .5s, background .4s
}

.lx-plan:hover .lx-plan-ic { transform: scale(1.1); background: #231a16 }

.lx-plan-t { font-size: 1.7rem;}
.lx-plan-s { font-size: 1.3rem; color: #000 }
.lx-plan-lock .lx-btn { margin-top: 1rem }

/* card ki hover par andar wala button bhi fill ho */
.lx-plan:hover .lx-btn {
    background-size: 100% 100%;
    border-color: #231a16;
    box-shadow: 0 16px 30px -16px rgba(35, 26, 22, .6)
}


/* ---------- 7. AMENITIES ---------- */
.lx-am-g { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem }

.lx-at {
    position: relative;
    text-align: center;
    padding: 2.2rem 1rem;
    border: 1px solid #d91431;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px -26px rgba(43, 33, 27, .5);
    transition: transform .4s
}

.lx-at:hover { transform: translateY(-6px) }

.lx-at:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    /* background: var(--gold); */
    transform: scaleX(0);
    transition: transform .5s
}

.lx-at:hover:after { transform: scaleX(1) }

.lx-at .ic {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--alt);
    display: grid;
    place-items: center;
    margin: 0 auto 1.2rem
}

.lx-at img {
    width: 52px;
    height: 52px;
    margin: 0;
    object-fit: contain;
    transition: transform .5s
}

.lx-at:hover img { transform: translateY(-5px) scale(1.06) }

.lx-at span { display: block; font: 400 1.25rem/1.25 var(--serif) }


/* ---------- 8. GALLERY ----------
   Bada featured image + neeche thumbnail buttons (auto-play, swipe, full screen) */
.lx-gal { background: var(--bg) }

.lx-gv-main {
    position: relative;
    height: clamp(300px, 50vw, 640px);
    background: #231a16;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 40px 80px -50px rgba(35, 26, 22, .6)
}

.lx-gv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }

/* neeche ka dark scrim (caption padhne ke liye) */
.lx-gv-main:after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 55%;
    background: linear-gradient(transparent, rgba(24, 14, 8, .82));
    pointer-events: none
}

.lx-gv-cap {
    position: absolute;
    left: clamp(1.2rem, 3vw, 2.6rem);
    bottom: clamp(1.3rem, 3vw, 2.3rem);
    z-index: 2;
    color: #fff;
    pointer-events: none
}

.lx-gv-n { display: block; font-size: .75rem; letter-spacing: .3em; color: #ff8fa0 }
.lx-gv-t { margin: .2rem 0 0; font: 400 clamp(1.9rem, 4.4vw, 3.6rem)/1.05 var(--serif) }

/* auto-play progress line */
.lx-gv-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    z-index: 4;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left
}

/* prev / next */
.lx-gv-a {
    position: absolute;
    bottom: clamp(1.3rem, 3vw, 2.3rem);
    z-index: 3;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border: 0;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(6px);
    transition: background .35s
}

.lx-gv-a:hover { background: var(--gold) }
.lx-gv-nx { right: clamp(1.2rem, 3vw, 2.6rem) }
.lx-gv-p { right: calc(clamp(1.2rem, 3vw, 2.6rem) + 62px) }

/* full screen */
.lx-gv-full {
    position: absolute;
    top: clamp(1rem, 2vw, 1.6rem);
    right: clamp(1rem, 2vw, 1.6rem);
    z-index: 3;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    transition: background .3s, color .3s
}

.lx-gv-full:hover { background: var(--gold); color: #fff }

/* thumbnails */
.lx-gv-th {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: .7rem;
    margin-top: .9rem
}

.lx-gv-b {
    position: relative;
    padding: 0;
    border: 0;
    background: #231a16;
    aspect-ratio: 16/10;
    overflow: hidden;
    opacity: .5;
    transition: opacity .4s
}

.lx-gv-b img { transition: transform .8s cubic-bezier(.2, .7, .2, 1) }
.lx-gv-b:hover { opacity: 1 }
.lx-gv-b:hover img { transform: scale(1.08) }

.lx-gv-b:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .5s
}

.lx-gv-b.on { opacity: 1 }
.lx-gv-b.on:after { transform: scaleX(1) }

@media(max-width:991px) {
    .lx-gv-main { height: auto; aspect-ratio: 4/3 }
    .lx-gv-a { width: 46px; height: 46px }
    .lx-gv-p { right: calc(clamp(1.2rem, 3vw, 2.6rem) + 52px) }

    .lx-gv-th {
        display: flex;
        overflow-x: auto;
        gap: .6rem;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none
    }

    .lx-gv-th::-webkit-scrollbar { display: none }
    .lx-gv-b { flex: 0 0 96px; scroll-snap-align: center }
}


/* ---------- 9. LOCATION ---------- */
.lx-lmap {
    border: 0;
    height: 100%;
    min-height: 480px;
    box-shadow: 0 30px 60px -40px rgba(43, 33, 27, .5)
}

.lx-lmap iframe { width: 100%; height: 100%; border: 0 }

/* section cream hai, isliye items white + rows cream */
.accordion-item {
    border: 0;
    background: #fff;
    margin-bottom: .8rem;
    border-radius: 0;
    box-shadow: 0 14px 34px -26px rgba(43, 33, 27, .5)
}

.accordion-button {
    background: transparent;
    box-shadow: none !important;
    font: 400 1.6rem var(--serif);
    color: var(--ink);
    padding: 1.3rem 1.5rem;
    border-radius: 0 !important;
    gap: 1rem
}

.accordion-button em {
    margin-left: auto;
    font: 300 .75rem 'Jost';
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #000;
    font-style: normal
}

.accordion-button:not(.collapsed) { background: var(--gold); color: #fff }
.accordion-button:not(.collapsed) em { color: #fff }
.accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1) }
.accordion-button.collapsed:hover { color: var(--gold) }
.accordion-button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
.accordion-body { padding: .6rem }

.lx-lr {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: .9rem 1.2rem;
    margin-bottom: .4rem;
    background: var(--alt)
}

.lx-lr:last-child { margin: 0 }

.lx-lr b {
    flex: none;
    width: 76px;
    font-size: 1.3rem;
    /* font: 400 2.1rem/1 var(--serif); */
    color: var(--gold)
}

.lx-lr b small {
    font: 400 .7rem;
    letter-spacing: .15em;
    color: #000;
    margin-left: .25rem;
    text-transform: capitalize
}


/* ---------- 10. CONTACT ---------- */
.lx-cn {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 30px 70px -40px rgba(43, 33, 27, .55), 0 0 0 1px rgba(43, 33, 27, .07)
}

.lx-cn-l { position: relative; min-height: 520px; color: #fff }
.lx-cn-l>img { position: absolute; inset: 0 }

.lx-cn-l:after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg, rgba(24, 14, 8, .45), rgba(24, 14, 8, .85)) */
}

.lx-cn-t {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(1.8rem, 4vw, 3.5rem)
}

.lx-cn-t h2 { font: 400 clamp(2rem, 3.6vw, 3.2rem)/1.1 var(--serif) }
.lx-cn-t .lx-eyebrow { color: #e9c08f }
.lx-cn-t ul { list-style: none; padding: 0; margin: 1.2rem 0 }
.lx-cn-t li { padding: .7rem 1rem; margin-bottom: .5rem; background: rgba(255, 255, 255, .12) }
.lx-cn-p { font: 400 1.8rem var(--serif); color: #fff }

.lx-cn-r {
    padding: clamp(1.8rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.lx-cn-r h3 { font: 400 1.8rem var(--serif); margin-bottom: 1.6rem }


/* ---------- 11. FORMS ---------- */
.lx-form label {
    display: block;
   font-size: 13px !important;
    letter-spacing: .2em;
    /* text-transform: uppercase; */
    color: #000
}

.lx-form input[type=text],
.lx-form input[type=tel],
.lx-form input[type=email] {
    width: 100%;
    background: var(--alt);
    border: 0;
    border-radius: 0;
    color: var(--ink);
    padding: .95rem 1rem;
    margin-bottom: .3rem
}

.lx-form input:focus { outline: 0; box-shadow: inset 0 -2px 0 var(--gold) }
.lx-form input::placeholder { color: #9b8f84; font-weight: 300 }
.lx-f { margin-bottom: 1.4rem }
.lx-err { color: #e08b7a; font-size: .75rem; min-height: 1em }

.lx-chk {
    display: flex !important;
    gap: .7rem;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: .85rem !important
}

.lx-ok { font: 400 2rem var(--serif); color: var(--gold); padding: 2rem 0 }


/* ---------- 12. POPUP & LIGHTBOX ---------- */
.lx-pop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .75);
    z-index: 2500;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem
}

.lx-pop-box {
    position: relative;
    background: #fff;
    border: 0;
    padding: 2.4rem;
    width: min(480px, 100%);
    max-height: 94vh;
    overflow: auto
}

.lx-pop h2 { font: 400 2rem var(--serif); margin-bottom: 1.5rem }

.lx-x {
    position: absolute;
    right: 14px;
    top: 8px;
    background: none;
    border: 0;
    color: var(--ink);
    font-size: 2rem;
    line-height: 1;
    z-index: 2;
    transition: color .3s, transform .4s
}

.lx-x:hover { color: var(--gold); transform: rotate(90deg) }

.lx-lb {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 4, .96);
    z-index: 2800;
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff
}

.lx-lb img {
    width: auto;
    height: auto;
    max-width: 86vw;
    max-height: 84vh;
    object-fit: contain
}

.lx-pv,
.lx-nx {
    position: absolute;
    top: 50%;
    background: none;
    border: 1px solid var(--ln);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%
}

.lx-pv,
.lx-nx { transition: background .3s, border-color .3s }

.lx-pv:hover,
.lx-nx:hover { background: var(--gold); border-color: var(--gold) }

.lx-pv { left: 2vw }
.lx-nx { right: 2vw }
.lx-ct { position: absolute; bottom: 20px; font-size: .8rem; letter-spacing: .2em }
.lx-lb .lx-x { right: 2vw; top: 2vh; color: #fff }
.lx-lb .lx-x:hover { color: var(--gold) }


/* ---------- 13. FOOTER & MOBILE BAR ---------- */
.lx-foot { padding: 80px 0 30px; border-top: 0; background: var(--alt);
overflow: hidden;
}

.lx-qr {
    width: 88px;
    height: 88px;
    border: 0;
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--gold);
    margin-bottom: .5rem
}

.lx-disc { font-size: .72rem; color: #000; margin: 3rem 0 1rem; 
    /* padding: 1.2rem  */
}
.lx-flogo { width: 150px; height: auto; mix-blend-mode: multiply; margin-top: 1rem }

.lx-mbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1600;
    display: flex;
    background: #fff;
    box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, .3)
}

.lx-mbar>* {
    flex: 1;
    text-align: center;
    padding: .9rem 0;
    background: none;
    border: 0;
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink)
}

.lx-mbar button { background: var(--gold); color: #fff; font-size: 15px; }


/* ---------- 14. SLICK (mobile sliders) ---------- */
.slick-slider { position: relative }

.slick-dots {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: .5rem;
    padding: 0;
    margin: 1.4rem 0 0
}

.slick-dots button {
    font-size: 0;
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 8px;
    background: var(--ln);
    padding: 0;
    transition: width .3s, background .3s
}

.slick-dots .slick-active button { width: 24px; background: var(--gold) }

.lx-sa {
    position: absolute;
    top: 38%;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ln);
    color: var(--ink);
    line-height: 1;
    transition: background .3s, color .3s, border-color .3s
}

.lx-sa:hover { background: var(--gold); border-color: var(--gold); color: #fff }
.lx-sp { left: 4px }
.lx-sn { right: 4px }

@media (max-width: 767px) {

    .lx-seg {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
    }

    .lx-seg button {
        width: 100%;
        padding: .85rem 1rem;
        border: 1px solid #d91431;
    }

    .lx-seg button.on {
        background: #d91431;
        border-color: #d91431;
        color: #fff;
    }

    .lx-seg button:hover {
        background: #d91431;
        border-color: #d91431;
        color: #fff;
    }

    .lx-plan {
        min-height: 360px;
    }

    .lx-plan img {
        inset: 1.2rem;
        width: calc(100% - 2.4rem);
        height: calc(100% - 2.4rem);
    }

}
/* ---------- 15. RESPONSIVE ---------- */
@media(max-width:991px) {
    body { padding-bottom: 52px }
    .lx-hd { margin-bottom: 2.4rem }

    /* plans */
  

    /* amenities slider */
    .lx-am-g { display: block }
    .lx-at { margin: 10px .35rem 14px; padding: 2rem .6rem; height: 33vh; }
    .lx-at span { font-size: 1.1rem }
    .lx-am-g .slick-list { padding: 4px 0 }
    .slick-dots { margin-bottom: 0 }

    /* location */
    .lx-lmap { min-height: 320px; height: 340px }

    /* contact */
    .lx-cn-l { min-height: 420px }
}

@media(max-width:575px) {
    .lx-pc2 { padding: 2rem 1.5rem }
    .lx-pc2 .no { font-size: 4.6rem }
    .lx-pc2 .sp>div { padding: 1rem }
    .lx-gp { width: 100%; justify-content: space-between }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition-duration: .01s !important
    }
}


/* ---------- 16. REMOVED SECTIONS (optional) ----------
   Ye CSS un sections ka hai jo abhi HTML me comment hain
   (wide image, Lifestyle pinned steps, Parallax).
   Kabhi wapas laana ho to rehne do, warna poora block delete kar sakte ho. */
.lx-wide { padding: 0 4vw }
.lx-imgrv { height: min(80vh, 720px); overflow: hidden }
.lx-exp-pin { position: relative; height: 100vh; overflow: hidden }
.lx-step { position: absolute; inset: 0; color: #fff }
.lx-step img { position: absolute; inset: 0 }
.lx-step:after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .55) }
.lx-step .tx { position: absolute; z-index: 2; left: 8vw; bottom: 14vh; max-width: 520px }
.lx-step h3 { font: 400 clamp(2.6rem, 6vw, 5rem) var(--serif) }
.lx-step small { color: var(--gold); letter-spacing: .3em }

.lx-prog {
    position: absolute;
    right: 5vw;
    top: 50%;
    height: 200px;
    width: 1px;
    background: var(--ln);
    z-index: 3
}

.lx-prog i {
    display: block;
    width: 3px;
    margin-left: -1px;
    height: 100%;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top
}

.lx-par {
    position: relative;
    height: 90vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff
}

.lx-par img { position: absolute; inset: -15% 0; height: 130% }
.lx-par:after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5) }

.lx-par h2 {
    position: relative;
    z-index: 2;
    font: 400 clamp(2.2rem, 6vw, 5.5rem)/1.1 var(--serif);
    text-align: center;
    padding: 0 6vw
}

@media(max-width:991px) {
    .lx-exp-pin { height: auto; overflow: visible }
    .lx-step { position: relative; height: 90vh }
    .lx-step .tx { left: 6vw; right: 6vw; bottom: 8vh }
    .lx-par { height: 70vh }
}


/* ---------- 17. NEW: OVERVIEW (heading style) + ARROW BUTTONS ---------- */
.lx-ov-tx p {
    max-width: 860px;
    margin: 0 auto 1.1rem;
    color: #000
}

/* Get Best Price wala arrow button, light background ke liye */
.lx-gp-d {
    color: var(--ink);
    border-color: var(--ln)
}

.lx-gp-d:hover { color: #fff }

.lx-stats>div { text-align: center }

/* sab .lx-btn buttons me arrow */
.lx-btn svg { flex: none; transition: transform .4s }
.lx-btn:hover svg { transform: translateX(6px) }

.iti {
    width: 100%;
}

.iti input {
    width: 100% !important;
}

.iti__country-container {
    z-index: 5;
}

.iti__selected-country {
    height: 100%;
}
.iti__country-container{
        position: absolute;
    top: 0;
    bottom: 0;
    height: 55px;
    padding: var(--iti-border-width);
}
.error{
    color: red !important;
}