/* =====================================================================
   Dream World Travels - Theme Stylesheet v2
   Palette sampled directly from the brand logo (deep teal + gold)
   ===================================================================== */

:root {
  --dwt-teal-950:   #041d1b;
  --dwt-teal-900:   #063230;
  --dwt-teal-800:   #073b37;
  --dwt-teal:       #095159;   /* primary - sampled from logo */
  --dwt-teal-600:   #0e6a6a;
  --dwt-teal-400:   #1c8a86;
  --dwt-gold:       #e6b135;   /* sampled from logo */
  --dwt-gold-deep:  #c8932a;
  --dwt-gold-light: #fce69e;   /* sampled highlight from logo */
  --dwt-cream:      #faf6ec;
  --dwt-ink:        #1c2624;
  --dwt-whatsapp:   #25d366;
  --shadow-soft:    0 10px 30px rgba(4, 29, 27, 0.10);
  --shadow-card:    0 14px 34px rgba(4, 29, 27, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 110px; }

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--dwt-ink);
  background-color: #ffffff;
  overflow-x: hidden;
}

a { color: var(--dwt-teal); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--dwt-gold-deep); }

h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  color: var(--dwt-teal-900);
  letter-spacing: .2px;
}

.gold-text { color: var(--dwt-gold); }

/* Buttons ------------------------------------------------------------ */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: .2px; }

