/* =========================================================
   ✅ HOME.CSS (UPDATED + PREMIUM + SYNC FIXES)
   ✅ Upgrades included:
   1) Hero vignette corners + warm lens glow (Aman vibe)
   2) Frosted glass hero caption (luxury) + WRAPPING text
   3) Synced Hero progress bar (JS controls duration)
   4) Experiences with Purpose: SYNC image+text+bar + smooth fade
   5) Cleaner cards + consistent shadows/radius
   6) Removed janky hover zoom on hero slides
   7) NEW: Safari Journey section premium UI (sj-premium + sj-tabs)
   8) NEW: “Coming Soon” premium dark badge (sig-badge)
   9) ✅ NEW: Purpose tabs (sig-tab) now match Safari Journey buttons
   10) ✅ NEW: Signature arrows fixed inside image (premium glass)
   ========================================================= */

/* =========================================================
   ✅ THEME TOKENS (Luxury consistency)
   ========================================================= */
:root{
  --lux-gold: #C6A664;
  --lux-gold-2: #b5964f;
  --lux-ink: #0B0B0B;
  --lux-charcoal: #1c1b19;
  --lux-cream: #f7f4ef;

  --lux-radius-xl: 32px;
  --lux-radius-lg: 24px;
  --lux-radius-md: 18px;

  --lux-shadow-sm: 0 6px 18px rgba(0,0,0,.10);
  --lux-shadow:    0 18px 60px rgba(0,0,0,.35);

  --lux-ease: cubic-bezier(.2,.8,.2,1);
}

/* =========================================================
   ✅ HERO CAROUSEL (Premium + Smooth)
   ========================================================= */

/* Container for hero overlays */
#heroCarousel{
  position: relative;
  overflow: hidden;
  background: #000;
}

/* ✅ Vignette + Warm Lens Glow (under grain/text) */
#heroCarousel::before{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  z-index: 1;
  opacity: .95;
  background:
    radial-gradient(900px 600px at 18% 22%,
      rgba(198,166,100,.22),
      rgba(198,166,100,.10) 35%,
      transparent 70%),
    radial-gradient(900px 640px at 88% 78%,
      rgba(212,175,55,.18),
      rgba(212,175,55,.08) 35%,
      transparent 72%),
    radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0) 58%,
      rgba(0,0,0,.22) 75%,
      rgba(0,0,0,.55) 100%);
  mix-blend-mode: soft-light;
  filter: saturate(112%) contrast(104%);
  animation: heroGlowDrift 18s ease-in-out infinite alternate;
}

/* Optional subtle film grain */
#heroCarousel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 2;
  opacity:.12;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,.02) 0px,
      rgba(255,255,255,.02) 1px,
      transparent 2px,
      transparent 4px
    );
  mix-blend-mode: overlay;
}

/* ✅ Slide background */
#heroCarousel .carousel-item{
  height: 100vh;
  min-height: 560px;
  background-size: cover;
  background-position: center;
  position: relative;
  border-radius: 0px;
  overflow: hidden;
  transform: none !important;
  transition: none;
}

/* ✅ Cinematic overlay per slide */
#heroCarousel .carousel-item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index: 1;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(198,166,100,.10), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.72));
}

/* ❌ Remove hero hover zoom (avoids janky scale + blur) */
#heroCarousel .carousel-item:hover{
  transform:none !important;
}

/* =========================================================
   ✅ HERO CAPTION (Centered + Frosted inner card)
   ✅ NOTE: Template uses .hero-caption-frosted inside .carousel-caption
   ========================================================= */
#heroCarousel .carousel-caption{
  position:absolute;
  inset:0;
  z-index: 4;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 1.25rem;
  text-align: center;
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* Frosted inner card */
#heroCarousel .hero-caption-frosted{
  position:relative;
  max-width: 980px;
  width: min(980px, 92vw);
  padding: clamp(1rem, 2.6vw, 2.2rem);
  border-radius: var(--lux-radius-xl);
  background: rgba(11,11,11,.38);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--lux-shadow);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

