/* ============================================================
   HOTEL AMARABATI — CUSTOM OVERRIDES (loads last)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Sora:wght@100..800&display=swap");

/* ── 0. GLOBAL FONTS ──────────────── */
body,
p,
a:not(.fa):not(.fab):not(.fas):not(.far),
li,
input,
button,
textarea {
  font-family: "DM Sans", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.section-title,
.heading,
.title,
.luxevo-brand-text,
.navbar-brand {
  font-family: "Sora", sans-serif !important;
}

/* ── 1. HIDE TOP INFO BAR ──────────────── */
header.main_header_area .header-content {
  display: none !important;
}

/* ── 2. RESET HEADER WRAPPER ─────────────────────────── */
header.main_header_area {
  position: relative !important;
  width: 100% !important;
  z-index: 999 !important;
  background: #fff !important;
  box-shadow: none !important;
  border: none !important;
}

/* ── 3. CLEAN WHITE NAVBAR (LUXEVO STYLE) ───────────────────────────── */
header.main_header_area .header_menu,
header.main_header_area .header_menu.affix-top {
  background: #ffffff !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  padding: 0 !important;
  /* Always fixed (js/custom-nav.js reserves its height in the flow). If it
     switched between in-flow and fixed at the scroll threshold, the smooth
     scroll would cross that threshold mid-glide and the bar would snap up
     and slide back down while the scroll eased to a stop. Affixing now only
     fades in the shadow and the border colour. */
  position: fixed !important;
  z-index: 9999 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  transition: background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 0.7s ease, border-color 0.5s ease !important;
}

header.main_header_area .header_menu.affix {
  background: #ffffff !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  padding: 0 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  z-index: 9999 !important;
  transition: background-color 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 0.7s ease, border-color 0.5s ease !important;
  /* The bar never leaves the screen, so replaying fadeInDown every time it
     re-affixes near the top only makes it flicker. */
  animation: none !important;
}

header.main_header_area .header_menu.affix .navbar.navbar-default .container,
header.main_header_area .header_menu.affix .navbar.navbar-default .site-container {
  padding: 0 24px !important;
}

/* ── Affix motion ─────────────────────────────────────────────────────────
   The whole bar changes state as one piece, on one curve (--hdr-ease):
     surface   solid white -> frosted glass, soft shadow fades in
     hairline  a gold rule sweeps out from the centre along the bottom edge
     content   gutters glide 4.5% -> 24px, logo settles a touch smaller,
               nav links ripple left-to-right, Book Now lifts with a glow
   Everything is transform / opacity / colour, apart from the gutter
   padding, so the bar's height never changes and nothing below it moves. */
header.main_header_area .header_menu {
  --hdr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hdr-dur: 0.7s;
}

header.main_header_area .header_menu .navbar.navbar-default .container,
header.main_header_area .header_menu .navbar.navbar-default .site-container {
  transition: padding var(--hdr-dur) var(--hdr-ease) !important;
}

body header.main_header_area .header_menu .navbar-brand img {
  transform-origin: left center;
  transition: transform var(--hdr-dur) var(--hdr-ease), height 0.4s ease !important;
}
body header.main_header_area .header_menu.affix .navbar-brand img {
  transform: scale(0.92);
}

/* `body` prefix: outranks the base Book Now rule further down this file,
   which sets `transition: all 0.3s` with the same specificity. */
body header.main_header_area .header_menu .nav-btn a.btn.btn-orange {
  transition:
    transform var(--hdr-dur) var(--hdr-ease),
    box-shadow var(--hdr-dur) var(--hdr-ease),
    background 0.3s ease,
    color 0.3s ease !important;
}
body header.main_header_area .header_menu.affix .nav-btn a.btn.btn-orange {
  transform: scale(0.96) !important;
  box-shadow: 0 10px 24px -8px rgba(202, 158, 78, 0.7) !important;
}
body header.main_header_area .header_menu.affix .nav-btn a.btn.btn-orange:hover {
  transform: scale(0.96) translateY(-2px) !important;
}

@media (min-width: 992px) {
  /* Surface (its transition lives on the two base .header_menu rules above) */
  body header.main_header_area .header_menu.affix {
    background: rgba(255, 255, 255, 0.93) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 12px 34px -14px rgba(14, 18, 22, 0.18) !important;
    border-bottom-color: transparent !important;
  }

  /* Gold hairline */
  header.main_header_area .header_menu::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg,
      rgba(202, 158, 78, 0) 0%,
      rgba(202, 158, 78, 0.75) 50%,
      rgba(202, 158, 78, 0) 100%);
    transform: scaleX(0);
    opacity: 0;
    transition:
      transform 0.9s var(--hdr-ease),
      opacity 0.5s ease;
    pointer-events: none;
  }
  header.main_header_area .header_menu.affix::after {
    transform: scaleX(1);
    opacity: 1;
  }

  /* Nav ripple: a separate keyframe per direction so the class swap
     restarts it each way. Animates the <li>, never the <a>, so the links'
     own hover/active transitions are untouched. */
  header.main_header_area .header_menu .nav.navbar-nav > li {
    animation: hdrNavSettleTop 0.6s var(--hdr-ease) both;
  }
  header.main_header_area .header_menu.affix .nav.navbar-nav > li {
    animation-name: hdrNavSettleAffix;
  }
  header.main_header_area .header_menu .nav.navbar-nav > li:nth-child(2) { animation-delay: 0.03s; }
  header.main_header_area .header_menu .nav.navbar-nav > li:nth-child(3) { animation-delay: 0.06s; }
  header.main_header_area .header_menu .nav.navbar-nav > li:nth-child(4) { animation-delay: 0.09s; }
  header.main_header_area .header_menu .nav.navbar-nav > li:nth-child(5) { animation-delay: 0.12s; }
  header.main_header_area .header_menu .nav.navbar-nav > li:nth-child(6) { animation-delay: 0.15s; }
  header.main_header_area .header_menu .nav.navbar-nav > li:nth-child(7) { animation-delay: 0.18s; }
  header.main_header_area .header_menu .nav.navbar-nav > li:nth-child(8) { animation-delay: 0.21s; }
}

@keyframes hdrNavSettleAffix {
  0%   { transform: translateY(5px); opacity: 0.4; }
  100% { transform: none; opacity: 1; }
}
@keyframes hdrNavSettleTop {
  0%   { transform: translateY(5px); opacity: 0.4; }
  100% { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  header.main_header_area .header_menu,
  header.main_header_area .header_menu::after,
  header.main_header_area .header_menu .navbar.navbar-default .container,
  header.main_header_area .header_menu .navbar.navbar-default .site-container,
  body header.main_header_area .header_menu .navbar-brand img,
  body header.main_header_area .header_menu .nav-btn a.btn.btn-orange {
    transition: none !important;
  }
  header.main_header_area .header_menu .nav.navbar-nav > li {
    animation: none !important;
  }
}

header.main_header_area .header_menu .navbar.navbar-default {
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

/* Desktop: show nav normally, hide mobile-only elements */
@media (min-width: 992px) {
  header.main_header_area .header_menu .navbar-toggle {
    display: none !important;
  }
  header.main_header_area .header_menu .mobile-book-now,
  header.main_header_area .header_menu .navbar-header .mobile-book-now,
  .mobile-book-now {
    display: none !important;
  }
  header.main_header_area .header_menu #mobile-nav {
    display: flex !important;
  }

  header.main_header_area .header_menu .navbar.navbar-default .container,
  header.main_header_area .header_menu .navbar.navbar-default .site-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 4.5% !important;
    position: relative !important;
  }
  header.main_header_area .header_menu .navbar-header {
    flex-shrink: 0 !important;
    z-index: 10 !important;
  }

  header.main_header_area .header_menu .navbar-nav-wrapper,
  header.main_header_area .header_menu #mobile-nav {
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: static !important;
  }

  header.main_header_area .header_menu .nav.navbar-nav {
    flex-grow: 1 !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 !important;
    float: none !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
    z-index: 5 !important;
  }
  header.main_header_area .header_menu .nav-btn {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    z-index: 10 !important;
    margin-left: 20px !important;
  }
}

/* Logo -> Text */
header.main_header_area .header_menu .logo-white {
  display: none !important;
}
header.main_header_area .header_menu .logo-black {
  display: block !important;
}
header.main_header_area .header_menu .navbar-brand {
  padding: 18px 0 !important;
  display: flex !important;
  align-items: center !important;
  transition: padding 0.4s ease !important;
}
header.main_header_area .header_menu .navbar-brand img {
  height: 30px !important;
  width: auto !important;
  transition: height 0.4s ease !important;
}

/* Sticky shrink effects */
header.main_header_area .header_menu.affix .navbar-brand {
  padding: 18px 0 !important; /* Kept original padding */
}
header.main_header_area .header_menu.affix .navbar-brand img {
  height: 30px !important; /* Kept original image height */
}

/* Nav links */
header.main_header_area
  .header_menu
  .navbar.navbar-default
  .nav.navbar-nav
  > li
  > a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333333 !important;
  padding: 9px 13px !important;
  margin: 14px 4px !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 30px !important;
  transition: all 0.4s ease !important;
}

/* Shrink nav links slightly on scroll */
header.main_header_area
  .header_menu.affix
  .navbar.navbar-default
  .nav.navbar-nav
  > li
  > a {
  margin: 14px 4px !important; /* Kept original margin */
  padding: 9px 13px !important; /* Kept original padding */
}

