/* ==========================================================================
   LUXURY THEME — K Raheja Jade City
   --------------------------------------------------------------------------
   Premium real-estate restyle inspired by prideworldpune.com.
   Deep navy / charcoal base + antique gold accents + warm ivory surfaces.

   HOW THIS FILE WORKS
   - Loaded LAST, after bootstrap.css / style.css / app.css, so it wins the
     cascade without touching any existing file, class name, or JS hook.
   - Pure CSS only: no markup or behaviour changes. Delete the single <link>
     tag for this file and the site returns to its previous look.
   - Tweak the whole look from the token block below.

   CONTENTS
     1.  Design tokens (palette, type, spacing, shadows)
     2.  Base & typography
     3.  Header / navigation
     4.  Hero carousel + info box
     5.  Buttons & micro-interactions
     6.  Section shells + scroll reveal
     7.  Overview section
     8.  Pricing section
     9.  Site & floor plan cards
     10. Amenities carousel
     11. Gallery
     12. Location & connectivity
     13. Sidebar, forms & CTA rail
     14. Enquiry modal
     15. Mobile action bar & mobile form
     16. Footer / disclaimer
     17. Accessibility — prefers-reduced-motion
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Core brand remap — every existing rule that uses these vars
       (gradient buttons, pills, tabs, mobile bar…) restyles automatically. */
    --colorPrimary: #a8843a;   /* antique gold  (text-safe on white)  */
    --colorSecondary: #1c2333; /* deep navy                            */
    --colorBtn: #ffffff;       /* text on filled buttons               */

    /* Luxury palette */
    --lux-navy-950: #0d111b;
    --lux-navy-900: #10141f;
    --lux-navy-800: #161c2a;
    --lux-navy-700: #1c2333;
    --lux-navy-600: #242e45;
    --lux-gold: #c9a24b;       /* primary accent               */
    --lux-gold-deep: #a8843a;  /* accent on light backgrounds  */
    --lux-gold-soft: #e7d5a8;  /* accent on dark backgrounds   */
    --lux-gold-faint: rgba(200, 162, 75, 0.22);
    --lux-ivory: #f4f1e9;      /* page background              */
    --lux-surface: #fffdf8;    /* card / section surface       */
    --lux-ink: #23262e;        /* body text                    */
    --lux-muted: #6d6a60;      /* secondary text               */

    /* Typography */
    --lux-font-head: 'muli', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --lux-font-body: 'muli', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

    /* Type scale (fluid) */
    --lux-fs-hero: clamp(28px, 2.6vw, 46px);
    --lux-fs-h1: clamp(24px, 2.2vw, 38px);
    --lux-fs-h2: clamp(19px, 1.5vw, 26px);
    --lux-fs-eyebrow: clamp(12px, 0.95vw, 15px);
    --lux-fs-body: clamp(14px, 1.05vw, 17px);

    /* Spacing & shape */
    --lux-space-1: 8px;
    --lux-space-2: 16px;
    --lux-space-3: 24px;
    --lux-space-4: 40px;
    --lux-radius-sm: 8px;
    --lux-radius: 14px;
    --lux-radius-lg: 22px;

    /* Elevation */
    --lux-shadow-sm: 0 2px 10px rgba(16, 20, 31, 0.06);
    --lux-shadow: 0 10px 30px rgba(16, 20, 31, 0.10);
    --lux-shadow-lg: 0 18px 48px rgba(16, 20, 31, 0.18);
    --lux-shadow-gold: 0 8px 24px rgba(168, 132, 58, 0.28);

    /* Motion */
    --lux-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --lux-speed: 0.35s;
}


/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
body {
    background-color: var(--lux-ivory);
    background-image:
        radial-gradient(1200px 500px at 85% -5%, rgba(201, 162, 75, 0.07), transparent 60%),
        radial-gradient(900px 420px at -10% 30%, rgba(28, 35, 51, 0.05), transparent 55%);
    background-attachment: fixed;
    color: var(--lux-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--lux-gold);
    color: #ffffff;
}

