@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Island+Moments&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

/* 1) Design tokens */
:root {
    --primary: #f38d5c;
    --secondary: #64b6a6;
    --accent: #3d5d8b;
    --accent-dark: #06364f;
    --bg: #ffffff;
    --text: #1b1b1b;
    --muted: #6b7280;
    --surface: #f6f7f8;
    --border: #e5e7eb;

    --radius: 16px;
    --shadow: 0 10px 30px rgba(0,0,0,.07);

    /* typography */
    --ff:'Poppins', sans-serif;
    --fs-sm: clamp(.9rem, .85rem + .2vw, 1rem);
    --fs-base: clamp(1rem, .95rem + .35vw, 1.1rem);
    --fs-lg: clamp(1.1rem, 1rem + .8vw, 1.5rem);
    --fs-xl: clamp(1.6rem, 1.3rem + 2vw, 3rem);
    --header-h: 68px;
  }
  .text-accent { color: var(--accent) }
  /* 2) Modern reset (lightweight) */
  *,*::before,*::after { box-sizing: border-box }
  * { margin: 0 }
  html:focus-within { scroll-behavior: smooth }
  html, body { height: 100% }
  body {
    font-family: var(--ff);
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  img, picture, video, canvas, svg { display: block; max-width: 100% }
  input, button, textarea, select { font: inherit }
  a { color: inherit; text-decoration: none }
  ul[role='list'], ol[role='list'] { list-style: none; padding: 0; margin: 0 }

  .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(50%); clip: rect(0 0 0 0); overflow: hidden }
  .skip-link {
    position: absolute; left: -999px; top: -999px; background: var(--primary); color: #fff;
    padding: .6rem 1rem; border-radius: 8px; z-index: 9999
  }
  .skip-link:focus { left: 1rem; top: 1rem }

  /* 3) Layout helpers */


  /* 4) Header / Nav */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 1030;
    /* height: var(--header-h); */  /* ❌ remove this */
    height: auto;            /* ✅ let it grow with content */
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(140%) blur(10px);
  }
  .header-row {
    padding: 20px 80px;
  }
  .logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700 }
  .logo-mark { font-size: 1.2rem }
  .logo-text { letter-spacing: .3px }

  .nav {
    display: flex;
    align-items: center;
    /* gap: 1.25rem; */
  }
  .nav-list {
    display: none;
    list-style: none;
    color: var(--accent-dark);
    font-weight: 600;
    font-size: 16px;
    font-family: var(--ff);
    padding: 8px;
  }
  /* Make dropdown items use disc bullets */
.dropdown-menu {
  list-style-type: disc !important;   /* force discs */
  padding-left: 1.5rem;              /* space so bullets show */
}

.dropdown-menu > li {
  list-style: inherit;               /* ensure <li> shows bullets */
}

.dropdown-menu > li > a {
  display: list-item;                /* force <a> to behave like list item */
  list-style: inherit;
  padding-left: 0.25rem;             /* adjust spacing */
}

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .62rem 1rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-weight: 600;
    transition: transform .15s ease, background-color .2s ease, border-color .2s ease;
    will-change: transform;
  }
  .btn:focus-visible{
    outline: 2px solid var(--secondary);
    outline-offset: 2px
  }
  .btn--primary { background: var(--primary); color: #fff }
  .btn--primary:hover { transform: translateY(-1px); filter: brightness(.98) }
  .btn--ghost { background: transparent; border-color: var(--border); color: var(--text) }
  .btn--ghost:hover { border-color: var(--text) }

  /* Mobile nav */
  .nav-toggle {
    inline-size: 42px; block-size: 42px; border: 0; background: transparent; position: relative; cursor: pointer;
  }
  .nav-toggle-box, .nav-toggle-box::before, .nav-toggle-box::after {
    content: ""; position: absolute; inset-inline: 9px; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; border-radius: 2px;
  }
  .nav-toggle-box { top: 50%; transform: translateY(-50%) }
  .nav-toggle-box::before { top: -8px }
  .nav-toggle-box::after { top: 8px }
  /* Dropdown nav */
.has-dropdown {
  position: relative;
}
.has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.dropdown-menu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  padding: .5rem 0;
  display: none;
  flex-direction: column;
  z-index: 100;
}
.dropdown-menu li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dropdown-menu li a {
  display: block;
  padding: .5rem 1rem;
  color: #1b1b1b;
  font-size: .9rem;
  transition: background .2s ease;
}
.dropdown-menu li a:hover {
  background: #f38d5c;
  color: #fff;
}
.dropdown-toggle::after{
  color:var(--accent-dark) !important;
}
.dropdown-toggle:hover::after{
  color:var(--primary) !important;
}
.has-dropdown:hover > .dropdown-menu {
  display: flex;
}
.nav-btn a{
  font-weight: 400;
}
.nav-btn a img {
  width: 20px; height: 30px;
  margin-right: 4px;
}
.tailor-btn:hover{
background-color: var(--accent-dark);
color: #fff;
transition: background 0.6s ease;
}
/* Mobile fix: dropdowns inline in drawer */
@media (max-width: 900px) {
  .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    display: none;
  }
  .has-dropdown.open > .dropdown-menu {
    display: flex;
  }
}

  /* Collapsible panel */
  @media (max-width: 900px) {
    .nav { gap: .75rem }
    .nav-list {
      position: fixed; inset: var(--header-h) 0 auto 0; background: #fff;
      display: grid; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--border);
      transform: translateY(-6px); opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    .nav.is-open .nav-list { opacity: 1; pointer-events: auto; transform: translateY(0) }
    .nav.is-open + .btn { display: none } /* hide CTA when drawer open */
  }

  @media (min-width: 901px) {
    .nav-toggle { display: none }
    .nav-list { display: flex; align-items: center; gap: 1rem }
  }
  @media (max-width:768px){
    .navbar-desk-mob{
      padding-left: 10px !important;
      padding-right: 5px !important;
    }
    .navbar-brand{
      padding-left: 0px !important;
      padding-right: 0px !important;

    }
  }

  /* 5) Hero */
/* Base hero wrapper */
.hero {
  margin-top: 0;
  /* background-image: url('/assets/images/hero-bg-2.png'); */
  background-size: cover;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
  padding: 0 20px;
  min-height: 70vh;
}
.hero-box{
  /* min-height: 420px;   */
  padding: 40px 20px;
  /* background: #fff; */
  /* border: 1px solid var(--border); */
}

/* Right image occupies ~65% from the right */
.hero-media{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 65%;
}
.object-cover{ object-fit: cover; }

/* Curved blue overlay (matches screenshot “arc”) */
/* .hero-curve {
  position: absolute;
  inset: 0 auto 0 0;
  width: 65%;
  background: #fff;
  clip-path: ellipse(85% 100% at 0% 50%);
  z-index: 1;
} */


/* Headline & button keep your palette */
.text-accent-dark{ color: var(--accent-dark); }
.btn--primary{
  background: var(--primary);
  color:#fff;
  border:1px solid var(--primary);
}
.bg-primary-light{
  background-color:#fff8f1;
}
.btn--primary:hover{ filter: brightness(.98); transform: translateY(-1px); }

/* Mobile tweaks: let the image take full width under content */
@media (max-width: 991.98px){
  /* .hero-box{ min-height: 520px; } */
  .hero-media{ position: absolute; width: 100%; height: 60%; top: auto; bottom: 0; }
  .hero-curve{ width: 100%; clip-path: ellipse(120% 60% at 35% 40%); }
}

  .card-badge {
    position: absolute; top: 12px; right: 12px; background: var(--secondary); color: #fff;
    padding: .25rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 700;
  }
  .card-title {
    font-weight: 800; font-size: 1.2rem; margin-bottom: .25rem
  }
  .card-body { color: var(--muted) }

  /* 6) Footer */
  .site-footer {
    padding: 28px 0; border-top: 1px solid var(--border); background: #fff;
  }
  .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap }
  /* .footer-links { display: flex; gap: .9rem }
  .footer-links a { color: var(--muted) }
  .footer-links a:hover { color: var(--text) } */

  /* 7) Small polish */
  :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px }
  .no-js .nav-list { display: flex } /* fallback if JS disabled */
  /* Top Bar */
