/*==============================================================
  FlyTravio brand skin for the Tourm template
  ---------------------------------------------------------------
  Loaded AFTER style.css. Everything here is an override or a small
  set of extra components; the base template is untouched.
==============================================================*/

:root {
  /* Brand palette taken from the FlyTravio logo mark */
  --ft-crimson: #E5285C;
  --ft-crimson-dark: #C21B4A;
  --ft-wine: #6D213D;
  --ft-ink: #111827;
  --ft-ink-soft: #5C6474;
  --ft-blush: #FDEEF3;
  --ft-sand: #FBF7F4;

  /* Re-point the template's own variables at the brand palette */
  --theme-color: #E5285C;
  --title-color: #111827;
  --body-color: #5C6474;
  --smoke-color: #FDF2F5;
  --smoke-color2: #F6F4F2;
  --hero-overlay: rgba(17, 24, 39, .45);

  /* The theme's accent face is Montez (a script). Point it at the heading
     face so nothing on the page renders in a cursive. */
  --style-font: "Manrope", sans-serif;
}

/*--------------------------------------------------------------
  0. Section eyebrows — were 40px Montez script, now a set label
--------------------------------------------------------------*/
.sub-title {
  font-family: var(--title-font);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ft-crimson);
  margin-bottom: 14px;
}

.title-area .sub-title { margin-bottom: 12px; }

.hero-style1 .sub-title { margin-bottom: 18px; }

@media (max-width: 480px) {
  .sub-title {
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 1.4px;
  }
}

@media (max-width: 375px) {
  .sub-title { font-size: 13px; line-height: 1.5; }
}

/*--------------------------------------------------------------
  1. Logo sizing — the FlyTravio wordmark is wider than Tourm's
--------------------------------------------------------------*/
.header-logo img,
.mobile-logo img,
.about-logo img,
.preloader-inner img {
  width: auto;
}

.header-logo img { height: 40px; }
.mobile-logo img { height: 38px; }
.th-widget-about .about-logo img { height: 40px; }
.preloader-inner img { height: 48px; }

@media (max-width: 991px) {
  .header-logo img { height: 34px; }
}

/*--------------------------------------------------------------
  1b. Fit the theme's crimson logo block to the FlyTravio wordmark
--------------------------------------------------------------
  logo_bg_mask.png is 374x92 and is stretched to the block (mask-size:
  100% 100%). Its right edge tapers: the block is full height only to
  ~73% of its width, and the TOP corner is the first thing the curve eats.
  Tourm's own lockup is 197px wide so 19% was enough; the FlyTravio
  wordmark is wider, so the ".com" ran into the taper.

  Sizing rule: flat zone (0.73 x width) must clear the logo's right edge
  plus breathing room. Widths below are set in px against the measured
  logo box at each breakpoint rather than as a % of the viewport, so the
  lockup can't collide with the curve at any width.
--------------------------------------------------------------*/
/* The theme's block is absolutely positioned at the viewport's left edge and
   sized as a % of it, while the logo sits in a centred container — so as the
   viewport narrows the logo drifts right into the taper. Rebuild the same
   shape anchored to the logo itself so the two can never separate. */
.header-layout1 .logo-bg { display: none; }

.header-layout1 .header-logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 92px;
  padding-left: 22px;
  padding-right: 128px;
  --ft-taper: 110px;
}

/* NO CSS MASKS. The shape is two plain boxes: a solid crimson slab running
   off the left edge, and a pre-baked crimson PNG with an alpha channel for
   the tapered end. Nothing here depends on mask-image, mask-composite or
   multi-layer mask support, so it renders identically everywhere. */
.header-layout1 .header-logo:before,
.header-layout1 .header-logo:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
}

/* the flat slab */
.header-layout1 .header-logo:before {
  left: -100vw;
  right: var(--ft-taper, 110px);
  background-color: var(--ft-crimson);
}

/* the curved end. The art is 120 source px: ~20px flat lead-in then the
   curve, so the wordmark still clears it inside the padding below. */
