/* =================================================================
 * Crystal Global Roots — Full Design
 * /public/css/cgr-design.css  (loaded after style.css)
 * All class names prefixed cgr- to avoid conflicts with
 * existing style.css.  No border-radius is set anywhere in this
 * file — style.css's site-wide "Final No-Radius Override" (body *
 * { border-radius:0 !important }) is left in full effect.
 * ================================================================= */

:root {
  --navy:       #0e2a47;
  --navy-deep:  #0a1f38;
  --cgr-green:  #3c7a3e;
  --green-dark: #2d5e2f;
  --cream:      #faf6ee;
  --cgr-muted:  #6b7280;
  --gold:       #c9a24b;
}

/* Align the header's left/right edges with every other section's .cgr-container
   padding — style.css's .header-container has padding:0 !important, which made
   the logo/nav sit flush against the browser edges while the hero and all
   sections below it are inset via clamp(24px, 6vw, 100px). It also still
   carries a legacy max-width:1800px + margin:0 auto (pre-dating the clamp-based
   alignment system), which on wide screens re-centers the header inside that
   1800px box and pushes the logo/nav further in than the hero content and
   .cgr-container sections, which have no such centering. Cancel it out here. */
.header-container {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: clamp(24px, 6vw, 100px) !important;
  padding-right: clamp(24px, 6vw, 100px) !important;
}

/* .hdr-logo-center still carries its own left padding (style.css: 0 36px 0 28px)
   left over from the old bordered tri-column header. That adds 28px on top of
   .header-container's own clamp padding above, so the logo sits 28px right of
   the hero heading's left edge instead of flush with it. Zero it out; keep the
   right-side gap so there's still breathing room before the nav links. */
.hdr-logo-center {
  padding-left: 0 !important;
}

/* fliersphp-home.css has `body.home .header-logo img { width:180px !important;
   height:auto !important; }` (specificity 0,2,2) — since the logo <div> here
   carries BOTH .hdr-logo-center AND .header-logo, that rule beats every
   .hdr-logo-center img height we set in style.css (0,1,1), no matter what
   value we use there. At this logo's actual aspect ratio (1210x506), a fixed
   180px width computes to ~75px auto height — taller than the 74px scrolled
   header bar, which is what was clipping the tagline. Match/exceed that
   selector's specificity here (and win on source order, since this file
   loads last) so our sizing actually applies. */
body.home .header-logo img,
.hdr-logo-center.header-logo img {
  width: auto !important;
  height: clamp(48px, calc(2.458vw + 22.8px), 70px) !important;
  max-width: none !important;
}
#header.header-scrolled .header-logo img {
  height: 56px !important;
}

/* style.css's #header.header-scrolled flips the header to a solid white
   background once scrollTop > 150 — that was designed for dark nav text on
   light, but this design's nav/icons are all styled for the dark navy
   overlay look at all times. Keep the same navy on scroll (just solid
   instead of the transparent gradient) instead of turning white, and
   restore the light nav-link/icon colors that white forced dark below. */
#header.header-scrolled {
  background: var(--navy) !important;
}
#header.header-scrolled .hdr-nav li a {
  color: rgba(255, 255, 255, 0.75) !important;
}
#header.header-scrolled .hdr-nav li a:hover,
#header.header-scrolled .hdr-nav li.current-menu-item > a {
  color: #fff !important;
}
#header.header-scrolled .hdr-logo-center {
  border-right-color: rgba(255, 255, 255, 0.1) !important;
}
#header.header-scrolled .hdr-booknow {
  border-left-color: rgba(255, 255, 255, 0.1) !important;
}

/* Kill the leftover "scroll-menu" bar from the old theme (fliersphp-global.css):
   position:fixed, top:0, slides in as a second compact sticky nav once
   #header gets .header-scrolled (added by a scrollTop>150 listener in
   theme-main.min.js). This site's own header design doesn't want that —
   scrolling should never pin a second nav bar to the top. Force it off. */
#header .scroll-menu,
#header.header-scrolled .scroll-menu {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Make the *main* header itself the sticky bar (this exact logo/nav/CTA
   design), instead of the old duplicate "scroll-menu" bar killed above.
   #header was only position:absolute (fliersphp-global.css), so it scrolled
   away with the page; fixed keeps it pinned to the top at all times. Since it
   was already out-of-flow (absolute), switching to fixed doesn't shift any
   page content — it only keeps it on screen while scrolling. The existing
   #header.header-scrolled rules (solid background, compact height once
   scrollTop > 150) still apply on top of this and now actually become visible. */
#header {
  position: fixed !important;
}

/* The logo image was rendering visibly cropped top/bottom in the sticky
   header. #header/.header-container/.hdr-triple/.hdr-logo-center don't set an
   explicit height that's shorter than the logo, but force overflow:visible
   and proper vertical centering at every level in the chain as a guard, so
   nothing in this row can ever clip the logo regardless of viewport/state. */
#header,
#header .header-container,
#header .hdr-triple,
#header .hdr-logo-center {
  overflow: visible !important;
}
#header .hdr-logo-center {
  align-items: center !important;
}
#header .hdr-logo-center img {
  max-height: 100% !important;
}

/* Dropdown-style caret for nav items — decorative-only on Journeys/
   Experiences/Destinations (no submenu behind them), but functional on
   About Us (opens the .hdr-nav-dropdown below on hover). Uses currentColor
   so it always matches the nav link's own text color. */
.hdr-nav-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .75;
  transition: transform .2s ease;
}

/* ── About Us dropdown (currently just "Inspiration") ──
   Hover-revealed submenu; the parent <li> needs position:relative as the
   dropdown's positioning context. */
.hdr-nav li.menu-item-has-dropdown {
  position: relative;
}
.hdr-nav li.menu-item-has-dropdown:hover .hdr-nav-caret {
  transform: rotate(180deg);
}
.hdr-nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.hdr-nav li.menu-item-has-dropdown:hover .hdr-nav-dropdown,
.hdr-nav li.menu-item-has-dropdown:focus-within .hdr-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Reset the top-level .hdr-nav li sizing (height:100%, flex row, fluid
   horizontal padding) for the dropdown's own <li> — this is a plain vertical
   list inside a white panel, not another row of the main nav. */
.hdr-nav-dropdown li {
  height: auto;
  display: block;
  padding: 0;
}
.hdr-nav-dropdown li a {
  display: block;
  padding: 10px 22px;
  color: var(--navy) !important;
  font-size: .85rem !important;
  white-space: nowrap;
}
.hdr-nav-dropdown li a::after { display: none; }
.hdr-nav-dropdown li a:hover {
  background: var(--cream);
  color: var(--cgr-green) !important;
}
#header.header-scrolled .hdr-nav-dropdown li a { color: var(--navy) !important; }

/* ── Global body font (Poppins replaces Montserrat for body text) ── */
body { font-family: 'Poppins', sans-serif !important; }

/* ── Unified full-width section wrapper ──
   Replaces Bootstrap's .container (which steps through several
   fixed max-widths) so every homepage section lines up on the
   same left/right edge as the hero content and header logo. */
.cgr-container {
  width: 100%;
  margin: 0 auto;
  padding-left: clamp(24px, 6vw, 100px) !important;
  padding-right: clamp(24px, 6vw, 100px) !important;
  box-sizing: border-box;
}

/* ================================================================
 * SITE HEADER  (solid gold pill CTA + persistent icon-only menu button)
 * ================================================================ */
.hdr-plantrip {
  background: var(--gold) !important;
  border: none !important;
  border-radius: 999px !important;
}
.hdr-plantrip .hdr-booknow__text,
.hdr-plantrip .hdr-plantrip__arrow { color: var(--navy-deep) !important; }
.hdr-plantrip:hover { background: var(--navy-deep) !important; }
.hdr-plantrip:hover .hdr-plantrip__arrow,
.hdr-plantrip:hover .hdr-booknow__text { color: var(--gold) !important; }
#header.header-scrolled .hdr-plantrip { background: var(--gold) !important; border: none !important; }
#header.header-scrolled .hdr-plantrip .hdr-plantrip__arrow,
#header.header-scrolled .hdr-plantrip .hdr-booknow__text { color: var(--navy-deep) !important; }