.btn-gold {
  background: linear-gradient(135deg, var(--dwt-gold-light), var(--dwt-gold) 60%, var(--dwt-gold-deep));
  border-color: var(--dwt-gold-deep);
  color: #241a00;
}
.btn-gold:hover { filter: brightness(1.06); color: #241a00; transform: translateY(-1px); }

.btn-teal {
  background-color: var(--dwt-teal);
  border-color: var(--dwt-teal);
  color: #fff;
}
.btn-teal:hover { background-color: var(--dwt-teal-600); border-color: var(--dwt-teal-600); color: #fff; transform: translateY(-1px); }

.text-teal { color: var(--dwt-teal) !important; }
.btn-outline-teal {
  border: 2px solid var(--dwt-teal);
  color: var(--dwt-teal);
  background: transparent;
}
.btn-outline-teal:hover { background-color: var(--dwt-teal); color: #fff; }

.btn-whatsapp {
  background-color: var(--dwt-whatsapp);
  border-color: var(--dwt-whatsapp);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 211, 102, .28);
}
.btn-whatsapp:hover { background-color: #1fb457; border-color: #1fb457; color: #fff; transform: translateY(-1px); }

/* Placeholder media (used everywhere an image hasn't been uploaded yet) */
.ph-media {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, var(--dwt-teal-900) 0%, var(--dwt-teal) 55%, var(--dwt-teal-400) 100%);
  color: rgba(255,255,255,.92);
  position: relative;
  overflow: hidden;
}
.ph-media::before {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: .5;
}
.ph-media i { font-size: 2.1rem; color: var(--dwt-gold-light); position: relative; z-index: 1; }
.ph-media span { font-size: .8rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; position: relative; z-index: 1; }

/* Topbar --------------------------------------------------------------*/
.topbar {
  background-color: var(--dwt-teal-950);
  color: #d8e6e4;
  font-size: 0.83rem;
  padding: 7px 0;
}
.topbar a { color: #eef5f4; }
.topbar a:hover { color: var(--dwt-gold-light); }
.topbar .divider { opacity: .35; margin: 0 10px; }
.topbar .office-hours { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1250px) {
  /* The topbar packs two phone numbers, email, hours, a rating badge and
     social icons into one row - at these widths there isn't room for all
     of it at full size no matter how small the font gets, so the rating
     badge (the least essential piece) steps aside first to free up real
     space for the actual contact details, which must always stay on one
     line and never get cut off. */
  .topbar { font-size: 0.7rem; }
  .topbar .container { flex-wrap: nowrap; }
  .topbar-info { white-space: nowrap; overflow: hidden; }
  .topbar .divider { margin: 0 5px; }
  .topbar .badge-rating { display: none; }
  .topbar .social-icons a { width: 26px; height: 26px; margin-left: 4px; }
}
.topbar .badge-rating {
  background: rgba(230,177,53,.16); color: var(--dwt-gold-light);
  padding: 3px 10px; border-radius: 30px; font-weight: 600; font-size: .78rem;
}
.topbar .social-icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.10); margin-left: 6px;
}
.topbar .social-icons a:hover { background: var(--dwt-gold); color: #241a00; }

/* Navbar --------------------------------------------------------------*/
.navbar-dwt {
  background-color: rgba(255,255,255,.97);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 16px rgba(4,29,27,0.08);
  padding: 8px 0;
  /* Bootstrap's .sticky-top utility gives this nav its own stacking
     context at z-index:1020 (!important). Any other .sticky-top element
     further down the page (e.g. the "Plan My Trip" sidebar) shares that
     same z-index, and being later in the DOM would otherwise paint over
     the whole nav - including the mega-menu - regardless of the
     mega-menu's own z-index. Raising the nav's own context above that
     fixes it for every sticky element on every page, not just this one. */
  z-index: 1045 !important;
}
.navbar-dwt .navbar-brand img { height: 54px; }
.navbar-dwt .nav-link {
  color: var(--dwt-teal-900);
  font-weight: 600;
  margin: 0 4px;
  position: relative;
}
.navbar-dwt .nav-link.active,
.navbar-dwt .nav-link:hover { color: var(--dwt-gold-deep); }
.navbar-dwt .nav-link.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--dwt-gold);
}
.navbar-dwt .dropdown-menu {
  border: none; border-radius: 12px; padding: 10px; margin-top: 8px;
  box-shadow: 0 16px 40px rgba(4,29,27,.16);
}
.navbar-dwt .dropdown-header { color: var(--dwt-gold-deep); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; }
.navbar-dwt .dropdown-item { border-radius: 8px; padding: 8px 14px; font-weight: 500; }
.navbar-dwt .dropdown-item:hover, .navbar-dwt .dropdown-item:focus { background: var(--dwt-cream); color: var(--dwt-teal-900); }
@media (min-width: 992px) {
  .navbar-dwt .dropdown-menu-tours { min-width: 480px; }
  .navbar-dwt .dropdown-menu-tours.show { display: flex; align-items: flex-start; gap: 8px; }
  .navbar-dwt .dropdown-menu-tours .tours-col { flex: 1 1 0; min-width: 0; }
  .navbar-dwt .dropdown-menu:not(.dropdown-menu-tours) { max-height: 70vh; overflow-y: auto; }

  /* Desktop-only hover mega-menu for the Domestic / International nav items.
     The outer .mega-menu starts flush against the nav item (no gap) so the
     hover area is continuous all the way from the link into the menu - the
     visible white box is a separate inner element, pushed down with
     padding on the outer wrapper. This is what stops the menu closing
     while the pointer is still travelling down to it. */
  .navbar-dwt .hover-mega { position: relative; }
  .navbar-dwt .hover-mega > .mega-menu {
    display: none;
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    padding-top: 12px; /* invisible bridge - part of the hoverable area, no visible gap */
    z-index: 1050;
  }
  .navbar-dwt .hover-mega:hover > .mega-menu,
  .navbar-dwt .hover-mega > .mega-menu:hover {
    display: block;
  }
  .navbar-dwt .mega-menu-inner {
    background: #fff; border-radius: 14px; padding: 24px 28px 18px;
    box-shadow: 0 20px 50px rgba(4,29,27,.18);
  }
  .navbar-dwt .mega-cols { display: flex; gap: 36px; }
  .navbar-dwt .mega-col { min-width: 150px; }
  .navbar-dwt .mega-col-title {
    display: block; color: var(--dwt-gold-deep); font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(9,81,89,.1);
    text-decoration: none;
  }
  .navbar-dwt .mega-col-title:hover { color: var(--dwt-teal); }
  .navbar-dwt .mega-col ul { list-style: none; margin: 0; padding: 0; }
  .navbar-dwt .mega-col ul li { margin-bottom: 4px; }
  .navbar-dwt .mega-col ul li a {
    display: block; padding: 4px 6px; border-radius: 6px; font-size: .88rem;
    color: var(--dwt-teal-900); text-decoration: none; white-space: nowrap;
  }
  .navbar-dwt .mega-col ul li a:hover { background: var(--dwt-cream); color: var(--dwt-teal); }
  .navbar-dwt .mega-menu-footer { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(9,81,89,.1); text-align: right; }
}