.header-layout1 .header-logo:after {
  right: 0;
  width: var(--ft-taper, 110px);
  background-image: url(../img/flytravio/logo-shape-end.png);
  background-position: left center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

@media (max-width: 1199px) {
  .header-layout1 .header-logo {
    min-height: 80px;
    padding-right: 118px;
    --ft-taper: 100px;
  }
}

@media (max-width: 575px) {
  .header-layout1 .header-logo {
    padding-left: 12px;
    padding-right: 100px;
    --ft-taper: 84px;
  }
}


/*--------------------------------------------------------------
  1c. Button arrows — inline the mask art, don't fetch it
--------------------------------------------------------------
  Tourm paints the little arrow on every .th-icon button with
  `mask-image: url(../img/icon/arrow-right*.svg)` and a background
  colour showing through. When that SVG fails to load the mask
  resolves to empty and the element renders FULLY TRANSPARENT — the
  arrow just isn't there. Opening the page from disk (file://) is
  enough to do it: Chromium treats the page as an opaque origin and
  refuses the external SVG used as a mask.

  Same class of bug as the logo block, which is why both went at once.
  Inlining the art as a data: URI removes the fetch entirely, so the
  arrows paint over http://, over file://, and in every browser.
--------------------------------------------------------------*/
.th-btn.th-icon:after {
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIuMTIyMDdDMTIgMy4xNjYzNyAxMy4wMzQ5IDQuNzI5MDcgMTQuMDgxMSA2LjA0MTQ3QzE1LjQyODMgNy43MzExNyAxNy4wMzYxIDkuMjA3MjcgMTguODgxIDEwLjMzNDNDMjAuMjYzMSAxMS4xNzgyIDIxLjk0MTQgMTEuOTg4MyAyMy4yODk2IDExLjk4ODNNMTIgMjEuODc4OUMxMiAyMC44MzQ2IDEzLjAzNDkgMTkuMjcxOSAxNC4wODExIDE3Ljk1OTVDMTUuNDI4MyAxNi4yNjk5IDE3LjAzNjEgMTQuNzkzNyAxOC44ODEgMTMuNjY2N0MyMC4yNjMxIDEyLjgyMjggMjEuOTQxNCAxMi4wMTI3IDIzLjI4OTYgMTIuMDEyN00yMy4yODk2IDEyLjAwMDVIMC43MTA0MDMiIHN0cm9rZT0id2hpdGUiLz4KPC9zdmc+Cg==);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIuMTIyMDdDMTIgMy4xNjYzNyAxMy4wMzQ5IDQuNzI5MDcgMTQuMDgxMSA2LjA0MTQ3QzE1LjQyODMgNy43MzExNyAxNy4wMzYxIDkuMjA3MjcgMTguODgxIDEwLjMzNDNDMjAuMjYzMSAxMS4xNzgyIDIxLjk0MTQgMTEuOTg4MyAyMy4yODk2IDExLjk4ODNNMTIgMjEuODc4OUMxMiAyMC44MzQ2IDEzLjAzNDkgMTkuMjcxOSAxNC4wODExIDE3Ljk1OTVDMTUuNDI4MyAxNi4yNjk5IDE3LjAzNjEgMTQuNzkzNyAxOC44ODEgMTMuNjY2N0MyMC4yNjMxIDEyLjgyMjggMjEuOTQxNCAxMi4wMTI3IDIzLjI4OTYgMTIuMDEyN00yMy4yODk2IDEyLjAwMDVIMC43MTA0MDMiIHN0cm9rZT0id2hpdGUiLz4KPC9zdmc+Cg==);
}