/* Serif display voice for every heading-level element */
.section-heading,
.section-heading-sub,
.pro-title,
.loc-con-head,
.modal-title,
.modal-highlight-title,
.form-heading,
.at-property-dis h5 {
    font-family: var(--lux-font-head);
    letter-spacing: 0.01em;
}

.section-heading {
    font-size: var(--lux-fs-h1);
    font-weight: 700;
    color: var(--lux-navy-700);
    line-height: 1.25;
}

.section-heading-sub {
    font-size: var(--lux-fs-h2);
    font-weight: 600;
    color: var(--lux-navy-700);
}

/* Keep the accent color readable & on-palette wherever it is used as text */
.color-primary {
    color: var(--lux-gold-deep);
}

a {
    transition: color var(--lux-speed) var(--lux-ease);
}

/* Thin elegant scrollbar (progressive enhancement) */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--lux-ivory);
}
::-webkit-scrollbar-thumb {
    background: var(--lux-navy-600);
    border-radius: 100px;
    border: 2px solid var(--lux-ivory);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--lux-gold-deep);
}


/* ==========================================================================
   3. HEADER / NAVIGATION
   Fixed header becomes warm ivory glass with a gold hairline; nav links get
   an animated gold underline. (.bg-white in bootstrap uses !important, so a
   matching !important is required to re-skin the bar.)
   ========================================================================== */
.micro-navbar.bg-white {
    background: rgba(252, 250, 244, 0.92) !important;
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    backdrop-filter: saturate(140%) blur(12px);
}

.micro-navbar {
    box-shadow: 0 1px 0 rgba(201, 162, 75, 0.35), 0 8px 28px rgba(16, 20, 31, 0.08);
    transition: background var(--lux-speed) var(--lux-ease), box-shadow var(--lux-speed) var(--lux-ease);
}

.navbar.micro-navbar .nav-item .nav-link {
    color: var(--lux-navy-700);
    font-weight: 600;
    letter-spacing: 0.04em;
    position: relative;
    transition: color var(--lux-speed) var(--lux-ease), background-color var(--lux-speed) var(--lux-ease);
}

/* Animated underline sweep */
.navbar.micro-navbar .nav-item .nav-link::after {
    content: '';
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 6px;
    height: 2px;
    background: linear-gradient(90deg, var(--lux-gold), var(--lux-gold-soft));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--lux-speed) var(--lux-ease);
}

.navbar.micro-navbar .nav-item .nav-link:hover::after {
    transform: scaleX(1);
}

.navbar.micro-navbar .nav-item .nav-link:hover {
    background-color: rgba(201, 162, 75, 0.08);
    color: var(--lux-gold-deep);
}

.navbar.micro-navbar .nav-item .nav-link.active {
    background-color: var(--lux-navy-700);
    color: var(--lux-gold-soft);
    border-radius: 10px;
}

.navbar.micro-navbar .nav-item .nav-link.active::after {
    transform: scaleX(1);
}

.micro-nav .nav-icon {
    color: inherit;
}

@media only screen and (min-width: 992px) {
    .navbar.micro-navbar .nav-item,
    .navbar.micro-navbar .nav-item:first-child {
        border-color: rgba(28, 35, 51, 0.08);
    }
}

/* Mobile collapse menu */
@media only screen and (max-width: 991px) {
    .navbar.micro-navbar .nav-fill .nav-item:first-child,
    .navbar.micro-navbar .nav-fill .nav-item:not(:last-child) {
        border-color: rgba(28, 35, 51, 0.08);
    }
    .navbar-toggler {
        border-color: var(--lux-gold-faint);
    }
}


/* ==========================================================================
   4. HERO CAROUSEL + INFO BOX
   ========================================================================== */

/* Ken Burns slow zoom on the visible slide (restarts on each slide change) */
@keyframes luxKenBurns {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}

.micro-main-slider .carousel-item img {
    transform-origin: 50% 40%;
    will-change: transform;
}