/* Hero slider -----------------------------------------------------------*/
.hero-slide {
  position: relative;
  height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-slide.ph-gradient { background: linear-gradient(135deg, var(--dwt-teal-900), var(--dwt-teal) 60%, var(--dwt-teal-400)); }
.hero-bg {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero-bg-mobile { display: none; }
.hero-video {
  object-fit: cover;
  object-position: center;
}
.hero-slide::after {
  content: '';
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1;
  /* Balanced: strong enough near the text for it to stay readable, but
     fades out quickly so most of the photo (especially the right side)
     still shows at close to full, uploaded brightness. */
  background: linear-gradient(100deg, rgba(4,29,27,0.62) 0%, rgba(4,29,27,0.42) 32%, rgba(4,29,27,0.10) 62%, rgba(4,29,27,0) 78%);
}
.hero-slide > .container { position: relative; z-index: 2; }
.hero-caption {
  color: #fff;
  max-width: 660px;
}
.hero-caption .eyebrow-badge {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  background: rgba(4,29,27,.45); border: 1px solid rgba(230,177,53,.4);
  color: var(--dwt-gold-light); padding: 6px 16px; border-radius: 30px;
  font-size: .8rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  margin-bottom: 18px;
}
.hero-caption h1 { color: rgba(255,255,255,.78); font-size: 3rem; font-weight: 700; line-height: 1.15; text-shadow: 0 2px 16px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.7); }
.hero-caption h1 .gold-text { opacity: .8; }
.hero-caption p { color: rgba(255,255,255,.92); text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.6); }
@media (max-width: 768px) {
  .hero-slide { height: 460px; }
  .hero-bg-desktop { display: none; }
  .hero-bg-mobile { display: block; }
  .hero-slide::after {
    background: linear-gradient(180deg, rgba(4,29,27,0.15) 0%, rgba(4,29,27,0.55) 55%, rgba(4,29,27,0.68) 100%);
  }
  .hero-caption h1 { font-size: 2rem; }
}
.carousel-indicators [data-bs-target] { background-color: var(--dwt-gold); }

/* Poster strip (flowing marquee) ---------------------------------------*/
.poster-strip { background: var(--dwt-teal-950); padding: 52px 0 40px; overflow: hidden; }
.poster-strip-head { text-align: center; margin-bottom: 26px; color: #fff; }
.poster-strip-head .eyebrow {
  color: var(--dwt-gold); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: .82rem;
}
.poster-strip-head h2 { color: #fff; margin-top: 4px; }

/* Horizontal flowing poster strip - purely decorative (no links, no
   captions), moving continuously left to right. */
.poster-marquee { overflow: hidden; position: relative; }
.poster-marquee::before, .poster-marquee::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 3; pointer-events: none;
}
.poster-marquee::before { left: 0; background: linear-gradient(90deg, var(--dwt-teal-950), transparent); }
.poster-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--dwt-teal-950), transparent); }

.poster-track {
  display: flex; gap: 20px; width: max-content;
  animation: posterScrollLTR 48s linear infinite;
}
.poster-marquee:hover .poster-track { animation-play-state: paused; }

