/* 
   Shailung Holidays - Core Design System & Stylesheet v2.0
   Based on Kanra Reference Layout
*/

/* -------------------------------------------------------------
   01. DESIGN TOKENS & VARIABLES
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Inter:wght@400;500;600;700&family=Mukta:wght@400;600;700&family=Urbanist:wght@600;700;800&display=swap');

:root {
  --color-primary-bg: #FFFFFF;
  --color-navy: #1B2B8A;
  --color-navy-dark: #0F1C5C;
  --color-accent-red: #E8341A;
  --color-accent-orange: #F47B20;
  --color-text-dark: #0D1117;
  --color-text-muted: #6B7280;
  --color-card-bg: #F8F9FB;
  --color-teal-light: #E8F4F8;
  --hero-panel-blue: #72CCE8;
  --color-green-badge: #22C55E;
  --color-border: #E5E7EB;
  --color-star: #FBBF24;

  /* Fonts */
  --font-display: 'Urbanist', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-nepali: 'Mukta', sans-serif;

  /* Container */
  --container-width: 1200px;
}

/* -------------------------------------------------------------
   02. BASE RESETS
------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-primary-bg);
  color: var(--color-text-dark);
  line-height: 1.7;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
}

/* -------------------------------------------------------------
   03. TYPOGRAPHY
------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.2;
}

.nepali-text {
  font-family: var(--font-nepali);
  font-weight: 600;
}

.hero-display {
  font-size: 56px;
  line-height: 1.05;
  font-weight: 800;
}

h1 {
  font-size: 40px;
  line-height: 1.15;
}

h2 {
  font-size: 32px;
  line-height: 1.2;
}

h3 {
  font-size: 22px;
  line-height: 1.3;
}

.text-muted {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------
   04. COMMON LAYOUT & SPACING
------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding {
  padding: 80px 0;
}

.section-padding-large {
  padding: 100px 0;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

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

/* -------------------------------------------------------------
   05. BUTTON STYLES
------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  gap: 8px;
}

.btn-primary {
  background-color: var(--color-accent-red);
  color: #FFFFFF;
}

.btn-primary:hover {
  background-color: var(--color-accent-orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(232, 52, 26, 0.3);
}

.btn-secondary {
  background-color: transparent;
  border: 2px solid var(--color-accent-red);
  color: var(--color-accent-red);
}

.btn-secondary:hover {
  background-color: var(--color-accent-red);
  color: #FFFFFF;
  transform: translateY(-2px);
}

.btn-white {
  background-color: #FFFFFF;
  color: var(--color-text-dark);
}

.btn-white:hover {
  background-color: var(--color-accent-orange);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}

.btn-black-pill {
  background-color: #0D1117;
  color: #FFFFFF;
  border-radius: 8px;
  padding: 12px 24px;
}

.btn-black-pill:hover {
  background-color: #1F2937;
  transform: translateY(-2px);
}

.btn-nav {
  background-color: var(--color-accent-red);
  color: #FFFFFF;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 14px;
}

.btn-nav:hover {
  background-color: var(--color-accent-orange);
}

/* -------------------------------------------------------------
   06. DECORATIVE COMPONENT CLASSES
------------------------------------------------------------- */
.wavy-underline {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.wavy-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0,4 C5,0 5,8 10,4 C15,0 15,8 20,4' fill='none' stroke='%23E8341A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 16px 8px;
  background-repeat: repeat-x;
}

.wavy-underline-orange::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 8'%3E%3Cpath d='M0,4 C5,0 5,8 10,4 C15,0 15,8 20,4' fill='none' stroke='%23F47B20' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.dot-pattern {
  background-image: radial-gradient(var(--color-accent-red) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.15;
}

.wave-divider {
  display: block;
  width: 100%;
  height: auto;
  line-height: 0;
}

.floating-icon {
  position: absolute;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.floating-icon-delayed {
  animation: float-delayed 8s ease-in-out infinite;
}

@keyframes float-delayed {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(15px) rotate(-8deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* -------------------------------------------------------------
   07. NAVIGATION BAR
------------------------------------------------------------- */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  height: 80px;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--color-border);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.logo-img {
  height: 54px;
  width: 54px;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

.logo-footer .logo-img {
  height: 72px;
  width: 72px;
}

.logo span.accent {
  color: var(--color-accent-red);
  font-size: 26px;
  animation: float 4s ease-in-out infinite;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 50px;
  padding: 8px 16px;
  width: 280px;
  margin-left: 20px;
  transition: all 0.3s ease;
}

.search-bar:focus-within {
  width: 320px;
  border-color: var(--color-accent-red);
  background-color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.search-bar input {
  width: 100%;
  margin-left: 8px;
  font-size: 14px;
  color: var(--color-text-dark);
}

.search-bar input::placeholder {
  color: var(--color-text-muted);
}

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-link {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-text-muted);
}

.nav-link:hover, .nav-link.active {
  color: var(--color-text-dark);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: var(--color-text-dark);
  border-radius: 2px;
  transition: 0.3s;
}

/* -------------------------------------------------------------
   08. HERO SECTION
------------------------------------------------------------- */
.hero {
  position: relative;
  background-color: var(--color-primary-bg);
  overflow: hidden;
  padding: 60px 0 100px 0;
}

.hero-content {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 60px;
}

.hero-left {
  position: relative;
}

.hero-left h1 {
  margin-bottom: 24px;
}

.hero-left p {
  font-size: 18px;
  color: var(--color-text-muted);
  margin-bottom: 32px;
  max-width: 500px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 48px;
}

.btn-play-story {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--color-text-dark);
}

.btn-play-story span.play-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-teal-light);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.btn-play-story:hover span.play-icon {
  background-color: var(--color-accent-red);
  color: #FFFFFF;
  transform: scale(1.1);
}

.social-proof-row {
  display: flex;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
}

.avatar-stack {
  display: flex;
}

.avatar-stack img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  margin-right: -12px;
  object-fit: cover;
}

.social-proof-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.social-proof-text strong {
  color: var(--color-text-dark);
}

.hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image-wrapper {
  position: relative;
  width: 100%;
  max-width: 460px;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 36px;
}

.hero-photo-stack {
  position: relative;
  width: 83%;
  max-width: 351px;
  transform: translateY(-3%);
  z-index: 2;
}

/* Rounded square panel — bottom locked to photo cutout */
.hero-image-bg-blob {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  height: 66%;
  background-color: var(--hero-panel-blue);
  border-radius: 36px;
  z-index: 1;
}

.hero-image-wrapper img.hero-main-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Shared decorative layer */
.hero-deco {
  position: absolute;
  pointer-events: none;
}

.hero-deco-stars {
  left: -8%;
  top: 36%;
  width: 68px;
  height: auto;
  z-index: 2;
  opacity: 0.9;
}

.hero-deco-airplane {
  top: 2%;
  right: -12%;
  width: 104px;
  height: auto;
  z-index: 12;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: hero-airplane-rise 4.5s ease-out 0.4s 1 forwards;
}

.hero-deco-cloud-line {
  z-index: 4;
  opacity: 0.6;
}

.hero-deco-cloud-line svg {
  display: block;
}

.hero-deco-cloud-left {
  top: 15%;
  left: -10%;
  animation:
    hero-cloud-left-arrive 5.5s ease-out both,
    hero-cloud-float 6.5s ease-in-out 5.5s infinite;
}

.hero-deco-cloud-right {
  top: 54%;
  right: 4%;
  animation:
    hero-cloud-right-arrive 5.5s ease-out both,
    hero-cloud-float 7s ease-in-out 5.5s infinite reverse;
}

.hero-deco-compass {
  right: -10%;
  bottom: -2%;
  z-index: 6;
  line-height: 0;
}

@keyframes hero-cloud-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes hero-cloud-left-arrive {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }
  to {
    opacity: 0.6;
    transform: translateX(0);
  }
}

@keyframes hero-cloud-right-arrive {
  from {
    opacity: 0;
    transform: translateX(120px);
  }
  to {
    opacity: 0.6;
    transform: translateX(0);
  }
}

@keyframes hero-airplane-rise {
  0% {
    opacity: 0;
    transform: translateY(320px) rotate(-20deg);
  }
  20% {
    opacity: 0.95;
  }
  100% {
    opacity: 0.95;
    transform: translate(0, 0) rotate(0deg);
  }
}

