/* ============================================================
   Trekocity Hotels — Main Stylesheet
   Inspired by "The Cappa" luxury hotel design
   Fonts : Gilda Display (headings) / Barlow (body)
============================================================ */

:root {
  --primary:        #2796c4   ;
  --primary-dark:   #0d4359;
  --dark:           #1c1c1c;
  --darker:         #0e2438;
  --text:           #6f6f6f;
  --light-bg:       #e7f1ff;
  --border:         #e3e9f0;
  --light:           #9cc7e8;
  --heading-font:   'Gilda Display', serif;
  --body-font:      'Barlow', sans-serif;
}

/* ---------- Prices hidden site-wide ---------- */
.price,
.room-price,
.offer-price{ display: none !important; }

/* ---------- Base ---------- */
html { 
  scroll-behavior: auto; 
  overflow: unset;
  width: 100%;
}

body {
  font-family: var(--body-font);
  color: var(--text);
  font-size: 16px;
  line-height: 1.8;
  background: #fff;
  overflow: unset;

  width: 100%;
  position: relative;
}

/* Prevent horizontal scroll on mobile */
*, *::before, *::after {
  box-sizing: border-box;
}
a{
  overflow: hidden;
}
/* Fix for Bootstrap container-fluid */
.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
  overflow-x: hidden;
}

.ovr-none {
    overflow-x: unset !important;
}
/* Fix for Bootstrap row on mobile */
.row {
  margin-left: -15px;
  margin-right: -15px;
}

/* Ensure all images and media don't overflow */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* Fix for elements with negative margins */
.slick-list {
  
}

/* Ensure all sections stay within container */
section {
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: var(--dark);
  line-height: 1.3;
  font-weight: 400;
}

a { text-decoration: none; transition: all .3s ease; }
img { max-width: 100%; }

section[id] { scroll-margin-top: 90px; }

.section-padding { padding: 100px 0; }

/* ---------- Container width — 1350px on desktop (Bootstrap default: 1320px) ---------- */

/* ---------- Section labels & headings (The Cappa style) ---------- */
.section-label {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 24px;
}

/* "light" variant (hero): white text over the video */
.section-label.light { color: #fff; }

/* hero label stays plain white over the video */
.hero-caption .section-label { color: #fff; }

.section-head { margin-bottom: 60px; }
.section-head h2 { font-size: 44px; }
.section-head p  { max-width: 620px; margin: 15px auto 0; }

/* ---------- Sub-headings: centered style for Services 2 ----------
   (About section is left-aligned; Services 1 also stays left-aligned per design) */
.ts-head .section-label {
  display: table;        /* shrink-wraps the inline-block badge */
  margin: 0 auto 24px;   /* centres it like the centered section heads */
}

/* Row 1 heading is a standalone full-width row — gap before the tabs row */
.travel-services .ts-head { margin-bottom: 2rem; }
.ts-head h2 { text-align: center; }

.ts-lead {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------- Buttons ---------- */
.btn-gold,
.btn-book {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid var(--primary);
  border-radius: 0;
  cursor: pointer;
  transition: all .35s ease;
}
.btn-gold:hover,
.btn-book:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }

.btn-outline-gold {
  display: inline-block;
  background: transparent;
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid var(--primary);
  transition: all .35s ease;
}
.btn-outline-gold:hover { background: var(--primary); color: #fff; }

.btn-outline-light {
  display: inline-block;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid rgba(255,255,255,.7);
  cursor: pointer;
  transition: all .35s ease;
}
.btn-outline-light:hover { background: #fff; border-color: #fff; color: var(--dark); }

/* ============================================================
   HERO SLIDER (Owl Carousel) — background image slides + content
   ============================================================ */
.hero-slider-wrap { display: block; padding: 0; }

/* All hero-slide heights resolve from .hero-slider-wrap (definite height) */
.hero-slider-wrap { position: relative; height: 90vh; min-height: 90vh;  }

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity .7s ease;
}

/* Dark scrim over each slide's photo. Kept INSIDE .hero-slide so it darkens
   only the image — the arrows, dots (inside .owl-stage) and the enquiry form
   all sit outside the slide and stay at full brightness and clickable. */
/* .hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,.50), rgba(0,0,0,.45));
  pointer-events: none;
} */

/* Owl dots + arrows over the hero */
.hero-slider-wrap .owl-dots {
  position: absolute;
  bottom: 190px;
  left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.hero-slider-wrap .owl-dots .owl-dot span {
  width: 34px; height: 3px;
  border-radius: 0;
  background: rgba(255,255,255,.4);
  margin: 0;
  transition: all .3s ease;
}
.hero-slider-wrap .owl-dots .owl-dot.active span,
.hero-slider-wrap .owl-dots .owl-dot:hover span { background: #fff; }
.hero-slider-wrap .owl-nav { margin: 0; }
.hero-slider-wrap .owl-nav button.owl-prev,
.hero-slider-wrap .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 52px; height: 52px;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  background: rgba(0,0,0,.28) !important;
  color: #fff !important;
  font-size: 18px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}
.hero-slider-wrap .owl-nav button.owl-prev { left: 3vw; }
.hero-slider-wrap .owl-nav button.owl-next { right: 3vw; }
.hero-slider-wrap .owl-nav button.owl-prev:hover,
.hero-slider-wrap .owl-nav button.owl-next:hover {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* Enquiry form fixed at bottom — visible over all slides */
.hero-enquiry {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0 auto 34px;
  max-width: 1350px;
}
.hero-enquiry .container { position: relative; z-index: 3; }
.hero-enquiry .booking-bar { opacity: 1; transform: none; }
.hero-enquiry .booking-msg { margin-top: 8px; }
.hero-enquiry .form-msg:not(:empty) {
  background: #fff;
  padding: 8px 16px;
}

/* ============================================================
   HERO SLIDER — Owl Carousel fade mechanism
   Owl generates .owl-stage > .owl-item; we make active ones
   visible with a fade transition on .hero-slide background.
   ============================================================ */
.hero-slider { height: 100%; width: 100%; position: relative; z-index: 1; }

/* CRITICAL: .owl-stage-outer is generated by Owl JS between .hero-slider
   and .owl-stage. Without an explicit height it collapses to 0, and since
   .owl-stage is position:absolute it can't give its parent any height —
   so ALL slides collapse to 0 height and images never render. */
.hero-slider .owl-stage-outer {
  height: 100% !important;
}
.hero-slider .owl-stage {
  display: block !important;
  position: absolute;
  inset: 0;
  height: 100% !important;
  width: 100% !important;
  /* Owl 2.3.4 has no `fade` option, so it runs in slide mode and sets an
     inline transform on the stage. Neutralise it so the stage stays put —
     the fade is handled purely by the .active class + .hero-slide opacity. */
  transform: none !important;
  transition: none !important;
}
/* Every item is stacked in the same spot; visibility is driven purely by the
   .active class so changing slides is a clean cross-fade. */
.hero-slider .owl-item {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  float: none !important;
}
.hero-slider .owl-item img { display: none; }

/* Slide becomes visible only when its parent .owl-item is .active */
.hero-slider .owl-item.active .hero-slide { opacity: 1; }

/* Fallback: if Owl JS never runs (CDN blocked / JS error), the .hero-slide
   divs remain direct children of .hero-slider. Show the first one so the
   hero is never blank. Once Owl initializes it wraps slides in .owl-item,
   this selector stops matching and Owl takes over. */
.hero-slider > .hero-slide:first-child { opacity: 1; }

.hero-slider-wrap .owl-dots { bottom: 130px; }

/* ============================================================
   HEADER — topbar + white sticky navbar with inline menu
============================================================ */
/* ---------- Top info bar (theme color) ---------- */
.topbar {
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  position: relative;
  z-index: 1060;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 4vw;
}
.topbar-left { display: flex; align-items: center; gap: 22px; }
.topbar a {
  color: #fff;
  font-weight: 600;
  letter-spacing: .5px;
  text-decoration: none;
  transition: opacity .3s ease;
}
.topbar a:hover { opacity: .8; color: #fff; }
.topbar i { margin-right: 6px; font-size: 12px; }

/* ---------- White sticky navbar ---------- */
.site-header {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 1050;
  background: #fff;
  transition: all .4s ease;
}
.site-header.scrolled {
  background: #fff;
  box-shadow: 0 5px 25px rgba(0,0,0,.12);
}
.site-header.scrolled .header-inner { padding-top: 8px; padding-bottom: 8px; }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 4vw;
}

.brand-logo { height: 72px; width: auto; display: block; transition: all .3s ease; }
.site-header.scrolled .brand-logo { height: 60px; }

/* ---------- Desktop inline menu ---------- */
.main-nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}
.main-nav > a,
.nav-drop-btn {
  font-family: var(--heading-font);
  font-size: 17px;
  color: var(--dark);
  padding: 8px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color .3s ease;
  white-space: nowrap;
}
.main-nav > a:hover,
.main-nav > a.active,
.nav-drop-btn:hover,
.nav-drop.open .nav-drop-btn { color: var(--primary); }
.nav-drop { position: relative; }
.nav-drop-btn i { font-size: 11px; margin-left: 5px; transition: transform .3s ease; }
.nav-drop.open .nav-drop-btn i { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 250px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
  z-index: 1080;
}
.nav-drop.open .nav-drop-menu,
.nav-drop:hover .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.nav-drop-menu a {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dark);
  padding: 9px 14px;
  border-radius: 4px;
  text-decoration: none;
  transition: all .25s ease;
}
.nav-drop-menu a:hover { background: var(--light-bg); color: var(--primary); padding-left: 20px; }

/* ---- "Our Hotels" dropdown: location groups with hover fly-out ---- */
.nav-drop-menu .drop-group { position: relative; }
.nav-drop-menu .drop-group + .drop-group { margin-top: 4px; }
.nav-drop-menu .drop-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--dark);
  border-radius: 4px;
  cursor: default;
}
.nav-drop-menu .drop-group-label i { font-size: 10px; color: #9aa8b5; }
.nav-drop-menu .drop-group:hover .drop-group-label { background: var(--light-bg); color: var(--primary); }
/* hotels fly out to the right of the hovered location */
.nav-drop-menu .drop-sub-menu {
  position: absolute;
  left: 100%;
  top: -10px;
  min-width: 215px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 18px 45px rgba(0,0,0,.14);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  z-index: 1081;
}
.nav-drop-menu .drop-group:hover .drop-sub-menu { opacity: 1; visibility: visible; }
.nav-drop-menu .drop-sub-menu a {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--dark);
  padding: 9px 14px;
  border-radius: 4px;
  text-decoration: none;
}
.nav-drop-menu .drop-sub-menu a:hover { background: var(--light-bg); color: var(--primary); padding-left: 20px; }

.header-right { display: flex; align-items: center; gap: 18px; }

/* Book Now button */
.btn-book {
  padding: 12px 28px;
  background: var(--primary);
  border-color: var(--primary);
}

/* Luxury 3-line hamburger toggle — mobile only, minimal + elegant */
.nav-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  padding: 12px 4px;
  transition: all .35s ease;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--dark);
  border-radius: 0;
  transition: all .45s cubic-bezier(.25,.8,.25,1);
}
/* elegant staggered line widths — right aligned */
.nav-toggle span:nth-child(1) { width: 30px; }
.nav-toggle span:nth-child(2) { width: 20px; }
.nav-toggle span:nth-child(3) { width: 30px; }
/* hover : lines swap widths — soft, premium motion */
.nav-toggle:hover span:nth-child(1) { width: 20px; }
.nav-toggle:hover span:nth-child(2) { width: 30px; }
/* header is white — keep toggle dark for contrast */
.site-header.scrolled .nav-toggle span { background: var(--dark); }