.top-bar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  font-size: 1rem;
  color: var(--accent);
  padding: 12px 80px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.top-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 10px;
  flex-wrap: wrap;
  gap: .5rem;
}
.top-left span {
  margin-right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: #1b1b1b;
}
.top-left i {
  color: #f38d5c;
}
.top-bar span{
  color: var(--accent);
}
.top-bar span a{
  font-size: 12px;
}
.special-offer {
  border: 1px solid #f38d5c;
  color: #f38d5c;
  padding: .3rem .6rem;
  border-radius: 6px;
  font-weight: 600;
}
.special-offer i { margin-right: .25rem; }
.special-offer:hover,
.special-offer:hover span{
  background: #f38d5c;
  color: #fff;
}
.top-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dropdown {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  cursor: pointer;
}
.dropdown i { color: #f38d5c; }
.social a {
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  font-size: 0.85rem;
  transition: background .2s ease;
}
.social a:hover {
  background: #64b6a6;
}
/* Map brand color to Bootstrap utilities without changing your palette */
.text-primary-brand { color: var(--secondary) !important; }
.bg-primary-brand   { background-color: var(--primary) !important; }
.bg-secondary-brand { background-color: var(--secondary) !important; color: #fff; }
.border-primary-brand { border-color: var(--primary) !important; }
.text-primary{
  color: var(--primary) !important;
}
.text-secondary{
  color: var(--secondary) !important;
}
.text-accent-dark{
  color: var(--accent-dark) !important;
}

/* Top bar look (kept from your design) */
.top-bar {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  color: var(--accent);
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
  padding-top: 8px; padding-bottom: 8px;
}
.top-bar i { color: var(--primary); }
.top-bar span {
  color: var(--accent);
  font-weight: 500;
}
/* .top-bar span i {
  color: var(--primary);
} */
.special-offer {
  border: 1px solid var(--primary);
  color: var(--primary);
  padding: .3rem .6rem;
  border-radius: 6px;
  font-weight: 600;
}
.special-offer:hover, .special-offer:hover span { background: var(--primary); color: #fff; }
.special-offer:hover i { color: #fff; }

/* Navbar colors/spacing */
.navbar .nav-link { color: var(--accent-dark); font-weight: 600; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--primary); }
.navbar-toggler { border: none; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(243, 141, 92, .25); }

/* Dropdown menu styling to match your UI */
.dropdown-menu { padding: .4rem 0; }
.dropdown-item { padding: .5rem 1rem; }
.dropdown-item:hover { background: var(--primary); color: #fff; }
.dropdown-item::before {
  content: "• "; /* Bullet point */
  color: #1a3c6e;
}
.dropdown-item{
  font-weight: 400 !important;
  color: var(--accent-dark) !important;
}
/* Social round buttons */
.social a {
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  inline-size: 30px; block-size: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem;
  transition: background .2s ease;
}
.social a:hover { background: var(--secondary); }

/* Keep your primary button style */
.btn--primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.btn--primary:hover { filter: brightness(.98); transform: translateY(-1px); }
/* .custom-btn{
  background-color: var(--primary);
} */
.custom-btn:hover,.btn-send:hover {
  background: linear-gradient(90deg, #285570 0%, #64B6A6 100%);
  color: #fff;
  border-color: var(--secondary);
  transform: translateY(-1px);
  transition: all 0.4s ease;
}
.custom-btn-2:hover {
  background: var(--primary) !important;
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
}
.custom-btn, .custom-btn-2 {
  font-weight: 400;
}
.custom-btn-3:hover{
  background-color: transparent !important;
  border-color: var(--secondary);
  color: var(--secondary);
}
.custom-btn-4{
  background-color: var(--primary);
  color: #fff;
}
.custom-btn-4:hover{
  background-color: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
  transition: all 0.4s ease;
}
/* promo banner */
.promo-banner{
  background-image: url('/assets/images/promo-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* padding: 60px 20px; */
  background-color: #EEF7F5;
  padding-top: 0 !important;
  margin-top: -5px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
@media (max-width: 767px){
  .promo-banner{
    background-image: url('/assets/images/discount-bg-mob-3.svg');
    background-size: cover;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 20px;
  }
  .promo-text{
    padding: 80px 10px !important;
    margin-top: -20px;
  }
  .promo-text h3{
    margin-top: 40px;
  }
  .deals-sec{
    margin-top: -36px;
  }
}
.promo-text{
  padding: 70px 40px 10px;
}

.promo-icon{
  width: 60px; height: 60px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary) 18%, white);
  color: var(--primary);
  font-size: 28px;
}

.tour-card{
  background: #fff;
  /* border: 1px solid var(--border); */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
  display: flex; flex-direction: column;
}
.tour-media img{
  width: 100%; height: 200px; object-fit: cover;
  display: block;
}
.tour-body{
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  background-color: #fff8f1;
}
.tour-title{ font-size: 1.05rem; font-weight: 500; color: var(--accent-dark); margin: .25rem 0 .5rem; }
.tour-desc{ font-size: .95rem; }
.tour-meta i{ color: var(--primary);  }
.price .h5{ font-weight: 800; }

/* SPECIAL OFFER ribbon */
/* .tour-card.is-offer{ position: relative; } */

.tour-card.is-offer::before {
  content: url(/assets/icons/special-offer.png);
  position: absolute;
  top: -19px;
  left: -18px;
  z-index: 99;
  background: none;
  padding: 0;
  border: none;
  box-shadow: none;
}
.carousel-item{
  position: relative;
}
/* Give the outer carousel a small side buffer so swipes don't start at the OS edge */
#featuredCarousel{
  padding-inline: 0px;          /* <- new */
  position: relative;
}

/* Track must clip; no side padding here to avoid “peek” */
#featuredCarousel .carousel-inner{
  overflow: hidden;
  padding: 0;
}

/* We moved the gutter to the outer, so zero here */
#featuredCarousel .slide-pad{ padding: 0; }

/* Keep smooth motion */
#featuredCarousel .carousel-item{
  transition: transform .6s ease-in-out;
  backface-visibility: hidden;
  /* -webkit-transform: translateZ(0); */
  will-change: transform;
}

/* Optional: align indicators with the padded content */
#featuredCarousel .carousel-indicators{
  margin-left: 30px;
  margin-right: 30px;
}
@media (max-width: 768px){
  .tour-card.is-offer::before {
    content: url(/assets/icons/special-offer.png);
    position: absolute;
    top: -19px;
    left: -18px;
    z-index: 99;
    background: none;
    padding: 0;
    border: none;
    box-shadow: none;
  }
}

/* small polish */
.brand-divider .line{ width:120px; height:2px; background: color-mix(in srgb, var(--primary) 35%, #ddd); }
.brand-divider .ankh{ font-size:22px; color:var(--primary); line-height:1; position:relative; }
.brand-divider .ankh::before,.brand-divider .ankh::after{
  content:""; position:absolute; top:50%; width:14px; height:2px;
  background: color-mix(in srgb, var(--primary) 35%, #ddd); transform:translateY(-50%);
}
.brand-divider .ankh::before{ left:-18px } .brand-divider .ankh::after{ right:-18px }

@media (min-width: 992px){
  .tour-media img{ height: 250px; }
}
.duration .sp-1, .tour-type .sp-1, .group .sp-1 {
  color: var(--accent-dark);
  font-weight: 500;
  font-size: .8rem;
}
.duration .sp-2, .tour-type .sp-2, .group .sp-2 {
  font-size: .7rem;
}

.duration span, .tour-type span, .group span {
  font-size: .9rem;
  /* color: var(--muted); */
}
.tour-meta{
  border-bottom: #d8d3cf 1px solid;
  padding-bottom: 10px;
}
/* divider with tiny dots and a thin line */
.why-divider{
  position: relative; height: 18px;
  display: flex; align-items: center; gap: 16px;
}
/* .why-divider::before{
  content:""; flex:1; height:2px;
  background: color-mix(in srgb, var(--primary) 35%, #ddd);
}
.why-divider::after{
  content:""; flex:1; height:2px;
  background: color-mix(in srgb, var(--primary) 35%, #ddd);
} */
.why-divider .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--primary);
  box-shadow: 22px 0 0 var(--primary), -22px 0 0 var(--primary);
}

/* Right side: blob container */
.blob-wrap{
  min-height: 360px;
  position: relative;
}
.blob-bg{
  /* position:absolute; inset:0 0 0 0;
  background-image:url('/assets/icons/rectangle-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 48% 52% 40% 60% / 40% 55% 45% 60%;
  transform: rotate(6deg);
  z-index: 0; */
}
.why-2{
  background-image:url('/assets/icons/rectangle-bg.png');
  background-size:contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  /* padding-bottom: 10px; */

}
/* Illustration sizing/position */
/* .anubis-ill{
  display:block;
  margin: 60px auto 0 auto;
  max-width: 92%;
} */

/* Years badge */
.years-badge {
  position: absolute;
  top: 18%;
  right: 26%;
  text-align: right;
  color: #1b1b1b;
  z-index: 2;
}
.years-badge .years-title {
  position: absolute;
  right: -32%;
  top: 31%;
}
.years-badge .years-num{
  color: var(--primary);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  line-height: 1;
  margin-right: .15rem;
}
.years-badge .years-text{
  font-weight: 600;
  font-size: .95rem;
}
@media (max-width:768px){
  .years-badge {
    top: 10%;
    right: 20%;
  }
  .years-badge .years-title {
    position: absolute;
    right: -32%;
    top: 31%;
  }
}

/* Button keeps your palette */
.btn--primary{ background: var(--primary); color:#fff; border:1px solid var(--primary); }
.btn--primary:hover{ filter:brightness(.98); transform: translateY(-1px); }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .blob-wrap{ min-height: 320px; }
  .anubis-ill{ margin-top: 40px; }
  /* .years-badge{ top: 10%; right: 20%; } */
}
.why-para{
  font-size: 20px;
}
.feature-img{
  width: 120px;
  height: 120px;
}

/* feature icons */
.fx-item{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:.6rem;
}
.fx-item i{
  font-size: 44px;
  color: var(--primary);
}
.fx-label{
  font-weight: 400;
  color: #1b2b44;              /* close to your dark accent */
  font-size: .95rem;
}

/* small screens */
@media (max-width: 575.98px){
  .brand-divider .line{ width: 70px; }
  .fx-item i{ font-size: 36px; }
}
@media (max-width:768px){
  .top-bar{
    padding: 0;
  }
  .top-bar-sec{
    padding: 0 10px !important
  }
}
/* panel look */
.trip-box{
  /* background: #e9eff5; */
  border: 1px solid var(--border);
}

/* watermark pyramids */
.trip-watermark{
  position:absolute; inset:auto 0 0 0; height: 65%;
  background: url('assets/images/pyramids-watermark.png') no-repeat right bottom;
  background-size: contain;
  opacity: .25; pointer-events: none;
}

/* date icon in inputs */
.date-ico{
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted);
}

/* number steppers */
/* .stepper .btn{
  border-color: #d7dde6;
} */

/* .trip-form .form-control{
  max-height: 48px;
  min-height: 48px;
} */

/* brand button keeps your palette */
.btn--primary{
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  border-radius: 10px;
  font-weight: 600;
}
.btn--primary:hover{ filter: brightness(.98); transform: translateY(-1px); }

/* text color helper used in heading */
.text-accent-dark{ color: var(--accent-dark); }
.build-trip{
  background-image: url('/assets/images/form-bg.svg');
  background-size: cover;
  background-position: end center;
  background-repeat: no-repeat;
}

/* === Core === */
.ts-wrap{ padding: 0 2.5rem; }             /* space for arrows */

.ts-track{
  display:flex;
  gap: 2rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.ts-track::-webkit-scrollbar{ height: 8px }
.ts-track::-webkit-scrollbar-thumb{ background: #e5e7eb; border-radius: 4px }

/* Card (desktop/base) */
.ts-card{
  flex: 0 0 clamp(240px, 23vw, 280px);
  height: clamp(260px, 28vw, 376px);
  border-radius: 12px;
  overflow:hidden;
  position:relative;
  background: #ddd center/cover no-repeat;
  background-image: var(--img);
  scroll-snap-align: start;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}
.ts-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.0) 40%, rgba(0,0,0,.55) 95%);
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding: 1rem;
}
.ts-title{
  color:#fff; margin:0;
  font-size: 22px;
  font-weight: 500;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.view-sec{
  display: none;
}
.ts-card:hover .view-sec img, .ts-card:hover .view-sec a, .carousel-item:hover .view-sec img, .carousel-item:hover .view-sec a{
  display: block !important;
  /* background: var(--primary); */
  color: #fff;
  /* padding: .4rem .8rem; */
  border-radius: 6px;
  font-size: .85rem;
  font-weight: 400;
  /* box-shadow: 0 4px 12px rgba(0,0,0,.2); */
  transition: background .2s ease;
}
.ts-card:hover .view-sec img{
  width: 16px; height: 16px;
  margin-right: 6px;
}
.ts-card .view-sec a{
  font-size: 16px;
}
/* Arrows */
.ts-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid #E5E7EB;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  display:grid; place-items:center;
  color: #6b7280;
  transition: transform .15s ease, background .2s ease;
  z-index: 2;
}
.ts-nav:hover{ transform: translateY(-50%) scale(1.04); background: #f9fafb; }
.ts-prev{ left: 0; }
.ts-next{ right: 0; }

/* Dots */
.ts-dots{
  display:none;                      /* hidden by default */
  justify-content:center; gap:8px;
  margin-top: 10px;
}
.ts-dots button{
  inline-size:10px; block-size:10px; border-radius:50%;
  border:0; background:#fff; padding:0; cursor:pointer;
}
.ts-dots button.is-active{ background:#f38d5c; }

/* === Mobile overrides LAST so they win === */
@media (max-width: 576px){
  .ts-wrap{ padding: 0 16px; }

  .ts-card{
    flex: 0 0 88% !important;        /* one card per view */
    max-width: 88%;
    height: auto;
    aspect-ratio: 3 / 4;             /* tall like your mock */
    border-radius: 14px;
    box-shadow: 0 12px 26px rgba(0,0,0,.12);
  }

  .ts-overlay{
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
    padding: 14px;
    align-items: flex-end;
  }
  .ts-title{
    font-weight: 800;
    font-size: clamp(1.1rem, 4.2vw, 1.6rem);
    letter-spacing:.2px;
  }

  .ts-nav{ display:none; }           /* hide arrows on phones */
  .ts-dots{ display:flex; }          /* show dots on phones */
}

/* Mobile card look */
/* Card */
.mobile-tour-card{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:14px;
  box-shadow:0 12px 26px rgba(0,0,0,.12);
}

/* Image */
.mobile-tour-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:14px;
}

/* Dark bottom gradient sits UNDER captions */
.mobile-tour-card::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%);
  pointer-events:none;
  z-index:1; /* <-- important */
}

/* Title */
.mtc-title{
  position:absolute; left:16px; bottom:14px;
  color:#fff; font-weight:500; font-size:26px;
  z-index:2; /* above overlay */
  transition:bottom .3s ease;
}

/* View row (hidden by default) */
.view-sec-2{
  position:absolute; left:16px; bottom:14px;
  display:flex; align-items:center; gap:6px;
  opacity:0; transform:translateY(10px);
  transition:opacity .3s ease, transform .3s ease;
  z-index:2; /* above overlay */
}