.inquire-btn { border-color: var(--gold) !important; }
.inquire-btn:hover { background: var(--gold) !important; }
.inquire-btn svg path { fill: var(--gold) !important; }
.inquire-btn:hover svg path { fill: var(--navy-deep) !important; }

/* Persistent icon-only menu button (desktop) — solid dark filled circle */
.hdr-menu-label--icon-only {
  display: flex !important;
  padding: 0 0 0 14px !important;
}
/* The mobile-only hamburger copy in .hdr-actions reuses this class for its
   circle styling, but the unconditional display:flex above has equal
   specificity to (and loads after) fliersphp-global.css's `.mobile_el {
   display:none !important }`, so it was winning and showing the hamburger
   on desktop too. Force it off above the mobile breakpoint with higher
   specificity instead of relying on load order. */
@media (min-width: 1025px) {
  .hdr-menu-label--icon-only.mobile_el { display: none !important; }
}
.hdr-menu-label--icon-only .hamburger.ham {
  width: 42px;
  height: 42px;
  border: none;
  background: rgba(0,0,0,.35);
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px !important;
}
.hdr-menu-label--icon-only .hamburger.ham span { width: 16px !important; }
.hdr-menu-label--icon-only:hover .hamburger.ham { background: var(--gold); }
.hdr-menu-label--icon-only:hover .hamburger.ham span { background: var(--navy-deep) !important; }
#header.header-scrolled .hdr-menu-label--icon-only .hamburger.ham { background: rgba(0,0,0,.35); }
#header.header-scrolled .hdr-menu-label--icon-only .hamburger.ham span { background: rgba(255,255,255,.8); }
#header.header-scrolled .hdr-menu-label--icon-only:hover .hamburger.ham { background: var(--gold); }
#header.header-scrolled .hdr-menu-label--icon-only:hover .hamburger.ham span { background: var(--navy-deep) !important; }

/* Circular search icon button, paired with the hamburger button above — solid dark filled circle */
.hdr-icon-circle {
  width: 42px;
  height: 42px;
  border: none;
  background: rgba(0,0,0,.35);
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: #fff !important;
  font-size: 1rem;
  text-decoration: none !important;
  margin-left: 14px;
  transition: background .2s, color .2s;
}
/* Same issue as .hdr-menu-label--icon-only above: this unconditional
   display:flex has equal specificity to fliersphp-global.css's `.desktop_el
   { display:none !important }` and loads after it, so it was winning and
   showing the call icon on mobile too. Force it off below the desktop
   breakpoint with higher specificity instead of relying on load order. */
@media (max-width: 1024px) {
  .hdr-icon-circle.desktop_el { display: none !important; }
}
.hdr-icon-circle:hover { background: var(--gold); color: var(--navy-deep) !important; }
#header.header-scrolled .hdr-icon-circle { background: rgba(0,0,0,.35); color: #fff !important; }
#header.header-scrolled .hdr-icon-circle:hover { background: var(--gold); color: var(--navy-deep) !important; }

/* ── Desktop hamburger icon: real 3-bar layout + open/close morph ──
   The circle button above only set centering/gap on .hamburger.ham — with
   no flex-direction/height/background on its spans, the bars only ever
   became visible via the hover/scrolled color rules. The theme's stock
   is-active → X morph (fliersphp-global.css) is scoped to buttons inside
   a .header_button-toggle wrapper, which this icon-only button isn't in,
   so opening the menu never animated it. Give it its own bars + morph. */
.hdr-menu-label--icon-only .hamburger.ham {
  flex-direction: column !important;
  transition: background .25s ease, transform .3s ease;
}
.hdr-menu-label--icon-only .hamburger.ham span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px !important;
  transition: transform .3s ease, opacity .2s ease, background .25s ease;
}
#header.header-scrolled .hdr-menu-label--icon-only .hamburger.ham span { background: rgba(255,255,255,.85); }
.hdr-menu-label--icon-only:hover .hamburger.ham { transform: scale(1.08); }
.hdr-menu-label--icon-only .hamburger.ham.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-menu-label--icon-only .hamburger.ham.is-active span:nth-child(2) { opacity: 0; }
.hdr-menu-label--icon-only .hamburger.ham.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ================================================================
 * OFF-CANVAS MENU (mobile drawer + the same popup opened by the
 * desktop hamburger above) — re-themed to the navy/gold header
 * instead of the plain white/grey/orange look from style.css's
 * "Mobile Menu Override" block. Loads after style.css so these
 * !important rules win on source order at equal specificity.
 * ================================================================ */
.main-menu,
.main-menu .mobile-menu-shell,