/* Book Now button stays theme-colored on the white header */
.site-header.scrolled .btn-book {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.site-header.scrolled .btn-book:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

/* hamburger -> X : top/bottom rotate, middle slides away */
.nav-toggle.active span:nth-child(1) { width: 30px; transform: translateY(8.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { width: 30px; opacity: 0; transform: translateX(-14px); }
.nav-toggle.active span:nth-child(3) { width: 30px; transform: translateY(-8.5px) rotate(-45deg); }

/* ---------- Slide-in side menu ---------- */
.side-menu,
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: min(550px, 88%);
  height: 100vh;
  height: 100dvh;
  background: var(--primary-dark);
  z-index: 1070;
  padding: 90px 45px 45px;
  transform: translateX(100%);
  /* visibility stays on during the slide-in/out, then removes the closed panel
     from the tab order and from screen-reader reach */
  visibility: hidden;
  transition: transform .5s cubic-bezier(.77,0,.175,1), visibility .5s;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  -webkit-overflow-scrolling: touch;
  /* keep the menu scrollable on short screens, but hide the scrollbar */
  scrollbar-width: none;
}
.side-menu::-webkit-scrollbar,
.mobile-menu::-webkit-scrollbar { display: none; }
.side-menu.open,
.mobile-menu.open { transform: translateX(0); visibility: visible; }

.side-close {
  position: absolute;
  top: 22px; right: 26px;
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: color .3s;
}
.side-close:hover { color: var(--primary); }

/* Brand logo at the top of the slide-in menu panel */
.side-brand {
  display: inline-flex;
  align-items: center;
  margin: 26px 0 6px;
}
.side-brand-logo {
  height: 70px;
  width: auto;
  display: block;
}

.side-nav-label {
  display: block;
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 15px;
}

.side-nav a {
  display: block;
  font-family: var(--heading-font);
  font-size: 26px;
  color: #fff;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.side-nav a:hover,
.side-nav a.active { color: var(--primary); padding-left: 8px; }

/* Nav label inside the mobile slide-in menu */
.mobile-menu .side-nav-label { margin-top: 10px; }

/* Hotel dropdown inside the side menu (Our Hotels) */
.side-dropdown {
  display: block;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.side-dropdown-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: #fff;
  font-family: var(--heading-font);
  font-size: 26px;
  padding: 9px 0;
  cursor: pointer;
  transition: color .3s ease;
}
.side-dropdown-btn i {
  font-size: 14px;
  color: var(--primary);
  transition: transform .3s ease;
}
.side-dropdown-btn:hover { color: var(--primary); }
.side-dropdown.open .side-dropdown-btn { color: var(--primary); }
.side-dropdown.open .side-dropdown-btn i { transform: rotate(180deg); }
.side-dropdown-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.side-dropdown.open .side-dropdown-menu { max-height: 600px; }
.side-dropdown-menu a {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: 15px;
  font-weight: 400;
  padding: 8px 0 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: all .3s ease;
}
.side-dropdown-menu a:hover { color: var(--primary); padding-left: 26px; }
/* current hotel stays highlighted while its group is open */
.side-dropdown-menu a.active { color: var(--primary); padding-left: 26px; }
/* Location sub-groups (Lachung / Gangtok) inside the mobile "Our Hotels" menu */
.side-dropdown.sub { border-bottom: none; }
.side-dropdown.sub + .side-dropdown.sub { border-top: 1px solid rgba(255,255,255,.07); }
.side-dropdown.sub .side-dropdown-btn {
  font-size: 17px;
  padding: 8px 0;
  color: rgba(255,255,255,.85);
}
.side-dropdown.sub .side-dropdown-btn i { font-size: 11px; }
.side-dropdown.sub .side-dropdown-menu a {
  font-size: 14.5px;
  padding: 7px 0 7px 18px;
}

.side-info { margin-top: 40px; }
.side-info p { color: #9c9c9c; font-size: 15px; margin-bottom: 8px; }
.side-info i { color: var(--primary); width: 22px; }
.side-info p a { color: inherit; }
.side-info p a:hover { color: var(--primary); }
.side-info .btn-gold { margin-top: 18px; }

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 1060;
  opacity: 0;
  visibility: hidden;
  transition: all .4s ease;
}
.menu-overlay.show { opacity: 1; visibility: visible; }

body.menu-open { overflow: hidden; }

/* ============================================================
   HERO — full width video
============================================================ */
.hero {
  position: relative;
  height: 90vh;
  min-height: 560px;
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--dark);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 90%) 0%, rgb(0 0 0 / 58%) 45%, rgb(0 0 0 / 48%) 100%);
}

.hero-caption {
  position: relative;
  z-index: 2;
  text-align: left;
  padding-top: 60px;
}
.hero-caption h1 {
  color: #fff;
  font-size: 62px;
  margin: 10px 0 20px;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.hero-caption p {
  color: rgba(255,255,255,.85);
  font-size: 18px;
  font-weight: 300;
  max-width: 700px;
  margin: 0 0 34px;
}

.hero-scroll {
  position: absolute;
  bottom: 185px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #fff;
  font-size: 26px;
}
.hero-scroll:hover { color: var(--primary); }

/* ---------- Hero video custom controls ----------
   All buttons stacked on the right side
   Hover shows a label (Play / Pause / Sound On ...) via data-title */
.hero-video-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 3vw;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hero-ctrl {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.28);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}
.hero-ctrl:hover {
  background: var(--primary);
  border-color: var(--primary);
}
.hero-ctrl:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Tooltip label — text comes from the button's data-title attribute */
.hero-ctrl::after {
  content: attr(data-title);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--primary);
  color: #fff;
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
  pointer-events: none;
  z-index: 4;
}
.hero-video-controls .hero-ctrl::after { right: calc(100% + 14px); }
.hero-ctrl:hover::after { opacity: 1; visibility: visible; }


.enquiry {
  position: relative;
  z-index: 10;
  margin-top: -140px;
}

.booking-bar {
  display: flex;
  align-items: stretch;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}

.booking-field {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--border);
}

/* Field icon on the right side, like The Cappa */
.booking-field > i {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  font-size: 15px;
  pointer-events: none;
}