/* gold border shimmer line */
#heroCarousel .hero-caption-frosted::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(
    90deg,
    rgba(198,166,100,.92),
    rgba(255,255,255,.06),
    rgba(198,166,100,.62)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.85;
  pointer-events:none;
}

#heroCarousel .hero-caption-frosted > *{
  position:relative;
  z-index: 1;
}

/* Premium readable text (WRAPS) */
#heroCarousel .hero-caption-frosted h1,
#heroCarousel .hero-caption-frosted p{
  color:#fff;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
}

/* Headline */
#heroCarousel .hero-caption-frosted h1{
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.1;
  margin: 0 0 .65rem 0;
  font-size: clamp(2rem, 3.3vw, 3.6rem);
  text-wrap: balance;
}

/* Subtitle */
#heroCarousel .hero-caption-frosted p{
  font-family: 'Montserrat', sans-serif;
  margin: 0 0 1rem 0;
  opacity: .92;
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  line-height: 1.45;
}

/* =========================================================
   ✅ HERO: Synced Progress Bar (JS adds duration + class)
   ========================================================= */
#heroCarousel .hero-progress{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height: 5px;
  background: rgba(255,255,255,.10);
  z-index: 6;
  overflow:hidden;
}

#heroCarousel .hero-progress-bar{
  height:100%;
  width:0%;
  background: linear-gradient(to right, #e4cc8b, #b18b46);
  animation: none;
}

#heroCarousel .hero-progress-bar.is-running{
  animation-name: heroFill;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes heroFill{
  from{ width:0%; }
  to{ width:100%; }
}

/* =========================================================
   ✅ Hero Controls (Premium Round Buttons)
   ========================================================= */
#heroCarousel .carousel-control-prev,
#heroCarousel .carousel-control-next{
  width: 3.25rem;
  height: 3.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  opacity: 1;
}

#heroCarousel .carousel-control-prev::before,
#heroCarousel .carousel-control-next::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#heroCarousel .carousel-control-prev:hover::before,
#heroCarousel .carousel-control-next:hover::before{
  background: rgba(0,0,0,.72);
  border-color: rgba(198,166,100,.35);
}

#heroCarousel .carousel-control-prev-icon,
#heroCarousel .carousel-control-next-icon{
  position: relative;
  z-index: 1;
  width: 1.25rem;
  height: 1.25rem;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

/* =========================================================
   ✅ Indicators (Gold Active Bar)
   ========================================================= */
#heroCarousel .carousel-indicators{
  bottom: 18px;
  z-index: 5;
}

#heroCarousel .carousel-indicators [data-bs-target]{
  width: 30px;
  height: 4px;
  border-radius: 999px;
  margin: 0 5px;
  background-color: rgba(255,255,255,.22);
  transition: all .25s var(--lux-ease);
}

#heroCarousel .carousel-indicators [data-bs-target].active,
#heroCarousel .carousel-indicators [data-bs-target]:hover{
  background: linear-gradient(90deg, var(--lux-gold), rgba(255,255,255,.10));
  box-shadow: 0 0 0 1px rgba(198,166,100,.25);
}

/* =========================================================
   ✅ Typography (Sections)
   ========================================================= */
h2{
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 2.2vw, 2.4rem);
  font-weight: 700;
  color: var(--lux-gold);
  text-transform: none;
  letter-spacing: .6px;
}

.section-title{
  text-align:center;
  margin-bottom: 40px;
  border-bottom: 2px solid #e0dccc;
  display:inline-block;
  padding-bottom: 8px;
}

/* =========================================================
   ✅ Package Cards (Clean Luxury)
   ========================================================= */
.package-card{
  border: 1px solid rgba(198,166,100,.55);
  border-radius: var(--lux-radius-xl);
  width: 100%;
  height: 370px;
  max-height: 420px;
  overflow:hidden;
  box-shadow: var(--lux-shadow-sm);
  transition: transform .35s var(--lux-ease), box-shadow .35s var(--lux-ease);
  background: #000;
}

.package-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0,0,0,.22);
}

.package-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .6s var(--lux-ease);
  filter: brightness(.92);
}