.main-menu .mobile-menu-visual {
  background-image: none !important;
  background-color: #fff !important;
  border-bottom: 1px solid rgba(14,42,71,.08) !important;
}
.main-menu .hamclose {
  color: var(--navy-deep) !important;
  background: rgba(14,42,71,.06) !important;
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background .25s ease, color .25s ease, transform .35s ease;
}
.main-menu .hamclose:hover {
  background: var(--gold) !important;
  color: var(--navy-deep) !important;
  transform: rotate(90deg);
}
.main-menu .mobile-menu-list {
  background: transparent !important;
}
.main-menu .mobile-menu-list li {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.main-menu .mobile-menu-list li a {
  position: relative;
  font-family: 'Playfair Display', 'Cinzel', serif !important;
  color: rgba(0, 0, 0, 0.82) !important;
  transition: color .25s ease, padding-left .25s ease, background .25s ease;
}
.main-menu .mobile-menu-list li a::after {
  content: '';
  position: absolute;
  left: 24px;
  bottom: 10px;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width .3s ease;
}
.main-menu .mobile-menu-list li a:hover {
  color: var(--gold) !important;
  background: rgba(255,255,255,.04) !important;
  padding-left: 30px !important;
}
.main-menu .mobile-menu-list li a:hover::after { width: 24px; }
.main-menu .mobile-menu-cta {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.1);
}
.main-menu .mobile-menu-plan-btn {
  background: var(--gold) !important;
  color: var(--navy-deep) !important;
  border: none !important;
  border-radius: 999px !important;
  transition: background .25s ease, color .25s ease;
}
.main-menu .mobile-menu-plan-btn:hover {
  background: var(--navy) !important;
  color: var(--gold) !important;
}
.main-menu .mobile-menu-cta p { color: rgba(255,255,255,.55) !important; }
.main-menu .mobile-menu-cta hr { border-color: rgba(255,255,255,.12) !important; opacity: 1; }
.main-menu .mobile-menu-phone,
.main-menu .mobile-menu-email {
  display: flex !important;
  align-items: center;
  gap: 8px;
  transition: color .25s ease;
}
.main-menu .mobile-menu-phone svg,
.main-menu .mobile-menu-email svg { flex-shrink: 0; color: var(--gold); }
.main-menu .mobile-menu-phone { color: #fff !important; }
.main-menu .mobile-menu-email { color: rgba(255,255,255,.65) !important; }
.main-menu .mobile-menu-phone:hover,
.main-menu .mobile-menu-email:hover { color: var(--gold) !important; }
.menu-overlay { background: rgba(10, 31, 56, .55) !important; }

/* ── Shared section utilities ── */
.section-title-cgr {
  font-family: 'Playfair Display', serif !important;
  color: var(--navy) !important;
  font-weight: 800 !important;
  font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
  line-height: 1.25 !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 0 !important;
}
.view-all-cgr {
  color: var(--navy);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
}
.view-all-cgr:hover { color: var(--cgr-green) !important; }

/* ================================================================
 * HERO
 * ================================================================ */
.hero-cgr {
  position: relative;
  min-height: 92vh;
  overflow: hidden;
}
/* Slick wrapper (only present when there is more than one slide) */
.hero-cgr-slider { position: absolute; inset: 0; z-index: 0; }
.hero-cgr-slider .slick-list,
.hero-cgr-slider .slick-track,
.hero-cgr-slider .slick-slide,
.hero-cgr-slider .slick-slide > div { height: 100%; }
.hero-cgr-slide-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding-top: clamp(150px, 22vh, 260px);
}
.hero-cgr-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width:  100% !important;
  height: 115% !important;
  object-fit: cover !important;
  z-index: 0;
}
/* YouTube iframe backgrounds: oversize + center so the video always covers the box */
.hero-cgr-bg--yt {
  width: 177.78vh !important;
  min-width: 100% !important;
  height: 56.25vw !important;
  min-height: 100% !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero-cgr-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.38) 45%, rgba(0,0,0,0) 70%);
  z-index: 1;
}
/* Video-background variant: dark gradient (bottom-left) so light text stays readable over any footage */
.hero-cgr--video .hero-cgr-overlay {
  background: linear-gradient(115deg, rgba(6,16,28,.85) 0%, rgba(6, 16, 28, 0.6) 35%, rgba(6,16,28,.15) 60%, rgba(6, 16, 28, 0) 100%), linear-gradient(0deg, rgb(6, 16, 28) 0%, rgba(6,16,28,0) 40%)
}
.hero-cgr-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  padding-left: clamp(24px, 6vw, 100px);
  padding-right: 24px;
  box-sizing: border-box;
}
.hero-cgr h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(2.6rem, 7vw, 5.6rem) !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  line-height: 1.05 !important;
  letter-spacing: 1px;
  margin-bottom: 0 !important;
  text-transform: uppercase;
}
.hero-cgr--video h1 { color: #fff !important; }
.hero-cgr-script {
  font-family: 'Great Vibes', cursive !important;
  color: var(--gold) !important;
  font-size: clamp(1.8rem, 4.4vw, 2.8rem) !important;
  margin: 4px 0 16px !important;
  line-height: 1;
}
.hero-cgr-rule {
  display: block;
  width: 46px;
  height: 2px;
  background: var(--gold);
  margin: 0 0 22px;
}
.hero-cgr--video .hero-cgr-text { color: rgba(255,255,255,.85); }
.hero-cgr-text { color: #444; max-width: 460px; font-size: 1rem; margin-bottom: 28px; }

/* Understated link-style CTA (text + arrow, no pill) */
.hero-cgr-link-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none !important;
  border-bottom: 1.5px solid rgba(255,255,255,.55);
  padding-bottom: 10px;
  transition: border-color .2s, color .2s, gap .2s;
}
.hero-cgr-link-cta i { transition: transform .2s; }
.hero-cgr-link-cta:hover { color: var(--gold) !important; border-color: var(--gold); gap: 14px; }

/* Vertical social icon rail (right side) */
.hero-cgr-social-rail {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.hero-cgr-social-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: rgba(255,255,255,.75);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hero-cgr-social-circle {
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.9);
  font-size: .95rem;
  text-decoration: none !important;
  transition: background .2s, color .2s, border-color .2s;
}
.hero-cgr-social-circle:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy) !important;
}
@media (max-width: 991px) { .hero-cgr-social-rail { display: none; } }

/* Eyebrow tag flanked by lines on both sides (e.g. "Discover The Wonder" above hero heading) */
.hero-cgr-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.85);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hero-cgr-eyebrow::before,
.hero-cgr-eyebrow::after {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,.5);
}

/* Scroll-to-discover indicator (bottom right) */
.hero-cgr-scroll {
  position: absolute;
  right: 40px;
  bottom: 34px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.8);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.hero-cgr-scroll-circle {
  width: 32px;
  height: 32px;

  border: 1px solid rgba(255,255,255,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}
@media (max-width: 767px) { .hero-cgr-scroll { display: none; } }

/* Slick dots — vertical numbered slide indicator (01/02/03), left edge of hero.
   Reuses Slick's own <li>/.slick-active markup and slide-count, just restyled —
   no extra JS needed, and it naturally shows only as many numbers as there are
   admin-configured hero slides. */
.hero-cgr .slick-dots {
  position: absolute;
  left: clamp(20px, 5vw, 56px);
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 2;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: heroSlideNum;
}
.hero-cgr .slick-dots::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,255,255,.3);
  transform: translateX(-50%);
  z-index: 0;
}
.hero-cgr .slick-dots li {
  counter-increment: heroSlideNum;
  width: auto;
  height: auto;
  position: relative;
  z-index: 1;
}
.hero-cgr .slick-dots li button {
  width: auto;
  height: auto;
  padding: 2px 0;
  border: none;
  background: transparent !important;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}
.hero-cgr .slick-dots li button::before {
  content: counter(heroSlideNum, decimal-leading-zero);
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: .5px;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}
.hero-cgr .slick-dots li.slick-active button::before {
  color: var(--gold);
  font-size: .95rem;
}

/* ================================================================
 * WELCOME TO PARADISE  (floats up to overlap hero bottom)
 * ================================================================ */
.welcome-cgr {
  margin-top: -90px;
  position: relative;
  z-index: 5;
  padding-bottom: 70px;
}
.welcome-cgr-box {
  background: rgba(255, 255, 255, 0);


  margin-top: 80px;
}
.welcome-cgr .eyebrow-sm-cgr i { margin-right: 6px; }
.welcome-cgr h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(2.2rem, 4vw, 3.2rem) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: var(--navy) !important;
  margin-bottom: 16px !important;

}
.welcome-cgr h2 .cgr-script-accent {
  display: inline-block;
  font-family: 'Great Vibes', cursive !important;
  font-weight: 400 !important;
  font-size: clamp(1.8rem, 4.4vw, 2.8rem) !important;
  line-height: 1;
  color: var(--gold) !important;
}
.btn-cgr-pill-outline {
  border: 1.5px solid var(--gold);
  color: var(--navy) !important;
  padding: 12px 26px;

  font-weight: 600;
  font-size: .85rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  background: transparent;
  text-decoration: none !important;
  transition: background .2s, color .2s;
}
.btn-cgr-pill-outline:hover { background: var(--gold); color: #fff !important; }

/* Prev/next nav buttons for the activities slider */
.welcome-cgr-nav { display: flex; gap: 10px; margin-top: 26px; }
.welcome-cgr-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(14,42,71,.25);
  background: transparent;
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.welcome-cgr-arrow:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Activities slider (Slick) */
.welcome-cgr-slider,
.pkg2-slider { margin: 0 -12px; }
.welcome-cgr-slider .slick-track,
.pkg2-slider .slick-track { display: flex; }
.welcome-cgr-slider .slick-slide,
.pkg2-slider .slick-slide { height: auto; }
.welcome-cgr-slide { padding: 0 12px; }

/* Welcome cards (image + icon badge + overlay label) — flat, no drop shadow */
.welcome-card-cgr {
  position: relative;
  display: block;
  overflow: hidden;
  height: 420px;
  text-decoration: none !important;
}
.welcome-card-cgr img {
  width:  100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform .5s ease;
}
.welcome-card-cgr:hover img { transform: scale(1.06); }
.welcome-card-cgr-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  background: linear-gradient(0deg, rgba(6,16,28,.9) 0%, rgba(6,16,28,0) 100%);
}
.welcome-card-cgr-icon {
  position: absolute;
  left: 5%;
  bottom: 30%;
  width: 38px;
  height: 38px;

  background: var(--gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.welcome-card-cgr-text { position: absolute; left: 5%; right: 5%; bottom: 5%; }
.welcome-card-cgr-text h6 {
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(.95rem, 2.6vw, 2.15rem) !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px !important;
}
.welcome-card-cgr-text p {
  color: rgba(255,255,255,.85);
  font-size: clamp(.8rem, 2.1vw, .92rem);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================
 * ABOUT
 * ================================================================ */
.about-cgr {
  position: relative;
  overflow: hidden;
  padding: 96px 0 110px;
  background: linear-gradient(180deg, #fbf7ef 0%, #f7f1e8 100%);
}
.about-cgr::before {
  content: "";
  position: absolute;
  right: -170px;
  top: 120px;
  width: 520px;
  height: 520px;
  border-radius: 50% !important;
  background: rgba(60,122,62,.08);
  pointer-events: none;
}
.about-cgr::after {
  content: "";
  position: absolute;
  left: -140px;
  bottom: -190px;
  width: 430px;
  height: 430px;
  border-radius: 50% !important;
  background: rgba(201,162,75,.1);
  pointer-events: none;
}
.about-cgr > .cgr-container { position: relative; z-index: 1; }

/* Trust/USP strip - open icon layout, no boxed cards */
.about-cgr-features {
  margin-bottom: 70px;
  row-gap: 28px !important;
}
.about-cgr-feature {
  position: relative;
  min-height: 0;
  padding: 4px 30px 4px 0 !important;
  background: transparent;
  border: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}
@media (min-width: 768px) {
  .about-cgr-feature:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 12px;
    width: 1px;
    height: 88%;
    background: linear-gradient(180deg, transparent, rgba(14,42,71,.16), transparent);
  }
}
.about-cgr-feature:hover { transform: none; box-shadow: none; }
.about-cgr-feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.55);
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  margin-bottom: 16px;
  flex-shrink: 0;
 
  transition: transform .22s ease, box-shadow .22s ease;
}
.about-cgr-feature:nth-child(1) .about-cgr-feature-icon { background: var(--navy); }
.about-cgr-feature:nth-child(2) .about-cgr-feature-icon { background: var(--cgr-green); }
.about-cgr-feature:nth-child(3) .about-cgr-feature-icon { background: var(--gold); }
.about-cgr-feature:nth-child(4) .about-cgr-feature-icon { background: var(--navy-deep); }
.about-cgr-feature:hover .about-cgr-feature-icon {
  transform: translateY(-4px);
  
}
.about-cgr-feature h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: 2rem !important;
  text-transform: uppercase;
  letter-spacing: .55px;
  color: var(--navy) !important;
  margin-bottom: 9px !important;
}
.about-cgr-feature p {
  color: #5f6878;
  font-size: .9rem;
  line-height: 1.62;
  margin: 0;
  max-width: 270px;
}