header.main_header_area
  .header_menu
  .navbar.navbar-default
  .nav.navbar-nav
  > li
  > a::after {
  display: none !important; /* Remove pseudo-elements completely */
}

header.main_header_area
  .header_menu
  .navbar.navbar-default
  .nav.navbar-nav
  > li
  > a:hover,
header.main_header_area
  .header_menu
  .navbar.navbar-default
  .nav.navbar-nav
  > li.active
  > a {
  color: #ca9e4e !important;
  background: rgba(202, 158, 78, 0.08) !important;
}

/* Modern Dropdown Icons */
header.main_header_area .header_menu .nav.navbar-nav li > a .fa-angle-down {
  display: inline-block !important;
  font-size: 10px !important;
  margin-left: 5px !important;
  opacity: 0.5 !important;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease,
    color 0.3s ease !important;
  vertical-align: middle !important;
}
header.main_header_area
  .header_menu
  .nav.navbar-nav
  li:hover
  > a
  .fa-angle-down,
header.main_header_area
  .header_menu
  .nav.navbar-nav
  li.active
  > a
  .fa-angle-down {
  transform: rotate(180deg) !important;
  opacity: 1 !important;
  color: #edaa1f !important;
}

/* Book Now Premium Button */
header.main_header_area .header_menu .nav-btn a,
header.main_header_area .header_menu .nav-btn .btn,
header.main_header_area .header_menu .nav-btn a.btn.btn-orange {
  background: linear-gradient(135deg, #edaa1f 0%, #ca9e4e 100%) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 28px !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 4px 15px rgba(237, 170, 31, 0.4) !important;
  display: inline-block !important;
}
header.main_header_area .header_menu .nav-btn a:hover,
header.main_header_area .header_menu .nav-btn a.btn.btn-orange:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #ca9e4e 0%, #b8862f 100%) !important;
  box-shadow: 0 6px 20px rgba(202, 158, 78, 0.5) !important;
  transform: translateY(-2px) !important;
}

/* Dropdown menu — generic fallback (new dropdowns use .nav-mega-rooms / .nav-services-drop) */
header.main_header_area
  .header_menu
  .navbar.navbar-default
  .nav.navbar-nav
  li.submenu
  .dropdown-menu:not(.nav-mega-rooms):not(.nav-services-drop) {
  background: #ffffff !important;
  border: 1px solid #eee !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  padding: 8px 0 !important;
  margin-top: 0 !important;
  min-width: 200px !important;
}
header.main_header_area
  .header_menu
  .navbar.navbar-default
  .nav.navbar-nav
  li.submenu
  .dropdown-menu:not(.nav-mega-rooms):not(.nav-services-drop)
  li
  a {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #444 !important;
  padding: 10px 20px !important;
  border: none !important;
  transition: all 0.18s !important;
  background: transparent !important;
}
header.main_header_area
  .header_menu
  .navbar.navbar-default
  .nav.navbar-nav
  li.submenu
  .dropdown-menu:not(.nav-mega-rooms):not(.nav-services-drop)
  li
  a:hover {
  color: #ca9e4e !important;
  background: #faf7f2 !important;
  padding-left: 24px !important;
}

/* ── 4. LUXEVO HERO SECTION ──────────────────────────── */
.luxevo-hero {
  background: #ffffff !important;
  padding: 0 4% 70px !important;
  overflow: hidden !important;
  margin-top: 60px !important;
}
.luxevo-brand-text {
  font-size: clamp(58px, 10.85vw, 158px) !important;
  font-weight: 800 !important;
  line-height: 0.95 !important;
  color: #1a1a1a !important;
  letter-spacing: -2px !important;
  padding: 16px 0 14px !important;
  user-select: none !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
.luxevo-brand-text span {
  color: #ca9e4e !important;
}
.luxevo-image-card {
  position: relative !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 56vh !important;
  min-height: 360px !important;
  max-height: 600px !important;
}
.luxevo-slider,
.luxevo-slider .swiper-container {
  width: 100% !important;
  height: 100% !important;
}
.luxevo-slider .swiper-slide {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  height: 100% !important;
  width: 100% !important;
}
.luxevo-image-card::after {
  content: "" "" !important;
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0 !important;
  height: 52% !important;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    transparent 100%
  ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}
.luxevo-pagination {
  bottom: 94px !important;
  z-index: 10 !important;
  text-align: center !important;
}
.luxevo-pagination .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.4) !important;
  opacity: 1 !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 3px !important;
}
.luxevo-pagination .swiper-pagination-bullet-active {
  background: #fff !important;
  width: 24px !important;
  border-radius: 4px !important;
}

/* ── 5. FLOATING BOOKING BAR ─────────────────────────── */
.luxevo-booking-bar {
  position: absolute !important;
  bottom: 22px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
  background: #ffffff !important;
  border-radius: 50px !important;
  padding: 8px 24px 8px 24px !important;
  display: flex !important;
  align-items: center !important;
  width: 90% !important;
  max-width: 800px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
}
.luxevo-field {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 10px 16px !important;
  border-radius: 30px !important;
  position: relative !important;
}
.lx-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: #888 !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.lx-label i {
  color: #ca9e4e !important;
  font-size: 12px !important;
}
.lx-input {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  border: none !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
}
input.lx-input {
  -webkit-appearance: none !important;
  appearance: none !important;
}
.lx-input::placeholder {
  color: #aaa !important;
  font-weight: 500 !important;
}
.lx-select-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}
select.lx-input {
  color: #edaa1f !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
select.lx-input option {
  color: #1a1a1a !important;
  background: #ffffff !important;
}
.lx-select-arrow {
  position: absolute !important;
  right: 0 !important;
  font-size: 10px !important;
  color: #888 !important;
  pointer-events: none !important;
}
.luxevo-divider {
  width: 1px !important;
  height: 40px !important;
  background: #eaeaea !important;
  margin: 0 4px !important;
  flex-shrink: 0 !important;
}
.lx-search-btn {
  background: #111111 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
  margin-left: 10px !important;
  height: 48px !important;
}
.lx-search-btn:hover {
  background: #ca9e4e !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(202, 158, 78, 0.4) !important;
}

/* ── 6. RESPONSIVE ───────────────────────────────────── */
@media (max-width: 991px) {
  .slicknav_menu {
    display: none !important;
  } /* Hide conflicting theme menu */

  header.main_header_area .header_menu .navbar-header {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 10px !important;
  }
  header.main_header_area .header_menu .navbar-toggle {
    margin: 0 !important;
    float: none !important;
    border: none !important;
    padding: 8px 12px !important;
    background: transparent !important;
    color: #555 !important;
    font-size: 20px !important;
  }

  header.main_header_area .header_menu .navbar-brand {
    padding: 10px 0 !important;
    margin: 0 !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    justify-content: center !important;
    z-index: 10 !important;
  }

  /* Mobile nav - hidden by default, shown by JS toggle */
  header.main_header_area .header_menu #mobile-nav {
    display: none !important;
  }
  header.main_header_area .header_menu #mobile-nav.nav-open {
    display: block !important;
  }

  header.main_header_area .header_menu #mobile-nav,
  header.main_header_area .header_menu .navbar-collapse {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    margin-top: 10px !important;
    border: 1px solid #eee !important;
    position: absolute !important;
    width: 94% !important;
    left: 3% !important;
    top: 100% !important;
    z-index: 1000 !important;
  }
  header.main_header_area .header_menu .nav.navbar-nav {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header.main_header_area .header_menu .nav.navbar-nav > li {
    display: block !important;
    border-bottom: 1px solid #f5f5f5 !important;
    margin: 0 !important;
  }
  header.main_header_area .header_menu .nav.navbar-nav > li:last-child {
    border-bottom: none !important;
  }
  header.main_header_area .header_menu .nav.navbar-nav > li > a {
    display: block !important;
    margin: 0 !important;
    padding: 15px 10px !important;
    border-radius: 0 !important;
    width: 100% !important;
    line-height: 1.2 !important;
    background: transparent !important;
  }

  /* Remove pill background on mobile and add elegant indent on active */
  header.main_header_area
    .header_menu
    .navbar.navbar-default
    .nav.navbar-nav
    > li.active
    > a,
  header.main_header_area
    .header_menu
    .navbar.navbar-default
    .nav.navbar-nav
    > li
    > a:hover {
    background: transparent !important;
    color: #ca9e4e !important;
    padding-left: 20px !important;
  }

  header.main_header_area .header_menu .navbar-collapse .nav-btn {
    display: none !important;
  }

  .luxevo-brand-text {
    font-size: clamp(40px, 13vw, 96px) !important;
    letter-spacing: -2px !important;
    white-space: normal !important;
  }
  .luxevo-image-card {
    height: 48vh !important;
    min-height: 300px !important;
  }
  .luxevo-booking-bar {
    bottom: 14px !important;
    width: 94% !important;
    padding: 8px 8px 8px 16px !important;
    border-radius: 14px !important;
  }
  .luxevo-divider {
    display: none !important;
  }
  .luxevo-field {
    padding-right: 8px !important;
  }

  /* Explore Services Bento Grid */
  .lux-explore-services {
    padding: 80px 0 !important;
  }
  .lux-bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
  }
}

@media (max-width: 768px) {
  .lux-bento-grid {
    grid-auto-rows: 200px;
    gap: 15px;
  }
}