.package-card:hover img{
  transform: scale(1.06);
}

.package-title{
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 10px 22px rgba(0,0,0,.55);
}

/* =========================================================
   ✅ Utility / Highlight Styles
   ========================================================= */
.bg-light-custom{ background-color: var(--lux-cream); }

.text-highlight{
  color: var(--lux-gold);
  letter-spacing: .8px;
  font-family: 'Playfair Display', serif;
  text-shadow: 0 3px 10px rgba(198,166,100,.35);
}

.subtitle-highlight{
  color: var(--lux-gold-2);
  font-size: 1.1rem;
  font-family: 'Montserrat', sans-serif;
  opacity: 0.88;
  font-style: italic;
  letter-spacing: 0.45px;
}

/* =========================================================
   ✅ Featured Cards (Safari)
   ========================================================= */
.card-safari{
  border: 1px solid rgba(198,166,100,.55);
  border-radius: var(--lux-radius-xl);
  width: 100%;
  height: 400px;
  overflow: hidden;
  box-shadow: var(--lux-shadow-sm);
  position: relative;
  background: #000;
  transition: transform .35s var(--lux-ease), box-shadow .35s var(--lux-ease);
}

.card-safari:hover{
  transform: translateY(-10px);
  box-shadow: 0 26px 60px rgba(0,0,0,.22);
}

.card-img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: brightness(70%);
  transition: transform .65s var(--lux-ease), filter .65s var(--lux-ease);
}

.card-safari:hover .card-img{
  transform: scale(1.06);
  filter: brightness(74%);
}

.card-content{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,0));
}

.card-title{
  font-family: 'Playfair Display', serif;
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--lux-gold);
  margin-bottom: .45rem;
  text-shadow: 0 10px 24px rgba(0,0,0,.55);
}