.blog-box .th-btn:after {
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMS40MTQwNkM4IDIuMTEwMjYgOC42ODk5NCAzLjE1MjA2IDkuMzg3NCA0LjAyN0MxMC4yODU1IDUuMTUzNDYgMTEuMzU3NCA2LjEzNzUzIDEyLjU4NzMgNi44ODg4NkMxMy41MDg3IDcuNDUxNDYgMTQuNjI3NiA3Ljk5MTUzIDE1LjUyNjQgNy45OTE1M004IDE0LjU4NTNDOCAxMy44ODkxIDguNjg5OTQgMTIuODQ3MyA5LjM4NzQgMTEuOTcyM0MxMC4yODU1IDEwLjg0NTkgMTEuMzU3NCA5Ljg2MTggMTIuNTg3MyA5LjExMDQ2QzEzLjUwODcgOC41NDc4NiAxNC42Mjc2IDguMDA3OCAxNS41MjY0IDguMDA3OE0xNS41MjY0IDcuOTk5NjZIMC40NzM2MDIiIHN0cm9rZT0iIzExM0Q0OCIvPgo8L3N2Zz4K);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMS40MTQwNkM4IDIuMTEwMjYgOC42ODk5NCAzLjE1MjA2IDkuMzg3NCA0LjAyN0MxMC4yODU1IDUuMTUzNDYgMTEuMzU3NCA2LjEzNzUzIDEyLjU4NzMgNi44ODg4NkMxMy41MDg3IDcuNDUxNDYgMTQuNjI3NiA3Ljk5MTUzIDE1LjUyNjQgNy45OTE1M004IDE0LjU4NTNDOCAxMy44ODkxIDguNjg5OTQgMTIuODQ3MyA5LjM4NzQgMTEuOTcyM0MxMC4yODU1IDEwLjg0NTkgMTEuMzU3NCA5Ljg2MTggMTIuNTg3MyA5LjExMDQ2QzEzLjUwODcgOC41NDc4NiAxNC42Mjc2IDguMDA3OCAxNS41MjY0IDguMDA3OE0xNS41MjY0IDcuOTk5NjZIMC40NzM2MDIiIHN0cm9rZT0iIzExM0Q0OCIvPgo8L3N2Zz4K);
}

.tour-box .tour-action .th-btn:after,
.tour-card .tour-action .th-btn:after,
.destination-box .th-btn:after {
  -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMC40MTQwNjJDOCAxLjExMDI2IDguNjg5OTQgMi4xNTIwNiA5LjM4NzQgMy4wMjdDMTAuMjg1NSA0LjE1MzQ2IDExLjM1NzQgNS4xMzc1MyAxMi41ODczIDUuODg4ODZDMTMuNTA4NyA2LjQ1MTQ2IDE0LjYyNzYgNi45OTE1MyAxNS41MjY0IDYuOTkxNTNNOCAxMy41ODUzQzggMTIuODg5MSA4LjY4OTk0IDExLjg0NzMgOS4zODc0IDEwLjk3MjNDMTAuMjg1NSA5Ljg0NTkzIDExLjM1NzQgOC44NjE4IDEyLjU4NzMgOC4xMTA0NkMxMy41MDg3IDcuNTQ3ODYgMTQuNjI3NiA3LjAwNzggMTUuNTI2NCA3LjAwNzhNMTUuNTI2NCA2Ljk5OTY2SDAuNDczNjAyIiBzdHJva2U9IndoaXRlIi8+Cjwvc3ZnPgo=);
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNiAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMC40MTQwNjJDOCAxLjExMDI2IDguNjg5OTQgMi4xNTIwNiA5LjM4NzQgMy4wMjdDMTAuMjg1NSA0LjE1MzQ2IDExLjM1NzQgNS4xMzc1MyAxMi41ODczIDUuODg4ODZDMTMuNTA4NyA2LjQ1MTQ2IDE0LjYyNzYgNi45OTE1MyAxNS41MjY0IDYuOTkxNTNNOCAxMy41ODUzQzggMTIuODg5MSA4LjY4OTk0IDExLjg0NzMgOS4zODc0IDEwLjk3MjNDMTAuMjg1NSA5Ljg0NTkzIDExLjM1NzQgOC44NjE4IDEyLjU4NzMgOC4xMTA0NkMxMy41MDg3IDcuNTQ3ODYgMTQuNjI3NiA3LjAwNzggMTUuNTI2NCA3LjAwNzhNMTUuNTI2NCA2Ljk5OTY2SDAuNDczNjAyIiBzdHJva2U9IndoaXRlIi8+Cjwvc3ZnPgo=);
}

