/*==========================================================================
  MPD PREMIUM DESIGN SYSTEM
  Mian Property Dealer — Premium Visual Language
  Version 3.2 | September 2026
  Author: Antigravity / AGY
==========================================================================*/

/* ─────────────────────────────────────────────────────────────────────────
   1. GOOGLE FONTS — TYPOGRAPHY FOUNDATION
───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   2. DESIGN TOKENS
───────────────────────────────────────────────────────────────────────── */
:root {
  /* Master Brand Color Palettes */
  --mpd-dark:          #1C2D37;    /* Primary Website Dark BG */
  --mpd-dark-2:        #15232C;    /* Complementary Card/Surface Dark BG */
  --mpd-hover-gold:    #EEB54E;    /* Signature Hover & Accent Color */
  --mpd-primary:       #1C2D37;    /* Deep Brand Slate Navy */
  --mpd-accent:        #EEB54E;    /* Accent Warm Amber Gold */
  --mpd-gold:          #EEB54E;    /* Premium Gold */
  --mpd-gold-dark:     #D49C36;    /* Deeper Gold for gradients */
  --mpd-ink:           #0D1321;    /* Near-black */
  --mpd-muted:         #637381;    /* Secondary text */
  --mpd-surface:       #F7F9FC;    /* Light page bg */
  --mpd-surface-2:     #EEF2F8;    /* Slightly deeper surface */
  --mpd-border:        #E2E8F0;    /* Subtle borders */
  --mpd-white:         #FFFFFF;

  /* World-Class Harmonious Section Rhythm Tokens */
  --mpd-section-py:    clamp(42px, 5vw, 68px);       /* Standard Section Top & Bottom Padding */
  --mpd-section-gap:   clamp(24px, 3vw, 36px);      /* Section Header Bottom Margin */
  --mpd-subgap:        clamp(14px, 1.8vw, 22px);     /* Sub-Section Inner Gap (Stats to Testimonials) */

  /* ── CRITICAL: Override the orange HSL system in main.css ──
     main.css sets --main-h:28 (orange). We remap to 38° = #EEB54E gold.
     This fixes ALL hsl(var(--main) ...) utilities: text-main, bg-main, btn-main, border-main */
  --main-h:  38;
  --main-s:  80%;
  --main-l:  62%;
  --main:    var(--main-h) var(--main-s) var(--main-l);

  /* Override legacy gradients */
  --main-gradient:     linear-gradient(90deg, #EEB54E 0%, #D49C36 100%);
  --main-gradient-rev: linear-gradient(270deg, #EEB54E 0%, #D49C36 100%);

  /* Override h9 theme tokens */
  --h9-primary-color:  #EEB54E;
  --h9-secondary-color: #1C2D37;

  /* Typography */
  --font-heading:   'Outfit', 'Plus Jakarta Sans', sans-serif;
  --font-display:   'Plus Jakarta Sans', 'DM Sans', sans-serif;
  --font-body:      'Inter', 'Jost', sans-serif;

  /* Motion */
  --ease-premium:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:       cubic-bezier(0.0, 0, 0.2, 1);
  --dur-xs:         120ms;
  --dur-sm:         200ms;
  --dur-md:         320ms;
  --dur-lg:         500ms;
  --dur-xl:         700ms;

  /* Spacing */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 120px;

  /* Radius */
  --r-sm: 6px;   --r-md: 10px;  --r-lg: 16px;  --r-xl: 24px;  --r-full: 9999px;

  /* Shadows */
  --shadow-card:   0 2px 8px rgba(13,18,33,0.06), 0 8px 32px rgba(13,18,33,0.08);
  --shadow-hover:  0 8px 24px rgba(13,18,33,0.12), 0 16px 48px rgba(13,18,33,0.10);
  --shadow-deep:   0 16px 48px rgba(28,45,55,0.24);
  --shadow-gold:   0 8px 32px rgba(238,181,78,0.28);

  /* Icon stroke width */
  --stroke-icon:   1.5px;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. GLOBAL BASE RESETS & SMOOTH SCROLLING
───────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────
   3. GLOBAL BASE RESETS, BOX-SIZING & ZERO HORIZONTAL OVERFLOW
───────────────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box !important;
}

html {
  box-sizing: border-box !important;
  scroll-behavior: smooth !important;
  scroll-padding-top: 90px;
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   CUSTOM SLEEK & MINIMAL SCROLLBAR (Right Side)
   Minimalist 7px pill scrollbar with signature MPD gold hover accent
───────────────────────────────────────────────────────────────────────── */
/* Standard modern Firefox scrollbar */
html,
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
}

/* Chrome, Edge, Safari, Brave, Opera */
::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.4);
  border-radius: 9999px;
  border: 1.5px solid transparent;
  background-clip: padding-box;
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: #EEB54E;
  box-shadow: 0 0 10px rgba(238, 181, 78, 0.55);
}

::-webkit-scrollbar-thumb:active,
*::-webkit-scrollbar-thumb:active {
  background: #D49C36;
}

::-webkit-scrollbar-corner,
*::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  box-sizing: border-box !important;
  font-family: var(--font-body);
  color: var(--mpd-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  max-width: 100% !important;
  overflow-x: hidden !important;
  width: 100% !important;
  position: relative;
}

main,
.body-bg {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

h1, h2, h3, h4, h5, h6,
.font-plusjakarta,
.banner-9-title,
.section-9-title,
.project-9-title,
.service-9-title,
.testimonial-9-title,
.building-9-title {
  font-family: var(--font-display) !important;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. REDUCED MOTION SUPPORT
───────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mpd-float-anim { animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   5. SCROLL REVEAL SYSTEM
───────────────────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-xl) var(--ease-premium),
              transform var(--dur-xl) var(--ease-premium);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed,
[data-reveal="scale"].is-revealed { transform: none; }

[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }

/* ─────────────────────────────────────────────────────────────────────────
   6. SVG ICON SYSTEM
───────────────────────────────────────────────────────────────────────── */
.mpd-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mpd-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mpd-icon--sm  { width: 16px; height: 16px; }
.mpd-icon--md  { width: 20px; height: 20px; }
.mpd-icon--lg  { width: 24px; height: 24px; }
.mpd-icon--xl  { width: 32px; height: 32px; }
.mpd-icon--2xl { width: 48px; height: 48px; }
.mpd-icon--3xl { width: 64px; height: 64px; }

.mpd-icon-primary svg  { stroke: var(--mpd-primary); }
.mpd-icon-accent svg   { stroke: var(--mpd-accent); }
.mpd-icon-gold svg     { stroke: var(--mpd-gold); }
.mpd-icon-white svg    { stroke: var(--mpd-white); }
.mpd-icon-muted svg    { stroke: var(--mpd-muted); }

/* Icon badge container */
.mpd-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(28,62,138,0.06);
  border: 1px solid rgba(28,62,138,0.12);
  border-radius: var(--r-md);
  flex-shrink: 0;
  transition: background var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out),
              transform var(--dur-sm) var(--ease-out);
}
.mpd-icon-badge:hover,
.mpd-card:hover .mpd-icon-badge {
  background: rgba(28,62,138,0.12);
  border-color: rgba(28,62,138,0.24);
  transform: translateY(-2px);
}
.mpd-icon-badge--dark {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.14);
}

/* ─────────────────────────────────────────────────────────────────────────
   7. PILL-SHAPED BUTTON SYSTEM & PREMIUM CTA BUTTONS (GLOBAL MASTER)
───────────────────────────────────────────────────────────────────────── */
/* Core Pill Architecture for all buttons across all frontend pages */
.btn,
.home-9-btn,
.mpd-btn,
.btn-login-submit,
.simple-btn,
.common-btn,
button[type="submit"]:not(.btn-icon):not(.close-btn):not(.close-button):not(.accordion-button):not(.slick-arrow):not(.toggle-mobileMenu):not(.offcanvas-btn),
input[type="submit"] {
  border-radius: var(--r-full) !important;
  overflow: hidden !important;
}

/* Ensure all button pseudo-elements (gradients, hover states, overlays) inherit the exact pill curve */
.btn::before,
.btn::after,
.home-9-btn::before,
.home-9-btn::after,
.mpd-btn::before,
.mpd-btn::after,
.btn-login-submit::before,
.btn-login-submit::after {
  border-radius: var(--r-full) !important;
}

/* Optical horizontal padding balance for pill capsules */
.btn:not(.btn-sm):not(.btn-icon):not(.rounded-circle) {
  padding-left: clamp(24px, 2.5vw, 36px) !important;
  padding-right: clamp(24px, 2.5vw, 36px) !important;
}

/* Ensure circular icon/utility buttons stay strictly circular (50%), never stretched */
.btn-icon,
.progress-wrap,
.scroll-top,
.close-btn,
.close-button,
.toggle-mobileMenu,
.offcanvas-btn,
.rounded-circle,
.btn.rounded-circle {
  border-radius: 50% !important;
  overflow: visible;
}

/* Prevent accordion headers from turning into pills */
.accordion-button {
  border-radius: 0 !important;
}

.mpd-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-full) !important;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-sm) var(--ease-out),
              box-shadow var(--dur-sm) var(--ease-out),
              transform var(--dur-xs) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.mpd-btn:focus-visible {
  outline: 2px solid var(--mpd-accent);
  outline-offset: 3px;
}
.mpd-btn--primary {
  background: var(--mpd-primary);
  color: var(--mpd-white);
  border: 1.5px solid var(--mpd-primary);
  box-shadow: 0 2px 8px rgba(28,62,138,0.25);
}
.mpd-btn--primary:hover {
  background: #142f6b;
  box-shadow: 0 6px 24px rgba(28,62,138,0.35);
  transform: translateY(-1px);
  color: var(--mpd-white);
}
.mpd-btn--outline {
  background: transparent;
  color: var(--mpd-primary);
  border: 1.5px solid var(--mpd-primary);
}
.mpd-btn--outline:hover {
  background: var(--mpd-primary);
  color: var(--mpd-white);
  transform: translateY(-1px);
}
.mpd-btn--ghost {
  background: transparent;
  color: var(--mpd-white);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.mpd-btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.7);
  color: var(--mpd-white);
}
.mpd-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition: transform var(--dur-sm) var(--ease-out);
}
.mpd-btn:hover svg { transform: translateX(3px); }

/* ─────────────────────────────────────────────────────────────────────────
   8. SECTION HEADING SYSTEM
───────────────────────────────────────────────────────────────────────── */
.mpd-section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mpd-accent);
  margin-bottom: var(--sp-4);
}
.mpd-section-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--mpd-accent);
}
.mpd-section-label--light { color: rgba(255,255,255,0.65); }
.mpd-section-label--light::before { background: rgba(255,255,255,0.4); }

.mpd-heading {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--mpd-ink);
}
.mpd-heading span { color: var(--mpd-accent); }
.mpd-heading--light { color: var(--mpd-white); }
.mpd-heading--light span { color: #7AADFF; }

/* ─────────────────────────────────────────────────────────────────────────
   9. HERO SECTION — ARCHITECTURAL SVG SYSTEM
───────────────────────────────────────────────────────────────────────── */

/* Replace raster shape images with CSS-only background pattern */
.banner-9-area .banner-9-ovarlay {
  position: relative;
}

/* Hide old raster shape images */
.slider-bg-shape { display: none !important; }

/* Architectural SVG background composition */
.mpd-hero-arch-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.mpd-hero-arch-bg svg {
  position: absolute;
  right: -60px;
  bottom: 0;
  width: 55%;
  max-width: 680px;
  height: auto;
  opacity: 0.09;
}
@media (max-width: 991px) {
  .mpd-hero-arch-bg svg { width: 70%; opacity: 0.06; }
}
@media (max-width: 575px) {
  .mpd-hero-arch-bg svg { display: none; }
}

/* Location card redesign */
.banner-9-address {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(28,62,138,0.12) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-card) !important;
}
.banner-9-address-content h4 {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mpd-ink) !important;
  margin-bottom: 2px !important;
}
.banner-9-address-content p {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--mpd-muted) !important;
  margin: 0 !important;
}

/* Floating animation for architectural elements */
@keyframes mpd-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
.mpd-float-anim {
  animation: mpd-float 5s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────────
   10. PARTNER BADGES STRIP
───────────────────────────────────────────────────────────────────────── */
.mpd-partners {
  padding: 36px 0;
  background: var(--mpd-surface);
  border-top: 1px solid var(--mpd-border);
  border-bottom: 1px solid var(--mpd-border);
  overflow: hidden;
}
.mpd-partners__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mpd-muted);
  text-align: center;
  margin-bottom: var(--sp-5);
}
.mpd-partners__track {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  justify-content: center;
}
.mpd-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px 20px;
  background: var(--mpd-white);
  border: 1px solid var(--mpd-border);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--mpd-primary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transition: box-shadow var(--dur-sm) var(--ease-out),
              border-color var(--dur-sm) var(--ease-out),
              transform var(--dur-sm) var(--ease-out);
}
.mpd-partner-badge:hover {
  box-shadow: 0 4px 16px rgba(28,62,138,0.12);
  border-color: rgba(28,62,138,0.25);
  transform: translateY(-2px);
}
.mpd-partner-badge svg {
  width: 14px;
  height: 14px;
  stroke: var(--mpd-primary);
}

