/* ============================================================================
   SkyGo Tours — "Sky & Coral" palette adjustments (loaded after style.css)

   The theme coloured every heading with the primary colour, so blue text sat
   on light/blue grounds with poor contrast. These rules split the roles:
     · Heading TEXT -> deep navy  #0F2942  (≈14:1 on white — high contrast)
     · Interactive  -> sky blue   #0EA5E9  (buttons keep dark text, ≈5.5:1)
     · Highlight    -> golden amber #F5A524 (set in style.css)

   The heading rules deliberately mirror the theme's own selector specificity,
   so headings that sit on dark / image / coloured grounds (hero, page banners,
   counters, tour cards on hover, footer) keep their own more-specific white and
   are left untouched.
   ============================================================================ */

/* Headings read as deep navy on light backgrounds */
h1, h2, h3, h4, h5, h6 { color: #0F2942; }
.section-head.trv-head-title-wrap .trv-head-title { color: #0F2942; }
.trv-client-titlesection .trv-head-title { color: #0F2942; }

/* Feature / mission sub-titles and tour-card titles (blue-on-white -> navy).
   Selectors match the theme's own specificity (incl. its #module id) so they win. */
.trv-icon-bx-st1 .trv-icon-bx-title,
.trv-icon-bx-st2 .trv-icon-bx-title { color: #0F2942; }
.trv-tour-category-section #module .trv-feature h2 { color: #0F2942; }

/* ===== Inner-page banner — redesigned, modern sky treatment ==============
   A deep sky-blue gradient stage (brand-consistent, no washed-out photo),
   with layered depth: a slow-drifting aerial sky image, soft light rays, a
   parallax cloud band, and a shimmering title. Clean, premium, professional.
   The white gap some setups showed above it is handled at the end of the file. */
.wt-bnr-inr {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: #0C4A6E;      /* solid base so no white ever shows through */
  background-position: center; background-size: cover;
}
/* layer 1 — brand gradient stage over the photo */
.wt-bnr-inr::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(90% 120% at 78% -10%, rgba(56,189,248,.55), transparent 55%),
    radial-gradient(70% 100% at 10% 110%, rgba(14,165,233,.40), transparent 60%),
    linear-gradient(180deg, rgba(8,47,73,.72) 0%, rgba(3,105,161,.60) 55%, rgba(8,47,73,.80) 100%);
}
/* layer 2 — soft diagonal light rays sweeping across */
.wt-bnr-inr::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: -40% -20%;
  background: repeating-linear-gradient(68deg,
    rgba(255,255,255,.07) 0 2px, transparent 2px 90px);
  animation: bnrRays 18s linear infinite;
}
@keyframes bnrRays { from { transform: translateX(-90px); } to { transform: translateX(0); } }
.wt-bnr-inr .wt-bnr-inr-entry { position: relative; z-index: 5; }

/* On phones the header (110px, absolutely positioned over the banner) and the
   vertically-centred banner title end up only ~4px apart, so the title reads as
   colliding with the logo. Reserving the header's height as top padding pushes
   the centred block clear of it. Wider screens already have ~38px of clearance,
   so this is scoped to the narrow range. */
@media (max-width: 767px) {
  .wt-bnr-inr .wt-bnr-inr-entry { padding-top: 110px; }
}

/* title — soft rise + a slow sheen sweeping through the text.
   The selector is deliberately as deep as the theme's own
   `.wt-bnr-inr-entry .banner-title-outer .wt-title` (0-3-0), which otherwise
   wins and paints the title sky-blue — near-invisible against the cloud
   photograph behind it. */
.wt-bnr-inr .wt-bnr-inr-entry .banner-title-outer .wt-title,
.wt-bnr-inr .wt-title {
  color: #FFFFFF; text-shadow: 0 6px 30px rgba(3,25,45,.55);
  animation: bnrRise .9s cubic-bezier(.2,.7,.2,1) both;
  letter-spacing: -.01em;
}
.wt-bnr-inr .wt-breadcrumb { animation: bnrRise 1.15s cubic-bezier(.2,.7,.2,1) both; }
.wt-bnr-inr .wt-breadcrumb li,
.wt-bnr-inr .wt-breadcrumb li a { color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(3,25,45,.6); }
.wt-bnr-inr .wt-breadcrumb li a:hover { color: #f5a524; }
/* amber accent rule under the title for a designed, finished feel */
.wt-bnr-inr .wt-title::after {
  content: ""; display: block; width: 72px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #F5A524, rgba(245,165,36,0));
  margin: 18px auto 0; animation: bnrRule 1.4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes bnrRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes bnrRule { from { opacity: 0; width: 0; } to { opacity: 1; width: 72px; } }

/* decorative graphics already present in the banner markup, re-choreographed */
.wt-bnr-inr .trv-inr-bnr-cloud,
.wt-bnr-inr .trv-inr-bnr-plane,
.wt-bnr-inr .trv-inr-bnr-bloon-1,
.wt-bnr-inr .trv-inr-bnr-bloon-2 { z-index: 3; }
.wt-bnr-inr .trv-inr-bnr-cloud { opacity: .5; }
/* plane makes a gentle rising pass, then repeats */
.wt-bnr-inr .trv-inr-bnr-plane { animation: bnrPlane 26s ease-in-out infinite; }
@keyframes bnrPlane {
  0%   { transform: translate(-18vw, 34px) rotate(-2deg); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(120vw, -26px) rotate(-2deg); opacity: 0; }
}
/* The theme pushes the plane down with a fixed `margin-top: 240px` on
   .trv-inr-bnr-plane-bx — sized for the ~550px desktop banner. On phones the
   banner is only 300px tall, so the plane rendered *below* it and was never
   visible. The offset is proportional instead, keeping it in the open sky
   above the title at every size. */
@media (max-width: 991px) {
  .wt-bnr-inr .trv-inr-bnr-plane .trv-inr-bnr-plane-bx { margin-top: 104px; }
}
@media (max-width: 575px) {
  .wt-bnr-inr .trv-inr-bnr-plane .trv-inr-bnr-plane-bx { margin-top: 72px; }
}

/* balloons drift on separate rhythms for real depth */
.wt-bnr-inr .trv-inr-bnr-bloon-1 { animation: bnrFloatA 11s ease-in-out infinite; }
.wt-bnr-inr .trv-inr-bnr-bloon-2 { animation: bnrFloatB 14s ease-in-out infinite; }
@keyframes bnrFloatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10px,-24px); } }
@keyframes bnrFloatB { 0%,100% { transform: translate(0,-10px); } 50% { transform: translate(-12px,14px); } }

@media (prefers-reduced-motion: reduce) {
  .wt-bnr-inr::after, .wt-bnr-inr .trv-inr-bnr-plane,
  .wt-bnr-inr .trv-inr-bnr-bloon-1, .wt-bnr-inr .trv-inr-bnr-bloon-2,
  .wt-bnr-inr .wt-title, .wt-bnr-inr .wt-title::after,
  .wt-bnr-inr .wt-breadcrumb { animation: none; }
}

/* ===== About intro copy ====================================================
   The theme's description slot was built for one short line; it now carries
   real body copy, so give it prose spacing and a comfortable measure. */
.trv-we-recommend-content .trv-head-discription p {
  line-height: 1.75;
  margin-bottom: 18px;
}
.trv-we-recommend-content .trv-head-discription p:last-child { margin-bottom: 0; }

/* ===== Header navigation legibility =====
   The sticky (scrolled) header has a sky-blue background. Keep every nav link
   white so it reads clearly, and mark the current page with a golden-amber
   underline so the selected item is always visible (it used to be sky-blue text
   on the sky-blue header — invisible). */
.sticky-header.is-fixed .header-nav .nav > li > a,
.sticky-header.is-fixed .header-nav .nav > li:hover > a,
.sticky-header.is-fixed .header-nav .nav > li.active > a,
.sticky-header.is-fixed .header-nav .nav > li.current-menu-item > a { color: #FFFFFF !important; }

.header-nav .nav > li.active > a,
.header-nav .nav > li.current-menu-item > a { position: relative; }
.header-nav .nav > li.active > a::after,
.header-nav .nav > li.current-menu-item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 3px; border-radius: 3px; background: #F5A524;
}

/* ===== Home hero headline: "Connect Your / World With Us" ==================
   The theme sized this lockup with fixed px per breakpoint, tuned for the much
   shorter "The World". The brand tagline is ~45% wider, so at those sizes it
   overflowed the banner on mid-size screens. Sizing is fluid instead — it scales
   continuously with the viewport, so the line always fits and stays legible from
   large desktops down to small phones. */
.trv-banner-2-wrap .trv-banner-2-text .trv-banner-2-text-large {
  /* Tuned so the headline clears the traveller artwork on the right: at 1280px
     this renders ~87px, ending ~25px short of the image. Below the tablet
     breakpoint the artwork drops away, so the floor keeps the line readable. */
  font-size: clamp(2.2rem, 6.8vw, 8rem);
  line-height: 1.04;
  margin-bottom: 14px;
  max-width: 100%;
  /* keep the descenders of the script face from being clipped */
  padding-bottom: .08em;
}
.trv-banner-2-wrap .trv-banner-2-text .trv-banner-2-text-small {
  font-size: clamp(1.35rem, 3.4vw, 3rem);
  line-height: 1.25;
}
/* The hero column is capped at 1020px; let the longer headline use the full
   width available on very large screens without pushing into the artwork. */
@media (min-width: 1600px) {
  .trv-banner-2-wrap .trv-banner-2-text { max-width: 1180px; }
}
/* On phones the artwork sits behind the text, so add a touch more breathing
   room and keep the whole lockup comfortably inside the viewport. */
@media (max-width: 767px) {
  .trv-banner-2-wrap .trv-banner-2-text .trv-banner-2-text-large {
    text-shadow: 3px 4px 8px rgba(0, 0, 0, .28);
  }
}

/* ===== Home hero — animated sky scene ======================================
   RESTORED. This block was lost when the offer-section CSS was replaced; the
   hero depends on it. Without it .skygo-jet has no rules at all, so the
   aircraft becomes a normal flex item inside .trv-banner-2-overlay and steals
   half the row from the headline. */

/* The cloud tickers were <marquee> tags; build.py converts them to this track,
   which holds two copies of the image side by side. */
.trv-banner-2-wrap .trv-cloud-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.trv-banner-2-wrap .trv-cloud-track img { flex: 0 0 auto; }
.trv-banner-2-wrap .trv-cloud-2 .trv-cloud-track { opacity: .85; }

/* Backdrop sizing. An earlier version animated background-size from
   100% -> 108% 'auto', which stops covering the wrapper vertically and let the
   base colour show as a dark band under the photo. Coverage is fixed with
   `cover`, and the slow drift uses background-position instead, which can
   never uncover the edges. */
.trv-banner-2-wrap {
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: skyDrift 34s ease-in-out infinite alternate;
}
@keyframes skyDrift {
  from { background-position: 48% center; }
  to   { background-position: 52% center; }
}

/* Hero owns the first fold: on load the visitor sees the banner and nothing
   else. The theme hard-codes .trv-banner-2-wrap at 950px (768px under 1366px)
   and the inset panel at 880px/698px, so the hero never related to the
   viewport and the next section always peeked in underneath. The header is
   position:absolute over the hero and the hero starts at y=0, so a full
   viewport height lands the fold exactly at the hero's bottom edge.
   The background is `cover`, so the artwork fills whatever shape this is. */
@media (min-width: 992px) {
  .trv-banner-2-wrap {
    /* width must be pinned: with a constrained height an auto width can
       resolve from the height and the hero stops spanning the page. */
    width: 100%;
    height: 100vh;
    max-height: none;           /* drop the theme's fixed height entirely */
    min-height: 560px;          /* short laptop windows keep the lockup usable */
  }
  /* the inset panel fills the hero minus its 35px top offset + 35px bottom margin */
  .trv-banner-2-wrap .trv-banner-2-overlay { height: calc(100% - 70px); }
}

/* Below 992px the theme stacks the hero and sizes it by content. Keep that,
   but let it grow to the fold as well. svh is the *small* viewport height, so
   a phone's collapsing URL bar can't leave a strip of the next section
   showing on load; the vh line is the fallback for older browsers. */
@media (max-width: 991px) {
  .trv-banner-2-wrap { min-height: 100vh; min-height: 100svh; }
  /* The theme gives the inset panel `height: auto` here, so it only wrapped its
     own content — fine when the banner was content-height too, but once the
     banner fills the fold the tint stopped ~58% down and left the lower banner
     untinted. Inheriting the banner's min-height makes the panel fill it, and
     centring keeps the headline lockup in the middle of the taller box rather
     than clinging to the top. */
  .trv-banner-2-wrap .trv-banner-2-overlay {
    min-height: inherit;
    align-items: center;
  }
}

/* Client request: keep the dark tint over the banner (the theme's own
   rgba(0,0,0,.2), which also keeps the white headline legible against the
   bright sky), but no rotating rings. */
.trv-banner-2-wrap .trv-banner-2-overlay { background-color: rgba(0, 0, 0, .2); }
.trv-banner-2-wrap .twm-img-bg-circle-area { display: none; }

/* The plane and its dotted route glide gently across and back. */
.trv-banner-2-wrap .trv-banner-2-media .media1 {
  animation: skyPlane 15s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes skyPlane {
  from { transform: translate3d(-14px, 10px, 0) rotate(-.6deg); }
  to   { transform: translate3d( 18px,-12px, 0) rotate(.6deg); }
}

/* Aircraft crossing the Dubai sky. The jet is the client's own hero image with
   the background keyed out, and the backdrop is that same photograph with the
   aircraft painted out — so the scene reassembles exactly as supplied, except
   the plane now actually flies across it. */
.trv-banner-2-wrap .skygo-jet {
  /* The aircraft's width is a custom property so the keyframes can start it
     exactly one plane-width off the left edge. With the old fixed percentages
     (-58% -> 112%) the plane was already gone by 100% and did not reappear
     until -42%, leaving ~5s of empty sky in every 30s cycle. */
  --jet-w: clamp(280px, 42vw, 760px);
  position: absolute;      /* MUST stay absolute: .trv-banner-2-overlay is a
                              flex row, so in normal flow this crushes the
                              headline column. */
  top: 30%;                /* centred in the open sky, as in the reference */
  left: 0;
  z-index: 1;              /* flies BEHIND the headline so the text stays legible */
  width: 100%;
  pointer-events: none;
  animation: jetCross 25s linear infinite;
  will-change: transform;
}
.trv-banner-2-wrap .skygo-jet img {
  width: var(--jet-w);
  height: auto;
  display: block;
  filter: drop-shadow(0 22px 34px rgba(8, 47, 73, .22));
  animation: jetBank 11s ease-in-out infinite;
}
/* Starts with its trailing edge on the left edge of the screen and ends with
   its leading edge just past the right, so the next pass begins entering the
   instant the previous one clears — continuous traffic, no empty sky. */
@keyframes jetCross {
  0%   { transform: translate3d(calc(-1 * var(--jet-w)), 22px, 0); }
  100% { transform: translate3d(100vw, -26px, 0); }
}
/* gentle bank so the pass doesn't read as a flat slide */
@keyframes jetBank {
  0%,100% { transform: rotate(-1.2deg) translateY(0); }
  50%     { transform: rotate(1.2deg) translateY(-12px); }
}
@media (max-width: 991px) {
  .trv-banner-2-wrap .skygo-jet { top: 26%; }
}
@media (max-width: 767px) {
  /* set the variable, not the img width, so the keyframes stay in sync */
  .trv-banner-2-wrap .skygo-jet { top: 22%; --jet-w: 280px; }
}

/* Headline sits above the flight path so the aircraft passes behind it. */
.trv-banner-2-wrap .trv-banner-2-content-section,
.trv-banner-2-wrap .trv-banner-2-text { position: relative; z-index: 4; }

/* Staggered entrance for the headline block on load. */
.trv-banner-2-wrap .trv-banner-2-text-small { animation: skyRise .8s cubic-bezier(.2,.7,.2,1) both; }
.trv-banner-2-wrap .trv-banner-2-text-mid   { animation: skyRise .8s cubic-bezier(.2,.7,.2,1) .12s both; }
.trv-banner-2-wrap .trv-banner-text-detail  { animation: skyRise .8s cubic-bezier(.2,.7,.2,1) .24s both; }
.trv-banner-2-wrap .trv-banner-btn          { animation: skyRise .8s cubic-bezier(.2,.7,.2,1) .36s both; }
@keyframes skyRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .trv-banner-2-wrap,
  .trv-banner-2-wrap .trv-cloud-track,
  .trv-banner-2-wrap .trv-banner-2-media .media1,
  .trv-banner-2-wrap .skygo-jet,
  .trv-banner-2-wrap .skygo-jet img,
  .trv-banner-2-wrap .trv-banner-2-text-small,
  .trv-banner-2-wrap .trv-banner-2-text-mid,
  .trv-banner-2-wrap .trv-banner-text-detail,
  .trv-banner-2-wrap .trv-banner-btn { animation: none; }
}

/* ===== Offer Flash — premium folded-document card ========================
   Reworked from a flat promo strip into a composed offer card:
     left  : eyebrow + ribbon + oversized price + trust chips
     right : a white travel document with a folded spine on a slight 3D tilt
   Deep navy ground, sky-blue gradient, white document, amber for price + CTA.
   All motion is CSS; the only script is a ~15-line IntersectionObserver that
   adds .is-in for the entrance. Everything is disabled under reduced-motion. */
.trv-offers-wrap { padding: 34px 0 28px; background: #FFFFFF; }
.trv-offers-wrap .trv_ad-slider { position: relative; }
.trv-offers-wrap .swiper-slide { padding: 5px 4px 8px; }

/* ---- the card -------------------------------------------------------- */
.ofr-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(20px, 3vw, 54px);
  padding: clamp(16px, 1.6vw, 22px) clamp(24px, 3.6vw, 52px);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  color: #FFFFFF;
  background:
    radial-gradient(120% 150% at 88% 12%, rgba(56,189,248,.34), transparent 58%),
    linear-gradient(128deg, #0A2A55 0%, #0E3A70 46%, #12579F 100%);
  box-shadow: 0 26px 60px -30px rgba(6, 30, 62, .85),
              inset 0 1px 0 rgba(255,255,255,.10);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1),
              transform .7s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
}
/* The card is visible by default so the offer is never hidden behind JS.
   offers.js adds .ofr-anim to the wrapper only when it can guarantee a
   reveal, and takes it off again via .is-in / its failsafe. */
.ofr-anim .ofr-card { opacity: 0; transform: translateY(26px); }
.ofr-anim .ofr-card.is-in { opacity: 1; transform: none; }
/* soft floating lift on hover */
.ofr-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 40px 74px -34px rgba(6, 30, 62, .92),
              inset 0 1px 0 rgba(255,255,255,.14);
}
/* faint skyline silhouette for depth, drawn in CSS (no extra request) */
.ofr-card::after {
  content: "";
  position: absolute; right: 0; bottom: 0; z-index: -1;
  width: 46%; height: 62%;
  opacity: .12; pointer-events: none;
  background:
    linear-gradient(to top, rgba(255,255,255,.9) 0 100%) 8% 100%/6% 42% no-repeat,
    linear-gradient(to top, rgba(255,255,255,.9) 0 100%) 18% 100%/5% 62% no-repeat,
    linear-gradient(to top, rgba(255,255,255,.9) 0 100%) 27% 100%/4% 34% no-repeat,
    linear-gradient(to top, rgba(255,255,255,.9) 0 100%) 36% 100%/7% 84% no-repeat,
    linear-gradient(to top, rgba(255,255,255,.9) 0 100%) 48% 100%/5% 48% no-repeat,
    linear-gradient(to top, rgba(255,255,255,.9) 0 100%) 58% 100%/6% 68% no-repeat,
    linear-gradient(to top, rgba(255,255,255,.9) 0 100%) 70% 100%/4% 38% no-repeat;
}