.card-duration{
  font-size: .92rem;
  color: #e0dccc;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

.btn-safari{
  border: 1px solid var(--lux-gold);
  color: var(--lux-gold);
  font-weight: 700;
  transition: background-color .3s var(--lux-ease), color .3s var(--lux-ease), transform .3s var(--lux-ease);
}

.btn-safari:hover{
  background-color: var(--lux-gold);
  color: #fff;
  transform: translateY(-1px);
}

/* =========================================================
   ✅ Luxury Section (Background + Slow Zoom)
   ========================================================= */
.luxury-section{
  background: linear-gradient(to bottom right, #f9f6f0, #f3eede);
  position: relative;
  overflow: hidden;
}

.luxury-section::before{
  content:"";
  position:absolute;
  top:-10%;
  left:-10%;
  width:120%;
  height:120%;
  background: url('../images/footer-bg.jpg') center/cover no-repeat;
  opacity: .05;
  animation: slowZoom 60s linear infinite alternate;
  z-index: 0;
}

@keyframes slowZoom{
  0%{ transform: scale(1); }
  100%{ transform: scale(1.05); }
}

/* CTA */
.btn-cta{
  background: linear-gradient(135deg, var(--lux-gold), #d4af37);
  color:#fff;
  padding: 14px 32px;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 999px;
  border: none;
  transition: all .4s var(--lux-ease);
  box-shadow: 0 10px 28px rgba(198,166,100,.35);
}

.btn-cta:hover{
  background: linear-gradient(135deg, #d4af37, var(--lux-gold));
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(198,166,100,.55);
}

/* =========================================================
   ✅ Tiles / Masonry (Frosted + Hover)
   ========================================================= */
.tile-wrapper{
  overflow:hidden;
  border-radius: var(--lux-radius-lg);
  border: 1px solid rgba(224,220,204,.75);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: box-shadow .3s var(--lux-ease), transform .3s var(--lux-ease);
}

.tile-hover{
  transition: transform .6s var(--lux-ease), filter .6s var(--lux-ease);
  width:100%;
  height:100%;
  object-fit: cover;
  filter: brightness(.92) sepia(.08) saturate(1.15);
}

.tile-wrapper:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(198,166,100,.20);
}

.tile-wrapper:hover .tile-hover{
  transform: scale(1.05);
  filter: brightness(1.05) sepia(.08) saturate(1.2);
}

/* Frosted tile */
.frosted-tile{
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 1rem;
  overflow:hidden;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  transition: all .4s var(--lux-ease);
}

.frosted-tile:hover{
  background: rgba(255,255,255,.18);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

/* gold overlay glow */
.luxury-overlay{
  position: relative;
  overflow:hidden;
}

.luxury-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(198,166,100,.22);
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index: 2;
  transition: opacity .5s var(--lux-ease);
  opacity: 0;
}

.luxury-overlay:hover::after{
  opacity: .42;
}

.luxury-overlay.visible::after{
  opacity: 1;
}

/* =========================================================
   ✅ Buttons (Shimmer + Focus)
   ========================================================= */
.btn-outline-light{
  position: relative;
  overflow: hidden;
}

.btn-outline-light:hover{
  background-color: var(--lux-gold);
  color:#fff !important;
  border-color: var(--lux-gold);
}

.btn-outline-light::before{
  content:"";
  position:absolute;
  top:0;
  left:-75%;
  width:50%;
  height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,.20), rgba(255,255,255,.10), rgba(255,255,255,0));
  transform: skewX(-20deg);
  transition: left .55s var(--lux-ease);
}

.btn-outline-light:hover::before{
  left:130%;
}

/* Active audience button (legacy support) */
.btn-warning.active-btn{
  background-color: var(--lux-gold);
  border: none;
  color:#fff;
}
.btn-warning.active-btn:hover{
  background-color: var(--lux-gold-2);
}

/* Outline warning */
.btn-outline-warning{
  border: 2px solid var(--lux-gold);
  color: var(--lux-gold);
  transition: all .3s var(--lux-ease);
}
.btn-outline-warning:hover{
  background-color: var(--lux-gold);
  color:#fff;
  border-color: var(--lux-gold);
}

/* Divider */
.divider-highlight{
  width:80px;
  height:4px;
  background: linear-gradient(90deg, var(--lux-gold), transparent);
  margin: 0 auto 1rem auto;
  border-radius: 999px;
}

/* =========================================================
   ✅ Zoom Container
   ========================================================= */
.zoom-container{
  max-width: 880px;
  height: 400px;
  overflow:hidden;
  border-radius: var(--lux-radius-lg);
  position: relative;
}

.zoom-container img,
.zoom-image{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: var(--lux-radius-lg);
  transition: transform 6s var(--lux-ease);
}

.zoom-container:hover img,
.zoom-container:hover .zoom-image{
  transform: scale(1.08);
}

/* Particle background container */
#particles-js{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  pointer-events:none;
  z-index: 1;
}

/* =========================================================
   ✅ Steps Cards
   ========================================================= */
.step-card{
  padding: 1.5rem;
  border: 1px solid #dee2e6;
  border-radius: 1rem;
  background-color: #fff;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  height: 100%;
  transition: transform .4s var(--lux-ease), box-shadow .4s var(--lux-ease);
}

.step-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(198,166,100,.18);
}

.step-card .icon{
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #ffc107;
}

.step-card h5{
  color: var(--lux-gold);
  font-weight: 800;
  margin-bottom: .5rem;
}

.step-card p{
  color: #6c757d;
  font-size: .9rem;
}

/* =========================================================
   ✅ Safari Journey Section (Base)
   ========================================================= */
.safari-journey-section{
  background-color: #fdf6e5;
  position: relative;
  overflow:hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

#particles-journey{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 1;
  pointer-events:none;
}

.safari-journey-container{
  position: relative;
  z-index: 2;
}

/* =========================================================
   ✅ SAFARI JOURNEY — PREMIUM STYLE (Aman / Singita vibe)
   ✅ (Use: <section class="safari-journey-section sj-premium">)
   ========================================================= */