/* ─────────────────────────────────────────────────────────────────────────
   11. FEATURE SECTION — SKYLINE SVG COMPOSITION
───────────────────────────────────────────────────────────────────────── */
.mpd-skyline-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--sp-5) 0;
}
.mpd-skyline-wrap svg {
  width: 100%;
  max-width: 340px;
  height: auto;
}
@media (max-width: 767px) {
  .mpd-skyline-wrap { display: none; }
}

/* Feature panel cards — upgrade */
.panel-9-item {
  border-radius: var(--r-md) !important;
  transition: background var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out) !important;
}
.panel-9-item:hover,
.col-custom.active .panel-9-item {
  box-shadow: 0 4px 20px rgba(28,62,138,0.10) !important;
}
.panel-9-item-2 {
  border-radius: 0 0 var(--r-md) var(--r-md) !important;
  border-top: 1px solid var(--mpd-border) !important;
}

/* Feature BG Shape — replace with CSS */
.feature-9-bg-shape { display: none !important; }

/* ─────────────────────────────────────────────────────────────────────────
   12. ABOUT SECTION — SVG FRAME OVERLAY
───────────────────────────────────────────────────────────────────────── */
.mpd-about-photo-frame {
  position: relative;
  display: inline-block;
  width: 100%;
}
.mpd-about-photo-frame img {
  border-radius: var(--r-lg);
  width: 100%;
  height: auto;
  display: block;
}
.mpd-about-photo-frame::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  right: 24px;
  bottom: 24px;
  border: 2px solid var(--mpd-accent);
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: 0;
  opacity: 0.35;
}
.mpd-about-photo-frame::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 80px;
  height: 80px;
  background: var(--mpd-gold);
  border-radius: var(--r-md);
  z-index: 0;
  opacity: 0.15;
}
.mpd-about-photo-frame img { position: relative; z-index: 1; }

/* Corner accent SVG replacement */
.about-9-thumb-shape { display: none !important; }

/* Stat overlay badge on photo */
.mpd-photo-stat {
  position: absolute;
  bottom: 20px;
  right: -16px;
  background: var(--mpd-white);
  border: 1px solid var(--mpd-border);
  border-radius: var(--r-md);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  z-index: 2;
  min-width: 150px;
}
.mpd-photo-stat__value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--mpd-primary);
  line-height: 1;
  display: block;
  margin-bottom: 2px;
}
.mpd-photo-stat__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--mpd-muted);
}
@media (max-width: 575px) { .mpd-photo-stat { right: 0; } }

/* ─────────────────────────────────────────────────────────────────────────
   13. INVESTMENT JOURNEY TIMELINE
───────────────────────────────────────────────────────────────────────── */
.mpd-journey {
  padding: var(--sp-10) 0;
  background: var(--mpd-dark);
  position: relative;
  overflow: hidden;
}
.mpd-journey__bg-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
}
.mpd-journey__header {
  text-align: center;
  margin-bottom: var(--sp-9);
  position: relative;
  z-index: 1;
}
.mpd-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
  z-index: 1;
}
.mpd-timeline__connector {
  position: absolute;
  top: 32px;
  left: calc(10% + 32px);
  right: calc(10% + 32px);
  height: 1px;
  background: linear-gradient(90deg,
    rgba(42,98,254,0.1),
    rgba(42,98,254,0.5) 20%,
    rgba(42,98,254,0.5) 80%,
    rgba(42,98,254,0.1)
  );
  z-index: 0;
}
.mpd-timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--sp-3);
  position: relative;
}
.mpd-timeline__node {
  width: 64px;
  height: 64px;
  background: rgba(42,98,254,0.12);
  border: 1.5px solid rgba(42,98,254,0.35);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin-bottom: var(--sp-5);
  transition: background var(--dur-md) var(--ease-out),
              border-color var(--dur-md) var(--ease-out),
              transform var(--dur-md) var(--ease-out),
              box-shadow var(--dur-md) var(--ease-out);
}
.mpd-timeline__step:hover .mpd-timeline__node,
.mpd-timeline__step.is-active .mpd-timeline__node {
  background: var(--mpd-accent);
  border-color: var(--mpd-accent);
  transform: scale(1.1);
  box-shadow: 0 0 32px rgba(42,98,254,0.4);
}
.mpd-timeline__node svg {
  width: 22px;
  height: 22px;
  stroke: rgba(122,173,255,0.85);
  transition: stroke var(--dur-md) var(--ease-out);
}
.mpd-timeline__step:hover .mpd-timeline__node svg,
.mpd-timeline__step.is-active .mpd-timeline__node svg {
  stroke: var(--mpd-white);
}
.mpd-timeline__num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  background: var(--mpd-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  color: var(--mpd-white);
}
.mpd-timeline__title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--mpd-white);
  margin-bottom: var(--sp-2);
  line-height: 1.3;
}
.mpd-timeline__desc {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
}

/* Timeline reveal animation */
.mpd-timeline__step {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-xl) var(--ease-premium),
              transform var(--dur-xl) var(--ease-premium);
}
.mpd-timeline__step.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
.mpd-timeline__step:nth-child(1) { transition-delay: 0ms; }
.mpd-timeline__step:nth-child(2) { transition-delay: 100ms; }
.mpd-timeline__step:nth-child(3) { transition-delay: 200ms; }
.mpd-timeline__step:nth-child(4) { transition-delay: 300ms; }
.mpd-timeline__step:nth-child(5) { transition-delay: 400ms; }

@media (max-width: 991px) {
  .mpd-timeline {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--sp-7);
  }
  .mpd-timeline__connector { display: none; }
}
@media (max-width: 575px) {
  .mpd-timeline {
    grid-template-columns: 1fr 1fr;
    row-gap: var(--sp-6);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   14. FLOOR PLAN SVG VISUALIZER
───────────────────────────────────────────────────────────────────────── */
.mpd-floorplan-wrap {
  position: relative;
  padding: var(--sp-5);
  background: var(--mpd-white);
  border: 1px solid var(--mpd-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
}
.mpd-floorplan-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}
.mpd-floorplan-badge {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  background: var(--mpd-dark);
  color: var(--mpd-white);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--r-full);
}

/* Stroke-draw animation for floor plan paths */
.mpd-floorplan-wrap svg path,
.mpd-floorplan-wrap svg rect,
.mpd-floorplan-wrap svg line,
.mpd-floorplan-wrap svg polyline {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 1.2s var(--ease-out);
}
.mpd-floorplan-wrap.is-drawn svg path,
.mpd-floorplan-wrap.is-drawn svg rect,
.mpd-floorplan-wrap.is-drawn svg line,
.mpd-floorplan-wrap.is-drawn svg polyline {
  stroke-dashoffset: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   15. AMENITY CARDS GRID
───────────────────────────────────────────────────────────────────────── */
.mpd-amenities {
  padding: var(--sp-10) 0;
  background: var(--mpd-surface);
  position: relative;
  overflow: hidden;
}
.mpd-amenity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.mpd-amenity-card {
  background: var(--mpd-white);
  border: 1px solid var(--mpd-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: box-shadow var(--dur-md) var(--ease-out),
              transform var(--dur-md) var(--ease-out),
              border-color var(--dur-md) var(--ease-out);
  cursor: default;
}
.mpd-amenity-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
  border-color: rgba(28,62,138,0.18);
}
.mpd-amenity-card__title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--mpd-ink);
  margin: 0;
}
.mpd-amenity-card__desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--mpd-muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 991px) {
  .mpd-amenity-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .mpd-amenity-grid { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────
   16. TRUST & TESTIMONIAL METRICS SECTION (EXACT TO USER SCREENSHOT)
───────────────────────────────────────────────────────────────────────── */
.mpd-stats {
  padding-top: var(--mpd-section-py) !important;
  padding-bottom: var(--mpd-subgap) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-bottom: 0 !important;
  background: #1C2D37 !important;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: none !important;
}

/* Centered Header in Upper Trust & Metrics Section */
.mpd-stats .mpd-section-label {
  font-family: var(--font-heading, 'Outfit', 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #EEB54E !important;
  margin-bottom: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mpd-stats .mpd-section-label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: #EEB54E;
  margin-right: 8px;
  border-radius: 999px;
}

.mpd-stats .mpd-heading {
  font-family: var(--font-heading, 'Outfit', 'Plus Jakarta Sans', sans-serif) !important;
  font-size: clamp(26px, 3.4vw, 42px) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

.mpd-stats .mpd-heading span {
  color: #EEB54E !important;
}

.mpd-trust-cards-row {
  display: flex;
  flex-wrap: wrap;
  row-gap: 40px;
}

.mpd-trust-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0 15px;
  width: 100%;
}

.mpd-trust-card__header {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 20px;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.mpd-trust-card__divider {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.16);
  margin-bottom: 28px;
}

.mpd-trust-card__value {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(52px, 5.5vw, 76px);
  font-weight: 800;
  color: #DEB168; /* Rich golden-amber matching screenshot */
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.mpd-trust-card__desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 400;
  margin: 0;
  max-width: 320px;
}

@media (max-width: 767.98px) {
  .mpd-stats {
    padding-top: var(--mpd-section-py) !important;
    padding-bottom: var(--mpd-subgap) !important;
  }
  .mpd-trust-card__divider {
    margin-bottom: 20px;
  }
  .mpd-trust-card__value {
    font-size: 48px;
    margin-bottom: 14px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   17. PILL-SHAPED TESTIMONIAL CARDS & 3-4 COLUMN CAROUSEL SYSTEM
───────────────────────────────────────────────────────────────────────── */
/* Remove old raster bg shape PNGs */
.testimonial-9-bg-shape { display: none !important; }
.testimonial-9-logo { display: none !important; }

/* Decorative cityscape SVG bg for testimonial section */
.mpd-testi-bg-city {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
}
.mpd-testi-bg-city svg { width: 100%; height: auto; }

.mpd-testi-section {
  position: relative;
  background: #1C2D37 !important;
  padding-top: var(--mpd-subgap) !important;
  padding-bottom: var(--mpd-section-py) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  border-top: none !important;
  overflow: hidden !important;
}

@media (max-width: 767.98px) {
  .mpd-testi-section {
    padding-top: var(--mpd-subgap) !important;
    padding-bottom: var(--mpd-section-py) !important;
  }
}

.mpd-testi-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: 24px !important;
}

/* Headings in exact same font family as 1.5k.150+ (Outfit) */
.mpd-testi-section .mpd-section-label {
  font-family: var(--font-heading, 'Outfit', 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #EEB54E !important;
  margin-bottom: 8px !important;
  display: inline-block !important;
}

.mpd-testi-section .mpd-heading {
  font-family: var(--font-heading, 'Outfit', 'Plus Jakarta Sans', sans-serif) !important;
  font-size: clamp(28px, 3.2vw, 42px) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em !important;
  line-height: 1.18 !important;
}

.mpd-testi-section .mpd-heading span {
  color: #EEB54E !important;
}

/* Nav arrows pill group */
.mpd-testi-nav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.mpd-testi-nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--mpd-white) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur-sm) var(--ease-out);
  backdrop-filter: blur(8px);
}
.mpd-testi-nav-btn:hover {
  background: #EEB54E !important;
  border-color: #EEB54E !important;
  color: #0A1218 !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(238, 181, 78, 0.4);
}
.mpd-testi-nav-btn:disabled,
.mpd-testi-nav-btn.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Swiper headroom to ensure top border is NEVER clipped on hover */
.mpd-testi-swiper {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  margin-top: -14px !important;
  overflow: visible !important;
}

.mpd-testi-swiper .swiper-wrapper {
  overflow: visible !important;
}

.mpd-testi-swiper .swiper-slide {
  overflow: visible !important;
  height: auto !important;
}

/* Compact Pill-shaped Card with Theme-matching background */
.mpd-testi-pill-card {
  position: relative;
  background: #15232C !important; /* Theme-matching deep slate navy surface */
  border: 1.5px solid rgba(238, 181, 78, 0.22) !important; /* Warm gold accent border */
  border-radius: 30px !important; /* Pill / capsule contour */
  padding: 22px 24px 18px !important; /* Decreased height */
  height: 100%;
  min-height: 215px !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background-color 0.35s ease !important;
}

/* Hover: Top border stays 100% visible, crisp gold border glow */
.mpd-testi-pill-card:hover {
  transform: translateY(-5px) !important;
  background: #0F1A22 !important;
  border-color: #EEB54E !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 24px rgba(238, 181, 78, 0.25) !important;
}

.mpd-testi-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px !important;
}
.mpd-testi-card__quote-icon {
  width: 22px !important;
  height: 18px !important;
  fill: #EEB54E !important;
  opacity: 0.85;
}
.mpd-testi-card__stars {
  display: flex;
  align-items: center;
  gap: 2.5px;
}
.mpd-testi-card__stars svg {
  width: 13px !important;
  height: 13px !important;
  fill: #EEB54E !important;
}

.mpd-testi-card__text {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 14px !important;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mpd-testi-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mpd-testi-card__author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mpd-testi-card__avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  overflow: hidden;
  border: 1.5px solid #DEB168 !important;
  flex-shrink: 0;
  background: linear-gradient(135deg, #1C3E8A, #2A62FE);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px !important;
}
.mpd-testi-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mpd-testi-card__name {
  font-family: var(--font-heading, 'Outfit', 'Plus Jakarta Sans', sans-serif) !important;
  font-size: 14px !important;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 2px;
  line-height: 1.2;
}
.mpd-testi-card__designation {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 11.5px !important;
  color: #7AADFF;
  margin: 0;
  line-height: 1.2;
}

/* Verified Badge Icon */
.mpd-verified-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(56, 189, 248, 0.4));
  transition: transform 0.25s ease;
}
.mpd-verified-badge:hover {
  transform: scale(1.15);
}