.hero-support-card {
  position: absolute;
  top: 52%;
  right: -4%;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
  background-color: #FFFFFF;
  border-radius: 14px;
  padding: 12px 16px 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1);
  z-index: 10;
  min-width: 108px;
}

.hero-support-card-motion {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  animation:
    support-card-enter 0.85s cubic-bezier(0.22, 1, 0.36, 1) both,
    support-card-float 4.5s ease-in-out 0.85s infinite;
}

.support-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.support-badge-svg {
  display: block;
  overflow: visible;
}

.support-badge-scallop {
  transform-origin: 44px 44px;
  animation: support-badge-pulse 3s ease-in-out infinite;
}

.support-badge-ring {
  transform-origin: 44px 44px;
  animation: support-ring-spin 14s linear infinite;
}

.support-live-pill-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: support-live-pulse 1.8s ease-in-out infinite;
}

.support-live-text {
  animation: support-live-text-glow 1.8s ease-in-out infinite;
}

.support-heading {
  font-size: 22px;
  font-weight: 800;
  color: #111827;
  line-height: 1;
  margin: 0;
  letter-spacing: -0.02em;
  animation: support-text-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.support-label {
  font-size: 12px;
  font-weight: 500;
  color: #9CA3AF;
  margin: 0;
  line-height: 1.2;
  animation: support-text-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@keyframes support-card-enter {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes support-card-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes support-badge-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(79, 99, 247, 0)); }
  50% { transform: scale(1.03); filter: drop-shadow(0 0 10px rgba(79, 99, 247, 0.35)); }
}

@keyframes support-ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes support-live-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes support-live-text-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@keyframes support-text-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-support-card-motion,
  .support-badge-scallop,
  .support-badge-ring,
  .support-live-pill-inner,
  .support-live-text,
  .support-heading,
  .support-label {
    animation: none !important;
  }
}

/* -------------------------------------------------------------
   09. TRAVEL COMPANION CARD
------------------------------------------------------------- */

/* Section wrapper — white background, space for badge + traveler overflow */
.companion-strip {
  background: #FFFFFF;
  position: relative;
  padding: 50px 0 80px 0;
  margin-top: 40px;
  overflow: visible;
}

/* ── Stats badge ── */
.companion-top-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 32px;
  position: relative;
  z-index: 20;
}

.companion-top-badge .avatar-stack {
  display: flex;
}

.companion-top-badge .avatar-stack img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #E5E7EB;
  margin-right: -9px;
  object-fit: cover;
}

.top-badge-line-1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.top-badge-line-1 .avatar-count {
  font-size: 14px;
  font-weight: 800;
  color: var(--color-text-dark);
}

.top-badge-line-2 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.4;
}

.top-badge-line-2 .places-count {
  color: var(--color-text-dark);
}

/* ── Blue card ── */
.companion-card {
  background: #241A96;
  border-radius: 28px;
  width: 95%;
  max-width: 1240px;
  margin: 0 auto;
  min-height: 248px;
  position: relative;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 0;
}

/* ── Center content ── */
.companion-center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 5;
  max-width: 520px;
  padding: 0 24px;
  width: 50%;
}

.companion-center-content h2 {
  color: #FFFFFF;
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: 800;
  margin-bottom: 22px;
  line-height: 1.3;
}

.play-reel-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #FFFFFF;
  color: #241A96;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  text-decoration: none;
  transition: all 0.3s ease;
}

.play-reel-btn:hover {
  background-color: var(--color-accent-orange);
  color: #FFFFFF;
  transform: translateY(-2px);
}

/* Car icon inside center */
.companion-car-icon {
  margin-bottom: 14px;
  line-height: 0;
  animation: car-wiggle 4s ease-in-out infinite;
}

@keyframes car-wiggle {
  0%   { transform: translateX(0) rotate(0deg); }
  50%  { transform: translateX(6px) rotate(3deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

/* Airplane below CTA */
.companion-airplane-wrapper {
  margin-top: 14px;
  position: relative;
  width: 36px;
  height: 36px;
}

.flying-airplane {
  width: 36px;
  height: 36px;
  animation: plane-sway 5s ease-in-out infinite alternate;
}

@keyframes plane-sway {
  0%   { transform: rotate(68deg) translate(0,0); }
  100% { transform: rotate(76deg) translate(3px,-4px); }
}

/* ── LEFT wrapper ── */
.companion-left-wrapper {
  position: absolute;
  left: 3%;
  bottom: 0;
  width: 273px;
  height: 455px;
  z-index: 10;
  transform: translateY(-30%);
  transform-origin: bottom center;
}

.companion-left-photo-stack {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 273px;
  height: 100%;
}

.cyan-bg-box {
  position: absolute;
  bottom: 22px;
  left: 0;
  width: 254px;
  height: 241px;
  background-color: #55E1F6;
  border-radius: 24px;
  z-index: 1;
}

.companion-cutout-left-new {
  position: absolute;
  left: -6px;
  bottom: 0;
  width: 273px;
  height: auto;
  z-index: 2;
  object-fit: contain;
  object-position: center bottom;
  transform: translateY(-22px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom center;
}

.companion-cutout-left-new:hover {
  transform: translateY(-30px) scale(1.04);
}

/* Orange play button */
.play-btn-circle {
  position: absolute;
  left: -14px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  background-color: #FF5722;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(255, 87, 34, 0.45);
  cursor: pointer;
  transition: transform 0.3s ease;
  text-decoration: none;
}

.play-btn-circle:hover {
  transform: scale(1.1);
}

/* Cloud doodle on left */
.doodle-cloud-companion {
  position: absolute;
  width: 70px;
  height: auto;
  bottom: -20px;
  left: 10%;
  z-index: 4;
  pointer-events: none;
  opacity: 0.9;
  animation: doodle-cloud-drift 4s ease-in-out infinite;
}

@keyframes doodle-cloud-drift {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(4px); }
}

/* ── RIGHT wrapper ── */
.companion-right-wrapper {
  position: absolute;
  right: 3%;
  bottom: 0;
  width: 315px;
  height: 490px;
  z-index: 10;
}

.yellow-bg-circle {
  position: absolute;
  top: 45px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  background-color: #FFE600;
  border-radius: 50%;
  z-index: 1;
}

.companion-cutout-right-new {
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 320px;
  height: auto;
  z-index: 2;
  object-fit: contain;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom center;
}

.companion-cutout-right-new:hover {
  transform: translateY(-8px) scale(1.04);
}

/* Cloud icon on right */
.floating-cloud-right {
  position: absolute;
  left: -18px;
  bottom: 100px;
  color: #a8f0ff;
  font-size: 28px;
  z-index: 3;
  animation: float 6s ease-in-out infinite;
}

/* Orange wave doodle */
.doodle-wave-companion {
  position: absolute;
  right: -42px;
  top: 42%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
}

/* ── Misc doodles still referenced elsewhere ── */
.doodle-jeep-companion { display: none; }
.doodle-star-companion { display: none; }
.companion-dashed-path { display: none; }

/* -------------------------------------------------------------
   10. DISCOVER NEPAL (DESTINATIONS SCROLL)
------------------------------------------------------------- */
.discover-section {
  background-color: var(--color-primary-bg);
  position: relative;
}

.discover-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 40px;
}

.discover-header-left h2 {
  margin-bottom: 8px;
}

.discover-header-left p {
  color: var(--color-text-muted);
  font-size: 16px;
}

.discover-controls {
  display: flex;
  gap: 12px;
}

.scroll-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 18px;
}

.scroll-btn:hover {
  background-color: var(--color-accent-red);
  border-color: var(--color-accent-red);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(232, 52, 26, 0.2);
}

.destinations-scroll-container {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 4px 30px 4px;
  scrollbar-width: none; /* Firefox */
}

.destinations-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.destination-card {
  flex: 0 0 280px;
  background-color: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.destination-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  border-color: rgba(232, 52, 26, 0.3);
}

.dest-card-image {
  position: relative;
  height: 320px;
  overflow: hidden;
}

.dest-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.destination-card:hover .dest-card-image img {
  transform: scale(1.08);
}

.dest-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  max-width: calc(55% - 8px); /* cap so it never touches the right badge */
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  color: var(--color-text-dark);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 50px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}