/* ──────────────────────────────────────────────────────────
   MOBILE STYLES (Max-width 640px)
────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .luxevo-brand-text {
    font-size: 48px !important;
    letter-spacing: -1px !important;
  }
  /* Hero Image Card */
  .luxevo-image-card {
    height: 44vh !important;
    min-height: 280px !important;
    border-radius: 16px !important;
  }

  /* Booking Bar - refined compact pill */
  .luxevo-booking-bar {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    border-radius: 50px !important;
    padding: 6px 6px 6px 16px !important;
    bottom: 14px !important;
    gap: 0 !important;
    width: 92% !important;
    align-items: center !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
    background: #ffffff !important;
  }

  /* Date fields: remove desktop rounded corners & background */
  .luxevo-field.lx-date-field {
    flex: 1 1 0% !important;
    padding: 4px 10px !important;
    min-width: 0 !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .luxevo-field.lx-date-field .lx-label {
    display: flex !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #ca9e4e !important;
    margin-bottom: 2px !important;
    gap: 4px !important;
    align-items: center !important;
  }
  .luxevo-field.lx-date-field .lx-label i {
    font-size: 8px !important;
  }
  .luxevo-field.lx-date-field .lx-input {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #111 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    height: auto !important;
    line-height: 1.2 !important;
  }

  /* Guest field: hide on mobile */
  .luxevo-field.lx-guest-field {
    display: none !important;
  }

  /* Divider: hide wide horizontal dividers */
  .luxevo-divider {
    display: none !important;
  }

  /* Straight vertical separator line between check in / out */
  .luxevo-field.lx-date-field:first-of-type {
    border-right: 1px solid #eaeaea !important;
  }

  /* Search button: perfect circular black icon button */
  .lx-search-btn {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: 6px !important;
  }
  .lx-search-btn span {
    display: none !important;
  }
  .lx-search-btn i {
    margin: 0 !important;
    font-size: 14px !important;
  }

  /* Facilities Center Focused */
  .lux-center-facilities {
    padding: 60px 0 !important;
  }
  .lux-center-title {
    font-size: 34px !important;
  }

  .lux-ca-image-wrap {
    height: 350px !important;
    border-radius: 150px 150px 15px 15px !important;
    margin: 0 !important;
    margin-bottom: 30px !important;
  }
  .lux-ca-main-img {
    border-radius: 145px 145px 8px 8px !important;
  }

  .lux-amenity-right-align,
  .lux-amenity-left-align {
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .lux-amenity-right-align .lux-ca-icon,
  .lux-amenity-left-align .lux-ca-icon {
    margin-left: 0 !important;
    margin-right: 20px !important;
    order: -1 !important;
  }

  /* Explore Services Bento Grid */
  .lux-explore-services {
    padding: 60px 0 !important;
  }
  .lux-bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 250px;
  }
  .lux-bento-wide {
    grid-column: span 1;
  }
  .lux-bento-tall {
    grid-row: span 1;
  }
}

/* ── 7. LUX ABOUT SECTION ───────────────────────────── */
@keyframes luxFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes luxZoomIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lux-about-section {
  padding: 60px 0;
  background-color: #fff !important;
  overflow: hidden;
}
.lux-about-section .lux-about-container,
.rooms.rooms-style2 .lux-about-container,
.lux-about-container {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 15px;
}
.lux-about-row {
  align-items: stretch;
}
.lux-left-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 15px;
  padding-bottom: 15px;
}
.lux-about-subtitle {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: #e56b1f;
  display: inline-block;
  position: relative;
  animation: luxFadeInUp 0.8s ease-out forwards;
}
.lux-about-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  color: #1a1a1a;
  margin-bottom: 0;
  letter-spacing: -1px;
  opacity: 0;
  animation: luxFadeInUp 0.8s ease-out 0.2s forwards;
}
.lux-about-title span {
  font-weight: 300;
  color: #555;
}
.lux-about-img-tall {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  animation: luxZoomIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0.3s forwards;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lux-about-img-tall:hover {
  transform: translateY(-8px) scale(1.02);
}
.lux-about-text {
  font-size: 13px;
  line-height: 1.6;
  color: #5a5a5a;
  margin-bottom: 0;
  opacity: 0;
  animation: luxFadeInUp 0.8s ease-out 0.3s forwards;
}
@media (max-width: 991px) {
  .lux-about-title {
    font-size: 36px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .lux-about-img-tall {
    min-height: 400px;
    margin-bottom: 40px;
  }
  .lux-left-col {
    justify-content: flex-start;
  }
}

/* ── 8. LUX ROOM SLIDER ────────────────────────────── */
.rooms.rooms-style2 {
  background: #ffffff;
  padding: 80px 0;
}
.lux-room-slider {
  padding-bottom: 60px; /* Space for pagination */
  width: 100%;
}
.lux-room-top-right,
.lux-room-top-right *,
.lux-circle,
.lux-circle *,
.lux-room-bottom-left,
.lux-pill {
  cursor: pointer !important;
}

.lux-room-card {
  display: block;
  text-decoration: none;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  height: 400px;
  transform: translateZ(0);
  isolation: isolate;
}
.lux-room-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.room-section-title {
  margin-bottom: 60px !important;
}

/* Cinematic Gradient Overlay */
.lux-room-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, transparent 35%, transparent 65%, rgba(0,0,0,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Bottom Left Architectural Step Cutout */
.lux-room-bottom-left {
  position: absolute;
  bottom: -2px;
  left: -2px;
  background: #ffffff;
  padding: 16px 16px 0 0;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 26px;
  z-index: 10;
  pointer-events: auto;
  transform: translate3d(0, 0, 10px);
  cursor: pointer !important;
}
.lux-pill {
  background: linear-gradient(135deg, #d4af37 0%, #a87f35 100%); /* Metallic Gold Gradient */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle inner bevel */
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 13px; /* Slightly smaller for premium feel */
  font-weight: 600;
  text-transform: uppercase; /* Modern luxury touch */
  color: #ffffff;
  letter-spacing: 1px; /* Increased tracking */
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(184, 137, 58, 0.2), 0 2px 5px rgba(184, 137, 58, 0.1);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* Snappy modern curve */
  display: inline-block;
  cursor: pointer !important;
}
.lux-room-card:hover .lux-pill {
  background: linear-gradient(135deg, #e0be4e 0%, #b8893a 100%); /* Brighter on hover */
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(184, 137, 58, 0.35), 0 5px 15px rgba(184, 137, 58, 0.2);
}

/* Top Right Architectural Step Cutout */
.lux-room-top-right {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ffffff;
  padding: 0 0 16px 16px;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 26px;
  text-decoration: none;
  z-index: 100;
  pointer-events: auto;
  cursor: pointer !important;
  display: block;
  transform: translate3d(0, 0, 10px);
}
.lux-circle {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #d4af37 0%, #a87f35 100%); /* Metallic Gold Gradient */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle inner bevel */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 16px;
  box-shadow: 0 8px 20px rgba(184, 137, 58, 0.2), 0 2px 5px rgba(184, 137, 58, 0.1);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); /* Snappy modern curve */
}
.lux-room-top-right:hover .lux-circle {
  background: linear-gradient(135deg, #e0be4e 0%, #b8893a 100%); /* Brighter on hover */
  transform: scale(1.05);
  box-shadow: 0 15px 35px rgba(184, 137, 58, 0.35), 0 5px 15px rgba(184, 137, 58, 0.2);
}
.lux-circle i {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.lux-room-top-right:hover .lux-circle i {
  transform: rotate(-45deg) scale(1.1);
}

/* Pagination */
.luxevo-room-pagination {
  bottom: 0px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.luxevo-room-pagination .swiper-pagination-bullet {
  background: #d4af37;
  opacity: 0.3;
  width: 10px;
  height: 10px;
  margin: 0 !important;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.luxevo-room-pagination .swiper-pagination-bullet:hover {
  opacity: 0.7;
  transform: scale(1.2);
}
.luxevo-room-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  width: 32px;
  background: linear-gradient(135deg, #d4af37 0%, #a87f35 100%);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* Section Header Navigation Arrows */
.luxevo-room-nav {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 15px; /* Align with header text */
}
.luxevo-room-prev,
.luxevo-room-next {
  width: 46px;
  height: 46px;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  background: #ffffff;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}
.luxevo-room-prev:hover,
.luxevo-room-next:hover {
  background: #ca9e4e;
  color: #ffffff;
  border-color: #ca9e4e;
}
.luxevo-room-prev.swiper-button-disabled,
.luxevo-room-next.swiper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #ffffff;
  color: #1a1a1a;
  border-color: #e0e0e0;
}

/* ── 9. LUX FACILITIES SECTION (CENTER FOCUSED) ───────────────────────── */
.lux-center-facilities {
  padding: 120px 0;
  background-color: #faf8f5;
  position: relative;
  overflow: hidden;
}

.lux-facilities-header {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
}
.lux-center-title {
  font-size: 48px;
  font-weight: 800;
  color: #1a1a1a;
  margin: 15px 0 25px 0;
  letter-spacing: -1.5px;
  line-height: 1.1;
}
.lux-center-title span {
  font-weight: 300;
  color: #555;
}
.lux-center-desc {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
}

/* Center Amenity Layout */
.lux-center-amenity {
  display: flex;
  align-items: center;
  padding: 30px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}
.lux-center-amenity:last-child {
  border-bottom: none;
}
.lux-amenity-right-align {
  justify-content: flex-end;
  text-align: right;
}
.lux-amenity-left-align {
  justify-content: flex-start;
  text-align: left;
}

.lux-ca-text {
  flex-grow: 1;
}
.lux-ca-text h4 {
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  transition: color 0.3s ease;
}
.lux-ca-text p {
  font-size: 14px;
  color: #777;
  margin: 0;
  line-height: 1.5;
}

.lux-ca-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
  transition: all 0.4s ease;
}
.lux-amenity-right-align .lux-ca-icon {
  margin-left: 25px;
}
.lux-amenity-left-align .lux-ca-icon {
  margin-right: 25px;
}

.lux-ca-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: invert(72%) sepia(21%) saturate(996%) hue-rotate(4deg) brightness(89%)
    contrast(86%);
  transition: all 0.4s ease;
}

.lux-center-amenity:hover .lux-ca-text h4 {
  color: #ca9e4e;
}
.lux-center-amenity:hover .lux-ca-icon {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(202, 158, 78, 0.2);
  border: 1px solid rgba(202, 158, 78, 0.3);
}

/* Center Image */
.lux-ca-image-wrap {
  position: relative;
  border-radius: 300px 300px 20px 20px;
  overflow: hidden;
  height: 550px;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15);
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin: 0 20px;
}
.lux-ca-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 290px 290px 10px 10px;
  display: block;
  transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lux-ca-image-wrap:hover .lux-ca-main-img {
  transform: scale(1.05);
}

/* ── 10. LUX EXPLORE SERVICES (BENTO GRID) ───────────────────────── */
.lux-explore-services {
  padding: 120px 0;
  background-color: #faf8f5;
  position: relative;
}

.lux-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 280px;
  gap: 25px;
}

.lux-bento-item {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  text-decoration: none;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Specific Grid Sizes */
.lux-bento-wide {
  grid-column: span 2;
}
.lux-bento-tall {
  grid-row: span 2;
}

/* Background & Overlay */
.lux-bento-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 0;
}
.lux-bento-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 80%,
    rgba(0, 0, 0, 0.8) 100%
  );
  z-index: 1;
  transition: opacity 0.5s ease;
}

/* Content */
.lux-bento-content {
  position: relative;
  z-index: 2;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.lux-bento-content h4 {
  color: #ffffff;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 10px 0;
  letter-spacing: 0.5px;
}
.lux-bento-line {
  width: 0;
  height: 2px;
  background-color: #ca9e4e;
  transition: width 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Hover Effects */
.lux-bento-item:hover {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}
.lux-bento-item:hover .lux-bento-bg {
  transform: scale(1.08);
}
.lux-bento-item:hover .lux-bento-overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.7) 80%,
    rgba(0, 0, 0, 0.9) 100%
  );
}
.lux-bento-item:hover .lux-bento-content {
  transform: translateY(-5px);
}
.lux-bento-item:hover .lux-bento-line {
  width: 40px;
}

/* ══════════════════════════════════════════════════════════
   11. MODERN NAVBAR DROPDOWNS — ROOMS & SERVICES
   Designed to match the banner / room-card / about aesthetic.
   ══════════════════════════════════════════════════════════ */

/* ── Shared dropdown entry animation ── */
@media (min-width: 992px) {
  /* Bridge gap so hover doesn't break on mouse travel */
  header.main_header_area .header_menu .nav.navbar-nav > li.dropdown::after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 0;
    width: 100%;
    height: 18px;
    background: transparent;
  }

  /* Base hidden state for all dropdowns */
  header.main_header_area
    .header_menu
    .nav.navbar-nav
    > li.dropdown
    > .dropdown-menu {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.985);
    transition:
      opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
      visibility 0.28s;
    margin-top: 18px;
    padding: 0 !important;
  }

  /* Hover reveal */
  header.main_header_area
    .header_menu
    .nav.navbar-nav
    > li.dropdown:hover
    > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  /* ── ROOMS MEGA MENU ── */
  header.main_header_area
    .header_menu
    .nav.navbar-nav
    > li.lux-modern-dropdown
    > .dropdown-menu.nav-mega-rooms {
    width: 960px;
    left: -320px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 20px !important;
    box-shadow:
      0 32px 80px rgba(0, 0, 0, 0.14),
      0 8px 24px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
  }

  /* ── SERVICES DROPDOWN ── */
  header.main_header_area
    .header_menu
    .nav.navbar-nav
    > li.lux-modern-dropdown
    > .dropdown-menu.nav-services-drop {
    width: 300px;
    left: auto !important;
    right: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }
}