/* ---- eyebrow: label + dashed route + plane --------------------------- */
.ofr-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; }
.ofr-eyebrow__text {
  font-family: "Figtree", sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: #FFC24D;
  white-space: nowrap;
}
.ofr-eyebrow__track {
  flex: 1 1 auto; max-width: 120px; height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 6px, transparent 6px 12px);
}
.ofr-eyebrow__plane { color: rgba(255,255,255,.9); font-size: 1rem; animation: ofrPlane 6s ease-in-out infinite; }
@keyframes ofrPlane {
  0%,100% { transform: translate(0,0) rotate(0deg); opacity: .9; }
  50%     { transform: translate(8px,-5px) rotate(6deg); opacity: 1; }
}

/* ---- SPECIAL OFFER ribbon ------------------------------------------- */
.ofr-ribbon {
  display: inline-block;
  position: relative;
  padding: 5px 26px 5px 15px;
  margin-bottom: 7px;
  font-family: "Figtree", sans-serif;
  font-size: .95rem; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: #2A1B00;
  background: linear-gradient(100deg, #FFC24D 0%, #F5A524 100%);
  border-radius: 4px 0 0 4px;
  box-shadow: 0 10px 24px -12px rgba(245,165,36,.9);
}
/* notched tail, like a printed ribbon */
.ofr-ribbon::after {
  content: ""; position: absolute; right: -13px; top: 0; bottom: 0; width: 14px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 45% 50%, 100% 100%, 0 100%);
}