.eyebrow-sm-cgr {
  color: var(--cgr-green) !important;
  font-weight: 700;
  letter-spacing: 1.8px;
  font-size: .78rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: 14px;
}
.about-cgr .row.align-items-center.g-5 {
  align-items: center !important;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.about-cgr .row.align-items-center.g-5 > .col-lg-5 {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.about-cgr h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(2.2rem, 3.8vw, 3.45rem) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  text-transform: uppercase;
  color: var(--navy) !important;
  margin-bottom: 22px !important;
  letter-spacing: .35px;
}
.about-cgr-heading { position: relative; max-width: 650px; }
.about-cgr-heading::after {
  content: "";
  display: block;
  width: 86px;
  height: 3px;
  margin-top: 20px;
  background: linear-gradient(90deg, var(--cgr-green), var(--gold));
}
.about-cgr-flightpath {
  position: absolute;
  top: -23px;
  right: -30px;
  width: 112px;
  height: 58px;
  pointer-events: none;
}
.about-cgr-flightpath svg { width: 100%; height: 100%; display: block; }
.about-cgr-flightpath path { stroke-width: 1.8; }
.about-cgr-plane {
  position: absolute;
  right: -2px;
  top: -2px;
  color: var(--cgr-green);
  font-size: 1.05rem;
  transform: rotate(35deg);
}
@media (max-width: 767px) { .about-cgr-flightpath { display: none; } }
.about-cgr-text {
  color: #5f6878;
  font-size: 1rem;
  line-height: 1.86;
  margin-bottom: 18px;
  max-width: 620px;
}
.btn-cgr-outline {
  border: 1.5px solid var(--navy);
  color: var(--navy) !important;
  padding: 13px 30px;
  font-weight: 700;
  font-size: .84rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  background: transparent;
  text-decoration: none !important;
  transition: background .2s, color .2s, transform .2s;
  width: fit-content;
}
.btn-cgr-outline:hover {
  background: var(--navy);
  color: #fff !important;
  transform: translateY(-2px);
}

/* Single About image (replaces the multi-photo collage — shows only the
   admin-uploaded About Us image) */
.about-cgr-single-img {
  min-height: 520px;
  height: 100%;
  overflow: hidden;
}
.about-cgr-single-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  box-shadow: 0 20px 48px rgba(14,42,71,.18);
}
@media (max-width: 991px) {
  .about-cgr-single-img { min-height: 430px; margin-top: 24px; }
}
@media (max-width: 767px) {
  .about-cgr-single-img { min-height: 280px; margin-top: 24px; }
}

/* Collage */
.collage-cgr {
  position: relative;
  min-height: 520px;
  height: 100%;
  isolation: isolate;
}
.collage-cgr::before {
  content: "";
  position: absolute;
  inset: 16% 10% 10% 18%;
  border: 1px solid rgba(201,162,75,.35);
  z-index: -1;
}
.collage-cgr::after {
  content: "";
  position: absolute;
  right: 6%;
  bottom: 4%;
  width: 48%;
  height: 38%;
  background: rgba(14,42,71,.08);
  z-index: -2;
}
.collage-cgr-img {
  position: absolute;
  object-fit: cover !important;
  box-shadow: 0 20px 48px rgba(14,42,71,.18);
  border: 0;
  transition: transform .3s ease, box-shadow .3s ease;
}
.collage-cgr-img:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 58px rgba(14,42,71,.26);
  z-index: 6;
}
.cc1 { width: 55% !important; height: 56% !important; top: 0; left: 5%; z-index: 3; }
.cc2 { width: 36% !important; height: 29% !important; top: 6%; right: 2%; z-index: 2; }
.cc3 { width: 34% !important; height: 28% !important; bottom: 2%; left: 12%; z-index: 2; }
.cc4 { width: 57% !important; height: 43% !important; bottom: 8%; right: 0; z-index: 4; }

/* ================================================================
 * DESTINATIONS  (dark bento grid: 2 tall cards + 2 stacked)
 * ================================================================ */
.destinations-cgr2 { padding: 90px 0; background: var(--navy-deep); }
.dest2-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 34px;
}
.eyebrow-sm-cgr--pale {
  color: rgba(255,255,255,.7) !important;
  position: relative;
  padding-right: 34px;
}

.dest2-heading {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.5rem, 2.6vw, 3.2rem) !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.dest2-heading span { color: var(--gold) !important; }
.dest2-leaf { font-size: 1.3rem; color: rgba(255,255,255,.35); margin-left: 6px; vertical-align: middle; }
.dest2-side { display: flex; align-items: center; gap: 22px; max-width: 460px; }
.dest2-side p { color: rgba(255,255,255,.65); font-size: .85rem; margin: 0; }
.dest2-nav { display: flex; gap: 10px; flex-shrink: 0; }
.dest2-arrow {
  width: 42px;
  height: 42px;

  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: background .2s, border-color .2s;
}
.dest2-arrow:hover { background: var(--gold); border-color: var(--gold); color: #fff !important; }

.dest2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  height: 660px;
}
.dest2-grid > a:nth-child(1) { grid-column: 1; grid-row: 1 / 3; }
.dest2-grid > a:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.dest2-grid > a:nth-child(3) { grid-column: 3; grid-row: 1; }
.dest2-grid > a:nth-child(4) { grid-column: 3; grid-row: 2; }

