/* =============================================================
   Daba Village — design system
   Loaded last; intentionally overrides the Bootstrap template.

   1. Tokens
   2. Base & typography
   3. Accessibility
   4. Buttons & links
   5. Header / navigation
   6. Hero
   7. Booking bar
   8. Page banners (bradcam)
   9. Sections & layout rhythm
   10. Cards & tiles
   11. Contact strip
   12. Instagram strip
   13. Footer
   14. Responsive
   ============================================================= */

/* ---------- 1. Tokens ------------------------------------- */
:root {
  /* Warm earth palette drawn from the badge: espresso, sand, gold. */
  --ink: #2a1f17;          /* primary text */
  --ink-soft: #574538;     /* body copy */
  --ink-mute: #82705f;     /* meta, captions */
  --olive: #3b2b20;        /* logo brown — footer, dark panels */

  --sand: #faf6f0;         /* page background */
  --sand-deep: #f2eae0;    /* alternating section background */
  --cream: #fffcf8;        /* raised surfaces */
  --white: #ffffff;

  /* Gold: -cta passes AA with white text; -text passes AA on sand. */
  --gold-cta: #8a6a2e;
  --gold-cta-hover: #745827;
  --gold-text: #7a5c29;
  --gold-soft: #c4a671;    /* accents on dark backgrounds */

  --line: rgba(42, 31, 23, 0.14);
  --line-strong: rgba(42, 31, 23, 0.26);
  --line-on-dark: rgba(255, 252, 248, 0.24);

  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  /* Fluid rhythm — replaces the template's fixed 200px section padding. */
  --space-section: clamp(4rem, 9vw, 7.5rem);
  --space-gutter: clamp(1.25rem, 4vw, 3rem);

  --radius: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(42, 31, 23, 0.06),
    0 4px 16px rgba(42, 31, 23, 0.06);
  --shadow-md: 0 2px 6px rgba(42, 31, 23, 0.07),
    0 18px 44px rgba(42, 31, 23, 0.11);

  --ease: cubic-bezier(0.4, 0.14, 0.3, 1);
}

/* ---------- 2. Base & typography --------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--sand);
  /* The template declared body twice with conflicting stacks; this settles it. */
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin-top: 0;
}

h1 {
  font-size: clamp(2.25rem, 5vw, 4rem);
}
h2 {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
}
h3 {
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
}
h4 {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
}

p {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  color: var(--ink-soft);
  margin-bottom: 1.15rem;
}

/* Cap measure for readability — long lines are the main body-copy failure. */
.about_info p,
.section_title p,
.bradcam_text p {
  max-width: 62ch;
}

strong,
b {
  font-weight: 600;
  color: var(--ink);
}

/* Eyebrow label above section headings. */
.section_title span,
.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 0.9rem;
}

.section_title h2,
.section_title h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 0;
}

.section_title.text-center p {
  margin-left: auto;
  margin-right: auto;
}

/* The template shipped .mb-100 on nearly every section title. */
.section_title.mb-100 {
  margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

/* ---------- 3. Accessibility ------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 1rem;
  color: var(--cream);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-cta);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Dark surfaces need a light ring to stay visible. */
header a:focus-visible,
.slider_area a:focus-visible,
.footer a:focus-visible,
.bradcam_area a:focus-visible {
  outline-color: var(--gold-soft);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 4. Buttons & links ----------------------------- */
.btn-gold,
.boxed-btn3,
.header-area .main-header-area .book_room .book_btn a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-color: var(--gold-cta);
  color: var(--white);
  border: 1px solid var(--gold-cta);
  border-radius: 999px;
  padding: 0.95rem 2.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.btn-gold:hover,
.btn-gold:focus,
.boxed-btn3:hover,
.header-area .main-header-area .book_room .book_btn a:hover,
.header-area .main-header-area .book_room .book_btn a:focus {
  background-color: var(--gold-cta-hover);
  border-color: var(--gold-cta-hover);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(42, 31, 23, 0.18);
}

.btn-gold:active {
  transform: translateY(0);
}

/* Understated text link with an underline that grows on hover. */
.line-button {
  position: relative;
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  padding-bottom: 6px;
  background: none;
}

.line-button::before,
.line-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--ease);
}
.line-button::before {
  width: 100%;
  opacity: 0.28;
}
.line-button::after {
  width: 0;
}
.line-button:hover,
.line-button:focus {
  color: var(--gold-cta-hover);
}
.line-button:hover::after,
.line-button:focus::after {
  width: 100%;
}