.micro-main-slider .carousel-item.active img {
    animation: luxKenBurns 16s var(--lux-ease) both;
}

/* Cinematic gradient overlay — keeps header & caption areas legible.
   pointer-events:none so slider controls/indicators still receive clicks. */
.micro-main-slider .carousel-item {
    position: relative;
    overflow: hidden;
}

.micro-main-slider .carousel-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg,
        rgba(16, 20, 31, 0.35) 0%,
        rgba(16, 20, 31, 0.00) 28%,
        rgba(16, 20, 31, 0.00) 58%,
        rgba(16, 20, 31, 0.55) 100%);
    pointer-events: none;
}

/* Gold slider controls */
.main-sld-btn .carousel-control-next,
.main-sld-btn .carousel-control-prev {
    background: rgba(16, 20, 31, 0.65);
    border: 1px solid rgba(201, 162, 75, 0.55);
    opacity: 0.9;
    transition: background var(--lux-speed) var(--lux-ease),
                transform var(--lux-speed) var(--lux-ease),
                box-shadow var(--lux-speed) var(--lux-ease);
}

.main-sld-btn .carousel-control-next:hover,
.main-sld-btn .carousel-control-prev:hover {
    background: var(--lux-gold-deep);
    transform: scale(1.08);
    box-shadow: var(--lux-shadow-gold);
    opacity: 1;
}

.micro-main-slider .carousel-indicators li {
    width: 26px;
    height: 3px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.45);
    transition: background-color var(--lux-speed) var(--lux-ease), width var(--lux-speed) var(--lux-ease);
}

.micro-main-slider .carousel-indicators li.active {
    background-color: var(--lux-gold);
    width: 40px;
}