/* ════════════════════════════════
   ROOMS MEGA MENU LAYOUT
   ════════════════════════════════ */
.nav-mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 280px;
  min-height: 0;
}

/* Column panels */
.nav-mega-col {
  padding: 26px 22px 22px;
  background: #ffffff;
}
.nav-mega-col-a {
  border-right: 1px solid #f0f0f0;
}
.nav-mega-col-b {
  border-right: 1px solid #f0f0f0;
}

/* Category label */
.nav-cat-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #ca9e4e;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
}
/* .nav-cat-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(202,158,78,0.2), transparent);
} */

/* Room link rows */
.nav-room-links {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px;
}

/* Force row layout — override Bootstrap li > a display:block */
.nav-mega-rooms .nav-room-link,
.nav-mega-rooms a.nav-room-link {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 14px 14px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition:
    background 0.18s ease,
    border-left-color 0.18s ease !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  line-height: 1.2 !important;
  color: inherit !important;
  margin: 0 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.nav-mega-rooms .nav-room-link:hover,
.nav-mega-rooms a.nav-room-link:hover {
  background: #faf7f2 !important;
  border-left-color: #ca9e4e !important;
}
.nav-mega-rooms .nav-room-link:hover .nav-room-arrow {
  opacity: 1 !important;
  transform: translateX(4px) !important;
  color: #ca9e4e !important;
}

/* Thumbnail — primary (col A) */
.nav-room-thumb {
  width: 70px !important;
  height: 54px !important;
  border-radius: 9px !important;
  background-size: cover !important;
  background-position: center !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  display: block !important;
}

/* Thumbnail — secondary (col B) */
.nav-room-thumb-sm {
  width: 56px !important;
  height: 44px !important;
  border-radius: 7px !important;
  background-size: cover !important;
  background-position: center !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  display: block !important;
}

/* Info block */
.nav-room-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.nav-room-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-family: "DM Sans", sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}
.nav-room-tag {
  font-size: 12px !important;
  color: #999 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
}
.nav-room-link-sm .nav-room-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #333 !important;
}
.nav-room-link-sm .nav-room-tag {
  font-size: 11.5px !important;
  color: #bbb !important;
}
.nav-room-link-sm:hover .nav-room-name {
  color: #1a1a1a !important;
}

/* Arrow icon */
.nav-room-arrow {
  font-size: 9px !important;
  color: #ccc !important;
  opacity: 0 !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  line-height: 1 !important;
}

/* ── Right Hero Panel ── */
.nav-mega-right {
  display: flex;
  flex-direction: column;
  background: #111;
  position: relative;
  overflow: hidden;
}

/* Hero image area — NO scale effect */
.nav-mega-hero {
  flex: 1;
  background-size: cover;
  background-position: center;
  position: relative;
  display: block;
  text-decoration: none !important;
  overflow: hidden;
  min-height: 220px;
  transition: none;
}

/* Gradient overlay — richer, more dramatic */
.nav-mega-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 5, 5, 0.96) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.1) 100%
  );
  z-index: 1;
  transition: opacity 0.3s ease;
}
.nav-mega-hero:hover::before {
  opacity: 0.85;
}

/* Remove old scale rule — replaced with subtle brightness lift */
.nav-mega-hero:hover {
  transform: none;
}
/* Brightness lift on hover instead of scale */
.nav-mega-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(202, 158, 78, 0.04);
  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.nav-mega-hero:hover::after {
  opacity: 1;
}

/* Text overlay */
.nav-mega-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 20px 16px;
}

/* Badge pill */
.nav-mega-hero-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: rgba(202, 158, 78, 0.18) !important;
  border: 1px solid rgba(202, 158, 78, 0.4) !important;
  color: #e0b96a !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  margin-bottom: 8px !important;
  width: auto !important;
  max-width: fit-content !important;
  white-space: nowrap !important;
  backdrop-filter: blur(4px) !important;
  line-height: 1.2 !important;
}

/* Room title */
.nav-mega-hero-title {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 5px 0 !important;
  font-family: "Sora", sans-serif !important;
  line-height: 1.25 !important;
  letter-spacing: -0.2px !important;
  text-transform: none !important;
}

/* Subtitle */
.nav-mega-hero-sub {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  margin: 0 0 12px 0 !important;
  font-family: "DM Sans", sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* CTA — compact inline pill button */
.nav-mega-hero-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ca9e4e !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  padding: 6px 13px !important;
  border-radius: 6px !important;
  width: auto !important;
  max-width: fit-content !important;
  white-space: nowrap !important;
  transition:
    background 0.2s ease,
    gap 0.2s ease !important;
  line-height: 1.2 !important;
}
.nav-mega-hero:hover .nav-mega-hero-cta {
  background: #b8893a !important;
  gap: 10px !important;
}