.booking-input {
  width: 100%;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 28px 50px 28px 26px;
  font-family: var(--body-font);
  font-size: 15px;
  color: var(--dark);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
}
select.booking-input { cursor: pointer; }
.booking-input::placeholder { color: #4a4a4a; opacity: 1; }
.booking-input:focus { background: #f8fafc; }
select.booking-input option { color: var(--dark); background: #fff; }

/* Solid theme-colored button segment on the end */
.booking-btn {
  flex: 0 0 230px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 28px 20px;
  transition: all .35s ease;
}
.booking-btn:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: #fff;
}

/* Success / error message under the bar (hidden while empty) */
.booking-msg { margin-top: 16px; }
.booking-msg .form-msg:empty { display: none; }

.form-msg { font-size: 15px; font-weight: 500; }
.form-msg.success { color: #2e7d32; }
.form-msg.error { color: #c0392b; }

/* ============================================================
   ROOMS — Slick slider section (after About)
============================================================ */
.rooms { background: var(--light-bg); }
.rooms-slider {
  position: relative;
  margin: 0 -15px;
}
.room-slide { padding: 0 15px; }

/* equal-height slides */
.rooms-slider .slick-track { display: flex; }
.rooms-slider .slick-slide { height: auto; }
.rooms-slider .slick-slide > div,
.rooms-slider .slick-slide > div > .room-slide { height: 100%; }

/* Slider gesture handling: horizontal gestures drive the slider,
   vertical swipes keep scrolling the page (works with Lenis) */
.rooms-slider,
.destinations-slider,
.reviews-slider,
.offers-slider {
  touch-action: pan-y;
}

.room-card {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  transition: all .4s ease;
}
.room-card:hover {
  transform: translateY(-8px);
  box-shadow: none;
}

.room-media {
  display: block;
  position: relative;
  
  height: 260px;
}
.room-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.room-card:hover .room-media img { transform: scale(1.08); }

/* Hotel name badge shown on home-page room cards */
.room-hotel-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  padding: 6px 12px;
  border-radius: 3px;
  white-space: nowrap;
}
.room-hotel-badge i { font-size: 10px; margin-right: 6px; }

.room-price {
  position: absolute;
  bottom: 0; right: 0;
  background: var(--primary);
  color: #fff;
  font-family: var(--heading-font);
  font-size: 18px;
  padding: 10px 18px;
}
.room-price small {
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,.8);
}

.room-body {
  padding: 28px 30px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.room-body h3 { font-size: 24px; margin-bottom: 10px; }
.room-body h3 a { color: var(--dark); }
.room-body h3 a:hover { color: var(--primary); }
.room-body > p { font-size: 15px; margin-bottom: 18px; }

.room-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.room-features li { font-size: 13px; font-weight: 500; color: var(--text); }
.room-features i { color: var(--primary); margin-right: 8px; }

.room-body .btn-outline-gold {
  margin-top: auto;
  align-self: flex-start;
}

/* --- Navigation arrows (custom, theme colored) --- */
.rooms-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.rooms-slider .slick-arrow::before { content: none; }  /* remove slick-theme icon font */
.rooms-slider .slick-arrow:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.rooms-slider .slick-prev { left: 14px; }
.rooms-slider .slick-next { right: 14px; }
.rooms-slider .slick-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Dots --- */
.rooms-slider { padding-bottom: 70px; margin-bottom: -70px; }
.rooms-slider .slick-dots { bottom: 10px; }
.rooms-slider .slick-dots li { margin: 0 4px; width: 22px; height: 22px; }
.rooms-slider .slick-dots li button { width: 22px; height: 22px; padding: 0; }
.rooms-slider .slick-dots li button::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c7d2de;
  opacity: 1;
  font-size: 0;
  line-height: 1;
  transition: all .3s ease;
}
.rooms-slider .slick-dots li.slick-active button::before {
  background: var(--light);
  width: 26px;
  border-radius: 20px;
}

/* ============================================================
   SERVICES — magazine layout (label/heading/tall photo left,
   photo + description + underlined link right) — after Rooms
============================================================ */
.services { background: #fff; }

.services-title {
  font-size: 46px;
  margin: 4px 0 0;
  max-width: 520px;
}

/* left : tall photo below the heading (like the swing photo) */
.svc-photo {
  margin-top: 44px;
  height: 680px;
  
}
.svc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.svc-photo:hover img { transform: scale(1.06); }

/* right : large photo, top edge flush with the label */
.svc-media {
  margin-top: 30px;
  height: 680px;
  
}
.svc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
}
.svc-media:hover img { transform: scale(1.06); }

/* Services-page magazine sections: right-side photo spans the nested row */
.service .svc-media {
  width: 100%;
  height: 340px;
}

/* "Our Other Services" section (services page): tighter vertical padding */
#other-services {
  padding: 50px 0;
}
.service .svc-photo {
    height: 340px;
}
/* description + underlined "Top Services" link (like "Top Tours") */
.services-sub {
  margin-top: 34px;
  font-size: 16px;
}
.svc-points { margin: 22px 0 6px; }
.svc-points li { font-size: 15px; }
.svc-link {
  display: inline-block;
  margin-top: 26px;
  color: var(--dark);
  font-weight: 500;
  font-size: 16px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--dark);
  transition: all .3s ease;
}
.svc-link:hover {
  color: var(--primary);
  border-color: var(--primary);
}

/* ============================================================
   HOTELS — 2 + 3 grid
============================================================ */
.hotels {
  background: #fff;
  padding-bottom: 0;
}

.hotel-card {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 35px rgba(0,0,0,.06);
  transition: all .4s ease;
}
.hotel-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0,0,0,.12);
}

.hotel-media {
  display: block;
  position: relative;
  
  height: 250px;
}
.hotel-lg .hotel-media { height: 330px; }
.hotel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.hotel-card:hover .hotel-media img { transform: scale(1.08); }

.hotel-badge {
  position: absolute;
  top: 18px; left: 18px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 7px 14px;
}
.hotel-badge i { margin-right: 6px; }