/* "Artistic impression" chip */
.ai {
    background-color: rgba(16, 20, 31, 0.72);
    color: #e9e6dd;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

/* --- Info box: dark navy glass card with gold detailing (desktop) --------- */
@media only screen and (min-width: 992px) {
    body.isNotRadiate .info-box {
        background: linear-gradient(165deg, rgba(22, 28, 42, 0.96) 0%, rgba(13, 17, 27, 0.94) 100%);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        color: #f2efe7;
        border: 1px solid rgba(201, 162, 75, 0.35);
        border-radius: var(--lux-radius);
        box-shadow: var(--lux-shadow-lg);
    }

    body.isNotRadiate .pro-status {
        color: var(--lux-navy-900);
        background: linear-gradient(90deg, var(--lux-gold-soft), var(--lux-gold));
        border-radius: 100px;
        font-weight: 700;
        letter-spacing: 0.14em;
        margin-top:10px;
    }

    body.isNotRadiate .pro-title {
        font-family: var(--lux-font-head);
        color: #ffffff;
        font-weight: 700;
        letter-spacing: 0.03em;
    }

    body.isNotRadiate .pro-add {
        color: #d9d4c5;
    }

    body.isNotRadiate .pro-dev {
        color: var(--lux-gold-soft);
        letter-spacing: 0.06em;
    }

    body.isNotRadiate .pro-tag-line {
        color: #bcb9ae;
    }

    body.isNotRadiate .pro-price {
        color: #ffffff;
    }

    body.isNotRadiate .pro-price .color-primary {
        font-family: var(--lux-font-head);
        color: var(--lux-gold-soft);
    }

    body.isNotRadiate .pro-rera {
        color: #97948a;
    }

    body.isNotRadiate .info-box span.heading {
        color: var(--lux-gold-soft);
    }

    /* Spec mini-table inside the card */
    .info-box .card-d {
        background-color: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(201, 162, 75, 0.22);
        border-radius: var(--lux-radius-sm);
    }

    .info-box td.heading2 {
        color: #cfcabb;
    }

    .info-box td.heading1 {
        color: var(--lux-gold-soft);
    }
}

/* Info box on mobile: ivory card with gold ribbon */
@media only screen and (max-width: 991px) {
    .info-box {
        background-color: var(--lux-surface);
        border-bottom: 1px solid var(--lux-gold-faint);
    }

    .pro-status {
        background: linear-gradient(90deg, var(--lux-gold-deep), var(--lux-gold));
        color: #ffffff;
        text-shadow: none;
        letter-spacing: 0.12em;
    }

    .pro-title {
        font-family: var(--lux-font-head);
        color: var(--lux-navy-700);
        text-shadow: none;
    }

    .pro-price {
        font-family: var(--lux-font-head);
    }

    .info-box .card-d {
        background-color: #f6f2e7;
        border: 1px solid var(--lux-gold-faint);
        border-radius: var(--lux-radius-sm);
    }
}

/* The animated "offers" chip inherits the new gold/navy gradient vars.
   Soften its heavy text-shadow for the premium look. */
.offers.effetGradient {
    text-shadow: 0 1px 2px rgba(16, 20, 31, 0.35);
    border-radius: 6px;
    letter-spacing: 0.05em;
}


/* ==========================================================================
   5. BUTTONS & MICRO-INTERACTIONS
   ========================================================================== */

/* Primary CTA — gold gradient (Bootstrap's .btn-info re-skinned) */
.btn-info {
    background: linear-gradient(120deg, var(--lux-gold-deep) 0%, var(--lux-gold) 55%, var(--lux-gold-deep) 100%);
    background-size: 200% auto;
    border: none;
    color: #ffffff;
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: 0.05em;
    box-shadow: var(--lux-shadow-gold);
    transition: background-position var(--lux-speed) var(--lux-ease),
                transform var(--lux-speed) var(--lux-ease),
                box-shadow var(--lux-speed) var(--lux-ease);
}

.btn-info:hover,
.btn-info:focus {
    background-position: right center;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(168, 132, 58, 0.4);
}

/* Refined animated gradient (used by most CTAs via .effetGradient):
   now sweeps gold → navy with a soft shadow instead of hard text-shadow. */
.effetGradient, .effetGradient:hover,
.effetMoveGradient, .effetMoveGradient:hover {
    text-shadow: 0 1px 2px rgba(16, 20, 31, 0.35);
    background: linear-gradient(-45deg, var(--lux-gold-deep), var(--lux-navy-700), var(--lux-gold), var(--lux-navy-600));
    background-size: 400% 400%;
    color: #ffffff;
}

/* Universal gentle lift on buttons */
.btn {
    transition: transform var(--lux-speed) var(--lux-ease),
                box-shadow var(--lux-speed) var(--lux-ease),
                background-position var(--lux-speed) var(--lux-ease),
                background-color var(--lux-speed) var(--lux-ease),
                color var(--lux-speed) var(--lux-ease),
                border-color var(--lux-speed) var(--lux-ease);
}

.btn:hover {
    transform: translateY(-2px) scale(1.02);
}

.btn:active {
    transform: translateY(0) scale(0.99);
}

/* Outline CTA — gold outline with fill sweep */
.sectio-bro-btn {
    background-color: transparent;
    background-image: linear-gradient(120deg, var(--lux-gold-deep), var(--lux-gold));
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: left center;
    color: var(--lux-gold-deep);
    border: 1px solid var(--lux-gold-deep);
    border-radius: 100px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background-size 0.45s var(--lux-ease),
                color var(--lux-speed) var(--lux-ease),
                transform var(--lux-speed) var(--lux-ease),
                box-shadow var(--lux-speed) var(--lux-ease);
}

.sectio-bro-btn:hover {
    background: linear-gradient(120deg, var(--lux-gold-deep), var(--lux-gold));
    background-size: 100% 100%;
    animation: none;
    text-shadow: none;
    color: #ffffff;
    border-color: transparent;
    box-shadow: var(--lux-shadow-gold);
}


/* ==========================================================================
   6. SECTION SHELLS + SCROLL REVEAL
   ========================================================================== */
.section {
    background-color: var(--lux-surface);
    border: 1px solid rgba(201, 162, 75, 0.18);
    box-shadow: var(--lux-shadow-sm) !important; /* .shadow-sm utility uses !important */
    font-size: var(--lux-fs-body);
}

@media only screen and (min-width: 992px) {
    .section {
        border-radius: var(--lux-radius-lg);
        margin: 1vw 0.7vw;
        padding-top: 2.2vw;
        padding-bottom: 2.2vw;
    }
}

@media only screen and (max-width: 991px) {
    .section {
        border-radius: var(--lux-radius);
    }
}

/* Eyebrow section label: small caps + gold rule instead of the round pill */
.section .head {
    display: inline-flex;
    align-items: center;
    border: none;
    border-radius: 0;
    padding: 0 0 10px 0;
    color: var(--lux-gold-deep);
    font-family: var(--lux-font-body);
    font-size: var(--lux-fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 1.4vw;
    position: relative;
}

.section .head::before {
    content: '';
    display: inline-block;
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, var(--lux-gold-deep), var(--lux-gold-soft));
    margin-right: 12px;
    flex: none;
}

.section .head::after {
    content: '';
    position: absolute;
    left: 46px;
    right: 0;
    bottom: 4px;
    height: 1px;
    background: linear-gradient(90deg, var(--lux-gold-faint), transparent);
}

@media only screen and (max-width: 991px) {
    .section .head {
        font-size: 14px;
        letter-spacing: 0.18em;
        margin-bottom: 12px;
    }
}

/* Fade-in / slide-up reveal — pure CSS scroll-driven animation.
   Runs only in browsers with animation-timeline support (Chrome/Edge);
   everywhere else, sections simply render as normal. No JS involved.

   IMPORTANT: a section that contains position:fixed UI (the .micro-side
   right sidebar, the .mob-action bottom bar, the enquiry modals) must NOT
   be animated — an animated transform turns the section into a containing
   block and traps its fixed children inside it, un-docking the sidebar.
   :has() is safe here: every browser with animation-timeline also has it. */
@supports (animation-timeline: view()) {
    .section:not(:has(.micro-side, .mob-action, .modal)) {
        animation: luxReveal 1s var(--lux-ease) both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
    }
}

@keyframes luxReveal {
    from {
        opacity: 0.15;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   7. OVERVIEW SECTION
   ========================================================================== */
#overview p {
    color: var(--lux-ink);
    line-height: 1.8;
}

#overview ul {
    list-style: none;
    padding-left: 0;
}

#overview ul li {
    position: relative;
    padding: 6px 0 6px 28px;
    line-height: 1.6;
}