/* ── Stats bar ── */
.nav-mega-stats {
  display: flex;
  align-items: stretch;
  background: #0d0d0d;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  min-height: 54px;
}
.nav-mega-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 3px;
  text-decoration: none;
  padding: 10px 6px;
  transition: background 0.2s ease;
}
.nav-mega-stat:hover {
  background: rgba(202, 158, 78, 0.06);
}
.nav-stat-num {
  font-family: "Sora", sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  color: #ca9e4e;
  line-height: 1;
}
.nav-stat-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  white-space: nowrap;
}
.nav-mega-stat-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  align-self: stretch;
}
.nav-stat-link {
  text-decoration: none !important;
  cursor: pointer;
}
.nav-stat-link:hover .nav-stat-num {
  color: #e8c77a;
}
.nav-stat-link .nav-stat-num {
  color: #ca9e4e;
  font-size: 10px;
  letter-spacing: 0.8px;
}

/* ════════════════════════════════
   SERVICES DROPDOWN — CLEAN CARD
   Matches Rooms panel aesthetic
   ════════════════════════════════ */

/* Outer wrapper */
.nav-services-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.13),
    0 6px 18px rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
}

/* Each service card row */
.nav-service-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid #f2f2f2 !important;
  box-shadow: none !important;
  height: auto !important;
  transition: background 0.18s ease !important;
  transform: none !important;
  position: relative !important;
  overflow: visible !important;
}
.nav-service-card:last-child {
  border-bottom: none !important;
}
.nav-service-card:hover {
  background: #faf7f2 !important;
  transform: none !important;
  box-shadow: none !important;
}
/* Remove old pseudo overlay */
.nav-service-card::before {
  display: none !important;
}

/* Image thumbnail */
.nav-service-thumb {
  width: 68px !important;
  height: 52px !important;
  border-radius: 10px !important;
  background-size: cover !important;
  background-position: center !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  display: block !important;
}

/* Gold icon badge (shown when no thumb) */
.nav-service-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px !important;
  background: #fff8ee !important;
  border: 1.5px solid rgba(202, 158, 78, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}
.nav-service-icon i {
  color: #ca9e4e !important;
  font-size: 16px !important;
}
.nav-service-card:hover .nav-service-icon {
  background: #ca9e4e !important;
  border-color: #ca9e4e !important;
}
.nav-service-card:hover .nav-service-icon i {
  color: #ffffff !important;
}

/* Text block */
.nav-service-overlay {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 !important;
  padding: 0 !important;
  inset: unset !important;
  height: auto !important;
}
.nav-service-title {
  color: #1a1a1a !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  margin: 0 0 3px 0 !important;
  font-family: "DM Sans", sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}
.nav-service-desc {
  color: #888 !important;
  font-size: 12px !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}
.nav-service-cta {
  display: none !important;
}
/* Right arrow */
.nav-service-arrow {
  font-size: 11px !important;
  color: #d0d0d0 !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
}
.nav-service-card:hover .nav-service-arrow {
  color: #ca9e4e !important;
  transform: translateX(3px) !important;
}

/* ════════════════════════════════
   DESKTOP: Hide mobile elements
   ════════════════════════════════ */
@media (min-width: 992px) {
  .mob-menu-brand-header,
  .mob-drawer-close,
  .mob-drawer-footer {
    display: none !important;
  }
}

/* ════════════════════════════════
   MOBILE: collapse dropdowns
   ════════════════════════════════ */