.hotel-body {
  padding: 28px 30px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hotel-rating { font-size: 12px; color: var(--primary); letter-spacing: 2px; }
.hotel-rating span { color: var(--dark); font-weight: 600; margin-left: 6px; }
.hotel-rating em { color: #a8a8a8; font-style: normal; font-weight: 400; }

.hotel-body h3 { font-size: 24px; margin: 12px 0 10px; }
.hotel-body h3 a { color: var(--dark); }
.hotel-body h3 a:hover { color: var(--primary); }
.hotel-body > p { font-size: 15px; }

.hotel-features {
  list-style: none;
  padding: 0;
  margin: 15px 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: #8a8a8a;
}
.hotel-features i { 
  color: var(--light); 
  margin-right: 8px; 
  font-size: 18px;
  vertical-align: middle;
}

.hotel-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hotel-foot .price { font-size: 13px; color: #8a8a8a; }
.hotel-foot .price strong { font-size: 20px; color: var(--primary); font-weight: 700; }

/* ============================================================
   ABOUT US
============================================================ */
.about { background: #fff; }

.about-media {
  position: relative;
  padding: 0 60px 60px 0;
}
.about-media::before {
  content: '';
  position: absolute;
  top: 30px; left: 30px;
  right: 30px; bottom: 30px;
  border: 2px solid var(--primary);
  opacity: .45;
  z-index: 0;
}
.about-img-main {
  position: relative;
  z-index: 1;
  width: 88%;
  display: block;
  box-shadow: 0 20px 50px rgba(0,0,0,.15);
}
.about-img-sm {
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 42%;
  z-index: 2;
  border: 2px solid #fff;
  box-shadow: 0 15px 40px rgba(0,0,0,.18);
}
.about-badge {
  position: absolute;
  top: -25px;
  right: 10px;
  z-index: 3;
  background: var(--primary);
  color: #fff;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
}
.about-badge strong { font-family: var(--heading-font); font-size: 34px; }
.about-badge span   { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }

.about-content h2 { font-size: 40px; margin-bottom: 25px; }
.about-content p  { margin-bottom: 18px; }

.about-points {
  list-style: none;
  padding: 0;
  margin: 25px 0 35px;
}
.about-points li {
  padding: 6px 0;
  font-size: 16px;
  color: var(--dark);
  font-weight: 500;
}
.about-points i { color: var(--primary); margin-right: 12px; }

.about-actions { margin-top: 10px; }
.about-call { display: flex; align-items: center; gap: 14px; }
.about-call i {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--light-bg);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.about-call span {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a8a8a8;
}
.about-call a { color: var(--dark); font-weight: 600; font-size: 17px; }
.about-call a:hover { color: var(--primary); }

/* ============================================================
   ABOUT PAGE — page hero, values, hotels overview, stats strip
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 460px;
  height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--darker);
  background-image: linear-gradient(rgba(14,36,56,.72), rgba(14,36,56,.9)),
                    url('../images/destination/tsomgo.webp');
  background-size: cover;
  background-position: center;
}
.page-hero .page-hero-inner { position: relative; z-index: 1; }
.page-hero .section-label { color: #fff; }
.page-hero h1 { color: #fff; font-size: 54px; margin-bottom: 14px; }
.page-hero p { color: rgba(255,255,255,.75); font-size: 17px; }

.value-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 36px 26px;
  height: 100%;
  text-align: center;
  transition: all .4s ease;
}
.value-card:hover {
  transform: translateY(-6px);
  border-color: var(--light);
  box-shadow: 0 12px 32px rgba(0,57,101,.12);
}
.value-card i {
  width: 64px;
  height: 64px;
  line-height: 60px;
  text-align: center;
  font-size: 26px;
  color: #fff;
  background: var(--primary);
  border: 2px solid var(--light);
  border-radius: 50%;
  margin-bottom: 20px;
  transition: all .4s ease;
}
.value-card:hover i {
  background: var(--light);
  border-color: var(--light);
  color: #fff;
}
.value-card h3 { font-size: 20px; margin-bottom: 10px; }
.value-card p { font-size: 15px; line-height: 1.7; margin-bottom: 0; }

.hotel-mini {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  
  transition: all .4s ease;
}
.hotel-mini:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
}
.hotel-mini .hm-media { display: block; height: 175px;  }
.hotel-mini .hm-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.hotel-mini:hover .hm-media img { transform: scale(1.08); }
.hotel-mini .hm-body { padding: 18px 18px 14px; }
.hotel-mini .hm-region {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--light);
  margin-bottom: 6px;
}
.hotel-mini h3 { font-size: 18px; margin-bottom: 0; }
.hotel-mini h3 a { color: var(--dark); }
.hotel-mini h3 a:hover { color: var(--primary); }

/* ============================================================
   PROMISE STATS — dark two-column number section (about page)
   Left: full-height image · Right: heading, text, 2x2 number grid
   ============================================================ */
.promise-stats {
  background: var(--darker);
  color: #fff;
  
  position: relative;
}
/* pattern overlay on the dark area — below the text content,
   kept off the photo column so the image stays clean */
.promise-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/pattrn.webp');
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.promise-stats .container-fluid { position: relative; z-index: 1; }
/* keep the full-width row flush inside the viewport — the global
   .row negative margins would otherwise push the text column
   15px past the right edge of the screen */
.promise-stats .container-fluid { padding-left: 0; padding-right: 0; }
.promise-stats .row { margin-left: 0; margin-right: 0; }
/* left column — image always matches the right content height */
.promise-media {
  position: relative;
  height: 100%;
  min-height: 480px;
}
.promise-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* thin gold frame inside the photo */
.promise-media::after {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(185,148,106,.65);
  pointer-events: none;
}
/* right column — content (positioned above the pattern overlay;
   max-width keeps long lines aligned with the page container
   on wide screens instead of running edge to edge) */
.promise-body { position: relative; z-index: 1; padding: 90px 0px 90px 60px; max-width: 760px; }
.promise-body .section-label { color: var(--light); }
.promise-body h2 { color: #fff; font-size: 44px; margin-bottom: 22px; }
.promise-body p { color: rgba(255,255,255,.72); margin-bottom: 16px; }
/* 2x2 number grid */
.promise-grid { margin-top: 40px; }
.promise-stat {
  border-left: 2px solid var(--light);
  padding-left: 22px;
  margin-bottom: 34px;
}
.promise-num {
  font-family: var(--heading-font);
  font-size: 50px;
  line-height: 1;
  color: var(--light);
}
.promise-num sup { font-size: 26px; margin-left: 2px; }
.promise-label {
  display: block;
  color: #fff;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ============================================================
   SERVICES 2 — Our Services (tab-style list + image)
============================================================ */
.travel-services {
  background: var(--light-bg);
}

/* --- left column: label, heading + tab list --- */
.ts-head h2 { font-size: 40px; margin-bottom: 16px; }
.ts-lead {
  max-width: 540px;
  font-size: 16px;
  color: #666;
  margin-bottom: 0;
}

.ts-tabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ts-tab {
  display: flex;
  gap: 0;
  width: 100%;
  padding: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
  overflow: hidden;
}

.ts-tab:hover { 
  background: #fff;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.ts-thumb {
  flex: 0 0 180px;
  height: auto;
  overflow: hidden;
}

.ts-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.ts-tab:hover .ts-thumb img { transform: scale(1.08); }

.ts-body {
  flex: 1;
  padding: 20px 24px;
  transition: all 0.3s ease;
}

/* navy tag badge (theme color) */
.ts-tag {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-bottom: 10px;
}

.ts-tab.active .ts-body {
  position: relative;
  background: #fff;
  border-left: 3px solid var(--light);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 12px 15px;
}

.ts-title {
  display: block;
  font-family: 'Gilda Display', serif;
  font-size: 28px;
  color: var(--dark);
  margin-bottom: 8px;
  transition: color .3s ease;
}

.ts-desc { display: block; font-size: 14px; color: #666; line-height: 1.7; }

/* active tab highlight */
.ts-tab.active .ts-title { color: var(--primary); }
.ts-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- right column: large image (matches tab list height) --- */
.ts-media-col { 
  position: relative;
  display: flex;
  align-items: stretch;
}

.ts-media {
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  position: relative;
}

.ts-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, opacity 0.4s ease;
}

.ts-media-col:hover .ts-media img {
  transform: scale(1.05);
}

/* --- overlay heading + content on the large image --- */
.ts-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 25, 47, 0.85) 0%, rgba(10, 25, 47, 0.3) 50%, transparent 100%);
}

.ts-media-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 40px;
}

.ts-media-title {
  font-family: 'Gilda Display', serif;
  font-size: 36px;
  color: #fff;
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.ts-media-desc {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: 0;
  max-width: 500px;
}

/* Service icon indicator */
.ts-media-content::before {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--light);
  margin-bottom: 18px;
}

/* stacked columns: slightly smaller overlay text */

/* ============================================================
   VIDEO BANNER — full-width autoplay video, same look as the
   hero video but with no content (before "Our Services")
============================================================ */
.video-banner {
  position: relative;
  height: 60vh;
  min-height: 420px;
  
}
.video-banner-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--dark);
}
.video-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.8) 100%);
}
/* Video banner controls — same look/position as the hero controls */
.video-banner-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 3vw;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Centered caption on the video banner — same type styles as the hero */
.video-banner-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 15px;
}
.video-banner-caption h2 {
  color: #fff;
  font-size: 56px;
  margin: 10px 0 20px;
  text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.video-banner-caption p {
  color: rgba(255,255,255,.85);
  font-size: 18px;
  font-weight: 300;
  max-width: 700px;
  margin: 0 0 34px;
}
/* ============================================================
   HERO — VIDEO VARIANT (index-video.html)
   A bare full-screen video: no dark overlay, no caption text.
   The hero is a flex COLUMN so the booking bar is the only
   flow child and pins itself to the bottom of the video.
   ============================================================ */
.hero-video-hero {
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}

/* The global `.enquiry { margin-top: -140px }` — plus its -110 /
   -90 / -400px mobile overrides — exist to pull the bar up over
   the image slider. Here it already belongs at the bottom, so
   that offset would only float it into the middle of the screen.
   Cancel it, and drop the absolute positioning with it.
   (Higher specificity than both, so cascade order is moot.) */
.hero-video-hero .hero-enquiry {
  position: static;
  inset: auto;
  left: auto;
  right: auto;
  width: 100%;
  margin: 0 auto 34px;
  padding-bottom: 0;
}

/* The global mobile rule drops the controls to `bottom: 80px`
   in a row — straight onto the booking bar. Pin them to the right
   edge at every breakpoint instead, and keep the hover tooltip on
   their left rather than flipping it below. */
.hero-video-hero .hero-video-controls {
  top: 50%;
  bottom: auto;
  right: 3vw;
  transform: translateY(-50%);
  flex-direction: column;
}
.hero-video-hero .hero-video-controls .hero-ctrl::after {
  right: calc(100% + 14px);
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* ============================================================
   HERO VIDEO LAYER (index.html, index-both.html)
   A video dropped into the existing .hero-slider-wrap as an
   extra layer. Everything is scoped to ".hero-slider-wrap
   .hero-video", so the Owl slider markup and its own rules are
   completely untouched — and any page can opt in simply by
   adding the <div class="hero-video"> block.

   SLIDER / VIDEO TOGGLE
   The two are mutually exclusive, switched purely by whether the
   .hero-slider block is present in the HTML:
     slider present  -> slider shows, video stays hidden
     slider removed  -> video takes over as the hero
   So you can flip between them by commenting out either block,
   with no CSS edits.
   ============================================================ */
.hero-slider-wrap .hero-video {
  display: none;            /* hidden while the slider is on */
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--dark);
}
/* Slider absent from the markup -> reveal the video as the hero.
   js/hero-video.js adds .show-video, which works in every browser;
   the :has() rule is a fallback for when JS is unavailable. */
.hero-slider-wrap.show-video .hero-video,
.hero-slider-wrap:not(:has(.hero-slider)) .hero-video { display: block; }

.hero-slider-wrap .hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Keep the booking bar and the slider arrows/dots clickable
   above the new video layer (Owl nav + dots already sit at z-3). */
.hero-slider-wrap .hero-enquiry { z-index: 4; }

/* .hero-slider normally sets `z-index: 1` with position:relative, which
   makes it a STACKING CONTEXT — so the Owl arrows/dots (z-3) get trapped
   inside it and would sit above the video. Dropping it back to `auto`
   lets those children compete in the parent context, so the slides
   (z-auto) sit under the video (z-2) while the arrows/dots (z-3) stay
   above it. Scoped with :has() so pages with no video are untouched. */
.hero-slider-wrap:has(.hero-video) .hero-slider { z-index: auto; }

/* ============================================================
   YOUTUBE SHORTS — 4/1 responsive grid of vertical videos
   Click a poster to swap in the YouTube iframe in place.
   ============================================================ */
.shorts { background: #fff; }

.shorts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
}

.short-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  transition: all .35s ease;
}
.short-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0,0,0,.12);
  border-color: var(--primary);
}

/* 9:16 frame that matches the shape of a Short */
.short-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 420px;
  overflow: hidden;
  background: var(--dark);
}

/* the YouTube embed fills the frame exactly */
.short-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.short-body { padding: 20px 18px 22px; }
.short-body h3 { font-size: 19px; margin-bottom: 6px; }
.short-body h3 a:hover { color: var(--primary); }
.short-body p { font-size: 14px; margin: 0; }


/* ============================================================
   WHY CHOOSE US — 30% content + trust / 70% counters grid
============================================================ */
.why-choose {
  background: var(--primary-dark) url('../images/hotels/trekocity-hotels/deluxe-double-occupancy-room-4.webp') center center / cover no-repeat;
  background-attachment: fixed;
  position: relative;
  
}
.why-grid {
  display: flex;
  gap: 50px;
  align-items: stretch;
}
.why-left { flex: 0 0 30%; max-width: 30%; }
.why-right { flex: 1 1 70%; max-width: 70%; }

.why-left h2 { font-size: 44px; margin-bottom: 18px; color: #fff; }
.why-left .section-label { color: #fff; }
.why-left > p { font-size: 15px; margin-bottom: 28px; color: rgba(255,255,255,.82); }
.why-left .btn-gold { margin-bottom: 50px; }

/* Client trust block — Google reviews */
.why-trust {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: 0 12px 30px rgba(14, 36, 56, 0.06);
}
.why-trust-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.why-google { display: inline-flex; line-height: 0; }
.why-trust-brand { font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--dark); }
.why-trust-stars { display: flex; align-items: center; gap: 4px; color: #f6a609; font-size: 16px; margin-bottom: 8px; }
.why-trust-stars strong { color: var(--dark); font-size: 20px; margin-left: 8px; font-family: var(--heading-font); font-weight: 400; }
.why-trust p { font-size: 14px; margin: 0; }
.why-trust p strong { color: var(--dark); }

/* Counters — luxury style: no icons, no background, no borders.
   2 x 2 grid (2 per row, 5th spans full width centered).
   Oversized serif numerals, gold hairline above, wide-tracked labels. */
.why-counters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 115px 20px;
  height: 100%;
  align-content: center;
}
.why-counter {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}
/* 5th counter — centered across both columns */
.why-counter-last {
  grid-column: 1 / -1;
  max-width: 50%;
  width: 100%;
  margin: 0 auto;
}
/* Gold hairline above each numeral */
.why-counter::before {
  content: '';
  width: 46px;
  height: 2px;
  background: var(--primary);
  opacity: .85;
  margin: 0 auto 18px;
}
.why-num {
  font-family: var(--heading-font);
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  color: #fff;
  margin-bottom: 12px;
}
/* Suffix (+ / K+) rendered in gold by the counter script */
.why-num em { font-style: normal; color: var(--primary); font-size: .62em; letter-spacing: 0; }
.why-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  line-height: 1.7;
}

.amenity-item {
  padding: 30px 20px;
  transition: all .4s ease;
}

.amenity-item > i {
  font-size: 46px;
  color: var(--primary);
  /* FA5 Free solid requires weight 900 — anything else matches the empty
     "regular" face and renders the icons blank */
  font-weight: 900;
  margin-bottom: 22px;
  transition: all .4s ease;
}

.amenity-item h3 {
  font-size: 26px;
  margin-bottom: 12px;
}

.amenity-item p {
  font-size: 15px;
  max-width: 300px;
  margin: 0 auto;
}