/* ---- price: the focal point ----------------------------------------- */
.ofr-price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 12px; }
.ofr-price__amount {
  font-family: "Figtree", sans-serif;
  font-size: clamp(2.3rem, 4.6vw, 3.7rem);
  font-weight: 900; line-height: .9; letter-spacing: -.035em;
  color: #FFFFFF;
  text-shadow: 0 14px 36px rgba(3,20,45,.5);
  animation: ofrPrice .85s cubic-bezier(.2,.8,.2,1) both;
}
.ofr-price__cur {
  font-family: "Figtree", sans-serif;
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #F5A524;
}
.ofr-price__cur span { display: block; font-size: .62em; font-weight: 600;
  letter-spacing: .08em; color: rgba(255,255,255,.7); }
@keyframes ofrPrice {
  from { opacity: 0; transform: translateY(16px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* ---- trust chips ----------------------------------------------------- */
.ofr-trust { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 2vw, 30px); }
.ofr-trust li { display: flex; align-items: center; gap: 10px; }
.ofr-trust__ico {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: #FFFFFF; font-size: .92rem;
}
.ofr-trust__txt {
  font-family: "Figtree", sans-serif;
  font-size: .82rem; font-weight: 600; line-height: 1.25; color: rgba(255,255,255,.9);
}

/* ---- right column: folded document + CTA ----------------------------- */
.ofr-card__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 11px;
  perspective: 1400px;
}
.ofr-doc { position: relative; width: 100%; max-width: 430px; }
/* the folded spine, sitting behind the page on its left edge */
.ofr-doc__fold {
  position: absolute; left: -26px; top: 12px; bottom: 12px; width: 78px;
  border-radius: 16px 6px 6px 16px;
  background: linear-gradient(120deg, #0B3B77 0%, #1462B4 55%, #0B3B77 100%);
  box-shadow: inset -10px 0 22px -12px rgba(0,0,0,.55);
  transform: rotateY(24deg);
  transform-origin: left center;
  animation: ofrFold 9s ease-in-out infinite;
}
.ofr-doc__page {
  --dog: clamp(30px, 3.4vw, 46px);   /* size of the turned-down corner */
  position: relative;
  padding: clamp(13px, 1.3vw, 18px) clamp(22px, 2.6vw, 34px);
  border-radius: 10px 24px 24px 10px;
  background: linear-gradient(158deg, #FFFFFF 0%, #F4F8FF 100%);
  transform: rotateY(-9deg) rotateX(1.5deg);
  transform-origin: left center;
  animation: ofrPage 9s ease-in-out infinite;
  /* The turned-down corner: cut the sheet, then draw the flap over the notch.
     drop-shadow (not box-shadow) so the shadow follows the folded silhouette
     instead of being clipped square by clip-path. */
  clip-path: polygon(0 0, calc(100% - var(--dog)) 0, 100% var(--dog), 100% 100%, 0 100%);
  filter: drop-shadow(0 20px 30px rgba(4, 24, 52, .55));
}
/* the flap itself, lying over the cut corner */
.ofr-doc__page::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: var(--dog); height: var(--dog);
  background: linear-gradient(225deg, #C9DBF2 0%, #E3EDFB 55%, #FFFFFF 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  border-bottom-left-radius: 3px;
}
@keyframes ofrPage {
  0%,100% { transform: rotateY(-9deg) rotateX(1.5deg) translateY(0); }
  50%     { transform: rotateY(-7deg) rotateX(1deg) translateY(-6px); }
}
@keyframes ofrFold {
  0%,100% { transform: rotateY(24deg); }
  50%     { transform: rotateY(20deg); }
}
.ofr-doc__title {
  font-family: "Figtree", sans-serif;
  font-size: clamp(.95rem, 1.35vw, 1.22rem);
  font-weight: 700; letter-spacing: -.01em; color: #12579F; line-height: 1.2;
}
.ofr-doc__days {
  font-family: "Figtree", sans-serif;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  font-weight: 900; letter-spacing: -.03em; color: #0F2942;
  line-height: 1.05; margin-top: 2px;
}
.ofr-doc__sub {
  display: inline-block; position: relative; margin-top: 3px;
  font-family: "Afacad", sans-serif; font-style: italic;
  font-size: clamp(.9rem, 1.25vw, 1.1rem); font-weight: 600; color: #12579F;
}
.ofr-doc__sub::after {
  content: ""; display: block; height: 3px; border-radius: 3px; margin-top: 3px;
  background: linear-gradient(90deg, #F5A524, rgba(245,165,36,0));
}
/* approval stamp */
.ofr-doc__stamp {
  position: absolute; right: clamp(16px, 2vw, 26px); bottom: clamp(14px, 1.8vw, 22px);
  font-family: "Figtree", sans-serif; font-size: .6rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; text-align: center;
  color: rgba(18, 87, 159, .5);
  border: 2px solid rgba(18, 87, 159, .32);
  border-radius: 8px; padding: 6px 10px; line-height: 1.15;
  transform: rotate(-11deg);
}

/* ---- CTA ------------------------------------------------------------- */
.ofr-cta {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 26px;
  border-radius: 12px;
  font-family: "Figtree", sans-serif; font-size: .95rem; font-weight: 800;
  letter-spacing: .01em; color: #2A1B00;
  background: linear-gradient(100deg, #FFC24D 0%, #F5A524 100%);
  box-shadow: 0 16px 34px -14px rgba(245,165,36,.95);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, filter .28s ease;
}
.ofr-cta i { transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.ofr-cta:hover, .ofr-cta:focus-visible {
  color: #2A1B00; transform: translateY(-3px);
  box-shadow: 0 24px 44px -14px rgba(245,165,36,1);
  filter: saturate(1.05);
}
.ofr-cta:hover i { transform: translateX(5px); }
.ofr-cta:focus-visible { outline: 3px solid rgba(255,255,255,.8); outline-offset: 3px; }
/* travelling shine */
.ofr-cta::before {
  content: ""; position: absolute; top: -60%; left: -40%;
  width: 34px; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: rotate(22deg);
  animation: ofrShine 4.5s ease-in-out infinite;
}
@keyframes ofrShine {
  0%, 62% { left: -40%; }
  100%    { left: 130%; }
}

/* ---- pagination ------------------------------------------------------ */
.trv-offers-wrap .swiper-pagination { position: static; margin-top: 14px; line-height: 0; }
.trv-offers-wrap .swiper-pagination .swiper-pagination-bullet {
  width: 9px; height: 9px; margin: 0 5px; background: #0E3A70; opacity: .22;
  transition: width .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease, background-color .35s ease;
}
.trv-offers-wrap .swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1; width: 30px; border-radius: 6px; background: #F5A524;
}

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 991px) {
  .trv-offers-wrap { padding: 30px 0 26px; }
  .ofr-card { grid-template-columns: 1fr; gap: 20px; text-align: left; }
  .ofr-card__right { align-items: stretch; perspective: 1000px; }
  .ofr-doc { max-width: none; }
  .ofr-doc__fold { left: -16px; width: 56px; transform: rotateY(20deg); }
  .ofr-doc__page { transform: rotateY(-5deg); }
  .ofr-cta { align-self: flex-start; }
}
@media (max-width: 575px) {
  .trv-offers-wrap { padding: 26px 0 22px; }
  .ofr-card { padding: 18px 18px; border-radius: 20px; }
  .ofr-trust { gap: 12px; }
  .ofr-trust__ico { width: 36px; height: 36px; font-size: .95rem; }
  .ofr-trust__txt { font-size: .74rem; }
  /* Keep the fold readable rather than cramped on small screens: drop the
     3D rotation and float straight up, so the text stays flat-on and legible.
     These need their own keyframes because a running animation outranks a
     plain `transform` declaration. */
  .ofr-doc__fold {
    left: -10px; width: 40px;
    animation-name: ofrFoldFlat;
  }
  .ofr-doc__page {
    border-radius: 10px 18px 18px 10px;
    animation-name: ofrPageFlat;
  }
  @keyframes ofrPageFlat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-5px); }
  }
  @keyframes ofrFoldFlat {
    0%,100% { transform: rotateY(16deg); }
    50%     { transform: rotateY(13deg); }
  }
  .ofr-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ofr-card, .ofr-anim .ofr-card { opacity: 1; transform: none; transition: none; }
  .ofr-card:hover { transform: none; }
  .ofr-price__amount, .ofr-eyebrow__plane,
  .ofr-doc__page, .ofr-doc__fold, .ofr-cta::before { animation: none; }
  .ofr-cta, .ofr-cta i { transition: none; }
  .ofr-cta:hover, .ofr-cta:hover i { transform: none; }
}

/* ===== Destination listing (Dubai / India tours) ===========================
   A grid of image + name + short description. The theme's own
   .trv-destination-bx1 is a 500px portrait tile with no room for a
   description, so this is a small dedicated card that borrows the site's
   existing tokens — Figtree, the navy/sky palette, 30px card radius. */
.trv-dest-wrap { background: #FFFFFF; }
.trv-dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(18px, 2.2vw, 30px);
}
.trv-dest-card {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid #E4EBF3;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 34px -26px rgba(6,30,62,.45);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease, border-color .3s ease;
}
.trv-dest-card:hover, .trv-dest-card:focus-within {
  transform: translateY(-5px);
  border-color: #CFE0F2;
  box-shadow: 0 28px 50px -26px rgba(6,30,62,.55);
}
/* fixed ratio keeps every card the same height regardless of source image */
.trv-dest-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #EAF2FB;
}
.trv-dest-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.trv-dest-card:hover .trv-dest-card__media img { transform: scale(1.06); }
/* photograph not supplied yet — a branded panel rather than a wrong picture */
.trv-dest-card__media--empty {
  display: grid; place-items: center; padding: 18px;
  background:
    radial-gradient(120% 140% at 80% 10%, rgba(56,189,248,.35), transparent 60%),
    linear-gradient(130deg, #0A2A55 0%, #12579F 100%);
}
.trv-dest-card__media--empty span {
  font-family: "Figtree", sans-serif;
  font-size: 1.25rem; font-weight: 800; letter-spacing: .02em;
  color: rgba(255,255,255,.95); text-align: center;
}
.trv-dest-card__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.trv-dest-card__title {
  font-family: "Figtree", sans-serif;
  font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em;
  color: #0F2942; margin: 0;
}
.trv-dest-card__text {
  font-size: .95rem; line-height: 1.65; color: #4A5A6B; margin: 0;
}

/* whole card is the link when packages come from WordPress */
.trv-dest-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.trv-dest-card__link:hover, .trv-dest-card__link:focus-visible { color: inherit; }
.trv-dest-card__link:focus-visible { outline: 3px solid #F5A524; outline-offset: 3px; border-radius: 22px; }
.trv-dest-card__meta {
  margin: 4px 0 0; font-family: "Figtree", sans-serif;
  font-size: .86rem; font-weight: 700; color: #12579F;
}
/* itinerary rows stack a heading above its detail */
.odp-tier--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.odp-tier__text { font-size: .95rem; line-height: 1.6; color: #4A5A6B; }
.odp-includes--muted .odp-inc__ico { background: rgba(148,163,184,.18); color: #64748B; }

/* the two category tiles on the About page become links */
.trv-destination-bx1 > a.trv-dest-link {
  position: absolute; inset: 0; z-index: 4;
  border-radius: 30px;
}
.trv-destination-bx1 > a.trv-dest-link:focus-visible {
  outline: 3px solid #F5A524; outline-offset: 4px;
}

@media (max-width: 991px) {
  .trv-dest-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 575px) {
  .trv-dest-grid { grid-template-columns: 1fr; gap: 16px; }
  .trv-dest-card__body { padding: 17px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .trv-dest-card, .trv-dest-card__media img { transition: none; }
  .trv-dest-card:hover { transform: none; }
  .trv-dest-card:hover .trv-dest-card__media img { transform: none; }
}

/* ===== Offer detail page ===================================================
   Rebuilt as a structured product page: offer header, scannable facts grid,
   overview, inclusions/pricing, closing CTA, and a sticky booking card.
   Palette matches the rest of the site — navy ground, sky-blue gradients,
   white cards, amber reserved for price and CTA. Sections only render when the
   offer actually has that content, so sparse offers stay clean. */
.odp {
  --odp-navy: #0A2A55;
  --odp-blue: #12579F;
  --odp-sky: #0EA5E9;
  --odp-amber: #F5A524;
  --odp-ink: #0F2942;
  --odp-body: #4A5A6B;
  --odp-line: #E4EBF3;
  --odp-bg: #F5F8FC;
  --odp-radius: 18px;
  padding: 64px 0 72px;
  background: #FFFFFF;
  color: var(--odp-body);
}
.odp .container { max-width: 1200px; }

/* ---- shared type scale ---------------------------------------------- */
.odp-h2 {
  font-family: "Figtree", sans-serif;
  font-size: clamp(1.32rem, 2vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--odp-ink);
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--odp-line);
}
.odp-section { margin-bottom: 42px; }
.odp-section:last-child { margin-bottom: 0; }

/* ---- buttons --------------------------------------------------------- */
.odp-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 28px;
  border-radius: 11px;
  font-family: "Figtree", sans-serif;
  font-size: 1rem; font-weight: 800; letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background-color .25s ease;
}
.odp-btn i { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.odp-btn:hover i, .odp-btn:focus-visible i { transform: translateX(4px); }
.odp-btn--primary {
  color: #2A1B00;
  background: linear-gradient(100deg, #FFC24D 0%, var(--odp-amber) 100%);
  box-shadow: 0 14px 28px -14px rgba(245,165,36,.9);
}
.odp-btn--primary:hover, .odp-btn--primary:focus-visible {
  color: #2A1B00; transform: translateY(-2px);
  box-shadow: 0 20px 34px -14px rgba(245,165,36,1);
}
.odp-btn--block { width: 100%; }
.odp-btn:focus-visible { outline: 3px solid rgba(14,165,233,.55); outline-offset: 3px; }

/* ---- offer header ---------------------------------------------------- */
.odp-hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: stretch;
  gap: 0;
  margin-bottom: 46px;
  border-radius: 24px;
  overflow: hidden;
  color: #FFFFFF;
  background:
    radial-gradient(120% 140% at 85% 10%, rgba(56,189,248,.32), transparent 60%),
    linear-gradient(126deg, var(--odp-navy) 0%, #0E3A70 48%, var(--odp-blue) 100%);
  box-shadow: 0 24px 54px -28px rgba(6,30,62,.8);
}
.odp-hero__body {
  padding: clamp(26px, 3.4vw, 46px);
  display: flex; flex-direction: column; justify-content: center;
}
.odp-badge {
  align-self: flex-start;
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.26);
  font-family: "Figtree", sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #FFC24D;
}
.odp-hero__title {
  font-family: "Figtree", sans-serif;
  font-size: clamp(1.65rem, 3.2vw, 2.7rem);
  font-weight: 800; line-height: 1.14; letter-spacing: -.02em;
  color: #FFFFFF; margin: 0 0 10px;
}
.odp-hero__desc {
  font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.82);
  margin: 0 0 24px; max-width: 46ch;
}
.odp-hero__foot { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); flex-wrap: wrap; }
.odp-hero__price { display: flex; align-items: baseline; gap: 9px; }
.odp-hero__amount {
  font-family: "Figtree", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900; line-height: 1; letter-spacing: -.03em; color: #FFFFFF;
}
.odp-hero__cur {
  font-family: "Figtree", sans-serif;
  font-size: 1rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--odp-amber);
}
.odp-hero__cur span { display: block; font-size: .68em; font-weight: 600; color: rgba(255,255,255,.72); }
.odp-hero__media { position: relative; min-height: 260px; }
.odp-hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* soften the seam between the panel and the photo */
.odp-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,42,85,.85) 0%, rgba(10,42,85,.12) 42%, transparent 100%);
}