@media (max-width: 991px) {
  /* ── ULTRA-MODERN FIXED MOBILE HEADER (Overrides Affix) ── */
  header.main_header_area .header_menu,
  header.main_header_area .header_menu.affix {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 70px !important; /* Taller, premium feel */
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 0 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 100000 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
    animation: none !important;
    transition: none !important;
    display: flex !important;
    align-items: center !important;
  }

  .mob-nav-bar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 5px 15px !important;
    position: relative !important;
    z-index: 1000000 !important;
  }

  .mob-nav-left,
  .mob-nav-right {
    display: flex !important;
    flex: 0 0 auto !important; /* Only take required space */
    align-items: center !important;
  }

  .mob-nav-left {
    justify-content: flex-start !important;
  }

  .mob-nav-right {
    justify-content: flex-end !important;
  }

  .mob-nav-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex: 1 1 auto !important; /* Stretch to fill remaining space */
  }

  .mob-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 5px !important;
    background: transparent !important;
    border: none !important;
    padding: 5px !important;
    margin: 0 !important;
    outline: none !important;
    z-index: 1000001 !important;
    width: 32px !important;
    height: 32px !important;
  }

  .mob-ham-line {
    display: block !important;
    width: 22px !important;
    height: 1.5px !important;
    background: #111111 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    transition:
      transform 0.3s ease,
      opacity 0.3s ease,
      width 0.3s ease !important;
  }

  /* Modern staggered look */
  .mob-ham-line--mid {
    width: 15px !important;
  }

  .mob-logo-center {
    padding: 0 5px !important;
    margin: 0 !important;
    height: auto !important;
    z-index: 1000001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mob-logo-img {
    max-height: 24px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  /* Ensure white logo wrapper is completely hidden on mobile so it doesn't mess up flex layout */
  .mob-logo-white-wrap {
    display: none !important;
  }

  .mob-book-btn {
    margin: 0 !important;
  }

  .mob-book-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ca9e4e !important; /* Gold */
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(202, 158, 78, 0.3) !important;
  }

  /* ── ULTRA-MODERN LUXURY MOBILE DRAWER ── */

  /* Lock body scrolling */
  body.mob-menu-open {
    overflow: hidden !important;
  }

  /* Hide floating widgets and the booking bar to prevent bleed-through */
  body.mob-menu-open .mob-nav-bar,
  body.mob-menu-open .luxevo-booking-bar,
  body.mob-menu-open .supportboard-container,
  body.mob-menu-open #sb-chat,
  body.mob-menu-open .whatsapp-btn,
  body.mob-menu-open .call-btn,
  body.mob-menu-open [class*="whatsapp"],
  body.mob-menu-open [class*="chat"],
  body.mob-menu-open [class*="call"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      opacity 0.25s ease,
      visibility 0.25s !important;
  }

  /* Prevent Bootstrap collapse height animations */
  #mobile-nav.collapse,
  #mobile-nav.collapsing,
  #mobile-nav.collapse.in {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: 96vh !important;
    max-height: calc(100dvh - 16px) !important;
  }

  /* Remove glossy background from header when menu is open so it doesn't overlap the drawer */
  body.mob-menu-open header.main_header_area .header_menu {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border-bottom: none !important;
  }

  /* Obsidian Gold Dark Glass Mobile Drawer */
  header.main_header_area .header_menu #mobile-nav {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 8px !important;
    right: 2% !important;
    width: 96% !important;
    /* Only as tall as the menu itself (no empty block under the footer);
       taller content -- an open submenu -- scrolls inside the cap. */
    height: auto !important;
    max-height: 96vh !important;
    max-height: calc(100dvh - 16px) !important;
    z-index: 999999 !important;

    /* Obsidian Dark Glassmorphism */
    background: rgba(14, 14, 14, 0.95) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-radius: 28px !important;
    border: 1px solid rgba(202, 158, 78, 0.25) !important;

    /* Depth shadow with dark overlay and gold inner glow */
    box-shadow:
      0 0 0 100vmax rgba(0, 0, 0, 0.65),
      0 30px 80px rgba(0, 0, 0, 0.8),
      inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;

    margin-top: 0 !important;
    left: auto !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(0.92) translateY(20px) !important;
    transition:
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.35s ease,
      visibility 0.35s !important;
    pointer-events: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
  }

  /* Open state */
  header.main_header_area .header_menu #mobile-nav.nav-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Hamburger & Navigation bar layers */
  .mob-nav-bar {
    position: relative !important;
    z-index: 1000000 !important;
  }
  .mob-hamburger {
    z-index: 1000001 !important;
  }
  .mob-hamburger.is-active .mob-ham-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
    background: #ca9e4e !important;
  }
  .mob-hamburger.is-active .mob-ham-line--mid {
    opacity: 0 !important;
    transform: scale(0) !important;
  }
  .mob-hamburger.is-active .mob-ham-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
    background: #ca9e4e !important;
  }

  /* Drawer Sticky Header */
  .mob-menu-brand-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 76px !important;
    background: rgba(14, 14, 14, 0.9) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 22px !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .mob-drawer-logo {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
  }
  .mob-drawer-logo img {
    height: 28px !important;
    filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0,0,0,0.5)) !important;
  }

  /* Circular Frosted Close Button */
  .mob-drawer-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(202, 158, 78, 0.3) !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    color: #ca9e4e !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  }
  .mob-drawer-close:active,
  .mob-drawer-close:hover {
    transform: scale(0.92) rotate(90deg) !important;
    background: rgba(202, 158, 78, 0.25) !important;
    color: #ffffff !important;
    border-color: #ca9e4e !important;
  }

  /* Navigation Links Container */
  header.main_header_area .header_menu #mobile-nav .navbar-nav {
    margin: 0 !important;
    width: 100% !important;
    padding: 15px 24px 20px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  header.main_header_area .header_menu #mobile-nav .navbar-nav > li {
    width: 100% !important;
    display: block !important;
    float: none !important;
    margin: 0 !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.4s ease,
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Staggered Entrance */
  header.main_header_area .header_menu #mobile-nav.nav-open .navbar-nav > li {
    opacity: 1;
    transform: translateY(0);
  }
  header.main_header_area .header_menu #mobile-nav.nav-open .navbar-nav > li:nth-child(1) { transition-delay: 0.08s !important; }
  header.main_header_area .header_menu #mobile-nav.nav-open .navbar-nav > li:nth-child(2) { transition-delay: 0.12s !important; }
  header.main_header_area .header_menu #mobile-nav.nav-open .navbar-nav > li:nth-child(3) { transition-delay: 0.16s !important; }
  header.main_header_area .header_menu #mobile-nav.nav-open .navbar-nav > li:nth-child(4) { transition-delay: 0.20s !important; }
  header.main_header_area .header_menu #mobile-nav.nav-open .navbar-nav > li:nth-child(5) { transition-delay: 0.24s !important; }
  header.main_header_area .header_menu #mobile-nav.nav-open .navbar-nav > li:nth-child(6) { transition-delay: 0.28s !important; }
  header.main_header_area .header_menu #mobile-nav.nav-open .navbar-nav > li:nth-child(7) { transition-delay: 0.32s !important; }
  header.main_header_area .header_menu #mobile-nav.nav-open .navbar-nav > li:nth-child(8) { transition-delay: 0.36s !important; }

  /* Main Link Items */
  header.main_header_area .header_menu #mobile-nav .navbar-nav > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 4px !important;
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #e5e5e5 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 0 !important;
    text-align: left !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    font-family: "DM Sans", sans-serif !important;
    letter-spacing: -0.2px !important;
    transition: all 0.3s ease !important;
    position: relative !important;
  }

  .navbar-nav-wrapper .navbar-nav > li:last-child > a {
    border-bottom: none !important;
  }

  /* Active & Hover States - Gold Accent */
  .navbar-nav-wrapper .navbar-nav > li.active > a,
  .navbar-nav-wrapper .navbar-nav > li > a:hover {
    color: #ca9e4e !important;
    font-weight: 600 !important;
    padding-left: 10px !important;
  }

  /* Active indicator dot */
  .navbar-nav-wrapper .navbar-nav > li.active > a::after {
    content: '' !important;
    width: 6px !important;
    height: 6px !important;
    background: #ca9e4e !important;
    border-radius: 50% !important;
    box-shadow: 0 0 10px rgba(202, 158, 78, 0.8) !important;
    margin-left: auto !important;
    margin-right: 8px !important;
  }
  .navbar-nav-wrapper .navbar-nav > li.dropdown.active > a::after {
    display: none !important;
  }

  /* Toggle Arrow Styling */
  .navbar-nav-wrapper .navbar-nav > li > a i.fa-angle-down {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #888888 !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease !important;
  }
  .navbar-nav-wrapper .navbar-nav > li > a:hover i.fa-angle-down,
  .navbar-nav-wrapper .navbar-nav > li.active > a i.fa-angle-down {
    color: #ca9e4e !important;
  }
  .navbar-nav-wrapper .navbar-nav > li.dropdown.open > a i.fa-angle-down {
    transform: rotate(180deg) !important;
    color: #ca9e4e !important;
  }
  .navbar-nav-wrapper .navbar-nav > li.dropdown.open > a {
    border-bottom-color: transparent !important;
    color: #ca9e4e !important;
  }

  /* Dropdown Accordion Container */
  header.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.dropdown > .dropdown-menu {
    position: static !important;
    float: none !important;
    width: 100% !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4) !important;
    border: 1px solid rgba(202, 158, 78, 0.18) !important;
    border-radius: 18px !important;
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(10px) !important;
    display: none !important;
    opacity: 0 !important;
    margin: 8px 0 16px 0 !important;
    padding: 10px !important;
    transition: opacity 0.3s ease !important;
    box-sizing: border-box !important;
  }
  header.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.dropdown.open > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
  }

  .nav-mega-inner {
    display: flex !important;
    flex-direction: column !important;
    padding-left: 0 !important;
  }

  .nav-services-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* Submenu Pill Links (Dark Luxury Cards) */
  .nav-room-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 4px 0 !important;
  }

  .nav-room-link {
    display: flex !important;
    align-items: center !important;
    padding: 6px 14px 6px 6px !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 100px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
  }
  .nav-room-link:hover,
  .nav-room-link:active {
    background: rgba(202, 158, 78, 0.15) !important;
    border-color: rgba(202, 158, 78, 0.35) !important;
    transform: scale(0.98) !important;
  }

  .nav-room-thumb {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(202, 158, 78, 0.3) !important;
    background-size: cover !important;
    background-position: center !important;
  }

  .nav-room-info {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1px !important;
  }

  .nav-room-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #f0f0f0 !important;
    font-family: "DM Sans", sans-serif !important;
    line-height: 1.2 !important;
    transition: color 0.3s ease !important;
  }
  .nav-room-link:hover .nav-room-name,
  .nav-room-link:active .nav-room-name {
    color: #ffffff !important;
  }

  .nav-room-tag {
    font-size: 10px !important;
    color: #ca9e4e !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }

  .nav-service-card {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px 8px 8px !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
  }
  .nav-service-card:hover,
  .nav-service-card:active {
    background: rgba(202, 158, 78, 0.15) !important;
    border-color: rgba(202, 158, 78, 0.35) !important;
  }

  .nav-service-thumb {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    margin-right: 12px !important;
    border: 1px solid rgba(202, 158, 78, 0.3) !important;
    flex-shrink: 0 !important;
  }

  .nav-service-title {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #f0f0f0 !important;
    font-family: "DM Sans", sans-serif !important;
  }

  .nav-service-desc {
    display: none !important;
  }
  .nav-service-arrow {
    display: none !important;
  }

  /* Drawer Footer CTA & Quick Action Bar */
  .mob-drawer-btn-wrap {
    margin: 15px 24px 10px 24px !important;
    width: auto !important;
  }
  .mob-drawer-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 13px 20px !important;
    background: linear-gradient(135deg, #e5c378 0%, #ca9e4e 50%, #8c6a28 100%) !important;
    color: #000000 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;
    border: none !important;
    box-shadow: 0 8px 25px rgba(202, 158, 78, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  }
  .mob-drawer-cta:active {
    transform: scale(0.97) !important;
  }

  .mob-drawer-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    padding: 12px 20px 20px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: auto !important;
  }
  .mob-foot-link {
    color: #cccccc !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: color 0.25s ease !important;
  }
  .mob-foot-link i {
    color: #ca9e4e !important;
    font-size: 13px !important;
  }
  .mob-foot-link.mob-foot-wa i {
    color: #25d366 !important;
  }
  .mob-foot-link:hover,
  .mob-foot-link:active {
    color: #ffffff !important;
  }
  .mob-foot-sep {
    width: 1px !important;
    height: 14px !important;
    background: rgba(255, 255, 255, 0.12) !important;
  }
  .mob-foot-loc {
    color: #999999 !important;
    font-size: 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .mob-foot-loc i {
    color: #ca9e4e !important;
  }
}

/* Desktop: hide mobile-only elements */
@media (min-width: 992px) {
  .mob-nav-bar {
    display: flex !important;
    height: auto !important;
    padding: 0 !important;
  }
  .mob-logo-center {
    position: static !important;
    transform: none !important;
    height: auto !important;
  }
  .mob-logo-img {
    height: 38px !important;
  }
  .mob-hamburger {
    display: none !important;
  }
  .mob-book-btn,
  .mob-drawer-footer {
    display: none !important;
  }
}

/* ============================================================
   PREMIUM GALLERY REDESIGN
   ============================================================ */

.premium-gallery-section {
  background: #fafafa;
  overflow: hidden;
}

.premium-gallery-header {
  margin-bottom: 50px;
}

.premium-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(202, 158, 78, 0.1);
  color: #ca9e4e;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-radius: 30px;
  margin-bottom: 20px;
}

.premium-title {
  font-size: 42px;
  font-weight: 700;
  color: #111;
  margin-bottom: 15px;
  font-family: "Sora", sans-serif;
}

.premium-title span {
  color: #ca9e4e;
}

.premium-desc {
  font-size: 16px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.8;
}

.premium-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 350px);
  gap: 24px;
  width: 100%;
}

.premium-item {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  display: block;
  box-shadow: 0 15px 35px rgba(0,0,0,0.05);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
}

.premium-large {
  grid-column: span 2;
  grid-row: span 2;
}
.premium-tall {
  grid-column: span 1;
  grid-row: span 2;
}
.premium-wide {
  grid-column: span 2;
  grid-row: span 1;
}

.premium-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0) 100%);
  display: flex;
  align-items: flex-end;
  padding: 30px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.premium-content {
  transform: translateY(20px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  color: #fff;
  margin-bottom: 15px;
  font-size: 16px;
}

.premium-content h4 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-family: "Sora", sans-serif;
}

/* Hover Effects */
.premium-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0,0,0,0.15);
  z-index: 2;
}

.premium-item:hover .premium-img {
  transform: scale(1.08);
}

.premium-item:hover .premium-overlay {
  opacity: 1;
}

.premium-item:hover .premium-content {
  transform: translateY(0);
}

/* Dimming siblings on hover of grid */
.premium-gallery-grid:hover .premium-item:not(:hover) {
  opacity: 0.6;
  filter: grayscale(40%);
}

/* Responsive */
@media (max-width: 991px) {
  .premium-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: 250px;
  }
  .premium-large {
    grid-column: span 2;
    grid-row: span 2;
  }
  .premium-wide, .premium-tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}

@media (max-width: 767px) {
  .premium-gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
  }
  .premium-large, .premium-wide, .premium-tall {
    grid-column: span 1;
    grid-row: span 1;
  }
  .premium-title {
    font-size: 32px;
  }
}


/* --- Cinematic Booking Form Optimizations --- */

/* Dropdown Optimization */
select.lx-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: transparent !important;
}
select.lx-input option {
    background: #1a1a1a !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
}