/* Same link on dark ground. */
.bradcam_area .line-button,
.footer .line-button,
.slider_area .line-button {
  color: var(--gold-soft);
}
.footer .line-button:hover,
.bradcam_area .line-button:hover {
  color: var(--cream);
}

.book_now {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  /* Template drew a full 1px box here; reset it before adding the underline. */
  border: none;
  border-bottom: 1px solid var(--line-strong);
  padding: 0 0 4px;
  background: none;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

.book_now:hover {
  background: none;
}
.book_now:hover,
.book_now:focus {
  color: var(--gold-cta-hover);
  border-color: var(--gold-cta-hover);
}

/* ---------- 5. Header / navigation ------------------------- */
.header-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 60;
}

.main-header-area {
  padding: 0.5rem 0;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
    padding 0.35s var(--ease);
}

/* Scrim behind the nav so links stay legible over any hero image. */
.header-area::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 190px;
  background: linear-gradient(
    to bottom,
    rgba(26, 18, 12, 0.62) 0%,
    rgba(26, 18, 12, 0.34) 45%,
    rgba(26, 18, 12, 0) 100%
  );
  pointer-events: none;
  z-index: -1;
}

.main-header-area #navigation a,
.main-header-area .dropdown-menu a {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cream) !important;
  text-shadow: 0 1px 3px rgba(26, 18, 12, 0.55);
  padding: 0.75rem 0;
  position: relative;
}

.main-header-area #navigation > li {
  margin: 0 0.95rem;
}

/* Animated underline for the current and hovered item. */
.main-header-area #navigation > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.35rem;
  width: 0;
  height: 1px;
  background: var(--gold-soft);
  transition: width 0.3s var(--ease);
}
.main-header-area #navigation > li > a:hover::after,
.main-header-area #navigation > li > a.active::after {
  width: 100%;
}

/* Sticky state: solid cream bar, dark text. */
.main-header-area.sticky,
.main-header-area.scrolled {
  background-color: rgba(255, 252, 248, 0.97);
  backdrop-filter: saturate(1.1) blur(10px);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  box-shadow: 0 1px 0 var(--line), 0 8px 28px rgba(42, 31, 23, 0.07);
  padding: 0.25rem 0;
}

.main-header-area.sticky #navigation a,
.main-header-area.scrolled #navigation a,
.main-header-area.sticky .dropdown-menu a,
.main-header-area.scrolled .dropdown-menu a {
  color: var(--ink) !important;
  text-shadow: none;
}

.main-header-area.sticky #navigation > li > a::after,
.main-header-area.scrolled #navigation > li > a::after {
  background: var(--gold-cta);
}

/* Dropdowns. */
.main-header-area .submenu,
.main-header-area .dropdown-menu {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 0.5rem 0;
  min-width: 220px;
}

.main-header-area .submenu li a,
.main-header-area .dropdown-menu a {
  display: block;
  color: var(--ink) !important;
  text-shadow: none !important;
  padding: 0.6rem 1.25rem !important;
  font-size: 0.75rem;
  letter-spacing: 0.09em;
}

.main-header-area .submenu li a:hover,
.main-header-area .dropdown-menu a:hover {
  background: var(--sand-deep);
  color: var(--gold-text) !important;
}

/* Logo. */
.logo-img img {
  max-height: 78px;
  width: auto;
  transition: max-height 0.35s var(--ease);
}
.main-header-area.sticky .logo-img img,
.main-header-area.scrolled .logo-img img {
  max-height: 58px;
}

/* Social icons in the header. */
.book_room {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  padding-right: var(--space-gutter);
}

.book_room .socail_links ul {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.book_room .socail_links ul li a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--cream);
  border: 1px solid var(--line-on-dark);
  font-size: 0.95rem;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.book_room .socail_links ul li a:hover {
  background: var(--gold-cta);
  border-color: var(--gold-cta);
  color: var(--white);
}