.dest2-card {
  position: relative;
  display: block;

  overflow: hidden;
  text-decoration: none !important;
}
.dest2-card img {
  width:  100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform .5s;
}
.dest2-card:hover img { transform: scale(1.06); }
.dest2-card-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(0deg, rgba(6,16,28,.88) 0%, rgba(6,16,28,0) 100%);
}
.dest2-card-text { position: absolute; left: 20px; right: 20px; bottom: 18px; }
.dest2-card-text h5 {
  font-family: 'Playfair Display', serif !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 2.2rem !important;
  margin-bottom: 4px !important;
  text-transform: uppercase;
}
.dest2-card-text p { color: rgba(255,255,255,.8); font-size: .82rem; margin: 0; }
.dest2-grid > a:nth-child(n+3) .dest2-card-text h5 { font-size: 2.2rem !important; }
.dest2-grid > a:nth-child(n+3) .dest2-card-text p { font-size: .76rem; }
@media (max-width: 991px) {
  .dest2-grid { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 220px); height: auto; }
  .dest2-grid > a:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .dest2-grid > a:nth-child(2) { grid-column: 1 / 3; grid-row: 2; }
  .dest2-grid > a:nth-child(3) { grid-column: 1; grid-row: 3; }
  .dest2-grid > a:nth-child(4) { grid-column: 2; grid-row: 3; }
}
@media (max-width: 575px) {
  .dest2-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 220px); }
  .dest2-grid > a:nth-child(1),
  .dest2-grid > a:nth-child(2),
  .dest2-grid > a:nth-child(3),
  .dest2-grid > a:nth-child(4) { grid-column: 1; }
  .dest2-grid > a:nth-child(1) { grid-row: 1; }
  .dest2-grid > a:nth-child(2) { grid-row: 2; }
  .dest2-grid > a:nth-child(3) { grid-row: 3; }
  .dest2-grid > a:nth-child(4) { grid-row: 4; }
}

/* ================================================================
 * SPECIAL TOUR PACKAGES  (cream background, cards below images)
 * ================================================================ */
.packages-cgr2 { background: var(--cream); padding: 90px 0; }
.eyebrow-sm-cgr--gold { color: var(--gold) !important; }
.pkg2-heading {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.9rem, 3vw, 2.4rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--navy) !important;
  margin-bottom: 14px !important;
  text-transform: uppercase;
}
.hero-cgr-link-cta--dark {
  color: var(--navy) !important;
  border-bottom-color: rgba(14,42,71,.35);
  margin-top: 8px;
}
.hero-cgr-link-cta--dark:hover { color: var(--green-dark) !important; border-color: var(--green-dark); }