#overview ul li::before {
    content: '\2726'; /* four-pointed star */
    position: absolute;
    left: 2px;
    top: 6px;
    color: var(--lux-gold);
    font-size: 0.85em;
}


/* ==========================================================================
   8. PRICING SECTION
   ========================================================================== */
.table.micro-price-table {
    border-radius: var(--lux-radius-sm);
    overflow: hidden;
    border-color: rgba(28, 35, 51, 0.12) !important;
}

.table.micro-price-table thead th {
    background-color: var(--lux-navy-700);
    color: var(--lux-gold-soft);
    border-color: var(--lux-navy-600) !important;
    font-family: var(--lux-font-body);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.85em;
}

.table-striped.micro-price-table tbody tr:nth-of-type(odd) {
    background-color: rgba(201, 162, 75, 0.06);
}

.table.micro-price-table tbody tr {
    transition: background-color var(--lux-speed) var(--lux-ease);
}

.table.micro-price-table tbody tr:hover {
    background-color: rgba(201, 162, 75, 0.14);
}

.table.micro-price-table td {
    vertical-align: middle;
    border-color: rgba(28, 35, 51, 0.08) !important;
}

.price-type {
    font-family: var(--lux-font-head);
    font-weight: 700;
    color: var(--lux-navy-700);
}

.price-amt {
    font-family: var(--lux-font-head);
    font-weight: 700;
    color: var(--lux-gold-deep);
}

