/**
* Template Name: Tour
* Template URL: https://bootstrapmade.com/tour-bootstrap-travel-website-template/
* Updated: Jul 01 2025 with Bootstrap v5.3.7
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

@charset "UTF-8";

/*--------------------------------------------------------------
# Custom Fonts (Brand Typography)
--------------------------------------------------------------*/
/* Cajamarca typography: Armonia Forte for headings, Inter for everything else.
   Armonia Forte is a single-weight display face (usWeightClass 900) with a
   matching italic, 389 glyphs, full Spanish accents. Its x-height is 0.70 of
   cap height against Inter's 0.75, so it sets tight and dark at large sizes
   and poorly at small ones: keep it off body copy, lists and form controls.
   There is one weight only. Never ask for a different number or the browser
   fakes it; both faces are declared at 400 and 700 pointing at the same file
   so existing font-weight rules resolve to the real thing. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Armonia Forte';
  src: url('/assets/fonts/ArmoniaForte.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Armonia Forte';
  src: url('/assets/fonts/ArmoniaForte-Italic.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* SFC La Pura, display face used ONLY for the header wordmark.
   UNICASE: lowercase letters draw the same shapes as capitals, so anything set
   in it reads as all-caps regardless of the source text. Fine for short titles,
   poor for full sentences, keep it off body copy and long subheadings.
   Single weight (400); do not ask for 700 or the browser fakes it. */
/* Ampersand-only face. Armonia Forte's own & is an outlier in an otherwise
   clean display face, so headings take that one glyph from Inter instead.
   unicode-range U+0026 is what scopes it: the browser uses this face only for
   the ampersand and every other character still comes from Armonia Forte, so
   the family can simply be prepended to --heading-font and no heading markup
   has to change. The src is the Inter file the page already loads for body
   text, so this costs no extra request. */
@font-face {
  font-family: 'Heading Ampersand';
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0026;
}

@font-face {
  font-family: 'SFC La Pura';
  src: url('/assets/fonts/SFCLaPura.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: 'Inter', system-ui, -apple-system, sans-serif;
  --heading-font: 'Heading Ampersand', 'Armonia Forte', system-ui, -apple-system, sans-serif;
  --nav-font: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #FCFBF9;
  /* Brand off-white (Pantone 7506 U), page background */
  --default-color: #111111;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #111111;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #00BCD4;
  /* Brand cyan (Pantone 3125 C), links, highlights, active states */
  --surface-color: #ffffff;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --btn-color: #C8860A;
  /* Brand gold (Pantone 138 C), primary call-to-action buttons */
  /* Gold-ish hover for buttons */

  /* Three-accent system. Cyan is --accent-color above; gold and red are given
     their own tokens so all three can carry equal weight across the site
     instead of cyan doing every job. --secondary-accent repeats the value of
     --btn-color on purpose: the button token is a role, this one is a palette
     slot, and they are free to diverge later. */
  --secondary-accent: #C8860A;
  /* Brand gold as a general accent, not only buttons */
  --tertiary-accent: #C0392B;
  /* Brand red as a decorative accent */
  --danger-color: #C0392B;
  /* Same red in its semantic role: errors, exclusions, prohibitions */

  --cian-light: color-mix(in srgb, var(--accent-color) 10%, white);
  --oro-light: color-mix(in srgb, var(--secondary-accent) 10%, white);
  --rojo-light: color-mix(in srgb, var(--tertiary-accent) 10%, white);
  /* 10% tints for badge and callout backgrounds */

  /* Darkened cyan, for grounds that need to be dark enough to carry white text
     while still reading as the brand's colour. Nine different hand-picked
     teals had grown across the site doing this job -- #0c3f47, #06272d,
     #0e3c45, #0b5560, #0f6f78, #00838f, #0d5c63, plus a navy (#1c3d5a) and a
     slate (#4b5563) that belonged to no palette at all. Deriving them from the
     accent keeps the family honest: change --accent-color and these follow. */
  --cian-dark: color-mix(in srgb, var(--accent-color), black 35%);
  --cian-deep: color-mix(in srgb, var(--accent-color), black 62%);
  --cian-deepest: color-mix(in srgb, var(--accent-color), black 80%);
  /* The same, on the other two accents */
  --oro-dark: color-mix(in srgb, var(--secondary-accent), black 25%);
  /* Was #A66F08, which carries white at 4.29:1 -- under AA, on every primary
     button's hover state on both the site and the editor. --oro-dark is the
     next step of the same gold, already declared below and already measured
     at 5.1:1, so the fix is a token this palette owns rather than a tenth
     hand-picked shade. Declared after --oro-dark on purpose: a custom
     property may reference one declared later in the same block, but reading
     it here in source order should not require knowing that. */
  --btn-hover-color: var(--oro-dark);
  --oro-deep: color-mix(in srgb, var(--secondary-accent), black 45%);
  --rojo-dark: color-mix(in srgb, var(--tertiary-accent), black 25%);
  /* Muted body text, the one the style guide already prescribes. It was being
     written as the raw #4b5563 (Tailwind's gray-600) in three page files. */
  --muted-color: color-mix(in srgb, var(--default-color) 70%, white);

  /* Inert greige. Five pages were writing #e7e2d8, #c9c3b7, #eceff1 and
     #d7dde2 as raw hexes for the same three jobs: the rule beside a panel,
     the inactive dot in a deck, and the inactive pill in a tab row. None of
     them is an accent, so none belongs to the three-accent palette; they are
     the brand ink pulled almost all the way to the page ground, which is why
     they looked like four slightly different colours. Mixed from the tokens
     so .dark-background sections can override them.
       --rule   the hairline a panel hangs off
       --inert  an inactive control that is still a control
       --inert-strong  the same, one step up, where it must read as pressable */
  --rule: color-mix(in srgb, var(--default-color) 12%, var(--background-color));
  --inert: color-mix(in srgb, var(--default-color) 26%, var(--background-color));
  --inert-strong: color-mix(in srgb, var(--default-color) 38%, var(--background-color));

  /* Minimum hit area for any control. WCAG 2.5.8 sets 24px as the AA floor;
     44px is the pointer-target size this site's own buttons already use, so
     it is the number the small controls are brought up to rather than the
     legal minimum. Applied as a hit area, never as a visual size: a dot stays
     8px to look at and 44px to press. */
  --tap-min: 44px;
  /* Every one of these is a ground for white text, so each is mixed past the
     point where #fff clears 4.5:1 against it. Measured: cian-dark 5.1,
     cian-deep 10.4, cian-deepest 16.0, oro-dark 5.1, oro-deep 7.9,
     rojo-dark 8.2. Re-measure before changing a percentage. */

  /* The same two colours in the opposite role: INK, for accent-coloured text
     sitting on the off-white ground or on white. The raw accents cannot do
     this job and were doing it anyway -- #00BCD4 as link text measures 2.3:1
     and #C8860A measures 3.1:1, both well under the 4.5:1 that body-sized text
     needs. Every "Read Guide", "View Hotel", "Open larger map" and every gold
     section label on the site was unreadable by that standard.

     These are not new colours. They are the existing darks, which the editor
     at public/admin/admin.css already uses for exactly this under the same two
     names. Measured on both light grounds: cian-ink 5.1 on white and 4.9 on
     the off-white, oro-ink 5.1 and 4.9, and oro-ink 4.6 on the cyan tint.
     Keep accent text on light grounds pointed at these; --accent-color and
     --secondary-accent stay the colours of fills, rules and dark grounds. */
  --cian-ink: var(--cian-dark);
  --oro-ink: var(--oro-dark);
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: rgba(255, 255, 255, 0.7);
  /* The default color of the main navmenu links */
  --nav-hover-color: #ffffff;
  /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff;
  /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff;
  /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #111111;
  /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: var(--accent-color);
  /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #FCFBF9;
  /* Brand off-white */
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #111111;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #000000;
  /* Slightly lighter navy */
  --contrast-color: #ffffff;
}

/* The ink tokens exist because the raw accents are too light to read on the
   off-white ground. On a dark ground the opposite is true: the raw gold
   measures 6.2:1 on #111 and the raw cyan 8.2:1, while the darks used as ink
   fall to about 1.1:1 and are effectively invisible. So inside a dark section
   the ink roles point back at the accents themselves, and anything written as
   var(--oro-ink) or var(--cian-ink) stays readable on both grounds without
   being scoped section by section.

   ONLY the ink roles. This rule must never redefine --default-color and the
   other ground tokens the way .dark-background does: .on-dark sections paint
   themselves with `style="background-color: var(--default-color)"`, so
   flipping that token on the same element turns the band's own background
   white and takes the whole section with it. */
.dark-background,
.on-dark {
  --cian-ink: var(--accent-color);
  --oro-ink: var(--secondary-accent);
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);  /* Armonia Forte */
}

/* Armonia Forte heading styles, display face, strong and characterful.
   Via --heading-font rather than naming the face directly, so headings pick up
   the ampersand-only override declared above. */
h1, h2, h3 {
  font-family: var(--heading-font);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 600;
  line-height: 1.25;
}

/* Body text stays on Inter. Armonia Forte is a single-weight display face at
   900, which reads as a slab in running text; it belongs in headings only. */
body,
p,
li,
span,
label,
input,
textarea,
select,
.form-control,
.form-select {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
}

/* Justify only long-form content, not cards, heroes, or CTAs */
.travel-tour-details .tour-overview p,
.travel-tour-details .tour-itinerary p,
.travel-tour-details .tour-start-times p,
.travel-about .content > p,
.timeline-milestone .milestone-content p {
  text-align: justify;
}

/* The timeline header is a centred block, and justify on a single centred line
   renders as plain left-aligned text -- which is how the lead under "Three
   Thousand Years in the Valley" was reading. It is a lead, not a column, so it
   takes centring and leaves the rule above to the long-form prose. */
.journey-timeline .timeline-header p {
  text-align: center;
}

/* Navbar links */
.navmenu a,
.navmenu li a {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
}

/* Buttons */
button,
.btn,
a.btn,
.btn-getstarted {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
}

/* Button hierarchy across the three accents: primary is gold (see --btn-color
   and the .btn-getstarted / .btn-book / .btn-explore rules), secondary is cyan,
   danger is red. These two are the system-level defaults; section-scoped rules
   with higher specificity, such as the ghost .btn-secondary inside
   .travel-tour-details .final-cta, deliberately keep their own treatment. */
.btn-secondary {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
}

.btn-secondary:hover {
  background: color-mix(in srgb, var(--accent-color) 80%, black);
  color: var(--contrast-color);
}

.btn-danger {
  background: var(--danger-color);
  color: var(--contrast-color);
  border: none;
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--danger-color) 80%, black);
  color: var(--contrast-color);
}


/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: var(--danger-color);
  color: var(--contrast-color);
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: var(--contrast-color);
  background: var(--btn-hover-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background: transparent;
  padding: 0;
  transition: all 0.5s;
  z-index: 997;
  height: 80px;
  display: flex !important;
  align-items: center;
  top: 0;
}

/* The 30px offset here used to clear a fixed contact bar above the header.
   That bar is gone, so the header sits flush at the top on every breakpoint. */

/* Discount popup responsive panels (replaces render-time window.innerWidth) */
.popup-image-panel { display: block; }
.popup-form-panel { padding: 40px 36px; }
@media (max-width: 599.98px) {
  .popup-image-panel { display: none; }
  .popup-form-panel { padding: 36px 24px; }
}

.header .header-container {
  background: rgba(0, 0, 0, 0.85);
  border-radius: 50px;  /* The floating header pill: client-approved chrome, left at its own value. */
  padding: 0 30px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 70px;
}

.header .logo {
  line-height: 1;
  display: flex;
  align-items: center;
}

/* Tightly cropped logo - just set height */
.header .logo img.header-logo {
  height: 48px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1); /* Force pure white */
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 600;
  padding-left: 5px;
  text-transform: uppercase;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--btn-color);
  font-size: 14px;
  padding: 8px 20px;
  margin: 0 0 0 30px;
  border-radius: 99px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: var(--btn-hover-color);
}

@media (max-width: 1199.98px) {
  .header {
    padding-top: 10px;
  }

  .header .header-container {
    margin-left: 10px;
    margin-right: 10px;
    padding: 10px 5px 10px 15px;
  }

  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 10px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --surface-color: rgba(0, 0, 0, 0.7);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199.98px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-newsletter {
  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
  padding: 50px 0;
}

.footer .footer-newsletter h4 {
  font-size: 24px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 6px 8px;
  position: relative;
  border-radius: 4px;
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  transition: 0.3s;
  border-radius: 99px;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--surface-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 99px;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

/* The footer column titles. They were h4, which jumped two levels down from
   whatever the page's last section heading was, at the foot of every page.
   They are h2 now -- headings of the footer landmark, which is what they read
   as -- and both selectors are listed so the size is unchanged. */
.footer h2,
.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  margin-right: 3px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

/* The logo anchor only. Column one carries BOTH .footer-about and
   .footer-links, so an unscoped .footer-about a also caught the About Us and
   Contact Us links below the wordmark and set them 24px, semibold, in the
   display face -- they read as headings beside the 17px Inter links in the
   other three columns. Scoped here, they fall through to
   .footer .footer-links ul a and match the rest of the footer. */
.footer .footer-about a.logo {
  color: var(--heading-color);
  font-size: 24px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.footer .footer-about img.footer-logo {
  height: 80px;
  width: auto;
  max-width: 280px;
  display: block;
  filter: brightness(0) invert(1);
  margin-bottom: 12px;
}

/* Payment icons */
.footer .payment-icons .payment-icon {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 6px 10px;
  display: block;
}

.footer .payment-icons .payment-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #fff;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 6px 12px;
  white-space: nowrap;
}

/* Footer social icons */
.footer .footer-social-icon {
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  transition: 0.3s;
  text-decoration: none;
}

.footer .footer-social-icon:hover {
  background: var(--btn-color);
  color: #fff;
}

.footer .footer-handle {
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  margin-left: 4px;
}

/* Payment strip */
.footer-payments {
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 20px 0;
  margin-top: 30px;
}

.footer .footer-payment-note {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0;
}


.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
}

/* The build credit sits left of the centred copyright, quieter than it. */
@media (min-width: 768px) {
  .footer .copyright .credits {
    text-align: left;
    margin-top: 6px;
  }
}

.footer .credits a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
}

.footer .credits a:hover {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid var(--accent-color);
  border-top-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 99px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 767.98px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

/* Tour detail page-title only has breadcrumb, slim it down */
.page-title-tour {
  padding: 110px 0 20px 0;
}

/* No scrim over the header photograph. The client wants the picture itself,
   so nothing is laid over it: .page-title:before is kept as an empty element
   rather than deleted, because several pages position their own decoration
   against it, and the type carries its legibility on its own (below).

   If a particular photograph ever proves too bright for the heading, the fix
   is a better crop or a different frame -- not a wash back over all of them. */
.page-title:before {
  content: "";
  position: absolute;
  inset: 0;
}

/* With no wash at all, the type does the whole job. Four shadows: two tight
   ones to cut an edge against fine detail, and two wide soft ones that act as
   a halo over a bright or busy photograph. They cost the picture nothing --
   each is local to the glyph rather than spread over the frame. */
.page-title h1,
.page-title p,
.page-title .breadcrumbs {
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.85),
    0 4px 16px rgba(0, 0, 0, 0.8),
    0 6px 34px rgba(0, 0, 0, 0.7);
}