.main-header-area.sticky .book_room .socail_links ul li a,
.main-header-area.scrolled .book_room .socail_links ul li a {
  color: var(--ink);
  border-color: var(--line);
}
.main-header-area.sticky .book_room .socail_links ul li a:hover,
.main-header-area.scrolled .book_room .socail_links ul li a:hover {
  color: var(--white);
  border-color: var(--gold-cta);
}

/* ---------- 6. Hero ---------------------------------------- */
.slider_area .single_slider {
  height: 100vh;
  min-height: 620px;
  background-size: cover;
  background-position: center center;
  position: relative;
}

/* Two-layer scrim. The linear pass darkens the top (nav) and base (booking
   bar); the radial pass concentrates behind the text block only, so the
   photograph stays open at the edges instead of being flatly dimmed.
   Measured against the three hero images: heading 4.5:1, subtitle 4.6:1
   at worst — the original assumed every hero would be dark, which is
   exactly how the <h1> disappeared. */
.slider_area .single_slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 62% 34% at 50% 46%,
      rgba(26, 18, 12, 0.52) 0%,
      rgba(26, 18, 12, 0.46) 45%,
      rgba(26, 18, 12, 0.14) 80%,
      rgba(26, 18, 12, 0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(26, 18, 12, 0.5) 0%,
      rgba(26, 18, 12, 0.24) 28%,
      rgba(26, 18, 12, 0.26) 66%,
      rgba(26, 18, 12, 0.7) 100%
    );
  z-index: 1;
}

.slider_area .single_slider .slider_text {
  position: relative;
  z-index: 2;
  padding-bottom: 6rem;
}

/* THE FIX: the template styled only h3, so the homepage <h1> fell through to
   the global dark-brown heading colour and vanished into the photograph. */
.slider_area .single_slider .slider_text h1,
.slider_area .single_slider .slider_text h2,
.slider_area .single_slider .slider_text h3 {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: clamp(2.75rem, 7.5vw, 6.25rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0.01em;
  text-transform: none;
  margin-bottom: 1rem;
  text-shadow: 0 2px 28px rgba(20, 13, 8, 0.55);
}

.slider_area .single_slider .slider_text p {
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0.94;
  max-width: 40ch;
  margin: 0 auto;
  text-shadow: 0 1px 14px rgba(20, 13, 8, 0.6);
}

/* Hairline flourish under the hero heading. */
.slider_area .single_slider .slider_text h1::after,
.slider_area .single_slider .slider_text h2::after,
.slider_area .single_slider .slider_text h3::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 1.5rem auto 1.35rem;
  background: var(--gold-soft);
  opacity: 0.85;
}

/* Carousel controls. */
.slider_area .owl-nav button.owl-prev,
.slider_area .owl-nav button.owl-next {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.12) !important;
  border: 1px solid var(--line-on-dark) !important;
  color: var(--cream) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.25s var(--ease);
}
.slider_area .owl-nav button:hover {
  background: rgba(255, 252, 248, 0.26) !important;
}

.slider_area .owl-dots {
  position: absolute;
  bottom: 11rem;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}
.slider_area .owl-dots .owl-dot span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 252, 248, 0.45);
  display: block;
  transition: background-color 0.25s var(--ease), width 0.25s var(--ease);
}
.slider_area .owl-dots .owl-dot.active span {
  background: var(--gold-soft);
  width: 22px;
  border-radius: 4px;
}

/* ---------- 7. Booking bar --------------------------------- */
.bookingmask {
  background-color: var(--cream);
}

@media (min-width: 1200px) {
  .bookingmask {
    /* Was a hard-coded 960px offset; centre it instead. */
    width: min(1040px, calc(100% - 4rem));
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: 3.5rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
  }
  .bm-popup {
    padding: 1.75rem 2rem;
  }
}

.bm-field-label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.5rem;
  display: block;
  text-align: left;
}

.bm-display-input {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.6rem 0;
  height: auto;
  text-align: left;
  width: 100%;
}
.bm-display-input:focus {
  border-bottom-color: var(--gold-cta);
  box-shadow: none;
}

.bookingmask .btn-gold {
  width: 100%;
  padding: 1rem 1.5rem;
}