/* Mobile stacked pricing rows */
@media only screen and (max-width: 991px) {
    .table-pricing tr:nth-child(odd) {
        background: #f6f2e7;
    }
    .table-pricing tr {
        border-bottom: 1px solid var(--lux-gold-faint);
    }
    .price-type {
        color: var(--lux-navy-700);
    }
}

/* Costing-details promo card */
.at-property-item {
    border-radius: var(--lux-radius);
    overflow: hidden;
    border-color: rgba(201, 162, 75, 0.25) !important;
    background-color: var(--lux-surface);
    box-shadow: var(--lux-shadow-sm) !important;
    transition: transform var(--lux-speed) var(--lux-ease), box-shadow var(--lux-speed) var(--lux-ease);
}

.at-property-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--lux-shadow) !important;
}


/* ==========================================================================
   9. SITE & FLOOR PLAN CARDS
   ========================================================================== */
.at-property-img img {
    transition: transform 0.6s var(--lux-ease);
}

.at-property-item:hover .at-property-img img {
    transform: scale(1.06);
}

.at-property-img .at-property-overlayer {
    background: linear-gradient(180deg, rgba(16, 20, 31, 0.45), rgba(16, 20, 31, 0.8));
}

.at-property-btn {
    border: 1px solid var(--lux-gold);
    border-radius: 100px;
    color: #ffffff;
    letter-spacing: 0.12em;
    font-size: 0.9em;
}

.at-property-item:hover .at-property-btn {
    color: var(--lux-navy-900);
    background: linear-gradient(120deg, var(--lux-gold-soft), var(--lux-gold));
    border-color: transparent;
}

.at-property-dis {
    letter-spacing: 0.05em;
}

.at-property-dis h5 {
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0;
}


/* ==========================================================================
   10. AMENITIES CAROUSEL
   ========================================================================== */
.ami-block-bg {
    border-radius: var(--lux-radius);
    box-shadow: var(--lux-shadow-sm);
    transition: transform var(--lux-speed) var(--lux-ease), box-shadow var(--lux-speed) var(--lux-ease);
    cursor: pointer;
}

.ami-block-bg:hover {
    transform: translateY(-4px);
    box-shadow: var(--lux-shadow);
}

.ami-block-bg img {
    transition: transform 0.7s var(--lux-ease);
}

.ami-block-bg:hover img {
    transform: scale(1.07);
}

.ami-block-bg .ami-block-bg-overlay {
    background-image: linear-gradient(0deg,
        rgba(13, 17, 27, 0.95) 0%,
        rgba(16, 20, 31, 0.85) 18%,
        rgba(22, 28, 42, 0.55) 45%,
        transparent 100%);
    transition: opacity var(--lux-speed) var(--lux-ease);
}

.ami-block-bg .ami-block-bg-overlay .ami-bg-name {
    border-left: 3px solid var(--lux-gold);
    padding-left: 10px;
    color: #f5f2e9;
    font-family: var(--lux-font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
}

/* Owl nav arrows to match */
.owl-theme .owl-nav [class*='owl-'] {
    background: var(--lux-navy-700);
    color: var(--lux-gold-soft);
    border-radius: 100px;
    transition: background var(--lux-speed) var(--lux-ease);
}

.owl-theme .owl-nav [class*='owl-']:hover {
    background: var(--lux-gold-deep);
    color: #ffffff;
}


/* ==========================================================================
   11. GALLERY
   ========================================================================== */
.gallery-thumb {
    opacity: 1;
    border-radius: var(--lux-radius-sm);
    box-shadow: var(--lux-shadow-sm);
    transition: transform 0.5s var(--lux-ease), box-shadow 0.5s var(--lux-ease), filter 0.5s var(--lux-ease);
    filter: saturate(0.96);
}

.gallery-thumb:hover {
    transform: scale(1.04) translateY(-3px);
    box-shadow: var(--lux-shadow);
    filter: saturate(1.05);
}


/* ==========================================================================
   12. LOCATION & CONNECTIVITY
   ========================================================================== */
#location iframe {
    border-radius: var(--lux-radius);
    border: 1px solid var(--lux-gold-faint) !important;
    box-shadow: var(--lux-shadow-sm);
    filter: saturate(0.92);
    transition: filter var(--lux-speed) var(--lux-ease);
}