/*--------------------------------------------------------------
  2. Header polish
--------------------------------------------------------------*/
.header-top {
  background-color: var(--ft-ink);
}

/* The theme's 1px #E1E4E5 rule under the top bar reads as a grey seam against
   the dark ink background — drop it. */
.header-layout1 .header-top {
  border-bottom: 0;
}

.header-top .header-links li,
.header-top .header-links li a,
.header-top .header-links li span,
.header-top .header-links li i {
  color: #C7CCD6;
}

.header-top .header-links li a:hover,
.header-top .header-links li a:hover i {
  color: #fff;
}

.header-top .header-links li i {
  color: var(--ft-crimson);
}

/* India | Australia region switch in the top bar */
.ft-region {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: 22px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.ft-region a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #C7CCD6;
  white-space: nowrap;
  transition: color .3s ease;
}

.ft-region a:hover,
.ft-region a.is-active { color: #fff; }

.ft-region a.is-active { font-weight: 600; }

.ft-region .ft-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}

.ft-region .ft-sep { color: rgba(255, 255, 255, .28); }

@media (max-width: 575px) {
  .ft-region { margin-right: 12px; font-size: 13px; }
  .ft-region .ft-label { display: none; }
}

/*--------------------------------------------------------------
  3. Hero — a readable scrim over the photography
--------------------------------------------------------------*/

/* The slider sizes itself to the TALLEST slide, but each slide is only as tall
   as its own copy — so a slide with a shorter headline left a band of bare page
   below its photo. Swiper puts height:100% on the slides, and that percentage
   (unresolvable against an auto-height wrapper) is enough to suppress flex
   stretch — hence height:auto here. */
.hero-1 .swiper-wrapper { align-items: stretch; }

.hero-1 .swiper-slide {
  height: auto;
  align-self: stretch;
  display: flex;
}

.hero-1 .hero-inner {
  position: relative;
  flex: 1 0 100%;
}

