/* ==========================================================================
   LUXURY THEME — sitewide presentation layer
   Loaded after style.css so equal-specificity rules win by source order.
   Scoped to existing template classes (header-four, footer-two, btn-primary,
   section-header, home-* tokens already established on the homepage) so the
   whole site reads as one consistent, premium, editorial resort brand.
   No structure/behaviour is changed here — presentation only.
   ========================================================================== */

:root {
  --lux-ivory: #F7F7EE;
  --lux-ivory-2: #F1EFE1;
  --lux-cream: #EDE6D3;
  --lux-green: #052727;
  --lux-green-soft: #0B3838;
  --lux-charcoal: #16140F;
  --lux-gold: #B6996A;
  --lux-gold-soft: #D8C39C;
  --lux-line: #E3DFCB;
  --lux-serif: 'Lora', Georgia, serif;
  --lux-script: 'Tangerine', cursive;
  --lux-sans: 'DM Sans', 'IBM Plex Sans', sans-serif;
  --lux-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Mode-aware layer for inner pages (About/Rooms/Gallery/Services/Contact). The brand
     tokens above never change -- buttons, badges and icon chips keep exact brand colors
     in both themes. These are what actually flip: surfaces are card/page backgrounds,
     ink is text sitting on those surfaces. */
  --lux-surface: var(--lux-ivory);
  --lux-surface-2: var(--lux-ivory-2);
  --lux-ink: var(--lux-green);
  --lux-ink-soft: var(--lux-green-soft);
  --lux-ink-rgb: 5, 39, 39;
}
.dark-mode {
  --lux-surface: #0D1613;
  --lux-surface-2: #131F1A;
  --lux-ink: #F2F0E4;
  --lux-ink-soft: rgba(242, 240, 228, 0.68);
  --lux-ink-rgb: 242, 240, 228;
  --lux-line: rgba(242, 240, 228, 0.14);
}

/* ================= Global type nudge =================
   Same specificity as style.css's own h1..h6/body rules; wins on source order.
   The color here is a sitewide dark-mode safety net: none of the inner pages
   (About/Rooms/Gallery/Services/Contact/Celebrations) have a fixed dark-green
   section like the homepage does, so every heading/body text on them is safe
   to flip via --lux-ink/--lux-surface. Anything more specific (the homepage's
   own --home-* system, buttons, badges) already wins over this on specificity
   or source order, so this only fills in whatever wasn't individually audited. */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--lux-serif);
  color: var(--lux-ink);
}
body {
  font-family: var(--lux-sans);
  color: var(--lux-ink-soft);
  background-color: var(--lux-surface);
}

/* ================= Header ================= */
.main-header.main-header-four .header-nav .main-menu-wrapper {
  padding: 26px 0;
  transition: padding 0.4s var(--lux-ease);
}
header.fixed .header-nav .main-menu-wrapper {
  padding: 14px 0;
}