/* arrow link (like the "→" in the reference) */
.amenity-arrow {
  display: inline-block;
  margin-top: 20px;
  color: var(--dark);
  font-size: 18px;
  transition: all .35s ease;
}
.amenity-arrow:hover { color: var(--primary); }
.amenity-arrow i { transition: transform .35s ease; }
.amenity-item:hover .amenity-arrow i { transform: translateX(8px); }
.amenity-item:hover > i { transform: translateY(-6px); }

/* ============================================================
   FOOTER
============================================================ */
.site-footer {
  background: var(--darker);
  color: rgba(255,255,255,0.6);
  position: relative;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--light), transparent);
  opacity: 0.4;
}

/* ---------- Row 2 : 4-column grid (left aligned) ---------- */
.site-footer-center .footer-grid-row { text-align: left; }
.site-footer-center .footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 1.3fr;
  gap: 40px;
}
.site-footer-center .footer-grid .footer-title { text-align: left; }
.site-footer-center .footer-grid .footer-title::after { left: 0; transform: none; }
.site-footer-center .footer-grid .footer-social { justify-content: flex-start; margin-top: 18px; }

/* ---------- Centered 3-row footer ---------- */
.site-footer-center { text-align: center; }
.site-footer-center .footer-row {
  padding: 46px 0 40px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-footer-center .footer-logo-row .footer-brand { margin-bottom: 16px; }
.site-footer-center .footer-brand .brand-logo { height: 200px; }
.site-footer-center .footer-about {
  max-width: 560px;
  margin: 0 auto;
}
.site-footer-center .footer-social { justify-content: center; }
.site-footer-center .footer-inline-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 26px;
  margin-bottom: 16px;
}
.site-footer-center .footer-inline-links a {
  color: rgba(255,255,255,.65);
  font-size: 14px;
  letter-spacing: .4px;
  transition: color .3s ease;
}
.site-footer-center .footer-inline-links a:hover { color: var(--light); }
.site-footer-center .footer-hotels-links { margin-bottom: 20px; }
.site-footer-center .footer-hotels-links a { font-size: 13px; color: rgba(255,255,255,.45); }
.site-footer-center .footer-contact-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.site-footer-center .footer-contact-line i { color: var(--light); margin-right: 7px; }
.site-footer-center .footer-contact-line a { color: rgba(255,255,255,.5); }
.site-footer-center .footer-contact-line a:hover { color: var(--light); }
.site-footer-center .footer-copy-row { margin-top: 0; }
.site-footer-center .footer-copy-row p { margin: 0; }

.footer-brand {
  display: inline-block;
  margin-bottom: 18px;
}

.footer-brand .brand-logo {
  height: 45px;
  filter: brightness(0) invert(1);
}

.footer-about {
  font-size: 14px;
  line-height: 1.8;
  color: rgba(255,255,255,0.5);
}

.footer-title {
  color: #fff;
  font-size: 18px;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 12px;
  font-weight: 400;
}

.footer-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 30px; height: 2px;
  background: var(--light);
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a {
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  transition: all 0.3s ease;
}
.footer-links a:hover {
  color: var(--light);
  padding-left: 8px;
}

.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li {
  margin-bottom: 14px;
  font-size: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.footer-contact i {
  color: var(--light);
  width: 18px;
  margin-top: 4px;
  font-size: 13px;
}
.footer-contact a { color: rgba(255,255,255,0.5); }
.footer-contact a:hover { color: var(--light); }

.footer-social {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50%;
  color: rgba(255,255,255,0.7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: all 0.3s ease;
}
.footer-social a:hover {
  background: var(--light);
  border-color: var(--light);
  color: #fff;
  transform: translateY(-3px);
}

.footer-bottom {
  margin-top: 60px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 20px 0;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
}

.footer-bottom a {
  color: var(--light);
  transition: color 0.3s ease;
}

.footer-bottom a:hover {
  color: #d4a86c;
}

.footer-bottom i { color: var(--light); }

/* ============================================================
   EXTRAS — misc
============================================================ */

body.menu-open .site-header,
body.menu-open .site-header.scrolled { background: transparent; box-shadow: none; }
body.menu-open .site-header .nav-toggle span { background: #fff; }
body.menu-open .site-header .nav-toggle { border-color: rgba(255,255,255,.6); }

/* Bootstrap validation state colors kept subtle */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid { border-color: #dc3545; }

/* ============================================================
   NEARBY DESTINATIONS — staggered gold-frame slider
   (immersive activities style: framed photos, centered
   serif title + text + underlined link, offset middle slide)
============================================================ */
.destinations-slider { position: relative; margin: 0 -25px; }
.dest-slide { padding: 0 25px; }

.dest-card { text-align: center; }

/* thin navy frame (theme color); the photo overlaps the frame's bottom edge like the reference */
.dest-frame {
  position: relative;
  border: 1px solid var(--primary);
  padding: 14px 14px 0;
}
.dest-frame img {
  display: block;
  width: 100%;
  height: 470px;
  object-fit: cover;
  position: relative;
  margin-bottom: -14px;   /* photo breaks past the bottom border */
}

/* staggered rhythm — the middle slide of each view sits lower */
.destinations-slider .slick-slide:nth-child(3n+2) .dest-card { margin-top: 0; }

.dest-body { padding-top: 32px; }
.dest-region {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}
.dest-body h3 { font-size: 30px; margin-bottom: 12px; }
.dest-body h3 a { color: var(--dark); }
.dest-body h3 a:hover { color: var(--primary); }
.dest-body > p {
  font-size: 15px;
  max-width: 330px;
  margin: 0 auto 16px;
}
.dest-link {
  font-size: 14px;
  color: var(--dark);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: var(--border);
  transition: color .3s ease, text-decoration-color .3s ease;
}
.dest-link:hover {
  color: var(--primary);
  text-decoration-color: var(--primary);
}

/* --- Arrows (same custom style as the rooms slider) --- */
.destinations-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.destinations-slider .slick-arrow::before { content: none; }
.destinations-slider .slick-arrow:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.destinations-slider .slick-prev { left: 14px; }
.destinations-slider .slick-next { right: 14px; }
.destinations-slider .slick-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.destinations-slider .slick-arrow.slick-disabled { opacity: .35; pointer-events: none; }

/* --- Dots --- */
.destinations-slider { padding-bottom: 70px; margin-bottom: -70px; }
.destinations-slider .slick-dots { bottom: 10px; }
.destinations-slider .slick-dots li { margin: 0 4px; width: 22px; height: 22px; }
.destinations-slider .slick-dots li button { width: 22px; height: 22px; padding: 0; }
.destinations-slider .slick-dots li button::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c7d2de;
  opacity: 1;
  font-size: 0;
  line-height: 1;
  transition: all .3s ease;
}
.destinations-slider .slick-dots li.slick-active button::before {
  background: var(--light);
  width: 26px;
  border-radius: 20px;
}

/* --- Responsive --- */

/* ============================================================
   NEARBY DESTINATIONS PAGE — 50% image / 50% content blocks
   Every destination box: image left (navy frame) + content right
   (subheading, heading, paragraph, 2x2 key-point grid, button).
   .reverse flips the image to the right for a zig-zag rhythm.
============================================================ */
.dest-features .dest-feature {
  display: flex;
  align-items: center;
  gap: 70px;
  margin-bottom: 90px;
}
.dest-features .dest-feature:last-child { margin-bottom: 0; }

/* --- 50% media side: signature navy frame like the slider --- */
.dest-feature-media {
  flex: 0 0 50%;
  max-width: 50%;
  border: 1px solid var(--primary);
  padding: 14px 14px 0;
}
.dest-feature-media img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  position: relative;
  margin-bottom: -14px;   /* photo breaks past the frame's bottom border */
}

/* --- 50% content side --- */
.dest-feature-body { flex: 1 1 50%; max-width: 50%; }
.dest-feature-body .section-label { margin-bottom: 14px; }
.dest-feature-body h3 {
  font-size: 34px;
  margin-bottom: 14px;
}
.dest-feature-body > p {
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 26px;
}

/* --- Key points: 2 x 2 grid --- */
.dest-points {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 30px;
}
.dest-points li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.dest-points li > i {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--primary);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}
.dest-points li:hover > i {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.dest-points li strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dark);
  margin-bottom: 3px;
}
.dest-points li span {
  display: block;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}

/* --- Alternate layout: image on the right --- */
.dest-feature.reverse { flex-direction: row-reverse; }

/* --- Responsive --- */

/* ============================================================
   SIGNATURE NAVY PHOTO FRAME — the same thin navy border + white
   mat as the "Nearby Destinations" images, applied to the
   "Feel The Luxury" services photos
============================================================ */
.svc-photo,
.svc-media {
  border: 1px solid var(--primary);
  padding: 14px 14px 0;
}

/* ============================================================
   FULL-SCREEN VIDEO POPUP (lightbox for hero + video banner)
============================================================ */
.video-popup {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
}
.video-popup.open { display: flex; }
.video-popup video {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* whole frame visible, letterboxed on odd ratios */
  background: #000;
}
.video-popup-close {
  position: absolute;
  top: 26px;
  right: 30px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
}
.video-popup-close:hover { background: var(--primary); border-color: var(--primary); }
.video-popup-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ============================================================
   REVIEWS / TESTIMONIALS — slider
============================================================ */
.reviews {
  background: var(--light-bg);
}

.reviews-slider {
  position: relative;
  margin: 0 -15px;
}
.review-slide { padding: 0 15px; }

/* equal-height slides */
.reviews-slider .slick-track { display: flex; }
.reviews-slider .slick-slide { height: auto; }
.reviews-slider .slick-slide > div,
.reviews-slider .slick-slide > div > .review-slide { height: 100%; }

.review-card {
  background: #fff;
  padding: 40px 36px 36px;
  border: none;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.4s ease;
  box-shadow: none;
  position: relative;
}

.review-card::before {
  content: '"';
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 80px;
  font-family: Georgia, serif;
  color: var(--light);
  opacity: 0.15;
  line-height: 1;
  pointer-events: none;
}