/* Truncate long location text with ellipsis inside the badge */
.dest-badge > span:last-child,
.dest-badge > :not([data-icon]):last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.dest-badge-right {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: var(--color-accent-red);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 50px;
}

.dest-card-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.dest-card-info h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.dest-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-bottom: 16px;
}

.dest-meta .duration {
  background-color: var(--color-teal-light);
  color: var(--color-navy);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.dest-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
}

.dest-price {
  font-size: 14px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.dest-price span {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--color-accent-red);
  font-family: var(--font-display);
}

.dest-arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-card-bg);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transition: all 0.3s ease;
}

.destination-card:hover .dest-arrow-btn {
  background-color: var(--color-accent-red);
  color: #FFFFFF;
  transform: translateX(3px);
}

/* -------------------------------------------------------------
   11. PLAN & CONNECT SECTION (reference redesign)
------------------------------------------------------------- */
.connect-section {
  background-color: #FBF7F4;
  position: relative;
  overflow: hidden;
}

/* faint Himalayan silhouette watermark */
.connect-mountain-bg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 55%;
  height: 65%;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 280'%3E%3Cpath d='M0,280 L80,180 L140,210 L220,100 L290,50 L360,120 L420,80 L500,160 L600,100 L600,280 Z' fill='%231B2B8A' opacity='0.04'/%3E%3Cpath d='M300,50 L270,110 L330,110 Z' fill='%231B2B8A' opacity='0.05'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
}

.connect-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
  position: relative;
  z-index: 1;
}

/* ── LEFT: destination list cards ── */
.connect-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dest-list-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  color: inherit;
}

.dest-list-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

.dest-list-thumb {
  width: 88px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.dest-list-body {
  flex: 1;
  min-width: 0;
}

.dest-list-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.dest-list-pin {
  color: var(--color-accent-red);
  display: inline-flex;
}

.dest-list-bookmark {
  color: var(--color-text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.dest-list-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dest-list-loc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.dest-list-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.dlc {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font-size: 11px;
}

.dlc-val {
  font-weight: 700;
  color: var(--color-text-dark);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.dlc-label {
  color: var(--color-text-muted);
  font-size: 10px;
}

.dest-list-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-card-bg);
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.dest-list-card:hover .dest-list-arrow {
  background: var(--color-accent-red);
  color: #FFFFFF;
  transform: translateX(3px);
}

/* ── RIGHT: heading + features + CTA ── */
.connect-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* top pill badge */
.connect-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #FDEEE8;
  color: var(--color-accent-red);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 50px;
  margin-bottom: 20px;
  align-self: flex-start;
}

/* headline */
.connect-heading {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-text-dark);
  margin-bottom: 18px;
}

.connect-em {
  font-style: italic;
  color: var(--color-accent-red);
  font-family: Georgia, serif;
}

.connect-right p.desc {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 420px;
}

/* 3 feature tiles */
.connect-features {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.connect-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  flex: 1;
  min-width: 110px;
}

.cfi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cfi-green  { background: #DCFCE7; color: #16A34A; }
.cfi-amber  { background: #FEF3C7; color: #D97706; }
.cfi-blue   { background: #DBEAFE; color: #2563EB; }

.cfi-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.cfi-text strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-dark);
}

.cfi-text span {
  font-size: 11px;
  color: var(--color-text-muted);
}

/* CTA buttons */
.app-btn-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.social-connect-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #FFFFFF;
  padding: 14px 26px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.3s ease;
  flex: 1;
  justify-content: center;
  min-width: 180px;
}

.social-connect-btn.whatsapp { background-color: #25D366; }
.social-connect-btn.whatsapp:hover {
  background-color: #1ebd59;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,0.3);
}

.social-connect-btn.instagram { background-color: #E1306C; }
.social-connect-btn.instagram:hover {
  background-color: #c92a5f;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(225,48,108,0.3);
}

/* circular stamp badge */
.connect-stamp {
  position: absolute;
  bottom: -12px;
  right: 0;
  opacity: 0.55;
  animation: doodle-spin-compass 18s linear infinite;
  transform-origin: center;
}

/* eyebrow still used on other pages */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent-red);
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* legacy fact-card — keep for other pages that may use it */
.fact-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.3s ease;
}
.fact-card:hover { transform: translateY(-4px); border-color: var(--color-accent-orange); }
.fact-card-left { display: flex; align-items: center; gap: 16px; }
.fact-card-left .icon-box { width: 48px; height: 48px; border-radius: 12px; background-color: var(--color-teal-light); color: var(--color-navy); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.fact-card-left h4 { font-size: 18px; margin-bottom: 2px; }
.fact-card-left p { font-size: 13px; color: var(--color-text-muted); }
.fact-card-right { text-align: right; }
.fact-badge-list { display: flex; gap: 8px; margin-top: 12px; }
.fact-badge-item { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 4px; background-color: var(--color-card-bg); color: var(--color-text-muted); }

/* -------------------------------------------------------------
   12. NAVY DEALS CTA BANNER (reference redesign)
------------------------------------------------------------- */
.deals-banner {
  background: linear-gradient(135deg, #0F1C6A 0%, #1B2B8A 45%, #0F1C5C 100%);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

/* radial glow top-left */
.deals-bg-glow {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(79,99,247,0.25) 0%, transparent 70%);
  pointer-events: none;
}

.deals-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 56px;
  position: relative;
  z-index: 5;
}

/* ── LEFT ── */
.deals-left {
  display: flex;
  flex-direction: column;
}

.deals-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-accent-orange);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0.9;
}

.deals-heading {
  color: #FFFFFF;
  font-size: 46px;
  line-height: 1.12;
  font-weight: 800;
  margin-bottom: 20px;
}

.deals-subtext {
  color: rgba(255,255,255,0.55);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 36px;
}

.deals-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.deals-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--color-accent-orange);
  color: #FFFFFF;
  padding: 15px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.deals-btn-primary:hover {
  background-color: #e06a10;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(244,123,32,0.35);
}

.deals-handwritten {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: 16px;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.deals-arrow-doodle {
  margin-bottom: 4px;
  transform: scaleX(-1);
}

/* ── RIGHT PANEL ── */
.deals-right-panel {
  position: relative;
  height: 340px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

/* circular stamp top-right */
.deals-stamp-ring {
  position: absolute;
  top: -8px;
  right: 8px;
  z-index: 10;
  animation: doodle-spin-compass 20s linear infinite;
  transform-origin: center;
}

/* flight path doodle */
.deals-flight-path {
  position: absolute;
  top: 60px;
  right: 40px;
  width: 180px;
  height: 120px;
  z-index: 2;
  pointer-events: none;
}

/* NTB trust card */
.deals-ntb-card {
  position: absolute;
  top: 96px;
  right: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 290px;
  z-index: 8;
}

.ntb-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ntb-shield-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(244,123,32,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ntb-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-accent-orange);
  margin-bottom: 2px;
}

.ntb-sub {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

.ntb-logo-box {
  flex-shrink: 0;
}

/* floating cards cluster */
.deals-cards-cluster {
  position: absolute;
  bottom: 0;
  right: 4px;
  display: flex;
  align-items: flex-end;
  z-index: 8;
}

/* photo card */
.deals-photo-card {
  position: relative;
  width: 175px;
  height: 140px;
  border-radius: 14px;
  overflow: hidden;
  transform: rotate(-5deg);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  margin-right: -22px;
  z-index: 6;
  flex-shrink: 0;
}

.dpc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dpc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 60%, transparent 100%);
}

.dpc-label {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 11px;
  font-weight: 700;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 20px;
}

.dpc-duration {
  position: absolute;
  bottom: 10px;
  left: 12px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  font-family: var(--font-display);
}

/* explore card */
.deals-explore-card {
  position: relative;
  width: 118px;
  height: 155px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1e3099 0%, #141e6b 100%);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  transform: rotate(4deg);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 12px;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: -20px;
}