/* Belt and braces: nothing may make the hero photo tile or letterbox. */
.hero-1 .th-hero-bg {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hero-1 .th-hero-bg:before {
  background: linear-gradient(100deg,
      rgba(17, 24, 39, .86) 0%,
      rgba(17, 24, 39, .62) 40%,
      rgba(17, 24, 39, .18) 74%,
      rgba(109, 33, 61, .38) 100%);
}

.hero-style1 .sub-title.style1 {
  color: #fff;
}

.hero-title { text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }

/* Safety net: the theme's entry animation leaves these at opacity 0 until it
   runs. If it never runs (reduced motion, throttled tab, animation blocked)
   the hero would read as empty — so the resting state is visible and
   fill-mode: both keeps the 0% keyframe during the delay, avoiding a flash. */
.hero-style1 [data-ani] {
  opacity: 1;
  animation-fill-mode: both;
}

.hero-style1 .ft-hero-text {
  color: rgba(255, 255, 255, .88);
  max-width: 620px;
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 34px;
}

@media (max-width: 767px) {
  .hero-style1 .ft-hero-text { font-size: 16px; }
}

/*--------------------------------------------------------------
  3b. Section backgrounds must cover, not sit at natural size
--------------------------------------------------------------
  Tourm's .bg-top-center sets `background-size: auto` and only switches to
  cover above 1930px, because its own backgrounds were exact-size artwork.
  With real photography that leaves a bare band wherever the section is
  taller than the image (the contact band was 746px tall against a 650px
  photo). Force cover on the three sections carrying photos.
--------------------------------------------------------------*/
.category-area,
.tour-area3,
.contact-area3 {
  background-size: cover;
  background-repeat: no-repeat;
}

.tour-area3,
.contact-area3 { background-position: center center; }

.category-area { background-position: top center; }

/*--------------------------------------------------------------
  3c. Hero slider arrows
--------------------------------------------------------------
  The theme hides EVERY .slider-arrow below 1500px with a !important rule,
  so on a normal laptop the rotated control rendered as two stray dashes
  (the pagination) and no buttons at all. Bring the hero's arrows back and
  give them a size that works at those widths.
--------------------------------------------------------------*/
@media (max-width: 1500px) {
  .hero-1 .th-swiper-custom .slider-arrow {
    display: inline-flex !important;
  }
}

/* Un-rotate the control and sit it flat in the bottom-right of the hero.
   The theme spins it -90deg into a vertical rail on the right edge, which
   only ever worked above 1500px where the arrows were visible. */
.hero-1 .th-swiper-custom {
  transform: none;
  top: auto;
  bottom: 190px;
  right: 60px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  width: auto;
}

.hero-1 .th-swiper-custom .slider-arrow {
  --icon-size: 52px;
  position: static;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  line-height: 1;
  background: rgba(17, 24, 39, .38);
  border: 1px solid rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  transition: background-color .3s ease, border-color .3s ease;
}

.hero-1 .th-swiper-custom .slider-arrow:hover {
  background: var(--ft-crimson);
  border-color: var(--ft-crimson);
}

/* The arrow art is drawn pointing up/down because the theme's rail is
   rotated. Now that the rail is flat, turn the glyphs to left/right. */
.hero-1 .th-swiper-custom .slider-arrow img {
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
}

.hero-1 .th-swiper-custom .slider-pagination { margin: 0; }

@media (max-width: 991px) {
  .hero-1 .th-swiper-custom {
    bottom: 150px;
    right: 24px;
    gap: 12px;
  }

  .hero-1 .th-swiper-custom .slider-arrow {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 575px) {
  .hero-1 .th-swiper-custom { display: none; }
}

/*--------------------------------------------------------------
  4. Trust strip under the booking bar
--------------------------------------------------------------*/
.ft-trust {
  padding: 46px 0 6px;
}

.ft-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.ft-trust-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid #EFE7EA;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(17, 24, 39, .05);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.ft-trust-card:hover {
  transform: translateY(-6px);
  border-color: var(--ft-crimson);
  box-shadow: 0 14px 34px rgba(229, 40, 92, .14);
}

.ft-trust-icon {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ft-blush);
  color: var(--ft-crimson);
  font-size: 20px;
}

.ft-trust-card h4 {
  font-size: 18px;
  margin: 0 0 3px;
  color: var(--ft-ink);
  line-height: 1.3;
}

.ft-trust-card p {
  margin: 0;
  font-size: 14px;
  color: var(--ft-ink-soft);
  line-height: 1.5;
}

@media (max-width: 991px) { .ft-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .ft-trust-grid { grid-template-columns: 1fr; } }

/*--------------------------------------------------------------
  5. Destination cards — add the guest counter + visa note
--------------------------------------------------------------*/
.destination-content .ft-dest-meta {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, .78);
  margin-top: 4px;
}

.ft-dest-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 3;
  background: rgba(17, 24, 39, .78);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2px;
  padding: 6px 12px;
  border-radius: 40px;
}

/*--------------------------------------------------------------
  6. Package (tour-box) extras — ribbon, route, strike price
--------------------------------------------------------------*/
.tour-box_img { position: relative; }

.ft-ribbon {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: var(--ft-crimson);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(229, 40, 92, .35);
}

.ft-nights {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(255, 255, 255, .94);
  color: var(--ft-ink);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 40px;
}

.ft-route {
  display: block;
  font-size: 14px;
  color: var(--ft-ink-soft);
  margin: -4px 0 10px;
  line-height: 1.5;
}

.ft-route i {
  color: var(--ft-crimson);
  margin-right: 6px;
  font-size: 13px;
}

.tour-box_price .ft-was {
  font-size: 15px;
  font-weight: 400;
  color: #9AA1AE;
  text-decoration: line-through;
  margin-left: 8px;
}

.ft-booked {
  display: block;
  font-size: 13px;
  color: var(--ft-crimson);
  font-weight: 500;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed #EADFE3;
}