/* The page masthead, and the one heading on every route that can carry Armonia
   Forte at the scale the face is drawn for. It was a flat 42px, which is small
   for a 900-weight display face on desktop and large for one on a 390px screen
   -- long titles like "History & Culture in Cajamarca" wrapped to three lines.
   The clamp pulls the phone end down and opens the desktop end up. */
.page-title h1 {
  font-size: clamp(32px, 3.2vw + 1rem, 62px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Taxi Breadcrumb Bar
--------------------------------------------------------------*/
.taxi-breadcrumb-bar {
  background-color: var(--surface-color);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 10px 0;
}

.taxi-breadcrumb-bar .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none !important;
  padding: 0 !important;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  justify-content: center;
}

.taxi-breadcrumb-bar .breadcrumbs ol li {
  list-style: none !important;
}

.taxi-breadcrumb-bar .breadcrumbs ol li a {
  color: var(--accent-color);
  text-decoration: none;
}

.taxi-breadcrumb-bar .breadcrumbs ol li.current {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.taxi-breadcrumb-bar .breadcrumbs ol li+li {
  padding-left: 10px;
}

.taxi-breadcrumb-bar .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199.98px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

/* The section eyebrow: a typographic label, not a capsule.
   It used to be a tinted cyan pill, which is the one gesture in the live
   design that read as a product landing page rather than a guide -- and it
   appeared at the top of nearly every section, so the page opened the same way
   each time. Dropping the chrome keeps the hierarchy (small, bold, uppercase,
   above the heading) and loses the badge.
   Gold rather than cyan, per docs/style.md: cyan is the link and active-state
   colour, gold marks small labels, and an eyebrow is a label. */
.section-title .section-eyebrow {
  font-size: 13px;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin: 0 0 2px;
  /* The label above nearly every section heading on the site, and the widest
     reach of any single colour on this page: 13px of raw gold on the off-white
     ground measured 3.1:1. The ink is the same gold mixed to 4.9:1 there. */
  color: var(--oro-ink);
  display: block;
  text-transform: uppercase;
  font-family: var(--default-font);
}

/* The section heading. `div` is the template's original markup; `h3` is what
   this site actually writes (see the section-title block in docs/style.md), and
   for a long time only `div` was selected here -- so the display size never
   applied and every section heading fell through to Bootstrap's responsive h3
   (~29px at desktop, ~23px at phone width). Four sections had patched it back
   individually. Both selectors are listed now, and the per-section patches that
   existed only to restore this are gone.

   The size is a clamp rather than the old flat 32px: Armonia Forte is a
   single-weight 900 display face and was never set above 32px anywhere on the
   site except the hero, which is well below what the face is drawn for. The
   lower bound keeps phone headings close to where they already were; the upper
   bound gives the face a real top end on desktop. */
.section-title div,
.section-title h2,
.section-title h3 {
  color: var(--heading-color);
  margin: 10px 0 0 0;
  font-size: clamp(30px, 1.6vw + 1.3rem, 44px);
  font-weight: 700;
  font-family: var(--heading-font);
  line-height: 1.12;
}

.section-title div .description-title,
.section-title h2 .description-title,
.section-title h3 .description-title {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Travel Hero Section
--------------------------------------------------------------*/
.travel-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 60px 0;
}

.travel-hero .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.travel-hero .hero-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* No wash over the hero footage -- the client wants the video itself. The
   element is kept because the hero's stacking order is built on it; it just
   paints nothing. The type above it carries its own legibility through the
   shadows in vivid-enhancements.css. */
.travel-hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: none;
  z-index: 1;
}

.travel-hero .hero-text .hero-title {
  font-family: var(--heading-font);
  font-size: 3.5rem;
  font-weight: 700; /* Armonia Forte has one weight; this resolves to it */
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.travel-hero .hero-text .hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
  line-height: 1.6;
}

.travel-hero .hero-text .hero-buttons .btn {
  padding: 12px 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 99px;
  transition: all 0.3s ease;
}

.travel-hero .hero-text .hero-buttons .btn.btn-primary {
  background-color: var(--btn-color);
  border-color: var(--btn-color);
  color: var(--contrast-color);
}

.travel-hero .hero-text .hero-buttons .btn.btn-primary:hover {
  background-color: var(--btn-hover-color);
  border-color: var(--btn-hover-color);
  transform: translateY(-2px);
}

.travel-hero .hero-text .hero-buttons .btn.btn-outline {
  background-color: transparent;
  border: 1px solid var(--contrast-color);
  color: var(--contrast-color);
}

.travel-hero .hero-text .hero-buttons .btn.btn-outline:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
  border-color: var(--accent-color);
}

@media (max-width: 991.98px) {
  .travel-hero .hero-text {
    text-align: center;
    margin-bottom: 3rem;
  }

  .travel-hero .hero-text .hero-title {
    font-size: 2.5rem;
  }

  .travel-hero .hero-text .hero-subtitle {
    font-size: 1.1rem;
  }

  .travel-hero .booking-form {
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .travel-hero .hero-text .hero-title {
    font-size: 2rem;
  }

  .travel-hero .hero-text .hero-subtitle {
    font-size: 1rem;
  }

  .travel-hero .hero-text .hero-buttons .btn {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
  }

  .travel-hero .hero-text .hero-buttons .btn:last-child {
    margin-bottom: 0;
  }
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us .content h2,
.why-us .content h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

.why-us .content p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.why-us .stats-row {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}

@media (max-width: 575.98px) {
  .why-us .stats-row {
    flex-direction: column;
    gap: 1rem;
  }
}

.why-us .stat-item span {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent-color);
  font-family: var(--heading-font);
}

.why-us .stat-item .stat-label {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-top: 0.25rem;
}

.why-us .about-image {
  position: relative;
}

.why-us .about-image .experience-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.why-us .about-image .experience-badge .experience-number {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}

.why-us .about-image .experience-badge .experience-text {
  font-size: 0.9rem;
  margin-top: 0.5rem;
  opacity: 0.9;
}

@media (max-width: 767.98px) {
  .why-us .about-image {
    margin-top: 3rem;
  }

  .why-us .about-image .experience-badge {
    bottom: 15px;
    left: 15px;
    padding: 1rem;
  }

  .why-us .about-image .experience-badge .experience-number {
    font-size: 1.5rem;
  }

  .why-us .about-image .experience-badge .experience-text {
    font-size: 0.8rem;
  }
}

.why-us .why-choose-section {
  margin-top: 5rem;
}

.why-us .why-choose-section h3 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.why-us .why-choose-section>.row>.col-lg-8>p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

@media (max-width: 767.98px) {
  .why-us .why-choose-section {
    margin-top: 3rem;
  }

  .why-us .why-choose-section h3 {
    font-size: 1.8rem;
  }
}

.why-us .feature-card {
  background: var(--surface-color);
  padding: 2.5rem 1.5rem;
  border-radius: 8px;
  text-align: center;
  height: 100%;
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.why-us .feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.why-us .feature-card:hover .feature-icon {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.why-us .feature-icon {
  width: 80px;
  height: 80px;
  background: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  transition: all 0.3s ease;
}

.why-us .feature-card h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.why-us .feature-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .why-us .feature-card {
    padding: 2rem 1rem;
  }

  .why-us .feature-icon {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
    margin-bottom: 1rem;
  }

  .why-us .feature-card h4 {
    font-size: 1.2rem;
  }
}

/*--------------------------------------------------------------
# Featured Destinations Section
--------------------------------------------------------------*/
.featured-destinations .featured-destination {
  height: 600px;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transition: all 0.4s ease;
}

.featured-destinations .featured-destination:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.featured-destinations .featured-destination .destination-overlay {
  position: relative;
  height: 100%;
  width: 100%;
}

.featured-destinations .featured-destination .destination-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.featured-destinations .featured-destination .destination-overlay:hover img {
  transform: scale(1.08);
}

.featured-destinations .featured-destination .destination-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(17, 17, 17, 0.25) 0%, rgba(17, 17, 17, 0.55) 40%, rgba(17, 17, 17, 0.88) 100%);
  z-index: 1;
}

.featured-destinations .featured-destination .destination-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  z-index: 2;
  color: white;
}

.featured-destinations .featured-destination .destination-info .destination-tag {
  display: inline-block;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 16px;
  border-radius: 25px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.featured-destinations .featured-destination .destination-info h3 {
  font-size: 32px;
  font-weight: 800;
  color: white;
  margin-bottom: 8px;
  line-height: 1.2;
}

.featured-destinations .featured-destination .destination-info .location {
  font-size: 16px;
  margin-bottom: 15px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 8px;
}

.featured-destinations .featured-destination .destination-info .location i {
  color: var(--accent-color);
  font-size: 18px;
}

.featured-destinations .featured-destination .destination-info .description {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  opacity: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.featured-destinations .featured-destination .destination-info .destination-meta {
  display: flex;
  gap: 25px;
  margin-bottom: 20px;
  font-size: 14px;
}

.featured-destinations .featured-destination .destination-info .destination-meta .tours-count,
.featured-destinations .featured-destination .destination-info .destination-meta .rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.featured-destinations .featured-destination .destination-info .destination-meta .tours-count i,
.featured-destinations .featured-destination .destination-info .destination-meta .rating i {
  color: var(--accent-color);
}

.featured-destinations .featured-destination .destination-info .price-info {
  margin-bottom: 25px;
}

.featured-destinations .featured-destination .destination-info .price-info .starting-from {
  display: block;
  font-size: 13px;
  opacity: 1;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.featured-destinations .featured-destination .destination-info .price-info .amount {
  font-size: 32px;
  font-weight: 800;
  color: var(--accent-color);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
}


@media (max-width: 991.98px) {
  .featured-destinations .featured-destination {
    height: 500px;
  }

  .featured-destinations .featured-destination .destination-info {
    padding: 30px;
  }

  .featured-destinations .featured-destination .destination-info h3 {
    font-size: 28px;
  }

  .featured-destinations .featured-destination .destination-info .price-info .amount {
    font-size: 24px;
  }
}

@media (max-width: 767.98px) {
  .featured-destinations .featured-destination {
    height: 450px;
    margin-bottom: 30px;
  }

  .featured-destinations .featured-destination .destination-info {
    padding: 25px;
  }

  .featured-destinations .featured-destination .destination-info h3 {
    font-size: 24px;
  }

  .featured-destinations .featured-destination .destination-info .destination-meta {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 575.98px) {
  /* 5-Day card: increase height so title and content are not cut off on iPhone */
  .featured-destinations .featured-destination {
    height: auto;
    min-height: 560px;
  }

  .featured-destinations .featured-destination .destination-info {
    padding: 20px;
    position: relative;
  }

  .featured-destinations .featured-destination .destination-info h3 {
    font-size: 20px;
  }

  .featured-destinations .featured-destination .destination-info .description {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .featured-destinations .featured-destination .destination-info .price-info .amount {
    font-size: 24px;
  }
}

/*--------------------------------------------------------------
# Featured Tours Section
--------------------------------------------------------------*/
.featured-tours .tour-card {
  background-color: var(--surface-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
  margin-bottom: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.featured-tours .tour-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 80%);
}

.featured-tours .tour-card .tour-image {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.featured-tours .tour-card .tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.featured-tours .tour-card .tour-image .tour-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.featured-tours .tour-card .tour-image .tour-badge.limited {
  background-color: var(--btn-color);
}

.featured-tours .tour-card .tour-image .tour-badge.new {
  background-color: var(--accent-color);
}

.featured-tours .tour-card .tour-image .tour-badge.cultural {
  background-color: var(--default-color);
}

.featured-tours .tour-card .tour-image .tour-badge.adventure {
  background-color: var(--accent-color);
}

.featured-tours .tour-card .tour-image .tour-price {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: color-mix(in srgb, var(--default-color), transparent 20%);
  color: var(--contrast-color);
  padding: 8px 15px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.featured-tours .tour-card:hover .tour-image img {
  transform: scale(1.05);
}

.featured-tours .tour-card .tour-content {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.featured-tours .tour-card .tour-content h3,
.featured-tours .tour-card .tour-content h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--heading-color);
  line-height: 1.2;
}

.featured-tours .tour-card .tour-content .tour-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.featured-tours .tour-card .tour-content .tour-meta span {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.featured-tours .tour-card .tour-content .tour-meta span i {
  color: var(--accent-color);
}

.featured-tours .tour-card .tour-content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.featured-tours .tour-card .tour-content .tour-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 25px;
}

.featured-tours .tour-card .tour-content .tour-highlights span {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

.featured-tours .tour-card .tour-content .tour-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.featured-tours .tour-card .tour-content .tour-action .btn-book {
  background-color: var(--btn-color);
  color: var(--contrast-color);
  padding: 12px 25px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 14px;
}

.featured-tours .tour-card .tour-content .tour-action .btn-book:hover {
  background-color: var(--btn-hover-color);
  transform: translateY(-2px);
  color: var(--contrast-color);
}

.featured-tours .tour-card .tour-content .tour-action .tour-rating {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
}

.featured-tours .tour-card .tour-content .tour-action .tour-rating i {
  color: var(--accent-color);
  font-size: 12px;
}

.featured-tours .tour-card .tour-content .tour-action .tour-rating span {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-left: 5px;
  font-size: 13px;
}

.featured-tours .btn-view-all {
  background-color: transparent;
  color: var(--accent-color);
  border: 1px solid var(--accent-color);
  padding: 15px 35px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 16px;
  display: inline-block;
}

.featured-tours .btn-view-all:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent-color), transparent 60%);
}

@media (max-width: 767.98px) {
  .featured-tours .tour-card .tour-content {
    padding: 20px;
  }

  .featured-tours .tour-card .tour-content h3,
  .featured-tours .tour-card .tour-content h4 {
    font-size: 20px;
  }

  .featured-tours .tour-card .tour-content .tour-action {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }

  .featured-tours .tour-card .tour-content .tour-action .btn-book {
    text-align: center;
  }

  .featured-tours .tour-card .tour-content .tour-action .tour-rating {
    justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .featured-tours .tour-card .tour-image {
    height: 200px;
  }

  .featured-tours .tour-card .tour-content {
    padding: 15px;
  }

  .featured-tours .tour-card .tour-content .tour-meta {
    flex-direction: column;
    gap: 8px;
  }

  .featured-tours .tour-card .tour-content .tour-highlights {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Testimonials Home Section
--------------------------------------------------------------*/
.testimonials-home .testimonials-carousel,
.testimonials-home .testimonials-slider {
  overflow: hidden;
}

.testimonials-home .testimonial-item {
  box-sizing: content-box;
  text-align: center;
  min-height: 320px;
}

.testimonials-home .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  margin: 0 auto;
}

.testimonials-home .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials-home .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.testimonials-home .testimonial-item .quote-icon-left,
.testimonials-home .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--accent-color), transparent 40%);
  font-size: 26px;
  line-height: 0;
}

.testimonials-home .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials-home .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials-home .testimonial-item p {
  font-style: italic;
  margin: 0 15px 15px 15px;
  padding: 20px;
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  position: relative;
  margin-bottom: 35px;
  border-radius: 6px;
}

.testimonials-home .testimonial-item p::after {
  content: "";
  width: 0;
  height: 0;
  border-top: 20px solid color-mix(in srgb, var(--default-color), transparent 97%);
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
  position: absolute;
  bottom: -20px;
  left: calc(50% - 20px);
}

.testimonials-home .swiper-wrapper {
  height: auto;
}

.testimonials-home .swiper-pagination {
  margin-top: 40px;
  position: relative;
}

.testimonials-home .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--background-color);
  opacity: 1;
  border: 1px solid var(--accent-color);
}

.testimonials-home .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

@keyframes shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

.journey-timeline .timeline-header h3 {
  font-size: 2.5rem;
  color: var(--heading-color);
  font-weight: 700;
  margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
  .journey-timeline .timeline-header h3 {
    font-size: 2rem;
  }
}

.journey-timeline .timeline-header p {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.journey-timeline .timeline-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 0;
}

.journey-timeline .timeline-container .timeline-milestone {
  position: relative;
  margin-bottom: 4rem;
}

@media (max-width: 767.98px) {
  .journey-timeline .timeline-container .timeline-milestone {
    margin-bottom: 3rem;
  }
}

.journey-timeline .timeline-container .timeline-milestone .milestone-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* The year inside the disc is white, so the disc takes the dark of the same
     family: 2.3:1 becomes 5.1:1. */
  background: var(--cian-dark);
  color: var(--contrast-color);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--accent-color), transparent 60%);
  z-index: 2;
}