/* Datepicker Cinematic Golden Glow Optimization */
.datepicker.dropdown-menu {
    background: rgba(12, 12, 12, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(202, 158, 78, 0.25) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(202, 158, 78, 0.15) !important;
    color: #e0e0e0 !important;
    /* DM Sans is loaded (top of this file); Inter never is, so it fell
       back to whatever local "Inter" a visitor had installed. */
    font-family: "DM Sans", sans-serif !important;
}
.datepicker.dropdown-menu::before, .datepicker.dropdown-menu::after {
    display: none !important;
}
.datepicker table {
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 4px !important;
}

/* Header */
.datepicker table thead tr:first-child th {
    background: transparent !important;
    padding: 0 0 20px !important;
    border: none !important;
}
.datepicker table thead tr:first-child th.datepicker-switch {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ca9e4e !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    text-shadow: 0 2px 10px rgba(202, 158, 78, 0.4) !important;
}
.datepicker table thead tr:first-child th.prev, 
.datepicker table thead tr:first-child th.next {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}
.datepicker table thead tr:first-child th.prev:hover,
.datepicker table thead tr:first-child th.next:hover {
    background: rgba(202, 158, 78, 0.2) !important;
    color: #ca9e4e !important;
    box-shadow: 0 0 12px rgba(202, 158, 78, 0.3) !important;
}

/* Days of the week */
.datepicker table thead tr:nth-child(2) th {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #777 !important;
    padding: 0 0 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    border: none !important;
}

/* Grid Cells - Cinematic Glow */
.datepicker table tbody {
    border: none !important;
}
.datepicker table tbody tr td, .datepicker table tbody tr th {
    border: none !important;
    width: 42px !important;
    height: 42px !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 0 !important;
    border-radius: 50% !important;
}
.datepicker table tbody tr td.day {
    color: #e0e0e0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    position: relative !important;
    cursor: pointer !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    z-index: 1 !important;
}

/* Hover Effect - Spotlight Radial Glow */
.datepicker table tbody tr td.day::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(0) !important;
    width: 42px !important;
    height: 42px !important;
    background: radial-gradient(circle, rgba(202,158,78,0.5) 0%, rgba(202,158,78,0) 70%) !important;
    border-radius: 50% !important;
    z-index: -1 !important;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease !important;
    opacity: 0 !important;
}
.datepicker table tbody tr td.day:hover::before {
    transform: translate(-50%, -50%) scale(1.6) !important;
    opacity: 1 !important;
}
.datepicker table tbody tr td.day:hover {
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255,255,255,0.9) !important;
}

/* Active Selection - Physical Gold Coin */
.datepicker table tbody tr td.active,
.datepicker table tbody tr td.active:hover {
    color: #000 !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #e5c378 0%, #ca9e4e 50%, #8c6a28 100%) !important;
    text-shadow: none !important;
    box-shadow: 0 8px 20px rgba(202, 158, 78, 0.5), inset 0 2px 4px rgba(255,255,255,0.6) !important;
    transform: translateY(-2px) !important;
}
.datepicker table tbody tr td.active::before,
.datepicker table tbody tr td.active:hover::before {
    display: none !important;
}

/* Faded Out Dates */
.datepicker table tbody tr td.old::before, 
.datepicker table tbody tr td.new::before,
.datepicker table tbody tr td.disabled::before {
    display: none !important;
}
.datepicker table tbody tr td.old, 
.datepicker table tbody tr td.new,
.datepicker table tbody tr td.disabled {
    color: #444 !important;
    font-weight: 400 !important;
    pointer-events: none !important;
}

/* Fix Hero Section Overflow for Dropdowns */
.luxevo-hero, .luxevo-image-card {
    overflow: visible !important;
}
.luxevo-slider, .luxevo-slider .swiper-container {
    border-radius: 18px !important;
    overflow: hidden !important;
}

/* Dropdown Plugin (nice-select) Optimization */
.lx-guest-field .nice-select .list {
    background: #161616 !important;
    border: 1px solid #333 !important;
    border-radius: 12px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6) !important;
    width: 100%;
}
.lx-guest-field .nice-select .option {
    color: #fff !important;
    font-size: 14px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    background: transparent !important;
}
.lx-guest-field .nice-select .option:hover, .lx-guest-field .nice-select .option.focus, .lx-guest-field .nice-select .option.selected.focus {
    background: #2a2a2a !important;
}
.lx-guest-field .nice-select .option.selected {
    color: #ca9e4e !important;
    font-weight: 600 !important;
}

/* ============================================================
   INTERACTIVE FLOATING GOLD EMBLEM WIDGET
   ============================================================ */
.call-btn {
  display: none !important;
}

.lux-contact-fab {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  z-index: 99999 !important;
}

/* Trigger Emblem Button */
.lux-contact-fab .fab-trigger {
  width: 58px !important;
  height: 58px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #e5c378 0%, #ca9e4e 50%, #8c6a28 100%) !important;
  border: none !important;
  box-shadow:
    0 10px 30px rgba(202, 158, 78, 0.45),
    inset 0 2px 4px rgba(255, 255, 255, 0.6) !important;
  cursor: pointer !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
}

.lux-contact-fab .fab-trigger:hover {
  transform: scale(1.08) translateY(-2px) !important;
  box-shadow:
    0 14px 35px rgba(202, 158, 78, 0.65),
    inset 0 2px 4px rgba(255, 255, 255, 0.7) !important;
}

/* Ambient Gold Pulse Ring */
@keyframes fabGoldPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(202, 158, 78, 0.6);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(202, 158, 78, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(202, 158, 78, 0);
  }
}
.lux-contact-fab .fab-trigger::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  animation: fabGoldPulse 2.5s infinite !important;
  z-index: -1 !important;
}

.lux-contact-fab .fab-trigger-icon {
  font-size: 22px !important;
  color: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.lux-contact-fab .icon-close {
  position: absolute !important;
  opacity: 0 !important;
  transform: rotate(-90deg) scale(0.5) !important;
}

.lux-contact-fab.active .icon-default {
  opacity: 0 !important;
  transform: rotate(90deg) scale(0.5) !important;
}
.lux-contact-fab.active .icon-close {
  opacity: 1 !important;
  transform: rotate(0) scale(1) !important;
}
.lux-contact-fab.active .fab-trigger {
  background: #111111 !important;
  border: 1px solid rgba(202, 158, 78, 0.5) !important;
}
.lux-contact-fab.active .icon-close i {
  color: #ca9e4e !important;
}

/* Speed Dial Expanded Card */
.lux-contact-fab .fab-menu {
  position: absolute !important;
  bottom: calc(100% + 14px) !important;
  left: 0 !important;
  width: 240px !important;
  background: rgba(14, 14, 14, 0.95) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border-radius: 22px !important;
  border: 1px solid rgba(202, 158, 78, 0.3) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(202, 158, 78, 0.18) !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(15px) scale(0.92) !important;
  transform-origin: bottom left !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

.lux-contact-fab.active .fab-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* Card Header */
.lux-contact-fab .fab-menu-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 8px !important;
  margin-bottom: 2px !important;
}
.lux-contact-fab .fab-menu-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #ca9e4e !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  display: block !important;
}
.lux-contact-fab .fab-menu-sub {
  font-size: 11px !important;
  color: #888888 !important;
  display: block !important;
}

/* Menu Items */
.lux-contact-fab .fab-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.lux-contact-fab .fab-item:hover,
.lux-contact-fab .fab-item:active {
  background: rgba(202, 158, 78, 0.18) !important;
  border-color: rgba(202, 158, 78, 0.4) !important;
  transform: translateX(4px) !important;
}

.lux-contact-fab .fab-icon-box {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

.lux-contact-fab .fab-call .fab-icon-box {
  background: linear-gradient(135deg, #e5c378 0%, #ca9e4e 100%) !important;
  color: #000000 !important;
}
.lux-contact-fab .fab-wa .fab-icon-box {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%) !important;
  color: #ffffff !important;
}

.lux-contact-fab .fab-item-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.lux-contact-fab .fab-item-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
}
.lux-contact-fab .fab-item-detail {
  font-size: 11px !important;
  color: #a0a0a0 !important;
}

/* Hide when mobile menu drawer is open */
body.mob-menu-open .lux-contact-fab {
  display: none !important;
}

/* Mobile Adjustments */
@media (max-width: 640px) {
  .lux-contact-fab {
    bottom: 20px !important;
    left: 18px !important;
  }
  .lux-contact-fab .fab-trigger {
    width: 52px !important;
    height: 52px !important;
  }
  .lux-contact-fab .fab-trigger-icon {
    font-size: 20px !important;
  }
  .lux-contact-fab .fab-menu {
    width: 220px !important;
  }
}

/* ── CINEMATIC STICKY SEQUENCE ── */
.lux-scroll-sequence {
  position: relative;
  /* 9 items * 80vh = 720vh to provide a long, deep scroll experience */
  height: 720vh; 
  background: #fbf9f5;
}