.review-card:hover {
  transform: translateY(-8px);
  box-shadow: none;
}

.review-stars {
  color: var(--light);
  font-size: 14px;
  letter-spacing: 4px;
  margin-bottom: 20px;
}

.review-text {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text);
  font-style: italic;
  flex: 1;
  margin-bottom: 28px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 22px;
  margin-top: auto;
}

.review-avatar {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 51, 101, 0.3);
  border: 2px solid var(--light);
}

.review-avatar i {
  line-height: 1;
  font-size: 28px;
  color: #fff;
}

.review-author strong {
  display: block;
  font-size: 16px;
  color: var(--dark);
  font-weight: 600;
  line-height: 1.3;
}

.review-author span {
  display: block;
  font-size: 13px;
  color: var(--text);
  margin-top: 4px;
  align-content: center;
  text-align: center;
}

/* --- Arrows (same custom style as rooms slider) --- */
.reviews-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.reviews-slider .slick-arrow::before { content: none; }
.reviews-slider .slick-arrow:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.reviews-slider .slick-prev { left: 14px; }
.reviews-slider .slick-next { right: 14px; }
.reviews-slider .slick-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Dots --- */
.reviews-slider { padding-bottom: 70px; margin-bottom: -70px; }
.reviews-slider .slick-dots { bottom: 10px; }
.reviews-slider .slick-dots li { margin: 0 4px; width: 22px; height: 22px; }
.reviews-slider .slick-dots li button { width: 22px; height: 22px; padding: 0; }
.reviews-slider .slick-dots li button::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c7d2de;
  opacity: 1;
  font-size: 0;
  line-height: 1;
  transition: all .3s ease;
}
.reviews-slider .slick-dots li.slick-active button::before {
  background: var(--light);
  width: 26px;
  border-radius: 20px;
}

/* --- Responsive --- */

/* ============================================================
   OFFERS / DEALS — slider
============================================================ */
.offers {
  background: var(--light-bg);
}

.offers-slider { position: relative; margin: 0 -15px; }
.offer-slide { padding: 0 15px; }

/* equal-height slides */
.offers-slider .slick-track { display: flex; }
.offers-slider .slick-slide { height: auto; }
.offers-slider .slick-slide > div,
.offers-slider .slick-slide > div > .offer-slide { height: 100%; }

.offer-card {
  background: #fff;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 35px rgba(0,0,0,.06);
  transition: all .4s ease;
}
.offer-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0,0,0,.12);
}

.offer-media {
  display: block;
  position: relative;
  
  height: 240px;
}
.offer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}
.offer-card:hover .offer-media img { transform: scale(1.08); }

.offer-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--primary);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  padding: 7px 14px;
}

.offer-body {
  padding: 26px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.offer-body h3 { font-size: 24px; margin-bottom: 10px; }
.offer-body > p { font-size: 15px; margin-bottom: 18px; }

.offer-features {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.offer-features li { font-size: 13px; font-weight: 500; color: var(--text); }
.offer-features i { color: var(--primary); margin-right: 8px; }

.offer-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.offer-price { font-size: 14px; color: var(--text); }
.offer-price span { display: block; font-size: 12px; margin-bottom: 2px; }
.offer-price strong { font-size: 22px; color: var(--primary); font-family: var(--heading-font); }

/* --- Arrows (same custom style as rooms slider) --- */
.offers-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 16px;
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .3s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}
.offers-slider .slick-arrow::before { content: none; }
.offers-slider .slick-arrow:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.offers-slider .slick-prev { left: 14px; }
.offers-slider .slick-next { right: 14px; }
.offers-slider .slick-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

/* --- Dots --- */
.offers-slider { padding-bottom: 70px; margin-bottom: -70px; }
.offers-slider .slick-dots { bottom: 10px; }
.offers-slider .slick-dots li { margin: 0 4px; width: 22px; height: 22px; }
.offers-slider .slick-dots li button { width: 22px; height: 22px; padding: 0; }
.offers-slider .slick-dots li button::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c7d2de;
  opacity: 1;
  font-size: 0;
  line-height: 1;
  transition: all .3s ease;
}
.offers-slider .slick-dots li.slick-active button::before {
  background: var(--light);
  width: 26px;
  border-radius: 20px;
}

/* --- Responsive --- */

/* ============================================================
   SLIDER ARROWS — wide desktops only: restore the arrows
   flanking the track outside the slider (container is safely
   centered on screens this wide, so nothing gets clipped)
============================================================ */

/* ============================================================
   IMAGE MARQUEE GALLERY
   ============================================================ */
.marquee-gallery {
  padding: 50px 0;
  background: var(--darker);
  
}

.marquee-row {
  
  position: relative;
  padding: 8px 0;
}

.marquee-row + .marquee-row {
  margin-top: 15px;
}

.marquee-track {
  display: flex;
  gap: 20px;
  width: max-content;
  --mq-gap: 20px; /* half of this keeps the marquee loop seamless; kept in sync with the gap overrides in responsive.css */
}

.marquee-item {
  flex: 0 0 auto;
  width: 300px;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  position: relative;
}

.marquee-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

.marquee-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   ANIMATIONS DISABLED SITE-WIDE
   All motion — keyframe animations, CSS transitions, smooth
   scrolling and slider/carousel motion effects — is turned off.
   State changes (hover, open/close, slide change) are instant.

   EXCEPTIONS (documented here so they are not "fixed" away):
   1. Slick (.slick-track/.slick-slide) and Owl (.owl-stage/.owl-item)
      elements are excluded via :not(:where(...)) — both libraries
      manage their own inline transitions and Owl needs the
      transitionend event to finish a slide, so killing transitions
      froze/broke the sliders. :where() adds no specificity, so this
      rule stays at (0,0,0) and the !important exceptions below
      (zoom hover, marquee) keep winning exactly as before.
   2. .hero-slide is excluded — the hero cross-fade is driven by the
      .active class + its opacity transition (the stage stays frozen).
   3. The marquee rows animate (declared further below with
      !important rules that beat this one).
   4. Image zoom-on-hover keeps its transition.
============================================================ */
html { scroll-behavior: auto !important; }

*:not(:where(.slick-track, .slick-slide, .owl-stage, .owl-item, .hero-slide)),
*::before,
*::after {
  animation: none !important;
  transition: none !important;
}

/* Safety: never leave reveal/hero-caption elements hidden */
.reveal,
.hero-slider .hero-caption > * {
  opacity: 1 !important;
  transform: none !important;
}

/* EXCEPTION — image zoom-on-hover is allowed to animate.
   These more-specific !important rules override the global
   transition: none above, giving a slow, smooth zoom (.8s). */
.room-media img,
.svc-photo img,
.svc-media img,
.hotel-media img,
.hm-media img,
.ts-thumb img,
.ts-media img,
.offer-media img,
.gallery-item img {
  transition: transform .8s ease !important;
}

/* Clip the zoomed image inside its frame so it never spills out */
.room-media,
.svc-photo,
.svc-media,
.hotel-media,
.hm-media,
.offer-media,
.gallery-item {
  overflow: hidden;
}

/* EXCEPTION — marquee gallery scrolls again.
   The global `animation: none !important` above is beaten by these
   higher-specificity !important rules. --mq-gap (set per breakpoint
   on .marquee-track) is half the flex gap, which keeps the jump from
   the end of the loop back to the start pixel-perfect. */
@keyframes marqueeMoveLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--mq-gap, 20px) / 2)); }
}
@keyframes marqueeMoveRight {
  from { transform: translateX(calc(-50% - var(--mq-gap, 20px) / 2)); }
  to   { transform: translateX(0); }
}
.marquee-left .marquee-track {
  animation: marqueeMoveLeft 45s linear infinite !important;
  will-change: transform;
}
.marquee-right .marquee-track {
  animation: marqueeMoveRight 45s linear infinite !important;
  will-change: transform;
}

/* Fade edges */
.marquee-row::before,
.marquee-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
}

.marquee-row::before {
  left: 0;
  background: linear-gradient(to right, var(--darker), transparent);
}

.marquee-row::after {
  right: 0;
  background: linear-gradient(to left, var(--darker), transparent);
}

/* Responsive */

/* ============================================================
   FOOTER SUBSCRIBE SECTION
   ============================================================ */
.footer-subscribe {
  padding: 50px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative;
  margin-bottom: 50px;
}

.subscribe-wrapper {
  max-width: 550px;
  margin: 0 auto;
}

.footer-subscribe .section-head {
  margin-bottom: 30px;
}

.footer-subscribe .section-label {
  color: var(--light);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
}

.footer-subscribe h2 {
  color: #fff;
  font-size: 32px;
  margin-bottom: 12px;
}

.footer-subscribe p {
  color: rgba(255,255,255,0.6);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 0;
}

.footer-subscribe .btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.footer-subscribe .btn-gold i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.footer-subscribe .btn-gold:hover i {
  transform: translateX(4px);
}

/* Responsive */

/* ============================================================
   RESTAURANT MENU — dark premium section with pattern
   ============================================================ */

/* ============================================================
   PATTERN OVERLAY — "pattrn.webp" tiled faintly over
   Rooms, Video Banner, Why Choose Us, Marquee Gallery, Services
   magazine-layout + Footer.
   The ::before/::after layer always sits BELOW the text
   content (containers are lifted with z-index: 1).
   ============================================================ */