#location iframe:hover {
    filter: saturate(1);
}

/* Connectivity tab pill */
.nav-link.ami-tab {
    color: var(--lux-gold-deep);
    border: 1px solid var(--lux-gold-deep);
    border-radius: 100px;
    letter-spacing: 0.14em;
    font-weight: 600;
    transition: background-color var(--lux-speed) var(--lux-ease), color var(--lux-speed) var(--lux-ease);
}

.nav-link.ami-tab.active,
.nav-link.ami-tab:hover {
    color: #ffffff;
    background: linear-gradient(120deg, var(--lux-gold-deep), var(--lux-gold));
    border-color: transparent;
}

/* Connectivity list rows */
#pills-tabconnContent .col.my-2 {
    background-color: rgba(201, 162, 75, 0.06);
    border: 1px solid rgba(201, 162, 75, 0.16);
    border-radius: var(--lux-radius-sm);
    padding: 12px 16px;
    transition: background-color var(--lux-speed) var(--lux-ease), transform var(--lux-speed) var(--lux-ease);
}

#pills-tabconnContent .col.my-2:hover {
    background-color: rgba(201, 162, 75, 0.14);
    transform: translateX(4px);
}

#pills-tabconnContent .loc-icon {
    color: var(--lux-gold-deep);
}

/* Keep grid gaps from collapsing the new card look */
#pills-tabconnContent .row {
    row-gap: 8px;
}


/* ==========================================================================
   13. SIDEBAR, FORMS & CTA RAIL
   ========================================================================== */
@media only screen and (min-width: 992px) {
    .micro-side {
        background-color: var(--lux-surface);
        border-left: 1px solid var(--lux-gold-faint);
        box-shadow: -6px 0 24px rgba(16, 20, 31, 0.06);
        overflow-y: auto; /* short laptop screens: rail scrolls instead of clipping the form */
    }

    .og-section {
        background-image: linear-gradient(180deg, #fdfbf5, #f3efe4);
        border-bottom: 1px solid var(--lux-gold-faint);
    }

    .og-block {
        background: linear-gradient(120deg, var(--lux-navy-600), var(--lux-navy-900));
        border-bottom-left-radius: var(--lux-radius-sm);
        border-bottom-right-radius: var(--lux-radius-sm);
        box-shadow: var(--lux-shadow-sm);
    }

    .og-block .nav-item {
        color: #f2efe7;
        transition: color var(--lux-speed) var(--lux-ease), background-color var(--lux-speed) var(--lux-ease);
    }

    .og-block .nav-item:hover {
        color: var(--lux-gold-soft);
    }

    .og-block .nav-item:first-child {
        border-color: rgba(201, 162, 75, 0.3);
    }
}

.form-heading {
    color: var(--lux-navy-700);
    font-size: 1.35em;
}

/* Elegant underlined fields with gold focus */
.micro-form-field {
    background-color: transparent;
    border-bottom: 1px solid rgba(28, 35, 51, 0.25);
    transition: border-color var(--lux-speed) var(--lux-ease), box-shadow var(--lux-speed) var(--lux-ease);
}

.micro-form-field:focus {
    background-color: transparent;
    border-bottom-color: var(--lux-gold-deep);
    box-shadow: 0 1px 0 0 var(--lux-gold-deep);
    outline: none;
}

.micro-form-field::placeholder {
    color: var(--lux-muted);
    letter-spacing: 0.03em;
}


/* ==========================================================================
   14. ENQUIRY MODAL
   ========================================================================== */
.modal-content {
    border: none;
    border-radius: var(--lux-radius);
    overflow: hidden;
    box-shadow: var(--lux-shadow-lg);
}

.modal-backdrop.show {
    opacity: 0.7;
}

/* Left highlight column (was flat green) → deep navy with gold headline */
.bg-primary-rk {
    background: linear-gradient(165deg, var(--lux-navy-600) 0%, var(--lux-navy-900) 100%);
    color: #f2efe7;
}

.bg-primary-rk h5 {
    font-family: var(--lux-font-head);
    color: var(--lux-gold-soft);
}

.modal-head {
    background-color: var(--lux-navy-700);
}

.modal-highlight-bg {
    background-color: #faf7ef;
}

.modal-highlight-title,
.modal-highlight li i,
.modal-highlight li span {
    color: var(--lux-gold-deep);
}

#enqModal .modal-title-secondary.modal-title {
    border: 1px solid var(--lux-gold-deep);
    color: var(--lux-gold-deep);
    border-radius: 100px;
}