.bm-col {
  margin-bottom: 0.5rem;
}

/* Mobile sticky CTA — reserve space so it never covers page content. */
.fixed-book-btn {
  background-color: var(--gold-cta);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  padding: 1.05rem 0;
  border-radius: 0;
  box-shadow: 0 -2px 18px rgba(42, 31, 23, 0.16);
}
.fixed-book-btn:hover,
.fixed-book-btn:active {
  background-color: var(--gold-cta-hover);
}

/* The header "Book Now" link only appears from 992px up, and the booking panel
   is a modal below 1200px. The template hid this CTA from 768px, which left
   768-991px with no way to reach booking at all. Keep it until 992px.
   The !important also defeats .btn-gold above, which lands after the
   template's own hide rule and would otherwise re-show it on desktop. */
@media (min-width: 992px) {
  .fixed-book-btn {
    display: none !important;
  }
}

@media (max-width: 991px) {
  .fixed-book-btn {
    display: block !important;
  }
  body {
    padding-bottom: 56px;
  }
}

/* ---------- 8. Page banners (bradcam) ---------------------- */
.bradcam_area {
  position: relative;
  padding: clamp(9rem, 20vw, 14rem) 0 clamp(4.5rem, 9vw, 7rem);
  background-size: cover;
  background-position: center center;
  text-align: center;
  isolation: isolate;
}

/* Single source of truth for the banner scrim. Pages previously carried a flat
   inline gradient; those are gone, so this must hold contrast on its own.
   Kept fairly even because the title sits mid-band, over unpredictable photos. */
.bradcam_area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 18, 12, 0.72) 0%,
    rgba(26, 18, 12, 0.62) 50%,
    rgba(26, 18, 12, 0.68) 100%
  );
  z-index: -1;
}

.bradcam_area h1,
.bradcam_area h3 {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  color: var(--cream);
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  text-shadow: 0 2px 24px rgba(20, 13, 8, 0.5);
}

/* Bootstrap's .display-4 fights the fluid scale; neutralise it here. */
.bradcam_area h1.display-4,
.bradcam_area h3.display-4 {
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  font-weight: 400;
}

.bradcam_area .bradcam_text p,
.bradcam_area p {
  color: var(--cream);
  opacity: 0.92;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 300;
  max-width: 58ch;
  margin: 1.15rem auto 0;
  text-shadow: 0 1px 12px rgba(20, 13, 8, 0.5);
}

.bradcam_area .eyebrow {
  color: var(--gold-soft);
  text-shadow: 0 1px 10px rgba(20, 13, 8, 0.5);
}

/* ---------- 9. Sections & layout rhythm -------------------- */
.about_area,
.offers_area,
.features_room,
.gallery_area,
.blog_area,
.contact-section,
.our_room {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

/* Template had padding-top:200px, leaving a large empty band. */
.about_area {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}

.about_area .about_info p {
  margin-bottom: 2rem;
}

.about_area .about_info .section_title {
  margin-bottom: 1.5rem;
}

/* Opt-in tonal band. Avoids :nth-of-type, which counts every sibling div
   and so lands on unpredictable sections in this markup. */
.section-alt,
.sister-section {
  background: var(--sand-deep);
}

.about_thumb img,
.about_thumb2 img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Paired editorial images: equal columns, offset, consistent crop. The
   template left them at intrinsic size, so short source files left a gap. */
.about_area .about_thumb,
.about_area .about_thumb2 {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.about_area .about_thumb > div,
.about_area .about_thumb2 > div {
  flex: 1 1 0;
  min-width: 0;
  margin-left: 0;
}

.about_area .about_thumb img,
.about_area .about_thumb2 img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}

.about_area .about_thumb .img_2,
.about_area .about_thumb2 .img_2 {
  margin-top: clamp(1.5rem, 5vw, 3.5rem);
}

/* ---------- 10. Cards & tiles ------------------------------ */
.offers_area .single_offers {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.offers_area .single_offers:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-strong);
}

.offers_area .single_offers .about_thumb {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.offers_area .single_offers .about_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.7s var(--ease);
}
.offers_area .single_offers:hover .about_thumb img {
  transform: scale(1.05);
}

.offers_area .single_offers h3 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ink);
  margin: 1.6rem 1.75rem 0.85rem;
}