/* orange circle badge with mountain inside */
.dec-badge-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244,123,32,0.2);
  border: 2px solid var(--color-accent-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dec-nepal {
  font-size: 20px;
  font-weight: 900;
  color: #FFFFFF;
  letter-spacing: 0.06em;
  font-family: var(--font-display);
  line-height: 1;
}

.dec-sub {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* ticket stub (3rd card) */
.deals-ticket-stub {
  position: relative;
  width: 58px;
  height: 148px;
  border-radius: 12px;
  background: rgba(240,244,255,0.92);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  transform: rotate(2deg);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 12px 6px 10px;
  flex-shrink: 0;
}

.dts-top {
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dts-divider {
  width: 100%;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--color-navy) 0, var(--color-navy) 4px, transparent 4px, transparent 8px);
  opacity: 0.2;
}

.dts-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--color-accent-orange);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.dts-label {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--color-navy);
  opacity: 0.5;
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* legacy — kept for compat */
.deals-stamp { display: none; }
.deals-map-bg { display: none; }
.deals-right { display: none; }
.deals-badge { display: none; }
.deals-left h2 { color: #FFFFFF; }

/* -------------------------------------------------------------
   13. TESTIMONIALS SECTION
------------------------------------------------------------- */
.testimonials {
  background-color: var(--color-primary-bg);
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 60px;
}

.testimonials-left {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Overlapping circle thumbs arranged like a globe cluster */
.testimonial-cluster-wrap {
  position: relative;
  width: 320px;
  height: 320px;
}

.cluster-circle {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  border: 6px solid #FFFFFF;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transition: all 0.5s ease;
}

.cluster-circle-1 {
  width: 180px;
  height: 180px;
  top: 0;
  left: 0;
  z-index: 3;
}

.cluster-circle-2 {
  width: 150px;
  height: 150px;
  bottom: 0;
  right: 0;
  z-index: 2;
}

.cluster-circle-3 {
  width: 120px;
  height: 120px;
  bottom: 20px;
  left: 20px;
  z-index: 1;
}

.cluster-label {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-navy);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.testimonials-right {
  display: flex;
  flex-direction: column;
}

.testimonial-carousel {
  position: relative;
  min-height: 250px;
}

.testimonial-item {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.testimonial-item.active {
  display: block;
  opacity: 1;
}

.quote-mark {
  font-size: 64px;
  line-height: 1;
  color: var(--color-accent-red);
  font-family: Georgia, serif;
  margin-bottom: -20px;
  user-select: none;
}

.testimonial-item p {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--color-text-dark);
  margin-bottom: 24px;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonial-author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-accent-orange);
}

.author-info h4 {
  font-size: 16px;
  margin-bottom: 2px;
}

.author-info p {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 500;
}

.testimonial-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

.testimonial-dots {
  display: flex;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-border);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background-color: var(--color-accent-red);
  width: 24px;
  border-radius: 4px;
}

/* -------------------------------------------------------------
   14. TRUST LOGOS MARQUEE
------------------------------------------------------------- */
.trust-marquee {
  background-color: var(--color-card-bg);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 40px 0;
  overflow: hidden;
}

.marquee-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.trust-logo-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.trust-logo-item:hover {
  filter: grayscale(0%);
  opacity: 1;
}

.trust-logo-item img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.trust-stars {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}

.stars {
  color: var(--color-star);
  font-size: 18px;
  margin-bottom: 2px;
}

/* -------------------------------------------------------------
   15. BENTO GRID SECTION (EXPLORE + BLOG + WORKFLOW)
------------------------------------------------------------- */
.bento-section {
  background-color: var(--color-primary-bg);
}

.bento-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-auto-rows: 240px;
  gap: 24px;
}

.bento-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #FFFFFF;
}

.bento-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* Card 1: Large left image card */
.bento-card-large {
  grid-row: span 2;
  color: #FFFFFF;
  justify-content: flex-end;
}

.bento-card-large .bento-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 1;
}

.bento-card-large .bento-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(13, 17, 23, 0.9) 20%, rgba(13, 17, 23, 0.1) 80%);
  z-index: 2;
}

.bento-card-large .bento-content {
  position: relative;
  z-index: 3;
}

.bento-card-large h3 {
  color: #FFFFFF;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
}

/* Card 2: Custom Blog external link style */
.bento-card-teal {
  background-color: var(--color-teal-light);
  border-color: rgba(27, 43, 138, 0.1);
}

.bento-card-teal h3 {
  font-size: 22px;
  color: var(--color-navy);
}

.bento-card-teal p {
  color: var(--color-text-muted);
  font-size: 14px;
}

.bento-link-icon {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.bento-card:hover .bento-link-icon {
  background-color: var(--color-accent-red);
  color: #FFFFFF;
  transform: rotate(45deg);
}

/* Card 3: Landscape Photo card */
.bento-card-image {
  padding: 0;
}

.bento-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Card 4: Dark Live Stats */
.bento-card-dark {
  background-color: var(--color-navy);
  color: #FFFFFF;
  border-color: var(--color-navy);
}

.bento-card-dark h3 {
  color: #FFFFFF;
}

.bento-live-badge {
  background-color: var(--color-accent-red);
  color: #FFFFFF;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
}

.bento-live-badge span.ping {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FFFFFF;
  display: block;
  animation: ping 1s ease-in-out infinite alternate;
}

@keyframes ping {
  0% { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1.2); opacity: 1; }
}

.bento-card-dark h4.stat-number {
  font-size: 36px;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-accent-orange);
  line-height: 1;
}

.bento-card-dark p.stat-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

/* -------------------------------------------------------------
   16. COMPREHENSIVE FOOTER
------------------------------------------------------------- */
.footer {
  background-color: var(--color-navy-dark);
  color: #FFFFFF;
  padding: 80px 0 30px 0;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 40px;
  margin-bottom: 40px;
  align-items: center;
}

.footer-top-left h3 {
  color: #FFFFFF;
  font-size: 28px;
  margin-bottom: 8px;
}

.footer-top-left p {
  color: rgba(255, 255, 255, 0.6);
}

.newsletter-form {
  display: flex;
  background-color: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50px;
  padding: 6px;
  width: 100%;
}

.newsletter-form input {
  flex-grow: 1;
  padding: 8px 18px;
  color: #FFFFFF;
  font-size: 14px;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.newsletter-form button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-accent-red);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-form button:hover {
  background-color: var(--color-accent-orange);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 40px;
  margin-bottom: 30px;
}

.footer-col-about .logo {
  color: #FFFFFF;
  margin-bottom: 16px;
}

.footer-col-about p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-bottom: 24px;
}

.social-links {
  display: flex;
  gap: 12px;
}

.social-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
}

.social-icon:hover {
  background-color: var(--color-accent-red);
  border-color: var(--color-accent-red);
  color: #FFFFFF;
  transform: translateY(-3px);
}

.footer-col h4 {
  color: #FFFFFF;
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
}

.footer-col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 30px;
  height: 2px;
  background-color: var(--color-accent-red);
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
}

.footer-links a:hover {
  color: #FFFFFF;
  padding-left: 4px;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

.footer-contact-item span.icon {
  color: var(--color-accent-orange);
  font-size: 16px;
  margin-top: 2px;
}

.footer-contact-item a:hover {
  color: #FFFFFF;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.payment-gateways {
  display: flex;
  align-items: center;
  gap: 12px;
}

.payment-logo {
  height: 24px;
  opacity: 0.6;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

/* -------------------------------------------------------------
   17. BOOKING/INQUIRY MODAL popup
------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(13, 17, 23, 0.7);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-container {
  background-color: #FFFFFF;
  border-radius: 24px;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  position: relative;
  animation: modal-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modal-slide-in {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  background-color: var(--color-navy);
  color: #FFFFFF;
  padding: 24px;
  position: relative;
}

.modal-header h3 {
  color: #FFFFFF;
  font-size: 22px;
}

.modal-close-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.1);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
}

.modal-close-btn:hover {
  background-color: var(--color-accent-red);
}

.modal-body {
  padding: 28px;
}

.modal-form-group {
  margin-bottom: 20px;
}

.modal-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text-dark);
}

.modal-form-group input, 
.modal-form-group select, 
.modal-form-group textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  color: var(--color-text-dark);
  transition: all 0.3s ease;
}

.modal-form-group input:focus, 
.modal-form-group select:focus, 
.modal-form-group textarea:focus {
  border-color: var(--color-accent-red);
  box-shadow: 0 0 0 3px rgba(232, 52, 26, 0.1);
}

.modal-btn-submit {
  width: 100%;
  background-color: var(--color-accent-red);
  color: #FFFFFF;
  padding: 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;
}

.modal-btn-submit:hover {
  background-color: var(--color-accent-orange);
}

/* Success modal popup state */
.modal-success-state {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
}

.modal-success-state span.success-icon {
  font-size: 50px;
  color: var(--color-green-badge);
  margin-bottom: 16px;
}

.modal-success-state h4 {
  font-size: 22px;
  margin-bottom: 8px;
}

.modal-success-state p {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------
   18. STICKY MOBILE BOTTOM BAR
------------------------------------------------------------- */
.mobile-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  background-color: #FFFFFF;
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);
  z-index: 999;
  display: none; /* Controlled by CSS media queries & JS */
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--color-border);
}