@media (max-width: 767.98px) {
  .journey-timeline .timeline-container .timeline-milestone .milestone-marker {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0 auto 1rem;
    width: 80px;
    height: 80px;
  }
}

.journey-timeline .timeline-container .timeline-milestone .milestone-content {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 85%);
}

@media (min-width: 768px) {
  .journey-timeline .timeline-container .timeline-milestone .milestone-content {
    width: 40%;
    margin-top: -50px;
  }
}

.journey-timeline .timeline-container .timeline-milestone .milestone-content h4 {
  color: var(--heading-color);
  font-weight: 600;
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.journey-timeline .timeline-container .timeline-milestone .milestone-content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
  margin: 0;
}

/* Which side a card sits on comes from the milestone's own index, as an
   is-left / is-right class, not from :nth-child: the spine <div> is the first
   child of the container, so nth-child counts it and every card lands on the
   opposite side from the one its entrance animation flies in from. */
@media (min-width: 768px) {
  .journey-timeline .timeline-container .timeline-milestone.is-left .milestone-content {
    margin-left: 0;
  }

  .journey-timeline .timeline-container .timeline-milestone.is-right .milestone-content {
    margin-left: 60%;
  }
}

/*--------------------------------------------------------------
# Travel Destinations Section
--------------------------------------------------------------*/
.travel-destinations .destination-filters {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.travel-destinations .destination-filters li {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  color: var(--default-color);
  padding: 10px 24px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

@media (max-width: 767.98px) {
  .travel-destinations .destination-filters li {
    padding: 8px 18px;
    font-size: 13px;
  }
}

.travel-destinations .destination-filters li:hover,
.travel-destinations .destination-filters li.filter-active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.travel-destinations .isotope-container .destination-item {
  margin-bottom: 30px;
}

@media (max-width: 991.98px) {
  .travel-destinations .isotope-container .destination-item {
    margin-bottom: 25px;
  }
}

@media (max-width: 575.98px) {
  .travel-destinations .isotope-container .destination-item {
    margin-bottom: 20px;
  }
}

.travel-destinations .isotope-container .destination-tile {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.4s ease;
  cursor: pointer;
}

.travel-destinations .isotope-container .destination-tile:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 35px color-mix(in srgb, var(--default-color), transparent 80%);
}

.travel-destinations .isotope-container .destination-tile .tile-image {
  position: relative;
  height: 320px;
  overflow: hidden;
}

.travel-destinations .isotope-container .destination-tile .tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.travel-destinations .isotope-container .destination-tile .tile-image:hover img {
  transform: scale(1.1);
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, #000, transparent 80%) 50%, color-mix(in srgb, #000, transparent 20%) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag {
  align-self: flex-end;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag.luxury {
  background-color: var(--accent-color);
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag.cultural {
  background-color: var(--default-color);
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag.adventure {
  background-color: var(--btn-color);
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag.nature {
  background-color: var(--accent-color);
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag.modern {
  background-color: var(--default-color);
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag.romantic {
  background-color: var(--btn-color);
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag.popular {
  background-color: var(--btn-color);
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag.trekking {
  background-color: var(--accent-color);
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag.ancient {
  background-color: var(--default-color);
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-tag.family {
  background-color: var(--accent-color);
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-info {
  color: white;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-info h4 {
  color: white;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  font-family: var(--heading-font);
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-info p {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 16px;
  opacity: 0.9;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-info .destination-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-info .destination-stats .tours-available {
  font-size: 13px;
  opacity: 0.8;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-info .destination-stats .tours-available i {
  margin-right: 4px;
}

.travel-destinations .isotope-container .destination-tile .tile-image .overlay-content .destination-info .destination-stats .starting-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-color);
}

.travel-destinations .planning-assistance {
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 20px;
  padding: 50px 40px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .travel-destinations .planning-assistance {
    padding: 40px 25px;
  }
}

.travel-destinations .planning-assistance::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="%23000" opacity="0.03"/><circle cx="75" cy="75" r="1" fill="%23000" opacity="0.03"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
  pointer-events: none;
}

.travel-destinations .planning-assistance .assistance-content {
  position: relative;
  z-index: 1;
}

.travel-destinations .planning-assistance .assistance-content h3 {
  color: var(--heading-color);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
  font-family: var(--heading-font);
}

@media (max-width: 767.98px) {
  .travel-destinations .planning-assistance .assistance-content h3 {
    font-size: 26px;
  }
}

.travel-destinations .planning-assistance .assistance-content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.travel-destinations .planning-assistance .assistance-content .assistance-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.travel-destinations .planning-assistance .assistance-content .assistance-actions .btn {
  padding: 14px 30px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

@media (max-width: 767.98px) {
  .travel-destinations .planning-assistance .assistance-content .assistance-actions .btn {
    padding: 12px 24px;
    font-size: 14px;
  }
}

.travel-destinations .planning-assistance .assistance-content .assistance-actions .btn.btn-primary {
  background-color: var(--btn-color);
  border: 1px solid var(--btn-color);
  color: var(--contrast-color);
}

.travel-destinations .planning-assistance .assistance-content .assistance-actions .btn.btn-primary:hover {
  background-color: var(--btn-hover-color);
  border-color: var(--btn-hover-color);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--btn-color), transparent 60%);
}

.travel-destinations .planning-assistance .assistance-content .assistance-actions .btn.btn-outline {
  background-color: transparent;
  border: 1px solid var(--btn-color);
  color: var(--btn-color);
}

.travel-destinations .planning-assistance .assistance-content .assistance-actions .btn.btn-outline:hover {
  background-color: var(--btn-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Travel Destination Details Section
--------------------------------------------------------------*/
.travel-destination-details .destination-hero {
  margin-bottom: 80px;
}

.travel-destination-details .destination-hero .hero-image {
  position: relative;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .travel-destination-details .destination-hero .hero-image {
    height: 350px;
    border-radius: 8px;
  }
}

.travel-destination-details .destination-hero .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.travel-destination-details .destination-hero .hero-image .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.3));
  display: flex;
  align-items: center;
  justify-content: center;
}

.travel-destination-details .destination-hero .hero-image .hero-content {
  text-align: center;
  color: var(--contrast-color);
}

.travel-destination-details .destination-hero .hero-image .hero-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--contrast-color);
}

@media (max-width: 767.98px) {
  .travel-destination-details .destination-hero .hero-image .hero-content h1 {
    font-size: 2.5rem;
  }
}

.travel-destination-details .destination-hero .hero-image .hero-content .hero-tagline {
  font-size: 1.2rem;
  font-weight: 300;
  opacity: 0.9;
}

.travel-destination-details .destination-overview {
  margin-bottom: 80px;
  text-align: center;
}

.travel-destination-details .destination-overview h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 30px;
}

.travel-destination-details .destination-overview p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.travel-destination-details .attractions-section {
  margin-bottom: 80px;
}

.travel-destination-details .attractions-section .section-header {
  text-align: center;
  margin-bottom: 50px;
}

.travel-destination-details .attractions-section .section-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.travel-destination-details .attractions-section .section-header p {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-destination-details .attractions-section .attraction-item {
  background: var(--surface-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
  height: 100%;
}

.travel-destination-details .attractions-section .attraction-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 85%);
}

.travel-destination-details .attractions-section .attraction-item .attraction-image {
  height: 200px;
  overflow: hidden;
}

.travel-destination-details .attractions-section .attraction-item .attraction-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}

.travel-destination-details .attractions-section .attraction-item .attraction-content {
  padding: 25px;
}

.travel-destination-details .attractions-section .attraction-item .attraction-content h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.travel-destination-details .attractions-section .attraction-item .attraction-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.6;
  font-size: 0.95rem;
}

.travel-destination-details .attractions-section .attraction-item:hover .attraction-image img {
  transform: scale(1.1);
}

.travel-destination-details .tours-section {
  margin-bottom: 80px;
}

.travel-destination-details .tours-section .section-header {
  text-align: center;
  margin-bottom: 50px;
}

.travel-destination-details .tours-section .section-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.travel-destination-details .tours-section .section-header p {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-destination-details .tours-section .tour-card {
  background: var(--surface-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
  height: 100%;
}

.travel-destination-details .tours-section .tour-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 85%);
}

.travel-destination-details .tours-section .tour-card .tour-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.travel-destination-details .tours-section .tour-card .tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}

.travel-destination-details .tours-section .tour-card .tour-image .tour-price {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 1.1rem;
}

.travel-destination-details .tours-section .tour-card .tour-content {
  padding: 25px;
}

.travel-destination-details .tours-section .tour-card .tour-content .tour-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.travel-destination-details .tours-section .tour-card .tour-content .tour-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.travel-destination-details .tours-section .tour-card .tour-content .tour-meta span i {
  color: var(--accent-color);
}

.travel-destination-details .tours-section .tour-card .tour-content .tour-meta span.rating {
  color: var(--accent-color);
}

.travel-destination-details .tours-section .tour-card .tour-content .tour-meta span.rating i {
  color: var(--accent-color);
}

.travel-destination-details .tours-section .tour-card .tour-content h3,
.travel-destination-details .tours-section .tour-card .tour-content h4 {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.travel-destination-details .tours-section .tour-card .tour-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.6;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.travel-destination-details .tours-section .tour-card .tour-content .btn-tour {
  background: var(--btn-color);
  color: var(--contrast-color);
  padding: 10px 25px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
  display: inline-block;
}

.travel-destination-details .tours-section .tour-card .tour-content .btn-tour:hover {
  background: var(--btn-hover-color);
  transform: translateY(-2px);
}

.travel-destination-details .tours-section .tour-card:hover .tour-image img {
  transform: scale(1.1);
}

.travel-destination-details .map-section {
  margin-bottom: 80px;
}

.travel-destination-details .map-section .section-header {
  text-align: center;
  margin-bottom: 50px;
}

.travel-destination-details .map-section .section-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.travel-destination-details .map-section .section-header p {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-destination-details .map-section .map-container {
  background: var(--surface-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.travel-destination-details .map-section .map-container .map-embed {
  height: 400px;
}

.travel-destination-details .map-section .map-container .map-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.travel-destination-details .map-section .map-container .map-points {
  padding: 25px;
  background: var(--surface-color);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.travel-destination-details .map-section .map-container .map-points .point-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.travel-destination-details .map-section .map-container .map-points .point-item i {
  color: var(--accent-color);
  font-size: 1.2rem;
}

.travel-destination-details .map-section .map-container .map-points .point-item span {
  font-weight: 500;
  font-size: 0.95rem;
}

.travel-destination-details .practical-info {
  margin-bottom: 80px;
}

.travel-destination-details .practical-info .section-header {
  text-align: center;
  margin-bottom: 50px;
}

.travel-destination-details .practical-info .section-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.travel-destination-details .practical-info .section-header p {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-destination-details .practical-info .info-item {
  text-align: center;
  padding: 30px 20px;
  background: var(--surface-color);
  border-radius: 8px;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
  transition: 0.3s;
}

.travel-destination-details .practical-info .info-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 85%);
}

.travel-destination-details .practical-info .info-item .info-icon {
  width: 70px;
  height: 70px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.travel-destination-details .practical-info .info-item .info-icon i {
  font-size: 2rem;
  color: var(--accent-color);
}

.travel-destination-details .practical-info .info-item h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.travel-destination-details .practical-info .info-item p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.6;
  font-size: 0.95rem;
}

.travel-destination-details .practical-info .travel-tips {
  background: var(--surface-color);
  padding: 40px;
  border-radius: 8px;
  margin-top: 50px;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.travel-destination-details .practical-info .travel-tips h3 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 30px;
  text-align: center;
}

.travel-destination-details .practical-info .travel-tips .tips-list {
  list-style: none;
  padding: 0;
}

.travel-destination-details .practical-info .travel-tips .tips-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.travel-destination-details .practical-info .travel-tips .tips-list li i {
  color: var(--accent-color);
  margin-top: 3px;
  font-size: 1.1rem;
}

.travel-destination-details .gallery-section {
  margin-bottom: 80px;
}

.travel-destination-details .gallery-section .section-header {
  text-align: center;
  margin-bottom: 50px;
}

.travel-destination-details .gallery-section .section-header h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 15px;
}

.travel-destination-details .gallery-section .section-header p {
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-destination-details .gallery-section .swiper-wrapper {
  height: auto !important;
}

.travel-destination-details .gallery-section .gallery-item {
  height: 300px;
  border-radius: 8px;
  overflow: hidden;
  margin: 0 10px;
}

.travel-destination-details .gallery-section .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}

.travel-destination-details .gallery-section .gallery-item img:hover {
  transform: scale(1.05);
}

.travel-destination-details .gallery-section .swiper-pagination {
  margin-top: 30px;
}

.travel-destination-details .gallery-section .swiper-pagination .swiper-pagination-bullet {
  background: var(--accent-color);
  opacity: 0.5;
  width: 12px;
  height: 12px;
}

.travel-destination-details .gallery-section .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
}

.travel-destination-details .cta-section {
  padding: 60px 40px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  border-radius: 20px;
  text-align: center;
}

.travel-destination-details .cta-section h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--contrast-color);
}

@media (max-width: 767.98px) {
  .travel-destination-details .cta-section h2 {
    font-size: 2rem;
  }
}

.travel-destination-details .cta-section p {
  font-size: 1.1rem;
  margin-bottom: 30px;
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
}

.travel-destination-details .cta-section .cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.travel-destination-details .cta-section .cta-buttons .btn {
  padding: 12px 30px;
  border-radius: 25px;
  font-weight: 500;
  text-decoration: none;
  transition: 0.3s;
}

.travel-destination-details .cta-section .cta-buttons .btn.btn-primary {
  background: var(--contrast-color);
  color: var(--accent-color);
  border: 1px solid var(--contrast-color);
}

.travel-destination-details .cta-section .cta-buttons .btn.btn-primary:hover {
  background: transparent;
  color: var(--contrast-color);
}

.travel-destination-details .cta-section .cta-buttons .btn.btn-outline {
  background: transparent;
  color: var(--contrast-color);
  border: 1px solid var(--contrast-color);
}

.travel-destination-details .cta-section .cta-buttons .btn.btn-outline:hover {
  background: var(--contrast-color);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Travel Tours Section
--------------------------------------------------------------*/
.travel-tours .section-subtitle {
  color: var(--heading-color);
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.travel-tours .destination-filters {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.travel-tours .destination-filters li {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  color: var(--default-color);
  padding: 10px 24px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

@media (max-width: 767.98px) {
  .travel-tours .destination-filters li {
    padding: 8px 18px;
    font-size: 13px;
  }
}

.travel-tours .destination-filters li:hover,
.travel-tours .destination-filters li.filter-active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

/* The icon-tile filter follows the page as the visitor scrolls the results, so
   changing category never means scrolling back up.
   The offset is --sticky-offset, the token vivid-enhancements.css maintains for
   the retreating header: 80px while the header is on screen, 0 once it has slid
   away. Keying off it means the strip drops flush to the top on the way down and
   slides back under the header on the way up, instead of the two overlapping.
   z-index stays under the header's 997 so the menu still wins.
   The translucent ground plus blur keeps the cards legible as they pass under
   the tiles. */
.filter-strip-sticky {
  position: sticky;
  top: var(--sticky-offset, 0px);
  transition: top 0.3s ease;
  z-index: 990;
  padding: 10px 0 8px;
  margin-bottom: 12px;
  background: color-mix(in srgb, var(--background-color) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* IconStrip carries a 44px top margin for its usual spot under a hero. Pinned
   to the top of the viewport it needs none. */
.filter-strip-sticky > .container {
  margin-top: 0 !important;
}

/* Condensed tiles, so all eight categories hold a single row and the pinned
   strip stays shallow. The !important is unavoidable: IconStrip sets these
   inline. Scoped to this wrapper, so the Sources and Trivia strips keep the
   full-size tiles. */
.filter-strip-sticky .container > div > * {
  width: 104px !important;
}

.filter-strip-sticky .container > div > * > div:first-child {
  padding: 12px !important;
  border-radius: 12px !important;
}

.filter-strip-sticky .container > div > * > div:first-child > span {
  width: 46px !important;
  height: 46px !important;
  font-size: 19px !important;
}

.filter-strip-sticky .container > div > * > div:last-child {
  margin-top: 7px !important;
  /* 12.5px. The shrunk strip is still a set of labelled controls, so its
     labels hold the 13px floor; the tile is 104px wide and has the room. */
  font-size: 0.8125rem !important;
}

/* On a phone the eight tiles wrapped to four rows, so the pinned strip stood
   445px deep on an 844px screen, over half the viewport, and left room for a
   single card underneath. Below 768px it becomes one row that swipes sideways
   instead: the strip drops to about a quarter of that, and the categories stay
   one gesture away.
   The horizontal scroller is a descendant of the sticky element, not an
   ancestor of it, so it does not break the pinning. */
@media (max-width: 767.98px) {
  .filter-strip-sticky .container > div {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    gap: 10px !important;
    padding-bottom: 2px;
  }

  .filter-strip-sticky .container > div::-webkit-scrollbar {
    display: none;
  }

  .filter-strip-sticky .container > div > * {
    width: 84px !important;
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .filter-strip-sticky .container > div > * > div:first-child {
    padding: 9px !important;
  }

  .filter-strip-sticky .container > div > * > div:first-child > span {
    width: 38px !important;
    height: 38px !important;
    font-size: 16px !important;
  }

  .filter-strip-sticky .container > div > * > div:last-child {
    /* 10.9px, the smallest label on the site. The phone strip scrolls
       sideways rather than wrapping, so a taller tile costs one row, not
       four. */
    font-size: 0.8125rem !important;
    margin-top: 5px !important;
  }
}

.travel-tours .tour-filters {
  background-color: var(--surface-color);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.travel-tours .tour-filters .form-select {
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  color: var(--default-color);
  background-color: var(--background-color);
  border-radius: 8px;
  padding: 0.75rem;
}

.travel-tours .tour-filters .form-select:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 80%);
}

.travel-tours .featured-tours-slider {
  padding-bottom: 40px;
}

.travel-tours .featured-tours-slider .swiper-wrapper {
  height: auto !important;
}

.travel-tours .featured-tours-slider .swiper-pagination {
  bottom: 0;
}

.travel-tours .featured-tours-slider .swiper-pagination .swiper-pagination-bullet {
  background-color: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.travel-tours .featured-tours-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.travel-tours .featured-tours-slider .swiper-slide {
  height: auto;
}

.travel-tours .featured-tour-card {
  background-color: var(--surface-color);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.travel-tours .featured-tour-card .tour-image {
  position: relative;
  overflow: hidden;
}

.travel-tours .featured-tour-card .tour-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.travel-tours .featured-tour-card .tour-image .tour-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.5rem 1rem;
  border-radius: 25px;
  font-size: 0.875rem;
  font-weight: 600;
}

.travel-tours .featured-tour-card .tour-image:hover img {
  transform: scale(1.05);
}

.travel-tours .featured-tour-card .tour-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.travel-tours .featured-tour-card .tour-content h3,
.travel-tours .featured-tour-card .tour-content h4 {
  color: var(--heading-color);
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.travel-tours .featured-tour-card .tour-content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 1rem;
  line-height: 1.6;
  flex-grow: 1;
}

.travel-tours .featured-tour-card .tour-content .tour-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.travel-tours .featured-tour-card .tour-content .tour-meta .duration {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 0.875rem;
}

.travel-tours .featured-tour-card .tour-content .tour-meta .duration i {
  color: var(--accent-color);
  margin-right: 0.5rem;
}

.travel-tours .featured-tour-card .tour-content .tour-meta .price {
  color: var(--accent-color);
  font-size: 1.25rem;
  font-weight: 700;
}

.travel-tours .featured-tour-card .tour-content .btn {
  width: 100%;
}

.travel-tours .category-card {
  text-align: center;
  padding: 1.5rem;
  background-color: var(--surface-color);
  border-radius: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.travel-tours .category-card:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  transform: translateY(-3px);
}

.travel-tours .category-card .category-icon {
  margin-bottom: 1rem;
}

.travel-tours .category-card .category-icon i {
  font-size: 2.5rem;
  color: var(--tertiary-accent);
}

.travel-tours .category-card h5 {
  color: var(--heading-color);
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.travel-tours .special-offers .offer-banner {
  display: flex;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #000 20%));
  border-radius: 8px;
  overflow: hidden;
  min-height: 200px;
  position: relative;
}

@media (max-width: 767.98px) {
  .travel-tours .special-offers .offer-banner {
    flex-direction: column;
  }
}

.travel-tours .special-offers .offer-banner .offer-content {
  flex: 1;
  padding: 2rem;
  color: var(--contrast-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.travel-tours .special-offers .offer-banner .offer-content h4 {
  color: var(--contrast-color);
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

.travel-tours .special-offers .offer-banner .offer-content p {
  margin-bottom: 1rem;
  opacity: 0.9;
}

.travel-tours .special-offers .offer-banner .offer-content .urgency {
  color: var(--secondary-accent);
  font-weight: 600;
  margin-bottom: 1rem;
  display: block;
}

.travel-tours .special-offers .offer-banner .offer-content .btn-accent {
  background-color: var(--btn-color);
  color: var(--contrast-color);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  align-self: flex-start;
}

.travel-tours .special-offers .offer-banner .offer-content .btn-accent:hover {
  background-color: var(--btn-hover-color);
  transform: translateY(-2px);
}

.travel-tours .special-offers .offer-banner .offer-image {
  flex: 0 0 200px;
}

@media (max-width: 767.98px) {
  .travel-tours .special-offers .offer-banner .offer-image {
    flex: none;
    height: 150px;
  }
}

.travel-tours .special-offers .offer-banner .offer-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.travel-tours .tour-card {
  background-color: var(--surface-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.travel-tours .tour-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.travel-tours .tour-card .tour-image {
  position: relative;
  overflow: hidden;
}

.travel-tours .tour-card .tour-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.travel-tours .tour-card .tour-image .tour-price {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  /* A ground carrying white text, which is what --cian-dark is for: the raw
     accent gave white 2.3:1, this gives 5.1:1. */
  background-color: var(--cian-dark);
  color: var(--contrast-color);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.125rem;
}

.travel-tours .tour-card .tour-image:hover img {
  transform: scale(1.05);
}

.travel-tours .tour-card .tour-grid-imgs,
.travel-destinations .tour-grid-imgs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 125px 125px;
  gap: 3px;
  overflow: hidden;
}

.travel-tours .tour-card .tour-grid-imgs img,
.travel-destinations .tour-grid-imgs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.travel-tours .tour-card .tour-grid-imgs img:hover,
.travel-destinations .tour-grid-imgs img:hover {
  transform: scale(1.05);
}

.travel-tours .tour-card .tour-grid-imgs .tour-price,
.travel-destinations .tour-grid-imgs .tour-price {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.125rem;
}

.travel-tours .tour-card .tour-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.travel-tours .tour-card .tour-content h3,
.travel-tours .tour-card .tour-content h4 {
  color: var(--heading-color);
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.travel-tours .tour-card .tour-content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 1rem;
  line-height: 1.6;
  flex: 1;
}

.travel-tours .tour-card .tour-content .tour-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-tours .tour-card .tour-content .tour-details span {
  display: flex;
  align-items: center;
}

.travel-tours .tour-card .tour-content .tour-details span i {
  color: var(--accent-color);
  margin-right: 0.5rem;
}

.travel-tours .tour-card .tour-content .btn {
  align-self: flex-start;
}

.travel-tours .cta-section {
  background-color: var(--surface-color);
  padding: 3rem 2rem;
  border-radius: 8px;
  margin-top: 2rem;
}

.travel-tours .cta-section h3 {
  color: var(--heading-color);
  margin-bottom: 1rem;
  font-size: 2rem;
}

.travel-tours .cta-section p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 2rem;
  font-size: 1.125rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 575.98px) {
  .travel-tours .cta-section .cta-buttons .btn {
    display: block;
    margin-bottom: 1rem;
    width: 100%;
  }

  .travel-tours .cta-section .cta-buttons .btn:last-child {
    margin-bottom: 0;
  }
}

.travel-tours .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.travel-tours .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 10%);
  border-color: color-mix(in srgb, var(--accent-color), #000 10%);
  transform: translateY(-2px);
}

.travel-tours .btn-outline-primary {
  /* Same fix as the global .btn-outline-primary in vivid-enhancements.css;
     this scoped rule is more specific and was keeping "Read Guide" and
     "View Hotel" at 2.3:1 on the hub pages. */
  color: var(--cian-ink);
  border-color: var(--cian-ink);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.travel-tours .btn-outline-primary:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Travel Tour Details Section
--------------------------------------------------------------*/
.travel-tour-details .tour-hero {
  margin-bottom: 60px;
}

.travel-tour-details .tour-hero .hero-image-wrapper {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  height: 500px;
}

@media (max-width: 767.98px) {
  .travel-tour-details .tour-hero .hero-image-wrapper {
    height: auto;
    min-height: 420px;
  }

  .travel-tour-details .tour-hero .hero-overlay {
    position: relative;
    background: none;
  }
}

/* This one is the caption band that carries the landmark's h1, so it keeps its
   box and its padding and loses only the gradient: no wash over the
   photograph. The heading below takes the shadow treatment instead. */
.travel-tour-details .tour-hero .hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: none;
  color: var(--contrast-color);
  padding: 60px 40px 40px;
}

.travel-tour-details .tour-hero .hero-overlay * {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.85),
    0 4px 20px rgba(0, 0, 0, 0.8),
    0 8px 40px rgba(0, 0, 0, 0.7);
}

@media (max-width: 767.98px) {
  .travel-tour-details .tour-hero .hero-overlay {
    padding: 40px 20px 20px;
  }
}

.travel-tour-details .tour-hero .hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--contrast-color);
}

@media (max-width: 767.98px) {
  .travel-tour-details .tour-hero .hero-content h1 {
    font-size: 2rem;
  }
}

.travel-tour-details .tour-hero .hero-content .hero-meta {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  .travel-tour-details .tour-hero .hero-content .hero-meta {
    gap: 15px;
  }
}

.travel-tour-details .tour-hero .hero-content .hero-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
}

/* Gold leg of the rotation, on the landmark hero. Gold reads well over the
   darkened hero photo and is the highest-traffic surface the second accent
   could take. */
.travel-tour-details .tour-hero .hero-content .hero-meta span i {
  font-size: 1.1rem;
  color: var(--secondary-accent);
}

.travel-tour-details .tour-hero .hero-content .hero-tagline {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 25px;
  opacity: 1;
}

@media (max-width: 767.98px) {
  .travel-tour-details .tour-hero .hero-content .hero-tagline {
    font-size: 1.15rem;
  }
}

.travel-tour-details .tour-hero .hero-content .btn-book {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 12px 30px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.travel-tour-details .tour-hero .hero-content .btn-book:hover {
  background: color-mix(in srgb, var(--accent-color), black 20%);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.travel-tour-details .tour-overview {
  margin-bottom: 60px;
}

.travel-tour-details .tour-overview h2 {
  font-size: 2.2rem;
  margin-bottom: 25px;
  color: var(--heading-color);
}

.travel-tour-details .tour-overview p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 20px;
  color: var(--default-color);
}

.travel-tour-details .tour-overview .tour-highlights {
  background: var(--surface-color);
  padding: 30px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.travel-tour-details .tour-overview .tour-highlights h3 {
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.travel-tour-details .tour-overview .tour-highlights ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.travel-tour-details .tour-overview .tour-highlights ul li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  color: var(--default-color);
}

/* Red leg of the rotation, on the Quick Facts card. Red on the white card
   measures ~5.2:1, well clear of the minimum. */
.travel-tour-details .tour-overview .tour-highlights ul li i {
  color: var(--tertiary-accent);
  font-size: 1.1rem;
}

.travel-tour-details .tour-itinerary {
  margin-bottom: 60px;
}

.travel-tour-details .tour-itinerary h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: var(--heading-color);
  text-align: center;
}

.travel-tour-details .tour-itinerary .itinerary-timeline {
  position: relative;
}

.travel-tour-details .tour-itinerary .itinerary-timeline::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent-color);
}

@media (max-width: 767.98px) {
  .travel-tour-details .tour-itinerary .itinerary-timeline::before {
    left: 25px;
  }
}

.travel-tour-details .tour-itinerary .itinerary-item {
  position: relative;
  padding-left: 120px;
  margin-bottom: 40px;
}

@media (max-width: 767.98px) {
  .travel-tour-details .tour-itinerary .itinerary-item {
    padding-left: 80px;
  }
}

.travel-tour-details .tour-itinerary .itinerary-item .day-number {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 80px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9rem;
}

@media (max-width: 767.98px) {
  .travel-tour-details .tour-itinerary .itinerary-item .day-number {
    width: 60px;
    height: 60px;
    font-size: 0.8rem;
  }
}

.travel-tour-details .tour-itinerary .itinerary-item .day-content {
  background: var(--surface-color);
  padding: 25px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.travel-tour-details .tour-itinerary .itinerary-item .day-content h4 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: var(--heading-color);
}

.travel-tour-details .tour-itinerary .itinerary-item .day-content p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 15px;
}

.travel-tour-details .tour-itinerary .itinerary-item .day-content .day-details {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.travel-tour-details .tour-itinerary .itinerary-item .day-content .day-details span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-tour-details .tour-itinerary .itinerary-item .day-content .day-details span i {
  color: var(--accent-color);
}

.travel-tour-details .tour-inclusions {
  margin-bottom: 60px;
}

.travel-tour-details .tour-inclusions h3 {
  font-size: 1.4rem;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.travel-tour-details .tour-inclusions h3 i {
  font-size: 1.6rem;
}

.travel-tour-details .tour-inclusions .included-section h3 {
  color: var(--secondary-accent);
}

.travel-tour-details .tour-inclusions .included-section h3 i {
  color: var(--secondary-accent);
}

.travel-tour-details .tour-inclusions .excluded-section h3 {
  color: var(--danger-color);
}

.travel-tour-details .tour-inclusions .excluded-section h3 i {
  color: var(--danger-color);
}

.travel-tour-details .tour-inclusions .inclusion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.travel-tour-details .tour-inclusions .inclusion-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  color: var(--default-color);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.travel-tour-details .tour-inclusions .inclusion-list li:last-child {
  border-bottom: none;
}

.travel-tour-details .tour-inclusions .inclusion-list li i {
  margin-top: 2px;
  flex-shrink: 0;
}

.travel-tour-details .tour-inclusions .inclusion-list.included i {
  color: var(--secondary-accent);
}

.travel-tour-details .tour-inclusions .inclusion-list.excluded i {
  color: var(--danger-color);
}

.travel-tour-details .tour-pricing {
  margin-bottom: 60px;
}

.travel-tour-details .tour-pricing h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: var(--heading-color);
  text-align: center;
}

.travel-tour-details .tour-pricing .pricing-table {
  background: var(--surface-color);
  border-radius: 20px;
  padding: 40px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 767.98px) {
  .travel-tour-details .tour-pricing .pricing-table {
    padding: 25px;
  }
}

.travel-tour-details .tour-pricing .pricing-header {
  text-align: center;
  margin-bottom: 40px;
}

.travel-tour-details .tour-pricing .pricing-header .price-item h3 {
  font-size: 1.2rem;
  color: var(--heading-color);
  margin-bottom: 10px;
}

.travel-tour-details .tour-pricing .pricing-header .price-item .price-amount {
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 5px;
}

@media (max-width: 767.98px) {
  .travel-tour-details .tour-pricing .pricing-header .price-item .price-amount {
    font-size: 2.5rem;
  }
}

.travel-tour-details .tour-pricing .pricing-header .price-item p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-tour-details .tour-pricing .pricing-details {
  margin-bottom: 40px;
}

.travel-tour-details .tour-pricing .pricing-details .price-type {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.travel-tour-details .tour-pricing .pricing-details .price-type h4 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: var(--heading-color);
}

.travel-tour-details .tour-pricing .pricing-details .price-type .price {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 5px;
}

.travel-tour-details .tour-pricing .pricing-details .price-type p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-tour-details .tour-pricing .available-dates h3 {
  font-size: 1.3rem;
  margin-bottom: 25px;
  color: var(--heading-color);
  text-align: center;
}

.travel-tour-details .tour-pricing .available-dates .dates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.travel-tour-details .tour-pricing .available-dates .date-option {
  text-align: center;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.travel-tour-details .tour-pricing .available-dates .date-option:hover {
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.travel-tour-details .tour-pricing .available-dates .date-option .date {
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.travel-tour-details .tour-pricing .available-dates .date-option .availability {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-tour-details .booking-section {
  margin-bottom: 60px;
}

.travel-tour-details .booking-section .booking-card {
  background: var(--surface-color);
  padding: 40px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  .travel-tour-details .booking-section .booking-card {
    padding: 25px;
  }
}

.travel-tour-details .booking-section .booking-card h2 {
  font-size: 2rem;
  margin-bottom: 30px;
  color: var(--heading-color);
  text-align: center;
}

.travel-tour-details .booking-section .booking-card .form-group {
  margin-bottom: 25px;
}

.travel-tour-details .booking-section .booking-card .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--heading-color);
}

.travel-tour-details .booking-section .booking-card .form-group .form-control {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.3s ease;
  color: var(--default-color);
  background-color: var(--surface-color);
}

.travel-tour-details .booking-section .booking-card .form-group .form-control:focus {
  border-color: var(--accent-color);
  outline: none;
}

.travel-tour-details .booking-section .booking-card .form-group .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.travel-tour-details .booking-section .booking-card .btn-submit {
  width: 100%;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 15px;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  transition: all 0.3s ease;
  cursor: pointer;
}

.travel-tour-details .booking-section .booking-card .btn-submit:hover {
  background: color-mix(in srgb, var(--accent-color), black 20%);
  transform: translateY(-2px);
}

.travel-tour-details .tour-gallery {
  margin-bottom: 60px;
}

.travel-tour-details .tour-gallery h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: var(--heading-color);
  text-align: center;
}

.travel-tour-details .tour-gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.travel-tour-details .tour-gallery .gallery-grid .gallery-item {
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.travel-tour-details .tour-gallery .gallery-grid .gallery-item:hover {
  transform: scale(1.03);
}

.travel-tour-details .tour-gallery .gallery-grid .gallery-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: all 0.3s ease;
}

.travel-tour-details .tour-gallery .gallery-grid .gallery-item a:hover img {
  filter: brightness(1.1);
}

.travel-tour-details .final-cta .cta-content {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), black 20%));
  color: var(--contrast-color);
  padding: 60px 40px;
  border-radius: 20px;
  text-align: center;
}

@media (max-width: 767.98px) {
  .travel-tour-details .final-cta .cta-content {
    padding: 40px 20px;
  }
}

.travel-tour-details .final-cta .cta-content h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
  color: var(--contrast-color);
}

@media (max-width: 767.98px) {
  .travel-tour-details .final-cta .cta-content h2 {
    font-size: 2rem;
  }
}

.travel-tour-details .final-cta .cta-content p {
  font-size: 1.2rem;
  margin-bottom: 30px;
  opacity: 0.9;
}

.travel-tour-details .final-cta .cta-content .cta-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.travel-tour-details .final-cta .cta-content .cta-actions .btn-primary,
.travel-tour-details .final-cta .cta-content .cta-actions .btn-secondary {
  padding: 15px 30px;
  border-radius: 99px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.travel-tour-details .final-cta .cta-content .cta-actions .btn-primary {
  background: var(--contrast-color);
  color: var(--accent-color);
}

.travel-tour-details .final-cta .cta-content .cta-actions .btn-primary:hover {
  background: color-mix(in srgb, var(--contrast-color), black 10%);
  color: var(--accent-color);
  transform: translateY(-2px);
}

.travel-tour-details .final-cta .cta-content .cta-actions .btn-secondary {
  background: transparent;
  color: var(--contrast-color);
  border: 1px solid var(--contrast-color);
}

.travel-tour-details .final-cta .cta-content .cta-actions .btn-secondary:hover {
  background: var(--contrast-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Travel Booking Section
--------------------------------------------------------------*/
.travel-booking .booking-form-container {
  background-color: var(--surface-color);
  border-radius: 8px;
  box-shadow: 0 5px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 40px;
  margin-bottom: 30px;
}

.travel-booking .booking-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
  border-bottom: 0;
}

.travel-booking .booking-progress::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
  z-index: 1;
}

.travel-booking .booking-progress .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  background-color: var(--surface-color);
  padding: 0 15px;
  cursor: pointer;
  transition: 0.3s;
  border: none;
}

.travel-booking .booking-progress .step .step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
  color: var(--contrast-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  margin-bottom: 10px;
  transition: 0.3s;
}

.travel-booking .booking-progress .step .step-title {
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-align: center;
  transition: 0.3s;
}

.travel-booking .booking-progress .step:hover .step-number {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.travel-booking .booking-progress .step:hover .step-title {
  color: var(--accent-color);
}

.travel-booking .booking-progress .step.active .step-number {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.travel-booking .booking-progress .step.active .step-title {
  color: var(--accent-color);
}

.travel-booking .booking-progress .step.completed .step-number {
  background-color: var(--secondary-accent);
  color: var(--contrast-color);
}

.travel-booking .booking-progress .step.completed .step-number::before {
  content: "✓";
  font-size: 16px;
}

@media (max-width: 767.98px) {
  .travel-booking .booking-progress .step .step-title {
    font-size: 12px;
  }

  .travel-booking .booking-progress .step .step-number {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
}

.travel-booking .booking-form .tab-content .form-step.tab-pane {
  display: none;
}

.travel-booking .booking-form .tab-content .form-step.tab-pane.show.active {
  display: block;
}

.travel-booking .booking-form .tab-content .form-step h4 {
  color: var(--heading-color);
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.travel-booking .booking-form .tab-content .form-step h5 {
  color: var(--heading-color);
  margin: 30px 0 20px;
  font-size: 18px;
}

.travel-booking .booking-form label {
  font-weight: 500;
  color: var(--default-color);
  margin-bottom: 8px;
  display: block;
}

.travel-booking .booking-form input[type=text],
.travel-booking .booking-form input[type=email],
.travel-booking .booking-form input[type=tel],
.travel-booking .booking-form input[type=date],
.travel-booking .booking-form select,
.travel-booking .booking-form textarea {
  color: var(--default-color);
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 14px;
  transition: 0.3s;
}

.travel-booking .booking-form input[type=text]:focus,
.travel-booking .booking-form input[type=email]:focus,
.travel-booking .booking-form input[type=tel]:focus,
.travel-booking .booking-form input[type=date]:focus,
.travel-booking .booking-form select:focus,
.travel-booking .booking-form textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 80%);
  outline: none;
}

.travel-booking .booking-form input[type=text]::placeholder,
.travel-booking .booking-form input[type=email]::placeholder,
.travel-booking .booking-form input[type=tel]::placeholder,
.travel-booking .booking-form input[type=date]::placeholder,
.travel-booking .booking-form select::placeholder,
.travel-booking .booking-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.travel-booking .booking-form .form-navigation {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 15px;
}

.travel-booking .booking-form .form-navigation .btn {
  padding: 12px 30px;
  border-radius: 8px;
  font-weight: 500;
  transition: 0.3s;
  border: none;
}

.travel-booking .booking-form .form-navigation .btn.btn-prev {
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
  color: var(--default-color);
}

.travel-booking .booking-form .form-navigation .btn.btn-prev:hover {
  background-color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.travel-booking .booking-form .form-navigation .btn.btn-next,
.travel-booking .booking-form .form-navigation .btn.btn-book {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.travel-booking .booking-form .form-navigation .btn.btn-next:hover,
.travel-booking .booking-form .form-navigation .btn.btn-book:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
}

.travel-booking .addon-options .addon-item {
  background-color: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
  transition: 0.3s;
}

.travel-booking .addon-options .addon-item:hover {
  border-color: var(--accent-color);
  box-shadow: 0 2px 15px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.travel-booking .addon-options .addon-item .addon-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.travel-booking .addon-options .addon-item .addon-details .addon-check {
  flex: 1;
}

.travel-booking .addon-options .addon-item .addon-details .addon-check input[type=checkbox] {
  margin-right: 15px;
  transform: scale(1.2);
}

.travel-booking .addon-options .addon-item .addon-details .addon-check label {
  cursor: pointer;
  margin-bottom: 0;
}

.travel-booking .addon-options .addon-item .addon-details .addon-check label h5 {
  margin: 0 0 5px;
  font-size: 16px;
}

.travel-booking .addon-options .addon-item .addon-details .addon-check label p {
  margin: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.travel-booking .addon-options .addon-item .addon-details .addon-price {
  text-align: right;
}

.travel-booking .addon-options .addon-item .addon-details .addon-price .price {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-color);
  display: block;
}

.travel-booking .addon-options .addon-item .addon-details .addon-price .period {
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.travel-booking .payment-methods {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.travel-booking .payment-methods .method-selector {
  flex: 1;
}

.travel-booking .payment-methods .method-selector input[type=radio] {
  display: none;
}

.travel-booking .payment-methods .method-selector input[type=radio]:checked+label {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.travel-booking .payment-methods .method-selector label {
  display: block;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  margin-bottom: 0;
}

.travel-booking .payment-methods .method-selector label:hover {
  border-color: var(--accent-color);
}

.travel-booking .payment-methods .method-selector label i {
  font-size: 20px;
  display: block;
  margin-bottom: 5px;
}

@media (max-width: 767.98px) {
  .travel-booking .payment-methods {
    flex-direction: column;
  }
}

.travel-booking .secure-payment {
  background-color: var(--background-color);
  border: 1px solid var(--secondary-accent);
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--secondary-accent);
}

.travel-booking .secure-payment i {
  font-size: 20px;
}

.travel-booking .terms-agreement {
  margin-top: 25px;
  padding: 20px;
  background-color: var(--background-color);
  border-radius: 8px;
}

.travel-booking .terms-agreement .form-check {
  display: flex;
  align-items: start;
  gap: 10px;
}

.travel-booking .terms-agreement .form-check .form-check-input {
  margin-top: 3px;
}

.travel-booking .terms-agreement .form-check .form-check-label {
  margin-bottom: 0;
  font-size: 14px;
}

.travel-booking .terms-agreement .form-check .form-check-label a {
  color: var(--accent-color);
  text-decoration: none;
}

.travel-booking .terms-agreement .form-check .form-check-label a:hover {
  text-decoration: underline;
}

.travel-booking .booking-summary {
  background-color: var(--surface-color);
  border-radius: 8px;
  box-shadow: 0 5px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  position: sticky;
  top: 100px;
}

.travel-booking .booking-summary .summary-header {
  border-bottom: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  padding-bottom: 15px;
  margin-bottom: 25px;
}

.travel-booking .booking-summary .summary-header h4 {
  margin: 0;
  color: var(--heading-color);
}

.travel-booking .booking-summary .selected-tour {
  margin-bottom: 25px;
}

.travel-booking .booking-summary .selected-tour img {
  border-radius: 10px;
  margin-bottom: 15px;
}

.travel-booking .booking-summary .selected-tour .tour-info h5 {
  margin: 0 0 10px;
  color: var(--heading-color);
}

.travel-booking .booking-summary .selected-tour .tour-info p {
  margin: 5px 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.travel-booking .booking-summary .selected-tour .tour-info p i {
  color: var(--accent-color);
  margin-right: 8px;
}

.travel-booking .booking-summary .booking-details {
  margin-bottom: 25px;
}

.travel-booking .booking-summary .booking-details .detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.travel-booking .booking-summary .booking-details .detail-item .label {
  font-weight: 500;
  color: var(--default-color);
}

.travel-booking .booking-summary .booking-details .detail-item .value {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.travel-booking .booking-summary .price-breakdown {
  border-top: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-top: 20px;
}

.travel-booking .booking-summary .price-breakdown .price-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.travel-booking .booking-summary .price-breakdown .price-item .description {
  color: var(--default-color);
}

.travel-booking .booking-summary .price-breakdown .price-item .amount {
  font-weight: 500;
  color: var(--default-color);
}

.travel-booking .booking-summary .price-breakdown .price-item.tax-item {
  padding-bottom: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.travel-booking .booking-summary .price-breakdown .price-total {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 2px solid var(--accent-color);
}

.travel-booking .booking-summary .price-breakdown .price-total .description {
  font-weight: 600;
  font-size: 18px;
  color: var(--heading-color);
}

.travel-booking .booking-summary .price-breakdown .price-total .amount {
  font-weight: 600;
  font-size: 24px;
  color: var(--accent-color);
}

.travel-booking .booking-summary .help-section {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 2px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.travel-booking .booking-summary .help-section h5 {
  margin: 0 0 15px;
  color: var(--heading-color);
  font-size: 16px;
}

.travel-booking .booking-summary .help-section p {
  margin: 0 0 15px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.travel-booking .booking-summary .help-section .contact-info p {
  margin: 5px 0;
  font-size: 14px;
}

.travel-booking .booking-summary .help-section .contact-info p i {
  color: var(--accent-color);
  margin-right: 8px;
  width: 16px;
}

.travel-booking .booking-summary .help-section .support-hours {
  margin-top: 10px;
}

.travel-booking .booking-summary .help-section .support-hours small {
  color: var(--secondary-accent);
  font-weight: 500;
}

@media (max-width: 991.98px) {
  .travel-booking .booking-summary {
    margin-top: 30px;
    position: static;
  }
}

@media (max-width: 575.98px) {
  .travel-booking .booking-form-container {
    padding: 25px 20px;
  }

  .travel-booking .booking-summary {
    padding: 20px;
  }

  .travel-booking .addon-options .addon-item .addon-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .travel-booking .payment-methods .method-selector label {
    padding: 12px;
  }

  .travel-booking .payment-methods .method-selector label i {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# Gallery Slider Section
--------------------------------------------------------------*/
.gallery-slider {
  overflow: hidden;
}

.gallery-slider .gallery-container {
  padding: 20px 0 40px;
  position: relative;
}

.gallery-slider .swiper-wrapper {
  height: auto !important;
  align-items: center;
  padding: 30px 0;
}

.gallery-slider .gallery-item {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
}

.gallery-slider .gallery-img {
  position: relative;
  overflow: hidden;
}

.gallery-slider .gallery-img img {
  transition: transform 0.6s ease;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.gallery-slider .gallery-img .gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s ease;
}

.gallery-slider .gallery-img .gallery-overlay i {
  color: var(--contrast-color);
  font-size: 3rem;
  transform: scale(0.5);
  transition: all 0.3s ease;
}

.gallery-slider .gallery-img:hover img {
  transform: scale(1.1);
}

.gallery-slider .gallery-img:hover .gallery-overlay {
  opacity: 1;
}

.gallery-slider .gallery-img:hover .gallery-overlay i {
  transform: scale(1);
}

.gallery-slider .swiper-pagination {
  position: relative;
  margin-top: 20px;
}

.gallery-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: transparent;
  border: 1px solid var(--accent-color);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.gallery-slider .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--accent-color);
  opacity: 1;
  transform: scale(1.2);
}

.gallery-slider .swiper-button-next,
.gallery-slider .swiper-button-prev {
  color: var(--accent-color);
  background: var(--surface-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: all 0.3s ease;
}

.gallery-slider .swiper-button-next:after,
.gallery-slider .swiper-button-prev:after {
  font-size: 16px;
  font-weight: bold;
}

.gallery-slider:hover .swiper-button-next,
.gallery-slider:hover .swiper-button-prev {
  opacity: 0.9;
}

.gallery-slider:hover .swiper-button-next:hover,
.gallery-slider:hover .swiper-button-prev:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

@media (max-width: 991.98px) {
  .gallery-slider .gallery-item {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  }

  .gallery-slider .swiper-button-next,
  .gallery-slider .swiper-button-prev {
    display: none;
  }
}

@media (max-width: 767.98px) {
  .gallery-slider .swiper-wrapper {
    padding: 15px 0;
  }

  .gallery-slider .gallery-img .gallery-overlay i {
    font-size: 2rem;
  }
}

/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
.gallery .isotope-filters {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 40px;
  padding: 0;
  list-style: none;
}

.gallery .isotope-filters li {
  display: inline-block;
  padding: 10px 20px;
  background: var(--surface-color);
  color: var(--default-color);
  border-radius: 30px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  transition: 0.3s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.gallery .isotope-filters li:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.gallery .isotope-filters li.filter-active {
  background: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

@media (max-width: 575.98px) {
  .gallery .isotope-filters {
    gap: 8px;
  }

  .gallery .isotope-filters li {
    padding: 8px 14px;
    font-size: 14px;
  }
}

.gallery .gallery-item {
  margin-bottom: 30px;
}

@media (max-width: 767.98px) {
  .gallery .gallery-item {
    margin-bottom: 20px;
  }
}

.gallery .gallery-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  height: 100%;
}

.gallery .gallery-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.gallery .gallery-card:hover .gallery-overlay {
  opacity: 1;
  transform: translateY(0);
}

.gallery .gallery-card:hover .gallery-image img {
  transform: scale(1.1);
}

.gallery .gallery-image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%;
  overflow: hidden;
}

.gallery .gallery-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.gallery .gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 25px;
  background: linear-gradient(to top, rgba(17, 17, 17, 0.85) 0%, rgba(17, 17, 17, 0) 100%);
  color: var(--contrast-color);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.gallery .gallery-overlay h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--contrast-color);
}

.gallery .gallery-overlay p {
  font-size: 14px;
  margin-bottom: 15px;
  opacity: 0.9;
}

.gallery .gallery-overlay .gallery-actions {
  display: flex;
  gap: 15px;
}

.gallery .gallery-overlay .gallery-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-color);
  color: var(--contrast-color);
  font-size: 18px;
  transition: 0.3s;
}

.gallery .gallery-overlay .gallery-actions a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  transform: scale(1.1);
}

.gallery .glightbox-clean .gslide-description {
  background: var(--default-color);
}

.gallery .glightbox-clean .gslide-title {
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/*--------------------------------------------------------------
# Blog Hero Section
--------------------------------------------------------------*/
.blog-hero .blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.blog-hero .blog-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--surface-color);
  /* Was color-mix(in srgb, bl, transparent 92%) -- "bl" is not a colour, so
     the parser dropped the whole declaration and these cards have been
     rendering with no shadow at all. Set to the brand ink at the same
     strength the rest of the site uses at rest. */
  box-shadow: 0 5px 15px color-mix(in srgb, var(--default-color), transparent 92%);
  transition: all 0.3s ease;
}

.blog-hero .blog-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--default-color), transparent 85%);
}

.blog-hero .blog-item:hover img {
  transform: scale(1.05);
}

.blog-hero .blog-item:hover .blog-content {
  background: linear-gradient(0deg, color-mix(in srgb, black, transparent 15%) 0%, transparent 100%);
}

.blog-hero .blog-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-hero .blog-item .blog-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(0deg, color-mix(in srgb, black, transparent 25%) 0%, transparent 100%);
  transition: background 0.3s ease;
}

.blog-hero .main-feature {
  aspect-ratio: 21/9;
}

.blog-hero .main-feature .post-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
  .blog-hero .main-feature .post-title {
    font-size: 2rem;
  }
}

@media (max-width: 767.98px) {
  .blog-hero .main-feature .post-title {
    font-size: 1.5rem;
  }
}

.blog-hero .main-feature .post-excerpt {
  color: var(--contrast-color);
  font-size: 1.1rem;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .blog-hero .main-feature .post-excerpt {
    display: none;
  }
}

.blog-hero .secondary-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

@media (max-width: 767.98px) {
  .blog-hero .secondary-features {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.blog-hero .secondary-features .blog-item {
  aspect-ratio: 3/4;
}

.blog-hero .regular-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 991.98px) {
  .blog-hero .regular-posts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .blog-hero .regular-posts {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.blog-hero .regular-posts .blog-item {
  aspect-ratio: 16/9;
}

.blog-hero .post-meta {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--contrast-color);
}

.blog-hero .post-meta .date,
.blog-hero .post-meta .category {
  display: flex;
  align-items: center;
}

.blog-hero .post-meta .date::before,
.blog-hero .post-meta .category::before {
  font-family: "bootstrap-icons";
  margin-right: 0.5rem;
  font-size: 1rem;
}

.blog-hero .post-meta .date::before {
  content: "\f282";
}

.blog-hero .post-meta .category::before {
  content: "\f5d3";
}

.blog-hero .post-title {
  margin: 0;
  font-family: var(--heading-font);
}

.blog-hero .post-title a {
  color: var(--contrast-color);
  text-decoration: none;
}

.blog-hero .post-title a:hover {
  color: color-mix(in srgb, var(--contrast-color), transparent 20%);
}

.blog-hero .post-title:not(h2) {
  font-size: 1.25rem;
}

@media (max-width: 991.98px) {
  .blog-hero .post-title:not(h2) {
    font-size: 1.1rem;
  }
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  background-color: var(--surface-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  padding: 30px;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}

.blog-posts .post-img {
  max-height: 240px;
  margin: -30px -30px 15px -30px;
  overflow: hidden;
}

.blog-posts .post-category {
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 10px;
}

.blog-posts .title {
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .post-author-img {
  width: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.blog-posts .post-author {
  font-weight: 600;
  margin-bottom: 5px;
}

.blog-posts .post-date {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Pagination 2 Section
--------------------------------------------------------------*/
.pagination-2 {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pagination-2 ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination-2 li {
  margin: 0 5px;
  transition: 0.3s;
}

.pagination-2 li a {
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
}

.pagination-2 li a.active,
.pagination-2 li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pagination-2 li a.active a,
.pagination-2 li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.blog-details .article-header {
  max-width: 800px;
  margin: 0 auto 3rem;
  text-align: center;
}

.blog-details .article-header .meta-categories {
  margin-bottom: 1.5rem;
}

.blog-details .article-header .meta-categories .category {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  margin: 0 0.5rem;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: 30px;
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

.blog-details .article-header .meta-categories .category:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.blog-details .article-header .title {
  font-size: 3.2rem;
  line-height: 1.2;
  margin-bottom: 2rem;
  color: var(--heading-color);
}

@media (max-width: 767.98px) {
  .blog-details .article-header .title {
    font-size: 2.2rem;
  }
}

.blog-details .article-header .article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.blog-details .article-header .article-meta .author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.blog-details .article-header .article-meta .author .author-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.blog-details .article-header .article-meta .author .author-info {
  text-align: left;
}

.blog-details .article-header .article-meta .author .author-info h4 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--heading-color);
}

.blog-details .article-header .article-meta .author .author-info span {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 0.9rem;
}

.blog-details .article-header .article-meta .post-info {
  display: flex;
  gap: 1.5rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 0.95rem;
}

.blog-details .article-header .article-meta .post-info span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 767.98px) {
  .blog-details .article-header .article-meta {
    justify-content: center;
    text-align: center;
  }

  .blog-details .article-header .article-meta .post-info {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.blog-details .article-featured-image {
  margin: 0 -2rem 3rem;
  height: 500px;
  overflow: hidden;
  border-radius: 16px;
}

.blog-details .article-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .blog-details .article-featured-image {
    margin: 0 -1rem 2rem;
    height: 300px;
  }
}

.blog-details .article-wrapper {
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 3rem;
  position: relative;
}

@media (max-width: 991.98px) {
  .blog-details .article-wrapper {
    grid-template-columns: 1fr;
  }
}

.blog-details .article-wrapper .table-of-contents {
  position: sticky;
  top: 100px;
  height: fit-content;
  padding: 2rem;
  background: var(--surface-color);
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

@media (max-width: 991.98px) {
  .blog-details .article-wrapper .table-of-contents {
    display: none;
  }
}

.blog-details .article-wrapper .table-of-contents h3 {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: var(--heading-color);
}

.blog-details .article-wrapper .table-of-contents nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blog-details .article-wrapper .table-of-contents nav ul li {
  margin-bottom: 0.75rem;
}

.blog-details .article-wrapper .table-of-contents nav ul li a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  padding-left: 1rem;
  position: relative;
}

.blog-details .article-wrapper .table-of-contents nav ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-color);
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.3s ease;
}

.blog-details .article-wrapper .table-of-contents nav ul li a:hover,
.blog-details .article-wrapper .table-of-contents nav ul li a.active {
  color: var(--heading-color);
}

.blog-details .article-wrapper .table-of-contents nav ul li a:hover::before,
.blog-details .article-wrapper .table-of-contents nav ul li a.active::before {
  opacity: 1;
}

.blog-details .article-wrapper .article-content {
  font-size: 1.15rem;
  line-height: 1.8;
}

.blog-details .article-wrapper .article-content .content-section {
  margin-bottom: 4rem;
}

.blog-details .article-wrapper .article-content .content-section .lead {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--heading-color);
  margin-bottom: 2rem;
}

.blog-details .article-wrapper .article-content .content-section h2 {
  font-size: 2.2rem;
  color: var(--heading-color);
  margin-bottom: 1.5rem;
}

.blog-details .article-wrapper .article-content .content-section .highlight-quote {
  margin: 3rem 0;
  padding: 3rem;
  background: var(--surface-color);
  border-radius: 12px;
  position: relative;
}

.blog-details .article-wrapper .article-content .content-section .highlight-quote::before {
  content: "“";
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 5rem;
  color: color-mix(in srgb, var(--accent-color), transparent 85%);
  font-family: serif;
  line-height: 1;
}

.blog-details .article-wrapper .article-content .content-section .highlight-quote blockquote {
  padding-left: 3rem;
}

.blog-details .article-wrapper .article-content .content-section .highlight-quote blockquote p {
  font-size: 1.5rem;
  font-style: italic;
  color: var(--heading-color);
  margin-bottom: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .highlight-quote blockquote cite {
  font-style: normal;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.blog-details .article-wrapper .article-content .content-section .image-with-caption {
  margin: 2rem 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.blog-details .article-wrapper .article-content .content-section .image-with-caption.right {
  float: right;
  max-width: 450px;
  margin: 0 0 2rem 2rem;
}

@media (max-width: 767.98px) {
  .blog-details .article-wrapper .article-content .content-section .image-with-caption.right {
    float: none;
    max-width: 100%;
    margin: 2rem 0;
  }
}

.blog-details .article-wrapper .article-content .content-section .image-with-caption img {
  width: 100%;
}

.blog-details .article-wrapper .article-content .content-section .image-with-caption figcaption {
  padding: 1rem;
  background: var(--surface-color);
  text-align: center;
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.blog-details .article-wrapper .article-content .content-section .feature-points {
  display: grid;
  gap: 2rem;
  margin: 2rem 0;
}

.blog-details .article-wrapper .article-content .content-section .feature-points .point {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.blog-details .article-wrapper .article-content .content-section .feature-points .point i {
  font-size: 2rem;
  color: var(--accent-color);
}

.blog-details .article-wrapper .article-content .content-section .feature-points .point h4 {
  margin: 0 0 0.5rem;
  color: var(--heading-color);
}

.blog-details .article-wrapper .article-content .content-section .feature-points .point p {
  margin: 0;
  font-size: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid {
  margin: 2rem 0;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card {
  background: var(--surface-color);
  border-radius: 12px;
  padding: 2rem;
  height: 100%;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card .icon {
  margin-bottom: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card .icon i {
  font-size: 2rem;
  color: var(--accent-color);
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card h4 {
  color: var(--heading-color);
  margin-bottom: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card ul {
  padding-left: 1.2rem;
  margin: 0;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card ul li {
  margin-bottom: 0.5rem;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.blog-details .article-wrapper .article-content .content-section .key-principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 3rem 0;
}

@media (max-width: 767.98px) {
  .blog-details .article-wrapper .article-content .content-section .key-principles {
    grid-template-columns: 1fr;
  }
}

.blog-details .article-wrapper .article-content .content-section .key-principles .principle {
  text-align: center;
  padding: 2rem;
  background: var(--surface-color);
  border-radius: 12px;
  position: relative;
}

.blog-details .article-wrapper .article-content .content-section .key-principles .principle .number {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-color);
  color: var(--contrast-color);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
}

.blog-details .article-wrapper .article-content .content-section .key-principles .principle h4 {
  color: var(--heading-color);
  margin: 1rem 0;
}

.blog-details .article-wrapper .article-content .content-section .key-principles .principle p {
  margin: 0;
  font-size: 0.95rem;
}

.blog-details .article-wrapper .article-content .content-section .info-box {
  display: flex;
  gap: 1.5rem;
  padding: 2rem;
  background: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 12px;
  margin: 2rem 0;
}

.blog-details .article-wrapper .article-content .content-section .info-box .icon i {
  font-size: 2.5rem;
  color: var(--accent-color);
}

.blog-details .article-wrapper .article-content .content-section .info-box .content h4 {
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

.blog-details .article-wrapper .article-content .content-section .info-box .content p {
  margin: 0;
}

.blog-details .article-wrapper .article-content .content-section .future-trends {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 2rem 0;
}

@media (max-width: 767.98px) {
  .blog-details .article-wrapper .article-content .content-section .future-trends {
    grid-template-columns: 1fr;
  }
}

.blog-details .article-wrapper .article-content .content-section .future-trends .trend {
  text-align: center;
  padding: 2rem;
  background: var(--surface-color);
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.blog-details .article-wrapper .article-content .content-section .future-trends .trend:hover {
  transform: translateY(-5px);
}

.blog-details .article-wrapper .article-content .content-section .future-trends .trend i {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .future-trends .trend h4 {
  color: var(--heading-color);
  margin-bottom: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .future-trends .trend p {
  margin: 0;
  font-size: 0.95rem;
}

.blog-details .article-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .article-footer h4 {
  color: var(--heading-color);
  margin-bottom: 1.5rem;
}

.blog-details .article-footer .share-article {
  margin-bottom: 3rem;
}

.blog-details .article-footer .share-article .share-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.blog-details .article-footer .share-article .share-buttons .share-button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.5rem;
  background: var(--surface-color);
  border-radius: 30px;
  color: var(--heading-color);
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-details .article-footer .share-article .share-buttons .share-button i {
  font-size: 1.2rem;
}

.blog-details .article-footer .share-article .share-buttons .share-button:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.blog-details .article-footer .share-article .share-buttons .share-button.twitter:hover {
  background: #1DA1F2;
}

.blog-details .article-footer .share-article .share-buttons .share-button.facebook:hover {
  background: #4267B2;
}

.blog-details .article-footer .share-article .share-buttons .share-button.linkedin:hover {
  background: #0077B5;
}

.blog-details .article-footer .article-tags .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.blog-details .article-footer .article-tags .tags .tag {
  padding: 0.5rem 1rem;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  border-radius: 30px;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.blog-details .article-footer .article-tags .tags .tag:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments .comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.blog-comments .comments-header .title {
  color: var(--heading-color);
  font-size: 32px;
  font-weight: 700;
  font-family: var(--heading-font);
  margin: 0;
}

.blog-comments .comments-header .comments-stats {
  background: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 8px 20px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-comments .comments-header .comments-stats .count {
  font-size: 18px;
  font-weight: 700;
}

.blog-comments .comments-header .comments-stats .label {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-comments .comments-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.blog-comments .comment-thread {
  position: relative;
}

.blog-comments .comment-thread:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 80px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent-color), transparent 40%), color-mix(in srgb, var(--accent-color), transparent 90%));
  z-index: 0;
}

@media (min-width: 768px) {
  .blog-comments .comment-thread:not(:last-child)::after {
    left: 35px;
  }
}

.blog-comments .comment-box {
  position: relative;
  transition: all 0.3s ease;
}

.blog-comments .comment-box.reply {
  margin-left: 50px;
  margin-top: 25px;
}

@media (min-width: 768px) {
  .blog-comments .comment-box.reply {
    margin-left: 70px;
  }
}

.blog-comments .comment-wrapper {
  display: flex;
  gap: 20px;
  position: relative;
}

.blog-comments .avatar-wrapper {
  position: relative;
  flex-shrink: 0;
}

.blog-comments .avatar-wrapper img {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  object-fit: cover;
  border: 3px solid var(--surface-color);
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
}

@media (min-width: 768px) {
  .blog-comments .avatar-wrapper img {
    width: 70px;
    height: 70px;
  }
}

.blog-comments .avatar-wrapper img:hover {
  transform: scale(1.05);
}

.blog-comments .avatar-wrapper .status-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--secondary-accent);
  border: 1px solid var(--surface-color);
  z-index: 1;
}

.blog-comments .comment-content {
  flex: 1;
  background-color: var(--surface-color);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.blog-comments .comment-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.blog-comments .comment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.blog-comments .comment-header .user-info h4 {
  color: var(--heading-color);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 5px;
}

.blog-comments .comment-header .user-info .time-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-comments .comment-header .user-info .time-badge i {
  font-size: 13px;
}

.blog-comments .comment-header .engagement .likes {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-radius: 20px;
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 500;
}

.blog-comments .comment-header .engagement .likes i {
  font-size: 13px;
}

.blog-comments .comment-body p {
  color: var(--default-color);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.blog-comments .comment-actions {
  display: flex;
  gap: 15px;
}

.blog-comments .comment-actions .action-btn {
  background: none;
  border: none;
  padding: 8px 15px;
  border-radius: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.blog-comments .comment-actions .action-btn i {
  font-size: 15px;
  transition: all 0.3s ease;
}

.blog-comments .comment-actions .action-btn:hover {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.blog-comments .comment-actions .action-btn:hover.like-btn i {
  transform: scale(1.2);
  color: var(--tertiary-accent);
}

.blog-comments .comment-actions .action-btn:hover.reply-btn i {
  transform: translateX(-3px);
}

.blog-comments .comment-actions .action-btn:hover.share-btn i {
  transform: translateY(-2px);
}

.blog-comments .comment-actions .action-btn.like-btn.active {
  color: var(--tertiary-accent);
}

.blog-comments .replies-container {
  margin-top: 25px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

@media (max-width: 767.98px) {
  .blog-comments .comments-header {
    margin-bottom: 30px;
  }

  .blog-comments .comments-header .title {
    font-size: 24px;
  }

  .blog-comments .comments-header .comments-stats {
    padding: 6px 15px;
  }

  .blog-comments .comments-header .comments-stats .count {
    font-size: 20px;
  }

  .blog-comments .comments-header .comments-stats .label {
    font-size: 12px;
  }

  .blog-comments .comment-content {
    padding: 20px;
  }

  .blog-comments .comment-header .user-info h4 {
    font-size: 16px;
  }

  .blog-comments .comment-header .user-info .time-badge {
    font-size: 13px;
  }

  .blog-comments .comment-body p {
    font-size: 14px;
  }

  .blog-comments .comment-actions .action-btn {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/*--------------------------------------------------------------
# Blog Comment Form Section
--------------------------------------------------------------*/
.blog-comment-form {
  max-width: 900px;
  margin: 30px auto 0 auto;
}

.blog-comment-form form {
  padding: 30px;
  background-color: var(--surface-color);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-comment-form .section-header {
  text-align: center;
  margin-bottom: 30px;
}

.blog-comment-form .section-header h3 {
  font-size: 28px;
  margin-bottom: 15px;
  position: relative;
  padding-bottom: 15px;
}

.blog-comment-form .section-header h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 3px;
  background: var(--accent-color);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.blog-comment-form .section-header p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 15px;
  margin: 0;
}

.blog-comment-form .form-group {
  margin-bottom: 20px;
}

.blog-comment-form .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--heading-color);
  font-size: 14px;
}

.blog-comment-form .form-group .form-control {
  height: 48px;
  padding: 10px 15px;
  color: var(--default-color);
  background-color: var(--surface-color);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  font-size: 14px;
  transition: all 0.3s ease-in-out;
}

.blog-comment-form .form-group .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.blog-comment-form .form-group .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.blog-comment-form .form-group .form-control:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.blog-comment-form .form-group textarea.form-control {
  height: auto;
  min-height: 120px;
  resize: vertical;
}

.blog-comment-form .btn-submit {
  padding: 12px 32px;
  border-radius: 99px;
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
}

.blog-comment-form .btn-submit:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.blog-comment-form .btn-submit:active {
  transform: translateY(0);
  box-shadow: none;
}

@media (max-width: 767.98px) {
  .blog-comment-form {
    padding: 20px;
  }

  .blog-comment-form .section-header h3 {
    font-size: 24px;
  }

  .blog-comment-form .btn-submit {
    width: 100%;
    padding: 12px 20px;
  }
}

/*--------------------------------------------------------------
# Slider Testimonials Section
--------------------------------------------------------------*/
.slider-testimonials .testimonials-slider {
  width: 100%;
  position: relative;
  padding-bottom: 60px;
}

.slider-testimonials .swiper-wrapper {
  height: auto;
}

.slider-testimonials .testimonial-item {
  background-color: var(--surface-color);
  padding: 40px;
  border-radius: 20px;
}

@media (max-width: 575.98px) {
  .slider-testimonials .testimonial-item {
    padding: 20px;
  }
}

.slider-testimonials .testimonial-item h2 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
}

.slider-testimonials .testimonial-item p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 30px;
  font-style: italic;
}

.slider-testimonials .testimonial-item .profile {
  gap: 15px;
}

.slider-testimonials .testimonial-item .profile .profile-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}

.slider-testimonials .testimonial-item .profile .profile-info h3 {
  font-size: 18px;
  margin: 0;
  font-weight: 600;
}

.slider-testimonials .testimonial-item .profile .profile-info span {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color) 70%, transparent);
}

.slider-testimonials .testimonial-item .featured-img-wrapper {
  min-height: 400px;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.slider-testimonials .testimonial-item .featured-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-testimonials .swiper-navigation {
  position: absolute;
  bottom: 0;
  gap: 10px;
}

.slider-testimonials .swiper-button-prev,
.slider-testimonials .swiper-button-next {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  margin: 0;
  width: 44px;
  height: 44px;
  background-color: var(--surface-color);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
  transition: 0.3s;
}

.slider-testimonials .swiper-button-prev::after,
.slider-testimonials .swiper-button-next::after {
  font-size: 20px;
  color: var(--default-color);
}

.slider-testimonials .swiper-button-prev:hover,
.slider-testimonials .swiper-button-next:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.slider-testimonials .swiper-button-prev:hover::after,
.slider-testimonials .swiper-button-next:hover::after {
  color: var(--contrast-color);
}

.testimonials .testimonial-item:nth-child(3n-1) {
  margin-top: 3rem;
}

.testimonials .testimonial-item:nth-child(3n) {
  margin-top: 1.5rem;
}

.testimonials .testimonial-item.highlight .testimonial-content {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.testimonials .testimonial-item.highlight .testimonial-content .quote-pattern {
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
}

.testimonials .testimonial-item.highlight .testimonial-content .quote-pattern i {
  color: var(--accent-color);
}

.testimonials .testimonial-content {
  background-color: var(--surface-color);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .testimonial-content:hover {
  transform: translateY(-5px);
}

.testimonials .testimonial-content p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 1.5rem 0;
  position: relative;
}

.testimonials .quote-pattern {
  position: absolute;
  top: -1.25rem;
  left: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--surface-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .quote-pattern i {
  font-size: 1.25rem;
  color: var(--accent-color);
}

.testimonials .client-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .client-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonials .client-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials .client-details h3 {
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.testimonials .client-details .position {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--heading-color), transparent 40%);
}

@media (max-width: 1199.98px) {

  .testimonials .testimonial-item:nth-child(3n-1),
  .testimonials .testimonial-item:nth-child(3n) {
    margin-top: 0;
  }

  .testimonials .testimonial-item:nth-child(even) {
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {

  .testimonials .testimonial-item:nth-child(even) {
    margin-top: 0;
  }

  .testimonials .testimonial-content {
    padding: 1.5rem;
  }

  .testimonials .testimonial-content p {
    font-size: 0.9375rem;
    margin: 1.25rem 0;
  }

  .testimonials .quote-pattern {
    width: 2.25rem;
    height: 2.25rem;
    top: -1.125rem;
  }

  .testimonials .quote-pattern i {
    font-size: 1.125rem;
  }

  .testimonials .client-info {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
  }

  .testimonials .client-image {
    width: 45px;
    height: 45px;
  }

  .testimonials .client-details h3 {
    font-size: 1rem;
  }

  .testimonials .client-details .position {
    font-size: 0.8125rem;
  }
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-sidebar {
  position: sticky;
  top: 100px;
}

.faq .faq-sidebar .faq-image {
  margin-bottom: 30px;
  border-radius: 14px;
  overflow: hidden;
}

.faq .faq-sidebar .faq-image img {
  transition: transform 0.5s ease;
}

.faq .faq-sidebar .faq-image img:hover {
  transform: scale(1.04);
}

.faq .faq-sidebar .contact-box {
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 14px;
  padding: 30px;
}

.faq .faq-sidebar .contact-box h3 {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq .faq-sidebar .contact-box h3 i {
  font-size: 24px;
  color: var(--accent-color);
}

.faq .faq-sidebar .contact-box p {
  margin-bottom: 20px;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.faq .faq-sidebar .contact-box .btn-contact {
  display: inline-block;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 10px 24px;
  border-radius: 99px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.faq .faq-sidebar .contact-box .btn-contact:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.faq .faq-tabs .nav-pills {
  gap: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-bottom: 15px;
}

.faq .faq-tabs .nav-pills .nav-link {
  background: transparent;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  padding: 10px 25px;
  transition: all 0.3s ease;
}

.faq .faq-tabs .nav-pills .nav-link.active {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.faq .faq-tabs .nav-pills .nav-link:hover:not(.active) {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  color: var(--default-color);
}

.faq .faq-tabs .tab-content {
  padding-top: 25px;
}

.faq .faq-item {
  position: relative;
  margin-bottom: 20px;
  background-color: var(--surface-color);
  border-radius: 14px;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 25px 30px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq .faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--default-color), transparent 92%);
}

.faq .faq-item h3 {
  font-size: 17px;
  font-weight: 600;
  padding-right: 35px;
  margin-bottom: 0;
  transition: color 0.3s ease;
}

.faq .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-item .faq-content p {
  margin-bottom: 0;
  padding-top: 15px;
  font-size: 15px;
  line-height: 1.6;
  overflow: hidden;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.faq .faq-item .faq-toggle {
  position: absolute;
  right: 25px;
  top: 25px;
  font-size: 18px;
  color: var(--accent-color);
  transition: transform 0.3s ease;
}

.faq .faq-item.faq-active {
  background-color: color-mix(in srgb, var(--surface-color), var(--accent-color) 3%);
}

.faq .faq-item.faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-item.faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
}

.faq .faq-item.faq-active .faq-toggle {
  transform: rotate(180deg);
}

@media (max-width: 991.98px) {
  .faq .faq-sidebar {
    position: relative;
    top: 0;
    margin-bottom: 40px;
  }

  .faq .faq-sidebar .contact-box {
    text-align: center;
  }

  .faq .faq-tabs .nav-pills {
    flex-wrap: wrap;
  }

  .faq .faq-tabs .nav-pills .nav-item {
    flex: 1 0 30%;
  }

  .faq .faq-tabs .nav-pills .nav-link {
    text-align: center;
  }
}

@media (max-width: 767.98px) {
  .faq .faq-tabs .nav-pills .nav-item {
    flex: 1 0 100%;
  }

  .faq .faq-item {
    padding: 20px;
  }

  .faq .faq-item h3 {
    font-size: 16px;
    line-height: 1.5;
  }

  .faq .faq-item .faq-toggle {
    right: 20px;
    top: 20px;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .contact-info-box {
  background-color: var(--surface-color);
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
  padding: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease;
}

.contact .contact-info-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.contact .contact-info-box .icon-box {
  background-color: color-mix(in srgb, var(--tertiary-accent), transparent 92%);
  color: var(--tertiary-accent);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact .contact-info-box .icon-box i {
  font-size: 24px;
  line-height: 0;
}

.contact .contact-info-box .info-content h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact .contact-info-box .info-content p {
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 15px;
  line-height: 1.5;
}

.contact .contact-info-box .info-content p:last-child {
  margin-bottom: 0;
}

.contact .map-section {
  position: relative;
  width: 100%;
  z-index: 1;
}

.contact .map-section iframe {
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
}

.contact .form-container-overlap {
  position: relative;
  margin: -100px 40px 60px 40px;
  z-index: 2;
}

.contact .contact-form-wrapper {
  background-color: var(--surface-color);
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  padding: 40px;
}

.contact .contact-form-wrapper h2 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 30px;
  position: relative;
}

.contact .contact-form-wrapper h2:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  background-color: var(--accent-color);
}

.contact .contact-form-wrapper .form-group {
  margin-bottom: 20px;
}

.contact .contact-form-wrapper .form-group .input-with-icon {
  position: relative;
}

.contact .contact-form-wrapper .form-group .input-with-icon i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 18px;
  z-index: 10;
}

.contact .contact-form-wrapper .form-group .input-with-icon i.message-icon {
  top: 28px;
}

.contact .contact-form-wrapper .form-group .input-with-icon textarea+i {
  top: 25px;
  transform: none;
}

.contact .contact-form-wrapper .form-group .input-with-icon .form-control {
  border-radius: 8px;
  padding: 12px 15px 12px 45px;
  height: 3.5rem;
  color: var(--default-color);
  background-color: var(--surface-color);
  font-size: 15px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .contact-form-wrapper .form-group .input-with-icon .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 90%);
}

.contact .contact-form-wrapper .form-group .input-with-icon .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.contact .contact-form-wrapper .form-group .input-with-icon textarea.form-control {
  height: 180px;
  resize: none;
  padding-top: 15px;
}

.contact .contact-form-wrapper .btn-submit {
  background-color: var(--btn-color);
  border: none;
  color: var(--contrast-color);
  padding: 12px 40px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.contact .contact-form-wrapper .btn-submit:hover {
  background-color: var(--btn-hover-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--btn-color), transparent 60%);
}

.contact .contact-form-wrapper .btn-submit:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.contact .contact-form-wrapper .loading,
.contact .contact-form-wrapper .error-message,
.contact .contact-form-wrapper .sent-message {
  margin-top: 10px;
  margin-bottom: 20px;
}

@media (max-width: 991.98px) {
  .contact .form-container-overlap {
    margin-top: -120px;
  }

  .contact .contact-form-wrapper {
    padding: 30px;
  }
}

@media (max-width: 767.98px) {
  .contact .contact-info-box {
    margin-bottom: 20px;
  }

  .contact .form-container-overlap {
    margin-top: -100px;
  }

  .contact .contact-form-wrapper {
    padding: 25px;
  }

  .contact .contact-form-wrapper h2 {
    font-size: 24px;
  }

  .contact .map-section {
    height: 450px;
  }
}

@media (max-width: 575.98px) {
  .contact .map-section iframe {
    height: 200px;
    border-radius: 8px;
  }

  .contact .form-container-overlap {
    margin: 20px 0 0 0;
  }

  .contact .contact-form-wrapper {
    padding: 20px;
  }

  .contact .btn-submit {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Terms Of Service Section
--------------------------------------------------------------*/
.terms-of-service .tos-header {
  margin-bottom: 60px;
}

.terms-of-service .tos-header .last-updated {
  display: inline-block;
  padding: 8px 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 30px;
  color: var(--accent-color);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.terms-of-service .tos-header h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.terms-of-service .tos-header p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

.terms-of-service .tos-content .content-section {
  margin-bottom: 50px;
  scroll-margin-top: 100px;
}

.terms-of-service .tos-content .content-section:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.terms-of-service .tos-content .content-section p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.7;
  margin-bottom: 20px;
}

.terms-of-service .tos-content .content-section p:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .info-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 8px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .info-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .info-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .list-items {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.terms-of-service .tos-content .content-section .list-items li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .list-items li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .list-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .alert-box {
  display: flex;
  gap: 20px;
  padding: 25px;
  background-color: var(--surface-color);
  border-radius: 8px;
  border-left: 4px solid var(--accent-color);
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .alert-box i {
  font-size: 2rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content h5 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .prohibited-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 575.98px) {
  .terms-of-service .tos-content .content-section .prohibited-list {
    grid-template-columns: 1fr;
  }
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background-color: var(--surface-color);
  border-radius: 12px;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item i {
  color: var(--danger-color);
  font-size: 1.2rem;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item span {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .disclaimer-box {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 8px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .disclaimer-box p {
  margin-bottom: 15px;
  font-weight: 500;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .notice-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 8px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .notice-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .notice-box p {
  margin: 0;
  font-size: 0.95rem;
}

@media print {

  .terms-of-service .content-section {
    page-break-inside: avoid;
  }
}

/*--------------------------------------------------------------
# Privacy Section
--------------------------------------------------------------*/
.privacy {
  font-size: 1rem;
  line-height: 1.7;
}

.privacy .privacy-header {
  margin-bottom: 60px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-bottom: 40px;
}

.privacy .privacy-header .header-content {
  max-width: 800px;
  margin: 0 auto;
}

.privacy .privacy-header .header-content .last-updated {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 20px;
}

.privacy .privacy-header .header-content h1 {
  font-size: 2.8rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.privacy .privacy-header .header-content .intro-text {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
}

.privacy .privacy-content {
  max-width: 800px;
  margin: 0 auto 60px;
}

.privacy .privacy-content .content-section {
  margin-bottom: 50px;
}

.privacy .privacy-content .content-section:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 25px;
  font-weight: 600;
}

.privacy .privacy-content .content-section h3 {
  font-size: 1.4rem;
  color: var(--heading-color);
  margin: 30px 0 20px;
  font-weight: 500;
}

.privacy .privacy-content .content-section p {
  margin-bottom: 20px;
}

.privacy .privacy-content .content-section p:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.privacy .privacy-content .content-section ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
}

.privacy .privacy-content .content-section ul li:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.privacy .privacy-contact {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .privacy-contact h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.privacy .privacy-contact p {
  margin-bottom: 20px;
}

.privacy .privacy-contact .contact-details {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
}

.privacy .privacy-contact .contact-details p {
  margin-bottom: 10px;
}

.privacy .privacy-contact .contact-details p:last-child {
  margin-bottom: 0;
}

.privacy .privacy-contact .contact-details p strong {
  color: var(--heading-color);
  font-weight: 600;
}

@media print {
  .privacy {
    font-size: 12pt;
    line-height: 1.5;
  }

  .privacy .privacy-header {
    text-align: left;
    border-bottom: 1pt solid #000;
    padding-bottom: 20pt;
    margin-bottom: 30pt;
  }

  .privacy h1 {
    font-size: 24pt;
  }

  .privacy h2 {
    font-size: 18pt;
    page-break-after: avoid;
  }

  .privacy h3 {
    font-size: 14pt;
    page-break-after: avoid;
  }

  .privacy p,
  .privacy ul {
    page-break-inside: avoid;
  }

  .privacy .contact-details {
    border: 1pt solid #000;
    padding: 15pt;
  }
}

@media (max-width: 767.98px) {
  .privacy .privacy-header {
    margin-bottom: 40px;
    padding-bottom: 30px;
  }

  .privacy .privacy-header .header-content h1 {
    font-size: 2.2rem;
  }

  .privacy .privacy-header .header-content .intro-text {
    font-size: 1.1rem;
  }

  .privacy .privacy-content .content-section {
    margin-bottom: 40px;
  }

  .privacy .privacy-content .content-section h2 {
    font-size: 1.6rem;
  }

  .privacy .privacy-content .content-section h3 {
    font-size: 1.3rem;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Blog
# Mirrors the .tour-card pattern (radius/shadow/hover) for visual consistency.
--------------------------------------------------------------*/
.blog-post-card {
  background-color: var(--surface-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
  margin-bottom: 30px;
}

.blog-post-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 80%);
}

.blog-post-card .blog-post-card-image {
  position: relative;
  display: block;
  overflow: hidden;
  height: 220px;
}

.blog-post-card .blog-post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.blog-post-card:hover .blog-post-card-image img {
  transform: scale(1.05);
}

.blog-post-card .blog-post-card-badge {
  position: absolute;
  top: 15px;
  left: 15px;
  /* White caps on the raw accent measured 2.3:1, and 12px sat under the
     readable floor. The dark of the same family and one more pixel. */
  background-color: var(--cian-dark);
  color: var(--contrast-color);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-post-card .blog-post-card-content {
  padding: 25px;
}

.blog-post-card .blog-post-card-content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
}

.blog-post-card .blog-post-card-content h4 a {
  color: var(--heading-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-post-card .blog-post-card-content h4 a:hover {
  color: var(--accent-color);
}

.blog-post-card .blog-post-card-content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.blog-post-card .blog-post-card-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
}

.blog-post-card .blog-post-card-meta span {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.blog-post-card .blog-post-card-meta span i {
  color: var(--accent-color);
}

/* Category filter pills (blog index, category + tag pages) */
.blog-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 0 40px;
}

.blog-filter a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 99px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  /* Category filters are the navigation of the blog index; at 2.3:1 they were
     the least readable control on the page. */
  color: var(--cian-ink);
  background: #fff;
  border: 1.5px solid color-mix(in srgb, var(--accent-color) 22%, #fff);
  text-decoration: none;
  transition: all 0.18s ease;
}

.blog-filter a:hover {
  border-color: var(--accent-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.blog-filter a.active {
  /* Filled, so it needs the ground that carries white. */
  background: var(--cian-dark);
  color: #fff;
  border-color: var(--cian-dark);
}

.blog-filter a .count {
  /* 0.6 took the count to 3.3:1 against white. */
  opacity: 0.8;
  font-weight: 500;
  font-size: 0.8rem;
}

.blog-filter a.active .count {
  opacity: 0.85;
}

/* Tag pills on individual posts */
.blog-tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  margin: 0 8px 8px 0;
  border-radius: 99px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: #555;
  background: var(--background-color);
  transition: all 0.18s ease;
}

.blog-tag-pill:hover {
  background: var(--btn-color);
  color: #fff;
  transform: translateY(-1px);
}

/* Dev-only "Scheduled · <date>" preview pill. Rendered only in `npm run dev`
   (gated on import.meta.env.DEV in PostCard/BlogPost) so an author can see a
   future-dated post before it goes live; never present in the production build.
   Muted amber so it reads as a draft/preview, not a published element. */
.blog-scheduled-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-bottom: 14px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  color: color-mix(in srgb, var(--accent-color) 50%, black);
  background: var(--cian-light);
  border: 1px solid color-mix(in srgb, var(--accent-color) 60%, white);
}

.blog-scheduled-badge i {
  font-size: 0.85em;
}

/* Modern breadcrumb on blog post/category/tag pages (outside the hero) */
.blog-index .breadcrumbs ol,
.blog-post .breadcrumbs ol,
.blog-taxonomy .breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0 0 24px;
  font-size: 0.85rem;
}

.blog-index .breadcrumbs li,
.blog-post .breadcrumbs li,
.blog-taxonomy .breadcrumbs li {
  display: flex;
  align-items: center;
}

.blog-index .breadcrumbs li + li::before,
.blog-post .breadcrumbs li + li::before,
.blog-taxonomy .breadcrumbs li + li::before {
  content: "\203A";
  margin-right: 8px;
  color: #bbb;
}

.blog-index .breadcrumbs a,
.blog-post .breadcrumbs a,
.blog-taxonomy .breadcrumbs a {
  color: var(--accent-color);
  text-decoration: none;
}

.blog-index .breadcrumbs a:hover,
.blog-post .breadcrumbs a:hover,
.blog-taxonomy .breadcrumbs a:hover {
  text-decoration: underline;
}

.blog-index .breadcrumbs .current,
.blog-post .breadcrumbs .current,
.blog-taxonomy .breadcrumbs .current {
  /* #888 measured 3.4:1. --muted-color is the grey the style guide already
     prescribes and measures 8.6:1. */
  color: var(--muted-color);
  font-weight: 600;
}

/* Blog post article body */
.blog-post-hero {
  position: relative;
  height: 420px;
  overflow: hidden;
}

.blog-post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-article {
  max-width: 820px;
  margin: 0 auto;
}

.blog-post-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 15px;
  margin-bottom: 30px;
}

.blog-post-byline span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.blog-post-byline i {
  color: var(--accent-color);
}

.blog-post-body {
  font-size: 17px;
  line-height: 1.8;
  color: var(--default-color);
}

.blog-post-body h2 {
  margin-top: 2em;
  margin-bottom: 0.6em;
  font-weight: 700;
}

.blog-post-body h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 700;
}

.blog-post-body ul,
.blog-post-body ol {
  margin-bottom: 1.4em;
  padding-left: 1.4em;
}

.blog-post-body li {
  margin-bottom: 0.4em;
}

.blog-post-body a {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Author bio */
.author-bio {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background-color: var(--surface-color);
  border-radius: 12px;
  padding: 25px;
  margin: 40px 0;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.author-bio-photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.author-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-color);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.author-bio-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 4px;
}

.author-bio-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.author-bio-text {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 10px;
}

.author-bio-credentials {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.author-bio-credentials li {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.author-bio-credentials i {
  color: var(--accent-color);
}


/* Related tours */
.related-tours {
  margin: 40px 0;
}

.related-tours-title {
  font-weight: 700;
  margin-bottom: 24px;
}

.related-tour-card {
  display: block;
  background-color: var(--surface-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
  height: 100%;
  text-decoration: none;
}

.related-tour-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 80%);
}

.related-tour-image {
  height: 170px;
  overflow: hidden;
}

.related-tour-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.related-tour-card:hover .related-tour-image img {
  transform: scale(1.05);
}

.related-tour-content {
  padding: 18px;
}

.related-tour-content h3,
.related-tour-content h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 10px;
}

.related-tour-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 10px;
}

.related-tour-price {
  font-weight: 700;
  color: var(--accent-color);
}

.related-tour-cta {
  font-weight: 600;
  color: var(--accent-color);
  font-size: 14px;
}

/* Blog pagination */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.blog-pagination a,
.blog-pagination span {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  color: var(--heading-color);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.blog-pagination a:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.blog-pagination .active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination .disabled {
  opacity: 0.4;
  pointer-events: none;
}