.rooms,
.why-choose,
.marquee-gallery,
.services {
  position: relative;
}
.rooms::before,
.why-choose::before,
.marquee-gallery::before,
.services::before,
.video-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/pattrn.webp');
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}
/* Our Rooms (cream bg) */
.rooms::before { opacity: .5; z-index: 0; }
.rooms .container { position: relative; z-index: 1; }
/* Video banner: pattern sits above the video + dark gradient, below caption/controls */
.video-banner::before { opacity: 1; z-index: 1; }
.video-banner-caption,
.video-banner-controls { z-index: 2; }
/* Why Choose Us (Room-1.webp bg + primary-dark overlay) — content stays white */
.why-choose::before {
  background-image: linear-gradient(180deg, rgba(13,67,89,.92) 0%, rgba(13,67,89,.86) 50%, rgba(13,67,89,.92) 100%), url('../images/pattrn.webp');
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  z-index: 0;
}
.why-choose .container { position: relative; z-index: 1; }
/* Image marquee (dark bg) — pattern stays fixed like a parallax backdrop */
.marquee-gallery::before {
  opacity: .8;
  z-index: 0;
  background-attachment: fixed;
  bacground-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.marquee-gallery .container-fluid { position: relative; z-index: 1; }
/* Services magazine-layout (light bg) */
.services::before { opacity: .08; z-index: 0; }
.services .container { position: relative; z-index: 1; }
/* Footer already uses ::before for the gold hairline — pattern goes on ::after */
.site-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/pattrn.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.site-footer > * { position: relative; z-index: 1; }

/* ============================================================
   NEW PAGES — gallery grid + contact form (services.html
   reuses home sections, so it needs no new CSS)
   ============================================================ */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.gallery-item { position: relative;  border-radius: 8px; height: 250px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 16px 14px; color: #fff; font-size: 14px; letter-spacing: 1px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  z-index: 1;
}

/* ---------- Gallery filters ---------- */
.gallery-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 40px; }
.gallery-filter button {
  background: transparent; border: 1px solid var(--border); color: var(--dark);
  font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  padding: 11px 22px; cursor: pointer; font-family: var(--body-font);
  transition: all .3s ease;
}
.gallery-filter button:hover { border-color: var(--primary); color: var(--primary); }
.gallery-filter button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.gallery-filter button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.gallery-item { cursor: pointer; }
.gallery-item.hide { display: none; }

/* Dark overlay + eye button on hover */
.gallery-item::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: rgba(13, 67, 89, .45);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.gallery-item:hover::before { opacity: 1; }
.gallery-item .g-eye {
  position: absolute; top: 50%; left: 50%; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.95); color: var(--dark); font-size: 16px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, -40%) scale(.8);
  box-shadow: 0 8px 22px rgba(0,0,0,.3);
  transition: all .35s ease;
}
.gallery-item:hover .g-eye,
.gallery-item:focus-within .g-eye {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.gallery-item .g-eye:hover { background: var(--primary); color: #fff; }
.gallery-item .g-eye:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- Gallery lightbox ---------- */
.g-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(8, 20, 30, .93);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 56px 76px 64px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.g-lightbox.open { opacity: 1; visibility: visible; }
.g-lightbox figure {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  max-width: 100%; max-height: 100%;
}
.g-lightbox img {
  max-width: 100%; height: auto;
  max-height: calc(100vh - 190px);
  object-fit: contain; border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.g-lightbox figcaption { color: #fff; margin-top: 14px; font-size: 14px; letter-spacing: 1px; text-align: center; }
.g-lightbox .g-count { color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: 2px; margin-top: 4px; }
.g-lb-btn {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08); color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s ease, border-color .3s ease;
}
.g-lb-btn:hover { background: var(--primary, #2796c4); border-color: var(--primary, #2796c4); }
.g-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.g-lb-close { top: 22px; right: 22px; }
.g-lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.g-lb-next { right: 18px; top: 50%; transform: translateY(-50%); }

.contact-form { background: #fff; border: 1px solid var(--border); padding: 44px 40px; }
.contact-form .form-control, .contact-form .form-select {
  border-radius: 0; padding: 14px 16px; font-size: 15px; margin-bottom: 18px; border-color: var(--border);
}
.contact-form .form-control:focus, .contact-form .form-select:focus { border-color: var(--primary); box-shadow: none; }

/* ============================================================
   HOTEL DETAIL PAGE — individual hotel (The Country House)
   Luxury hotel-description flow: tall photo hero with rating and
   feature chips, booking bar, 50/50 overview, rooms slider,
   full photo gallery (lightbox), amenity tiles, nearby list,
   guest reviews slider and a closing enquiry band.
   Reuses the site's own blocks (.page-hero, .dest-feature,
   .rooms-slider, .gallery-grid, .amenity-item, .reviews-slider).
============================================================ */

/* ---------- Hero : taller, left-aligned, with rating + chips ---------- */
.page-hero.hotel-hero {
  min-height: 660px;
  height: auto;
  align-items: flex-end;
  justify-content: flex-start;
  text-align: left;
  padding: 200px 0 220px;
}
.page-hero.hotel-hero .page-hero-inner { width: 100%; }
.page-hero.hotel-hero h1 { font-size: 60px; line-height: 1.1; }
.page-hero.hotel-hero p { max-width: 620px; font-size: 18px; }

/* rating line */
.hotel-hero-meta { margin-top: 20px; }
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--primary);
  letter-spacing: 1px;
}
.hero-rating span {
  color: rgba(255,255,255,.85);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  margin-left: 10px;
}

/* small feature chips (view · gardens · dining …) */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 22px 0 30px;
}
.hero-chips span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.07);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 18px;
  transition: all .35s ease;
}
.hero-chips span:hover {
  background: var(--primary);
  border-color: var(--primary);
}
.hero-chips i { font-size: 13px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ---------- Overview band : clean white right under the booking bar ---------- */
.hotel-overview { background: #fff; }

/* ---------- Photo gallery band : white, 8 tiles in the site's 4-up grid ---------- */
.hotel-gallery { background: #fff; }
.hotel-gallery .gallery-item { height: 240px; }

/* ---------- Amenity tiles : white cards on the theme's soft tint ---------- */
.hotel-amenities { background: var(--light-bg); }
.hotel-amenities .amenity-item {
  background: #fff;
  border: 1px solid var(--border);
  height: 100%;
  padding: 38px 22px;
  text-align: center;
}
.hotel-amenities .amenity-item > i { font-size: 40px; margin-bottom: 18px; }
.hotel-amenities .amenity-item h3 { font-size: 20px; margin-bottom: 10px; }
.hotel-amenities .amenity-item p { font-size: 14px; max-width: none; }
.hotel-amenities .amenity-item:hover {
  border-color: var(--primary);
  box-shadow: 0 14px 34px rgba(0,57,101,.1);
}

/* ---------- Nearby attractions : white, 50 / 50 photo + 2 x 2 key points ---------- */
.hotel-nearby { background: #fff; }
.hotel-nearby .dest-feature-media img { height: 460px; }

/* ---------- Closing enquiry band over a hotel photo ---------- */
.stay-cta {
  position: relative;
  padding: 120px 0;
  text-align: center;
  background-color: var(--darker);
  background-size: cover;
  background-position: center;
  color: #fff;
}
.stay-cta h2 {
  color: #fff;
  font-size: 46px;
  margin-bottom: 16px;
}
.stay-cta p {
  color: rgba(255,255,255,.78);
  max-width: 640px;
  margin: 0 auto 32px;
}
.stay-cta .stay-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.stay-cta .stay-cta-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  color: #fff;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.stay-cta .stay-cta-call:hover { color: var(--primary); }

/* ---------- Responsive ---------- */

/* ==================================================================
   OFFER POPUP + COOKIE BAR (moved from popups.css)
================================================================== */

/* Trekocity Hotels — Offer Popup + Cookie Bar
   All rules are scoped under #offerOverlay / #cookieBar so the homepage
   .offers-slider cards (which also use .offer-media / .offer-body) are never affected. */
#offerOverlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(10, 28, 42, 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
#offerOverlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

/* Modal shell: fixed size, never forces page scroll */
#offerOverlay .offer-modal {
  position: relative;
  width: min(880px, 94vw);
  max-height: min(90vh, 640px);
  background: #fff;
  display: flex;
  box-shadow: 0 30px 90px rgba(0,0,0,.45), 0 4px 18px rgba(0,0,0,.2);
  transform: translateY(32px) scale(.96);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
#offerOverlay.show .offer-modal { transform: translateY(0) scale(1); opacity: 1; }
#offerOverlay .offer-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.95); color: #14202b;
  font-size: 14px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: background .3s ease, color .3s ease, transform .35s ease;
}
#offerOverlay .offer-close:hover { background: var(--primary, #2796c4); color: #fff; transform: rotate(90deg); }
#offerOverlay .offer-close:focus-visible { outline: 2px solid var(--primary, #2796c4); outline-offset: 2px; }
#offerOverlay .offer-grid { display: grid; grid-template-columns: 43% 57%; width: 100%; min-height: 0; }
#offerOverlay .offer-media { position: relative; min-height: 480px; height: 100%;  background: #0d4359; }
#offerOverlay .offer-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; }
#offerOverlay .offer-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,34,0) 45%, rgba(8,24,34,.55) 100%); pointer-events: none; }
#offerOverlay .offer-badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: #ff5a3c; color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 15px; border-radius: 30px;
  box-shadow: 0 8px 20px rgba(255,90,60,.45);
}
#offerOverlay .offer-media-caption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; color: #fff; font-size: 13px; line-height: 1.5; display: flex; align-items: center; gap: 8px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
#offerOverlay .offer-media-caption i { color: #ffd66b; font-size: 14px; }
#offerOverlay .offer-body { padding: 36px 36px 28px; text-align: left; overflow-y: auto; max-height: min(90vh, 640px); scrollbar-width: thin; }
#offerOverlay .offer-body::-webkit-scrollbar { width: 6px; }
#offerOverlay .offer-body::-webkit-scrollbar-thumb { background: #c9d8e4; border-radius: 10px; }
#offerOverlay .offer-body .section-label { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--primary, #2796c4); margin-bottom: 10px; }
#offerOverlay .offer-body .section-label::before { content: ""; width: 26px; height: 2px; background: var(--primary, #2796c4); display: inline-block; }
#offerOverlay .offer-body h2 { font-family: var(--heading-font, 'Gilda Display', serif); font-size: clamp(26px, 3.4vw, 36px); line-height: 1.15; color: #14202b; margin: 0 0 10px; font-weight: 400; }
#offerOverlay .offer-body h2 span { display: block; color: var(--primary, #2796c4); font-size: .68em; margin-top: 2px; }
#offerOverlay .offer-body > p { font-size: 15px; line-height: 1.7; color: #6f6f6f; margin-bottom: 16px; }
#offerOverlay .offer-points { list-style: none; margin: 0 0 18px; padding: 0; }
#offerOverlay .offer-points li { position: relative; font-size: 14px; font-weight: 500; color: #2b3a48; margin-bottom: 9px; padding-left: 30px; line-height: 1.5; }
#offerOverlay .offer-points li i { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #e6f5ec; color: #1faa53; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
#offerOverlay .offer-code { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f2f8fd; border: 1.5px dashed var(--primary, #2796c4); border-radius: 12px; padding: 10px 8px 10px 16px; font-size: 14px; color: #41505f; margin-bottom: 20px; }
#offerOverlay .offer-code strong { letter-spacing: 2px; color: var(--primary-dark, #0d4359); font-size: 15px; }
#offerOverlay .offer-code button { flex: none; border: none; border-radius: 8px; cursor: pointer; background: var(--primary, #2796c4); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 9px 14px; font-family: inherit; transition: background .3s ease; }
#offerOverlay .offer-code button:hover { background: var(--primary-dark, #0d4359); }
#offerOverlay .offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-bottom: 12px; }
#offerOverlay .offer-actions .btn-gold { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
#offerOverlay .offer-actions .btn-gold i { font-size: 13px; }
#offerOverlay .offer-call { font-size: 15px; font-weight: 700; color: #14202b; text-decoration: none; white-space: nowrap; }
#offerOverlay .offer-call i { width: 32px; height: 32px; border-radius: 50%; background: #eaf4fb; color: var(--primary, #2796c4); margin-right: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; vertical-align: middle; }
#offerOverlay .offer-call:hover { color: var(--primary, #2796c4); }
#offerOverlay .offer-note { display: block; font-size: 12px; color: #9aa8b5; }
#cookieBar { position: fixed; left: 50%; bottom: 18px; z-index: 9998; width: min(1060px, calc(100vw - 24px)); background: rgba(255,255,255,.98); border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.28); border: 1px solid #e3e9f0; transform: translateX(-50%) translateY(180%); opacity: 0; visibility: hidden; transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease, visibility .4s; }
#cookieBar.show { transform: translateX(-50%) translateY(0); opacity: 1; visibility: visible; }
#cookieBar .cookie-inner { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
#cookieBar .cookie-icon {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: #fef3e2; color: #d99a2b;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
#cookieBar .cookie-text { flex: 1; min-width: 0; }
#cookieBar .cookie-text strong { display: block; font-size: 15px; color: #14202b; margin-bottom: 2px; }
#cookieBar .cookie-text p { margin: 0; font-size: 13px; line-height: 1.55; color: #6f6f6f; }
#cookieBar .cookie-actions { flex: none; display: flex; align-items: center; gap: 10px; }
#cookieBar .cookie-actions .btn-gold { border: none; padding: 12px 26px; font-size: 12px; white-space: nowrap; cursor: pointer; font-family: inherit; }
#cookieBar .cookie-decline {
  background: transparent; border: 1px solid #d5dde6; border-radius: 0;
  padding: 11px 20px; font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: #555;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: all .3s ease;
}
#cookieBar .cookie-decline:hover { border-color: #14202b; color: #14202b; background: #f6f9fc; }
body.offer-lock {  }

/* Tablet */

/* Small phones */

/* ==================================================================
   BOOK NOW POPUP — home page rooms slider (same style as offer popup)
================================================================== */
#bookOverlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(10, 28, 42, 0.62);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease;
}
#bookOverlay.show { opacity: 1; visibility: visible; pointer-events: auto; }

/* Modal shell: fixed size, never forces page scroll */
#bookOverlay .book-modal {
  position: relative;
  width: min(880px, 94vw);
  height: 90vh;
  max-height: 90vh;
  overflow: hidden;
  background: #fff;
  display: flex;
  box-shadow: 0 30px 90px rgba(0,0,0,.45), 0 4px 18px rgba(0,0,0,.2);
  transform: translateY(32px) scale(.96);
  opacity: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
#bookOverlay.show .book-modal { transform: translateY(0) scale(1); opacity: 1; }
#bookOverlay .book-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 38px; height: 38px; border: none; border-radius: 50%;
  background: rgba(255,255,255,.95); color: #14202b;
  font-size: 14px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: background .3s ease, color .3s ease, transform .35s ease;
}
#bookOverlay .book-close:hover { background: var(--primary, #2796c4); color: #fff; transform: rotate(90deg); }
#bookOverlay .book-close:focus-visible { outline: 2px solid var(--primary, #2796c4); outline-offset: 2px; }