.view-btn{ color:#fff; text-decoration:underline; font-size:14px; }
.arrow-icon{ width:10px; height:10; }

/* Hover: lift title, show "view tour" + arrow */
.mobile-tour-card:hover .mtc-title{ bottom:50px; }
.mobile-tour-card:hover .arrow-icon{ width:10px; height:10; }
.mobile-tour-card:hover .view-sec-2{ opacity:1; transform:translateY(0); }

@media (max-width: 768px){
  /* .mobile-tour-card:hover .mtc-title{
    left:16px; bottom:50px;
   }
   .mobile-tour-card:hover .view-sec-2 a, .mobile-tour-card:hover .view-sec-2 img{
    display: flex !important;
    position: absolute;
    left: 16px; bottom: 14px;
    align-items: center;
   } */
   .friend-form textarea, textarea{resize:vertical; height:auto; }

}
/* Dots like your design */
.carousel-indicators.custom-indicators{
  position: static;        /* put dots under the card */
  margin-top: .6rem;
}
.carousel-indicators.custom-indicators [data-bs-target]{
  width:15px; height:15px;
  border-radius:50%;
  margin:0 4px;
  background:#fff;
  opacity:1;
  border:1px solid var(--primary);
}
.carousel-indicators.custom-indicators .active{
  background: var(--primary);
}

/* Hide Bootstrap's prev/next controls for this carousel (you only asked for dots) */
#toursCarousel .carousel-control-prev,
#toursCarousel .carousel-control-next { display:none; }
/* small side buffer so iOS edge-swipe doesn't steal the gesture */
#toursCarousel{ padding-inline:16px; position:relative; }

/* track must clip; no horizontal padding to avoid “peek” */
#toursCarousel .carousel-inner{ overflow:hidden; padding:0; }

/* smooth slide (override any global rules) */
#toursCarousel.carousel .carousel-item{
  transition: transform .6s ease-in-out;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* indicators like other sections */
#toursCarousel .carousel-indicators.custom-indicators{
  position: static;
  margin-top: 10px;
  display:flex; gap:8px; justify-content:center;
}
#toursCarousel .carousel-indicators.custom-indicators [data-bs-target]{
  width:15px; height:15px; border-radius:50%;
  background:#fff; opacity:1; border:1px solid var(--primary);
  padding:0; margin:0;
}
#toursCarousel .carousel-indicators.custom-indicators .active{
  background:var(--primary); border-color:var(--primary);
}

/* mobile card polish (use your existing styles if already present) */
#toursCarousel .mobile-tour-card{ position:relative; display:block; overflow:hidden; border-radius:14px; box-shadow:0 12px 26px rgba(0,0,0,.12); }
#toursCarousel .mobile-tour-card img{ display:block; width:100%; height:auto; }
/* #toursCarousel .mobile-tour-card .mtc-title{
  position:absolute; left:14px; bottom:12px; right:14px;
  color:#fff; font-weight:800; font-size:20px; letter-spacing:.2px;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
} */

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  #toursCarousel.carousel .carousel-item{ transition:none; }
}

/* Section style */
.consultation-section .card {
  background: #fff;
}
.consultation-section .form-control {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 0.9rem 1.2rem;
  font-size: 1rem;
}
.consultation-section .form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(255, 102, 0, 0.2); /* adapt your brand color */
}
.schedule-sec{
  background-color: #F4F4F4;
}
.btn-brand {
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  transition: 0.3s ease;
}
.btn-brand:hover {
  background: color-mix(in srgb, var(--primary) 85%, black);
  transform: translateY(-2px);
}
/* pills */
.pill-btn {
  border: none;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(to right, var(--primary), var(--secondary)) border-box;
  border: 1px solid transparent;
  color: var(--primary);
  border-radius: 999px;
  padding: .45rem .9rem;
  font-weight: 600;
}


.pill-btn.active{ background:var(--accent-dark); color:#fff; }
.pill-btn:focus{ outline:2px solid color-mix(in srgb, var(--primary) 25%, white); outline-offset:2px }

/* ---------- Mobile behavior: horizontal scroll ---------- */
@media (max-width: 768px) {
  .pill-strip {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 12px;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 14px; /* extra bottom padding so scrollbar doesn’t overlap content */
    scroll-snap-type: none;

    /* Firefox scrollbar */
    scrollbar-width: auto; /* not thin */
    scrollbar-color: var(--primary, #f38d5c) #eee;
  }
  .pill-strip .pill-btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* WebKit (Chrome, Edge, Safari, iOS Safari while scrolling) */
  .pill-strip::-webkit-scrollbar {
    height: 14px;  /* thick scrollbar */
  }
  .pill-strip::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 999px;
  }
  .pill-strip::-webkit-scrollbar-thumb {
    background-color: var(--primary, #f38d5c);
    border-radius: 999px;
    border: 3px solid #eee; /* makes thumb appear thicker */
  }
}


/* tour-card (reuse; included for completeness) */
.tour-card{ background:#fff;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.05);display:flex;flex-direction:column; }
/* Base state: apply transition here */
.tour-card .tour-media img,
.blog-card .blog-media img {
  transition: transform .5s ease-in-out;
}

/* Hover state: only define the transform */
.tour-card:hover .tour-media img,
.blog-card:hover .blog-media img,
.tour-category-card:hover .tour-media img{
  transform: scale(1.15);
}
.tour-card:hover .custom-btn, .blog-card:hover .custom-btn{
  background: linear-gradient(90deg, #285570 0%, #64B6A6 100%);
  color: #fff;
  border-color: var(--secondary);
  /* transform: translateY(-1px); */
}
.tour-card:hover .custom-btn-3{
  color: var(--secondary) !important;
  background-color: transparent !important;
  border-color: var(--secondary);
}
.agency-img{
  width:70px;
  height:65px;
}
.tour-media img{ width:100%; height:200px; object-fit:cover; display:block; }
.tour-title{ font-size:1.05rem; font-weight:700; color:var(--accent-dark); margin:.25rem 0 .5rem; }
.price .h5{ font-weight:800; }
/* category card */
.cat-card{
  display:block;
  position:relative;
  border-radius: 14px;
  overflow:hidden;
  background: #ddd center/cover no-repeat;
  background-image: var(--img);
  min-height: 200px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.12); }

.cat-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.65) 100%);
  color:#fff;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding: 1rem 1.1rem;
}