/* ─────────────────────────────────────────────────────────────────────────
   18. PROPERTY CARD UPGRADE
───────────────────────────────────────────────────────────────────────── */
.property-item,
.service-9-item {
  transition: box-shadow var(--dur-md) var(--ease-out),
              transform var(--dur-md) var(--ease-out) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--mpd-border) !important;
}
.property-item:hover,
.service-9-item:hover {
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-4px) !important;
}
/* Property thumbnail hover zoom */
.property-item__thumb,
.service-9-thumb {
  overflow: hidden !important;
}
.property-item__thumb img,
.service-9-thumb img {
  transition: transform var(--dur-lg) var(--ease-out) !important;
}
.property-item:hover .property-item__thumb img,
.service-9-item:hover .service-9-thumb img {
  transform: scale(1.05) !important;
}

/* SVG placeholder for missing property images */
.mpd-prop-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--mpd-surface) 0%, var(--mpd-surface-2) 100%);
}
.mpd-prop-placeholder svg {
  width: 80px;
  height: 80px;
  opacity: 0.25;
}

/* ─────────────────────────────────────────────────────────────────────────
   19. REVAMPED COMPACT HERO SECTION (#1C2D37 + SKYLINE SVG + ROUNDED CORNERS)
───────────────────────────────────────────────────────────────────────── */
/* Ensure header and navigation sit safely above the hero section */
.header {
  position: relative !important;
  z-index: 100 !important;
}
.header.fixed-header {
  z-index: 1000 !important;
}
.nav-submenu {
  z-index: 1001 !important;
}

/* Base hero section container: clean spacing, no collapse or nav overlap */
.breadcrumb,
.breadcrumb.padding-y-120 {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 24px auto 38px auto !important;
  clear: both !important;
  overflow: visible !important;
  z-index: 5 !important;
  list-style: none !important;
}

/* Remove legacy gradient / pattern pseudo-elements and raster image */
.breadcrumb::before,
.breadcrumb::after,
.breadcrumb .breadcrumb__img {
  display: none !important;
  content: none !important;
}

/* The hero card: #1C2D37, rounded corners, short height, skyline SVG backdrop */
.breadcrumb > .container {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  background-color: #1C2D37 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  min-height: 125px !important;
  padding: 22px 36px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14) !important;
  z-index: 2 !important;
}

/* Skyline building silhouettes background from user-provided SVG */
.breadcrumb > .container::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('../images/shapes/hero-skyline-bg.svg') !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important;
  background-size: 100% 100% !important;
  opacity: 0.12 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Reset grid widths inside the hero card */
.breadcrumb .row {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

.breadcrumb [class*="col-"] {
  display: block !important;
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

/* Hero content wrapper: Column layout with Title and Breadcrumb pill */
.breadcrumb__wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  position: relative !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 40px !important;
  text-align: center !important;
  gap: 8px !important;
}

/* Left Decorative Icon: 4-pointed sparkle star */
.breadcrumb__wrapper::before {
  content: '' !important;
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-block !important;
  width: 22px !important;
  height: 22px !important;
  background: url('../images/shapes/hero-star.svg') no-repeat center center / contain !important;
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)) !important;
  pointer-events: none !important;
}

/* Right Decorative Icon: 3-line wavy squiggle */
.breadcrumb__wrapper::after {
  content: '' !important;
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-block !important;
  width: 30px !important;
  height: 18px !important;
  background: url('../images/shapes/hero-wave.svg') no-repeat center center / contain !important;
  flex-shrink: 0 !important;
  opacity: 0.85 !important;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4)) !important;
  pointer-events: none !important;
}