#bookOverlay .book-grid { display: grid; grid-template-columns: 42% 58%; grid-template-rows: minmax(0, 1fr); width: 100%; height: 100%; min-height: 0; }
#bookOverlay .book-media { position: relative; min-height: 0; height: 100%; background: #0d4359; }
#bookOverlay .book-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; display: block; }
#bookOverlay .book-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,34,0) 45%, rgba(8,24,34,.55) 100%); pointer-events: none; }
#bookOverlay .book-badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  background: var(--primary, #2796c4); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  padding: 8px 15px; border-radius: 30px;
  box-shadow: 0 8px 20px rgba(39,150,196,.45);
}
#bookOverlay .book-media-caption { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; color: #fff; font-size: 13px; line-height: 1.5; display: flex; align-items: center; gap: 8px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
#bookOverlay .book-media-caption i { color: #ffd66b; font-size: 14px; }
/* Body — mirrors the offer popup text styles */
#bookOverlay .book-body { padding: 34px 34px 26px; text-align: left; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
#bookOverlay .book-body::-webkit-scrollbar { width: 6px; }
#bookOverlay .book-body::-webkit-scrollbar-thumb { background: #c9d8e4; border-radius: 10px; }
#bookOverlay .book-body .section-label { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--primary, #2796c4); margin-bottom: 10px; }
#bookOverlay .book-body .section-label::before { content: ""; width: 26px; height: 2px; background: var(--primary, #2796c4); display: inline-block; }
#bookOverlay .book-body h2 { font-family: var(--heading-font, 'Gilda Display', serif); font-size: clamp(26px, 3.2vw, 34px); line-height: 1.15; color: #14202b; margin: 0 0 8px; font-weight: 400; }
#bookOverlay .book-body h2 span { display: block; color: var(--primary, #2796c4); font-size: .68em; margin-top: 2px; }
#bookOverlay .book-body > p { font-size: 14.5px; line-height: 1.65; color: #6f6f6f; margin-bottom: 18px; }

/* Form — 2-column grid of labelled fields */
#bookOverlay .book-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#bookOverlay .book-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
#bookOverlay .book-field.book-full { grid-column: 1 / -1; }
#bookOverlay .book-field > label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #41505f; }
#bookOverlay .book-field input,
#bookOverlay .book-field select,
#bookOverlay .book-field textarea {
  width: 100%;
  border: 1.5px solid var(--border, #e3e9f0);
  border-radius: 10px;
  background: #f8fafc;
  padding: 12px 14px;
  font-family: var(--body-font, 'Barlow', sans-serif);
  font-size: 14px;
  color: var(--dark, #14202b);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
#bookOverlay .book-field select {
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232796c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
#bookOverlay .book-field input::placeholder,
#bookOverlay .book-field textarea::placeholder { color: #97a3b0; opacity: 1; }
#bookOverlay .book-field input:focus,
#bookOverlay .book-field select:focus,
#bookOverlay .book-field textarea:focus { border-color: var(--primary, #2796c4); background: #fff; box-shadow: 0 0 0 3px rgba(39,150,196,.12); }
#bookOverlay .book-field textarea { min-height: 86px; resize: vertical; }
#bookOverlay .book-field select option { color: var(--dark, #14202b); background: #fff; }
#bookOverlay .book-form.was-validated .book-field input:invalid,
#bookOverlay .book-form.was-validated .book-field select:invalid,
#bookOverlay .book-form.was-validated .book-field textarea:invalid { border-color: #c0392b; background: #fff6f5; }

/* Message + actions row */
#bookOverlay .book-msg { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 500; }
#bookOverlay .book-msg:empty { display: none; }
#bookOverlay .book-msg.success { color: #2e7d32; }
#bookOverlay .book-msg.error { color: #c0392b; }
#bookOverlay .book-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
#bookOverlay .book-actions .btn-gold { border: none; display: inline-flex; align-items: center; gap: 10px; }
#bookOverlay .book-actions .btn-gold i { font-size: 13px; }
#bookOverlay .book-call { font-size: 15px; font-weight: 700; color: #14202b; text-decoration: none; white-space: nowrap; }
#bookOverlay .book-call i { width: 32px; height: 32px; border-radius: 50%; background: #eaf4fb; color: var(--primary, #2796c4); margin-right: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; vertical-align: middle; }
#bookOverlay .book-call:hover { color: var(--primary, #2796c4); }

body.book-lock { overflow: hidden; }


/* ==================================================================
   HOTEL SINGLE PAGES (moved from country-house.css)
================================================================== */

/* Country House only: viewport-height hero with enquiry at its bottom.
   Natural growth prevents overlap on short screens and with enlarged text. */
.country-house-page .page-hero.hotel-hero {
  height: auto;
  min-height: 86vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 32px;
  padding: 130px 0 24px;
}
.country-house-page .hotel-hero .page-hero-inner {
  margin-top: auto;
  margin-bottom: auto;
}
.country-house-page .hotel-hero .enquiry {
  position: relative;
  inset: auto;
  flex-shrink: 0;
  margin: 0;
  text-align: left;
}
.country-house-page .hotel-hero .booking-msg { margin-top: 8px; }
.country-house-page .hotel-hero .form-msg:not(:empty) {
  background: #fff;
  padding: 8px 16px;
}
.country-house-page .hotel-hero .booking-bar { opacity: 1; transform: none; }

/* Three-column menu on desktop, with comfortable tablet and mobile layouts. */

/* Give the dining CTA breathing room below every menu category. */

/* Keep content within its column instead of clipping long labels. */
.country-house-page .dest-feature-body { min-width: 0; }