/*--------------------------------------------------------------
  7. Destination tabs above the package grid
--------------------------------------------------------------*/
.tour-tabs .nav-link.th-btn {
  background-color: #fff;
  color: var(--ft-ink);
  border: 1px solid #EDE3E7;
}

.tour-tabs .nav-link.th-btn:before,
.tour-tabs .nav-link.th-btn:after { background-color: var(--ft-crimson); }

.tour-tabs .nav-link.th-btn.active {
  color: #fff;
  border-color: var(--ft-crimson);
}

/*--------------------------------------------------------------
  8. FAQ accordion
--------------------------------------------------------------*/
.accordion-card .accordion-button {
  color: var(--ft-ink);
}

.accordion-card .accordion-button:not(.collapsed) {
  color: var(--ft-crimson);
}

.ft-faq-list {
  margin: 10px 0 0;
  padding: 0 0 0 20px;
}

.ft-faq-list li {
  margin-bottom: 6px;
  color: var(--ft-ink-soft);
}

/*--------------------------------------------------------------
  9. Footer
--------------------------------------------------------------*/
.footer-wrapper .ft-office {
  margin-bottom: 22px;
}

.footer-wrapper .ft-office h4 {
  color: var(--ft-ink);
  font-size: 16px;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-wrapper .ft-office .ft-flag {
  width: 20px;
  height: 14px;
  border-radius: 2px;
}

.footer-wrapper .ft-office p {
  margin: 0 0 3px;
  font-size: 15px;
}

/*--------------------------------------------------------------
  9b. Testimonials — the theme hard-codes a cyan card, rebrand it
--------------------------------------------------------------*/
.testi-card {
  background: #fff;
  border: 1px solid #F2E4E9;
  box-shadow: 0 10px 34px rgba(17, 24, 39, .05);
}

.testi-card_desig { color: var(--ft-crimson); }

.testi-card_review i { color: #F5A623; }

/* Inactive cards get a soft crimson mark; the active card's badge turns
   crimson and the theme already inverts the glyph to white, so leave that
   one at full strength or it disappears into the badge. */
.testi-card-quote img { opacity: .5; }

.testiSlider1 .swiper-slide-active .testi-card-quote img { opacity: 1; }

/*--------------------------------------------------------------
  9c. Contact band — dark scrim so the white headline reads
--------------------------------------------------------------*/
.contact-area3 { position: relative; }

.contact-area3:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg,
      rgba(17, 24, 39, .88) 0%,
      rgba(17, 24, 39, .70) 34%,
      rgba(109, 33, 61, .42) 66%,
      rgba(17, 24, 39, .35) 100%);
  z-index: 0;
}

.contact-area3 > .container { position: relative; z-index: 2; }

/*--------------------------------------------------------------
  10. Demo banner — makes it obvious this is a design preview
--------------------------------------------------------------*/
.ft-demo-bar {
  background: var(--ft-wine);
  color: #F5DCE4;
  text-align: center;
  font-size: 13.5px;
  letter-spacing: .2px;
  padding: 9px 16px;
  position: relative;
  z-index: 60;
}

.ft-demo-bar strong { color: #fff; font-weight: 600; }

.ft-demo-bar .ft-build {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 9px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  vertical-align: 1px;
}

/*--------------------------------------------------------------
  11. Misc brand touch-ups
--------------------------------------------------------------*/
.th-btn.style3 { background-color: var(--ft-crimson); }

.category-card .box-title a:hover,
.tour-box .box-title a:hover,
.blog-box .box-title a:hover { color: var(--ft-crimson); }

.counter-card .box-number { color: var(--ft-crimson); }

/* The theme fills the counter discs with its old cyan tint */
.counter-card { background-color: var(--ft-blush); }

/* NB: .scroll-top:after IS the up-arrow glyph (content: "\f062"), not a
   backing plate — do not give it a background or the arrow disappears into
   it. The theme already colours the glyph and its ring with --theme-color. */

::selection { background-color: var(--ft-crimson); color: #fff; }