/* Center Hero Title: bold, italic, uppercase, crisp white */
.breadcrumb .breadcrumb__title {
  margin: 0 !important;
  text-align: center !important;
  color: #ffffff !important;
  font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-weight: 800 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  font-size: clamp(1.35rem, 2.5vw, 1.95rem) !important;
  line-height: 1.2 !important;
  padding: 0 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

/* Sleek modern breadcrumb trail pill inside hero */
.breadcrumb .breadcrumb__list {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 4px 14px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.breadcrumb .breadcrumb__item {
  display: inline-flex !important;
  align-items: center !important;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.breadcrumb .breadcrumb__item::before,
.breadcrumb .breadcrumb__item::after {
  display: none !important;
}

.breadcrumb .breadcrumb__link {
  color: rgba(255, 255, 255, 0.82) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

.breadcrumb .breadcrumb__link:hover {
  color: #D4AF37 !important;
}

.breadcrumb .breadcrumb__link i {
  font-size: 13px !important;
  color: #D4AF37 !important;
}

.breadcrumb .breadcrumb__item i.fa-angle-right {
  font-size: 9px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin: 0 4px !important;
}

.breadcrumb .breadcrumb__item-text {
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Mobile responsive adjustments */
@media (max-width: 767.98px) {
  .breadcrumb,
  .breadcrumb.padding-y-120 {
    margin: 14px auto 22px auto !important;
  }
  .breadcrumb > .container {
    border-radius: 14px !important;
    min-height: 100px !important;
    padding: 16px 14px !important;
    width: calc(100% - 20px) !important;
  }
  .breadcrumb__wrapper {
    padding: 0 10px !important;
    gap: 6px !important;
  }
  .breadcrumb__wrapper::before,
  .breadcrumb__wrapper::after {
    display: none !important;
  }
  .breadcrumb .breadcrumb__title {
    font-size: clamp(1.15rem, 4.5vw, 1.5rem) !important;
    letter-spacing: 0.8px !important;
  }
  .breadcrumb .breadcrumb__list {
    padding: 3px 10px !important;
    gap: 4px !important;
  }
  .breadcrumb .breadcrumb__item {
    font-size: 11px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   20. EMPTY STATE SVG
───────────────────────────────────────────────────────────────────────── */
.mpd-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-10) var(--sp-6);
  gap: var(--sp-5);
}
.mpd-empty-state svg {
  width: 120px;
  height: 120px;
  opacity: 0.35;
}
.mpd-empty-state__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--mpd-ink);
}
.mpd-empty-state__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--mpd-muted);
  max-width: 380px;
}

/* ─────────────────────────────────────────────────────────────────────────
   21. CONTACT FORM PREMIUM UPGRADE
───────────────────────────────────────────────────────────────────────── */
.contact-9-wrapper {
  background: var(--mpd-white) !important;
  border: 1px solid var(--mpd-border) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-card) !important;
  padding: var(--sp-8) !important;
}
.contact-9-wrapper input,
.contact-9-wrapper textarea {
  border-radius: var(--r-sm) !important;
  border: 1.5px solid var(--mpd-border) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  transition: border-color var(--dur-sm) var(--ease-out),
              box-shadow var(--dur-sm) var(--ease-out) !important;
}
.contact-9-wrapper input:focus,
.contact-9-wrapper textarea:focus {
  border-color: var(--mpd-accent) !important;
  box-shadow: 0 0 0 3px rgba(42,98,254,0.08) !important;
  outline: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   22. FLOATING WHATSAPP BUTTON UPGRADE
───────────────────────────────────────────────────────────────────────── */
.floating-whatsapp-left {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   23. ACCORDION PREMIUM UPGRADE
───────────────────────────────────────────────────────────────────────── */
.about-9-accordion-item,
.accordion-item {
  border: 1px solid var(--mpd-border) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  margin-bottom: var(--sp-3) !important;
  transition: box-shadow var(--dur-md) var(--ease-out) !important;
}
.about-9-accordion-item:has(.show),
.accordion-item:has(.show) {
  box-shadow: 0 4px 20px rgba(28,62,138,0.08) !important;
  border-color: rgba(28,62,138,0.2) !important;
}
.about-9-accordion-button,
.accordion-button {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  gap: var(--sp-4) !important;
}
.about-9-accordion-button:not(.collapsed) {
  color: var(--mpd-primary) !important;
  background: rgba(28,62,138,0.03) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   24. PROJECT CARDS UPGRADE
───────────────────────────────────────────────────────────────────────── */
.project-9-thumb {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
}
.project-9-thumb img {
  transition: transform var(--dur-lg) var(--ease-out) !important;
}
.project-9-wrapper:hover .project-9-thumb img {
  transform: scale(1.04) !important;
}
.project-9-wrap-inner {
  border-radius: var(--r-md) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   25. PERFORMANCE — LAZY IMAGE BLUR-UP
───────────────────────────────────────────────────────────────────────── */
img[loading="lazy"] {
  transition: filter var(--dur-md) var(--ease-out);
}
img[loading="lazy"]:not(.loaded) {
  filter: blur(8px);
}
img[loading="lazy"].loaded {
  filter: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   26. SCROLL PROGRESS INDICATOR
───────────────────────────────────────────────────────────────────────── */
.mpd-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--mpd-accent), var(--mpd-gold));
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ─────────────────────────────────────────────────────────────────────────
   27. PAGE-SECTION DOT-GRID UTILITY
───────────────────────────────────────────────────────────────────────── */
.mpd-dot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(28,62,138,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  z-index: 0;
}
.mpd-dot-grid--light {
  background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
}

/* ─────────────────────────────────────────────────────────────────────────
   28. FOOTER UPGRADE (#1C2D37 BACKGROUND PALETTE)
───────────────────────────────────────────────────────────────────────── */
.footer {
  position: relative;
  background-color: #1C2D37 !important;
}
.bottom-footer {
  background-color: #15232C !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.footer-menu__link:hover,
.footer-link:hover,
.bottom-footer .footer-link:hover {
  color: #EEB54E !important;
}
.footer-menu__link::before {
  background: #EEB54E !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   29. GLOBAL UTILITIES
───────────────────────────────────────────────────────────────────────── */
.mpd-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--mpd-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mpd-divider::before,
.mpd-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--mpd-border);
}

/* Verified badge chip */
.mpd-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #16a34a;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 3px 8px;
  border-radius: var(--r-full);
}
.mpd-verified svg {
  width: 10px;
  height: 10px;
  stroke: #16a34a;
}

/* ─────────────────────────────────────────────────────────────────────────
   30. RESPONSIVE GLOBAL ADJUSTMENTS
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  :root {
    --sp-10: 96px;
    --sp-9:  72px;
  }
}
@media (max-width: 991px) {
  :root {
    --sp-10: 72px;
    --sp-9:  56px;
  }
  .mpd-journey { padding: var(--sp-9) 0; }
}
@media (max-width: 767px) {
  :root {
    --sp-10: 56px;
    --sp-9:  48px;
    --sp-8:  40px;
  }
  .contact-9-wrapper { padding: var(--sp-6) !important; }
}
@media (max-width: 575px) {
  .mpd-photo-stat { display: none; }
  .mpd-about-photo-frame::before,
  .mpd-about-photo-frame::after { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   31. UNIFIED HEADER, TOP BAR & MOBILE NAVIGATION PERFECTION
───────────────────────────────────────────────────────────────────────── */

/* --- Slim Top Bar --- */
.header-top {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 4px 0 !important;
  font-size: 12px !important;
  min-height: 28px !important;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 99;
}

.header-top .header-info__item {
  font-size: 12px !important;
  font-weight: 500;
  color: #4b5563;
  gap: 6px !important;
  line-height: 1.3 !important;
}

.header-top .header-info__item a {
  color: #1f2937;
  font-size: 12px !important;
  transition: color 0.2s ease;
}

.header-top .header-info__item a:hover {
  color: var(--mpd-primary, #0D7C66);
}

.header-top .header-info__icon {
  font-size: 11px !important;
  color: var(--mpd-primary, #0D7C66);
}

.header-top .email {
  font-size: 12px !important;
  color: #4b5563;
}

@media (max-width: 575.98px) {
  .header-top {
    padding: 3px 0 !important;
    min-height: 24px !important;
  }
  .header-top .header-info {
    width: 100%;
    justify-content: center;
    gap: 10px;
  }
  .header-top .header-info__item {
    font-size: 11.5px !important;
  }
}

/* --- Navbar (slightly taller, premium) --- */
.header {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  transition: all 0.25s ease;
  padding: 0 !important;
}

.header .header-inner {
  min-height: 62px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.header .logo {
  display: flex !important;
  align-items: center !important;
}

.header .logo img {
  max-height: 42px !important;
  width: auto;
  object-fit: contain;
  transition: max-height 0.2s ease;
}

/* Nav-menu base layout — desktop only (hidden on small screens < 992px) */
@media (min-width: 992px) {
  .header .nav-menu {
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }
}
@media (max-width: 991.98px) {
  .header .nav-menu:not(.nav-menu--mobile) {
    display: none !important;
  }
}

.header .nav-menu__link {
  font-size: 14.5px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.header .nav-menu__link:hover,
.header .nav-menu__item.activePage > .nav-menu__link {
  color: var(--mpd-primary, #1C3E8A) !important;
}

.header .has-submenu .nav-menu__link {
  padding-right: 18px !important;
}

.header .has-submenu > .nav-menu__link::before {
  right: 4px !important;
  font-size: 11px !important;
}

.header .header-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.header .header-right .btn {
  padding: 6px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  line-height: 1.4 !important;
}

.header .header-right .offcanvas-btn {
  padding: 4px !important;
  margin-right: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

.header .header-right .offcanvas-btn svg {
  width: 22px !important;
  height: 18px !important;
}

.header.fixed-header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important;
}

.header.fixed-header .nav-menu__link {
  padding: 15px 0 !important;
}

.header.fixed-header .header-inner {
  min-height: 58px !important;
}

@media (max-width: 991.98px) {
  .header {
    padding: 6px 0 !important;
  }
  .header .header-inner {
    min-height: 50px !important;
  }
  .header .logo img {
    max-height: 34px !important;
  }
}

/* ── Desktop Nav List: single big rounded border group (NO background on list items / tabs) ── */
.header .nav-menu {
  border: 1.5px solid rgba(28, 45, 55, 0.12) !important;
  border-radius: 50px !important;
  padding: 4px 14px !important;
  background: rgba(255, 255, 255, 0.90) !important;
  backdrop-filter: blur(8px) !important;
  gap: clamp(0.25rem, 0.8vw, 1.2rem) !important;
}

.header .nav-menu__item {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.header .nav-menu__link {
  padding: 8px 12px !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #1f2937 !important;
  transition: color 0.2s ease !important;
}

.header .nav-menu__link:hover,
.header .nav-menu__item.activePage > .nav-menu__link,
.header .nav-menu__item:hover > .nav-menu__link {
  background: transparent !important;
  box-shadow: none !important;
  color: #EEB54E !important;
}

/* ── Right Offcanvas Sidebar (#1C2D37 PALETTE) ── */
.common-offcanvas {
  position: fixed !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 390px !important;
  max-width: 90vw !important;
  height: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
  background-color: #1C2D37 !important;
  padding: 28px 26px 40px !important;
  z-index: 99999 !important; /* Critical: must sit above .side-overlay (99990) */
  box-shadow: -12px 0 45px rgba(0, 0, 0, 0.75) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  transform: translateX(110%) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 22px !important;
}

.common-offcanvas.active {
  transform: translateX(0) !important;
}

.common-offcanvas .close-button {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  width: 36px !important;
  height: 36px !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.common-offcanvas .close-button:hover {
  background: #c9993f !important;
  color: #060a10 !important;
  border-color: #c9993f !important;
  transform: rotate(90deg) !important;
}

.common-offcanvas .google-map {
  flex: 1 1 auto !important;
  min-height: 160px !important;
  max-height: 220px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.common-offcanvas .google-map iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 160px !important;
  border: none !important;
  border-radius: 10px !important;
  display: block !important;
}

.common-offcanvas .social-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.common-offcanvas .social-list__item {
  margin: 0 !important;
}

.common-offcanvas .social-list__link {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.common-offcanvas .social-list__link:hover {
  background: #EEB54E !important;
  border-color: #EEB54E !important;
  color: #0A1218 !important;
  transform: translateY(-2px) !important;
}

.common-offcanvas .mobile-menu__logo img {
  max-height: 38px !important;
  width: auto !important;
}

.common-offcanvas .search-box {
  margin-top: 0 !important;
}

.common-offcanvas .search-box form {
  position: relative !important;
}

.common-offcanvas .search-box .common-input {
  border-radius: 8px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  color: #fff !important;
  font-size: 14px !important;
  padding: 11px 44px 11px 16px !important;
  width: 100% !important;
  outline: none !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.common-offcanvas .search-box .common-input:focus {
  border-color: #c9993f !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.common-offcanvas .search-box .common-input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}

.common-offcanvas .search-box button.icon {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #EEB54E !important;
  font-size: 16px !important;
  cursor: pointer !important;
  padding: 0 !important;
}

.common-offcanvas .address-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.common-offcanvas .address-list__item {
  gap: 12px !important;
  margin-bottom: 18px !important;
  align-items: flex-start !important;
}

.common-offcanvas .address-list__icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #EEB54E !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  font-size: 15px !important;
  transition: all 0.25s ease !important;
}

.common-offcanvas .address-list__item:hover .address-list__icon {
  background: rgba(201, 153, 63, 0.25) !important;
  border-color: #c9993f !important;
  color: #ffffff !important;
  transform: scale(1.06) !important;
}

.common-offcanvas .address-list__text,
.common-offcanvas .address-list__text a {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  word-break: break-word !important;
}

.common-offcanvas .address-list__text a:hover {
  color: #EEB54E !important;
}

/* Side overlay: shared between mobile menu and offcanvas */
.side-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(6, 10, 16, 0.78) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 99990 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.side-overlay.show {
  opacity: 1 !important;
  pointer-events: all !important;
}

/* Ensure mobile-menu stays above overlay but below offcanvas */
.mobile-menu {
  z-index: 1055 !important;
}

/* Hamburger button with accessible tap target (mobile/tablet only) */
@media (max-width: 991.98px) {
  .toggle-mobileMenu {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
  }

  .toggle-mobileMenu:hover,
  .toggle-mobileMenu:focus {
    background: rgba(0, 0, 0, 0.04);
    color: var(--mpd-primary, #0D7C66);
    border-color: var(--mpd-primary, #0D7C66);
  }
}

@media (min-width: 992px) {
  .toggle-mobileMenu {
    display: none !important;
  }
}

/* --- Mobile Drawer Navigation (#1C2D37 PALETTE) --- */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  max-width: 86vw;
  height: 100vh;
  background-color: #1C2D37 !important;
  color: #ffffff;
  z-index: 1050;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 24px 20px 80px;
  box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-menu.active {
  transform: translateX(0);
}

.side-overlay {
  z-index: 1040;
}

.mobile-menu .close-button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.mobile-menu .close-button:hover,
.mobile-menu .close-button:focus {
  background-color: #EEB54E;
  color: #0A1218;
}

.mobile-menu__logo {
  display: inline-block;
  margin-bottom: 20px;
}

.mobile-menu__logo img {
  max-height: 44px;
  width: auto;
}

.nav-menu--mobile {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nav-menu--mobile .nav-menu__item {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-menu--mobile .nav-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 4px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff !important;
  text-decoration: none;
  transition: color 0.2s ease;
  background: transparent !important;
}

.nav-menu--mobile .nav-menu__item.activePage > .nav-menu__link,
.nav-menu--mobile .nav-menu__link:hover {
  color: #EEB54E !important;
  background: transparent !important;
}

/* Submenu dropdown inside mobile drawer */
.nav-menu--mobile .has-submenu > .nav-menu__link::after {
  content: '\f107';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 12px;
  color: #9ca3af;
  transition: transform 0.25s ease, color 0.2s ease;
}

.nav-menu--mobile .has-submenu.active > .nav-menu__link::after {
  transform: rotate(180deg);
  color: var(--mpd-primary, #0D7C66);
}

.nav-menu--mobile .nav-submenu {
  display: none;
  padding: 4px 0 8px 16px;
  list-style: none;
  background: #f9fafb;
  border-radius: 6px;
  margin: 0 0 8px 0;
}

.nav-menu--mobile .nav-submenu__item {
  padding: 0;
}

.nav-menu--mobile .nav-submenu__link {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.nav-menu--mobile .nav-submenu__link:hover {
  color: var(--mpd-primary, #0D7C66);
  background-color: rgba(13, 124, 102, 0.08);
}

/* ─────────────────────────────────────────────────────────────────────────
   HERO BANNER (100% FULLY VISIBLE BANNER GRAPHIC ACROSS ALL SCREEN SIZES)
   - Zero cropping: all images (pool villa, lounge, cottage) 100% visible
   - Natural aspect-ratio preservation (768:375 = ~2.048:1)
   - Action buttons seamlessly positioned without obscuring typography
───────────────────────────────────────────────────────────────────────── */
.mpd-hero-banner {
  position: relative;
  background-color: #060a10;
  width: 100%;
  overflow: visible;
  padding: 0;
  margin: 0;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.mpd-hero-media {
  position: relative;
  width: 100%;
  display: block;
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Subtle luxury bottom shade for maximum button contrast on the image (desktop/tablet) */
.mpd-hero-media::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 28%;
  background: linear-gradient(to top, rgba(6, 10, 16, 0.70) 0%, rgba(6, 10, 16, 0.15) 60%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.mpd-hero-img-full {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  object-fit: contain !important;
  object-position: center center !important;
  aspect-ratio: 768 / 375;
  image-rendering: -webkit-optimize-contrast;
}

/* Action Bar Overlaid on the hero — default desktop */
.mpd-hero-btn-bar {
  position: absolute !important;
  bottom: 34px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

/* Find Properties Button */
.mpd-hero-btn-bar .home-9-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 30px !important;
  border-radius: 50px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  background: linear-gradient(135deg, #c9993f 0%, #dfb56c 50%, #b8862d 100%) !important;
  color: #060a10 !important;
  box-shadow: 0 8px 25px rgba(201, 153, 63, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mpd-hero-btn-bar .home-9-btn:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(201, 153, 63, 0.65), 0 4px 10px rgba(0, 0, 0, 0.4) !important;
  color: #000000 !important;
}

.mpd-hero-btn-bar .header-9-call-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: 0 !important;
  padding: 7px 22px 7px 8px !important;
  background: rgba(14, 23, 38, 0.85) !important;
  border: 1px solid rgba(201, 153, 63, 0.45) !important;
  border-radius: 50px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Remove vertical line / separator at left of WhatsApp button */
.mpd-hero-btn-bar .header-9-call-item::before,
.mpd-hero-btn-bar .header-9-call-item::after,
[dir=rtl] .mpd-hero-btn-bar .header-9-call-item::before,
[dir=rtl] .mpd-hero-btn-bar .header-9-call-item::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  border: none !important;
}

.mpd-hero-btn-bar .header-9-call-item:hover {
  background: rgba(20, 32, 54, 0.95) !important;
  border-color: rgba(201, 153, 63, 0.8) !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.65), 0 0 16px rgba(201, 153, 63, 0.3) !important;
}

.mpd-hero-btn-bar .header-9-call-icon a {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.45) !important;
  transition: transform 0.3s ease !important;
}

.mpd-hero-btn-bar .header-9-call-item:hover .header-9-call-icon a {
  transform: scale(1.08) !important;
}

.mpd-hero-btn-bar .header-9-call-number span {
  display: block !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: rgba(255, 255, 255, 0.7) !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
}

.mpd-hero-btn-bar .header-9-call-number a {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  letter-spacing: 0.01em !important;
}

/* Breakpoint-specific fine tuning for buttons & positioning */
@media (min-width: 1400px) {
  .mpd-hero-btn-bar {
    bottom: 44px !important;
    gap: 24px !important;
  }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  .mpd-hero-btn-bar {
    bottom: 34px !important;
    gap: 18px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .mpd-hero-btn-bar {
    bottom: 18px !important;
    gap: 14px !important;
    padding: 0 16px !important;
  }
  .mpd-hero-btn-bar .home-9-btn {
    padding: 10px 20px !important;
    font-size: 13.5px !important;
  }
  .mpd-hero-btn-bar .header-9-call-item {
    padding: 5px 16px 5px 6px !important;
  }
}

/* Mobile & Small Tablets (< 768px):
   Seamless placement below the banner on matching #060a10 background.
   Ensures hero image text & photos remain 100% visible and uncropped,
   while buttons are prominent and easily clickable on the very first screen look. */
@media (max-width: 767.98px) {
  .mpd-hero-media::after {
    display: none !important;
  }
  .mpd-hero-btn-bar {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    background: #060a10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 10px 14px 20px !important;
    margin: 0 !important;
    margin-top: -4px !important;
    z-index: 10 !important;
  }
  .mpd-hero-btn-bar .home-9-btn {
    padding: 9px 18px !important;
    font-size: 13px !important;
    border-radius: 50px !important;
    white-space: nowrap !important;
    gap: 8px !important;
  }
  .mpd-hero-btn-bar .home-9-btn span img {
    width: 14px !important;
  }
  .mpd-hero-btn-bar .header-9-call-item {
    padding: 5px 14px 5px 6px !important;
    border-radius: 50px !important;
    white-space: nowrap !important;
    gap: 8px !important;
  }
  .mpd-hero-btn-bar .header-9-call-icon a {
    width: 32px !important;
    height: 32px !important;
    font-size: 15px !important;
  }
  .mpd-hero-btn-bar .header-9-call-number a {
    font-size: 12.5px !important;
  }
  .mpd-hero-btn-bar .header-9-call-number span {
    font-size: 9.5px !important;
  }
}

@media (max-width: 480px) {
  .mpd-hero-btn-bar {
    gap: 8px !important;
    padding: 8px 10px 18px !important;
  }
  .mpd-hero-btn-bar .home-9-btn {
    padding: 8px 15px !important;
    font-size: 12px !important;
  }
  .mpd-hero-btn-bar .header-9-call-item {
    padding: 4px 12px 4px 5px !important;
  }
  .mpd-hero-btn-bar .header-9-call-icon a {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  .mpd-hero-btn-bar .header-9-call-number a {
    font-size: 11.5px !important;
  }
  .mpd-hero-btn-bar .header-9-call-number span {
    font-size: 8.5px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLL TO TOP (SHIFTED TO LEFT-BOTTOM CORNER)
───────────────────────────────────────────────────────────────────────── */
.progress-wrap {
  left: 32px !important;
  right: auto !important;
  bottom: 32px !important;
  z-index: 9990 !important;
}

@media screen and (max-width: 991px) {
  .progress-wrap {
    left: 20px !important;
    right: auto !important;
    bottom: 20px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   FLOATING ROUNDED WHATSAPP (RIGHT-BOTTOM CORNER WITH VIBRATING ANIMATION)
───────────────────────────────────────────────────────────────────────── */
.mpd-floating-whatsapp {
  position: fixed !important;
  right: 32px !important;
  bottom: 32px !important;
  z-index: 9999 !important;
  display: block !important;
}

.mpd-whatsapp-fab {
  position: relative !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45), 0 3px 10px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease !important;
}

.mpd-whatsapp-fab:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.65), 0 4px 14px rgba(0, 0, 0, 0.35) !important;
  color: #ffffff !important;
}

/* Subtle expanding radar pulse ring */
.mpd-whatsapp-radar {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.7);
  animation: mpd-wa-radar 2.8s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  pointer-events: none;
}

@keyframes mpd-wa-radar {
  0% {
    transform: scale(0.92);
    opacity: 0.9;
  }
  60% {
    transform: scale(1.45);
    opacity: 0;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

/* WhatsApp Icon with Authentic Phone Vibration Keyframes */
.mpd-whatsapp-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 30px !important;
  line-height: 1 !important;
  color: #ffffff !important;
  transform-origin: center center !important;
  animation: mpd-wa-vibrate 3.2s ease-in-out infinite !important;
}

.mpd-whatsapp-fab:hover .mpd-whatsapp-icon {
  animation: none !important;
  transform: scale(1.08) !important;
}

/* Eye-Catching Phone Vibration Alert */
@keyframes mpd-wa-vibrate {
  0% {
    transform: scale(1) rotate(0deg);
  }
  2% {
    transform: scale(1.12) rotate(14deg);
  }
  4% {
    transform: scale(1.12) rotate(-14deg);
  }
  6% {
    transform: scale(1.12) rotate(12deg);
  }
  8% {
    transform: scale(1.12) rotate(-12deg);
  }
  10% {
    transform: scale(1.12) rotate(8deg);
  }
  12% {
    transform: scale(1.12) rotate(-8deg);
  }
  14% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Online notification badge */
.mpd-whatsapp-badge {
  position: absolute !important;
  top: -2px !important;
  right: -2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #ff3b30 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Sleek Tooltip Popup on Hover */
.mpd-whatsapp-popup {
  position: absolute !important;
  right: calc(100% + 14px) !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(8px) !important;
  background: #0e1726 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.mpd-whatsapp-popup::after {
  content: "" !important;
  position: absolute !important;
  left: 100% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-width: 6px !important;
  border-style: solid !important;
  border-color: transparent transparent transparent #0e1726 !important;
}

.mpd-whatsapp-popup__title {
  display: block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}

.mpd-whatsapp-popup__desc {
  display: block !important;
  font-size: 11px !important;
  color: #25D366 !important;
  font-weight: 500 !important;
  margin-top: 2px !important;
}

.mpd-whatsapp-fab:hover .mpd-whatsapp-popup {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(-50%) translateX(0) !important;
}

@media screen and (max-width: 991px) {
  .mpd-floating-whatsapp {
    right: 20px !important;
    bottom: 20px !important;
  }
  .mpd-whatsapp-fab {
    width: 48px !important;
    height: 48px !important;
  }
  .mpd-whatsapp-icon {
    font-size: 26px !important;
  }
  .mpd-whatsapp-popup {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mpd-whatsapp-icon,
  .mpd-whatsapp-radar {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   32. MASTER THEME HARMONIZATION: #1C2D37 (BG) & #EEB54E (HOVER / ACCENTS)
───────────────────────────────────────────────────────────────────────── */

/* 1. Global Smooth Scroll Architecture */
html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 85px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* 2. Total Replacement of Legacy Orange Gradients with #EEB54E */
.text-gradient,
.input-images .upload-text:hover i,
.contact-card__text .link:hover,
.project-page-content__title .link:hover,
.blog-keyword__link:hover,
.blog-nextPrev__button:hover,
.working-process-item__link:hover,
.social-share__button.active i,
.social-share__button:hover i,
.contact-content__contact:hover,
.text-list__item .link:hover,
.blog-item__title-link:hover,
.testimonial-item.style-four .testimonial-item__quote,
.portfolio-item__title .link:hover,
.simple-btn:hover,
.property-item__title .link:hover,
.star-rating__item,
.slick-arrow > i,
.social-list__link:hover,
.footer-menu__link::before,
.footer-contact__link:hover,
.contact-number:hover .text,
.side-tab .nav-link:hover,
.common-tab.style-outline .nav-item .nav-link.active .text,
.common-tab.style-two .nav-item .nav-link.active .text,
.select-has-icon::before {
  background: linear-gradient(90deg, #EEB54E 0%, #F5CE7A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.bg--gradient,
.btn--gradient,
.badge--gradient {
  background: #EEB54E !important;
  background: linear-gradient(90deg, #EEB54E 0%, #D49C36 100%) !important;
}

/* 3. Universal Hover Color #EEB54E (Replaces orange hover states) */
a:hover,
.link:hover,
.breadcrumb__item a:hover,
.property-item__title a:hover,
.project-item__title a:hover,
.service-9-item__title a:hover,
.blog-item__title a:hover,
.footer-menu__link:hover,
.footer-link:hover,
.address-list__content a:hover,
.header-info__item a:hover {
  color: #EEB54E !important;
}

/* Button & Interactive Elements Hover */
.btn-main:hover,
.btn--gradient:hover,
.home-9-btn:hover {
  background: #EEB54E !important;
  border-color: #EEB54E !important;
  color: #0A1218 !important;
}

.btn-outline-light:hover {
  background: #EEB54E !important;
  border-color: #EEB54E !important;
  color: #0A1218 !important;
}

.btn-outline-light:hover .text-gradient,
.btn-outline-light:hover .icon,
.btn-outline-light:hover i {
  -webkit-text-fill-color: #0A1218 !important;
  color: #0A1218 !important;
}

.h9-hover-btn-circle-dot {
  background: #EEB54E !important;
}

.slick-arrow:hover,
.prev-btn:hover,
.next-btn:hover {
  background: #EEB54E !important;
  border-color: #EEB54E !important;
  color: #0A1218 !important;
}
.slick-arrow:hover i {
  color: #0A1218 !important;
  -webkit-text-fill-color: #0A1218 !important;
}

/* 4. Strict Navigation Rule: NO Background on List Item Tabs */
.header .nav-menu__item,
.header .nav-menu__link,
.header .nav-menu__item.activePage > .nav-menu__link,
.header .nav-menu__item:hover > .nav-menu__link,
.header .nav-menu__link:hover,
.header .nav-menu__link:focus,
.dark-header .header .nav-menu__item,
.dark-header .header .nav-menu__link,
.dark-header .header .nav-menu__item.activePage > .nav-menu__link,
.dark-header .header .nav-menu__item:hover > .nav-menu__link,
.dark-header .header .nav-menu__link:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.header .nav-menu__link:hover,
.header .nav-menu__item.activePage > .nav-menu__link,
.dark-header .header .nav-menu__link:hover,
.dark-header .header .nav-menu__item.activePage > .nav-menu__link {
  color: #EEB54E !important;
}

/* 5. Scroll-To-Top Button (#EEB54E Gold Accent) */
.progress-wrap::after {
  color: #EEB54E !important;
}
.progress-wrap svg.progress-circle path {
  stroke: #EEB54E !important;
}
.progress-wrap:hover {
  border-color: #EEB54E !important;
  box-shadow: 0 6px 20px rgba(238, 181, 78, 0.4) !important;
  transform: scale(1.08) !important;
}

/* =========================================================================
   6. HARMONIOUS SECTION RHYTHM & EVEN SPACING SYSTEM (WORLD BEST PRACTICE)
   Strict visual rhythm: Eliminates bloated 200px+ inter-section dead zones
   Tuned for balanced, modern luxury real estate presentation
   ========================================================================= */

/* Master Section Vertical Spacing - Uniform across all pages and components */
.padding-y-120,
.padding-y-110 {
  padding-top: var(--mpd-section-py) !important;
  padding-bottom: var(--mpd-section-py) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.padding-y-60 {
  padding-top: clamp(26px, 3vw, 40px) !important;
  padding-bottom: clamp(26px, 3vw, 40px) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.padding-b-120,
.padding-b-110 {
  padding-bottom: var(--mpd-section-py) !important;
  margin-bottom: 0 !important;
}

.padding-t-120,
.padding-t-110 {
  padding-top: var(--mpd-section-py) !important;
  margin-top: 0 !important;
}

.padding-b-60 {
  padding-bottom: clamp(26px, 3vw, 40px) !important;
}

/* Reset all main section margins to eliminate accidental double-spacing or overlap */
.feature-9-area,
.service-9-area,
.about-9-area,
.apartment-9-area,
.project-9-area,
.building-9-area,
.contact-9-area {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Section Headers: Standardized Balanced Bottom Margin */
.section-9-wrapper,
.section-heading,
.section-header,
.mpd-testi-section__header,
.mpd-stats .text-center {
  margin-bottom: var(--mpd-section-gap) !important;
}

/* Subtitle to Heading Rhythm */
.section-9-subtitle,
.section-heading__subtitle,
.mpd-section-label {
  margin-bottom: 8px !important;
}

/* Section Titles: Comfortable, Elegant Line Height & Balanced Flow */
.section-9-title,
.section-heading__title,
.mpd-heading {
  line-height: 1.22 !important;
  margin-bottom: 0 !important;
}

/* Title Paragraphs */
.section-9-paragraph,
.section-heading__desc,
.feature-9-top-paragraph {
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  line-height: 1.65 !important;
}

/* Smooth Transition for Dark Sections */
.h9-bg-secondary,
.mpd-stats,
.mpd-testi-section,
.footer {
  background-color: #1C2D37 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 33: FORCED COLOR OVERRIDE — Kill all remaining orange tones
   Covers any element that still resolves through hsl(var(--main)) or legacy refs
═══════════════════════════════════════════════════════════════════════════ */
.text-main,
.h9-text-primary,
.icon-text-main,
a.text-main,
span.text-main {
  color: #EEB54E !important;
}

.bg-main,
.icon-bg-main {
  background-color: #EEB54E !important;
}

.border-main {
  border-color: #EEB54E !important;
}

.btn-main,
.btn-outline-main:hover,
button.btn-main {
  background: linear-gradient(90deg, #EEB54E 0%, #D49C36 100%) !important;
  border-color: #EEB54E !important;
  color: #0D1321 !important;
  font-weight: 700 !important;
}

.btn-outline-main {
  border-color: #EEB54E !important;
  color: #EEB54E !important;
}

/* Force gradient text using the correct gold */
.text-gradient,
.gradient-text {
  background: linear-gradient(90deg, #EEB54E 0%, #F5CE7A 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 34: PILL DESIGN SYSTEM — Shared Components
   Premium pill-shaped card components for about, contact, add-listing pages
═══════════════════════════════════════════════════════════════════════════ */

/* ── Pill Section Label ── */
.mpd-pill-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(238, 181, 78, 0.12);
  border: 1px solid rgba(238, 181, 78, 0.3);
  color: #EEB54E;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 20px;
  border-radius: 9999px;
  margin-bottom: 20px;
}

/* ── Generic Pill Card ── */
.mpd-pill-card {
  background: #ffffff;
  border: 1px solid rgba(28, 45, 55, 0.08);
  border-radius: 28px;
  padding: 36px 32px;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium);
}

.mpd-pill-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* Dark pill card */
.mpd-pill-card--dark {
  background: #1C2D37;
  border-color: rgba(238, 181, 78, 0.15);
  color: #ffffff;
}

/* ── Pill Icon Badge ── */
.mpd-pill-icon {
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  background: rgba(238, 181, 78, 0.12);
  border: 1px solid rgba(238, 181, 78, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #EEB54E;
  flex-shrink: 0;
  margin-bottom: 20px;
  transition: background 0.25s ease, color 0.25s ease;
}

.mpd-pill-card:hover .mpd-pill-icon,
.mpd-pill-card--dark .mpd-pill-icon {
  background: #EEB54E;
  color: #0D1321;
}

/* ── Step Number Badge (for add-listing) ── */
.mpd-step-badge {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #EEB54E 0%, #D49C36 100%);
  color: #0D1321;
  font-weight: 800;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(238, 181, 78, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 35: ABOUT PAGE — Pill Revamp Components
═══════════════════════════════════════════════════════════════════════════ */

/* About Section Wrapper */
.mpd-about-section {
  background: var(--mpd-surface);
  padding: clamp(60px, 6vw, 100px) 0;
}

/* About Image Pill Frame */
.mpd-about-img-wrap {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}

.mpd-about-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 32px;
}

/* Stat pill overlaid on image */
.mpd-about-stat-pill {
  position: absolute;
  bottom: 28px;
  right: -20px;
  background: #1C2D37;
  color: #fff;
  padding: 16px 28px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(13,18,33,0.35);
  border: 2px solid rgba(238,181,78,0.4);
  min-width: 200px;
}

.mpd-about-stat-pill__number {
  font-size: 32px;
  font-weight: 800;
  font-family: var(--font-heading);
  color: #EEB54E;
  line-height: 1;
}

.mpd-about-stat-pill__label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  line-height: 1.3;
}

/* Check list pill items */
.mpd-check-pill {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}

.mpd-check-pill__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(28, 45, 55, 0.05);
  border: 1px solid rgba(28, 45, 55, 0.1);
  border-radius: 9999px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #1C2D37;
  transition: all 0.2s ease;
}

.mpd-check-pill__item:hover {
  background: #1C2D37;
  color: #ffffff;
  border-color: #1C2D37;
}

.mpd-check-pill__item i {
  color: #EEB54E;
  font-size: 13px;
  flex-shrink: 0;
}

.mpd-check-pill__item:hover i {
  color: #EEB54E;
}

/* Property Type Pill Cards */
.mpd-ptype-section {
  background: #ffffff;
  padding: clamp(50px, 5vw, 80px) 0;
}

.mpd-ptype-pill {
  background: #1C2D37;
  border-radius: 24px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s var(--ease-premium);
  border: 1px solid rgba(238,181,78,0.12);
  height: 100%;
}

.mpd-ptype-pill:hover {
  background: #0D1B23;
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(13,18,33,0.3);
  border-color: rgba(238,181,78,0.35);
}

.mpd-ptype-pill__icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: rgba(238, 181, 78, 0.12);
  border: 1px solid rgba(238, 181, 78, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mpd-ptype-pill__icon-wrap img {
  width: 26px;
  height: 26px;
  filter: brightness(0) invert(1);
}

.mpd-ptype-pill__title {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-heading);
  margin: 0;
}

.mpd-ptype-pill__desc {
  font-size: 14px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin: 0;
}

.mpd-ptype-pill__link {
  color: #EEB54E !important;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-top: auto;
  transition: gap 0.2s ease;
}

.mpd-ptype-pill__link:hover {
  gap: 10px;
  -webkit-text-fill-color: #EEB54E !important;
}

/* Team Section */
.mpd-team-section {
  background: var(--mpd-surface);
  padding: clamp(60px, 6vw, 100px) 0;
}

.mpd-team-pill {
  border-radius: 28px;
  overflow: hidden;
  background: #1C2D37;
  box-shadow: var(--shadow-card);
  transition: all 0.35s var(--ease-premium);
  position: relative;
}

.mpd-team-pill:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(13,18,33,0.28);
}

.mpd-team-pill__img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: top;
  display: block;
}

.mpd-team-pill__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,27,35,0.92) 0%, transparent 55%);
}

.mpd-team-pill__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 24px 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.mpd-team-pill__name {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-heading);
  margin: 0 0 2px;
}

.mpd-team-pill__role {
  font-size: 12px;
  font-weight: 500;
  color: #EEB54E;
  margin: 0;
}

.mpd-team-pill__socials {
  display: flex;
  gap: 6px;
}

.mpd-team-pill__social-btn {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: rgba(238,181,78,0.15);
  border: 1px solid rgba(238,181,78,0.3);
  color: #EEB54E;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.mpd-team-pill__social-btn:hover {
  background: #EEB54E;
  color: #0D1321;
  border-color: #EEB54E;
}

/* CTA Newsletter Pill */
.mpd-cta-pill-section {
  padding: clamp(60px, 6vw, 100px) 0;
  background: #ffffff;
}

.mpd-cta-pill-box {
  background: #1C2D37;
  border-radius: 32px;
  padding: clamp(40px, 5vw, 64px);
  display: flex;
  align-items: center;
  gap: 48px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(238,181,78,0.2);
}

.mpd-cta-pill-box::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(238,181,78,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.mpd-cta-pill-content {
  flex: 1;
  position: relative;
  z-index: 1;
}

.mpd-cta-pill-content h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-heading);
  margin-bottom: 12px;
  line-height: 1.2;
}

.mpd-cta-pill-content p {
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 28px;
  max-width: 460px;
}

.mpd-cta-pill-form {
  display: flex;
  gap: 8px;
  max-width: 500px;
}

.mpd-cta-pill-input {
  flex: 1;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  border-radius: 9999px !important;
  padding: 14px 24px !important;
  color: #ffffff !important;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.mpd-cta-pill-input::placeholder {
  color: rgba(255,255,255,0.4);
}

.mpd-cta-pill-input:focus {
  border-color: rgba(238,181,78,0.5) !important;
  box-shadow: none;
}

.mpd-cta-pill-btn {
  background: linear-gradient(90deg, #EEB54E 0%, #D49C36 100%) !important;
  color: #0D1321 !important;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 9999px !important;
  padding: 14px 28px !important;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mpd-cta-pill-btn:hover {
  box-shadow: 0 6px 20px rgba(238,181,78,0.5);
  transform: translateY(-1px);
}

.mpd-cta-pill-img {
  flex-shrink: 0;
  width: 220px;
  position: relative;
  z-index: 1;
}

@media (max-width: 991px) {
  .mpd-cta-pill-img { display: none; }
  .mpd-cta-pill-box { gap: 32px; }
}

@media (max-width: 640px) {
  .mpd-cta-pill-form { flex-direction: column; }
  .mpd-cta-pill-btn { width: 100%; text-align: center; }
  .mpd-about-stat-pill { right: 0; bottom: 16px; min-width: 170px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 36: CONTACT PAGE — Pill Revamp Components
═══════════════════════════════════════════════════════════════════════════ */

/* Contact info pill cards */
.mpd-contact-section {
  padding: clamp(60px, 6vw, 100px) 0;
  background: var(--mpd-surface);
}

.mpd-contact-pill-card {
  background: #1C2D37;
  border-radius: 9999px;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(238, 181, 78, 0.18);
  transition: all 0.3s var(--ease-premium);
  text-decoration: none;
  height: 100%;
}

.mpd-contact-pill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(13,18,33,0.25);
  border-color: rgba(238, 181, 78, 0.4);
}

.mpd-contact-pill-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: rgba(238, 181, 78, 0.14);
  border: 1px solid rgba(238, 181, 78, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #EEB54E;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.mpd-contact-pill-card:hover .mpd-contact-pill-card__icon {
  background: #EEB54E;
  color: #0D1321;
}

.mpd-contact-pill-card__body {}

.mpd-contact-pill-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 2px;
  display: block;
}

.mpd-contact-pill-card__value {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  text-decoration: none;
  display: block;
  line-height: 1.4;
}

.mpd-contact-pill-card__value a {
  color: #ffffff !important;
  text-decoration: none;
}

.mpd-contact-pill-card__value a:hover {
  color: #EEB54E !important;
}

/* Map wrapper */
.mpd-map-pill {
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin: 0 0 clamp(40px, 5vw, 80px);
}

.mpd-map-pill iframe {
  width: 100%;
  height: 380px;
  display: block;
  border: none;
}

/* Compact Pill Contact Form */
.mpd-contact-form-section {
  padding: 0 0 clamp(60px, 6vw, 100px);
  background: var(--mpd-surface);
}

.mpd-contact-form-wrap {
  max-width: 680px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 36px;
  padding: clamp(36px, 5vw, 56px);
  box-shadow: 0 12px 48px rgba(13,18,33,0.1);
  border: 1px solid rgba(28,45,55,0.06);
}

.mpd-contact-form-header {
  text-align: center;
  margin-bottom: 32px;
}

.mpd-contact-form-header h2 {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 800;
  font-family: var(--font-heading);
  color: #1C2D37;
  margin-bottom: 8px;
}

.mpd-contact-form-header p {
  font-size: 14px;
  color: #637381;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Pill Inputs */
.mpd-pill-input {
  width: 100%;
  background: var(--mpd-surface) !important;
  border: 1.5px solid rgba(28,45,55,0.1) !important;
  border-radius: 9999px !important;
  padding: 13px 22px !important;
  font-size: 14px !important;
  color: #1C2D37 !important;
  font-family: var(--font-body) !important;
  outline: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: none !important;
  appearance: none;
}

.mpd-pill-input:focus {
  border-color: #EEB54E !important;
  box-shadow: 0 0 0 3px rgba(238,181,78,0.15) !important;
  background: #ffffff !important;
}

.mpd-pill-input::placeholder {
  color: #9CA3AF !important;
}

/* Textarea keeps rect with large radius */
textarea.mpd-pill-input {
  border-radius: 20px !important;
  padding: 14px 22px !important;
  resize: vertical;
  min-height: 110px;
}

.mpd-pill-form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1C2D37;
  margin-bottom: 7px;
}

.mpd-form-group {
  margin-bottom: 18px;
}

/* Pill Submit Button */
.mpd-pill-submit-btn {
  width: 100%;
  background: linear-gradient(90deg, #EEB54E 0%, #D49C36 100%) !important;
  color: #0D1321 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.04em;
  border: none !important;
  border-radius: 9999px !important;
  padding: 16px 32px !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body) !important;
  margin-top: 8px;
}

.mpd-pill-submit-btn:hover {
  box-shadow: 0 8px 28px rgba(238,181,78,0.5) !important;
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 37: ADD-LISTING PAGE — Pill Step Cards
═══════════════════════════════════════════════════════════════════════════ */

.mpd-listing-section {
  background: var(--mpd-surface);
  padding: clamp(60px, 6vw, 100px) 0;
}

/* Sticky Sidebar Step Nav */
.mpd-listing-nav {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 20px;
  border: 1px solid rgba(28,45,55,0.07);
  box-shadow: var(--shadow-card);
}

.mpd-listing-nav__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #637381;
  padding: 0 8px;
  margin-bottom: 16px;
}

.mpd-listing-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mpd-listing-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 9999px;
  text-decoration: none;
  color: #637381;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.mpd-listing-nav__link:hover {
  background: rgba(28,45,55,0.05);
  color: #1C2D37;
}

.mpd-listing-nav__link.active {
  background: #1C2D37;
  color: #EEB54E;
}

.mpd-listing-nav__link .mpd-nav-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: currentColor;
  flex-shrink: 0;
}

/* Step Card */
.mpd-listing-step-card {
  background: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(28,45,55,0.07);
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}

.mpd-listing-step-header {
  background: #1C2D37;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mpd-listing-step-header h6 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-heading);
}

.mpd-listing-step-header .mpd-step-badge {
  flex-shrink: 0;
}

.mpd-listing-step-body {
  padding: 28px;
}

/* Pill Inputs inside listing form */
.mpd-listing-step-body .common-input,
.mpd-listing-step-body select.common-input,
.mpd-listing-step-body textarea.common-input {
  border-radius: 9999px !important;
  border: 1.5px solid rgba(28,45,55,0.12) !important;
  padding: 12px 20px !important;
  font-size: 14px !important;
  background: var(--mpd-surface) !important;
  color: #1C2D37 !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.mpd-listing-step-body textarea.common-input {
  border-radius: 20px !important;
  min-height: 110px;
}

.mpd-listing-step-body .common-input:focus,
.mpd-listing-step-body select.common-input:focus,
.mpd-listing-step-body textarea.common-input:focus {
  border-color: #EEB54E !important;
  box-shadow: 0 0 0 3px rgba(238,181,78,0.15) !important;
  background: #ffffff !important;
  outline: none !important;
}

/* Image Upload Pill Zone */
.mpd-upload-pill-zone {
  border: 2px dashed rgba(238,181,78,0.4);
  border-radius: 24px;
  padding: 40px 28px;
  text-align: center;
  background: rgba(238,181,78,0.03);
  transition: all 0.25s ease;
}

.mpd-upload-pill-zone:hover {
  border-color: #EEB54E;
  background: rgba(238,181,78,0.07);
}

.mpd-upload-pill-zone i {
  font-size: 40px;
  color: #EEB54E;
  display: block;
  margin-bottom: 12px;
}

.mpd-upload-pill-zone h6 {
  font-size: 16px;
  font-weight: 700;
  color: #1C2D37;
  margin-bottom: 6px;
}

.mpd-upload-pill-zone p {
  font-size: 13px;
  color: #637381;
  margin-bottom: 16px;
}

.mpd-upload-pill-zone input[type="file"] {
  border-radius: 9999px !important;
  border: 1.5px solid rgba(28,45,55,0.12) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  background: #ffffff !important;
}

/* Amenities checkbox pills */
.mpd-amenity-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 9999px;
  border: 1.5px solid rgba(28,45,55,0.1);
  background: var(--mpd-surface);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.mpd-amenity-pill input[type="checkbox"] {
  accent-color: #EEB54E;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.mpd-amenity-pill label {
  font-size: 13px;
  font-weight: 600;
  color: #1C2D37;
  cursor: pointer;
  margin: 0;
}

.mpd-amenity-pill:has(input:checked) {
  background: #1C2D37;
  border-color: #1C2D37;
}

.mpd-amenity-pill:has(input:checked) label {
  color: #EEB54E;
}

/* Listing submit button */
.mpd-listing-submit-btn {
  width: 100%;
  background: linear-gradient(90deg, #EEB54E 0%, #D49C36 100%) !important;
  color: #0D1321 !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 18px 32px !important;
  cursor: pointer;
  transition: all 0.3s ease !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body) !important;
  box-shadow: 0 6px 20px rgba(238,181,78,0.3) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mpd-listing-submit-btn:hover {
  box-shadow: 0 12px 36px rgba(238,181,78,0.55) !important;
  transform: translateY(-3px) !important;
}

/* form-label inside listing steps */
.mpd-listing-step-body .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #1C2D37;
  margin-bottom: 7px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 35: REVAMPED SLIM PILL-SHAPED FOOTER & SOCIAL CAPSULES
═══════════════════════════════════════════════════════════════════════════ */
/* Remove legacy bottom footer bar completely across the entire website */
.bottom-footer {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   1. Slim Pill-Shaped Floating Island Footer
───────────────────────────────────────────────────────────────────────── */
.footer.mpd-footer-compact,
.footer.padding-y-120 {
  max-width: 1400px !important;
  width: calc(100% - clamp(24px, 4vw, 56px)) !important;
  margin: 0 auto clamp(24px, 3.5vw, 42px) auto !important;
  border-radius: clamp(28px, 4vw, 48px) !important;
  background: linear-gradient(180deg, #1C2D37 0%, #111E26 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 24px 64px rgba(8, 14, 20, 0.45) !important;
  padding-top: clamp(34px, 3.5vw, 48px) !important;
  padding-bottom: 8px !important;
  padding-left: clamp(20px, 3vw, 48px) !important;
  padding-right: clamp(20px, 3vw, 48px) !important;
  overflow: hidden !important;
  position: relative !important;
}

.footer.mpd-footer-compact::before,
.footer.padding-y-120::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 181, 78, 0.35), transparent);
  pointer-events: none;
}

.footer.mpd-footer-compact .footer-item__logo img {
  max-height: 46px;
  width: auto;
}

.footer.mpd-footer-compact .footer-item__desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 14px;
  margin-bottom: 16px;
}

.footer.mpd-footer-compact .footer-item__title {
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
  position: relative;
  padding-bottom: 8px;
  letter-spacing: 0.2px;
}

.footer.mpd-footer-compact .footer-item__title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2.5px;
  background: #EEB54E;
  border-radius: 999px;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. Footer Menu List Items with Left-Side Pill Bullet Markers
───────────────────────────────────────────────────────────────────────── */
.footer.mpd-footer-compact .footer-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer.mpd-footer-compact .footer-menu__item {
  margin: 0;
  padding: 0;
}

.footer.mpd-footer-compact .footer-menu__link {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.75);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  text-decoration: none;
}

/* Left-Side Pill Capsule Marker on List Items */
.footer.mpd-footer-compact .footer-menu__link::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 4.5px;
  border-radius: 9999px;
  background: rgba(238, 181, 78, 0.45);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.footer.mpd-footer-compact .footer-menu__link:hover {
  color: #EEB54E !important;
  transform: translateX(4px);
}

.footer.mpd-footer-compact .footer-menu__link:hover::before {
  width: 18px;
  background: #EEB54E;
  box-shadow: 0 0 10px rgba(238, 181, 78, 0.85);
}

/* Footer Address List Items */
.footer.mpd-footer-compact .address-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer.mpd-footer-compact .address-list__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.footer.mpd-footer-compact .address-list__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(238, 181, 78, 0.12);
  color: #EEB54E;
  border: 1px solid rgba(238, 181, 78, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.footer.mpd-footer-compact .address-list__item:hover .address-list__icon {
  transform: scale(1.08);
  background: rgba(238, 181, 78, 0.22);
}

.footer.mpd-footer-compact .address-list__text {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. Official Branded Social Capsules (Left-side Floating, Footer, Sidebar)
───────────────────────────────────────────────────────────────────────── */
/* Left-Side Floating Social Capsule (Pinned to edge, matches screenshot) */
.mpd-left-social-capsule {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 998;
  background: #ffffff;
  border: 1.5px solid rgba(28, 45, 55, 0.09);
  border-left: none;
  border-radius: 0 24px 24px 0;
  box-shadow: 4px 12px 36px rgba(15, 23, 42, 0.14);
  padding: 14px 10px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.mpd-left-social-capsule:hover {
  box-shadow: 6px 16px 44px rgba(15, 23, 42, 0.2);
  transform: translateY(-50%) translateX(2px);
}

/* Base Social Capsule Wrapper */
.mpd-social-capsule {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Footer Social Capsule */
.mpd-social-capsule--footer {
  background: #ffffff;
  border-radius: 9999px;
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  margin-top: 4px;
}

/* Sidebar & Mobile Drawer Social Capsule */
.mpd-social-capsule--sidebar,
.mpd-social-capsule--mobile {
  background: #ffffff;
  border-radius: 9999px;
  padding: 8px 18px;
  border: 1.5px solid rgba(28, 45, 55, 0.08);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* Individual Capsule Icon Link */
.mpd-capsule-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.22s ease;
  flex-shrink: 0;
}

.mpd-capsule-item:hover {
  transform: scale(1.18);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.16));
}

.mpd-social-icon {
  display: block;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. Low Opacity Typography Watermark at Bottom of Footer
───────────────────────────────────────────────────────────────────────── */
.mpd-footer-brandmark-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(14px, 2.2vw, 26px);
  padding: 0 15px clamp(12px, 1.8vw, 20px);
  user-select: none;
  pointer-events: none;
  box-sizing: border-box;
}

.mpd-footer-brandmark {
  display: inline-block;
  max-width: 100%;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(18px, 5.5vw, 76px);
  font-weight: 900;
  letter-spacing: clamp(1.5px, 0.3vw, 4.5px);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.15;
  text-align: center;
  color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.035) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.03);
  margin: 0 auto;
}

@media (max-width: 768px) {
  .footer.mpd-footer-compact,
  .footer.padding-y-120 {
    width: calc(100% - 20px) !important;
    margin: 0 auto 18px auto !important;
    border-radius: 26px !important;
    padding-top: 28px !important;
    padding-bottom: 8px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .mpd-left-social-capsule {
    padding: 10px 6px 10px 5px;
    gap: 10px;
    border-radius: 0 18px 18px 0;
  }
  .mpd-left-social-capsule .mpd-social-icon {
    width: 22px;
    height: 22px;
  }

  .mpd-social-capsule--footer {
    padding: 5px 12px;
    gap: 9px;
  }
  .mpd-social-capsule--footer .mpd-social-icon {
    width: 24px;
    height: 24px;
  }

  .mpd-footer-brandmark {
    font-size: clamp(15px, 5vw, 38px);
    letter-spacing: clamp(1px, 0.25vw, 2.5px);
  }
}

@media (max-width: 480px) {
  .mpd-footer-brandmark {
    font-size: clamp(12px, 4.5vw, 20px);
    letter-spacing: 1px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 36: REVAMPED MULTI-MEDIA UPLOAD UI (IMAGES & VIDEO)
═══════════════════════════════════════════════════════════════════════════ */
.mpd-media-dropzone {
  border: 2px dashed rgba(238, 181, 78, 0.35);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(28, 45, 55, 0.02) 0%, rgba(238, 181, 78, 0.04) 100%);
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.mpd-media-dropzone:hover,
.mpd-media-dropzone.dragover {
  border-color: #EEB54E;
  background: rgba(238, 181, 78, 0.08);
  transform: scale(1.006);
  box-shadow: 0 10px 30px rgba(238, 181, 78, 0.15);
}

.mpd-dropzone-icon-wrap {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(238, 181, 78, 0.2) 0%, rgba(238, 181, 78, 0.05) 100%);
  border: 1px solid rgba(238, 181, 78, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #EEB54E;
  font-size: 28px;
  transition: transform 0.3s ease;
}

.mpd-media-dropzone:hover .mpd-dropzone-icon-wrap {
  transform: translateY(-3px) scale(1.05);
}

.mpd-dropzone-title {
  font-size: 18px;
  font-weight: 700;
  color: #1C2D37;
  margin-bottom: 6px;
  font-family: var(--font-body);
}

.mpd-dropzone-desc {
  font-size: 13.5px;
  color: #637381;
  max-width: 480px;
  margin: 0 auto 16px;
}

.mpd-media-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}

.mpd-media-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid rgba(28, 45, 55, 0.1);
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  color: #1C2D37;
}

.mpd-media-badge-pill i {
  font-size: 12px;
}

.mpd-choose-media-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #1C2D37 0%, #293f4d 100%);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 28px;
  border-radius: 9999px;
  border: none;
  box-shadow: 0 4px 14px rgba(28, 45, 55, 0.2);
  transition: all 0.25s ease;
  cursor: pointer;
}

.mpd-choose-media-btn:hover {
  background: linear-gradient(135deg, #EEB54E 0%, #d49c36 100%);
  color: #0D1321 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(238, 181, 78, 0.35);
}

/* Media Preview Cards Area */
.mpd-preview-area {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(28, 45, 55, 0.08);
}

.mpd-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.mpd-preview-summary {
  font-size: 13.5px;
  font-weight: 600;
  color: #1C2D37;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mpd-preview-summary .badge {
  background: #1C2D37;
  color: #EEB54E;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 9999px;
}

.mpd-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}

.mpd-preview-card {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid rgba(28, 45, 55, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
}

.mpd-preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: #EEB54E;
}

.mpd-preview-card img,
.mpd-preview-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mpd-preview-video-placeholder {
  width: 100%;
  height: 100%;
  background: #1C2D37;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  padding: 10px;
  text-align: center;
}

.mpd-preview-video-placeholder i {
  font-size: 32px;
  color: #EEB54E;
  margin-bottom: 6px;
}

.mpd-preview-badge-primary {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #EEB54E;
  color: #0D1321;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.mpd-preview-badge-video {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #DC2626;
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.mpd-preview-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 3;
}

.mpd-preview-remove-btn:hover {
  background: #DC2626;
  transform: scale(1.15);
}

.mpd-preview-card-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(13, 19, 33, 0.85) 100%);
  padding: 16px 8px 6px;
  color: #ffffff;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}

/* WhatsApp Compulsory Input Styling */
.mpd-whatsapp-input-wrap {
  position: relative;
}

.mpd-whatsapp-input-wrap .mpd-wa-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #25D366;
  font-size: 18px;
  pointer-events: none;
}

.mpd-whatsapp-input-wrap input.common-input {
  padding-left: 44px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 37: PERFECTION RESPONSIVENESS (ALL DEVICES & SCREEN SIZES)
═══════════════════════════════════════════════════════════════════════════ */

/* Global horizontal overflow lock */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Tablet & Mobile: 991px and down */
@media (max-width: 991px) {
  .mpd-listing-nav {
    position: static !important;
    top: auto !important;
    margin-bottom: 24px;
    padding: 16px 20px;
    border-radius: 20px;
  }
  .mpd-listing-nav__title {
    margin-bottom: 10px;
    font-size: 13px;
  }
  .mpd-listing-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .mpd-listing-nav__list li {
    margin-bottom: 0;
  }
  .mpd-listing-nav__link {
    padding: 8px 16px;
    font-size: 12.5px;
    border-radius: 9999px;
  }
  .mpd-listing-step-card {
    padding: 26px 20px !important;
    border-radius: 20px !important;
  }
  .footer.mpd-footer-compact {
    padding-top: 48px !important;
  }
}

/* Mobile Devices: 576px and down */
@media (max-width: 576px) {
  /* Media Dropzone */
  .mpd-media-dropzone {
    padding: 24px 14px;
    border-radius: 20px;
  }
  .mpd-dropzone-icon-wrap {
    width: 52px;
    height: 52px;
    font-size: 22px;
    margin-bottom: 12px;
  }
  .mpd-dropzone-title {
    font-size: 15.5px;
  }
  .mpd-dropzone-desc {
    font-size: 12.5px;
    margin-bottom: 14px;
    padding: 0 4px;
  }
  .mpd-media-badges {
    gap: 6px;
    margin-bottom: 16px;
  }
  .mpd-media-badge-pill {
    font-size: 11px;
    padding: 4px 10px;
  }
  .mpd-choose-media-btn {
    width: 100%;
    justify-content: center;
    font-size: 13.5px;
    padding: 11px 20px;
  }

  /* Live Preview Cards Grid */
  .mpd-preview-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .mpd-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    gap: 10px;
  }
  .mpd-preview-card {
    border-radius: 12px;
  }
  .mpd-preview-card-info {
    font-size: 9.5px;
    padding: 12px 6px 4px;
  }

  /* Step Cards & Inputs */
  .mpd-listing-step-card {
    padding: 20px 14px !important;
    border-radius: 18px !important;
    margin-bottom: 20px;
  }
  .mpd-listing-step-header {
    padding-bottom: 12px !important;
    margin-bottom: 16px !important;
  }
  .mpd-listing-step-header h6 {
    font-size: 15px !important;
  }
  .mpd-step-badge {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }
  .common-input {
    font-size: 14px !important;
    padding: 11px 16px !important;
  }
  .mpd-whatsapp-input-wrap input.common-input {
    padding-left: 42px !important;
  }

  /* Amenity Pills */
  .mpd-amenity-pill {
    padding: 9px 14px;
    font-size: 12.5px;
  }

  /* Submit Button */
  .mpd-listing-submit-btn {
    font-size: 15px !important;
    padding: 15px 24px !important;
  }

  /* Compact Footer on Mobile */
  .footer.mpd-footer-compact {
    padding-top: 38px !important;
  }
  .footer.mpd-footer-compact .footer-item__logo img {
    max-height: 42px;
  }
  .footer.mpd-footer-compact .footer-item__desc {
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 14px;
  }
  .footer.mpd-footer-compact .footer-item__title {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .footer.mpd-footer-compact .footer-menu {
    gap: 6px;
  }
  .footer.mpd-footer-compact .footer-menu__link {
    font-size: 13px;
  }
  .footer.mpd-footer-compact .address-list {
    gap: 10px;
  }
  .footer.mpd-footer-compact .address-list__text {
    font-size: 13px;
  }
  .footer.mpd-footer-compact .social-list__link {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  /* Footer Brandmark Watermark on Mobile */
  .mpd-footer-brandmark-container {
    margin-top: 18px;
    padding: 0 10px 22px;
  }
  .mpd-footer-brandmark {
    font-size: clamp(12px, 3.6vw, 16px) !important;
    letter-spacing: 1.2px !important;
  }
}

/* Extra Small Devices: 360px and down */
@media (max-width: 360px) {
  .mpd-footer-brandmark {
    font-size: 11.5px !important;
    letter-spacing: 1px !important;
  }
  .mpd-preview-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ─────────────────────────────────────────────────────────────────────────
   NAV OVERHAUL — #1C2D37 Background Theme
   Applies brand dark slate to header-top bar, main nav, sticky state.
   Ensures ALL items (text, icons, dropdowns, buttons) are fully visible.
───────────────────────────────────────────────────────────────────────── */

/* ── Top Contact Bar ── */
.header-top {
  background-color: #1C2D37 !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  padding: 9px 0 !important;
}
.header-top .header-info__item {
  color: rgba(255,255,255,0.85) !important;
}
.header-top .header-info__icon,
.header-top .header-info__icon i {
  color: rgba(255,255,255,0.7) !important;
}
.header-top .header-info__text,
.header-top a.header-info__text,
.header-top a.email {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
.header-top .header-info__text:hover,
.header-top a.header-info__text:hover,
.header-top a.email:hover {
  color: #EEB54E !important;
}
.header-top .fab.fa-whatsapp {
  color: #25D366 !important;
}

/* ── Main Nav Bar ── */
.header {
  background-color: #1C2D37 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25) !important;
}

/* Sticky / Fixed State */
.header.fixed-header {
  background-color: rgba(28,45,55,0.97) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
}

/* ── Logo ── */
/* White logo loaded directly from PHP ($logoWhite) — no filter needed */

/* ── Desktop Nav Links (Pill Capsule Menu) — Desktop Only ── */
@media (min-width: 992px) {
  .header .nav-menu {
    display: flex !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
  }

  .header .nav-menu__link,
  .header .nav-menu > li > a {
    color: #000000 !important; /* Jet Black */
    font-weight: 600 !important;
    opacity: 1 !important;
  }
  .header .nav-menu__link:hover,
  .header .nav-menu > li > a:hover,
  .header .nav-menu__item.activePage > a,
  .header .nav-menu__item.activePage > .nav-menu__link {
    color: #c9993f !important;
  }

  /* ── Dropdown chevron arrow ── */
  .header .has-submenu > a::before {
    color: #000000 !important; /* Jet Black chevron */
    opacity: 0.85 !important;
  }
  .header .has-submenu:hover > a::before,
  .header .has-submenu.active > a::before {
    color: #c9993f !important;
  }
}

/* ── Small Devices Nav Enforcement (< 992px) ── */
@media (max-width: 991.98px) {
  .header .nav-menu:not(.nav-menu--mobile),
  .header ul.nav-menu:not(.nav-menu--mobile),
  .header-inner > .nav-menu {
    display: none !important;
  }
  .header .header-right .offcanvas-btn,
  .header .offcanvas-btn,
  .offcanvas-btn {
    display: none !important;
  }
  .mpd-left-social-capsule {
    display: none !important;
  }
}

/* ── Dropdown Submenu (Desktop) ── */
.header .nav-submenu {
  background-color: #1C2D37 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
}
.header .nav-submenu__link {
  color: rgba(255,255,255,0.85) !important;
}
.header .nav-submenu__link:hover {
  color: #EEB54E !important;
}
.header .nav-submenu__item::before {
  color: rgba(255,255,255,0.4) !important;
}
.header .nav-submenu__item:hover {
  background-color: rgba(255,255,255,0.06) !important;
}
.header .nav-submenu__item:hover a {
  color: #EEB54E !important;
}

/* ── Hamburger / Offcanvas toggle (3-line SVG icon) ── */
.header .offcanvas-btn svg line,
.header .offcanvas-btn svg path {
  stroke: #ffffff !important;
}
.header .offcanvas-btn:hover svg line,
.header .offcanvas-btn:hover svg path {
  stroke: #EEB54E !important;
}

/* ── Mobile Hamburger Button — Strictly hidden on desktop (>= 992px) ── */
@media (min-width: 992px) {
  .header .toggle-mobileMenu,
  .toggle-mobileMenu,
  button.toggle-mobileMenu {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* ── Mobile Hamburger Button — GOAT Luxury Pill Target (mobile/tablet < 992px only) ── */
@media (max-width: 991.98px) {
  .header .toggle-mobileMenu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    font-size: 26px !important;
    line-height: 1 !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  }
  .header .toggle-mobileMenu i {
    color: #ffffff !important;
    line-height: 1 !important;
  }
  .header .toggle-mobileMenu:hover,
  .header .toggle-mobileMenu:focus,
  .header .toggle-mobileMenu:active {
    background: rgba(201, 153, 63, 0.22) !important;
    border-color: #c9993f !important;
    color: #EEB54E !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 16px rgba(201, 153, 63, 0.35) !important;
  }
  .header .toggle-mobileMenu:hover i {
    color: #EEB54E !important;
  }
}

/* ── Sell Property Button in Header ── */
.header .btn-outline-light,
.header a.btn-outline-light {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.45) !important;
  background: transparent !important;
  transition: all 0.25s ease !important;
}
.header .btn-outline-light:hover,
.header a.btn-outline-light:hover {
  background: #EEB54E !important;
  border-color: #EEB54E !important;
  color: #1C2D37 !important;
}
.header .btn-outline-light .icon-right i {
  color: #EEB54E !important;
}
.header .btn-outline-light:hover .icon-right i {
  color: #1C2D37 !important;
}

/* ── Mobile Menu Sidebar (Drawer) — Luxury #1C2D37 Styling ── */
.mobile-menu {
  background-color: #1C2D37 !important;
  width: 320px !important;
  max-width: 86vw !important;
  z-index: 99999 !important;
  padding: 24px 20px 80px !important;
  box-shadow: 12px 0 40px rgba(0, 0, 0, 0.6) !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.side-overlay {
  z-index: 99990 !important;
  background-color: rgba(6, 10, 16, 0.8) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.mobile-menu .close-button {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  width: 36px !important;
  height: 36px !important;
  top: 16px !important;
  right: 16px !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}
.mobile-menu .close-button:hover {
  background: #c9993f !important;
  color: #060a10 !important;
  border-color: #c9993f !important;
  transform: rotate(90deg) !important;
}

.mobile-menu .nav-menu--mobile {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mobile-menu .nav-menu--mobile .nav-menu__item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
  width: 100% !important;
}

.mobile-menu .nav-menu--mobile .nav-menu__link {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 13px 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.mobile-menu .nav-menu--mobile .nav-menu__link:hover,
.mobile-menu .nav-menu--mobile .nav-menu__item.activePage > .nav-menu__link {
  color: #EEB54E !important;
}

.mobile-menu .nav-menu--mobile .nav-submenu {
  background: rgba(14, 23, 33, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  margin: 4px 0 10px !important;
  position: static !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
.mobile-menu .nav-menu--mobile .nav-submenu__link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 13.5px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
}
.mobile-menu .nav-menu--mobile .nav-submenu__link:hover {
  background: rgba(201, 153, 63, 0.15) !important;
  color: #EEB54E !important;
}

/* Sell Property Button inside mobile drawer */
.mobile-menu .btn-outline-light,
.mobile-menu a.btn-outline-light {
  background: linear-gradient(135deg, #c9993f 0%, #dfb56c 50%, #b8862d 100%) !important;
  color: #060a10 !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  text-align: center !important;
  box-shadow: 0 4px 16px rgba(201, 153, 63, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
  text-decoration: none !important;
}
.mobile-menu .btn-outline-light .icon-right i,
.mobile-menu a.btn-outline-light .icon-right i {
  color: #060a10 !important;
}

/* ==========================================================================
   PRELOADER FAIL-SAFE DISMISSAL
   Guarantees the preloader never freezes or traps the user on any page
   ========================================================================== */
.preloader {
  animation: mpdPreloaderEmergencyDismiss 0.35s ease 0.6s forwards !important;
}
@keyframes mpdPreloaderEmergencyDismiss {
  0% {
    opacity: 1;
    visibility: visible;
  }
  99% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none !important;
  }
}