.mobile-sticky-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
}

.mobile-sticky-item.call-now {
  color: var(--color-navy);
  background-color: #FFFFFF;
  border-right: 1px solid var(--color-border);
}

.mobile-sticky-item.plan-trip {
  color: #FFFFFF;
  background-color: var(--color-accent-red);
}

/* -------------------------------------------------------------
   19. RESPONSIVE BREAKPOINTS (MEDIA QUERIES)
------------------------------------------------------------- */

/* Tablet (1024px) */
@media (max-width: 1024px) {
  .hero-content {
    gap: 40px;
  }
  .hero-display {
    font-size: 46px;
  }
  .connect-grid {
    gap: 40px;
  }
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .bento-card-large {
    grid-column: span 2;
    grid-row: span 1;
    height: 320px;
    min-height: unset;
  }
  .bento-card-teal,
  .bento-card:not(.bento-card-large):not(.bento-card-image):not(.bento-card-dark) {
    min-height: 200px;
  }
  .bento-card-image { height: 200px; }
  .bento-card-dark { min-height: 200px; }
}

/* Small Tablet / Large Mobile (768px) */
@media (max-width: 768px) {
  .section-padding {
    padding: 60px 0;
  }
  .grid-2, .grid-3, .grid-4, .connect-grid, .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .navbar .search-bar, .navbar .nav-links, .navbar .btn-nav {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-left p {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta-group {
    justify-content: center;
  }
  .social-proof-row {
    justify-content: center;
  }
  .hero-right {
    order: -1; /* Image first on mobile */
  }
  .hero-image-wrapper {
    min-height: 420px;
    max-width: 340px;
    padding-bottom: 28px;
  }
  .hero-photo-stack {
    width: 83%;
    max-width: 300px;
  }
  .hero-image-bg-blob {
    width: 90%;
    height: 64%;
    border-radius: 28px;
  }
  .hero-deco-airplane,
  .hero-deco-cloud-line {
    display: none;
  }
  .hero-deco-stars {
    left: -4%;
    top: 32%;
    width: 54px;
  }
  .hero-deco-compass {
    right: 4%;
    bottom: 4px;
  }
  .hero-deco-compass svg {
    width: 66px;
    height: 66px;
  }
  .hero-support-card {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -12px;
    transform: translateX(-50%) scale(0.92);
    min-width: 100px;
  }
  .companion-left-wrapper,
  .companion-right-wrapper,
  .companion-top-badge,
  .companion-car-icon,
  .companion-airplane-wrapper,
  .companion-dashed-path {
    display: none; /* Hide decorative images to save space */
  }
  .companion-strip {
    padding: 64px 0 56px;
    margin-top: 24px;
  }
  .companion-strip .container {
    padding-inline: 24px;
  }
  .companion-strip h2 {
    font-size: 26px;
    max-width: 100%;
  }
  .discover-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .discover-controls {
    align-self: flex-end;
  }
  .deals-layout {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .deals-left { align-items: center; }
  .deals-eyebrow { justify-content: center; }
  .deals-right-panel { display: none; }
  .testimonials-left {
    height: 250px;
  }
  .testimonial-cluster-wrap {
    width: 200px;
    height: 200px;
  }
  .cluster-circle-1 { width: 120px; height: 120px; }
  .cluster-circle-2 { width: 100px; height: 100px; }
  .cluster-circle-3 { width: 80px; height: 80px; }
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
  body {
    padding-bottom: 64px; /* Space for mobile sticky footer */
  }
  .hero-display {
    font-size: 36px;
  }
  .btn {
    width: 100%; /* Full width buttons */
  }
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  .destinations-scroll-container {
    padding-left: 0;
  }
  .destination-card {
    flex: 0 0 85vw; /* Almost full-width card scroll on small mobile */
  }
  .bento-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .bento-card-large {
    grid-column: span 1;
    height: 240px;
  }
  .bento-card-large h3 {
    font-size: 22px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  .mobile-sticky-bar {
    display: grid;
  }
  .navbar {
    height: 64px;
  }
  .logo-img {
    height: 44px;
    width: 44px;
  }
}

/* -------------------------------------------------------------
   20. MOBILE DRAWER MENU OVERLAY
------------------------------------------------------------- */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background-color: #FFFFFF;
  box-shadow: -10px 0 30px rgba(0,0,0,0.1);
  z-index: 1500;
  padding: 80px 24px 40px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-drawer.active {
  right: 0;
}

.mobile-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mobile-drawer-link {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-dark);
}

.mobile-drawer-link:hover {
  color: var(--color-accent-red);
}

.mobile-drawer-bottom {
  border-top: 1px solid var(--color-border);
  padding-top: 24px;
}

.drawer-contact-number {
  font-weight: 700;
  color: var(--color-navy);
  font-size: 16px;
  margin-bottom: 16px;
  display: block;
}

/* -------------------------------------------------------------
   21. INNER PAGES UTILITIES (About, Contact, Packages, Detail)
------------------------------------------------------------- */
.page-hero {
  background-color: var(--color-navy);
  color: #FFFFFF;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.page-hero h1 {
  color: #FFFFFF;
  font-size: 48px;
  margin-bottom: 12px;
}

.page-hero p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* Packages Filters */
.filter-bar {
  background-color: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  border: 1px solid var(--color-border);
  padding: 20px;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.filters-group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.filter-select {
  border: 1px solid var(--color-border);
  padding: 10px 16px;
  border-radius: 8px;
  background-color: var(--color-card-bg);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: var(--color-text-dark);
  transition: all 0.3s ease;
}

.filter-select:focus {
  border-color: var(--color-accent-red);
}

.view-toggle {
  display: flex;
  background-color: var(--color-card-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 4px;
}

.toggle-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-btn.active {
  background-color: #FFFFFF;
  color: var(--color-accent-red);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Packages comparison Table view */
.comparison-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
  display: none; /* Switched by JS */
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background-color: #FFFFFF;
}

.comparison-table th, .comparison-table td {
  padding: 18px 24px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

.comparison-table th {
  background-color: var(--color-card-bg);
  font-weight: 700;
  color: var(--color-text-dark);
  font-family: var(--font-display);
  font-size: 16px;
}

.comparison-table tr:hover {
  background-color: rgba(232, 52, 26, 0.02);
}

.comparison-table .table-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-accent-red);
}

/* Contact Cards */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 80px;
}

.contact-info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.contact-card-item {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  transition: transform 0.3s ease;
}

.contact-card-item:hover {
  transform: translateY(-5px);
  border-color: var(--color-accent-red);
}

.contact-card-item .icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--color-teal-light);
  color: var(--color-navy);
  font-size: 24px;
  margin: 0 auto 16px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-card-item h4 {
  font-size: 16px;
  margin-bottom: 8px;
}

.contact-card-item p {
  font-size: 13px;
  color: var(--color-text-muted);
}

.contact-card-item a {
  display: block;
  margin-top: 8px;
  font-weight: 700;
  color: var(--color-accent-red);
}

/* Contact Forms */
.contact-form-wrap {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.contact-form-wrap h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.contact-form-wrap p {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 30px;
}

.contact-map-wrap {
  border: 1px solid var(--color-border);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.05);
  height: 100%;
  min-height: 400px;
  position: relative;
}

.contact-hours {
  margin-top: 60px;
  border-top: 1px solid var(--color-border);
  padding-top: 40px;
  text-align: center;
}

.contact-hours h3 {
  font-size: 22px;
  margin-bottom: 12px;
}

.contact-hours > p {
  color: var(--color-text-muted);
  font-size: 15px;
  max-width: 600px;
  margin: 0 auto 16px auto;
}

.contact-hours-box {
  display: inline-block;
  background-color: var(--color-card-bg);
  padding: 16px 32px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  font-weight: 600;
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
}

.contact-hours-box .hours-open {
  color: var(--color-accent-red);
}

.contact-hours-box .hours-closed {
  color: var(--color-text-muted);
}

/* About Timeline */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 60px auto 0 auto;
}

.timeline::after {
  content: "";
  position: absolute;
  width: 3px;
  background-color: var(--color-border);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1.5px;
}

.timeline-item {
  padding: 10px 40px;
  position: relative;
  width: 50%;
}

.timeline-item::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  right: -8px;
  background-color: #FFFFFF;
  border: 4px solid var(--color-accent-red);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

.timeline-left {
  left: 0;
}

.timeline-right {
  left: 50%;
}

.timeline-right::after {
  left: -8px;
}

.timeline-content {
  padding: 20px 30px;
  background-color: var(--color-card-bg);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.timeline-content h3.year {
  color: var(--color-accent-red);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 6px;
}

.timeline-content h4 {
  font-size: 16px;
  margin-bottom: 6px;
}

.timeline-content p {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

@media (max-width: 768px) {
  .timeline::after {
    left: 31px;
  }
  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
  .timeline-item::after {
    left: 23px;
  }
  .timeline-right {
    left: 0%;
  }
}

/* Destination Detail Specifics */
.detail-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 48px;
  margin-top: 40px;
}

.detail-main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.detail-quick-facts-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  background-color: var(--color-teal-light);
  border-radius: 16px;
  padding: 24px;
}

.quick-fact-item {
  text-align: center;
}

.quick-fact-item span.icon {
  font-size: 20px;
  color: var(--color-navy);
  display: block;
  margin-bottom: 4px;
}

.quick-fact-item h5 {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.quick-fact-item p {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-dark);
}

.detail-itinerary-accordions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.itinerary-accordion-item {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background-color: #FFFFFF;
}

.itinerary-accordion-header {
  padding: 18px 24px;
  background-color: var(--color-card-bg);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}

.itinerary-accordion-header h4 {
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.itinerary-accordion-header h4 span.day-label {
  background-color: var(--color-accent-orange);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.itinerary-accordion-header span.toggle-arrow {
  transition: transform 0.3s ease;
  font-weight: 800;
  color: var(--color-text-muted);
}

.itinerary-accordion-item.active .itinerary-accordion-header span.toggle-arrow {
  transform: rotate(180deg);
  color: var(--color-accent-red);
}

.itinerary-accordion-body {
  padding: 20px 24px;
  font-size: 14px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  display: none; /* Controlled by JS toggle */
}

.itinerary-accordion-item.active .itinerary-accordion-body {
  display: block;
}

.inclusion-exclusion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.checklist-title {
  font-size: 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.checklist-title.inclusions-title {
  color: var(--color-green-badge);
}

.checklist-title.exclusions-title {
  color: var(--color-accent-red);
}

.checklist-ul li {
  margin-bottom: 12px;
  font-size: 14px;
  position: relative;
  padding-left: 24px;
}

.checklist-ul.inclusions-ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-green-badge);
  font-weight: 800;
}

.checklist-ul.exclusions-ul li::before {
  content: "✗";
  position: absolute;
  left: 0;
  color: var(--color-accent-red);
  font-weight: 800;
}

.gallery-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-masonry img {
  border-radius: 12px;
  height: 200px;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.gallery-masonry img:hover {
  transform: scale(1.05);
}

/* Sticky Booking Card Sidebar */
.sticky-sidebar {
  position: sticky;
  top: 100px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 45px rgba(0, 0, 0, 0.05);
}

.sidebar-price-section {
  margin-bottom: 24px;
}

.sidebar-price-section p.label {
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}

.sidebar-price-section h3.price {
  font-size: 32px;
  color: var(--color-accent-red);
  font-family: var(--font-display);
  font-weight: 800;
}

.sidebar-details-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 20px 0;
  margin-bottom: 24px;
}

.sidebar-detail-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.sidebar-detail-row span.label {
  color: var(--color-text-muted);
}

.sidebar-detail-row span.val {
  font-weight: 700;
  color: var(--color-text-dark);
}

.sidebar-contact-info {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: var(--color-card-bg);
  border-radius: 12px;
  padding: 16px;
  font-size: 13px;
}

.sidebar-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-text-dark);
}