.offers_area .single_offers ul {
  margin: 0 1.75rem 1.5rem;
  flex-grow: 1;
}

.offers_area .single_offers ul li {
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.offers_area .single_offers ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-soft);
}

.offers_area .single_offers .book_now {
  margin: 0 1.75rem 1.85rem;
  align-self: flex-start;
}

/* Experience tiles. */
.features_room .single_rooms .room_thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.features_room .single_rooms .room_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}
.features_room .single_rooms:hover .room_thumb img {
  transform: scale(1.06);
}

/* Gradient behind the caption so it reads on any photograph. */
.features_room .single_rooms .room_thumb::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(
    to top,
    rgba(20, 13, 8, 0.86) 0%,
    rgba(20, 13, 8, 0.45) 45%,
    rgba(20, 13, 8, 0) 100%
  );
  pointer-events: none;
}

.features_room .single_rooms .room_heading {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  gap: 1rem;
}

.features_room .single_rooms .room_heading span {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.4rem;
}

.features_room .single_rooms .room_heading h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  color: var(--cream);
  margin-bottom: 0;
  text-shadow: 0 2px 16px rgba(20, 13, 8, 0.5);
}

/* The template hid this link behind :hover (opacity 0 + visibility hidden),
   which made it permanently unreachable on touch devices. Always show it. */
.features_room .rooms_here .single_rooms .room_thumb .room_heading a,
.features_room .rooms_here .single_rooms:hover .room_heading a {
  color: var(--cream);
  opacity: 1;
  visibility: visible;
  transform: none;
  flex-shrink: 0;
  font-weight: 600;
}

.features_room .rooms_here .single_rooms .room_thumb .room_heading a:hover,
.features_room .rooms_here .single_rooms .room_thumb .room_heading a:focus {
  color: var(--gold-soft);
}

/* Whole-property hire cards (inline-styled in the markup). */
.sister-card {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.sister-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.sister-card h3 {
  font-size: 1.5rem;
  margin-bottom: 0.85rem;
}
.sister-card p {
  flex-grow: 1;
  font-size: 0.9375rem;
}

/* ---------- 11. Contact strip ------------------------------ */
.forQuery {
  padding: 0 0 var(--space-section);
}

.forQuery .Query_border {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--sand-deep);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.5rem);
}

.forQuery .Query_text p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ink);
  margin-bottom: 0;
  line-height: 1.25;
}

.forQuery .phone_num {
  text-align: right;
}

.forQuery .phone_num .mobile_no {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  color: var(--gold-text);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid transparent;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.forQuery .phone_num .mobile_no:hover {
  color: var(--gold-cta-hover);
  border-bottom-color: currentColor;
}

/* ---------- 12. Instagram strip ---------------------------- */
.single_instagram {
  aspect-ratio: 1 / 1;
}
.single_instagram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.single_instagram:hover img {
  transform: scale(1.06);
}
.single_instagram .ovrelay {
  background: rgba(20, 13, 8, 0.5) !important;
}
.single_instagram .ovrelay a {
  font-size: 1.5rem;
  color: var(--cream);
}

/* ---------- 13. Footer ------------------------------------- */
.footer {
  background: var(--olive);
  color: rgba(255, 252, 248, 0.78);
}

.footer .footer_top {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.footer .footer_top .footer_widget .footer_title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1.35rem;
}

.footer .footer_text,
.footer p,
.footer li a {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.85;
  color: rgba(255, 252, 248, 0.78);
}

.footer li a {
  transition: color 0.25s var(--ease);
}
.footer li a:hover,
.footer li a:focus {
  color: var(--cream);
}

.footer .footer_border {
  border-top: 1px solid var(--line-on-dark);
  margin-bottom: 1.5rem;
}

.footer .copy-right_text {
  padding-bottom: 2rem;
}

.footer .copy_right {
  font-size: 0.875rem;
  color: rgba(255, 252, 248, 0.6);
  margin-bottom: 0;
}

.footer .copy-right_text .socail_links ul {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0;
}

.footer .copy-right_text .socail_links ul li a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-on-dark);
  color: rgba(255, 252, 248, 0.8);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.footer .copy-right_text .socail_links ul li a:hover {
  background: var(--gold-cta);
  border-color: var(--gold-cta);
  color: var(--white);
}