header .navbar-logo {
  transition: background-color 0.4s ease, padding 0.4s ease;
}
header:not(.fixed) .navbar-logo {
  background: rgba(247, 247, 238, 0.9);
  padding: 8px 18px;
  border-radius: 3px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
header.fixed .navbar-logo {
  background: transparent;
  padding: 0;
}
header .navbar-logo img.logo {
  max-height: 38px;
}

header .header-nav .main-menu-wrapper .main-nav > li > a {
  font-family: var(--lux-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
header .header-nav .main-menu-wrapper .main-nav > li > a:hover {
  color: var(--lux-gold);
}
header.fixed .header-nav .main-menu-wrapper .main-nav > li > a {
  color: var(--lux-green);
}
/* Template's own "active/hover nav link" rule is a 6-class selector (.main-header.main-header-four
   .header-nav .header-nav .main-menu-wrapper .main-nav > li.active > a) hardcoded to the same
   off-brand red (#CF3425) used everywhere else -- outranks the plain hover rule above, so the
   current page's nav item (and any hovered item) stayed red regardless of theme. */
.main-header.main-header-four .header-nav .main-menu-wrapper .main-nav > li.active > a,
.main-header.main-header-four .header-nav .main-menu-wrapper .main-nav > li:hover > a {
  color: var(--lux-gold) !important;
}
header .header-nav .main-menu-wrapper .main-nav > li.active > a::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lux-gold);
  bottom: -4px;
}

header.fixed {
  background-color: rgba(247, 247, 238, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(5, 39, 39, 0.08);
  border-bottom: 1px solid var(--lux-line);
}

header .header-btn .theme-toggle:hover,
header .header-btn a:hover i.isax-user {
  color: var(--lux-gold);
}

/* Book Now — solid gold fill at all times. An outline-only "ghost" button here used to
   rely entirely on the hero photo being dark enough behind it for the white text/border
   to read; the hero is a slideshow of several photos and some frames are light enough at
   the top that the button became genuinely invisible until hovered. A solid fill can't
   disappear regardless of what's behind it. */
.main-header-four .header-btn > a.btn.btn-primary {
  background: var(--lux-gold) !important;
  border: 1px solid var(--lux-gold) !important;
  color: var(--lux-green) !important;
  border-radius: 2px !important;
  box-shadow: 0 2px 12px rgba(5, 39, 39, 0.25) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 11px 22px !important;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.main-header-four .header-btn > a.btn.btn-primary:hover {
  background: var(--lux-green) !important;
  border-color: var(--lux-green) !important;
  color: var(--lux-ivory) !important;
  box-shadow: 0 4px 16px rgba(5, 39, 39, 0.3) !important;
}
header.fixed .header-btn > a.btn.btn-primary {
  background: var(--lux-green) !important;
  border-color: var(--lux-green) !important;
  color: var(--lux-ivory) !important;
  box-shadow: none !important;
}
header.fixed .header-btn > a.btn.btn-primary:hover {
  background: var(--lux-gold) !important;
  border-color: var(--lux-gold) !important;
  color: var(--lux-green) !important;
}

@media (max-width: 575.98px) {
  header .navbar-logo img.logo {
    max-height: 30px;
  }
  header:not(.fixed) .navbar-logo {
    padding: 6px 12px;
  }
}

/* The stock template hides the header's primary button entirely below 1200px
   (`header .header-btn .btn { display: none !important; }` in style.css) with no
   mobile replacement -- meaning Book Now vanished on every tablet and phone. It's
   the site's main conversion action, so force it back and just tighten it up as
   the screen narrows instead of losing it. */
@media (max-width: 1199.98px) {
  .main-header-four .header-btn > a.btn.btn-primary {
    display: inline-flex !important;
  }
}
@media (max-width: 480px) {
  .main-header-four .header-btn > a.btn.btn-primary {
    padding: 8px 14px !important;
    font-size: 10.5px;
    letter-spacing: 0.06em;
  }
}

/* Mobile menu (meanmenu) — quiet ivory panel instead of the stock look */
.mean-container .mean-bar {
  background: transparent;
}
.mean-container .mean-nav {
  background: var(--lux-ivory);
}
.mean-container .mean-nav ul {
  padding: 6px 0;
}
.mean-container .mean-nav ul li a {
  font-family: var(--lux-sans);
  color: var(--lux-green);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-top-color: var(--lux-line) !important;
  padding: 16px 5%;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--lux-gold);
}
.mean-container a.meanmenu-reveal span {
  background: var(--lux-green);
}

/* ================= Global buttons (baseline for inner pages) ================= */
.btn.btn-primary {
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.btn.btn-primary:hover {
  opacity: 0.9;
}

/* Circular "read more" arrow (room categories, blog cards, etc.) -- template default is a pale
   grey with a white glyph (near-invisible at rest) that flips to off-brand red on hover. */
.rounded-arrow-next {
  background: var(--lux-ivory);
  color: var(--lux-green);
}
.rounded-arrow-next:hover {
  background: var(--lux-green);
  color: var(--lux-ivory);
}
.travelers-card:hover .rounded-arrow-next,
.blog-grid:hover .rounded-arrow-next {
  background: var(--lux-green);
  color: var(--lux-ivory);
}

/* ================= Global section-header rhythm (inner pages) ================= */
.section-header p.mb-2 {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 600;
}
.section-header .text-bar {
  width: 30px;
  height: 2px;
  background: var(--lux-gold);
  margin-right: 10px;
  display: inline-block;
}

/* ================= Footer ================= */
.footer-two {
  background: var(--lux-green);
  color: rgba(247, 247, 238, 0.72);
}
.footer-two .footer-top .footer-widget h5 {
  font-family: var(--lux-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lux-ivory);
}
.footer-two .footer-top .footer-widget h5::before {
  background: var(--lux-gold);
}
.footer-two .footer-top .footer-widget .footer-menu li a,
.footer-two .footer-top .footer-widget p {
  color: rgba(247, 247, 238, 0.65);
}
.footer-two .footer-top .footer-widget .footer-menu li a:hover {
  color: var(--lux-gold);
}
.footer-two .customer-info .customer-info-icon span {
  background: rgba(247, 247, 238, 0.08);
  color: var(--lux-gold);
}
.footer-two .customer-info .customer-info-content span {
  color: rgba(247, 247, 238, 0.55);
}
.footer-two .customer-info .customer-info-content h6 a {
  color: var(--lux-ivory);
}
/* Note: display is deliberately untouched here -- style.css toggles which of
   these two spans is shown (light/dark mode); overriding display would show
   both logos stacked at once. */
.footer-two .footer-widget span.footer-logo-light,
.footer-two .footer-widget span.footer-logo-dark {
  background: var(--lux-ivory);
  padding: 10px 20px;
  border-radius: 3px;
  width: fit-content;
}
.footer-two .footer-bottom {
  background: var(--lux-charcoal);
  border-top: 1px solid rgba(247, 247, 238, 0.08);
}
.footer-two .footer-bottom p,
.footer-two .footer-bottom .fs-14 {
  color: rgba(247, 247, 238, 0.5);
}
.footer-two .footer-bottom .text-primary {
  color: var(--lux-gold) !important;
}
.footer-two .social-icon-two li a {
  background: rgba(247, 247, 238, 0.08);
  color: var(--lux-ivory);
}
.footer-two .social-icon-two li a:hover {
  background: var(--lux-gold);
  color: var(--lux-green);
}

/* Closing cinematic statement — new block, inserted above the existing footer content */
.footer-statement {
  background: var(--lux-green);
  text-align: center;
  padding: 130px 20px 100px;
  position: relative;
}
.footer-statement::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, rgba(182, 153, 106, 0), var(--lux-gold));
}
.footer-statement .footer-eyebrow {
  font-family: var(--lux-sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 12px;
  font-weight: 600;
  color: var(--lux-gold);
  margin-bottom: 20px;
}
.footer-statement .footer-heading {
  font-family: var(--lux-serif);
  font-weight: 500;
  color: var(--lux-ivory);
  font-size: clamp(2.4rem, 5.5vw, 4.6rem);
  line-height: 1.12;
  margin-bottom: 34px;
}
.footer-statement .btn-lux {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--lux-gold);
  color: var(--lux-ivory);
  background: transparent;
  padding: 15px 34px;
  border-radius: 2px;
  font-family: var(--lux-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.footer-statement .btn-lux:hover {
  background: var(--lux-gold);
  color: var(--lux-green);
}
.footer-statement .btn-lux span {
  transition: transform 0.3s ease;
}
.footer-statement .btn-lux:hover span {
  transform: translateX(6px);
}

@media (max-width: 767.98px) {
  .footer-statement {
    padding: 90px 16px 70px;
  }
}

/* ================= Hero cinematic load-in ================= */
@keyframes lux-hero-zoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
.hero-sec-two .home-vertical-slider .slider-fors .slick-slide img {
  animation: lux-hero-zoom 2.4s var(--lux-ease) both;
}

/* ================= Wave section dividers =================
   Hand-authored, seamless 12-period SVG wave (no third-party asset).
   Each instance sits between two homepage sections: the div's own
   background-color continues the section ABOVE it, the path's fill
   is the color of the section BELOW it, and the crest line between
   them animates via a looping transform (translateX -50%) so the
   wave visibly flows sideways rather than sitting static. */
.wave-divider {
  position: relative;
  width: 100%;
  height: clamp(42px, 6.5vw, 96px);
  overflow: hidden;
  line-height: 0;
  /* The clamp() height resolves to a non-integer pixel value at most viewport widths;
     browsers can then rasterise this box a hair short of the next section, leaving a
     1px seam of the page background visible as a thin horizontal line. Pull the next
     section up slightly to guarantee overlap instead of a gap. */
  margin-bottom: -2px;
  /* The animated child below gets promoted to its own GPU compositing layer; without
     this, Chrome can render a faint seam at the overflow:hidden clip edge where that
     layer meets the surrounding page. Promoting this element too keeps both layers
     pixel-aligned. */
  transform: translateZ(0);
  isolation: isolate;
}
.wave-divider svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  /* A few px taller than the container, clipped away by the parent's overflow:hidden --
     guarantees the fill always reaches past the visible bottom edge with margin to
     spare, regardless of any sub-pixel jitter from the horizontal flow animation. */
  height: calc(100% + 6px);
  display: block;
  animation: lux-wave-flow 11s linear infinite;
}
.wave-divider--slow svg {
  animation-duration: 16s;
}
.wave-divider--rtl svg {
  animation-direction: reverse;
}
@keyframes lux-wave-flow {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .wave-divider svg {
    animation: none;
  }
}

/* The ivory/cream/white sides are the ones that need to darken in dark mode along with
   the sections they connect to -- they route through the same --lux-surface(-2) tokens
   those sections use, instead of the fixed brand ivory/cream (which must stay put for
   green-side badges/buttons elsewhere and so never change under .dark-mode). The green
   side is intentionally untouched: those sections are already dark and stay that way in
   both themes. */
.wave-divider--ivory-to-green { background-color: var(--lux-surface); }
.wave-divider--ivory-to-green path { fill: var(--lux-green); }
.wave-divider--green-to-ivory { background-color: var(--lux-green); }
.wave-divider--green-to-ivory path { fill: var(--lux-surface); }
.wave-divider--cream-to-green { background-color: var(--lux-surface-2); }
.wave-divider--cream-to-green path { fill: var(--lux-green); }
.wave-divider--white-to-green { background-color: var(--lux-surface); }
.wave-divider--white-to-green path { fill: var(--lux-green); }
.wave-divider--green-to-cream { background-color: var(--lux-green); }
.wave-divider--green-to-cream path { fill: var(--lux-surface-2); }

/* Bring the counters section into the established palette instead of
   the template's default off-brand navy, so the new wave seams read cleanly. */
.offers-section {
  background: var(--lux-green);
  margin-bottom: 0;
}

/* ================= Scroll-reveal system =================
   Vanilla IntersectionObserver toggles .is-visible (see luxury-reveal.js).
   transform/opacity/clip-path only — no layout-affecting properties. */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.9s var(--lux-ease), transform 0.9s var(--lux-ease), clip-path 1.1s var(--lux-ease);
}
[data-reveal="fade-up"] {
  transform: translateY(36px);
}
[data-reveal="clip"] {
  clip-path: inset(0 0 100% 0);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0% 0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .hero-sec-two .home-vertical-slider .slider-fors .slick-slide img {
    animation: none !important;
  }
}

/* ================= Dark-mode toggle compatibility =================
   The site already ships a light/dark class switcher (theme-script.js).
   Keep the luxury header/footer legible in both states instead of fighting it. */
.dark-mode header.fixed {
  background-color: rgba(22, 20, 15, 0.92);
  border-bottom-color: rgba(247, 247, 238, 0.08);
}
.dark-mode header.fixed .header-nav .main-menu-wrapper .main-nav > li > a {
  color: var(--lux-ivory);
}
.dark-mode header:not(.fixed) .navbar-logo {
  background: rgba(22, 20, 15, 0.75);
}
.dark-mode header .main-menu-wrapper .main-nav > li .submenu {
  background: #16140F !important;
}
.dark-mode header .header-nav .main-menu-wrapper .main-nav > li .submenu li a {
  color: var(--lux-ivory) !important;
}
.dark-mode .mean-container .mean-nav {
  background: #16140F;
}
.dark-mode .mean-container .mean-nav ul li a {
  color: var(--lux-ivory);
}

/* ==========================================================================
   INNER PAGES — sitewide consistency
   The luxury redesign so far lived entirely in the homepage's own scoped
   <style> block. Every other page (About, Rooms, Gallery, Services,
   Celebrations, Contact...) was still rendering in the stock template's
   off-brand red/blue palette (Bootstrap "primary" = #CF3425, "info" =
   #155EEF) because those utility classes were never touched. Recolor them
   here, once, so the whole site reads as one consistent brand.
   ========================================================================== */

.text-primary {
  color: var(--lux-gold) !important;
}
.bg-primary {
  background-color: var(--lux-gold) !important;
}
.bg-info {
  background-color: var(--lux-green) !important;
}
.badge.badge-warning {
  background: var(--lux-gold) !important;
  color: var(--lux-green) !important;
}

.btn.btn-primary {
  background-color: var(--lux-green) !important;
  border-color: var(--lux-green) !important;
  color: var(--lux-ivory) !important;
}
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn-check:checked + .btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.show {
  background-color: var(--lux-gold) !important;
  border-color: var(--lux-gold) !important;
  color: var(--lux-green) !important;
}

/* Page banner (About / Rooms / Gallery / Services / Celebrations / Contact) */
.breadcrumb-bar::before {
  background: linear-gradient(180deg, rgba(5, 39, 39, 0.45) 0%, rgba(5, 39, 39, 0.75) 100%);
}
.breadcrumb-bar .breadcrumb-title {
  font-family: var(--lux-serif);
  font-weight: 500;
}
.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
  color: rgba(247, 247, 238, 0.75);
  font-family: var(--lux-sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
}
.breadcrumb .breadcrumb-item.active {
  color: var(--lux-gold);
}

/* Generic content wrapper sits on the warm ivory surface instead of stock white */
.content {
  background: var(--lux-surface);
  padding-top: 60px;
  padding-bottom: 70px;
}
.about-content h6.text-primary {
  font-family: var(--lux-sans);
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Rich-text body copy (About page's admin-authored description) -- was rendering in the
   stock template's plain small body text with no rhythm; the intro line reads as a pull-quote
   (matches the italic-serif treatment used for intros elsewhere on the homepage) and the rest
   reads as calm, spaced DM Sans body copy instead of a cramped wall of text. */
.about-content p {
  font-family: var(--lux-sans);
  font-size: 16px;
  line-height: 1.9;
  color: rgba(var(--lux-ink-rgb), 0.72);
  margin-bottom: 20px;
}
/* The admin-authored description is plain text with manual "•"/"." bullet characters
   rather than real <ul><li> markup -- luxury-reveal.js progressively rebuilds it into
   .about-lead (opening sentence) + .about-feature-item rows (one per bullet) on load,
   with a drawn gold dot replacing the literal bullet character. These two classes only
   exist once that JS runs; .about-content p above is the plain-text fallback. */
.about-lead {
  font-family: var(--lux-serif) !important;
  font-style: italic;
  font-size: 1.15rem !important;
  line-height: 1.75 !important;
  color: var(--lux-ink) !important;
  margin-bottom: 26px !important;
}
.about-feature-item {
  position: relative;
  padding-left: 26px;
  margin-bottom: 18px !important;
}
.about-feature-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lux-gold);
}
.about-feature-item strong {
  font-family: var(--lux-serif);
  font-weight: 600;
  color: var(--lux-ink);
}

/* Primary section headline -- the homepage gives every section's main H2 (Trending Rooms,
   Testimonials, How It Works, Contact...) this same big cursive treatment; inner pages had
   plain bold sans-serif H2s left over from the stock template, which is what read as "simple"
   next to the homepage. .page-lead-heading is an explicit opt-in class for the one primary
   headline per page/section; .section-header h2, .choose-title h2 and .user-section h2 are
   existing template hooks that already play that role on About/inner pages. */
.section-header h2,
.choose-title h2,
.user-section h2,
.page-lead-heading {
  font-family: var(--lux-script) !important;
  font-weight: 700 !important;
  font-size: clamp(2.6rem, 5vw, 4rem) !important;
  line-height: 1.15 !important;
  color: var(--lux-ink);
}

/* Stock template clip-art doodles (off-brand red/lime stars, salmon-pink swirl lines) --
   already stripped from the homepage's own sections; the same doodles still show up
   unstyled on the About page since it uses the stock markup as-is. */
.about-bg, .about-bg-1, .choose-bg-01, .choose-bg-02 {
  display: none;
}

/* Secondary heading inside a card sitting next to a primary cursive headline (e.g. the
   "Get in Touch" form title on /contact) -- mirrors the homepage's own contact-card pattern:
   one big cursive headline per section, calmer serif for anything secondary beside it. */
.card.bg-light-200 h2 {
  font-family: var(--lux-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  color: var(--lux-ink);
}

/* Cards (contact form, room search bar, testimonials, choose-card...) */
.card {
  border-radius: 4px;
  border-color: var(--lux-line);
}
.card.bg-light-200 {
  background: var(--lux-surface) !important;
  box-shadow: 0 20px 50px rgba(5, 39, 39, 0.08);
}
.testimonial-slider .card {
  background: var(--lux-surface) !important;
  border-color: var(--lux-line) !important;
  border-radius: 4px !important;
}
.testimonial-slider .card-body {
  padding: 32px 28px;
}
.testimonial-slider .card-body > p.mb-4 {
  font-family: var(--lux-serif);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--lux-ink);
}
.testimonial-slider .avatar img {
  border: 2px solid var(--lux-gold);
  padding: 2px;
}
.testimonial-slider h6 a {
  font-family: var(--lux-sans);
  color: var(--lux-ink);
}

/* Forms */
.form-control {
  border-color: var(--lux-line);
  border-radius: 2px;
}
.form-control:focus {
  border-color: var(--lux-gold) !important;
  box-shadow: 0 0 0 3px rgba(182, 153, 106, 0.15) !important;
}
.form-label {
  font-family: var(--lux-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--lux-ink);
}

/* Icon avatars (contact page detail rows) */
.avatar.rounded-circle.bg-light {
  background: rgba(182, 153, 106, 0.14) !important;
  color: var(--lux-gold) !important;
}

/* Room cards (/rooms) */
.place-item {
  border-radius: 4px;
  box-shadow: 0 16px 40px rgba(5, 39, 39, 0.08);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.place-item:hover {
  box-shadow: 0 22px 50px rgba(5, 39, 39, 0.14);
  transform: translateY(-4px);
}
.place-item .place-content {
  background: var(--lux-surface) !important;
}
.place-item .place-content h5 a {
  font-family: var(--lux-serif);
  color: var(--lux-ink);
}
.place-item .place-img .fav-item .fav-icon:hover,
.place-item .place-img .fav-item .fav-icon.selected {
  color: var(--lux-gold) !important;
}
.choose-us-section .choose-card .choose-icon span {
  background-color: var(--lux-green);
}

/* Gallery grid */
.gallery-card .gallery-eye-icon.bg-primary {
  background: var(--lux-green) !important;
}

/* Blog / Celebrations grid */
.blog-item .badge.bg-primary {
  background: var(--lux-gold) !important;
  color: var(--lux-green) !important;
}
.blog-item .blog-info h5 a {
  font-family: var(--lux-serif);
}

/* Pagination */
.pagination .page-item .page-link {
  color: var(--lux-ink);
  border-color: var(--lux-line);
}
.pagination .page-item.active .page-link {
  background-color: var(--lux-green);
  border-color: var(--lux-green);
}

/* ================= Header "Service" dropdown ================= */
.main-nav > li.has-submenu > a::after {
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 8px;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.6;
}
header .main-menu-wrapper .main-nav > li .submenu {
  background: var(--lux-ivory) !important;
  box-shadow: 0 20px 46px rgba(5, 39, 39, 0.16);
  border-radius: 2px;
  padding: 6px 0;
}
header .header-nav .main-menu-wrapper .main-nav > li .submenu li a {
  color: var(--lux-green) !important;
  font-family: var(--lux-sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
header .header-nav .main-menu-wrapper .main-nav > li .submenu li a:hover {
  color: var(--lux-gold) !important;
  padding-left: 20px;
}
header .header-nav .main-menu-wrapper .main-nav > li .submenu li.active,
header .header-nav .main-menu-wrapper .main-nav > li .submenu li.active > a {
  color: var(--lux-gold) !important;
}
@media (min-width: 992px) {
  header .main-menu-wrapper .main-nav li.has-submenu:hover > .submenu {
    border-top: 2px solid var(--lux-gold) !important;
  }
}
@media (max-width: 991.98px) {
  header .main-menu-wrapper .main-nav .has-submenu ul {
    background: var(--lux-green-soft) !important;
  }
  header .main-menu-wrapper .main-nav .has-submenu ul li a {
    color: var(--lux-ivory) !important;
  }
}