.sidebar-contact-row span.icon {
  color: var(--color-accent-orange);
}

/* Similar packages — You Might Also Like */
.similar-section {
  margin-top: 80px;
  border-top: 1px solid var(--color-border);
  padding-top: 60px;
}

.similar-heading {
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
}

.similar-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.similar-packages-grid .destination-card {
  flex: none;
  width: 100%;
  min-width: 0;
}

.similar-packages-grid .destination-card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
}

@media (max-width: 1024px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .sticky-sidebar {
    position: static;
    margin-top: 40px;
  }
  .similar-packages-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .detail-quick-facts-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .inclusion-exclusion-grid {
    grid-template-columns: 1fr;
  }
  .gallery-masonry {
    grid-template-columns: repeat(2, 1fr);
  }
  .similar-section {
    margin-top: 48px;
    padding-top: 40px;
  }
  .similar-heading {
    font-size: 24px;
    margin-bottom: 24px;
    text-align: left;
  }
  .similar-packages-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .similar-packages-grid .dest-card-image {
    height: 220px;
  }
}

@media (max-width: 480px) {
  .similar-heading {
    font-size: 22px;
  }
  .similar-packages-grid .dest-card-image {
    height: 200px;
  }
}


/* ── Companion card responsive ── */

/* Shrink cutouts on medium screens */
@media (max-width: 1150px) and (min-width: 1025px) {
  .companion-left-wrapper  { left: 1.5%; width: 241px; height: 416px; }
  .cyan-bg-box             { width: 228px; height: 215px; }
  .companion-cutout-left-new { width: 241px; }
  .companion-right-wrapper { right: 1.5%; width: 278px; height: 445px; }
  .yellow-bg-circle { width: 106px; height: 106px; top: 40px; }
  .companion-cutout-right-new { width: 282px; }
  .companion-center-content h2 { font-size: 26px; }
}

/* Tablet — hide cutouts, widen center */
@media (max-width: 1024px) {
  .companion-left-wrapper,
  .companion-right-wrapper,
  .doodle-wave-companion,
  .floating-cloud-right { display: none; }
  .companion-card { padding: 40px 24px; }
  .companion-center-content { width: 80%; max-width: 600px; }
}

/* Mobile */
@media (max-width: 768px) {
  .companion-strip { padding: 36px 0 60px; margin-top: 24px; }
  .companion-card  { width: 100%; border-radius: 20px; padding: 36px 20px; }
  .companion-center-content { width: 100%; }
  .companion-center-content h2 { font-size: 22px; }
  .companion-car-icon { display: none; }
}


/* ==========================================================================
   HOME PAGE — MOBILE & TABLET OPTIMIZATION
   Component-by-component responsive tuning. Placed last so it wins on
   overlapping properties. Breakpoints: 1024 (tablet), 768 (large phone /
   tablet portrait), 480 (small phone).
   ========================================================================== */

/* ---- Tablet & below (≤1024px) ---- */
@media (max-width: 1024px) {
  /* Global rhythm */
  .section-padding-large { padding: 72px 0; }

  /* Navbar — drop the search field to give nav links room, keep CTA */
  .navbar .search-bar { display: none; }

  /* Hero */
  .hero { padding: 48px 0 72px; }

  /* Connect */
  .connect-grid { gap: 40px; }
  .connect-heading { font-size: 34px; }
  .connect-features { gap: 6px; }
  .connect-feature-item { padding: 8px 10px; }

  /* Deals banner */
  .deals-heading { font-size: 36px; }

  /* Footer */
  .footer { padding: 64px 0 28px; }

  /* Contact page — stack form & map on tablet */
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .contact-map-wrap {
    min-height: 360px;
    height: 360px;
  }
}