/* ---------- 14. Responsive --------------------------------- */
/* Below 1200 the panel is a modal opened by the sticky CTA — style it only.
   (Forcing it visible here would strand a stray close button under the hero.) */
@media (max-width: 1199px) {
  .bookingmask {
    background: var(--cream);
  }
  .bm-popup {
    padding: 3rem 1.5rem 2rem;
  }
  .bookingmask .bm-col {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 991px) {
  .header-area::before {
    height: 130px;
  }

  .logo-img img {
    max-height: 62px;
  }

  .slider_area .single_slider {
    min-height: 560px;
  }

  .slider_area .owl-dots {
    bottom: 3.5rem;
  }

  .forQuery .phone_num {
    text-align: left;
    margin-top: 1.25rem;
  }

  .footer .copy-right_text .socail_links ul {
    justify-content: flex-start;
    margin-top: 1.25rem;
  }
}

@media (max-width: 767px) {
  .logo-img img {
    max-height: 54px;
  }

  .slider_area .single_slider {
    height: auto;
    min-height: 78vh;
    padding: 8rem 0 4rem;
  }

  .slider_area .single_slider .slider_text {
    padding-bottom: 1rem;
  }

  .about_area .about_thumb,
  .about_area .about_thumb2 {
    flex-direction: column;
  }
  .about_area .about_thumb .img_2,
  .about_area .about_thumb2 .img_2 {
    margin-top: 1rem;
  }

  .offers_area .single_offers {
    margin-bottom: 1.75rem;
  }

  .features_room .single_rooms .room_heading {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
  }
}

/* ==========================================================================
   Mobile navigation — rebuilt.
   The template's slicknav.css and style.css fight each other here: style.css
   pins the panel at width:95%/top:11px and forces .logo-img img{width:70px},
   which squashed the badge (natural ratio 0.677 rendered at 1.296). These
   rules are last in the cascade and match that specificity to win cleanly.
   ========================================================================== */

@media (max-width: 991px) {
  /* Give the absolutely-positioned mobile menu a predictable containing block. */
  .header-area .main-header-area {
    position: relative;
  }

  /* --- Logo: restore the badge's true aspect ratio --- */
  .header-area .main-header-area .logo-img {
    text-align: left;
  }
  .header-area .main-header-area .logo-img img {
    width: auto;          /* beats style.css `width: 70px` */
    max-height: 60px;
    height: auto;
  }
  .header-area .main-header-area.sticky .logo-img img,
  .header-area .main-header-area.scrolled .logo-img img {
    max-height: 52px;
  }

  /* --- Menu shell: overlay the header bar, don't add a second row --- */
  .mobile_menu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    height: 100%;
    margin: 0;
    z-index: 99;
    pointer-events: none;   /* let taps reach the logo link */
  }
  .slicknav_menu {
    position: relative;
    height: 100%;
    margin: 0;
    padding: 0 var(--space-gutter);
    background: transparent;
  }

  /* --- Burger: no grey box, 44px tap target, clean bars --- */
  .slicknav_menu .slicknav_btn {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    right: var(--space-gutter);
    transform: translateY(-50%);
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .slicknav_menu .slicknav_btn .slicknav_icon {
    position: static;
    float: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 26px;
    height: auto;
    margin: 0;
    padding: 0;
    top: auto;
    right: auto;
  }
  .slicknav_menu .slicknav_btn .slicknav_icon::before {
    display: none;
  }
  .slicknav_menu .slicknav_btn .slicknav_icon-bar {
    width: 26px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.2s linear;
  }

  /* Burger morphs into an X while the panel is open. */
  .slicknav_menu .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .slicknav_menu .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(2) {
    opacity: 0;
  }
  .slicknav_menu .slicknav_btn.slicknav_open .slicknav_icon-bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* Dark bars once the sticky cream bar takes over (JS adds .scrolled). */
  .mobile_menu.scrolled .slicknav_icon-bar {
    background-color: var(--ink) !important;
  }

  /* --- Panel: full-width sheet under the bar --- */
  .slicknav_menu .slicknav_nav {
    pointer-events: auto;
    position: absolute;
    top: calc(100% + 6px);
    left: var(--space-gutter);
    right: var(--space-gutter);
    width: auto;
    float: none;
    margin: 0;
    padding: 0.25rem 0;
    background: var(--cream);
    border: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
  }

  /* Top-level rows */
  .slicknav_menu .slicknav_nav > li {
    border-bottom: 1px solid var(--line);
  }
  .slicknav_menu .slicknav_nav > li:last-child {
    border-bottom: 0;
  }
  .slicknav_menu .slicknav_nav a {
    display: block;
    margin: 0;
    padding: 0.95rem 1.15rem;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink) !important;
    border-radius: 0;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  }
  .slicknav_menu .slicknav_nav a:hover,
  .slicknav_menu .slicknav_nav a:focus {
    background: var(--sand-deep);
    color: var(--gold-text) !important;
  }
  .slicknav_menu .slicknav_nav a.active {
    color: var(--gold-text) !important;
  }

  /* Parent rows (Experiences / Discover) sit flush with the chevron right-aligned. */
  .slicknav_menu .slicknav_nav .slicknav_row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0.95rem 1.15rem;
    border-radius: 0;
    transition: background-color 0.2s var(--ease);
  }
  .slicknav_menu .slicknav_nav .slicknav_row:hover {
    background: var(--sand-deep);
  }
  .slicknav_menu .slicknav_nav .slicknav_item > a,
  .slicknav_menu .slicknav_nav .slicknav_row > a {
    display: inline;
    margin: 0;
    padding: 0;
    background: none;
  }
  /* Bootstrap's caret is redundant beside slicknav's +/- indicator. */
  .slicknav_menu .slicknav_nav .dropdown-toggle::after {
    display: none;
  }

  .slicknav_menu .slicknav_nav .slicknav_arrow {
    float: none;
    margin: 0 0 0 auto;
    font-size: 1rem;
    line-height: 1;
    top: auto;
    color: var(--gold-text);
    font-family: var(--font-sans);
  }

  /* Submenu: indented, tinted, lighter type. */
  .slicknav_menu .slicknav_nav ul {
    margin: 0;
    padding: 0;
    background: var(--sand-deep);
    border-top: 1px solid var(--line);
  }
  .slicknav_menu .slicknav_nav ul li {
    border-bottom: 1px solid rgba(42, 31, 23, 0.07);
  }
  .slicknav_menu .slicknav_nav ul li:last-child {
    border-bottom: 0;
  }
  .slicknav_menu .slicknav_nav ul a {
    /* bootstrap.min.css in this project paints .dropdown-item gold (#947033)
       and the desktop submenu rule sets padding with !important — beat both. */
    padding: 0.8rem 1.15rem 0.8rem 2.1rem !important;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft) !important;
  }
  .slicknav_menu .slicknav_nav ul a:hover,
  .slicknav_menu .slicknav_nav ul a:focus {
    background: var(--cream);
    color: var(--gold-text) !important;
  }
}

/* Hero headline: the old clamp floor (2.75rem) overflowed narrow phones. */
@media (max-width: 575px) {
  .slider_area .single_slider .slider_text h2,
  .slider_area .single_slider .slider_text h3 {
    font-size: clamp(1.9rem, 8.5vw, 2.75rem);
  }
}

/* --------------------------------------------------------------------------
   Desktop dropdown: this project's bootstrap.min.css paints .dropdown-item
   with a gold fill (#947033), which overrode the redesign's intended cream
   panel + dark text and spilled outside the panel's rounded box. The ID in
   the selector is needed to outrank `#navigation a`.
   -------------------------------------------------------------------------- */
.main-header-area #navigation .submenu .dropdown-item,
.main-header-area #navigation .dropdown-menu .dropdown-item {
  background: transparent;
  color: var(--ink) !important;
}
.main-header-area #navigation .submenu .dropdown-item:hover,
.main-header-area #navigation .submenu .dropdown-item:focus,
.main-header-area #navigation .dropdown-menu .dropdown-item:hover,
.main-header-area #navigation .dropdown-menu .dropdown-item:focus {
  background: var(--sand-deep);
  color: var(--gold-text) !important;
}