.modal-call-btn, .modal-call-btn:hover {
    background: linear-gradient(120deg, var(--lux-navy-600), var(--lux-navy-900));
    color: var(--lux-gold-soft);
    letter-spacing: 0.06em;
}


/* ==========================================================================
   15. MOBILE ACTION BAR & MOBILE FORM
   ========================================================================== */
@media only screen and (max-width: 991px) {
    .mob-action {
        background: linear-gradient(120deg, var(--lux-navy-600), var(--lux-navy-900));
        box-shadow: 0 -4px 18px rgba(16, 20, 31, 0.35);
    }

    .mob-action .nav-item {
        color: #f2efe7;
        letter-spacing: 0.06em;
    }

    .mob-action .nav-item:not(:last-child) {
        border-right: 1px solid rgba(201, 162, 75, 0.35);
    }

    .mob-action .mi.action-icon {
        color: var(--lux-gold-soft);
    }

    .mob-form {
        background: linear-gradient(180deg, #fdfbf5, #f3efe4);
        border-top: 2px solid var(--lux-gold);
        border-bottom: 2px solid var(--lux-gold);
        animation: none;
    }

    .mob-form .form-heading {
        text-shadow: none;
    }
}


/* ==========================================================================
   16. FOOTER / DISCLAIMER
   ========================================================================== */
footer.disclaimer {
    background: linear-gradient(180deg, var(--lux-navy-800), var(--lux-navy-950));
    color: #a7a598;
    border-top: 2px solid var(--lux-gold-deep);
    padding-top: 24px;
    padding-bottom: 24px;
    margin-top: 16px;
}

@media only screen and (min-width: 992px) {
    footer.disclaimer {
        border-top-left-radius: var(--lux-radius);
        border-top-right-radius: var(--lux-radius);
        padding: 1.5vw 1.5vw 1vw;
        margin-bottom: 0;
    }
}

footer.disclaimer a {
    color: var(--lux-gold-soft) !important; /* wins over inline color:inherit */
}

footer.disclaimer a:hover {
    color: var(--lux-gold) !important;
    text-decoration: none;
}

footer.disclaimer b {
    color: #d9d4c5;
}

footer.disclaimer .btn-sm.more {
    color: var(--lux-gold-soft);
}

footer.disclaimer img {
    filter: brightness(1.05);
    border-radius: 6px;
    background: #ffffff;
    padding: 4px;
}


/* ==========================================================================
   17. ACCESSIBILITY — PREFERS-REDUCED-MOTION
   Decorative motion is disabled for users who ask for less movement.
   Functional transitions (e.g. Bootstrap collapse/modal) are left intact.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .micro-main-slider .carousel-item.active img,
    .section,
    .effetGradient,
    .effetMoveGradient,
    .offers,
    .mob-form,
    .animated {
        animation: none !important;
    }

    .btn:hover,
    .effectScale:hover,
    .gallery-thumb:hover,
    .ami-block-bg:hover,
    .ami-block-bg:hover img,
    .at-property-item:hover,
    .at-property-item:hover .at-property-img img,
    #pills-tabconnContent .col.my-2:hover {
        transform: none !important;
    }

    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}