/* top script-ish kicker and title */
.cat-kicker{
  font-family: "Island Moments", cursive;
  font-weight: 500;
  font-size: 48px;
  opacity: .9;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.cat-title{
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 24px;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
  text-align: center;
}
.cat-tour{
  opacity: 0;
  visibility: hidden;
  font-size: 16px;
  font-weight: 400;
  margin-top: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: opacity 0.8s ease, visibility 0.4s ease;
}
.cat-card:hover .cat-tour{
  opacity: 1;
  visibility: visible;
}
.cat-card:hover .cat-kicker{
  opacity: 0;
  visibility: hidden;
  margin-top: -50px;
  transition: all .8s ease;
}
/* optional: taller cards on lg to approach screenshot rhythm */
@media (min-width: 992px){
  .cat-card{ min-height: 230px; }
}

/* blog card */
.blog-card{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.blog-media{
  position: relative;
  aspect-ratio: 16 / 9;                 /* equal image height */
  background: #ddd;
}
.object-cover{ object-fit: cover; }
.blog-badge{
  position: absolute;
  top: 10px;
  left: -2px;
  background-color: #fff;
  color: var(--accent-dark);
  font-weight: 400;
  font-size: .75rem;
  padding: .25rem .5rem;
  border-radius: 6px;
}
.blog-body{ padding: 14px; }

/* small polish */
.blog-card h6, .blog-card .h6 { line-height: 1.35; }
.blog-para{
  border-bottom: 1px solid #e1dbd9;
  padding-bottom: 20px;
  color: var(--accent);
}

/* Mobile carousel polish for blog cards */
@media (max-width: 575.98px){
  #blogsCarousel .carousel-inner{ overflow: hidden; }    /* hide scrollbar */
  #blogsCarousel .carousel-item{ transition: transform .6s ease-in-out; }

  #blogsCarousel .carousel-indicators.custom-indicators{
    position: static;
    margin-top: 12px;
    display: flex; justify-content: center; gap: 8px;
  }
  #blogsCarousel .carousel-indicators.custom-indicators [data-bs-target]{
    width:15px; height:15px; border-radius: 50%;
    border: 1px solid var(--primary, #f38d5c);
    background: #fff; opacity: 1; padding: 0;
  }
  #blogsCarousel .carousel-indicators.custom-indicators .active{
    background: var(--primary, #f38d5c);
    border-color: var(--primary, #f38d5c);
  }

  /* hide controls if ever added */
  #blogsCarousel .carousel-control-prev,
  #blogsCarousel .carousel-control-next{ display:none; }
}

/* Show grid ≥ sm, hide carousel ≥ sm */
@media (min-width: 576px){
  #blogsCarousel{ display:none !important; }
}


/* section background watermark */
.testimonials{
  background:
    url('/assets/images/testimonials-bg.png') center/cover no-repeat;
}

/* slider layout */
.t-wrap{ position: relative; padding: 0 1.75rem; }
.t-track{
  display: flex; gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  padding: 1rem 0 1.5rem;
}
.t-track::-webkit-scrollbar{ height:8px }
.t-track::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:4px }

/* testimonial card */
.t-card{
  flex: 0 0 clamp(280px, 32%, 360px);   /* 3 visible on desktop */
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 20px 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  scroll-snap-align: start;
  min-width: 400px;
}
.t-card:hover{
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
  /* transform: translateY(-2px); */
  transition: transform .15s ease, box-shadow .15s ease;
  background-color: var(--accent-dark);
}
.t-card:hover p, .t-card:hover .quote-name, .t-card:hover .quote-position{
  color: #fff !important;
}

.t-quote i{ font-size: 28px; color: var(--primary); }
.t-text{ color:#334155; font-size:.75rem; line-height:1.5; margin: 10px 0 8px; }
.t-stars i{ color: #ffc107; margin-right: 2px; }
.t-avatar{
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; object-fit: cover;
  border: 1px solid #f7f7f7;
}

/* arrows */
.t-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid #e5e7eb; background: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  display: grid; place-items: center; color: #6b7280;
  z-index: 2; transition: transform .15s ease, background .2s ease;
}
.t-nav:hover{ transform: translateY(-50%) scale(1.05); background:#f9fafb; }
.t-prev{ left: 0; } .t-next{ right: 0; }

/* responsive */
@media (max-width: 991.98px){
  .t-card{ flex: 0 0 80%; }
}
@media (max-width: 768px){
  .t-wrap{ padding: 0 1.25rem; }
  .t-prev{ left: -2px } .t-next{ right: -2px }
}
/* MOBILE BEHAVIOR (≤ 576px) */
@media (max-width: 576px){
  /* small outer padding so iOS back-swipe doesn't steal the gesture */
  .t-wrap{ padding-inline: 16px; }

  /* the scroll track: one card at a time, centered, no visible scrollbar */
  .t-track{
    scroll-snap-type: x mandatory;
    gap: 14px;
    padding: 6px 0 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox hide */
  }
  .t-track::-webkit-scrollbar{ display: none; } /* WebKit hide */

  /* one card per view */
  .t-card{
    flex: 0 0 88%;
    max-width: 88%;
    min-width: auto;                 /* override the desktop min-width */
    border-radius: 22px;
    scroll-snap-align: center;       /* center the card in viewport */
  }

  /* hide arrows on phones (optional—buttons still work if you keep them) */
  .t-nav{ display: none; }
}

/* Tablet keeps your previous rule */
@media (max-width: 991.98px){
  .t-card{ flex: 0 0 80%; }
}


/* FAQ accordion styling to match pill-like boxes */
.faq-item .accordion-button{
  background: #f6f6f6;
  /* border: 1px solid #e5e7eb; */
  border-radius: 12px !important;
  /* box-shadow: 0 6px 14px rgba(0,0,0,.06); */
  padding: .9rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  color: var(--accent-dark);

}
.faq-item + .faq-item{ margin-top: .8rem; }
/* .faq-item .accordion-button.collapsed{ box-shadow: 0 10px 20px rgba(0,0,0,.08); } */
/* when OPEN: square the header’s bottom corners so the body attaches flush */
.faq-item .accordion-button:not(.collapsed){
  border-bottom-left-radius:0 !important;
  border-bottom-right-radius:0 !important;
  box-shadow:none;
  background-color: var(--primary);
  color: #fff;
}
.faq-item .accordion-button:not(.collapsed) .faq-icon {
  background-color: #f9c6ae;
  filter: none;
}
.faq-item .accordion-button:not(.collapsed) .faq-title{
  color:#fff;
}
.faq-icon{
  inline-size: 36px; block-size: 36px;
  /* border-radius: 8px; */
  display:grid; place-items:center;
  color: var(--primary);
  font-size: 1.05rem;
  background-color: #fff;
}
.faq-item .accordion-button:not(.collapsed) .faq-q img {
  filter: brightness(0) invert(1); /* make icons white if they’re dark svgs/pngs */
}
.faq-q{
  inline-size: 28px; block-size: 28px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-size: .85rem;
}
.faq-title{
  font-weight: 400;
  color: #000;
}

.faq-item .accordion-body{
  border: 1px solid #fff;
  border-top: none;
  border-radius:0 0 16px 16px !important;
  margin-top: 12px;
  background: #fff;
  color:#334155;
}
.faq-item .accordion-collapse.show .accordion-body{
  padding:1.5rem 1.75rem 1.75rem;
  font-size:16px;
  line-height:1.6;
  }
/* Right visual */
.faq-visual{
  position: relative;
  width: min(420px, 90%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
/* .faq-blob{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 70% at 80% 25%, rgba(255,255,255,.35), transparent 60%),
    color-mix(in srgb, var(--primary) 22%, white);
} */
.faq-img{
  position: absolute; inset: 4% 4% auto auto;
  width: 92%; height: 92%; object-fit: cover;
  border-radius: 50%;
}
.accordion-button::after{
  display: none;
}
.accordion-item{
  border: none; /* remove default border */
  margin-top: .5rem; /* space between items */
  margin-bottom: .5rem; /* space between items */
}
.reset-btn{
  border: 1px solid var(--primary);
  background-color: #fff;
  color: var(--primary);
}
.reset-btn:hover{
  background-color: var(--secondary);
  color: #fff;
  transform: translateY(-1px);
}
/* promo band */

/* layered background: line‑art + dunes + pyramids */
.discover-egypt{
  position: relative;
  padding: 20px 0;
  background-image: url(/assets/images/discover.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--accent-dark);
  text-align: center;
}
.promo-bg{
  position:absolute; inset:0;
  /* background:
    url('assets/images/egypt-lineart.png') center 30% / 900px auto no-repeat,
    url('assets/images/pyramids-illustration.png') right bottom / 700px auto no-repeat,
    linear-gradient(180deg, #fbf3ea 0%, #f9efdf 100%); */
  opacity: .85;
  pointer-events: none;
}
.deals{
  background-color: transparent;
  padding: 4px;
  border: 3px solid var(--primary);
  border-radius: 50%;
  /* box-shadow: 0 12px 30px rgba(0,0,0,.06); */
}
/* round deals badge */
.deals-badge{
  inline-size: 120px; block-size: 120px;
  border-radius: 50%;
  background: var(--primary);
  border: 4px solid var(--primary);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:.25rem;
  font-weight:700; color: var(--accent-dark);
  /* gradient ring */
  background:
    linear-gradient(var(--primary),var(--primary)) padding-box,
    conic-gradient(var(--primary), var(--primary)) border-box;

}
.deals-icon{
  inline-size: 42px; block-size: 42px;
  border-radius: 50%;
  display:grid; place-items:center;
  background: color-mix(in srgb, var(--primary) 15%, white);
  color: var(--primary);
  font-size: 1.05rem;
}
.deals-text{ line-height:1.1; font-weight:600; color: #fff; }

@media (max-width: 991.98px){
  .promo-bg{
    /* background:
      url('assets/images/egypt-lineart.png') center 28% / 750px auto no-repeat,
      url('assets/images/pyramids-illustration.png') right -40px bottom -10px / 520px auto no-repeat,
      linear-gradient(180deg, #fbf3ea 0%, #f9efdf 100%); */
  }
  .deals-badge{ inline-size:100px; block-size:100px; }
}

.partners { background:#fff; border-top:1px solid #f1f1f1; border-bottom:1px solid #f1f1f1; }

/* viewport */
.marquee-viewport{
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0 4%, #000 12% 88%, transparent 96% 100%);
}

/* track */
.marquee-track{
  display: flex; align-items: center; gap: clamp(40px, 7vw, 120px);
  /* the magic: continuous scroll */
  animation: marquee-scroll 6s linear infinite;
  will-change: transform;
}

/* logos */
.partner-logo{
  /* height: clamp(36px, 4.5vw, 64px); */
  width: auto;
  /* filter: grayscale(100%) contrast(90%); */
  /* opacity: .8; */
  padding: 10px;
  background-color: #fff;
  border: none;
  border-radius: 8px;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
.partner-logo:hover{
  opacity:1;
  box-shadow:var(--primary) 0px 12px 24px;
  transform: scale(1.01);
  transition: opacity .2s ease, box-shadow .2s ease-in-out, transform .2s ease;
}

/* loop keyframes */
@keyframes marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* because we duplicated the set once */
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* optional: tighten spacing on very small screens */
@media (max-width: 420px){
  .marquee-track{ gap: 28px; }
}
/* Footer base */
.site-footer-2{
  position: relative;
  color:#e9f1f5;
  background-image: url(/assets/icons/footer-bg.png);
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: 60px;
  padding-bottom: 20px;
}
.site-footer-2::before{
  /* subtle decorative motif (swap with your asset if you have one) */
  content:"";
  position:absolute; inset:auto -10% -8% -10%;
  height: 140px;
  background: url('assets/images/footer-motif.png') right bottom / contain no-repeat;
  opacity:.35; pointer-events:none;
}
@media (max-width:768px){
  .site-footer-2{
    position: relative;
    color:#e9f1f5;
    background-image: url(/assets/icons/footer-mob-bg.png);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding-top: 60px;
    padding-bottom: 20px;
  }
}
body.menu-open .mobile-actionbar {
  display: none !important;
}
.mobile-actionbar {
  transition: opacity 0.3s ease;
}
.mobile-actionbar.hidden {
  opacity: 0;
  pointer-events: none;
}

/* logo */
.footer-logo{ width:auto; }

/* link lists */
.footer-links{ list-style:none; display: flex;
  flex-direction: column; padding:0; margin:0; }
.footer-links li+li{ margin-top:.4rem; }
.footer-links a{
  color:#fff; text-decoration:none; font-size:.95rem;
}
.footer-links a:hover{ color: var(--primary); }
.contact-link{
  font-size: 14px;
}

/* socials */
.social-round{
  width:32px;
  height:32px;
  border-radius:50%;
  display:inline-flex; align-items:center;
  justify-content:center;
  /* background: rgba(255,255,255,.08); */
  color:#fff;
  border:1px solid transparent;
  transition:.2s ease;
}
.social-round:hover{
  /* background: var(--secondary); */
  /* border-color: var(--secondary); */
}

/* newsletter */
.newsletter-form .input-group {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* email input */
.newsletter-form .form-control {
  border: none;
  border-radius: 0;
  padding: .75rem 1rem;
  font-size: .95rem;
  color: #333;
}
.newsletter-form .form-control::placeholder {
  color: #9aa3ab;
  font-weight: 500;
}

/* subscribe button */
.newsletter-form .btn-subscribe {
  background: #f38d5c;
  color: #fff;
  font-weight: 600;
  border: none;
  padding: .75rem 1.25rem;
  border-radius: 12px;
  transition: background .2s ease, transform .1s ease;
}
.newsletter-form .btn-subscribe:hover {
  background: #e47b48;
}
.newsletter-form .btn-subscribe:active {
  transform: scale(.97);
}

/* tiny border util */
.border-white-10{ border-color: rgba(255,255,255,.1) !important; }

/* keep brand button */
.btn--primary{ background: var(--primary); color:#fff; border:1px solid var(--primary); }
.btn--primary:hover{ filter:brightness(.98); transform: translateY(-1px); }

/* responsive spacing tweaks */
@media (max-width: 991.98px){
  .site-footer-2::before{ height:120px; }
}
@media (max-width: 575.98px){
  .newsletter-form .form-control{ margin-bottom:.5rem; border-radius:999px; }
  .newsletter-form .btn{ border-radius:999px; width:100%; }
}
/* Desktop nav link colors */
.navbar .nav-link{ color: var(--accent-dark); font-weight: 600; }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color: var(--primary); }

/* Offcanvas styling */
.mobile-offcanvas{
  --bs-offcanvas-width: 320px;
  /* background: #fff; */
  background-image: url(/assets/images/mobile-header.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  padding-bottom: 40px;
  line-height: 1;
}
.mobile-offcanvas .offcanvas-header{
  position: sticky;           /* keep the close button visible */
  top: 0;
  padding: 8px 12px;
  margin-bottom: -10px;
}
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0; /* align with toggle */
  }
}
.offcanvas-body{
  margin-top: -10px;
  overflow-y: auto;
}
.language-social{
  z-index: 8 !important;
}
.list-group { list-style: disc outside; }
.mobile-offcanvas .list-group-item{
  border: 0;
  /* border-bottom: 1px solid #f1f2f4; */
  color: var(--accent-dark);
  font-weight: 600;
  background-color: transparent;
  /* background:#fff; */
}
.offcanvas.offcanvas-start {
  z-index: 999999999999999999999999999999999999999 !important;
}
.list-group-item.mobile-sidebar::before {
  content: "• "; /* Bullet point */
  color: #1a3c6e;
}
.list-group-item.mobile-sidebar{
  font-weight: 400 !important;
  color: var(--accent-dark) !important;
}
.mobile-offcanvas .list-group-item .list-group-item-action{
  border-radius: 0 0 8px 8px;
  list-style: circle;
}
.mobile-offcanvas .list-group-item:hover{ background:var(--primary);
color:#fff; }
.mobile-offcanvas .list-group .list-group-item.ps-4{ font-weight: 500; color:#475569; }
.rotateable{ transition: transform .2s ease; }
.collapse.show + .rotateable,
button[aria-expanded="true"] .rotateable{ transform: rotate(90deg); }
.extra-side a{
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}
/* Drawer socials */
.social-round{
  width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  /* background: #f1f5f9; */
  color: var(--accent-dark);
}
.social-round:hover{ background: var(--secondary); color:#fff; }

/* Make sure desktop collapse doesn't show on mobile */
@media (max-width: 991.98px){
  #primaryNav{ display: none !important; }
}
@media (max-width: 768px){
  .top-bar{ display: none !important; }
  .hero{
    background-image: url(/assets/images/hero-mobile.png);
    background-size: auto;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 20vh;
    padding:0 !important;
    /* height: 400px;  */
    margin: -10px;
  }
  .hero-box{
    padding: 10px !important;
  }
  .hero-desc{padding: 0 !important;}
  .hero-desc h1, .hero-desc p, .hero-box a{
    font-size: 15px;
    padding-left: 10;
  }
  .hero-para{
    font-size: 12px !important;
  }
  .build-trip{
    background-image: url('/assets/icons/form-mob.svg');
    background-size: cover;
    background-position: end center;
    background-repeat: no-repeat;
  }
  .reliable-sec{
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .promo-banner{
    padding-bottom: 0 !important;
  }
  .promo-text{
    margin-top: 50px;
  }
}
/* --- Mobile action bar --- */
.mobile-actionbar{
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 99999999999999; /* above content, below offcanvas (default 1045) */
  background: #fff;
  border-top: 1px solid #e8edf2;
  box-shadow: 0 -8px 20px rgba(0,0,0,.08);
  display: none; /* hidden by default (desktop) */
  padding: .35rem clamp(.4rem, 2vw, .75rem);
  padding-bottom: calc(.35rem + env(safe-area-inset-bottom)); /* iOS safe area */
}
.mobile-actionbar .ab-item{
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center; justify-content: center;
  gap: .25rem;
  background: transparent; border: 0; outline: 0;
  color: var(--accent-dark);
  text-decoration: none; font-weight: 600;
  font-size: 11px; line-height: 1.1;
  padding: .25rem 4px;
}
.mobile-actionbar .ab-item i{
  font-size: 1.35rem;
  color: var(--accent-dark);
}
.mobile-actionbar .ab-item:hover i,
.mobile-actionbar .ab-item:focus i{ color: var(--secondary); }
.mobile-actionbar .ab-item:active{ transform: translateY(1px); }

/* Only show on small screens */
@media (max-width: 991.98px){
  .mobile-actionbar{ display: grid; grid-template-columns: repeat(5, 1fr); }
  body{ padding-bottom: 64px; } /* prevent content from being hidden behind bar */
}

/* Optional: highlight Tailor Made with brand color on icon only */
@media (max-width: 991.98px){
  .mobile-actionbar .ab-item:last-child i{ color: var(--primary); }
}





.categories .cat-card{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--img) center/cover no-repeat;
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

.categories .cat-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.categories .cat-card:hover .cat-num{
  display: block;
}
.categories .cat-overlay{
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  padding: 16px 18px 18px;
  color:#fff;
  z-index:1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* GRID (desktop art-directed layout) */
.categories .parent{
  --gap: 11px;
  --row: 7.6vw;              /* base row height for the spans */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: var(--row);
  gap: var(--gap);
}

/* Your provided spans/positions */
.categories .div1  { grid-column: span 2 / span 2; grid-row: span 2 / span 2; }
.categories .div4  { grid-column: span 3 / span 3; grid-row: span 3 / span 3; grid-column-start: 3; }
.categories .div5  { grid-column: span 3 / span 3; grid-row: span 2 / span 2; grid-column-start: 3; grid-row-start: 4; }
.categories .div7  { grid-column: span 2 / span 2; grid-row: span 3 / span 3; grid-column-start: 1; grid-row-start: 3; }
.categories .div8  { grid-column: span 3 / span 3; grid-row: span 2 / span 2; grid-column-start: 1; grid-row-start: 6; }
.categories .div9  { grid-column: span 2 / span 2; grid-row: span 2 / span 2; grid-column-start: 4; grid-row-start: 6; }
.categories .div10 { grid-column: span 3 / span 3; grid-row: span 2 / span 2; grid-column-start: 6; grid-row-start: 6; }
.categories .div14 { grid-column: span 3 / span 3; grid-row: span 3 / span 3; grid-column-start: 6; grid-row-start: 3; }
.categories .div15 { grid-column: span 3 / span 3; grid-row: span 2 / span 2; grid-column-start: 6; grid-row-start: 1; }

/* Responsive: simplify layout on smaller screens */
@media (max-width: 1199.98px){
  .categories .parent{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 20vw; }
}
@media (max-width: 991.98px){
  .categories .parent{
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 28vw;
  }
  .categories .parent > div{
    /* ignore the fancy positions on tablet */
    grid-column: auto !important; grid-row: auto !important;
  }
}
@media (max-width: 575.98px){
  .categories .parent{
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 42vw;
  }
}
/* Mobile carousel only */
@media (max-width: 575.98px){
  #categoriesCarousel .carousel-inner{ overflow:hidden; }
  .cat-card--mobile{ aspect-ratio: 4 / 5; }  /* tall card like your mocks */

  /* dots */
  #categoriesCarousel .carousel-indicators.custom-indicators{
    position: static;
    margin-top: 12px;
    display: flex; justify-content: center; gap: 8px;
  }
  #categoriesCarousel .carousel-indicators.custom-indicators [data-bs-target]{
    width:15px; height:15px; border-radius:50%;
    border:1px solid var(--primary, #f38d5c);
    background:#fff; opacity:1; box-shadow:none; padding:0;
  }
  #categoriesCarousel .carousel-indicators.custom-indicators .active{
    background: var(--primary, #f38d5c); border-color: var(--primary, #f38d5c);
  }

  /* hide controls if ever added */
  #categoriesCarousel .carousel-control-next,
  #categoriesCarousel .carousel-control-prev{ display:none; }
}

/* Show desktop grid ≥ sm, hide mobile carousel ≥ sm */
@media (min-width: 576px){
  #categoriesCarousel{ display:none !important; }
  .parent{ display:grid; }  /* your existing grid rules remain */
}
/* Modal backdrop */
.friend-modal {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  z-index:9999;
  justify-content:center; align-items:center;
  padding:1rem;
}
/* .friend-modal:hover .custom-btn{
  background: linear-gradient(90deg, #285570 0%, #64B6A6 100%);
  color: #fff;
  border-color: var(--secondary);
  transform: translateY(-1px);
  transition: all 0.4s ease;
} */

/* Modal box */
.friend-modal-content {
  background:#fff;
  border-radius:12px;
  max-width:500px;
  width:100%;
  padding:2rem 1.5rem;
  position:relative;
  box-shadow:0 12px 36px rgba(0,0,0,.25);
  animation:fadeIn .3s ease;
}

/* Close button */
.friend-modal-close {
  position:absolute; top:12px; right:16px;
  background:none; border:none;
  font-size:1.6rem; font-weight:bold;
  color:#333; cursor:pointer;
}

/* Form */
.friend-form label {
  display:block; font-weight:400; margin-bottom:.35rem;
  font-size:.9rem;
}
.friend-form input,
.friend-form textarea {
  width:100%; border:1px solid #ddd;
  border-radius:6px;
  padding:.65rem .75rem;
  margin-bottom:1.1rem;
  font-size:.95rem;
  outline:none;
  transition:border .2s;
}
.friend-form input:focus,
.friend-form textarea:focus {
  border-color:var(--primary, #f38d5c);
  box-shadow:0 0 0 2px rgba(243,141,92,.2);
}
.friend-form textarea, textarea{ min-height:110px; resize:vertical; max-height: 110px; }

.btn-send {
  display:block; width:100%;
  padding:.75rem;
  border:none; border-radius:8px;
  background:var(--primary,#f38d5c);
  color:#fff; font-weight:600;
  cursor:pointer;
  transition:background .2s;
}
/* .btn-send:hover { background:#e67b47; } */

.modal-title {
  text-align:center;
  font-weight:400;
  margin-bottom:.25rem;
  font-size:1.25rem;
}

@keyframes fadeIn { from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
.select-chevron{
  /* Remove the native arrow */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Your regular field styles */
  padding: .6rem 2.25rem .6rem .8rem;  /* space on right for the icon */
  border-radius: .6rem;
  border: 1px solid #e1e6ee;
  background-color: #fff;
  font: inherit;
  color: #1b1b1b;

  /* The custom arrow (data-URI SVG) */
  background-image:
    url("/assets/icons/drop-arrow.svg");
  background-repeat: no-repeat;
  background-size: 12px 18px;
  background-position: right .7rem center; /* move as you like */
}
@media (max-width: 768px) {
  .nationality.select-chevron{
    /* display:none; */
    background-image:url("/assets/icons/drop-arrow.svg");
    background-repeat: no-repeat;
    background-size: 0px 0px;
    background-position: right .7rem center;
  }
}

/* Hover/focus colors (optional) */
.select-chevron:focus{
  outline: none;
  border-color: #64b6a6;
  box-shadow: 0 0 0 3px rgba(100,182,166,.15);
}
/* === date field === */
.date-field,.date-field-2{
  position: relative;
  background:  #fff;
  border: 1px solid #e7edf3;
  border-radius: 12px;
  padding: .9rem 1rem .9rem 1.1rem;
  min-height: 56px;
  display:flex; align-items:center;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  max-height: 48px;
}
.date-field input[type="date"],.date-field-2 input[type="date"]{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* custom placeholder text (visible until date picked) */
.df-placeholder{
  color:#9aa5b1;
  font-size:1.25rem; /* big like screenshot */
  pointer-events:none;
}
.date-field.filled .df-placeholder{ display:none; }

/* calendar icon */
.df-ico{
  position:absolute; right:12px; width:28px; height:28px;
  color: var(--accent);
}
/* === stepper === */
/* wrapper card */
.trip-form .qty-field,.contact-form .qty-field{
  display:flex; align-items:center; gap:.9rem;
  justify-content:flex-start;
  background:#fff;
  border:1px solid #e7edf3;
  border-radius:12px;
  padding:.8rem 1rem;
  min-height:56px;
  box-shadow:0 6px 14px rgba(0,0,0,.06);
}

/* left label */
.contact-form .qty-label{
  margin-right:auto;            /* push controls to the right */
  color:#9aa3ab;                /* muted like screenshot */
  font-weight:400;
  font-size:1.05rem;
}

/* center value (native number input styled as text) */
.qty-input{
  width:1.8rem; text-align:center;
  border:0; outline:0; background:transparent;
  color:#0f3c52; font-weight:400; font-size:1.05rem;
  padding:0; margin:0;
}
/* remove native spinners */
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* .qty-input { -moz-appearance:textfield; } */

/* round circle icon buttons */
.qty-btn{
  display:grid; place-items:center;
  width:28px; height:28px;
  border-radius:50%;
  border:2px solid transparent;
  color:#0f3c52; background:#fff;
  padding:0; line-height:0; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.qty-btn:hover{ background:#f3f7fa; }
.qty-btn:active{ transform:scale(.96); }
.qty-icon{ width:16px; height:16px; display:block; }

/* spacing on small screens */
@media (max-width:575.98px){
  .contact-form .qty-field{ padding:.7rem .9rem; }
  .qty-btn{ width:26px; height:26px; }
}


/* Mobile card look */


/* Dots like your design */
.carousel-indicators.custom-indicators{
  position: static;        /* put dots under the card */
  margin-top: .6rem;
}
.carousel-indicators.custom-indicators [data-bs-target]{
  width:15px; height:15px;
  border-radius:50%;
  margin:0 4px;
  background:#fff;
  opacity:1;
  border:1px solid var(--primary);
}
.carousel-indicators.custom-indicators .active{
  background: var(--primary);
}

/* Hide Bootstrap's prev/next controls for this carousel (you only asked for dots) */
#toursCarousel .carousel-control-prev,
#toursCarousel .carousel-control-next { display:none; }

/* --- Desktop/Tablet: keep current grid --- */
.tc-wrap{ position: relative; }

/* === Featured (mobile - col-12 stacked layout) === */
@media (max-width: 575.98px){
  .tc-wrap{ position: relative; }
  .tc-track{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 16px;
    padding: 0;
  }
  .tc-track.row{ margin-left: 0; margin-right: 0; }

  /* each col becomes full width - col-12 equivalent */
  .tc-track > [class*="col-"]{
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  /* hide dots since we're using column layout */
  .tc-dots{
    display: none !important;
  }
  .tc-dots button{
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid var(--primary, #f38d5c);
    background: #fff;            /* hollow circles */
    padding: 0;
  }
  .tc-dots button.is-active{
    background: var(--primary, #f38d5c);  /* filled active */
    border-color: var(--primary, #f38d5c);
  }
}
@media (min-width: 576px){
  .tc-dots{ display: none !important; }
}
.link-underline{
  text-decoration-color: var(--primary) !important;
  text-decoration: underline;
  color: var(--primary);
}
/* End Home Page */
/* Start Contact us Page */
/* Breadcrumb pill look from screenshot */
.breadcrumb, .tourcat-hero .breadcrumb{
  --bs-breadcrumb-divider: "›";
  color: var(--secondary);
}
.breadcrumb-main{
  background-color: #f6f6f6;

}
.breadcrumb a:hover{ color: var(--accent) !important; }

/* Section background + decorative illustrations */
.contact-hero{
  background-image: url('/assets/images/hero-contact.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.ch-bg-left, .ch-bg-right{
  position:absolute; bottom:0; pointer-events:none; user-select:none;
}
.ch-bg-left { left:0; max-width:44%; transform: translateY(18px); }
.ch-bg-right{ right:0; max-width:46%; }

/* Brand divider */
.brand-divider .bd-line{
  width:140px; height:2px; background:#e7d3c8; display:inline-block; border-radius:2px;
}

/* Five feature cards — same outline/hover as shot */
.c-feature{
  background:#fff;
  border:2px solid var(--primary);
  border-radius:14px;
  padding:18px 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  text-align:center;
  min-height: 100%;
}
.c-feature:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  border-color: var(--accent);
}
.cf-icon{
  inline-size:54px; block-size:54px;
  border:1.5px solid var(--card-border);
  border-radius:12px;
  display:grid; place-items:center;
  margin: 0 auto 12px;
  background:#fff;
}
.cf-icon img{
  width: 45;
  height: 42;
}
.cf-title{ font-weight:600; color:var(--accent-dark); margin-bottom:6px; }
.cf-text { font-size:.85rem; line-height:1.45; color:#6a7b89; margin:0; }

/* 5-up layout helper at lg like screenshot */
@media (min-width: 992px){
  .col-lg-2-4{ flex:0 0 auto; width:20%; }
}

/* Tone of headline like screenshot */
.text-accent{ color: var(--accent); }

/* Responsiveness for art */
@media (max-width: 991.98px){
  .ch-bg-left{ max-width:52%; opacity:.22; }
  .ch-bg-right{ max-width:54%; opacity:.22; }
}
@media (max-width: 575.98px){
  .brand-divider .bd-line{ width:90px; }
  .cf-text{ font-size:.82rem; }
}
@media (max-width:768px){
  .contact-hero{
    background-image: url('/assets/images/hero-contact-mob.png');
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
  }
  .features-contact{
    margin-top: -30px;
  }
}
.contact-form .form-control,
.contact-form .form-select,
.tailor-form .form-control,
.tailor-form .form-select{
  border-radius: 6px;
  border: 1px solid #ddd;
  min-height: 48px;
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color:var(--primary)
}
.form-check-input{
  border-color: var(--primary);
}
.form-select{
  background-image: url("/assets/icons/drop-arrow.svg") !important;
  padding: .6rem 2.25rem .6rem .8rem;
  border-radius: .6rem;
  border: 1px solid #e1e6ee;
  background-color: #fff;
  font: inherit;
  /* color: #1b1b1b; */
  background-repeat: no-repeat;
  background-size: 12px 18px;
  background-position: right .7rem center;
}
.contact-form .btn--primary,
.tailor-form .btn--primary{
  background: #f38d5c;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 500;
}
.contact-form,
.tailor-form{
  background-image: url('/assets/images/contact-form-bg.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.n-contact{
  border-left: 0 !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.flag{
  border-right: 0 !important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
/* Map wrapper keeps aspect and allows overlay card */
.contact-map .map-wrap{
  position: relative;
}

.contact-map .map-iframe{
  width: 100%;
  height: clamp(300px, 48vw, 440px);
  border: 0;
  display: block;
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

/* Floating strip like the mockup */
.contact-map .contact-strip {
  width: 80%;
  background: #fff;
  border: 1px solid #eee;
  overflow: hidden;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .10));
  z-index: 2;
  margin-left:10%;
  margin-top: -5%;
}

/* Round peach icon badge */
.contact-map .cs-icon{
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ffe1d0;
  color: #f38d5c;                     /* your brand orange */
  font-size: 1rem;
}

/* Tighter borders only on md+ to match screenshot */
@media (min-width: 768px){
  /* .contact-map .contact-strip .border-md-start{ border-left: 1px solid #eee !important; } */
  /* .contact-map .contact-strip .border-md-top-0{ border-top: 0 !important; } */
}

/* On phones: make the strip full-width and stacked a bit lower */
@media (max-width: 767px){
  .featured-contact{
    margin-top: -70px;
  }
  .featured-contact h1{
    font-size: 19px;
  }

  .featured-contact p{
    font-size: 13px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .contact-feature_img{
    width: 200px;
    margin-top: -10px;
    margin-bottom: 16px;
  }
  .contact-features{
    padding-left: 4rem !important;
    padding-right: 4rem !important;
    margin-top: -20px !important;
  }

  .contact-map .contact-strip{
    bottom: -250px;
    width: 96%;
    margin-left: 2%;
    margin-top: -16%;
  }
  .p-info{
    border-bottom: 1px solid #e7e7e7;
    border-width: 90% 0 10% 0;
    padding: 10px 0;
  }
}
/* End Contact us Page */
/* Start Tour Categories Page */
/* ========== Tour Categories Hero Section ========== */
.tourcat-hero .breadcrumb {
  --bs-breadcrumb-divider: "›";
}
.tourcat-hero .breadcrumb-main{
  background-color: #f6f6f6;
}
.tourcat-hero .breadcrumb a:hover{ color: var(--accent) !important; }

.tourcat-hero .hero-card {
  border: 1px solid #e8eef5;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.tourcat-hero .hero-img {
  display: block;
  width: 100%;
  height: auto;
  /* aspect-ratio: 16/9; */
  object-fit: cover;
}

/* .tourcat-hero .hero-outline {
  position: absolute;
  inset: 10px;
  border: 3px solid #f38d5c;
  pointer-events: none;
  box-shadow: 0 8px 20px rgba(0,0,0,.06) inset;
} */

@media (max-width: 575.98px) {
  .tourcat-hero .hero-outline {
    inset: 8px;
    border-width: 2px;
  }
}
.tour-category-card{
  padding-bottom: 30px;
  background-color: #fff8f1;
}
.tour-category{
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  background-color: #fff8f1;
}
.tour-category_title{
  font-size: 20px;
  font-weight: 500;
  color: var(--accent-dark);
width: 70%;

}
.tour-category_desc{
  font-size: .95rem;
  padding-bottom: 16px;
  border-bottom: 1px solid #9E9C9C;
}
.faq-icon img{
  width: 12px;
  height: 25px;
}
.tour-category-card:hover .tour-media img{
  transform: scale(1.15);
  filter: brightness(1.2);
}
/* End Tour Categories Page */
/* Start Blog Categories Page */
.btn-filter{
  background:#f08c57;
  color:#fff !important;
  border:0;
  padding:.5rem .85rem;
  border-radius:.6rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  box-shadow:0 6px 18px rgba(240,140,87,.25);
}
/* .btn-filter:hover{
  color:#fff;
  background-color: var(--accent-dark);
} */
.dropdown-menu .dropdown-item.active{
  font-weight:600;
  color:#f08c57;
}
.btn-filter:not(.collapsed){
  background-color: var(--primary);
  color: #fff;
}
.btn-filter.dropdown-toggle::after {
  color: #fff !important;
  border-top-color: #fff !important;
}
.blog-card:hover .blog-btn a,
.tour-card:hover .tour-view-btn a{
  background: var(--accent-dark);
  color: #fff;
  border-color: var(--accent-dark);
  transform: translateY(-1px);
  transition: all 0.4s ease;
}
/* End Blog Page */
/* Start Tailor Made Page */
.tailor-hero{
  /* background: linear-gradient(180deg, #fff 0%, #fff7f1 85%); */
  background-image: url('/assets/images/tailor-made-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
@media (max-width:768px){
  .tailor-hero{
    background-image: url('/assets/images/tailor-made-bg-mob.png');
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    position: relative;
  }
}
.p-info{
  border-bottom: 1px solid #e7e7e7;
  border-width: 90% 0 10% 0;
  padding: 10px 0;
}
/* Base style for the interest labels */
/* Wrapper */
.interest-box {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #f38d5c;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  color: #333;
  transition: all 0.2s ease;
  /* max-width: 300px; */
  background: #fff;
}

/* Hide native checkbox */
.interest-box input {
  display: none;
}

/* Custom box */
.interest-box .checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #f38d5c;
  border-radius: 3px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  background: #fff;
  transition: all 0.2s ease;
}

/* Checked style */
.interest-box input:checked + .checkmark {
  background: #f38d5c;
  border-color: #f38d5c;
}

/* Add check icon */
.interest-box input:checked + .checkmark::after {
  content: "✔";
  color: #fff;
  font-size: 12px;
  position: absolute;
  top: -2px;
  left: 2px;
}

/* Hover effect */
.interest-box:hover {
  background: #fff6f2;
  border-color: #f38d5c;
}
.custom-multiselect {
    position: relative;
    width: 100%;
  }

  .multiselect-box {
    /* background-color: #fff; */
    /* border: 1px solid #ced4da; */
    border-radius: 0.375rem;
    /* padding: 0.375rem 2.25rem 0.375rem 0.75rem; */
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  .multiselect-box:hover {
    border-color: var(--secondary);
  }

  .multiselect-box:focus {
    border-color: var(--primary);
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(243, 141, 92, 0.25);
  }

  .multiselect-placeholder.has-selections {
    color: #212529;
  }

  .multiselect-arrow {
    color: #6c757d;
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    position: absolute;
    right: 0.75rem;
  }

  .multiselect-arrow.rotated {
    transform: rotate(180deg);
  }

  .multiselect-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    display: none;
  }

  .multiselect-dropdown.show {
    display: block;
  }

  .multiselect-option {
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
  }

  .multiselect-option:hover {
    background-color: #f8f9fa;
  }

  .multiselect-option input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
  }

  .multiselect-option label {
    margin: 0;
    cursor: pointer;
    flex-grow: 1;
    color: #212529;
  }

  .multiselect-option input[type="checkbox"]:checked + label {
    color: var(--primary);
    font-weight: 500;
  }
.tailor-form .qty-field,.inquiry-form .qty-field{
  display:flex; align-items:center; gap:.9rem;
  justify-content:flex-start;
  background:#fff;
  border:1px solid #e7edf3;
  border-radius:12px;
  padding:.8rem 1rem;
  min-height:56px;
}
.tailor-form .qty-label{
  margin-right:auto;
  color:#9aa3ab;
  font-weight:400;
  font-size:1.05rem;
}
.tailor-form::placeholder,
.tailor-form input::-webkit-input-placeholder,
.tailor-form input::-moz-placeholder,
.tailor-form input::-ms-input-placeholder,
.tailor-form .form-select {
  font-weight: 400;
  font-size: 1rem;
  color: #999 !important;
  opacity: 1;
}
/* End Tailor Made Page */
/* Start About Us Page */
.about-hero{
  background-image: url('/assets/images/about-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 90vh;
  padding-bottom: 40px;
  background-position-y: bottom;
}
.discover-btn {
    background: transparent;
    border: none;
    color: #f38d5c;
    box-shadow: 1px 3px 1px rgb(86 75 75 / 18%);
    transition: all 0.4s ease;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
  }

  .discover-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    background: linear-gradient(45deg, #FFEDE4, #FFC1A3, #F38D5C);
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
  }
  .discover-btn:hover{
    background-color: #f38d5c;
    color: #fff;
  }

  .discover-btn:hover::before {
    background: linear-gradient(45deg, #FFC107, #C09300, #FDB740);
  }
/* === Pillars section === */
.pillars .brand-divider img{height:28px}

/* card */
.pillar-card{
  background:#fff;
  /* border:1px solid #eef1f4; */
  border-radius:16px;
  padding: 40px 60px 60px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pillar-card:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.06) }

.pillar-card--highlight{
  box-shadow:0 18px 46px rgba(0,0,0,.08);
}

.pillar-icon{
  width:54px;height:54px;
  border-radius:50%;
  background:#f7a06a;           /* brand orange */
  display:flex;align-items:center;justify-content:center;
  margin: 20px 0px;
}
.pillar-icon img{ width:26px; height:26px;}

.pillar-title{
  font-size: 24px;
  /* letter-spacing: .02em; */
  color: var(--accent-dark);
  font-weight: 600;
  /* margin-bottom: 1rem; */
  text-transform: uppercase;
}

.pillar-text{ color:#6b7785; font-size:.9375rem; line-height:1.6 }
/* --- Blogs & Guides section --- */
.blogs-band{
  overflow: clip;
}

.blogs-band__strip{
  position: absolute;
  left: 0; right: 0;
  top: 20%;
  height: 390px;
  background: #f28a52;
  z-index: 0;
}

.blogs-card_about{
  position: relative;
  z-index: 1;
  max-width: 720px;
  border-radius: 14px;
  padding: 8px;
  margin-top: 70px;
}
.why-card{
  background:#faf6f3;
  /* border:1px solid #f1e1d8; */
  border-radius:14px;
  padding: 40px 40px 60px;
  /* box-shadow:0 8px 22px rgba(0,0,0,.05); */
  box-shadow:-2px 6px 0px rgba(0,0,0,.09);
  transition:transform .2s ease, box-shadow .2s ease;
}
.why-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(0,0,0,.09);
}

.why-icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:999px;
  background:#f28a52;
  margin-bottom:14px;
}
/* .why-icon img{ width:22px;height:22px;} */

.why-title{
  font-size:1rem;
  font-weight:700;
  color:#0f3b56;           /* your deep blue */
  margin-bottom:.4rem;
}
.why-text{
  font-size:.9rem;
  color:#6b6f75;
  margin:0;
}
/* small screens: slightly thinner band */
@media (max-width: 576px){
  .blogs-band__strip{ height: 170px; top: 35%; }
  .blogs-card{ max-width: 92%; }
}


/* spacing tweak on large screens */
@media (min-width: 992px){
  .pillars .row{ align-items:stretch }
}


@media (max-width:768px){
  .about-hero{
    background-image: url('/assets/images/about-bg-mob.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 40vh;
    padding-bottom: 90px !important;
  }
  .about-hero h1{
    font-size: 16px !important;
  }
  .about-hero p{
    font-size: 12px !important;
    margin-bottom: 0 !important;
  }
  .about-hero img{
    width: 200px;
  }
}
/* Our Mission */
.mission h2 {
  color:#f28a52; /* orange */
}

.mission-band {
  background:#f28a52;
  border-radius:0;
  overflow:hidden;
}

.mission-band p {
  max-width:700px;
  margin:0 auto;
  font-size:1.1rem;
  line-height:1.6;
}

.mission-img {
  position:absolute;
  bottom:-20px;
  height:180px;
  object-fit:contain;
}

.mission-left { left:0; }
.mission-right { right:0; }

/* Responsive */
@media(max-width:768px){
  .mission-img { height:80px;
  display: none;}
}

/* End About Us Page */
/* Start FAQ Page */
.faq-hero{
    background-image: url('/assets/images/faq-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 90vh;
    background-position-y: bottom;
}
@media (max-width:768px){
  .faq-hero{
    background-image: url('/assets/images/faq-bg-mob.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 40vh;
    padding-bottom: 90px !important;
  }
  .faq-hero h1{
    font-size: 16px !important;
  }
  .faq-hero p{
    font-size: 12px !important;
    margin-bottom: 0 !important;
  }
  .faq-hero img{
    width: 200px;
  }
}
/* End FAQ Page */
/* Start Travel Style Page */
.travel-style-hero{
  background-image: url('/assets/images/t-style-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 95vh;
  background-position-y: bottom;
}
@media (max-width:768px){
.travel-style-hero{
  background-image: url('/assets/images/t-style-bg-mob.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 40vh;
  padding-bottom: 90px !important;
}
.travel-style-hero h1{
  font-size: 14px !important;
}
.travel-style-hero p{
  font-size: 12px !important;
  margin-bottom: 0 !important;
}
.travel-style-hero img{
  width: 200px;
}
}
/* grid spacing */
.ts-cards-wrap { gap: 1.25rem; }

/* make the cards responsive */
.ts-cards-wrap .ts-card {
  --tile: 1; /* used for basis calc */
  flex: 1 1 calc(25% - 1.25rem); /* 4 per row on lg */
  max-width: calc(25% - 1.25rem);
  aspect-ratio: 4 / 3;           /* keeps a nice tile ratio */
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ts-cards-wrap .ts-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

/* 3 per row on md */
@media (max-width: 991.98px){
  .ts-cards-wrap .ts-card {
    flex-basis: calc(33.333% - 1.25rem);
    max-width: calc(33.333% - 1.25rem);
  }
}

/* Full width on mobile devices - col-12 equivalent */
@media (max-width: 767.98px){
  .ts-cards-wrap .ts-card {
    flex-basis: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 7 / 9;
  }

  .ts-cards-wrap {
    gap: 0.75rem;
  }

  .ts-cards-wrap .ts-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }

  .ts-cards-wrap .ts-title {
    font-size: 30px;
  }

  .ts-cards-wrap .ts-card .ts-overlay {
    padding: 0.75rem;
  }
}

/* clickable overlay fills the card */
.ts-cards-wrap .ts-card .ts-overlay {
  inset: 0;
  position: absolute;
  padding: 1rem;
  color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%);
  text-decoration: none;
  transition: background 0.3s ease;
}

.ts-cards-wrap .ts-card:hover .ts-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 20%, rgba(0,0,0,.65) 100%);
}

.ts-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 .25rem;
  transition: transform 0.3s ease;
}

.ts-cards-wrap .ts-card:hover .ts-title {
  transform: translateY(-4px);
}

.ts-cards-wrap .ts-card .view-sec {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.ts-cards-wrap .ts-card:hover .view-btn,
.ts-cards-wrap .ts-card:hover .view-sec img {
  display: inline-block !important;
}

.ts-cards-wrap .ts-card:hover .view-sec {
  opacity: 1;
  transform: translateY(0);
}
/* End Travel Style Page */
/* Start Special Offer Page */
.special-offer-hero{
  background-image: url('/assets/images/sp-off-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 90vh;
  background-position-y: bottom;
}
@media (max-width:768px){
.special-offer-hero{
  background-image: url('/assets/images/sp-off-bg-mob.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  min-height: 40vh;
  padding-bottom: 90px !important;
}
.special-offer-hero h1{
  font-size: 16px !important;
}
.special-offer-hero p{
  font-size: 12px !important;
  margin-bottom: 0 !important;
}
.special-offer-hero img{
  width: 200px;
}
}
/* End Special Offer Page */
/* Start Blog Details Page */
.blog-details .post-meta img { opacity:.8 }
.blog-details .rt-thumb { width: 88px; height: 64px; object-fit: cover }
.blog-details .rt-card { transition: box-shadow .2s ease }
.blog-details .rt-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.07) }
/* Sidebar frame */
.rt-aside {
  border-color: #f3c5ab;       /* soft orange border */
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
}
.rt-statue { height: 74px; }

/* Each row */
.rt-row { border-color: #e9eef3; } /* separators */
/* Ensure links stay inside card */
.rt-item {
  display: flex;
  flex-wrap: wrap;       /* wrap text instead of overflowing */
  gap: 0.75rem;
  align-items: flex-start;
  text-decoration: none;
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  width: 100%;           /* lock width to card */
  box-sizing: border-box;
}

/* Remove border on last item */
.rt-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Thumbnail */
.rt-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: .5rem;
  flex-shrink: 0;
}

/* Text body stays inside */
.rt-body {
  flex: 1 1 calc(100% - 90px);  /* allow wrapping inside */
  min-width: 0;                 /* prevents overflow */
}

/* Title wraps */
.rt-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f2d47;
  margin-bottom: .35rem;
  line-height: 1.3;
  word-wrap: break-word;        /* force long titles to wrap */
}

/* Meta info */
.rt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: 0 0 .25rem;
  font-size: .8rem;
  color: #7a8a99;
}

.rt-meta li {
  display: flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
}

.rt-price {
  font-size: .85rem;
  font-weight: 700;
  color: #f2602b;
}
.rt-price span {
  font-weight: 400;
  color: #7a8a99;
}


/* Mobile spacing */
@media (max-width: 575.98px) {
  .rt-meta { grid-template-columns: 1fr 1fr; }
}
.related-tours {
  background: white;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid var(--primary);
}
/* .related-tours::before{
  content: url('/assets/images/related-tours.png');
  position: absolute;
  top: -10px;
  left: 50%;
} */

.related-tours h4 {
    color: #2c3e50;
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
}
.rt-top-icon img{
  height: 70px;
  object-fit: contain;
}

.related-tour-item {
    display: flex;
    /* align-items: center; */
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.related-tour-item:last-child {
    border-bottom: none;
}

.related-tour-image {
    width: 87px;
    height: 133px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 12px;
    flex-shrink: 0;
}

.related-tour-info {
    flex-grow: 1;
}

.related-tour-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.related-tour-details {
    font-size: 0.75rem;
    color: #666;
}

.related-tour-details span {
    margin-right: 10px;
}

.related-tour-item .price-1{
  font-size: 14px;
  font-weight: 400;
}
.related-tour-item .price-2 {
    color: var(--primary) !important;
    font-weight: 600;
    font-size: 16px !important;
}

.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-header h2 {
    color: #ff6b35;
    font-size: 2rem;
    font-weight: 300;
    margin-bottom: 10px;
}

.golden-icon {
    color: #ffa726;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

@media (max-width: 768px) {
    .related-tours {
        margin-top: 20px;
    }

    .tour-image {
        height: 200px;
    }
}
/* End Blog Details Page */

/* Start Author Page */
.author-hero {
  background: #fff;
  background-image: url('/assets/images/author-hero.png');
  background-size: contain;
  background-position: start;
  background-repeat: no-repeat;
  position: relative;
}
.author-avatar {
  width: 280px;
  height: 200px;
  border-radius: 50%;
  /* background: #fbe3d7; */
  display: grid;
  place-items: center;
  /* border: 8px solid #f7ede7; */
}
.author-avatar img {
  width: 100%;
  height: 100%;
}
.author-socials .btn.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent-dark);
    color: #fff;
    font-size: 18px;
    transition: 0.3s ease;
    text-decoration: none;
  }

  .author-socials .btn.btn-icon:hover{
    background: #fff;
    color: var(--accent-dark) !important;
  }

.author-scroll {
  position: absolute;
  top: -26px;
  right: 50px;
  max-width: 220px;
  overflow: hidden;
  /* filter: drop-shadow(0 10px 20px rgba(0,0,0,.08)); */
}

.brand-divider .brand-line {
  height: 2px; background: #f2c1aa; border-radius: 2px;
}

.author-socials .btn-icon{
  width:36px; height:36px;
  font-size: 14px;
  padding: 0px;
  margin: 0px;
}
.author-socials .btn-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.author-socials .btn-icon:hover img{
    filter: brightness(0) saturate(100%) invert(15%) sepia(98%) saturate(1352%) hue-rotate(174deg) brightness(97%) contrast(107%);
  }
/* .author-socials .btn-icon:hover{
  background:#ffefe8;
  border-color:#ffd5c3;
  color:#f26a2e;
} */

/* Responsive tweaks */
@media (max-width: 767.98px){
  .author-hero {
  background: #fff;
  background-image: url('/assets/images/auth-hero-mob.png');
  background-size: contain;
  background-position: start;
  background-repeat: no-repeat;
  position: relative;
}
  .author-avatar { width: 140px; height: 140px; border-width: 6px; }
  /* .author-hero .h2{ font-size: 1.5rem; } */
  .author-scroll {
    top: -65px;
    right:-81px;
    max-width: 200px;
  }
  .author-title {
  font-size: 18px;
  font-weight: 400;
  color: var(--primary);
  margin-bottom: .25rem;
  text-align: center;
}
.author-para{
  max-width: 600px;
  font-size: 16px;
  line-height: 1.6;
  color: #6b7785;
  margin-bottom: 0;
  text-align: center;
  }
  .author-key{
    text-align: center;
    display: flex;
    justify-content: center;
    max-width: 230px;
  }
  .author-socials{
    justify-content: center;
  }
}

/* End Author Page */
/* Start Tour Details Page*/
.tour-head h2{
  font-size: 28px;
}
/* Gallery */
.tv-main img { display:block;}

.tv-prev{ left:10px; } .tv-next{ right:10px; }
.tv-nav{
  position:absolute;
  top:50%;
  transform: translateY(-243%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid #E5E7EB;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
  display:grid; place-items:center;
  color: #6b7280;
  transition: transform .15s ease, background .2s ease;
  z-index: 2;
  width:60px;
  height: 60px;
}
.ts-nav i {
  width: 13px;
}
/* .tv-nav:hover{ transform: translateY(-50%) scale(1.04); background: #f9fafb; } */
.tv-prev{ left: -24px; }
.tv-next{ right: -24px; }
.tv-thumbs{ overflow:auto hidden; }
.tv-thumb{
  border:0; padding:0; border-radius:12px;
  min-width:194px;
  height:141px;
  margin-right: 10px;
  overflow:hidden; flex:0 0 92px;
  outline:2px solid transparent; outline-offset:2px; background:#fff;
  cursor:pointer; transition:outline-color .2s ease;
}
.tv-thumb img{ width:100%; height:100%; object-fit:cover;
  display:block; }
.tv-thumb.is-active{ outline-color:#f5a077; }

/* Date field with icon */
.date-field,.date-field-2{ position:relative; }
.date-field img,.date-field-2 img{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  width:16px; height:16px; opacity:.6;
}

/* Trip Summary Card */
.card.trip-summary {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}

.card.trip-summary .card-body {
  background: linear-gradient(to bottom, #fff5f0 0%, #ffffff 25%);
  padding: 2rem;
}

/* Title */
.card.trip-summary h5 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--primary); /* matches your primary orange */
  margin-bottom: 0.5rem;
}

/* Divider */
.card.trip-summary .brand-divider img {
  height: 24px;
  opacity: 0.8;
}

/* Paragraph */
.card.trip-summary p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #444; /* softer than pure black */
}

/* Tour Summary Card */
.card.tour-summary {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.card.tour-summary .card-body {
  background: linear-gradient(to bottom, #fff5f0 0%, #ffffff 25%);
  padding: 2rem;
}

/* Title */
.card.tour-summary h5 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
}

/* Divider */
.card.tour-summary .brand-divider img {
  height: 24px;
  opacity: 0.8;
}

/* Details list */
.tour-details li {
  background: linear-gradient(to bottom, #fff5f0 0%, #ffffff 75%);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
  font-size: 0.95rem;
  color: #444;
}

.tour-details li img {
  /* width: 22px; */
  margin-right: 10px;
  font-size: 1rem;
}

.tour-details li span {
  flex: 1;
  color: #555;
font-weight: 500;
}

.tour-details li strong {
  color: var(--accent-dark);
  font-weight: 600;
}

/* Even and odd list item styling */
.tour-details li:nth-child(even) {
  background: #fff;
}

.tour-details li:nth-child(odd) {
  background: #FEF2ED;
}
/* Small brand divider reuse */
.brand-divider img{ height:30px; opacity:.9; }
/* Cruise Facilities */
.cruise-facilities .card-body,
.attractions-card .card-body,
.itinerany-card .card-body,
.inclusions-card .card-body,
.exclusion-card .card-body{
  background: linear-gradient(to bottom, #fff5f0 0%, #ffffff 25%);
  padding: 2rem;
  border-radius: 12px;
}

/* Title */
.cruise-facilities h5 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #f26a2e;
}

/* Bullet list */
.facility-list {
  padding-left: 1.2rem;
  margin-bottom: 1.5rem;
  color: #444;
  font-size: 0.95rem;
}
.facility-list li {
  margin-bottom: 0.4rem;
}

/* Facility tags */
.facility-tags {
  margin-top: 1rem;
}
.facility-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width:243px;
  margin-bottom: 8px;
  border: 1px solid #f26a2e50;
  border-radius: 6px;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  color: var(--accent-dark);
  background: #f7f7f7;
  cursor: default;
  transition: all 0.2s ease-in-out;
}
.facility-tag i {
  font-size: 0.95rem;
  color: #f26a2e;
}
.facility-tag:hover{
  border-color: #f26a2e;
  background: #f26a2e;
  color: #fff;
  box-shadow: 0 2px 8px #E2E2E2;
}
.facility-tag:hover img{
  filter: brightness(0) invert(1);
}
.highlight-card, .highlight-card-2 {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--primary);
  border-radius: 8px;
  padding: 5px;
  margin-bottom: 12px;
  transition: all 0.3s ease-in-out;
}
.highlight-card h6, .highlight-card-2 h6{
  color: var(--accent-dark);
}
.highlight-card:hover h6, .highlight-card-2:hover h6{
  color: #fff;
}
.highlight-card-2{
  background-color: #f7f7f7;
}
.highlight-card img {
  width: 78px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}
.highlight-card.active,
.highlight-card:hover,
.highlight-card-2.active,
.highlight-card-2:hover {
  background-color: var(--primary);
  color: #fff;
}
.highlight-card.active a,
.highlight-card:hover a,
.highlight-card-2.active a,
.highlight-card-2:hover a{
  color: #fff !important;
  text-decoration: underline;
}
/* Itinerary layout */
/* Main itinerary row */
.itinerary-day {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

/* Circle icon */
.itinerary-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
/* Vertical line */
.itinerary-icon .itinerary-line {
  position: absolute;
  top: 36px;
  height: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    #ccc,
    #ccc 4px,
    transparent 4px,
    transparent 8px
  );
  transition: height 0.35s ease;
}

/* Content area */
.itinerary-content {
  flex: 1;
}

/* Bordered header */
.itinerary-header {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px 15px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* Day title */
.itinerary-header h6 {
  font-weight: 700;
  color: #083c5a; /* navy tone */
}

/* Arrow button */
.btn-toggle {
  border: none;
  background: none;
  font-size: 16px;
  cursor: pointer;
  color: #083c5a;
}

.btn-toggle i {
  transition: transform 0.3s ease;
}
.collapse.show + .btn-toggle i {
  transform: rotate(180deg);
}
/* List styling for inclusions/exclusions */
.inc-exc-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f4f4f4;
  font-size: 14px;
  color: #444;
}
.inc-exc-list li:last-child {
  border-bottom: none;
}
.inc-exc-list img {
  width: 32px;
  height: 33px;
  flex-shrink: 0;
}
.price-block h6 {
  font-size: 1rem;
  margin-bottom: .5rem;
}

.hotel-card {
  width: 150px;
  text-align: center;
}

.hotel-card img {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  height: 100px;
  object-fit: cover;
}
.hotel-box{
  background-color: #fff8f1;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.price-details-card .card-body{
  background: linear-gradient(to bottom, #fff5f0 0%, #ffffff 10%);
  padding: 2rem;
  border-radius: 12px;
}
.price-table {
  border-collapse: collapse;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.price-table thead th {
  background: var(--primary);
  color: #fff;
  text-align: center;
}
.price-table tr{
  margin-top: 10px;
  margin-bottom: 10px;
}

.price-table tbody td {
  text-align: center;
  background: #fff;
  margin-top: 8px;
  border: none;
  /* border-bottom: none; */
  border-bottom: 1px transparent solid !important;
}

.price-table tbody tr:nth-child(odd) td {
  background-color: #fff8f1;
}

.price-notes p {
  background: #fff6f2;
  padding: .6rem .8rem;
  /* border-radius: 6px; */
  color: #000;
  margin-bottom: .5rem;
  font-size: 14px;
  border-left: 10px solid var(--primary);
}
.policy-price .accordion-button{
  background: #f6f6f6;
  /* border: 1px solid #e5e7eb; */
  border-radius: 6px !important;
  /* box-shadow: 0 6px 14px rgba(0,0,0,.06); */
  padding: .9rem 1rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .75rem;
  color: var(--accent-dark);

}
.policy-price .accordion-button:not(.collapsed){
  box-shadow:none;
  background-color: var(--primary);
  color: #fff;
}
.policy-price .accordion-button:not(.collapsed) .faq-icon {
  background-color: #f9c6ae;
  filter: none;
}
.policy-price .accordion-button:not(.collapsed) .faq-title{
  color:#fff;
}
.policy-price .accordion-button:not(.collapsed) .faq-q img {
  filter: brightness(0) invert(1); /* make icons white if they’re dark svgs/pngs */
}
.download-btn{
  border: 1px solid var(--primary);
  border-radius: 8px;
}
.download-btn:hover{
  background-color: var(--primary);
  color: #fff;
}
.download-btn:hover img{
  filter: brightness(0) invert(1);
}
.inquiry-form{
  background-image: url(/assets/images/inquiry-form-bg.png);
  background-repeat: no-repeat;
}
.date-field-2{
  /* position: relative; */
  /* background:  #fff; */
  /* border: 1px solid #e7edf3; */
  border-radius: 8px;
  padding: 8px;
  /* min-height: 56px; */
  display:flex; align-items:center;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  font-size: 16px;
  /* max-height: 48px; */
}
input[type="tel"]{
  min-height: 48px !important;
}
.inquiry-form .qty-field
 {
  gap: 0.1rem;
 }
 .inquiry-form .qty-input {
  width: 15px;
}
/* Why Choose Us */
.choose-us-list .choose-item {
  transition: background .3s, transform .2s;
}

.choose-us-list .choose-item:hover {
  background: #fafafa;
  transform: translateX(4px);
}

.choose-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(53%) sepia(60%) saturate(2500%) hue-rotate(340deg) brightness(95%) contrast(95%);
}
.why-inquiry-card{
  margin-top: 70px;
}

/* Keep thumbs nice on small screens */
@media (max-width: 575.98px){
  .tv-thumb{ flex-basis: 70px; min-width: 85px; height: 69px; margin-right: 0px; }
  .tv-thumbs{ margin-top: -20px; position: relative; z-index: 10; }
  .tv-nav{
    transform: translateY(-100%);
  }
  .tour-head h2{
    font-size: 16px;
  }
  .download-btn{
    padding: 15px 14px;
    width: 266px;
    margin: auto;
    font-size: 14px;
    margin-bottom: 2rem;
  }
}

/* End Tour Details Page */
/* Start Thanks Page */
/* Thanks Page */
.thanks-page {
  background-image: url('/assets/images/thanks-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
}
.thanks-page h3, .thanks-page h6{
  font-size: 24px;
}
.thanks-page h6{
  /* font-size: 24px; */
  font-weight: 500;
}
.brand-divider img {
  height: 30px;
  opacity: .9;
}

/* Summary Box */
.enquiry-summary .summary-box {
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: .75rem;
  font-size: 18px;
  font-weight: 500;
  color: var(--accent-dark);
}
.enquiry-summary .summary-box span{
  color: #535353;
  display: block;
}

.enquiry-summary .summary-box strong {
  display: block;
  font-size: 14px;
  color: #111;
  margin-top: 4px;
}

/* Button */
.return-btn{
  background-color: #fff;
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: var(--primary);
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 500;
}
.return-btn:hover{
  background-color: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}
.back-btn{
  background-color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 8px;
  color: #fff;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 500;
}
.back-btn:hover{
  background-color: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}

/* End Thanks Page */
/* Start Search Page */
.search-hero {
  min-height: 80vh; /* adjust as needed */
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
  text-align: center;
  background: url('/assets/images/search-bg.png') no-repeat center bottom;
  background-size: cover;
  position: relative;
}

.search-hero h2 {
  font-size: 32px;
  font-weight: 600;
  color: var(--primary);
}

.search-hero p {
  color: #555;
  margin-bottom: 20px;
}

.search-box {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid var(--primary) !important;
  border-radius: 8px;
}

.search-box .form-control {
  border-radius: 8px 0 0 8px;
  border: 1px solid #ddd;
  padding: 14px;
  font-size: 16px;
}

.search-box .btn {
  border-radius: 0 8px 8px 0;
  background: var(--primary);
  border: none;
  color: #fff;
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 500;
  transition: background 0.3s ease;
}

.search-box .btn:hover {
  background: #e0723f;
}
@media (max-width:768px){
  .search-hero{
    background-image: url('/assets/images/search-bg-mob.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 50vh;
  }
  .search-hero h2 {
    font-size: 20px;
  }
  .search-hero p {
    font-size: 14px;
  }

  .search-box{
    background-color: #fff;
  }

}
/* End Search Page */