.sj-premium{
  position: relative;
  background:
    radial-gradient(900px 420px at 15% 15%, rgba(198,166,100,.20), transparent 60%),
    linear-gradient(to bottom, #fbf4e6, #f6edd8);
  overflow: hidden;
}

.sj-premium::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(1100px 600px at 85% 55%, rgba(0,0,0,.05), transparent 60%),
    radial-gradient(800px 420px at 20% 80%, rgba(198,166,100,.12), transparent 62%);
  pointer-events:none;
  z-index:0;
}

.safari-journey-container{
  z-index:2;
}

/* Premium glass tabs container */
.sj-tabs{
  width: min(980px, 100%);
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  padding: .65rem;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(198,166,100,.28);
  box-shadow: 0 14px 36px rgba(0,0,0,.08);
}

/* Premium tabs */
.sj-tab{
  flex: 1 1 180px;
  border: 1px solid rgba(198,166,100,.35);
  background: rgba(255,255,255,.75);
  border-radius: 999px;
  padding: .72rem 1.05rem;
  font-weight: 700;
  color: #1c1b19;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  transition: transform .25s var(--lux-ease), box-shadow .25s var(--lux-ease), background .25s var(--lux-ease);
}

.sj-tab:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(198,166,100,.14);
}

.sj-tab.is-active{
  background: linear-gradient(135deg, rgba(198,166,100,.95), rgba(228,204,139,.85));
  color: #0B0B0B;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 18px 42px rgba(198,166,100,.24);
}

/* Left text card */
.sj-card{
  position: relative;
  height: 100%;
  border-radius: var(--lux-radius-xl);
  padding: clamp(1.1rem, 2.2vw, 1.8rem);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(198,166,100,.28);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  overflow: hidden;
}

.sj-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(90deg, rgba(198,166,100,.65), rgba(255,255,255,.12), rgba(198,166,100,.40));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.7;
  pointer-events:none;
}

.sj-kicker{
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(11,11,11,.65);
}

.sj-kicker i{
  color: var(--lux-gold);
}

.sj-title{
  font-family: 'Playfair Display', serif;
  color: #0B0B0B;
  font-size: clamp(1.55rem, 2.3vw, 2.2rem);
}

.sj-title span{
  color: var(--lux-gold);
  font-style: italic;
}

.sj-text{
  color: rgba(11,11,11,.70);
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Metrics */
.sj-metrics{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .85rem;
}

.sj-metric{
  border-radius: 18px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(198,166,100,.22);
  padding: .85rem .9rem;
  text-align: center;
}

.sj-num{
  font-weight: 800;
  color: var(--lux-gold);
  font-size: 1.05rem;
  letter-spacing: .02em;
}

.sj-label{
  font-size: .82rem;
  color: rgba(11,11,11,.65);
}

/* Media */
.sj-media{
  height: 100%;
  display: flex;
}

.sj-imageWrap{
  position: relative;
  width: 100%;
  height: clamp(360px, 46vw, 420px);
  border-radius: var(--lux-radius-xl);
  overflow: hidden;
  border: 1px solid rgba(198,166,100,.28);
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  background: #0b0b0b;
}

.sj-image{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
  transition: transform 6s var(--lux-ease);
  filter: brightness(.92) saturate(1.08);
}

.sj-imageWrap:hover .sj-image{
  transform: scale(1.07);
}

.sj-imageOverlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 20% 25%, rgba(198,166,100,.18), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.65));
  pointer-events:none;
}