/* ---- two-column body ------------------------------------------------- */
.odp-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: clamp(24px, 3vw, 46px);
  align-items: start;
}

/* ---- facts grid ------------------------------------------------------- */
.odp-facts {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.odp-fact {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 18px;
  background: var(--odp-bg);
  border: 1px solid var(--odp-line);
  border-radius: 14px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.odp-fact:hover {
  transform: translateY(-3px);
  border-color: #CFE0F2;
  box-shadow: 0 14px 26px -18px rgba(6,30,62,.55);
}
.odp-fact__ico {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(140deg, rgba(14,165,233,.16), rgba(18,87,159,.12));
  color: var(--odp-blue); font-size: 1.15rem;
}
.odp-fact__text { display: flex; flex-direction: column; min-width: 0; }
.odp-fact__label {
  font-family: "Figtree", sans-serif;
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #8496A8;
}
.odp-fact__value {
  font-family: "Figtree", sans-serif;
  font-size: 1rem; font-weight: 700; color: var(--odp-ink);
  line-height: 1.35; margin-top: 2px;
}

/* ---- overview --------------------------------------------------------- */
.odp-lead {
  font-size: 1.04rem; line-height: 1.75; color: var(--odp-body);
  margin: 0; max-width: 68ch;
}
.odp-highlight {
  margin: 20px 0 0; padding: 15px 20px;
  border-left: 4px solid var(--odp-amber);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(245,165,36,.10), rgba(245,165,36,0));
}
.odp-highlight span {
  font-family: "Figtree", sans-serif;
  font-size: 1.02rem; font-weight: 800; color: var(--odp-ink); letter-spacing: .01em;
}

/* ---- what's included --------------------------------------------------- */
.odp-includes {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px;
}
.odp-inc {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--odp-line);
  border-radius: 13px;
  background: #FFFFFF;
  font-size: .98rem; font-weight: 600; color: var(--odp-ink);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.odp-inc:hover {
  transform: translateY(-3px); border-color: #CFE0F2;
  box-shadow: 0 14px 26px -18px rgba(6,30,62,.5);
}
.odp-inc__ico {
  flex: 0 0 auto;
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(16,185,129,.12);
  color: #0E9F6E; font-size: .92rem;
}

/* ---- pricing tiers ----------------------------------------------------- */
.odp-tiers {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--odp-line); border-radius: 14px; overflow: hidden;
}
.odp-tier {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  background: #FFFFFF;
  transition: background-color .25s ease;
}
.odp-tier + .odp-tier { border-top: 1px solid var(--odp-line); }
.odp-tier:hover { background: var(--odp-bg); }
.odp-tier__label {
  font-family: "Figtree", sans-serif;
  font-size: 1rem; font-weight: 700; color: var(--odp-ink);
}
.odp-tier__price {
  font-family: "Figtree", sans-serif;
  font-size: 1.08rem; font-weight: 800; color: var(--odp-blue);
  white-space: nowrap;
}