/* The frame that stays pinned to the screen */
.lx-ss-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The 2-column layout inside the frame */
.lx-ss-frame {
  width: 100%;
  max-width: calc(1440px + clamp(20px, 5vw, 80px) * 2);
  padding: 0 clamp(20px, 5vw, 80px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10vw;
}

/* LEFT COLUMN: Text & Timeline */
.lx-ss-left {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
}

.lx-ss-header {
  margin-bottom: 60px;
}
.lx-ss-eyebrow {
  display: block;
  color: #ca9e4e;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.lx-ss-header h2 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(2.5rem, 4vw, 4.5rem);
  font-weight: 200;
  color: #14171a;
  margin: 0;
  line-height: 1.1;
}
.lx-ss-header h2 em {
  font-weight: 600;
  color: #ca9e4e;
  font-style: italic;
}

/* Texts Layer */
.lx-ss-texts {
  position: relative;
  height: 180px; /* fixed height so timeline doesn't jump */
  margin-bottom: 60px;
}
.lx-ss-text {
  position: absolute;
  top: 0; left: 0; width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.lx-ss-text.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.lx-ss-text h3 {
  font-family: 'Sora', sans-serif;
  font-size: clamp(1.6rem, 2.5vw, 2.5rem);
  font-weight: 700;
  color: #14171a;
  margin: 0 0 16px 0;
}
.lx-ss-text p {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: #4e565c;
  margin: 0;
}

/* Timeline */
.lx-ss-timeline {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(20, 23, 26, 0.1);
}
.lx-ss-progress {
  position: absolute;
  top: 0; left: 0; height: 100%;
  background: #ca9e4e;
  width: 0%;
  transition: width 0.1s linear; /* Smooth hardware acceleration */
}
.lx-ss-dots {
  position: absolute;
  top: -24px; left: 0; width: 100%;
  display: flex;
  justify-content: space-between;
}
.lx-ss-dots span {
  font-family: 'Sora', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(20, 23, 26, 0.3);
  transition: color 0.4s;
}
.lx-ss-dots span.active {
  color: #ca9e4e;
}

/* RIGHT COLUMN: Images */
.lx-ss-right {
  flex: 0 0 50%;
}
.lx-ss-images {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5; /* Majestic portrait cinematic frame */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.15);
}
.lx-ss-img {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lx-ss-img.active {
  opacity: 1;
  transform: scale(1);
}

/* Mobile Adjustments */
@media(max-width: 991px) {
  .lux-scroll-sequence {
    height: 900vh; /* A bit more scroll length on mobile */
  }
  .lx-ss-frame {
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    padding-top: 80px; /* Offset for header */
  }
  .lx-ss-left {
    flex: none;
    width: 100%;
    order: 2; /* Text below image on mobile */
  }
  .lx-ss-right {
    flex: none;
    width: 100%;
    order: 1;
  }
  .lx-ss-header {
    display: none; /* Hide main header to save space, or make it smaller */
  }
  .lx-ss-images {
    aspect-ratio: 16 / 10; /* Landscape on mobile to save vertical space */
  }
  .lx-ss-texts {
    height: 140px;
    margin-bottom: 40px;
    text-align: center;
  }
  .lx-ss-text h3 {
    margin-bottom: 8px;
  }
}

/* Support Board: its welcome pop-up renders as an empty white bubble when no
   message text is configured. Show it only when it actually has text. */
.sb-popup-message:has(> .sb-text:empty) {
  display: none !important;
}

/* Hero wordmarks are <h1> for SEO; keep the spacing they had as <div>s. */
h1.luxevo-brand-text {
  margin-bottom: 0;
}

/* ── MOBILE DRAWER SUBMENUS (Rooms / Services) ──────────────────────────────
   The desktop mega-menu rules (white panels, dark text, hover visibility)
   out-rank the drawer's dark styles, so on phones an opened submenu showed
   white boxes with unreadable near-white names -- or stayed invisible when
   the tap didn't register as :hover. Everything here is scoped to the
   drawer below 992px; the desktop mega menu is untouched. */
@media (max-width: 991px) {
  #mobile-nav .nav.navbar-nav > li.dropdown.open > .dropdown-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    max-height: none !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 4px 0 14px !important;
    padding: 8px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(202, 158, 78, 0.2) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
  }
  #mobile-nav .dropdown.open > .dropdown-menu * { visibility: visible !important; }

  /* Rooms / Services chevrons: the drawer set them to weight 400, which in
     Font Awesome 5 Free is the Regular set -- it has no angle-down glyph,
     so the icon rendered blank. 900 is the Solid set .fa normally uses. */
  header.main_header_area .header_menu #mobile-nav .navbar-nav > li > a i.fa-angle-down {
    font-weight: 900 !important;
    font-size: 16px !important;
    margin-left: 10px !important;
    opacity: 1 !important;
  }
  /* Point up only while the submenu is open -- not just because it's the
     current section (a desktop rule flips it for li.active). */
  header.main_header_area .header_menu #mobile-nav .navbar-nav > li.dropdown:not(.open) > a i.fa-angle-down {
    transform: none !important;
  }

  /* The "hide floating chat/WhatsApp widgets while the menu is open" rule
     matches [class*="whatsapp"], which also caught the drawer's own
     fa-whatsapp icon. Keep everything inside the drawer visible. */
  body.mob-menu-open #mobile-nav [class*="whatsapp"],
  body.mob-menu-open #mobile-nav [class*="chat"],
  body.mob-menu-open #mobile-nav [class*="call"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* The last link's divider doubled up with the footer's top border. */
  header.main_header_area .header_menu #mobile-nav .navbar-nav > li:last-child > a {
    border-bottom: none !important;
  }
  header.main_header_area .header_menu #mobile-nav .navbar-nav {
    padding-bottom: 10px !important;
  }

  /* Rooms: two titled lists + featured suite */
  #mobile-nav .nav-mega-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
  }
  #mobile-nav .nav-mega-col {
    width: 100% !important;
    padding: 6px 2px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #mobile-nav .nav-cat-label {
    margin: 0 0 6px !important;
    padding: 4px 10px 10px !important;
    color: #ca9e4e !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  #mobile-nav .nav-cat-label::after { display: none !important; }
  #mobile-nav .nav-room-links { gap: 2px !important; padding: 0 !important; }

  #mobile-nav .nav-room-link,
  #mobile-nav .nav-service-card {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 60px !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    transform: none !important;
  }
  #mobile-nav .nav-room-link:hover,
  #mobile-nav .nav-room-link:active,
  #mobile-nav .nav-service-card:hover,
  #mobile-nav .nav-service-card:active {
    background: rgba(202, 158, 78, 0.12) !important;
    border-color: rgba(202, 158, 78, 0.3) !important;
    transform: none !important;
  }

  #mobile-nav .nav-room-thumb,
  #mobile-nav .nav-service-thumb {
    width: 46px !important;
    height: 46px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid rgba(202, 158, 78, 0.35) !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
  }

  #mobile-nav .nav-room-info,
  #mobile-nav .nav-service-overlay {
    position: static !important;
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 !important;
    background: none !important;
  }
  #mobile-nav .nav-room-name,
  #mobile-nav .nav-service-title {
    margin: 0 !important;
    color: #f2f2f2 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    box-shadow: none !important;
  }
  #mobile-nav .nav-room-tag,
  #mobile-nav .nav-service-desc {
    display: block !important;
    margin: 0 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    white-space: normal !important;
  }
  #mobile-nav .nav-room-arrow,
  #mobile-nav .nav-service-arrow {
    display: inline-block !important;
    flex-shrink: 0 !important;
    margin: 0 4px 0 0 !important;
    color: rgba(202, 158, 78, 0.75) !important;
    font-size: 12px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Featured suite card + quick stats */
  #mobile-nav .nav-mega-right {
    display: block !important;
    width: 100% !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  #mobile-nav .nav-mega-hero {
    display: block !important;
    min-height: 190px !important;
    height: auto !important;
    border-radius: 0 !important;
  }
  #mobile-nav .nav-mega-hero-overlay { padding: 18px !important; }
  #mobile-nav .nav-mega-hero-sub { color: rgba(255, 255, 255, 0.75) !important; }
  #mobile-nav .nav-mega-stats {
    display: flex !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  #mobile-nav .nav-mega-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    text-decoration: none !important;
    padding: 14px 6px !important;
    justify-content: center !important;
    gap: 4px !important;
  }
  #mobile-nav .nav-stat-num { color: #ca9e4e !important; font-size: 18px !important; line-height: 1.1 !important; }
  #mobile-nav .nav-stat-link .nav-stat-num { font-size: 14px !important; letter-spacing: 0.08em !important; }
  #mobile-nav .nav-stat-label { color: rgba(255, 255, 255, 0.55) !important; font-size: 10px !important; line-height: 1.4 !important; letter-spacing: 0.1em !important; }

  /* Services list */
  #mobile-nav .nav-services-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
}

/* ── HOMEPAGE BOOKING-BAR DATEPICKER ON PHONES ──────────────────────────────
   bootstrap-datepicker anchors the calendar to the input; on a phone that
   pushed it ~200px off the left edge and above the top of the screen, and
   at 7 x 42px cells it was wider than the screen anyway. Below 768px show
   it as a centred dialog over a dimmed page instead (the plugin's inline
   top/left lose to !important). Desktop placement is unchanged. */
@media (max-width: 767px) {
  .datepicker.dropdown-menu {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(340px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 32px) !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 16px !important;
    z-index: 1000010 !important;
    box-shadow:
      0 0 0 100vmax rgba(0, 0, 0, 0.55),
      0 30px 60px rgba(0, 0, 0, 0.8) !important;
  }
  .datepicker.dropdown-menu table { width: 100% !important; border-spacing: 2px !important; }
  .datepicker table tbody tr td,
  .datepicker table tbody tr th {
    width: auto !important;
    height: 38px !important;
  }
}