.sj-imageLabel{
  position:absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  padding: .55rem .85rem;
  border-radius: 999px;
  font-size: .85rem;
  background: rgba(11,11,11,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: rgba(255,255,255,.90);
}

.sj-primary{
  border-width: 2px;
}

.sj-secondary{
  border: 1px solid rgba(11,11,11,.18);
  color: rgba(11,11,11,.80) !important;
}

.sj-secondary:hover{
  background: rgba(11,11,11,.90);
  color: #fff !important;
  border-color: rgba(11,11,11,.18);
}

/* Responsive */
@media (max-width: 992px){
  .sj-tabs{ border-radius: 22px; }
  .sj-metrics{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 576px){
  .sj-metrics{ grid-template-columns: 1fr; }
}

/* =========================================================
   ✅ Departures Section
   ========================================================= */
#departuresSection{
  background-color: #f8f1df;
  transition: background-color 1s ease;
  position: relative;
  overflow:hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.departures-container{
  position: relative;
  z-index: 2;
}

.departure-arrow-btn{
  font-size: 1.5rem;
  padding: 1rem;
}

.departure-info h3{
  color: var(--lux-gold);
  font-weight: 800;
  margin-bottom: 1rem;
}

.departure-info p{
  margin-bottom: .5rem;
  color: #6c757d;
}

.departure-description{
  margin-top: 1rem;
  font-size: 1.25rem;
}

.departure-link{
  min-width: 200px;
  margin-top: 1.5rem;
}

.departure-image-wrapper{
  position: relative;
  overflow:hidden;
  border-radius: 1.5rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  height: 400px;
}

/* =========================================================
   ✅ Experiences with Purpose (Destinations) — CLEAN + SYNC
   ========================================================= */
#signatureDestinationsSection{
  background: linear-gradient(to right, #2e2b27, #1c1b19);
  color: #f5f1e8;
  position: relative;
  overflow:hidden;
}

#signatureDestinationsSection .lux-particles-overlay{
  background: url('/static/safariweb/images/particles-gold.gif') center/cover no-repeat;
  opacity: .04;
  pointer-events:none;
  z-index: 0;
}

/* ✅ Make both columns align perfectly */
#signatureDestinationsSection #signature-carousel{
  align-items: stretch;
}

/* ✅ Works with your NEW revamped HTML (sig-imageShell) AND old structure */
#signatureDestinationsSection .sig-imageShell,
#signatureDestinationsSection .signature-media{
  position: relative;
  display:flex;
}

/* ✅ Ensure the image wrapper fills the column height */
#signatureDestinationsSection .lux-image-wrapper{
  width:100%;
  height: clamp(320px, 48vw, 480px);
  position: relative;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
  overflow:hidden;
  border-radius: var(--lux-radius-lg);
}

/* Image scaling */
#signatureDestinationsSection .lux-image-wrapper img{
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: .95;
  transition: transform .7s var(--lux-ease), filter .7s var(--lux-ease);
}

#signatureDestinationsSection .lux-image-wrapper:hover img{
  transform: scale(1.05);
}

/* Left-side gradient sweep for depth */
#signatureDestinationsSection .lux-image-wrapper::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:42%;
  height:100%;
  background: linear-gradient(to left, rgba(28,27,25,0) 0%, #1c1b19 100%);
  z-index: 2;
  pointer-events:none;
}

/* ✅ Text column card (supports revamped .sig-contentCard AND your old destination-content) */
#signatureDestinationsSection .sig-contentCard,
#signatureDestinationsSection #destination-content{
  height: 100%;
  border-radius: var(--lux-radius-xl);
  padding: 1.35rem 1.35rem 1.15rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  position: relative;
  overflow: hidden;
}

/* subtle border shimmer */
#signatureDestinationsSection .sig-contentCard::before,
#signatureDestinationsSection #destination-content::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(90deg, rgba(198,166,100,.85), rgba(255,255,255,.06), rgba(198,166,100,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .7;
  pointer-events:none;
}

/* Ensures text stack stays above shimmer */
#signatureDestinationsSection .sig-contentCard > *,
#signatureDestinationsSection #destination-content > *{
  position: relative;
  z-index: 1;
}

/* =========================================================
   ✅ NEW: PURPOSE TABS (sig-tab) MATCH SAFARI JOURNEY BUTTONS
   ========================================================= */
#signatureDestinationsSection .sig-tabsWrap{
  position: relative;
  z-index: 7;
}

/* Premium glass tabs container (dark version) */
#signatureDestinationsSection .sig-tabs{
  width: min(980px, 100%);
  display:flex;
  flex-wrap: wrap;
  gap: .65rem;
  padding: .65rem;
  border-radius: 999px;

  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(198,166,100,.28);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}