/* ---- note -------------------------------------------------------------- */
.odp-note {
  display: flex; gap: 15px;
  padding: 20px 22px;
  margin-bottom: 42px;
  border: 1px solid #D9E6F5;
  border-radius: var(--odp-radius);
  background: linear-gradient(140deg, #F2F8FF 0%, #FAFCFF 100%);
}
.odp-note__ico { flex: 0 0 auto; color: var(--odp-sky); font-size: 1.35rem; line-height: 1.2; }
.odp-note h3 {
  font-family: "Figtree", sans-serif;
  font-size: 1.04rem; font-weight: 800; color: var(--odp-ink); margin: 0 0 5px;
}
.odp-note p { margin: 0; font-size: .97rem; line-height: 1.65; color: var(--odp-body); }

/* ---- closing CTA -------------------------------------------------------- */
.odp-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(18px, 3vw, 40px); flex-wrap: wrap;
  padding: clamp(24px, 3vw, 38px) clamp(24px, 3.4vw, 44px);
  border-radius: 20px;
  color: #FFFFFF;
  background:
    radial-gradient(110% 160% at 90% 15%, rgba(56,189,248,.30), transparent 60%),
    linear-gradient(120deg, var(--odp-navy) 0%, var(--odp-blue) 100%);
  box-shadow: 0 22px 46px -26px rgba(6,30,62,.8);
}
.odp-cta h2 {
  font-family: "Figtree", sans-serif;
  font-size: clamp(1.3rem, 2.2vw, 1.85rem);
  font-weight: 800; color: #FFFFFF; margin: 0 0 6px; letter-spacing: -.015em;
}
.odp-cta p { margin: 0; color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.6; }