.pkg2-card { display: block; text-decoration: none !important; }
.pkg2-img {
  position: relative;
  overflow: hidden;
  height: 460px;
  transition: transform .3s;
}
.pkg2-card:hover .pkg2-img { transform: translateY(-4px); }
.pkg2-img img {
  width:  100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform .4s;
}
.pkg2-card:hover .pkg2-img img { transform: scale(1.06); }
.pkg2-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  max-width: 200px;
  background: var(--navy);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 8px 12px;

  text-align: center;
  line-height: 1.35;
}
.pkg2-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 65%;
  background: linear-gradient(0deg, rgba(6,16,28,.92) 0%, rgba(6,16,28,0) 100%);
}
.pkg2-body {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 2;
}
.pkg2-body h5 {
  font-family: 'Poppins', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
  color: #fff !important;
  margin-bottom: 6px !important;
}
.pkg2-body > p { font-size: .92rem; color: rgba(255,255,255,.8); margin-bottom: 16px; }
.pkg2-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 55%;
  background: var(--gold);
  padding: 10px 14px;
  transition: background .2s;
}
.pkg2-card:hover .pkg2-price-row { background: var(--navy-deep); }
.pkg2-price {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  color: var(--navy-deep);
  font-size: 1.05rem;
  white-space: nowrap;
  transition: color .2s;
}
.pkg2-price small { font-family: 'Poppins', sans-serif !important; font-weight: 500; color: rgba(10,31,56,.65); font-size: .78rem; letter-spacing: .3px; transition: color .2s; }
.pkg2-card:hover .pkg2-price,
.pkg2-card:hover .pkg2-price small { color: #fff; }
.pkg2-card:hover .pkg2-price small { color: rgba(255,255,255,.75); }
.pkg2-arrow {
  color: var(--navy-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: transform .2s, color .2s;
}
.pkg2-card:hover .pkg2-arrow { transform: translateX(3px); color: var(--gold); }

/* ================================================================
 * STATS STRIP  (floats up over the dark packages section)
 * ================================================================ */
.stats-strip-cgr {
  margin-top: -70px;
  position: relative;
  z-index: 5;
  padding-bottom: 60px;
}
.stats-box-cgr {
  background: #fff;

  box-shadow: 0 10px 35px rgba(0,0,0,.1);
  padding: 40px 24px;
}
.stat-icon-cgr {
  font-size: 2rem;
  color: var(--cgr-green);
  margin-bottom: 10px;
  display: block;
}
.stats-box-cgr h4 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 800 !important;
  color: var(--navy) !important;
  font-size: 1.6rem !important;
  margin-bottom: 4px !important;
}
.stats-box-cgr p { font-size: .78rem; color: var(--cgr-muted); margin: 0; }

/* ================================================================
 * QUOTE
 * ================================================================ */
.quote-cgr {
  background:
    linear-gradient(90deg, rgba(4, 38, 44, .78), rgba(4, 60, 65, .48) 50%, rgba(4, 38, 44, .78)),
    linear-gradient(180deg, rgba(5, 64, 73, .15), rgba(4, 34, 40, .35)),
    url('../uploads/destination-banner-85.jpg') center center / cover no-repeat;
  min-height: 340px;
  padding: 60px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.quote-cgr::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 97, 96, .18);
  pointer-events: none;
}
.quote-cgr > .cgr-container {
  position: relative;
  z-index: 2;
}
.quote-cgr-slider { position: relative; }
.quote-cgr-slider .slick-track { display: flex; }
.quote-cgr-slider .slick-slide { height: auto; float: none; }
.quote-cgr-slider .slick-slide > div { height: 100%; }
.quote-icon-cgr {
  font-size: 2rem;
  color: #16b4bd;
  display: block;
  line-height: 1;
  margin-bottom: -2px;
}
.quote-cgr h3 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 800 !important;
  font-size: 3.22rem !important;
  color: #fff !important;
  max-width: 620px;
  margin: 0 auto 7px !important;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.quote-cgr-slide > p {
  max-width: 620px;
  margin: 0 auto 5px;
  color: rgba(255,255,255,.9);
  font-size: .67rem;
  line-height: 1.45;
  text-shadow: 0 1px 5px rgba(0,0,0,.35);
}
.quote-author-cgr {
  font-style: italic;
  color: #fff;
  font-weight: 500;
  font-size: 1rem;
  display: block;
  margin-top: 0;
  text-shadow: 0 1px 5px rgba(0,0,0,.35);
}
.quote-author-cgr::before,
.quote-author-cgr::after { content: "-"; margin: 0 4px; }
.quote-arrow-cgr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  transition: background .2s, border-color .2s, color .2s;
  background: rgba(255,255,255,.08);
  font-size: .8rem;
  cursor: pointer;
}
.quote-arrow-cgr:hover { background: rgba(255,255,255,.24); border-color: #fff; color: #fff !important; }
.quote-arrow-cgr--left  { left: 11%; }
.quote-arrow-cgr--right { right: 11%; }
@media (max-width: 767px) {
  .quote-cgr { min-height: 300px; padding: 50px 0; }
  .quote-arrow-cgr { display: none; }
  .quote-cgr h3 { font-size: 1.05rem !important; }
  .quote-cgr-slide > p { font-size: .72rem; max-width: 330px; }
}

/* Wave divider: cream quote section flows into the dark green moments section */
.wave-divider-cgr {
  position: relative;
  z-index: 2;
  margin-bottom: -1px;
  line-height: 0;
}
.wave-divider-cgr svg { width: 100%; height: 90px; display: block; }
@media (max-width: 767px) { .wave-divider-cgr svg { height: 50px; } }

/* ================================================================
 * TRAVEL MOMENTS  (dark green, polaroid photos)
 * ================================================================ */
.moments2-cgr { background: var(--green-dark); padding: 40px 0 100px; }
.moments2-cgr h3 {
  font-family: 'Playfair Display', serif !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 1.9rem !important;
  margin-bottom: 18px !important;
}
.moments2-cgr > .cgr-container p { color: rgba(255,255,255,.8); max-width: 460px; margin-bottom: 28px; font-size: .95rem; }
.btn-cgr-pill-outline-white {
  border: 1.5px solid rgba(255,255,255,.6);
  color: #fff !important;
  padding: 13px 30px;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  transition: background .2s, color .2s;
}
.btn-cgr-pill-outline-white:hover { background: var(--gold); border-color: var(--gold); color: #fff !important; }
.moments2-polaroids { position: relative; height: 300px; }
.moments2-polaroid {
  position: absolute;
  width:  195px !important;
  height: 235px !important;
  border: 8px solid #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
  object-fit: cover !important;
}
.mp1 { left: 0;    top: 30px; transform: rotate(-8deg); z-index: 1; }
.mp2 { left: 130px; top:  0;  transform: rotate(4deg);  z-index: 2; }
.mp3 { left: 260px; top: 35px; transform: rotate(-3deg); z-index: 1; }
@media (max-width: 991px) {
  .moments2-polaroids { height: auto; display: flex; gap: 14px; position: static; margin-top: 32px; }
  .moments2-polaroid  { position: static; transform: none !important; width: 31% !important; height: 190px !important; }
}
@media (max-width: 575px) {
  .moments2-polaroids { flex-wrap: wrap; }
  .moments2-polaroid  { width: 46% !important; }
}

/* ================================================================
 * GALLERY STRIP  ("Memories That Last a Lifetime")
 * ================================================================ */
.gallery-strip-cgr { position: relative; padding: 0; background: #fff; }
.gallery-strip-row { display: flex; height: 520px; }
.gallery-strip-item { flex: 1; overflow: hidden; }
.gallery-strip-item img {
  width:  100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
.gallery-strip-overlay {
  /* Centered via inset:0 + margin:auto rather than left/top/translate(-50%,-50%):
     this element also carries .reveal-on-scroll, whose fade-in animation sets
     its own `transform` — since .reveal-on-scroll.is-visible has higher CSS
     specificity than this single-class selector, it was overriding (and
     cancelling) the translate() centering entirely once revealed. Margin-auto
     centering has no dependency on `transform`, so the two no longer conflict. */
  position: absolute;
  inset: 0;
  margin: auto;
  height: fit-content;
  z-index: 2;
  background: var(--green-dark);

  padding: 44px 56px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,.3);
  width: 92%;
  max-width: 420px;
}
.gallery-strip-icon {
  width: 40px;
  height: 40px;

  border: 1px solid var(--gold);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 14px;
}
.gallery-strip-overlay h3 {
  font-family: 'Playfair Display', serif !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1.6rem !important;
  margin-bottom: 0 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.gallery-strip-script { margin: 2px 0 20px !important; }
.gallery-strip-overlay .hero-cgr-link-cta { color: #fff !important; border-color: rgba(255,255,255,.5); }
.gallery-strip-overlay .hero-cgr-link-cta:hover { color: var(--gold) !important; border-color: var(--gold); }
@media (max-width: 767px) {
  .gallery-strip-row { height: 380px; }
  .gallery-strip-overlay { padding: 30px 26px; }
  .gallery-strip-overlay h3 { font-size: 1.25rem !important; }
}

/* ================================================================
 * TRAVEL NEWS & GUIDES
 * ================================================================ */
.news-cgr { padding: 80px 0; background: #fff; }

.news-img-cgr {
  position: relative;

  overflow: hidden;
  margin-bottom: 16px;
}
.news-img-cgr img {
  width:  100% !important;
  height: 350px !important;
  object-fit: cover !important;
  display: block;
  transition: transform .35s;
}
.news-card-cgr:hover .news-img-cgr img { transform: scale(1.04); }
.news-date-cgr {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  padding: 7px 13px;

  text-align: center;
  line-height: 1.1;
}
.news-date-cgr small { display: block; font-size: .6rem; font-weight: 600; }
.news-card-cgr h6 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  font-size: clamp(1rem, 2.2vw, 1.15rem) !important;
  line-height: 1.35;
  color: var(--navy) !important;
  min-height: 50px;
  margin-bottom: 10px !important;
}
.read-more-cgr {
  color: var(--cgr-green);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
}
.read-more-cgr:hover { color: var(--green-dark) !important; }

/* ================================================================
 * FOOTER
 * ================================================================ */
.footer-cgr {
  background: var(--navy-deep) !important;
  color: #cfd8e0;
  padding: 70px 0 25px !important;
  text-align: left !important;
}
.footer-cgr-logo {
  max-height: 62px !important;
  width:  auto !important;
  height: auto !important;
  max-width: 190px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1);
  display: block;
  margin-bottom: 14px;
}
.footer-cgr-brand-name {
  font-family: 'Playfair Display', serif !important;
  color: #fff !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block;
  margin-bottom: 14px;
  line-height: 1.2;
}
.footer-cgr-brand-name small {
  display: block;
  font-family: 'Poppins', sans-serif !important;
  font-size: .6rem;
  letter-spacing: 2px;
  color: var(--cgr-green) !important;
  font-weight: 600;
}
.footer-cgr p  { font-size: .85rem; color: #aab4bd !important; margin-top: 2px; }
.footer-cgr h6 {
  color: #fff !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  letter-spacing: 1px;
  margin-bottom: 18px !important;
  font-family: 'Poppins', sans-serif !important;
  border-bottom: 1.5px solid var(--cgr-green);
  padding-bottom: 9px;
  text-transform: uppercase;
}
.footer-cgr ul              { list-style: none; padding: 0; margin: 0; }
.footer-cgr ul li           { margin-bottom: 10px; }
.footer-cgr ul li a         { color: #aab4bd !important; font-size: .85rem; text-decoration: none !important; transition: color .18s; }
.footer-cgr ul li a:hover   { color: var(--cgr-green) !important; }
.footer-cgr-socials         { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.footer-cgr-socials a {
  width: 36px;
  height: 36px;

  background: rgba(255,255,255,.09);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 1rem;
  transition: background .2s;
}
.footer-cgr-socials a:hover { background: var(--cgr-green) !important; }
.footer-cgr-contact {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .85rem;
  color: #aab4bd;
}
.footer-cgr-contact i { color: var(--cgr-green); margin-right: 8px; }
.footer-cgr hr             { border-color: rgba(255,255,255,.1); margin-top: 26px; }
.footer-cgr-copyright      { font-size: .78rem; color: #8a95a0; }

/* ================================================================
 * TAILOR MADE CTA  (split image + light patterned panel)
 * ================================================================ */
.tailor-cgr {
  display: flex;
  min-height: 300px;
}
/* The photo is a square upload (1254x1254). With height:100% on a plain
   in-flow <img>, the browser can't resolve that percentage until the row's
   own cross-size is known — but the row's cross-size is partly determined
   by this same image's "hypothetical" size, which (unresolved) falls back
   to its natural 1:1 aspect ratio at the column's ~55vw width. That inflated
   the whole section to ~1000px+ tall on wide screens. Taking the <img> out
   of flow (absolute, filling its now-relative parent) removes it from that
   hypothetical-size calculation entirely, so the row's height is driven
   only by the text column + min-height, as intended. */
.tailor-cgr-img { position: relative; flex: 0 0 55%; max-width: 55%; overflow: hidden; }
.tailor-cgr-img img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.tailor-cgr-content {
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: var(--navy-deep);
  padding: 50px 56px;
}
/* Small dot-grid texture, confined to the top-right corner only (not tiled
   across the whole panel). */
.tailor-cgr-content::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 190px;
  height: 190px;
  background-image: radial-gradient(rgba(255,255,255,.22) 1.4px, transparent 1.4px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(225deg, #000 35%, transparent 75%);
          mask-image: linear-gradient(225deg, #000 35%, transparent 75%);
  pointer-events: none;
}
/* Decorative botanical line-art branch, bottom-right of the panel */
.tailor-cgr-leaf {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 260px;
  height: auto;
  color: var(--gold);
  opacity: .35;
  pointer-events: none;
}
.tailor-cgr-inner { position: relative; z-index: 1; max-width: 480px; text-align: left; }
.tailor-cgr-eyebrow {
  display: block;
  color: var(--gold);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.tailor-cgr h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(2.1rem, 3.2vw, 2.7rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: white !important;
  text-transform: uppercase;
  margin-bottom: 22px !important;
}
.tailor-cgr p {
  color: rgba(255,255,255,.7);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 30px;
}
.btn-cgr-solid {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: #fff !important;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px 38px;
  text-decoration: none !important;
  transition: background .2s;
}
.btn-cgr-solid:hover { background: var(--navy-deep); color: var(--gold) !important; }

/* ================================================================
 * FOOTER  (full-bleed photo + watermark brand name + dark CTA panel)
 * ================================================================ */
.footer-final {
  position: relative;
  overflow: hidden;
  min-height: 620px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.footer-final-bg {
  position: absolute;
  inset: 0;
  width:  100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0;
}
.footer-final-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(6,16,28,.2) 0%, rgba(6,16,28,.6) 45%, rgba(6,16,28,.97) 78%, rgba(6,16,28,.98) 100%);
}
.footer-final-watermark {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 1;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 1.05;
  color: rgba(255,255,255,.14);
  text-transform: uppercase;
  letter-spacing: 3px;
  pointer-events: none;
}
.footer-final-content { position: relative; z-index: 2; padding: 60px 0 30px; }
.footer-final-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,.15);
  margin-bottom: 24px;
}
.footer-final-heading {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(1.8rem, 3.4vw, 10.6rem) !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,.75) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.footer-final-heading span { font-weight: 800; color: #fff; }
.footer-final-contact { text-align: right; }
.footer-final-contact a {
  display: block;
  color: #fff !important;
  font-weight: 600;
  font-size: 2rem;
  text-decoration: none !important;
  margin-bottom: 4px;
}
.footer-final-contact a:hover { color: var(--gold) !important; }
.footer-final-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin-bottom: 24px;
}
.footer-final-nav a {
  color: rgba(255,255,255,.85) !important;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: color .2s;
}
.footer-final-nav a:hover { color: var(--gold) !important; }
.footer-final-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: 1rem;
  color: rgba(255,255,255,.6);
}
.footer-final-legal a { color: rgba(255,255,255,.75) !important; text-decoration: none !important; }
.footer-final-legal a:hover { color: var(--gold) !important; }

/* Floating Contact us + WhatsApp buttons, bottom-right of viewport */
.floating-contact-wrap {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
}
.floating-contact-btn {
  background: #fff;
  color: var(--navy-deep) !important;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .3px;
  padding: 14px 22px;
  text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.floating-contact-btn:hover { background: var(--gold); color: #fff !important; }
.whatsapp-icon {
  position: static !important;
  width: 54px;
  height: 54px;
  border-radius: 50% !important;
  background: #25D366;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  text-decoration: none !important;
  animation: none !important;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .footer-final { min-height: 560px; }
  .footer-final-content { padding: 48px 0 100px; }
  .footer-final-heading { font-size: clamp(1.8rem, 7vw, 3rem) !important; }
  .footer-final-contact a { font-size: clamp(1.15rem, 3.8vw, 1.65rem); }
}

@media (max-width: 767px) {
  .footer-final {
    min-height: auto;
    display: block;
    padding-top: 245px;
  }
  .footer-final-bg { object-position: center top; }
  .footer-final-overlay {
    background: linear-gradient(180deg, rgba(6,16,28,.08) 0%, rgba(6,16,28,.55) 38%, rgba(6,16,28,.96) 68%, rgba(6,16,28,.99) 100%);
  }
  .footer-final-watermark {
    top: 24px;
    padding: 0 16px;
    font-size: clamp(2rem, 11vw, 3.6rem);
    letter-spacing: 1px;
    line-height: 1.08;
  }
  .footer-final-content { padding: 0 0 96px; }
  .footer-final-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding-bottom: 22px;
    margin-bottom: 20px;
  }
  .footer-final-heading {
    font-size: clamp(2rem, 9vw, 2.75rem) !important;
    line-height: 1.12 !important;
    max-width: 100%;
  }
  .footer-final-contact {
    width: 100%;
    text-align: left;
  }
  .footer-final-contact a {
    font-size: clamp(1rem, 4.5vw, 1.25rem);
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .footer-final-nav {

    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 18px;
    margin-bottom: 22px;
  }
  .footer-final-nav a {
    font-size: .72rem;
    line-height: 1.35;
  }
  .footer-final-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    font-size: .72rem;
    line-height: 1.5;
  }
  .floating-contact-wrap {
    right: 12px;
    bottom: 14px;
    gap: 8px;
  }
  .floating-contact-btn {
    padding: 11px 14px;
    font-size: .72rem;
  }
  .whatsapp-icon {
    width: 46px;
    height: 46px;
    font-size: 1.25rem;
  }
}

@media (max-width: 420px) {
  .footer-final { padding-top: 220px; }
  .footer-final-content { padding-bottom: 92px; }
  .footer-final-nav { grid-template-columns: 1fr; }
  .footer-final-heading { font-size: 2rem !important; }
  .floating-contact-btn { padding: 10px 12px; }
}

/* ================================================================
 * RESPONSIVE
 * ================================================================ */
@media (max-width: 991px) {
  .hero-cgr { min-height: 875px; }
  .hero-cgr-slide-item { padding: 140px 0 80px; }
  .hero-cgr-overlay { background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 60%, rgba(0,0,0,0) 100%); }
  .hero-cgr--video .hero-cgr-overlay {
    background: linear-gradient(180deg, rgba(6,16,28,.75) 0%, rgba(6,16,28,.5) 55%, rgba(6,16,28,.65) 100%);
  }
  .welcome-cgr-box { padding: 40px 25px; }
  .welcome-card-cgr { height: 300px; }
  .about-cgr { padding: 72px 0 80px; }
  .about-cgr .row.align-items-center.g-5 { padding: 0; }
  .collage-cgr { min-height: 430px; margin-top: 24px; }
  .packages-cgr2 .col-lg-3 { margin-bottom: 10px; }
  .tailor-cgr { flex-direction: column; min-height: 0; }
  .tailor-cgr-img { flex: 0 0 auto; max-width: 100%; height: 240px; }
  .tailor-cgr-content { padding: 36px 30px; }
}
@media (max-width: 767px) {
  .hero-cgr-slidenav { display: none; }
  .welcome-cgr { margin-top: -40px; }
  .welcome-cgr-box { padding: 30px 18px;}
  .welcome-card-cgr { height: 260px; }
  .about-cgr { padding: 58px 0 64px; }
  .about-cgr-features { margin-bottom: 38px; row-gap: 24px !important; }
  .about-cgr-feature {
    min-height: auto;
    padding: 0 6px 0 0 !important;
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
  }
  .about-cgr-feature-icon { width: 44px; height: 44px; margin-bottom: 0; grid-row: 1 / 3; }
  .about-cgr-feature h6 { font-size: .78rem !important; margin-bottom: 5px !important; }
  .about-cgr-feature p { font-size: .8rem; line-height: 1.5; max-width: none; }
  .about-cgr .row.align-items-center.g-5 { padding: 0; }
  .about-cgr h2 { font-size: clamp(1.85rem, 8vw, 2.45rem) !important; }
  .about-cgr-heading::after { width: 68px; margin-top: 16px; }
  .about-cgr-text { font-size: .92rem; line-height: 1.72; }
  .btn-cgr-outline { width: 100%; }
  .collage-cgr {
    min-height: 0;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
  }
  .collage-cgr::before,
  .collage-cgr::after { display: none; }
  .collage-cgr-img {
    position: static !important;
    width: 100% !important;
    height: 155px !important;
    box-shadow: 0 14px 30px rgba(14,42,71,.16);
  }
  .collage-cgr-img:hover { transform: none; }
  .packages-cgr2 { padding: 60px 0; }
  .pkg2-img { height: 360px; }
  .stats-strip-cgr { margin-top: -50px; }
}

/* ================================================================
 * PACKAGES PAGE  (find-your-journey grid + why-us + themes + bottom CTA)
 * ================================================================ */

/* ── "Find Your Perfect Journey" grid ── */
.pkgpage-grid-section { padding: 90px 0; background: #fff; }
.pkgpage-grid-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 42px;
}
.pkgpage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.pkgpage-card {
  background: #fff;

  display: flex;
  flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease;
}
.pkgpage-card:hover { box-shadow: 0 20px 44px rgba(14,42,71,.16); transform: translateY(-4px); }
.pkgpage-card-img { position: relative; height: 350px; overflow: hidden; }
.pkgpage-card-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; transition: transform .5s ease; }
.pkgpage-card:hover .pkgpage-card-img img { transform: scale(1.06); }
.pkgpage-card-ribbon {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 1;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 5px 12px;
}
.pkgpage-card-duration {
  position: absolute;
  bottom: 14px; left: 14px;
  z-index: 1;
  background: rgba(10,31,56,.75);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 5px 12px;
}
.pkgpage-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.pkgpage-card-cat {
  color: var(--cgr-green);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pkgpage-card-body h5 {
  font-family: 'Playfair Display', serif !important;
  color: var(--navy) !important;
  font-weight: 800 !important;
  font-size: 1.2rem !important;
  margin-bottom: 8px !important;
}
.pkgpage-card-body p { color: var(--cgr-muted); font-size: .86rem; line-height: 1.6; margin-bottom: 14px; }
.pkgpage-card-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: .76rem;
  color: var(--cgr-muted);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid #eee;
}
.pkgpage-card-meta i { color: var(--cgr-green); margin-right: 4px; }
.pkgpage-card-price {
  font-family: 'Playfair Display', serif !important;
  color: var(--navy) !important;
  font-weight: 800 !important;
  font-size: 1.15rem !important;
  margin-bottom: 16px;
}
.pkgpage-card-price small { font-family: 'Poppins', sans-serif !important; font-weight: 500; font-size: .7rem; color: var(--cgr-muted); text-transform: uppercase; }
.pkgpage-card-btn {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid var(--navy);
  color: var(--navy) !important;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 12px 18px;
  text-decoration: none !important;
  transition: background .2s, color .2s;
}
.pkgpage-card-btn:hover { background: var(--navy); color: #fff !important; }
.pkgpage-grid-footer { text-align: center; margin-top: 46px; }
.btn-cgr-solid-green {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green-dark);
  color: #fff !important;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 16px 40px;
  text-decoration: none !important;
  transition: background .2s;
}
.btn-cgr-solid-green:hover { background: var(--navy-deep); }

/* ── Why Travel With Us (dark split section — full-bleed image column,
   same pattern as .tailor-cgr on the homepage, instead of a padded/gapped
   two-column row inside a contained max-width wrapper) ── */
.pkgpage-why { display: flex; align-items: stretch; background: var(--navy-deep); min-height: 420px; }
.pkgpage-why-text { flex: 0 0 45%; max-width: 45%; display: flex; align-items: center; }
.pkgpage-why-text-inner { padding: 48px clamp(24px, 6vw, 100px) 48px clamp(24px, 6vw, 100px); }
.pkgpage-why-text h2 {
  font-family: 'Playfair Display', serif !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: clamp(1.9rem, 2.8vw, 2.5rem) !important;
  line-height: 1.3 !important;
  margin: 14px 0 16px !important;
}
.pkgpage-why-text-inner > p { color: rgba(255,255,255,.7); font-size: .98rem; line-height: 1.7; margin-bottom: 22px; }
.pkgpage-why-list { list-style: none; margin: 0; padding: 0; }
.pkgpage-why-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  font-weight: 500;
  font-size: .95rem;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pkgpage-why-list li:first-child { padding-top: 0; }
.pkgpage-why-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: .88rem;
}
.pkgpage-why-visual { position: relative; flex: 1; overflow: hidden; }
.pkgpage-why-visual img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.pkgpage-why-card {
  position: absolute;
  right: 24px;
  bottom: 24px;
  max-width: 300px;
  background: rgba(10,31,56,.82);
  padding: 26px 28px;
  text-align: left;
}
.pkgpage-why-card-eyebrow {
  display: block;
  color: var(--gold);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.pkgpage-why-card p { color: rgba(255,255,255,.85); font-size: .85rem; line-height: 1.6; margin-bottom: 18px; }

/* ── Travel Your Way (category theme circles) ── */
.pkgpage-themes { background: var(--cream); padding: 80px 0; }
.pkgpage-themes-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 36px;
  margin-top: 20px;
}
.pkgpage-theme {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 120px;
  text-decoration: none !important;
}
.pkgpage-theme-icon {
  width: 74px;
  height: 74px;
  border-radius: 50% !important;
  background: #fff;
  border: 1px solid rgba(14,42,71,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 1.5rem;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.pkgpage-theme:hover .pkgpage-theme-icon {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy-deep);
  transform: translateY(-4px);
}
.pkgpage-theme-label {
  color: var(--navy);
  font-weight: 600;
  font-size: .82rem;
  text-align: center;
  line-height: 1.3;
}

/* ── Ready to Start Your Journey (bottom CTA) ── */
.pkgpage-cta {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 100px 0;
  overflow: hidden;
}
.pkgpage-cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(6,16,28,.88) 0%, rgba(6,16,28,.55) 55%, rgba(6,16,28,.25) 100%);
}
.pkgpage-cta-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}
.pkgpage-cta-text { max-width: 480px; }
.pkgpage-cta-text h2 {
  font-family: 'Playfair Display', serif !important;
  color: #fff !important;
  font-weight: 800 !important;
  font-size: clamp(1.9rem, 3vw, 2.6rem) !important;
  margin-bottom: 14px !important;
}
.pkgpage-cta-text p { color: rgba(255,255,255,.8); font-size: 1rem; margin-bottom: 26px; }
.pkgpage-cta-card {
  background: #fff;
  display: flex;
  gap: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
}
.pkgpage-cta-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 150px;
  padding: 28px 18px;
  border-right: 1px solid #eee;
  font-size: .8rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
.pkgpage-cta-card-item:last-child { border-right: none; }
.pkgpage-cta-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  background: var(--cream);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

@media (max-width: 1199px) {
  .pkgpage-grid { grid-template-columns: repeat(2, 1fr); }
  .pkgpage-why { flex-direction: column; min-height: 0; }
  .pkgpage-why-text { flex: 0 0 auto; max-width: 100%; }
  .pkgpage-why-visual { flex: 0 0 auto; height: 340px; }
}
@media (max-width: 767px) {
  .pkgpage-grid { grid-template-columns: 1fr; }
  .pkgpage-cta-inner { flex-direction: column; align-items: flex-start; }
  .pkgpage-cta-card { flex-wrap: wrap; width: 100%; }
  .pkgpage-cta-card-item { width: 50%; border-bottom: 1px solid #eee; }
  .pkgpage-why-card { position: static; max-width: none; margin-top: -6px; }
}