/* ---- Tablet portrait / large phone (≤768px) ---- */
@media (max-width: 768px) {
  /* Global rhythm + edge gutters */
  .section-padding-large { padding: 56px 0; }
  .container { padding: 0 20px; }

  /* Surface the sticky action bar from tablet-portrait down */
  body { padding-bottom: 64px; }
  .mobile-sticky-bar { display: grid; }

  /* Hero */
  .hero { padding: 32px 0 56px; }
  .hero-display { font-size: 40px; }
  .hero-left p { font-size: 16px; }

  /* Connect — single column on tablet portrait */
  .connect-heading { font-size: 30px; }
  .connect-right p.desc { margin-bottom: 24px; }
  .connect-features { flex-wrap: wrap; }
  .connect-feature-item { flex: 1 1 calc(33% - 8px); }
  .app-btn-group { width: 100%; }
  .social-connect-btn { flex: 1 1 0; justify-content: center; padding: 13px 16px; }
  .connect-stamp { bottom: -8px; right: 0; }
  /* stacked list cards on tablet: smaller thumb */
  .dest-list-thumb { width: 72px; height: 60px; }
  .dest-list-title { font-size: 15px; }

  /* Deals banner */
  .deals-banner { padding: 56px 0; }
  .deals-heading { font-size: 30px; margin-bottom: 20px; }
  .deals-cta-row { justify-content: center; }

  /* Testimonials */
  .testimonial-item p { font-size: 18px; }
  .testimonial-carousel { min-height: 220px; }

  /* Trust marquee — center wrapped logos */
  .marquee-container { justify-content: center; gap: 24px 32px; }
  .trust-stars { width: 100%; }

  /* Bento — single column for legibility on phones */
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 16px; }
  .bento-card { padding: 24px; }
  .bento-card-large { grid-column: span 1; grid-row: span 1; height: 260px; }
  .bento-card-teal,
  .bento-card:not(.bento-card-large):not(.bento-card-image):not(.bento-card-dark) { min-height: 180px; }
  .bento-card-image { height: 200px; padding: 0; }
  .bento-card-dark { min-height: 170px; }

  /* Footer — two compact columns of links */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }

  /* Contact page */
  .page-hero { padding: 56px 0; }
  .page-hero h1 { font-size: 36px; }
  .page-hero p { font-size: 15px; padding-inline: 8px; }
  .contact-info-cards {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }
  .contact-card-item { padding: 20px; }
  .contact-card-item a { word-break: break-word; }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 48px;
  }
  .contact-form-wrap {
    padding: 28px 24px;
    border-radius: 16px;
  }
  .contact-form-wrap h3 { font-size: 22px; }
  .contact-map-wrap {
    min-height: 320px;
    height: 320px;
    border-radius: 16px;
  }
  .contact-hours {
    margin-top: 40px;
    padding-top: 32px;
  }
  .contact-hours h3 { font-size: 20px; }
}

/* ---- Small phone (≤480px) ---- */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  /* Headings scale down */
  h2 { font-size: 26px; }
  .hero-display { font-size: 32px; }
  .hero-left p { font-size: 15px; }
  .connect-heading,
  .deals-heading { font-size: 26px; }

  /* Connect — stack social buttons full width on small phone */
  .app-btn-group { flex-direction: column; }
  .social-connect-btn { width: 100%; flex: none; min-width: unset; }
  .connect-feature-item { flex: 1 1 100%; }
  .connect-stamp { display: none; }

  /* Discover cards a touch shorter */
  .dest-card-image { height: 240px; }

  /* Bento */
  .bento-card-large { height: 220px; }
  .bento-card-large h3 { font-size: 20px; }
  .bento-card { padding: 20px; }

  /* Testimonials */
  .testimonial-item p { font-size: 16px; }

  /* Footer */
  .footer { padding: 48px 0 24px; }
  .footer-top-left h3 { font-size: 22px; }

  /* Contact page */
  .page-hero { padding: 44px 0; }
  .page-hero h1 { font-size: 30px; }
  .page-hero p { font-size: 14px; }
  .contact-form-wrap { padding: 24px 18px; }
  .contact-form-wrap h3 { font-size: 20px; }
  .contact-form-wrap p { margin-bottom: 24px; }
  .contact-map-wrap {
    min-height: 260px;
    height: 260px;
  }
  .contact-hours-box {
    display: block;
    width: 100%;
    padding: 16px 20px;
    text-align: center;
    font-size: 13px;
  }
}


/* ==========================================================================
   SECTION: LUCIDE-ANIMATED ICONS STYLING & ANIMATIONS
   ========================================================================== */

/* 1. General Setup & Transition defaults */
.animated-icon-container svg * {
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease, stroke-dashoffset 0.3s ease;
}