@keyframes posterScrollLTR {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

.poster-item {
  position: relative; flex: 0 0 auto;
  width: 200px; height: 356px; /* 9:16 "reel" ratio, for vertical poster/reel-style uploads */
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
.poster-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-ph-1 { background: linear-gradient(135deg, var(--dwt-gold-deep), var(--dwt-gold) 60%, var(--dwt-gold-light)); }
.poster-ph-1 i { color: var(--dwt-teal-950); }
.poster-ph-2 { background: linear-gradient(135deg, var(--dwt-teal-950), var(--dwt-teal-900) 60%, var(--dwt-teal)); }
.poster-ph-3 { background: linear-gradient(135deg, var(--dwt-teal), var(--dwt-gold-deep)); }
@media (max-width: 768px) {
  .poster-item { width: 140px; height: 249px; }
}
@media (prefers-reduced-motion: reduce) {
  .poster-track { animation: none; overflow-x: auto; }
}

/* Poster strip prev/next arrows (JS-driven scrolling) */
.poster-marquee.js-driven .poster-track { animation: none; will-change: transform; }
.poster-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--dwt-gold); color: var(--dwt-teal-950);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); cursor: pointer; transition: transform .2s, background .2s;
}
.poster-nav:hover { background: var(--dwt-gold-light); transform: translateY(-50%) scale(1.08); }
.poster-nav-prev { left: 14px; }
.poster-nav-next { right: 14px; }
.poster-marquee:not(.js-driven) .poster-nav { display: none; }
@media (max-width: 768px) {
  .poster-nav { width: 38px; height: 38px; font-size: 1.1rem; }
  .poster-nav-prev { left: 8px; } .poster-nav-next { right: 8px; }
}