/* Premium tabs */
#signatureDestinationsSection .sig-tab{
  flex: 1 1 180px;
  width: 100%;
  border: 1px solid rgba(198,166,100,.40);

  background: rgba(255,255,255,.06);
  color: rgba(247,244,239,.92);

  border-radius: 999px;
  padding: .72rem 1.05rem;

  font-weight: 800;
  letter-spacing: .01em;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  transition: transform .25s var(--lux-ease),
              box-shadow .25s var(--lux-ease),
              background .25s var(--lux-ease),
              border-color .25s var(--lux-ease),
              color .25s var(--lux-ease);
}

#signatureDestinationsSection .sig-tab i{
  color: var(--lux-gold);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

#signatureDestinationsSection .sig-tab:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.10);
  border-color: rgba(198,166,100,.55);
  box-shadow: 0 16px 34px rgba(198,166,100,.12);
}

#signatureDestinationsSection .sig-tab.is-active{
  background: linear-gradient(135deg,
    rgba(198,166,100,.96),
    rgba(228,204,139,.84)
  );
  color: #0B0B0B;
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 18px 44px rgba(198,166,100,.22);
}

#signatureDestinationsSection .sig-tab.is-active i{
  color: #0B0B0B;
}

#signatureDestinationsSection .sig-tab:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(198,166,100,.35),
    0 18px 44px rgba(0,0,0,.25);
}

@media (max-width: 992px){
  #signatureDestinationsSection .sig-tabs{ border-radius: 22px; }
}

@media (max-width: 576px){
  #signatureDestinationsSection .sig-tabs{
    border-radius: 22px;
    padding: .6rem;
  }
  #signatureDestinationsSection .sig-tab{
    flex: 1 1 100%;
    width: 100%;
  }
}

/* =========================================================
   ✅ NEW: SIGNATURE SLIDER ARROWS FIXED (INSIDE IMAGE)
   ========================================================= */
#signatureDestinationsSection .sig-imageShell{
  position: relative;
}

/* Ensure arrows sit above image and overlays */
#signatureDestinationsSection .sig-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  color: #fff;
  transition: transform .25s var(--lux-ease), background .25s var(--lux-ease), border-color .25s var(--lux-ease);
}

#signatureDestinationsSection .sig-arrow:hover{
  transform: translateY(-50%) scale(1.04);
  background: rgba(0,0,0,.72);
  border-color: rgba(198,166,100,.35);
}

#signatureDestinationsSection .sig-prev{ left: 14px; }
#signatureDestinationsSection .sig-next{ right: 14px; }

#signatureDestinationsSection .sig-arrow i{
  font-size: 1.25rem;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}

/* Mobile: keep arrows slightly tighter */
@media (max-width: 576px){
  #signatureDestinationsSection .sig-arrow{
    width: 2.75rem;
    height: 2.75rem;
  }
  #signatureDestinationsSection .sig-prev{ left: 10px; }
  #signatureDestinationsSection .sig-next{ right: 10px; }
}

/* =========================================================
   ✅ SIGNATURE SECTION — PREMIUM “COMING SOON” BADGE
   ========================================================= */
.sig-badge{
  position:absolute;
  top: 18px;
  left: 18px;
  z-index: 11;

  display:inline-flex;
  align-items:center;
  gap: .5rem;

  padding: .55rem .85rem;
  border-radius: 999px;

  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;

  /* ✅ PREMIUM DARK GLASS */
  background: rgba(11,11,11,.62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  /* ✅ GOLD EDGE */
  border: 1px solid rgba(198,166,100,.55);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);

  color: rgba(255,255,255,.92);
}

.sig-badge i{
  color: var(--lux-gold);
}