/* 2. Compass Needle Rotation */
.animated-compass-needle {
  transform-origin: 12px 12px;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.animated-icon-container:hover .animated-compass-needle,
a:hover .animated-compass-needle,
button:hover .animated-compass-needle,
.btn:hover .animated-compass-needle,
[class*="card"]:hover .animated-compass-needle,
[class*="-item"]:hover .animated-compass-needle,
[class*="-link"]:hover .animated-compass-needle {
  transform: rotate(360deg);
}

/* 3. Airplane Flight & Vapor Trails */
.animated-airplane-body {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.animated-airplane-line {
  opacity: 0;
  stroke-dasharray: 6;
  stroke-dashoffset: 6;
  transition: opacity 0.15s ease, stroke-dashoffset 0.3s ease !important;
}
.animated-icon-container:hover .animated-airplane-body,
a:hover .animated-airplane-body,
button:hover .animated-airplane-body,
.btn:hover .animated-airplane-body,
[class*="card"]:hover .animated-airplane-body,
[class*="-item"]:hover .animated-airplane-body,
[class*="-link"]:hover .animated-airplane-body {
  transform: translate(3px, -3px) scale(0.85);
}
.animated-icon-container:hover .animated-airplane-line,
a:hover .animated-airplane-line,
button:hover .animated-airplane-line,
.btn:hover .animated-airplane-line,
[class*="card"]:hover .animated-airplane-line,
[class*="-item"]:hover .animated-airplane-line,
[class*="-link"]:hover .animated-airplane-line {
  opacity: 1;
  stroke-dashoffset: 0;
}
/* Staggered trail lines */
.animated-icon-container:hover .line-1, a:hover .line-1, button:hover .line-1, [class*="card"]:hover .line-1 { transition-delay: 0.05s !important; }
.animated-icon-container:hover .line-2, a:hover .line-2, button:hover .line-2, [class*="card"]:hover .line-2 { transition-delay: 0.1s !important; }
.animated-icon-container:hover .line-3, a:hover .line-3, button:hover .line-3, [class*="card"]:hover .line-3 { transition-delay: 0.15s !important; }

/* 4. Map Pin Bounce */
@keyframes pin-bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(-2px); }
}
.animated-pin-body, .animated-gps-body {
  transition: transform 0.3s ease !important;
}
.animated-pin-circle, .animated-gps-circle {
  transform-origin: 12px 10px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.animated-icon-container:hover .animated-pin-body,
a:hover .animated-pin-body,
button:hover .animated-pin-body,
.btn:hover .animated-pin-body,
[class*="card"]:hover .animated-pin-body,
[class*="-item"]:hover .animated-pin-body,
[class*="-link"]:hover .animated-pin-body,
.animated-icon-container:hover .animated-gps-body,
a:hover .animated-gps-body,
button:hover .animated-gps-body,
.btn:hover .animated-gps-body,
[class*="card"]:hover .animated-gps-body,
[class*="-item"]:hover .animated-gps-body,
[class*="-link"]:hover .animated-gps-body {
  animation: pin-bounce 0.4s ease forwards;
}
.animated-icon-container:hover .animated-pin-circle,
a:hover .animated-pin-circle,
button:hover .animated-pin-circle,
[class*="card"]:hover .animated-pin-circle,
.animated-icon-container:hover .animated-gps-circle,
a:hover .animated-gps-circle,
button:hover .animated-gps-circle,
[class*="card"]:hover .animated-gps-circle {
  transform: scale(1.3);
}

/* 5. Chat Bubble Pulse & Dots */
.animated-chat-bubble {
  transform-origin: 12px 12px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.animated-chat-dots {
  opacity: 0.6;
  transition: opacity 0.3s ease !important;
}
.animated-icon-container:hover .animated-chat-bubble,
a:hover .animated-chat-bubble,
button:hover .animated-chat-bubble,
.btn:hover .animated-chat-bubble,
[class*="card"]:hover .animated-chat-bubble,
[class*="-item"]:hover .animated-chat-bubble {
  transform: scale(1.1);
}
.animated-icon-container:hover .animated-chat-dots,
a:hover .animated-chat-dots,
button:hover .animated-chat-dots,
[class*="card"]:hover .animated-chat-dots {
  opacity: 1;
}

/* 6. Mail Envelope Flap Open */
.animated-email-flap {
  transform-origin: 12px 7px;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.animated-icon-container:hover .animated-email-flap,
a:hover .animated-email-flap,
button:hover .animated-email-flap,
[class*="card"]:hover .animated-email-flap {
  transform: scaleY(-0.8) translateY(3px);
}

/* 7. Camera Lens Expansion & Shutter */
.animated-camera-lens {
  transform-origin: 12px 13px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.animated-icon-container:hover .animated-camera-lens,
a:hover .animated-camera-lens,
button:hover .animated-camera-lens,
[class*="card"]:hover .animated-camera-lens {
  transform: scale(1.25);
}

/* 8. Globe Meridian Spin */
.animated-globe-meridians {
  transform-origin: 12px 12px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.animated-icon-container:hover .animated-globe-meridians,
a:hover .animated-globe-meridians,
button:hover .animated-globe-meridians,
[class*="card"]:hover .animated-globe-meridians {
  transform: scaleX(0.4);
}

/* 9. Phone Ringing Shake */
@keyframes phone-shake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(-10deg); }
  30% { transform: rotate(10deg); }
  45% { transform: rotate(-10deg); }
  60% { transform: rotate(10deg); }
  75% { transform: rotate(-5deg); }
  90% { transform: rotate(5deg); }
}
.animated-phone {
  transform-origin: 12px 12px;
}
.animated-icon-container:hover .animated-phone,
a:hover .animated-phone,
button:hover .animated-phone,
.btn:hover .animated-phone,
[class*="card"]:hover .animated-phone {
  animation: phone-shake 0.5s ease-in-out;
}

/* 10. Calendar Shiver */
@keyframes calendar-shiver {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-2px) rotate(-2deg); }
  75% { transform: translateY(-1px) rotate(2deg); }
}
.animated-calendar {
  transform-origin: 12px 12px;
}
.animated-icon-container:hover .animated-calendar,
a:hover .animated-calendar,
button:hover .animated-calendar,
[class*="card"]:hover .animated-calendar {
  animation: calendar-shiver 0.4s ease-in-out;
}

/* 11. Star Spin & Scale */
.animated-star {
  transform-origin: 12px 12px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.animated-icon-container:hover .animated-star,
a:hover .animated-star,
button:hover .animated-star,
[class*="card"]:hover .animated-star {
  transform: scale(1.2) rotate(15deg);
}

/* 12. Sparkle Rotate & Scale */
.animated-sparkle-body {
  transform-origin: 12px 12px;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.animated-icon-container:hover .animated-sparkle-body,
a:hover .animated-sparkle-body,
button:hover .animated-sparkle-body,
[class*="card"]:hover .animated-sparkle-body {
  transform: scale(1.25) rotate(90deg);
}

/* 13. Quote Pulse */
.animated-quote-body {
  transform-origin: 12px 12px;
  transition: transform 0.4s ease !important;
}
.animated-icon-container:hover .animated-quote-body,
a:hover .animated-quote-body,
.animated-quote-body:hover {
  transform: scale(1.15);
}

/* 14. Beach Umbrella Sway */
.animated-beach-umbrella-top-1,
.animated-beach-umbrella-top-2 {
  transform-origin: 11px 12.5px;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.animated-icon-container:hover .animated-beach-umbrella-top-1,
a:hover .animated-beach-umbrella-top-1,
[class*="card"]:hover .animated-beach-umbrella-top-1,
.animated-icon-container:hover .animated-beach-umbrella-top-2,
a:hover .animated-beach-umbrella-top-2,
[class*="card"]:hover .animated-beach-umbrella-top-2 {
  transform: rotate(10deg);
}

/* 15. Balloon Floating */
@keyframes balloon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animated-balloon {
  transition: transform 0.3s ease !important;
}
.animated-icon-container:hover .animated-balloon,
a:hover .animated-balloon,
.floating-icon:hover .animated-balloon {
  animation: balloon-float 1.6s ease-in-out infinite;
}

/* 16. Mountain Peak Shine */
.animated-mountain-peak,
.animated-mountain-foothill {
  transition: transform 0.4s ease !important;
}
.animated-icon-container:hover .animated-mountain-peak,
a:hover .animated-mountain-peak {
  transform: translateY(-2px);
}

/* 17. Car & Bus Drive Forward */
.animated-car, .animated-bus {
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.animated-icon-container:hover .animated-car,
a:hover .animated-car,
tr:hover .animated-car,
.animated-icon-container:hover .animated-bus,
a:hover .animated-bus,
tr:hover .animated-bus {
  transform: translateX(4px);
}

/* 18. X-Mark Rotation */
.animated-xmark {
  transform-origin: 12px 12px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.animated-icon-container:hover .animated-xmark,
a:hover .animated-xmark,
.checklist-title:hover .animated-xmark {
  transform: rotate(90deg);
}

/* 19. Checkmark Draw Animation */
.animated-check-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
.animated-icon-container:hover .animated-check-path,
a:hover .animated-check-path,
button:hover .animated-check-path,
.btn:hover .animated-check-path,
[class*="card"]:hover .animated-check-path,
[class*="-item"]:hover .animated-check-path {
  stroke-dashoffset: 0;
}

/* 20. Cloud Slide & Scale */
.animated-cloud-path {
  transition: transform 0.4s ease !important;
}
.animated-icon-container:hover .animated-cloud-path,
a:hover .animated-cloud-path,
.floating-icon:hover .animated-cloud-path {
  transform: scale(1.08) translate(1px, -1px);
}


/* Refined Mountain animation that bounces and scales the peaks */
@keyframes mountain-peak-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.08); }
}
.animated-mountain {
  overflow: visible;
}
.animated-mountain path {
  transform-origin: 12px 17.5px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.animated-icon-container:hover .animated-mountain-peak,
a:hover .animated-mountain-peak,
.hero-display:hover .animated-mountain-peak,
[class*="card"]:hover .animated-mountain-peak,
.animated-icon-container:hover .animated-mountain-foothill,
a:hover .animated-mountain-foothill,
.hero-display:hover .animated-mountain-foothill,
[class*="card"]:hover .animated-mountain-foothill {
  animation: mountain-peak-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* ==========================================================================
   SECTION: DOODLE DECORATIVE ELEMENTS
   ========================================================================== */

/* Hero Section Doodles */
.doodle-waves-wrapper {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
  position: relative;
  top: -2px;
}
.doodle-waves {
  width: 45px;
  height: auto;
}
.doodle-balloon {
  position: absolute;
  width: 90px;
  height: auto;
  top: -28px;
  right: -95px;
  animation:
    hero-balloon-arrive 9s cubic-bezier(0.22, 1, 0.36, 1) both,
    doodle-float-balloon 4.5s ease-in-out 9s infinite;
  pointer-events: none;
}
@keyframes hero-balloon-arrive {
  from {
    opacity: 0;
    transform: translateX(-85vw) translateY(20px) rotate(-10deg);
  }
  55% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0) rotate(0deg);
  }
}
@keyframes doodle-float-balloon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.doodle-stars-cluster,
.doodle-compass-rose {
  display: none;
}
@keyframes doodle-spin-compass {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Companion Strip Doodles */
.doodle-cloud-companion {
  position: absolute;
  width: 75px;
  height: auto;
  top: -38px;
  left: 20%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
  animation: doodle-cloud-drift 4s ease-in-out infinite;
}
@keyframes doodle-cloud-drift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.doodle-jeep-companion {
  position: absolute;
  width: 60px;
  height: auto;
  bottom: 0px;
  left: -75px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
  transition: transform 0.4s ease;
}
.companion-left-wrapper:hover .doodle-jeep-companion {
  transform: translateX(5px);
}

.doodle-star-companion {
  position: absolute;
  width: 40px;
  height: auto;
  top: -48px;
  left: 30%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
  animation: doodle-star-blink 2s ease-in-out infinite;
}
@keyframes doodle-star-blink {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.1); opacity: 0.7; }
}

.doodle-wave-companion {
  position: absolute;
  width: 45px;
  height: auto;
  right: -55px;
  top: 40%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.85;
}