/* Section titles --------------------------------------------------------*/
.section-title { text-align: center; margin-bottom: 42px; }
.section-title .eyebrow {
  color: var(--dwt-gold-deep); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 0.85rem;
}
.section-title h2 { margin-top: 6px; }
.section-title .underline { width: 60px; height: 3px; background: var(--dwt-gold); margin: 14px auto 0; border-radius: 2px; }
.section-title.light h2, .section-title.light .eyebrow { color: #fff; }

/* Tour / category cards --------------------------------------------------*/
.tour-card {
  position: relative; border-radius: 14px; overflow: hidden; height: 260px;
  box-shadow: var(--shadow-card); display: block;
  background: linear-gradient(135deg, var(--dwt-teal-950), var(--dwt-teal) 60%, var(--dwt-gold-deep));
}
.tour-card img, .tour-card .ph-media {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.tour-card:hover img, .tour-card:hover .ph-media { transform: scale(1.08); }
.tour-card .overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(180deg, rgba(4,29,27,0) 40%, rgba(4,29,27,0.92) 100%);
  pointer-events: none;
}
.tour-card .caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; z-index: 2; }
.tour-card .caption h5 { color: #fff; margin-bottom: 2px; }
.tour-card .caption span, .tour-card .caption a { color: var(--dwt-gold-light); font-size: 0.85rem; font-weight: 600; display: inline-block; }

/* Package cards -----------------------------------------------------------*/
.package-card { border: none; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.25s ease, box-shadow 0.25s ease; height: 100%; }
.variant-card { border-radius: 12px; transition: box-shadow 0.2s ease, border-color 0.2s ease; }

/* Package details - featured image sized to match the 1705x922 photos
   the client uploads, so the image fills edge-to-edge with no wasted
   space either above/below (letterboxing) or cropped away. Uses the
   padding-bottom aspect-ratio technique (not the newer `aspect-ratio`
   property) since it's supported everywhere, no exceptions. */
.package-featured-img { position: relative; width: 100%; height: 0; padding-bottom: 54.08%; }
.package-featured-img img, .package-featured-img .ph-media {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
}

/* "What's included" icon strip - same on every package (Transport,
   Meals, Stay, Sight Seeing), replaces the old info-bar/trust-strip. */
.package-includes-strip {
  background: linear-gradient(135deg, var(--dwt-cream), #fff 60%);
  border: 1px solid rgba(9,81,89,.08); border-radius: 16px;
  padding: 22px 20px; margin-bottom: 24px;
}
.package-duration-badge {
  display: inline-flex; align-items: center; color: var(--dwt-teal-950);
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.05rem;
  background: rgba(9,81,89,.06); border-radius: 30px; padding: 8px 18px;
  margin-bottom: 18px;
}
.package-includes-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.package-includes-item { flex: 1 1 90px; text-align: center; }
.package-includes-icon {
  width: 60px; height: 60px; margin: 0 auto 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--dwt-gold-deep), var(--dwt-gold-light));
  color: var(--dwt-teal-950); display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.package-includes-item span { display: block; font-size: .85rem; font-weight: 700; color: var(--dwt-teal-950); }

.variant-card:hover { box-shadow: var(--shadow-soft); border-color: var(--dwt-teal) !important; }
.package-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(4,29,27,.18); }
.package-card .package-img-wrap {
  height: 210px;
  background: linear-gradient(135deg, var(--dwt-teal-950), var(--dwt-teal) 60%, var(--dwt-gold-deep));
}
.package-card .package-img-wrap img, .package-card .package-img-wrap .ph-media { height: 210px; object-fit: cover; width: 100%; }
.package-card .badge-cat { position: absolute; top: 14px; left: 14px; z-index: 2; background: var(--dwt-gold); color: #241a00; font-weight: 700; font-size: 0.72rem; padding: 6px 12px; border-radius: 30px; }
.package-card .price { color: var(--dwt-teal); font-weight: 700; font-size: 1.15rem; font-family: 'Playfair Display', serif; }
.package-card .price small { color: #888; font-weight: 400; font-size: 0.72rem; display: block; }

/* Why us -------------------------------------------------------------------*/
.why-us-section { background: linear-gradient(180deg, var(--dwt-cream), #fff); }
.why-us-icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: linear-gradient(135deg, var(--dwt-teal), var(--dwt-teal-900));
  color: var(--dwt-gold-light);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
  margin: 0 auto 14px;
}

/* Services grid ---------------------------------------------------------*/
.service-card {
  border-radius: 16px; background: #fff; box-shadow: var(--shadow-soft);
  padding: 28px 20px; text-align: center; height: 100%;
  border: 1px solid rgba(9,81,89,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--dwt-gold); }
.service-card .why-us-icon { background: linear-gradient(135deg, var(--dwt-gold-deep), var(--dwt-gold-light)); color: var(--dwt-teal-950); }
.service-card-link { color: inherit; display: block; }
.service-card-link:hover { color: inherit; }

/* A real uploaded photo shows at a normal, proper size (not shrunk into
   a small circle) - the compact circle is reserved for the icon
   fallback only, when no photo has been uploaded yet. */
.service-card-media-photo {
  width: calc(100% + 40px); margin: -28px -20px 18px; height: 190px; overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.service-card-media-photo img { width: 100%; height: 100%; object-fit: cover; }
.service-card-media-icon {
  width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, var(--dwt-gold-deep), var(--dwt-gold-light));
}
.service-card-media-icon .why-us-icon { margin: 0; width: 100%; height: 100%; border-radius: 0; }

/* Stats strip -----------------------------------------------------------*/
.stats-strip {
  background: linear-gradient(120deg, var(--dwt-teal-950), var(--dwt-teal-900) 55%, var(--dwt-teal-800));
  color: #fff; padding: 60px 0; position: relative; overflow: hidden;
}
.stats-strip::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
}
.stats-strip .stat-item { position: relative; z-index: 1; }
.stats-strip h3 { color: var(--dwt-gold); font-size: 2.4rem; font-family: 'Playfair Display', serif; }
.stats-strip p { color: #dcecea; margin-bottom: 0; }

/* Testimonials -----------------------------------------------------------*/
.testimonial-card { background: #fff; border-radius: 16px; padding: 32px; box-shadow: var(--shadow-soft); height: 100%; border: 1px solid rgba(9,81,89,.06); }
.testimonial-card .quote-icon { color: var(--dwt-gold); font-size: 1.9rem; }
.testimonial-card .stars { color: var(--dwt-gold); }
.testimonial-card .client-photo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }

/* CTA band -----------------------------------------------------------------*/
.cta-band { background: linear-gradient(90deg, var(--dwt-teal-950), var(--dwt-teal)); color: #fff; padding: 24px 0; }
.cta-band .phone { color: var(--dwt-gold-light); font-weight: 700; font-size: 1.2rem; }

/* Footer -----------------------------------------------------------------*/
.site-footer { background: var(--dwt-teal-950); color: #c9dbd8; }
.site-footer h5 { color: var(--dwt-gold-light); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1rem; }
.site-footer a { color: #c9dbd8; }
.site-footer a:hover { color: var(--dwt-gold); }
.footer-hours-line { white-space: nowrap; font-size: 0.58rem; }
.site-footer .license-badge { font-size: .78rem; color: #9db8b4; border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; margin-top: 14px; }
.site-footer .footer-bottom { background: #021110; padding: 16px 0; font-size: 0.85rem; }
.site-footer .footer-bottom a { color: var(--dwt-gold-light); }

/* Floating action buttons --------------------------------------------------*/
.whatsapp-float {
  position: fixed; bottom: 24px; right: 24px; z-index: 999;
  background: var(--dwt-whatsapp); color: #fff; width: 60px; height: 60px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; box-shadow: 0 8px 22px rgba(0,0,0,0.3);
  animation: waPulse 2.4s ease-in-out infinite;
}
.whatsapp-float:hover { color: #fff; transform: scale(1.06); }
@keyframes waPulse {
  0%, 100% { box-shadow: 0 8px 22px rgba(37,211,102,.35); }
  50% { box-shadow: 0 8px 28px rgba(37,211,102,.6); }
}
@media (max-width: 767px) {
  .whatsapp-float { width: 52px; height: 52px; font-size: 1.5rem; bottom: 16px; right: 16px; }
}

/* Video promo section -------------------------------------------------------*/
.video-promo { position: relative; min-height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, var(--dwt-teal-950), var(--dwt-teal) 60%, var(--dwt-gold-deep)); }
.video-promo-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.video-promo-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(4,29,27,.55), rgba(4,29,27,.82)); }
.video-promo-content { position: relative; z-index: 1; max-width: 720px; }
.video-promo-content h2 { font-size: 2.2rem; }
@media (max-width: 768px) { .video-promo { min-height: 340px; } .video-promo-content h2 { font-size: 1.6rem; } }

/* Discover Top Tours CTA banner ---------------------------------------------*/
.discover-banner {
  position: relative; border-radius: 20px; overflow: hidden; padding: 60px 40px; text-align: center;
  background: linear-gradient(120deg, var(--dwt-gold-deep), var(--dwt-gold) 55%, var(--dwt-gold-light));
  color: var(--dwt-teal-950);
}
.discover-banner::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image: radial-gradient(rgba(4,29,27,.08) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}
.discover-banner > * { position: relative; z-index: 1; }
.discover-banner h2 { color: var(--dwt-teal-950); }
.discover-banner p { color: rgba(4,29,27,.75); }
@media (max-width: 768px) { .discover-banner { padding: 40px 20px; } }

/* Page banner (inner pages) -----------------------------------------------*/
.page-banner {
  background: linear-gradient(120deg, var(--dwt-teal-950), var(--dwt-teal) 70%);
  color: #fff; padding: 76px 0 60px; text-align: center; position: relative; overflow: hidden;
}
.page-banner::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background-image: radial-gradient(rgba(255,255,255,.07) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
}
.page-banner h1 { color: #fff; position: relative; z-index: 1; }
.page-banner .breadcrumb { justify-content: center; position: relative; z-index: 1; }
.page-banner .breadcrumb a { color: var(--dwt-gold-light); }
.page-banner .breadcrumb-item.active { color: #cfe2df; }
.page-banner .breadcrumb-item + .breadcrumb-item::before { color: #7ea6a1; }
.page-banner-with-image {
  background-size: cover; background-position: center;
  padding: 40px 0 32px;
}
.page-banner-with-image::before {
  background-image: none;
  background: linear-gradient(120deg, rgba(4,29,27,.82), rgba(9,81,89,.6) 70%);
}
@media (min-width: 768px) {
  /* Lock the banner's own box to the client's exact 1897x287 (~15.13%)
     ratio, so background-size:cover never has to scale the image up
     and crop its top/bottom to fill a taller box - the box height now
     matches the photo's shape exactly, at any screen width. Content
     no longer determines the height (it's absolutely positioned over
     the locked box), so it can't push the box taller than that ratio. */
  .page-banner-with-image {
    height: 0; padding: 15.13% 0 0;
  }
  .page-banner-with-image > .container {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
}

/* Trust badges (About / hero) ---------------------------------------------*/
.trust-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 14px; padding: 12px 18px;
  box-shadow: var(--shadow-soft); border: 1px solid rgba(9,81,89,.08);
}
.trust-badge .stars { color: var(--dwt-gold); font-size: 1rem; white-space: nowrap; flex-shrink: 0; }
.trust-badge strong { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--dwt-teal-900); }

/* Booking / enquiry form ---------------------------------------------------*/
.enquiry-form { background: #fff; border-radius: 18px; box-shadow: var(--shadow-card); padding: 32px; border: 1px solid rgba(9,81,89,.06); }
.enquiry-form .form-label { font-weight: 600; font-size: 0.88rem; color: var(--dwt-teal-900); }
.enquiry-form .form-control, .enquiry-form .form-select {
  border-radius: 9px; border-color: #e1e7e6; padding: 10px 14px;
}
.enquiry-form .form-control:focus, .enquiry-form .form-select:focus {
  border-color: var(--dwt-teal-400); box-shadow: 0 0 0 3px rgba(9,81,89,.12);
}

/* Thank-you page ------------------------------------------------------------*/
.thankyou-icon {
  width: 96px; height: 96px; border-radius: 50%; margin: 0 auto;
  background: linear-gradient(135deg, var(--dwt-whatsapp), #1fb457);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.6rem;
  box-shadow: 0 14px 30px rgba(37,211,102,.35);
  animation: popIn .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wa-handoff { max-width: 420px; margin: 0 auto; }

/* Gallery ------------------------------------------------------------------*/
.gallery-item {
  border-radius: 12px; overflow: hidden; margin-bottom: 20px; box-shadow: var(--shadow-soft);
  background: linear-gradient(135deg, var(--dwt-teal-950), var(--dwt-teal) 60%, var(--dwt-gold-deep));
}
.gallery-item img, .gallery-item .ph-media { width: 100%; height: 220px; object-fit: cover; transition: transform 0.35s ease; }
.gallery-item:hover img, .gallery-item:hover .ph-media { transform: scale(1.07); }

/* Category filter pills ------------------------------------------------------*/
.filter-pills .btn { border-radius: 30px; margin: 4px; font-weight: 600; }

/* Misc ------------------------------------------------------------------------*/
.eyebrow { color: var(--dwt-gold-deep); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: .85rem; }
.rounded-4 { border-radius: 18px !important; }
::selection { background: var(--dwt-gold-light); color: var(--dwt-teal-950); }

.count-up { font-variant-numeric: tabular-nums; }
/* Branded splash screen ------------------------------------------------*/
.dwt-splash {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
  background: radial-gradient(circle at 50% 42%, var(--dwt-teal-600) 0%, var(--dwt-teal-900) 55%, var(--dwt-teal-950) 100%);
  transition: opacity .6s ease, visibility .6s ease;
}
.dwt-splash.is-hidden { opacity: 0; visibility: hidden; }
.dwt-splash-inner { position: relative; width: 230px; height: 230px; display: flex; align-items: center; justify-content: center; }
.dwt-splash-logo {
  width: 200px; height: auto; position: relative; z-index: 2;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));
  animation: dwtSplashIn .9s cubic-bezier(.2,.8,.2,1) both, dwtSplashPulse 2.2s ease-in-out .9s infinite;
}
.dwt-splash-ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 3px solid rgba(230,177,53,.18); border-top-color: var(--dwt-gold); border-right-color: var(--dwt-gold-light);
  animation: dwtSplashSpin 1.1s linear infinite;
}
.dwt-splash-bar { width: 180px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.dwt-splash-bar span {
  display: block; height: 100%; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, var(--dwt-gold-deep), var(--dwt-gold-light));
  animation: dwtSplashBar 1.2s ease-in-out infinite;
}
@keyframes dwtSplashIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes dwtSplashPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes dwtSplashSpin { to { transform: rotate(360deg); } }
@keyframes dwtSplashBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@media (max-width: 576px) {
  .dwt-splash-inner { width: 170px; height: 170px; }
  .dwt-splash-logo { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .dwt-splash-logo, .dwt-splash-ring, .dwt-splash-bar span { animation: none; }
}