/* CTA button */
.btn-lux-alt{
  background: linear-gradient(135deg, #b18b46, #e4cc8b);
  color: #1c1c1c;
  font-weight: 700;
  border-radius: 999px;
  padding: 12px 28px;
  transition: all .35s var(--lux-ease);
  font-size: 1rem;
  box-shadow: 0 10px 26px rgba(198,166,100,.18);
  border: none;
}

.btn-lux-alt:hover{
  background: linear-gradient(135deg, #e4cc8b, #b18b46);
  transform: translateY(-2px);
}

/* Fade helpers (for synced slide changes) */
.fade-container{
  opacity: 1;
  transition: opacity .45s var(--lux-ease);
}
.fade-container.is-fading{
  opacity: 0;
}

/* =========================================================
   ✅ Progress Bar Overlay (Destinations) — JS synced
   ========================================================= */
.slide-progress-bar-overlay{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height: 5px;
  background: rgba(255,255,255,.10);
  z-index: 3;
  overflow:hidden;
}

.slide-progress-bar{
  height:100%;
  width: 0%;
  background: linear-gradient(to right, #e4cc8b, #b18b46);
  animation: none;
  transform-origin: left;
}

.slide-progress-bar.is-running{
  animation-name: fillBar;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes fillBar{
  from{ width: 0%; }
  to{ width: 100%; }
}

/* =========================================================
   ✅ Scroll reveal
   ========================================================= */
.scroll-reveal{
  opacity: 0;
  transform: translateY(40px);
  transition: all .8s var(--lux-ease);
  will-change: opacity, transform;
}
.scroll-reveal.visible{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   ✅ Fancy Slider Title
   ========================================================= */
.text-highlighted{
  font-family: 'Playfair Display', serif;
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: none;
  text-shadow: 0 14px 40px rgba(0,0,0,.55);
}

.highlight-word{
  color: var(--lux-gold);
  font-style: italic;
  display:inline;
  text-shadow: none;
}

/* Fancy title blocks */
.fancy-title-wrapper{
  max-width: 1000px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

.fancy-title-line{
  width: 2px;
  height: 80px;
  background: linear-gradient(to bottom, var(--lux-gold), transparent);
  border-radius: 2px;
  animation: growLine 1.2s var(--lux-ease) forwards;
  animation-delay: .3s;
}

@keyframes growLine{
  from{ height: 0; }
  to{ height: 80px; }
}

.fancy-title-heading{
  font-size: clamp(2rem, 2.6vw, 2.8rem);
  font-weight: 650;
  font-family: 'Playfair Display', serif;
  color: #3b3b3b;
  line-height: 1.2;
  margin-bottom: .5rem;
}

.normal-text{
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.8rem, 2.2vw, 2.5rem);
}

.highlighted-text{
  font-family: 'Playfair Display', serif;
  color: var(--lux-gold);
  font-style: italic;
  font-weight: 650;
  font-size: clamp(2rem, 2.6vw, 2.8rem);
  text-shadow: 2px 4px 10px rgba(0,0,0,.12);
}

.fancy-subtitle{
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  color: #6c5c3f;
  font-style: italic;
  opacity: .88;
  margin-top: .5rem;
}

/* =========================================================
   ✅ Animations
   ========================================================= */
@keyframes heroGlowDrift{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(-0.6%, 0.4%, 0) scale(1.01); }
  100% { transform: translate3d(0.4%, -0.5%, 0) scale(1.01); }
}

/* =========================================================
   ✅ Accessibility (Reduced Motion)
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  #heroCarousel::before,
  #heroCarousel::after,
  .slide-progress-bar,
  #heroCarousel .hero-progress-bar,
  .animate__animated{
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   ✅ Responsive Fixes
   ========================================================= */
@media (max-width: 768px){
  #heroCarousel .carousel-caption{
    padding: 1rem;
  }

  #heroCarousel .hero-caption-frosted{
    border-radius: var(--lux-radius-lg);
  }

  .package-card{ height: 330px; }

  /* Makes purpose section breathe */
  #signatureDestinationsSection .sig-contentCard,
  #signatureDestinationsSection #destination-content{
    padding: 1rem;
  }
}

@media (max-width: 576px){
  #heroCarousel .carousel-caption{
    padding: .85rem;
  }

  #signatureDestinationsSection .lux-image-wrapper{
    height: 340px;
  }
}

@media (min-width: 992px){
  .package-card{ height: 420px; }
  .text-lg-start .divider-highlight{ margin-left: 0; }
}


/*PREMIUM HOME*/