/* ---- sticky booking card ------------------------------------------------ */
.odp-aside { position: sticky; top: 110px; }
.odp-book {
  border: 1px solid var(--odp-line);
  border-radius: var(--odp-radius);
  overflow: hidden;
  background: #FFFFFF;
  box-shadow: 0 20px 44px -28px rgba(6,30,62,.55);
}
.odp-book__media { height: 150px; overflow: hidden; }
.odp-book__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.odp-book__body { padding: 20px 22px 22px; }
.odp-book__name {
  font-family: "Figtree", sans-serif;
  font-size: 1.06rem; font-weight: 800; color: var(--odp-ink);
  line-height: 1.3; margin-bottom: 10px;
}
.odp-book__price { display: flex; align-items: baseline; gap: 8px; }
.odp-book__amount {
  font-family: "Figtree", sans-serif;
  font-size: 2.05rem; font-weight: 900; letter-spacing: -.03em; color: var(--odp-ink); line-height: 1;
}
.odp-book__cur {
  font-family: "Figtree", sans-serif;
  font-size: .88rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--odp-amber);
}
.odp-book__cur span { display: block; font-size: .7em; font-weight: 600; color: #8496A8; }
.odp-book__note { font-size: .87rem; color: #8496A8; margin-top: 4px; }
.odp-book__meta { list-style: none; margin: 16px 0 18px; padding: 16px 0 0; border-top: 1px solid var(--odp-line); }
.odp-book__meta li {
  display: flex; align-items: center; gap: 9px;
  font-size: .92rem; color: var(--odp-body); padding: 6px 0;
}
.odp-book__meta li i { color: var(--odp-blue); font-size: 1rem; flex: 0 0 auto; }
.odp-book__meta li span { flex: 1 1 auto; }
.odp-book__meta li strong { color: var(--odp-ink); font-weight: 700; text-align: right; }

/* ---- entrance reveal (offers.js adds .is-in) ---------------------------- */
.odp-anim .odp-reveal {
  opacity: 0; transform: translateY(20px);
}
.odp-anim .odp-reveal.is-in { opacity: 1; transform: none; }
.odp-reveal {
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 1199px) {
  .odp-layout { grid-template-columns: minmax(0, 1fr) 310px; }
}
@media (max-width: 991px) {
  .odp { padding: 46px 0 54px; }
  .odp-hero { grid-template-columns: 1fr; }
  /* photo above the panel reads better than a squeezed side column */
  .odp-hero__media { order: -1; min-height: 210px; }
  .odp-hero__media::after {
    background: linear-gradient(180deg, rgba(10,42,85,.15) 0%, rgba(10,42,85,.75) 100%);
  }
  .odp-layout { grid-template-columns: 1fr; }
  /* the booking card stops being sticky and becomes a normal block */
  .odp-aside { position: static; }
  .odp-book { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
  .odp-book__media { height: 100%; min-height: 190px; }
}
@media (max-width: 767px) {
  .odp { padding: 36px 0 44px; }
  .odp-hero__foot { gap: 16px; }
  .odp-book { grid-template-columns: 1fr; }
  .odp-book__media { height: 170px; min-height: 0; }
  .odp-cta { text-align: left; }
  .odp-cta .odp-btn { width: 100%; }
}
@media (max-width: 575px) {
  .odp-section { margin-bottom: 32px; }
  .odp-hero__body { padding: 22px 20px 24px; }
  .odp-hero__foot { align-items: flex-start; flex-direction: column; }
  .odp-hero__foot .odp-btn { width: 100%; }
  .odp-facts { grid-template-columns: 1fr; }
  .odp-includes { grid-template-columns: 1fr; }
  .odp-tier { flex-direction: column; align-items: flex-start; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .odp-anim .odp-reveal, .odp-reveal { opacity: 1; transform: none; transition: none; }
  .odp-fact, .odp-inc, .odp-btn, .odp-tier { transition: none; }
  .odp-fact:hover, .odp-inc:hover, .odp-btn:hover { transform: none; }
  .odp-btn:hover i { transform: none; }
}

/* Footer / contact: one line per country phone number.
   The theme styled .trv-contact as a 30px Kaushan Script flourish, which suited
   a single short number. Two labelled numbers in that face wrapped and swamped
   the column, so they use the same size/face as the email and address rows and
   keep only the amber accent colour. */
.trv-contact-numbers a { display: block; }
.trv-contact-numbers a + a { margin-top: 6px; }
.widget_address li .trv-contact-numbers span.trv-contact {
  font-family: "Figtree", sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #F5A524;
  line-height: 1.45;
}

/* ===== Contact system =====================================================
   Header strip, footer contact groups, contact-page cards and the mobile
   floating buttons all share these primitives. Every number is rendered from
   the single CONTACTS structure in build.py, so nothing here hardcodes one. */
.sk-links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.sk-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Figtree", sans-serif;
  font-size: .93rem; font-weight: 600; line-height: 1.35;
  color: inherit; text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.sk-link i { font-size: 1rem; flex: 0 0 auto; }
.sk-link--tel i { color: #0EA5E9; }
.sk-link--wa i { color: #25D366; }
.sk-link:hover, .sk-link:focus-visible { color: #F5A524; }
.sk-link:focus-visible { outline: 2px solid rgba(14,165,233,.6); outline-offset: 3px; border-radius: 4px; }

/* ---- top contact bar (above the banner) --------------------------------
   The header is absolutely positioned over the banner at top:0, so it is
   offset by exactly this bar's height; both read from the same variable. */
:root { --sk-topbar-h: 44px; }
.sk-topbar {
  position: relative;
  z-index: 6;
  background: #0B1B2B;
  color: rgba(255,255,255,.9);
  font-family: "Figtree", sans-serif;
  font-size: .88rem;
  line-height: 1.3;
}
.sk-topbar__in {
  min-height: var(--sk-topbar-h);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 0;
}
.sk-topbar__ico {
  width: 27px; height: 27px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(56,189,248,.55);
  color: #38BDF8; font-size: .82rem;
  margin-right: 2px;
}
.sk-topbar__item {
  color: rgba(255,255,255,.9); text-decoration: none; white-space: nowrap;
  transition: color .2s ease;
}
.sk-topbar__item b { font-weight: 700; color: #FFFFFF; }
.sk-topbar__item:hover, .sk-topbar__item:focus-visible { color: #F5A524; }
.sk-topbar__item:focus-visible { outline: 2px solid rgba(56,189,248,.7); outline-offset: 3px; border-radius: 3px; }
.sk-topbar__item--wa { display: inline-flex; align-items: center; gap: 6px; }
.sk-topbar__item--wa i { color: #25D366; font-size: 1rem; }
.sk-topbar__sep { color: rgba(255,255,255,.28); }

/* push the overlaid header (and its logo) below the bar */
.page-wraper header.site-header { top: var(--sk-topbar-h); }

/* Client request: no contact bar on tablets and phones — the fixed call and
   WhatsApp buttons cover contact there, and the bar cost two wrapped lines at
   the top of every page. Zeroing the variable also removes the header offset
   that the bar's height creates, so no empty strip is left behind. */
@media (max-width: 991px) {
  :root { --sk-topbar-h: 0px; }
  .sk-topbar { display: none; }
}

/* ---- header strip (desktop only) --------------------------------------- */
.sk-head-contact { display: flex; align-items: center; gap: 22px; }
.sk-head-contact__item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: "Figtree", sans-serif;
  font-size: .92rem; font-weight: 600; white-space: nowrap;
  color: #FFFFFF; text-decoration: none;
  transition: color .2s ease;
}
.sk-head-contact__item b { font-weight: 800; }
.sk-head-contact__item i { font-size: 1.05rem; color: #0EA5E9; }
.sk-head-contact__item--wa i { color: #25D366; }
.sk-head-contact__item:hover, .sk-head-contact__item:focus-visible { color: #F5A524; }
.sk-head-contact__item:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 3px; border-radius: 4px; }
/* below the desktop nav breakpoint the floating buttons take over */
@media (max-width: 1199px) { .sk-head-contact { display: none; } }

/* ---- footer: flat navy, no photographic background ----------------------
   The theme painted a palm-tree pattern (ftr-dark-bg.png) behind the footer,
   which fought with the contact details for attention. A solid navy reads as
   a proper site footer and lets the columns align cleanly. */
.site-footer.footer-dark {
  background-image: none;
  background-color: #0A2A55;
}
.site-footer.footer-dark .footer-bottom { background-color: rgba(0,0,0,.18); }
.site-footer .footer-top { padding-top: 62px; }

/* ---- footer contact groups --------------------------------------------- */
.sk-contact-widget .widget-title { margin-bottom: 18px; }
.sk-branches { list-style: none; margin: 0; padding: 0; }
.sk-branch + .sk-branch {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.sk-branch__name {
  font-family: "Figtree", sans-serif;
  font-size: 1rem; font-weight: 700; color: #FFFFFF; margin-bottom: 3px;
}
.sk-branch__addr {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.72);
  margin-bottom: 8px;
}
.sk-branch__addr i { color: #F5A524; font-size: .95rem; margin-top: 2px; flex: 0 0 auto; }
.sk-branch .sk-link { color: rgba(255,255,255,.9); }
/* the sky-blue tel icon is invisible on the sky-blue footer */
.sk-branch .sk-link--tel i { color: #FFFFFF; }

/* ---- footer CTA column -------------------------------------------------- */
.sk-cta-note {
  font-size: .92rem; line-height: 1.65; color: rgba(255,255,255,.72);
  margin: 0 0 18px;
}
.sk-fbtn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 12px 18px; margin-bottom: 11px;
  border-radius: 10px;
  font-family: "Figtree", sans-serif;
  font-size: .95rem; font-weight: 700; text-align: center; text-decoration: none;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, background-color .22s ease;
}
.sk-fbtn--primary {
  background: linear-gradient(135deg, #38BDF8 0%, #0284C7 100%); color: #FFFFFF;
  box-shadow: 0 12px 24px -12px rgba(2,132,199,.85);
}
.sk-fbtn--wa {
  background: linear-gradient(135deg, #F5A524 0%, #E08C00 100%); color: #2A1B00;
  box-shadow: 0 12px 24px -12px rgba(245,165,36,.85);
}
.sk-fbtn i { font-size: 1.05rem; }
.sk-fbtn:hover, .sk-fbtn:focus-visible { transform: translateY(-2px); }
.sk-fbtn--primary:hover, .sk-fbtn--primary:focus-visible { color: #FFFFFF; }
.sk-fbtn--wa:hover, .sk-fbtn--wa:focus-visible { color: #2A1B00; }
.sk-fbtn:focus-visible { outline: 3px solid rgba(255,255,255,.75); outline-offset: 3px; }

/* ---- contact page cards ------------------------------------------------- */
.sk-contact-section { padding: 0 0 90px; background: #FFFFFF; }
.sk-contact-section .section-head { margin-bottom: 30px; }
.sk-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.sk-card {
  padding: 24px 24px 22px;
  border: 1px solid #E4EBF3;
  border-radius: 16px;
  background: linear-gradient(160deg, #FFFFFF 0%, #F7FAFE 100%);
  box-shadow: 0 16px 34px -26px rgba(6,30,62,.5);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.sk-card:hover {
  transform: translateY(-4px); border-color: #CFE0F2;
  box-shadow: 0 26px 46px -26px rgba(6,30,62,.6);
}
.sk-card__head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 14px; }
.sk-card__ico {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(140deg, rgba(14,165,233,.16), rgba(18,87,159,.12));
  color: #12579F; font-size: 1.15rem;
}
.sk-card__title {
  font-family: "Figtree", sans-serif;
  font-size: 1.14rem; font-weight: 800; color: #0F2942; margin: 0 0 2px;
}
.sk-card__sub {
  font-family: "Figtree", sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #8496A8;
}
.sk-card__addr {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .93rem; line-height: 1.6; color: #4A5A6B;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid #E4EBF3;
}
.sk-card__addr i { color: #F5A524; font-size: 1rem; margin-top: 3px; flex: 0 0 auto; }
.sk-card .sk-links { flex-direction: column; gap: 9px; }
.sk-card .sk-link { color: #0F2942; }

/* ---- fixed call / WhatsApp buttons (right, vertically centred) ----------
   Shown on every breakpoint at the client's request, kept compact so they
   never dominate the page or sit over a CTA. */
.sk-float {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1040;           /* above page content, below modals/offcanvas */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sk-float__btn {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  color: #FFFFFF; font-size: 1.22rem; text-decoration: none;
  box-shadow: 0 10px 22px -8px rgba(4,24,52,.55);
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease;
}
.sk-float__btn--call { background: linear-gradient(140deg, #38BDF8 0%, #0284C7 100%); }
.sk-float__btn--wa   { background: linear-gradient(140deg, #4ADE80 0%, #16A34A 100%); }
.sk-float__btn:active { transform: scale(.94); }
.sk-float__btn:hover, .sk-float__btn:focus-visible {
  color: #FFFFFF; transform: translateX(-3px);
  box-shadow: 0 16px 28px -10px rgba(4,24,52,.65);
}
.sk-float__btn:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 2px; }
/* label kept for screen readers / tooltips only */
.sk-float__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 575px) {
  .sk-float { right: 10px; gap: 9px; }
  .sk-float__btn { width: 43px; height: 43px; font-size: 1.12rem; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .sk-link, .sk-head-contact__item, .sk-card, .sk-float__btn, .sk-fbtn { transition: none; }
  .sk-fbtn:hover { transform: none; }
  .sk-card:hover, .sk-float__btn:hover, .sk-float__btn:active { transform: none; }
}

/* ===== Footer height =======================================================
   With the "Follow Instagram" strip removed the footer only carries the brand
   blurb, two short link columns and contact details, so the theme's 80px top /
   40px bottom padding left a lot of dead space. Tightened, with the widgets'
   own bottom margins trimmed to match. */
.footer-dark .footer-top { padding: 48px 0 0; }
.site-footer .footer-top .widget { margin-bottom: 26px; }
.site-footer .widget_about p { margin-bottom: 14px; }
.footer-dark .footer-bottom { padding: 18px 0; }
/* The circular brand mark was rendering at 193px — far larger than a footer
   needs, and the single biggest contributor to the old footer height. */
.site-footer .logo-footer { margin-bottom: 20px; }
.site-footer .logo-footer img { max-width: 112px; height: auto; }
.site-footer .widget_about .social-icons { margin-top: 12px; }
@media (max-width: 991px) {
  .footer-dark .footer-top { padding: 36px 0 0; }
  .site-footer .footer-top .widget { margin-bottom: 20px; }
  .site-footer .logo-footer img { max-width: 96px; }
}

/* ===== Tour-category slider: show 3 cards across =====
   #module is a flex row where an empty .trv-feature panel used to hold the
   hover title/description/"View More" button. That content is gone (no tour
   detail pages exist), so the panel was just reserving ~1/3 of the width and
   squeezing the carousel — leaving a blank gap on the left. Collapse the empty
   panel and let the slider use the full row so three cards fit properly. */
.trv-tour-category-section #module .trv-feature { display: none; }
.trv-tour-category-section #module .swiper { flex: 1 1 auto; min-width: 0; padding-left: 0; }

/* ===== No pale strip above the banner =====
   The header is absolutely positioned over the banner, so any space pushed in
   above it (most commonly the WordPress admin bar when you're logged in, or a
   plugin notice) exposed the body's light background as a white/cyan band.
   Tinting the page shell the same deep sky as the banner makes that impossible
   — the banner now reads as edge-to-edge in every state. */
.page-wraper { background-color: #0C4A6E; }
.page-content { background-color: #FFFFFF; }
.wt-bnr-inr { margin-top: 0; }

/* WordPress puts bare classes on <body> (`page` on every Page, `search` on
   results), and the bundled Travlla stylesheet uses those same names for
   unrelated components — `.page` is its pagination block and carries
   `margin-top: 40px`. On WordPress that rule matched <body>, pushing the whole
   page down and opening a 40px band of body background above the banner on the
   home page and every inner page. (It never showed on the static build, which
   has no such body classes.) Scope those component styles away from <body>;
   `body.page` outranks the bare `.page`. */
body.page { margin-top: 0; align-items: normal; }
body.search { position: static; }

/* ===== Buttons ============================================================
   The theme's .site-button was a flat sky-blue pill with BLACK text at weight
   500 and no elevation, which read as an unstyled default. Restyled for a
   premium feel: a deep-blue gradient with white bold type (white on #0284C7 is
   ~4.3:1, versus ~2.9:1 on the original #0EA5E9), a brand-tinted shadow, a
   fine inner highlight, and a lift on hover. The theme's diagonal "shine"
   sweep (.butn-bg-shape:after) is left intact and still runs on hover. */
.site-button {
  background-color: #0284C7;
  background-image: linear-gradient(135deg, #0EA5E9 0%, #0284C7 52%, #0369A1 100%);
  color: #FFFFFF;
  font-family: "Figtree", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .015em;
  padding: 14px 34px;
  border: 0;
  border-radius: 999px;
  box-shadow: 0 12px 26px -12px rgba(2,132,199,.75),
              inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .28s cubic-bezier(.2,.7,.2,1),
              box-shadow .28s ease, filter .28s ease, background-color .28s ease;
}
.site-button:hover,
.site-button:active,
.site-button:focus-visible {
  color: #FFFFFF;
  transform: translateY(-3px);
  box-shadow: 0 20px 38px -14px rgba(2,132,199,.85),
              inset 0 1px 0 rgba(255,255,255,.32);
  filter: saturate(1.06);
}
.site-button:active { transform: translateY(-1px); }
.site-button:focus-visible { outline: 3px solid rgba(245,165,36,.7); outline-offset: 3px; }

/* light pill for use on dark or photographic grounds */
.site-button.white-bg {
  background-image: none;
  background-color: #FFFFFF;
  color: #0C4A6E;
  box-shadow: 0 12px 26px -14px rgba(8,47,73,.55),
              inset 0 1px 0 rgba(255,255,255,.9);
}
.site-button.white-bg:hover,
.site-button.white-bg:focus-visible {
  background-color: #F5A524;
  color: #2A1B00;
}

/* secondary / outline */
.site-button.outline {
  background-image: none;
  background-color: transparent;
  color: #0284C7;
  border: 2px solid rgba(2,132,199,.35);
  box-shadow: none;
  font-weight: 700;
  padding: 12px 30px;
}
.site-button.outline:hover,
.site-button.outline:focus-visible {
  color: #0369A1;
  border-color: #0284C7;
  background-color: rgba(2,132,199,.06);
  box-shadow: 0 12px 24px -16px rgba(2,132,199,.7);
}
.site-button.outline.white-txt { color: #FFFFFF; border-color: rgba(255,255,255,.55); }
.site-button.outline.white-txt:hover { color: #FFFFFF; border-color: #FFFFFF; background-color: rgba(255,255,255,.14); }

@media (prefers-reduced-motion: reduce) {
  .site-button, .site-button:hover, .site-button:active { transition: none; transform: none; }
}

/* ===== Hero flight-path artwork =========================================
   .media1 (the dotted route graphic) is absolutely positioned and sized in %,
   but its parent .trv-banner-2-media took its width from .media2 — the traveller
   cut-out. With her removed the parent collapsed to 0 wide, so the route line
   rendered at 0x0 and vanished. The parent is given the hero's own box and the
   graphic an explicit size, so it no longer depends on a sibling. */
.trv-banner-2-wrap .trv-banner-2-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;                     /* behind the headline, with the aircraft */
}
.trv-banner-2-wrap .trv-banner-2-media .media1 {
  display: block;
  position: absolute;
  /* The route graphic reads plane (top-left) -> dashes trailing to the
     bottom-right, so it is sized and placed for the dashes to finish level
     with the end of the word "Your" in the headline above the main title. */
  top: 19%;
  left: 9%;
  right: auto;
  width: clamp(180px, 20vw, 300px);
  opacity: .9;
}
.trv-banner-2-wrap .trv-banner-2-media .media1 img { width: 100%; height: auto; }
@media (max-width: 991px) {
  .trv-banner-2-wrap .trv-banner-2-media .media1 { top: 12%; left: 50%; transform: translateX(-50%); width: 62%; }
}
@media (max-width: 575px) {
  .trv-banner-2-wrap .trv-banner-2-media .media1 { display: none; }
}