/* Hero Section Container */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 60px 20px;
  box-sizing: border-box;
}

/* Background Video Setup */
.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg, 
    rgba(220, 228, 250, 0.45) 0%, 
    rgba(239, 218, 253, 0.75) 100%
  );
}

/* Hero Content */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1140px;
  text-align: center;
  color: var(--purple-dark);
}

.hero-title {
  font-size: 44px;
  font-weight: 800;
  margin-top: 100px;
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.hero-subtitle {
  font-size: 18px;
  color: var(--blue-primary);
  margin-bottom: 28px;
  font-weight: 400;
}

/* Glassmorphism Search Bar */
.hero-search-bar {
  background: var(--white);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  padding: 8px 12px 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto 32px auto;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
  color: var(--text);
}

.search-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.search-icon {
  color: #ffc107;
  font-size: 16px;
}

.search-input-group input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  width: 100%;
}

.search-input-group input::placeholder {
  color: #cbd5e1;
}

.search-submit-btn {
  background: #ffc107;
  color: #0f172a;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.search-submit-btn:hover {
  background: #ffd54f;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}

/* Booking Box Card Slider */
.booking-box {
  background: var(--text-light);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  width: 100%;
}

.destination-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.dest-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dark);
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dest-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.dest-btn.active {
  background: #ffc107;
  color: #0f172a;
  border-color: #ffc107;
  box-shadow: 0 4px 20px rgba(255, 193, 7, 0.4);
}

.slides-container {
  position: relative;
  width: 100%;
}

.slider-track-container {
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
}

.slide-group {
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 40px) / 3);
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4px 2px 12px 2px;
}

.slide-group::-webkit-scrollbar {
  display: none;
}

.slide-group.active {
  display: grid;
  animation: slideIn 0.4s ease;
}

.nav-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffc107;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.nav-arrow:hover {
  background: #ffc107;
  color: #0f172a;
  border-color: #ffc107;
  transform: translateY(-50%) scale(1.1);
}

.nav-arrow.prev { left: -20px; }
.nav-arrow.next { right: -20px; }

/* HD Cards Inside Box */
.hd-card {
  scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  overflow: hidden;
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
}

.hd-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 193, 7, 0.5);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.card-img-wrapper {
  position: relative;
  width: 100%;
  height: 160px;
  overflow: hidden;
}

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

.hd-card:hover .card-img-wrapper img {
  transform: scale(1.08);
}

.badge-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  color: #ffc107;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.card-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  text-align: left;
}

.card-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--bg-dark);
  margin-bottom: 12px;
}

.card-footer-details {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.price-label {
  font-size: 12px;
  color: #6d606e;
}

.price-label strong {
  display: block;
  font-size: 15px;
  color: #ffc107;
}

.explore-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #1b1919;
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hd-card:hover .explore-btn {
  background: #ffc107;
  color: #0f172a;
  border-color: #ffc107;
}

/* Dots */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(61, 61, 61, 0.812);
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  width: 24px;
  border-radius: 12px;
  background: #ffc107;
  box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Responsive Media Queries */
@media (max-width: 900px) {
 

  .slide-group {
    grid-auto-columns: calc((100% - 20px) / 2);
  }
  .hero-search-bar {
    flex-direction: column;
    border-radius: 24px;
    padding: 16px;
  }
  .search-submit-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {
  .slide-group {
    grid-auto-columns: 100%;
  }
  .hero-title {
    font-size: 32px;
  }
  .nav-arrow.prev { left: 4px; }
  .nav-arrow.next { right: 4px; }
}
/** @format */


:root {
  --purple: #764bcb;
  --purple-dark: #653ab7;
}

.trending-section {
  width: 100%;
  padding: 55px 20px;
}
.trending-card {
  width: min(1458px, 100%);
  margin: auto;
  padding: 36px 34px 32px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 5px 16px rgba(50, 35, 80, 0.13);
  overflow: hidden;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 47px;
}
.section-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--purple);
  font-size: clamp(29px, 2.2vw, 39px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1.1px;
}
.trend-icon {
  width: 29px;
  height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--purple);
  flex: 0 0 auto;
}
.trend-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.slider-controls {
  display: flex;
  gap: 11px;
}
.slider-btn {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: 30px;
  line-height: 28px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: 0.2s;
  padding-bottom: 3px;
}
.slider-btn:hover {
  background: var(--purple-dark);
  transform: scale(1.06);
}
.slider-btn:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}
.destination-window {
  overflow: hidden;
  width: 100%;
}
.destination-grid {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 50px) / 7.8);
  column-gap: 10px;
  row-gap: 30px;
  transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1);
  will-change: transform;
}
.destination {
  text-align: center;
  min-width: 0;
}
.destination a {
  display: block;
  width: 100%;
  aspect-ratio: 0.77;
  overflow: hidden;
  border-radius: 10% / 8%;
  background: #eee;
}
.destination img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s;
}
.destination:hover img {
  transform: scale(1.15);
}
.destination h3 {
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  color: #272727;
}
@media (max-width: 1199px) {
  .header-logo-img {

  scale: 1;
}
  .trending-card {
    padding: 30px 25px;
  }
  .destination-grid {
    grid-auto-columns: calc((100% - 30px) / 4);
    column-gap: 10px;
  }
}
@media (max-width: 767px) {
  .trending-section {
    padding: 20px 12px;
  }
  .trending-card {
    padding: 24px 16px 25px;
    border-radius: 15px;
  }
  .section-head {
    margin-bottom: 30px;
  }
  .section-head h2 {
    font-size: 25px;
  }
  .trend-icon {
    width: 24px;
    height: 24px;
  }
  .trend-icon svg {
    width: 14px;
    height: 14px;
  }
  .slider-btn {
    width: 34px;
    height: 34px;
  }
  .destination-grid {
    grid-auto-columns: calc((100% - 15px) / 2);
    column-gap: 15px;
    row-gap: 24px;
  }
  .destination h3 {
    font-size: 15px;
    margin-top: 9px;
  }
}
@media (max-width: 420px) {
  .section-head h2 {
    font-size: 22px;
  }
  .slider-controls {
    gap: 6px;
  }
  .slider-btn {
    width: 31px;
    height: 31px;
    font-size: 25px;
  }
}
/* =========================================
   RESET
========================================= */
/* =========================================================
   1. VARIABLES & RESET
========================================================= */

:root {
    --purple: #764bcb;
    --purple-dark: #653bb4;
    --blue-primary: #764bcb;
    --primary-blue: #764bcb;
    --yellow-badge: #ffe600;
    --orange-tag: #ff5722;
    --text-dark: #1e293b;
    --text-light: #ffffff;
    --bg-light: #f8fafc;
}

/* =========================================================
   2. SECTION & MAIN CONTAINER
========================================================= */

.holiday-international-section {
    width: 100%;
    padding: 30px 20px 60px;
    box-sizing: border-box;
}

.holiday-international-container {
    min-width: 90%;
    margin: 0 auto;
    padding: 35px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* =========================================================
   3. HEADER & NAVIGATION BUTTONS
========================================================= */

.holiday-international-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 30px;
}

.holiday-international-title-area h2 {
    margin: 0;
    color: var(--purple);
    font-size: 32px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.8px;
}

.holiday-international-title-area p {
    margin: 8px 0 0;
    color: #555555;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;
}

.holiday-international-navigation {
    display: flex;
    gap: 8px;
}

.holiday-international-navigation button {
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--purple);
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}

.holiday-international-navigation button:hover {
    background: var(--purple-dark);
    transform: scale(1.05);
}

.holiday-international-navigation button:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
}

/* =========================================================
   4. CONTENT LAYOUT & GRID
========================================================= */

.holiday-international-content {
    display: block;
    width: 100%;
}

/* Hidden side illustration elements */
.holiday-international-illustration-area,
.holiday-international-illustration,
.holiday-international-cloud {
    display: none !important;
}

.holiday-international-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 210px);
    gap: 16px;
    width: 100%;
    transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1);
}

/* =========================================================
   5. CARD STYLING & OVERLAYS
========================================================= */

.holiday-international-card {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    background: #dddddd;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.holiday-international-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.45s ease;
}

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

.holiday-international-card-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.02) 20%,
        rgba(0, 0, 0, 0.85) 100%
    );
}

.holiday-international-card-arrow {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    color: #ffffff;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 2;
}

.holiday-international-card-arrow:hover {
    background: var(--purple);
    transform: scale(1.08);
}

.holiday-international-card-info {
    position: absolute;
    inset: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    color: #ffffff;
    z-index: 2;
}

.holiday-international-card-info h3 {
    margin: 0 0 4px;
    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
    color: #ffffff;
}

.holiday-international-card-info p {
    margin: 0;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    opacity: 0.9;
}

/* =========================================================
   6. RESPONSIVE BREAKPOINTS
========================================================= */

@media (max-width: 1024px) {
    .holiday-international-container {
        padding: 25px;
    }

    .holiday-international-grid {
        grid-template-rows: repeat(2, 185px);
        gap: 14px;
    }

    .holiday-international-title-area h2 {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .holiday-international-section {
        padding: 20px 12px 40px;
    }

    .holiday-international-container {
        padding: 20px 15px;
        border-radius: 15px;
    }

    .holiday-international-header {
        margin-bottom: 20px;
    }

    .holiday-international-title-area h2 {
        font-size: 24px;
    }

    .holiday-international-title-area p {
        margin-top: 6px;
        font-size: 14px;
    }

    .holiday-international-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, 160px);
        gap: 10px;
    }

    .holiday-international-card-info {
        padding: 10px;
    }

    .holiday-international-card-info h3 {
        font-size: 15px;
    }

    .holiday-international-card-info p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .holiday-international-title-area h2 {
        font-size: 20px;
    }

    .holiday-international-navigation button {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .holiday-international-grid {
        grid-template-rows: repeat(3, 135px);
        gap: 8px;
    }

    .holiday-international-card {
        border-radius: 10px;
    }

    .holiday-international-card-arrow {
        width: 26px;
        height: 26px;
        top: 6px;
        right: 6px;
        font-size: 14px;
    }
}
* {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: 'Plus Jakarta Sans', sans-serif;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

    }

:root {
    --purple: #764bcb;
    --purple-dark: #653bb4;
    --text: #171717;
    --white: #ffffff;
  --bg-dark: #0f1115;
      --card-bg: #181a20;
      --yellow-primary: #ffc107;
      --yellow-hover: #e0a800;
      --text-white: #aea8a8;
      --text-muted: #94a3b8;
      --badge-bg: rgba(255, 255, 255, 0.12);
      --border-color: rgba(255, 255, 255, 0.08);
}
    /* Container Wrapper */
    .trips-container {
      max-width: 1200px;
      width: 100%;
    }

    /* Top Section Header: Title & Filter Tabs Side-by-Side */
    .section-header-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 30px;
      flex-wrap: wrap;
      gap: 20px;
    }

    .header-left .category-subtitle {
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--yellow-primary);
      margin-bottom: 4px;
    }

    .header-left .section-title {
      font-size: 30px;
      font-weight: 800;
    }

    .header-left .section-description {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 6px;
    }

    /* Month Filters Pill Bar */
    .filters-wrapper {
      display: flex;
      background: rgba(255, 255, 255, 0.05);
      padding: 6px;
      border-radius: 30px;
      border: 1px solid var(--border-color);
      overflow-x: auto;
      gap: 4px;
    }

    .filter-btn {
      background: transparent;
      border: none;
      color: var(--text-muted);
      padding: 8px 18px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 20px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s ease;
    }

    .filter-btn:hover {
      color: var(--text-white);
    }

    .filter-btn.active {
      background-color: var(--yellow-primary);
      color: #000000;
      font-weight: 700;
    }

    /* Trips Grid Layout */
    .trips-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    /* Trip Card Container */
    .trip-card {
      background-color: var(--card-bg);
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: var(--text-white);
      transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .trip-card:hover {
      transform: translateY(-6px);
      border-color: rgba(255, 193, 7, 0.4);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    }

    /* Card Top Media / Image Area */
    .card-media {
      position: relative;
      height: 200px;
      background-size: cover;
      background-position: center;
    }

    .media-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 40%, rgba(24,26,32,1) 100%);
    }

    /* Top Tags (Group Tour, Fast Filling, Rating) */
    .media-top-tags {
      position: absolute;
      top: 12px;
      left: 12px;
      right: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
    }

    .tag-group {
      display: flex;
      gap: 6px;
    }

    .badge-tag {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: var(--text-white);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      padding: 4px 8px;
      border-radius: 4px;
      letter-spacing: 0.5px;
    }

    .badge-tag.highlight {
      background: var(--yellow-primary);
      color: #000000;
      border: none;
    }

    .rating-badge {
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 8px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--text-white);
    }

    .rating-badge i {
      color: var(--yellow-primary);
      font-size: 10px;
    }

    .rating-count {
      color: var(--text-muted);
      font-weight: 400;
    }

    /* Bottom Overlay Badges (Location & Duration) */
    .media-bottom-tags {
      position: absolute;
      bottom: 12px;
      left: 12px;
      right: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 2;
    }

    .info-pill {
      background: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      font-size: 11px;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      gap: 5px;
      color: #e2e8f0;
    }

    .info-pill i {
      color: var(--yellow-primary);
      font-size: 10px;
    }

    /* Card Main Content Area */
    .card-body {
      padding: 16px 18px 20px 18px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .trip-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 1.4;
      color: var(--text-white);
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .trip-description {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: 16px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* Departure Details Row */
    .departure-row {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 20px;
      padding-top: 12px;
      border-top: 1px dashed rgba(255, 255, 255, 0.1);
      font-size: 11px;
      color: var(--text-muted);
    }

    .departure-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .departure-item i {
      color: var(--yellow-primary);
    }

    /* Card Footer: Pricing & Action Button */
    .card-footer {
      margin-top: auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }

    .price-block {
      display: flex;
      flex-direction: column;
    }

    .price-amount {
      display: flex;
      align-items: baseline;
      gap: 6px;
    }

    .price-main {
      font-size: 20px;
      font-weight: 800;
      color: var(--text-white);
    }

    .price-strike {
      font-size: 12px;
      color: var(--text-muted);
      text-decoration: line-through;
    }

    .price-subtitle {
      font-size: 10px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .trip-action-btn {
      background-color: var(--yellow-primary);
      color: #000000;
      font-size: 12px;
      font-weight: 700;
      padding: 10px 16px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .trip-action-btn:hover {
      background-color: var(--yellow-hover);
    }

    .trip-action-btn i {
      font-size: 10px;
    }

    /* Responsive Styles */
    @media (max-width: 992px) {
      .trips-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .trips-grid {
        grid-template-columns: 1fr;
      }
      .section-header-wrapper {
        flex-direction: column;
        align-items: flex-start;
      }
      .filters-wrapper {
        width: 100%;
      }
    }
   
      .card-footer {
         display: flex;
         justify-content: space-between;
         align-items: flex-end;
         border-top: 1px solid rgba(255, 255, 255, 0.2);
         padding-top: 10px;
      }
   
      .price-details {
         color: var(--text-light);
      }
   
      .price-main {
         font-size: 15px;
         font-weight: 800;
      }
   
      .price-strike {
         font-size: 11px;
         text-decoration: line-through;
         opacity: 0.7;
         margin-top: 1px;
      }
   
      .per-person {
         font-size: 10px;
         opacity: 0.8;
         display: block;
      }
   
      .trip-action-btn {
         background-color: var(--text-light);
         color: #000;
         border: none;
         padding: 6px 12px;
         border-radius: 6px;
         font-size: 12px;
         font-weight: 700;
         display: flex;
         align-items: center;
         gap: 6px;
         cursor: pointer;
      }
   
      .phone-icon {
         border: 1px solid #000;
         border-radius: 50%;
         width: 16px;
         height: 16px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         font-size: 9px;
      }
   
      /* Responsive Grid Breakpoints */
      @media (max-width: 1024px) {
         .trips-grid {
            grid-template-columns: repeat(3, 1fr);
         }
      }
   
      @media (max-width: 768px) {
         .trips-grid {
            grid-template-columns: repeat(2, 1fr);
         }
      }
   
      @media (max-width: 480px) {
         .trips-grid {
            grid-template-columns: repeat(1, 1fr);
         }
   
         .section-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
         }
      }
 .wanderlust-wrapper {
      max-width: 1200px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    /* Brand Logos Section */
    .brand-logos-container {
      display: flex;
      flex-direction: column;
      gap: 20px;
      padding: 10px 0;
      overflow: hidden;
    }

    .brand-row {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 40px;
      flex-wrap: wrap;
      opacity: 0.85;
    }

    .brand-logo {
      height: 32px;
      object-fit: contain;
      filter: grayscale(10%);
      transition: filter 0.2s ease, transform 0.2s ease;
    }

    .brand-logo:hover {
      filter: grayscale(0%);
      transform: scale(1.05);
    }

    /* Main Content Container Box */
    .wanderlust-card {
      background: #ffffff;
      border-radius: 20px;
      padding: 35px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      width: 100%;
    }

    /* Header Section */
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 25px;
    }

    .header-text {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .section-title {
      font-size: 28px;
      font-weight: 800;
      color: var(--blue-primary);
    }

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

    /* Navigation Arrows */
    .nav-buttons {
      display: flex;
      gap: 10px;
    }

    .nav-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background-color: var(--blue-primary);
      color: #fff;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 14px;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .nav-btn:hover {
      background-color: #1d3878;
      transform: scale(1.05);
    }

    /* Grid Layout: Left Decorative Vector + Right Video Cards */
    .content-grid {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 25px;
      align-items: flex-end;
    }

    /* Left Illustration Container */
    .vector-illustration {
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 10px;
    }

    .vector-illustration svg {
      width: 100%;
      max-width: 220px;
      height: auto;
    }

    /* Video Reels Grid */
    .reels-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    /* Reel Card Style */
    .reel-card {
      position: relative;
      height: 420px;
      border-radius: 16px;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20px;
      color: #ffffff;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    .reel-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    }

    /* Subtle Overlay for text readability */
    .reel-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.4) 100%);
      z-index: 1;
    }

    .reel-overlay-content {
      position: relative;
      z-index: 2;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    /* Reel Text Styling */
    .reel-center-text {
      text-align: center;
      margin: auto 0;
    }

    .reel-text-bold {
      font-size: 22px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .reel-subtext {
      font-size: 15px;
      font-weight: 500;
      display: block;
      margin-bottom: 4px;
    }

    .reel-text-yellow {
      font-size: 28px;
      font-weight: 800;
      color: #ffe600;
      font-family: 'Georgia', serif;
    }

    .reel-text-italic {
      font-size: 13px;
      font-style: italic;
      opacity: 0.9;
    }

    /* Audio / Mute Button at Bottom Right */
    .reel-bottom {
      display: flex;
      justify-content: flex-end;
    }

    .audio-btn {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      border: none;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      backdrop-filter: blur(4px);
    }

    /* Responsive Breakpoints */
    @media (max-width: 1024px) {
      .content-grid {
        grid-template-columns: 1fr;
      }
      .vector-illustration {
        display: none; /* Hide decorative vectors on tablet/mobile */
      }
    }

    @media (max-width: 768px) {
      .reels-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .reel-card {
        height: 360px;
      }
    }

    @media (max-width: 480px) {
      .reels-grid {
        grid-template-columns: repeat(1, 1fr);
      }
      .section-header {
        flex-direction: column;
        gap: 15px;
      }
    }
    /* Container Box */
    .why-choose-container {
      background: #faeffc67;
      border-radius: 20px;
      padding: 45px 35px;
      max-width: 1200px;
      width: 90%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    }

    /* Section Header */
    .section-title {
      font-size: 32px;
      font-weight: 800;
      color: var(--blue-primary);
      text-align: center;
    }

    /* Features Grid */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 35px 25px;
      margin-bottom: 50px;
    }

    /* Individual Feature Card with Hover Effects */
    .feature-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 20px;
      border-radius: 12px;
      transition: all 0.3s ease;
      background: #ffffff;
      border: 1px solid transparent;
    }

    .feature-card:hover {
      background: #ffffff;
      border-color: rgba(43, 80, 170, 0.1);
      transform: translateY(-5px);
      box-shadow: 0 12px 24px rgba(43, 80, 170, 0.08);
    }

    /* Icon Container with Animated Accent Background */
    .icon-wrapper {
      position: relative;
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .icon-wrapper::before {
      content: '';
      position: absolute;
      top: -2px;
      right: -2px;
      width: 24px;
      height: 24px;
      background-color: var(--yellow-badge);
      border-radius: 50%;
      z-index: 1;
      transition: transform 0.3s ease, background-color 0.3s ease;
    }

    .feature-card:hover .icon-wrapper::before {
      transform: scale(1.3);
      background-color: #ffd000;
    }

    .icon-wrapper i {
      position: relative;
      z-index: 2;
      font-size: 28px;
      color: var(--text-dark);
      transition: color 0.3s ease;
    }

    .feature-card:hover .icon-wrapper i {
      color: var(--blue-primary);
    }

    /* Typography */
    .feature-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-dark);
      margin-bottom: 8px;
      line-height: 1.3;
    }

    .feature-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.5;
      font-weight: 400;
    }

    /* Footer Row: Top Blog Reads */
    .blog-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #f1f5f9;
      padding-top: 30px;
    }

    .blog-title {
      font-size: 28px;
      font-weight: 800;
      color: var(--blue-primary);
    }

    .view-more-btn {
      background-color: var(--blue-primary);
      color: #ffffff;
      border: none;
      padding: 10px 22px;
      border-radius: 25px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .view-more-btn:hover {
      background-color: #1d3878;
      transform: translateY(-2px);
    }

    /* Responsive Design */
    @media (max-width: 992px) {
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 576px) {
      .features-grid {
        grid-template-columns: 1fr;
      }
      .blog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }
    }
  

  

   

     .main-wrapper {
      max-width: 1200px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 30px;
    } 

    /* ----------------------------------
       SECTION 1: TOP BLOG READS
    ---------------------------------- */
    .blog-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .section-title {
      font-size: 32px;
      font-weight: 800;
      color: var(--blue-primary);
    }

    .view-more-btn {
      background-color: var(--blue-primary);
      color: #ffffff;
      border: none;
      padding: 10px 22px;
      border-radius: 25px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .view-more-btn:hover {
      background-color: var(--blue-hover);
      transform: translateY(-2px);
    }

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

    .blog-card {
      background: #dfdbf7;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
      border: 1px solid #f1f5f9;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      min-height:max-content;
    }
    *{
      transition: transform 0.3s ease, box-shadow 0.3s ease;

    }

    .blog-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08);
    }

    .blog-image-wrapper {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

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

    .blog-card:hover .blog-image-wrapper img {
      transform: scale(1.05);
    }

    /* Floating Arrow Button on Image */
    .blog-arrow-badge {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.6);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
    }

    .blog-content {
      padding: 18px 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-grow: 1;
    }

    .blog-card-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-dark);
      line-height: 1.4;
      margin-bottom: 20px;
    }

    .blog-date {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
    }

    /* ----------------------------------
       SECTION 2: ABOUT GO4EXPLORE
    ---------------------------------- */
    .about-card {
      background: #ffffff;
      border-radius: 20px;
      padding: 40px 35px;
      box-shadow: var(--card-shadow);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .about-title {
      font-size: 30px;
      font-weight: 800;
      color: var(--blue-primary);
      margin-bottom: 20px;
    }

    .about-subtitle {
      font-size: 26px;
      font-weight: 800;
      color: var(--blue-primary);
      margin: 25px 0 15px 0;
      text-align: center;
    }

    .about-lead {
      font-size: 14px;
      color: #475569;
      line-height: 1.6;
      max-width: 1050px;
    }

    /* Collapsible Content Area */
    .about-expanded-content {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.5s ease-in-out, opacity 0.4s ease-in-out, margin 0.3s ease;
      text-align: left;
      width: 100%;
      max-width: 1050px;
    }

    .about-expanded-content p {
      font-size: 14px;
      color: #475569;
      line-height: 1.6;
      margin-bottom: 16px;
    }

    .about-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 10px;
    }

    .about-list li {
      font-size: 14px;
      color: #475569;
      line-height: 1.6;
      position: relative;
      padding-left: 20px;
    }

    .about-list li::before {
      content: "•";
      position: absolute;
      left: 0;
      top: -2px;
      font-size: 18px;
      color: var(--text-dark);
      font-weight: bold;
    }

    .about-list strong {
      color: var(--text-dark);
      font-weight: 700;
    }

    /* Hidden Checkbox Controller */
    #toggle-about {
      display: none;
    }

    /* Expand Trigger Styles */
    #toggle-about:checked ~ .about-expanded-content {
      max-height: 1200px;
      opacity: 1;
      margin-top: 10px;
    }

    .toggle-btn {
      background: transparent;
      border: none;
      color: #475569;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 20px;
      padding: 6px 12px;
      transition: color 0.2s ease;
    }

    .toggle-btn:hover {
      color: var(--blue-primary);
    }

    /* Toggle Icon State */
    .toggle-btn .icon-less {
      display: none;
    }

    #toggle-about:checked ~ .toggle-btn .icon-more {
      display: none;
    }

    #toggle-about:checked ~ .toggle-btn .icon-less {
      display: inline-block;
    }

    /* Responsive Breakpoints */
    @media (max-width: 1024px) {
      .blog-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 576px) {
      .blog-grid {
        grid-template-columns: 1fr;
      }
      .blog-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }
      .about-card {
        padding: 30px 20px;
      }
    }
    .wrapper {
      max-width: 1200px;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* ----------------------------------
       SECTION 1: AS SEEN ON MARQUEE SLIDER
    ---------------------------------- */
    .news-banner {
      background: #ffffff;
      border-radius: 16px;
      padding: 16px 24px;
      display: flex;
      align-items: center;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
      overflow: hidden;
      gap: 30px;
    }

    .news-header {
      flex-shrink: 0;
      border-right: 2px solid #e2e8f0;
      padding-right: 24px;
    }

    .news-title {
      font-size: 20px;
      font-weight: 800;
      color: var(--blue-primary);
      line-height: 1.2;
    }

    .news-subtitle {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 600;
    }

    .marquee-container {
      display: flex;
      overflow: hidden;
      width: 100%;
      mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    .marquee-track {
      display: flex;
      align-items: center;
      gap: 40px;
      animation: marqueeScroll 25s linear infinite;
      white-space: nowrap;
    }

    .marquee-track:hover {
      animation-play-state: paused;
    }

    .news-logo {
      height: 38px;
      object-fit: contain;
      filter: grayscale(10%);
      transition: filter 0.2s ease;
    }

    .news-logo:hover {
      filter: grayscale(0%);
    }

    @keyframes marqueeScroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* ----------------------------------
       SECTION 2: VIDEO HERO CAROUSEL
    ---------------------------------- */
    .hero-slider-container {
      position: relative;
      width: 100%;
    }

    .hero-viewport {
      position: relative;
      width: 100%;
      height: 480px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
      background-color: #000;
    }

    .hero-slide {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
      display: flex;
      align-items: center;
      padding: 0 60px;
    }

    .hero-slide.active {
      opacity: 1;
      visibility: visible;
    }

    /* Background HTML5 Video */
    .bg-video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translate(-50%, -50%);
      z-index: 1;
    }

    /* Dark Overlay Gradient */
    .slide-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%);
      z-index: 2;
    }

    /* Floating Top-Right Go4Explore Watermark */
    .brand-watermark {
      position: absolute;
      top: 25px;
      right: 25px;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 6px;
      background: rgba(0, 0, 0, 0.3);
      padding: 6px 12px;
      border-radius: 20px;
      backdrop-filter: blur(5px);
    }

    .brand-watermark i {
      color: var(--blue-primary);
      font-size: 16px;
      background: #fff;
      border-radius: 50%;
      padding: 4px;
    }

    .brand-watermark span {
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
    }

    /* Slide Content Copy */
    .slide-content {
      position: relative;
      z-index: 3;
      max-width: 550px;
      color: #ffffff;
    }

    .slide-tagline {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 12px;
    }

    .slide-tagline em {
      color: var(--yellow-accent);
      font-style: italic;
    }

    /* Destination Yellow Stencil Title */
    .slide-title {
      font-family: 'Saira Stencil One', cursive, sans-serif;
      font-size: 76px;
      color: var(--yellow-accent);
      text-transform: uppercase;
      letter-spacing: 2px;
      line-height: 1;
      margin-bottom: 25px;
    }

    .deals-btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #ffffff;
      color: #000000;
      text-decoration: none;
      padding: 12px 24px;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 700;
      transition: transform 0.2s ease, background-color 0.2s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .deals-btn:hover {
      transform: translateY(-2px);
      background-color: #f8fafc;
    }

    .btn-arrow-icon {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #000;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
    }

    /* Slider Controls at Bottom Right */
    .slider-nav {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 15px;
    }

    .nav-arrow {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background-color: var(--blue-primary);
      color: #ffffff;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .nav-arrow:hover {
      background-color: var(--blue-hover);
      transform: scale(1.05);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .hero-viewport {
        height: 380px;
      }
      .hero-slide {
        padding: 0 30px;
      }
      .slide-title {
        font-size: 52px;
      }
      .slide-tagline {
        font-size: 16px;
      }
      .news-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
      }
      .news-header {
        border-right: none;
        padding-right: 0;
      }
    }
    /* History-Themed Section Styles */
/* =========================================================
   CLEAN & MINIMAL "WHO WE ARE" SECTION
========================================================= */

/* Section wrapper: strictly bound, zero overflow */
.who-we-sec {
  max-height: fit-content !important;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding: 0 !important;
}

/* Compact main box */
.who-we-container {
    width: 100%;
    max-width: 900px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    text-align: center;
    box-sizing: border-box;
    padding: 20px !important;
  max-height: fit-content !important;


}

/* Header */
.who-we-header {
    margin-bottom: 12px;
}

.sub-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #764bcb;
    background: #f3effe;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.who-we-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
}

/* Description Text */
.about-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin: 0 0 24px 0;
}

.about-desc strong {
    color: #1e293b;
}

/* Compact Metrics Grid */
.metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
}

.metric-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    text-align: left;
}

.metric-item i {
    font-size: 16px;
    color: #764bcb;
    flex-shrink: 0;
}

.metric-item h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.metric-item span {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
    display: block;
}

/* Mobile & Small Screen adjustments */
@media (max-width: 768px) {
    .metrics-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .metric-item {
        padding: 8px 10px;
    }
}

@media (max-width: 480px) {
    .who-we-container {
        padding: 20px 16px;
    }

    .who-we-header h2 {
        font-size: 20px;
    }

    .about-desc {
        font-size: 13px;
    }
}
    /* Card Styling */
.offer-col {
  background: var(--white);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--orange-tag);
  border-radius: 20px;
  padding: 16px;
  text-align: center;
  transition: all 0.35s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.ofr-sec .container {

  padding: 40px;

}

.offer-col:hover {
  transform: translateY(-8px);
  border-color: #ffc107;
  box-shadow: 0 12px 30px rgba(85, 84, 84, 0.4);
}

/* Image Container */
.ofr-pic {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 26px;
}

.ofr-pic img {
  scale: 2.5;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.offer-col:hover .ofr-pic img {
  transform: scale(1.1);
}

/* Badge Icon */
.ofr-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid #ffc107;
  color: #ffc107;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.offer-col h5 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.4;
  transition: color 0.3s ease;
}

.offer-col:hover h5 {
  color: #ffc107;
}
/* Holiday Hunt - AIM Night Section */
.aim-night {
    padding: 80px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #ffffff;
}

.aim-night .sec-title h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.aim-night .sec-title p {
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Image Container Styles */
.holiday-hunt-pics {
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.holiday-hunt-pics:hover {
    transform: translateY(-4px);
    border-color: #ffc107;
}

/* Image Dimension Control */
.holiday-hunt-pics.large {
    min-height: 350px;
}

.holiday-hunt-pics.small img {
    height: 170px;
    object-fit: cover;
}

.holiday-hunt-pics.large img {
    height: 100%;
    object-fit: cover;
}

/* Section Background & Base Styles */
.life-at-holiday-hunt {
  background-color: #0f172a;
  color: #ffffff;
}

.sub-title {
  color: #ffc107;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 6px;
}

.title-line {
  width: 60px;
  height: 3px;
  background-color: #ffc107;
  margin-top: 12px;
  border-radius: 2px;
}

/* Media Frame Styling */
.hh-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.hh-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* Specific Frame Dimensions */
.hh-horizontal {
  height: 200px;
}

.hh-square {
  height: 170px;
}

/* Hover Effects */
.hh-frame:hover {
  transform: translateY(-6px);
  border-color: #ffc107;
  box-shadow: 0 12px 28px rgba(255, 193, 7, 0.2);
}

.hh-frame:hover img {
  transform: scale(1.08);
}

/* Overlay Caption */
.hh-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.85) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.hh-overlay span {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.hh-frame:hover .hh-overlay span {
  color: #ffc107;
}
/* Section Base & Colors */
.wander {
  background-color: #f8fafc;
}

.tracking-wide {
  letter-spacing: 1.5px;
}

/* 9:16 Vertical Reel Frame */
.wander-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 9 / 16;
  background-color: #0f172a;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.wander-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hover Dynamics */
.wander-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.15) !important;
}

/* Audio Toggle Button */
.audio-toggle-btn {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 2;
}

.audio-toggle-btn:hover {
  background: rgba(15, 23, 42, 0.9);
  transform: scale(1.1);
}

/* Custom Navigation Buttons */
.slider-nav-buttons .btn {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.slider-nav-buttons .btn:hover {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000000;
}
/* Header Base & Logo */
.header {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: all 0.1s ease-in-out;
}

.header-logo-img {

  scale: 2;
  height: 100%;
}

/* Bottom Category Ribbon */
.head-botm {
  background-color: #6f42c1; /* Theme purple matching your layout */
}

.head-botm a {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.head-botm a:hover {
  opacity: 0.85;
}

/* Hover Dropdowns for Desktop */
.head-botm .dropdown:hover .dropdown-menu {
  display: block;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Slide-over Mobile Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background-color: #ffffff;
  z-index: 105000000;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}

.mobile-nav-drawer.active {
  transform: translateX(-320px);
}

/* Backdrop Overlay */
.mobile-nav-backdrop {
  position: fixed;
  z-index: 900;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 1040;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-nav-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Accordion Adjustments */
.accordion-button.no-chevron::after {
  display: none;
}
/* Reset the head-botm desktop layout specifically */
.head-botm {
  background-color: #6f42c1 !important; /* Theme purple background */
  position: relative;
  z-index: 10;
}

.head-botm #navmenu {
  position: relative !important;
}

.head-botm .navmenu ul {
  display: flex !important;
  position: static !important; /* Overrides position: absolute */
  inset: auto !important; /* Overrides inset: 0 */
  padding: 10px 0 !important; /* Resets padding: 80px 0 20px */
  margin: 0 !important;
  background-color: transparent !important; /* Removes white background */
  box-shadow: none !important; /* Removes drop shadow */
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
}

.head-botm .navmenu ul li a {
  color: #ffffff !important;
  font-weight: 500;
  text-decoration: none;
}
:root {
  --hh-purple: rgb(111, 66, 193);
  --hh-purple-light: rgba(111, 66, 193, 0.08);
}

.hh-timeline-section {
  padding: 60px 0;
  width: 100%;
  overflow: hidden;
}

.hh-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Background Gray Stick */
.hh-timeline-line-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background-color: #e2e8f0;
  transform: translateX(-50%);
  z-index: 1;
}

/* Animated Filling Central Stick */
.hh-timeline-line-progress {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 0%;
  background: linear-gradient(180deg, var(--hh-purple), #8a2be2);
  transform: translateX(-50%);
  z-index: 2;
  transition: height 0.1s linear;
  box-shadow: 0 0 10px rgba(111, 66, 193, 0.4);
}

/* Individual Item Container */
.hh-timeline-item {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  opacity: 0;
  will-change: transform, opacity;
  /* Spring-like transition for realistic pop-up physics */
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Off-screen initial positions */
.hh-timeline-item.hh-left {
  justify-content: flex-start;
  transform: translateX(-120px) scale(0.85);
}

.hh-timeline-item.hh-right {
  justify-content: flex-end;
  transform: translateX(120px) scale(0.85);
}

/* Pop-up active state (Applied every time in viewport) */
.hh-timeline-item.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1) !important;
}

/* Center Dots */
.hh-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border: 4px solid var(--hh-purple);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  z-index: 3;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s;
}

.hh-timeline-item.is-visible .hh-dot {
  transform: translate(-50%, -50%) scale(1.2);
  background-color: var(--hh-purple);
}

/* Content Box Layouts */
.hh-content-box {
  width: calc(50% - 35px);
  display: flex;
  align-items: center;
  gap: 15px;
  box-sizing: border-box;
}

.hh-timeline-item.hh-left .hh-content-box {
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
}

.hh-timeline-item.hh-right .hh-content-box {
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
}

/* Card Wave/Glow Effects */
.hh-card {
  background: #ffffff;
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  color: #333;
  font-size: 0.95rem;
  line-height: 1.5;
  width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

/* Wave overlay effect triggered on scroll */
.hh-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(111, 66, 193, 0.15),
    transparent
  );
  transform: skewX(-20deg);
}

.hh-timeline-item.is-visible .hh-card::before {
  animation: hh-wave-pop 1.2s ease-in-out;
}

@keyframes hh-wave-pop {
  0% { left: -150%; }
  100% { left: 200%; }
}

.hh-year {
  display: inline-block;
  padding: 6px 16px;
  font-weight: 700;
  color: var(--hh-purple);
  background-color: var(--hh-purple-light);
  border: 1.5px solid var(--hh-purple);
  border-radius: 20px;
  font-size: 1rem;
  white-space: nowrap;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  .hh-timeline-line-bg, .hh-timeline-line-progress {
    left: 20px;
  }
  .hh-dot {
    left: 20px;
  }
  .hh-timeline-item.hh-left, .hh-timeline-item.hh-right {
    transform: translateY(80px) scale(0.9);
  }
  .hh-content-box {
    width: calc(100% - 45px) !important;
    margin-left: 45px !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .hh-timeline-item.hh-left .hh-content-box {
    flex-direction: column !important;
  }
}
/* Off-screen initial states for animation */
.hh-timeline-item {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

/* Left items start offset to the left */
.hh-timeline-item.hh-left {
  transform: translateX(-100px);
}

/* Right items start offset to the right */
.hh-timeline-item.hh-right {
  transform: translateX(100px);
}

/* Active state triggered when scrolled into view */
.hh-timeline-item.is-visible {
  opacity: 1;
  transform: translateX(0) !important;
}

/* Card Wave/Shine Background Animation */
.hh-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Animated gradient wave overlay */
.hh-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(111, 66, 193, 0.12),
    transparent
  );
  transform: skewX(-25deg);
  transition: none;
}

/* Wave triggers on visible reveal */
.hh-timeline-item.is-visible .hh-card::before {
  animation: hh-wave-slide 1.5s ease-in-out;
}

@keyframes hh-wave-slide {
  0% {
    left: -150%;
  }
  100% {
    left: 200%;
  }
}

/* Hover Lift Effect */
.hh-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(111, 66, 193, 0.18);
}

/* Mobile responsive animations (slide upwards smoothly instead of sideways on small screens) */
@media (max-width: 767px) {
  .hh-timeline-item.hh-left,
  .hh-timeline-item.hh-right {
    transform: translateY(60px);
  }
}

/* ==========================================================================
   GLOBAL STYLES & CSS VARIABLES
   ========================================================================== */
:root {
  --brand-purple: #6b3ba7;
  --brand-purple-dark: #552a8a;
  --brand-purple-light: #f3eeea;
  --brand-accent: #facc15;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --bg-light: #f8fafc;
  --border-color: #e2e8f0;
  --font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --container-max: 1200px;
  --radius-lg: 16px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 25px -5px rgba(107, 59, 167, 0.08);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-light);
  color: var(--text-main);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ==========================================================================
   NAVBAR SECTION
   ========================================================================== */
.site-header {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

/* Primary Top Nav */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.logo-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(245, 158, 11, 0.3);
  background-color: rgba(254, 243, 199, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon i {
  color: var(--brand-purple);
  font-size: 1.5rem;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.brand-subtitle {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Nav Links */
.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav-link {
  text-decoration: none;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.25rem 0;
  transition: color 0.2s;
}

.nav-link:hover,
.nav-link.active {
  color: var(--brand-purple);
}

.nav-link.active {
  font-weight: 700;
  border-bottom: 2px solid var(--brand-purple);
}

.whatsapp-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--brand-purple);
  color: var(--brand-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.whatsapp-btn:hover {
  background-color: var(--brand-purple);
  color: #ffffff;
}

/* Secondary Nav Strip */
.secondary-strip {
  background-color: var(--brand-purple);
  color: #ffffff;
}

.strip-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0.75rem 0;
  overflow-x: auto;
  white-space: nowrap;
}

.strip-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: color 0.2s;
}

.strip-link i {
  color: var(--brand-accent);
  font-size: 1rem;
}

.strip-link:hover {
  color: var(--brand-accent);
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */
.main-content {
  flex-grow: 1;
}

.hero-banner {
  background: linear-gradient(180deg, rgba(107, 59, 167, 0.08) 0%, rgba(248, 250, 252, 0) 100%);
  padding: 3.5rem 0 2rem 0;
  text-align: center;
}

.badge {
  display: inline-block;
  background-color: rgba(107, 59, 167, 0.1);
  color: var(--brand-purple);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 50px;
  margin-bottom: 0.75rem;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -0.02em;
}

.hero-subtitle {
  color: var(--text-muted);
  max-width: 600px;
  margin: 0.5rem auto 0 auto;
  font-size: 1.05rem;
}

/* Layout Grid */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
  padding-bottom: 5rem;
}

.card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  padding: 2.5rem;
}

.card-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-title i {
  color: var(--brand-purple);
}

/* Form Styles */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 0.5rem;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 1rem;
  color: #94a3b8;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-family: inherit;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: #f8fafc;
  outline: none;
  transition: all 0.2s ease;
}

.input-wrapper .form-input {
  padding-left: 2.75rem;
}

.phone-wrapper {
  display: flex;
  gap: 0.5rem;
}

.phone-wrapper .form-select {
  width: 110px;
  flex-shrink: 0;
}

.form-textarea {
  resize: vertical;
  min-height: 110px;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  background-color: #ffffff;
  border-color: var(--brand-purple);
  box-shadow: 0 0 0 3px rgba(107, 59, 167, 0.15);
}

.btn-primary {
  width: 100%;
  padding: 0.85rem;
  background-color: var(--brand-purple);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--brand-purple-dark);
}

/* Info Cards Sidebar */
.info-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.info-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.icon-box.purple {
  background-color: rgba(107, 59, 167, 0.1);
  color: var(--brand-purple);
}

.icon-box.amber {
  background-color: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.info-details h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.info-details p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.info-link {
  display: block;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--brand-purple);
  text-decoration: none;
  margin-top: 0.5rem;
}

.info-link:hover {
  text-decoration: underline;
}

.badge-time {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  background-color: #f1f5f9;
  padding: 0.25rem 0.6rem;
  border-radius: 50px;
  margin-top: 0.5rem;
  color: var(--text-muted);
}

/* Direct Banner Card */
.whatsapp-banner {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2);
}

.whatsapp-banner h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.whatsapp-banner p {
  font-size: 0.85rem;
  color: #a7f3d0;
}

.btn-whatsapp-direct {
  background-color: #ffffff;
  color: #059669;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.2s;
}

.btn-whatsapp-direct:hover {
  background-color: #ecfdf5;
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */
.site-footer {
  background-color: #0f172a;
  color: #94a3b8;
  font-size: 0.875rem;
  margin-top: auto;
}

.footer-main {
  padding: 3.5rem 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2.5rem;
}

.footer-brand .brand-title {
  color: #ffffff;
}

.footer-desc {
  font-size: 0.8rem;
  line-height: 1.6;
  margin-top: 0.75rem;
}

.footer-title {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: #ffffff;
}

.social-icons {
  display: flex;
  gap: 0.75rem;
}

.social-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #1e293b;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s;
}

.social-btn:hover {
  background-color: var(--brand-purple);
  color: #ffffff;
}

.footer-bottom {
  border-top: 1px solid #1e293b;
  background-color: #020617;
  padding: 1rem 0;
  font-size: 0.75rem;
}

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

.legal-links {
  display: flex;
  gap: 1.5rem;
}

.legal-links a {
  color: #64748b;
  text-decoration: none;
}

.legal-links a:hover {
  color: #94a3b8;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 992px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .main-nav {
    display: none;
  }
  .hero-title {
    font-size: 1.85rem;
  }
  .bottom-container {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}
/* ==========================================================================
   DARK MODERN FLOATING FOOTER
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --footer-bg: #0a0a0c;
  --footer-card-bg: #121216;
  --text-primary: #ffffff;
  --text-muted: #8e8e93;
  --brand-purple: #6b3ba7;
  --brand-purple-light: #9d52f8;
  --purple-gradient: linear-gradient(180deg, #a855f7 0%, #6b3ba7 60%, rgba(107, 59, 167, 0) 100%);
  --font-family: 'Plus Jakarta Sans', sans-serif;
}



/* Outer Wrapper for Floating Layout */
.hh-footer-wrapper {
  background-color: var(--footer-bg);
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}

/* Rounded Dark Footer Card */
.hh-footer-card {
  width: 100%;
  max-width: 1200px;
  border-radius: 28px;
  padding: 50px 50px 0 50px;
  position: relative;
  overflow: hidden;
}

/* Top Section: Brand Info + Dynamic Link Columns */
.hh-footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(5, minmax(0, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

/* Left Brand Info Column */
.hh-brand-col {
  padding-right: 20px;
}

.hh-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 16px;
}

.hh-logo-icon {
  scale: 1.5;
  width: fit-content;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(108, 59, 167, 0.629);
  border: 1px solid var(--brand-purple-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-purple-light);
  font-size: 1rem;
  overflow: hidden;
}

.hh-logo-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hh-brand-desc {
  color: var(--text-muted);
  font-size: 0.825rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.hh-contact-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hh-contact-info a {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hh-contact-info a:hover {
  color: var(--text-primary);
}

/* Navigation Link Columns */
.hh-links-col h4 {
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 16px;
  text-transform: capitalize;
}

.hh-links-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hh-links-col a {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.hh-links-col a:hover {
  color: var(--text-primary);
}

/* Middle Legal Bar */
.hh-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.75rem;
  position: relative;
  z-index: 2;
}

.hh-bottom-meta span {
  color: rgba(255, 255, 255, 0.5);
}

/* Watermark Section at Bottom */
.hh-watermark-container {
  width: 100%;
  text-align: center;
  line-height: 0.8;
  margin-top: 10px;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
}

.hh-watermark-text {
  font-size: clamp(3.5rem, 11vw, 12rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  background: var(--purple-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.35;
  display: block;
  transform: translateY(15%);
}

/* ==========================================================================
   RESPONSIVE LAYOUT
   ========================================================================== */
@media (max-width: 1024px) {
  .hh-footer-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hh-brand-col {
    grid-column: span 3;
    padding-right: 0;
    margin-bottom: 10px;
  }
}

@media (max-width: 640px) {
  .hh-footer-card {
    padding: 30px 24px 0 24px;
    border-radius: 20px;
  }
  .hh-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .hh-brand-col {
    grid-column: span 2;
  }
  .hh-footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}
/* ==========================================================================
   MINIMAL FLOATING DARK FOOTER - HOLIDAY HUT
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

:root {
  --footer-bg: #09090b;
  --card-bg: #111115;
  --text-primary: #ffffff;
  --text-muted: #71717a;
  --accent-purple: #a855f7;
  --purple-gradient: linear-gradient(180deg, #c084fc 0%, #a855f7 50%, rgba(168, 85, 247, 0.05) 100%);
  --font-family: 'Plus Jakarta Sans', sans-serif;
}



/* Outer Container Wrapper */
.hh-footer-wrapper {
  background-color: var(--card-bg);

  padding: 40px 20px;
  display: flex;
  justify-content: center;
}

/* Rounded Dark Footer Card */
.hh-footer-card {
  width: 100%;
  max-width: 1200px;
  background-color: var(--card-bg);
  border-radius: 28px;
  padding: 48px 48px 0 48px;
  position: relative;
  overflow: hidden;
}

/* Minimal Grid Layout */
.hh-footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 32px;
  margin-bottom: 40px;
}

/* Brand Section */
.hh-brand-box {
  max-width: 380px;
}

.hh-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-bottom: 14px;
}

.hh-logo-title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hh-brand-desc {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Essential Minimal Nav Links */
.hh-nav-group {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.hh-nav-col h4 {
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.hh-nav-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hh-nav-col a {
  color: var(--text-muted);
  font-size: 0.825rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.hh-nav-col a:hover {
  color: var(--blue-primary);
}

/* Minimal Bottom Meta Bar */
.hh-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-size: 0.775rem;
  position: relative;
  z-index: 2;
}

.hh-designer-tag span {
  font-weight: 600;
}

/* ==========================================================================
   POP-OUT RISE & GLOW ANIMATION FOR HOLIDAY HUT
   ========================================================================== */
.hh-watermark-wrapper {
  width: 100%;
  text-align: center;
  line-height: 0.8;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  padding-top: 10px;
}

.hh-watermark-text {
  display: block;
  font-size: clamp(3.5rem, 11vw, 11.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  
  /* Initial State (Sunk & Dark) */
  transform: translateY(55%);
  opacity: 0.15;
  background: linear-gradient(180deg, #4c1d95 0%, rgba(15, 15, 20, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Smooth Rise Transition */
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s ease;
  filter: drop-shadow(0 0 0px rgba(168, 85, 247, 0));
}

/* Hover/Active Trigger State (Rises & Glows into Accent Color) */
.hh-footer-card:hover .hh-watermark-text,
.hh-watermark-text.is-visible {
  transform: translateY(12%);
  opacity: 0.95;
  background: var(--purple-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 -10px 30px rgba(168, 85, 247, 0.35));
}

/* Mobile Responsiveness */
@media (max-width: 768px) {

  .hh-footer-card {
    padding: 32px 24px 0 24px;
    border-radius: 20px;
    margin-bottom: 40px;
  }
  .hh-footer-top {
    flex-direction: column;
    gap: 28px;
  }
  .hh-nav-group {
    gap: 32px;
  }
  .hh-footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}
main, .main-content {
  flex: 1 0 auto; /* Allows main content to grow and push footer down */
}
.hh-footer-wrapper {
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2; /* Ensures it stays above all other page content */
  padding: 10px 20px; /* Reduced padding so it doesn't take up too much vertical space */
  pointer-events: none; /* Lets clicks pass through the background wrapper */
}

/* Enable pointer events on the card itself so links remain clickable */
.hh-footer-card {
  pointer-events: auto;
}
main, .main-content {
  padding-bottom: 120px; /* Adjust height based on your footer size */
}
.hh-footer-wrapper {
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
/* Banner Wrapper with High-Quality Themed Background Image */
.hh-careers-hero {
  margin-top: 18vh;
  width: 100%;
  min-height: 480px;
  display: flex;
  align-items: center;

  /* Travel Team Image with Purple-Dark Gradient Overlay */
  background-image: 
    linear-gradient(
      90deg, 
      rgba(24, 9, 45, 0.92) 0%, 
      rgba(44, 18, 80, 0.2) 45%, 
      rgba(15, 15, 20, 0.5) 100%
    ),
    url('https://i.pinimg.com/1200x/2d/a5/03/2da503e8abe12ba2250fbcad4afb5b13.jpg');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 60px 0;
  overflow: hidden;
}

/* Container Bounds */
.hh-hero-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  
  z-index: 2;
}

.hh-hero-content {
  max-width: 720px;
}

/* Title Styling */
.hh-hero-title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.9);


}

/* Subtitle Styling */
.hh-hero-subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 40px;
}

/* Action Area */
.hh-hero-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  color: rgba(255, 255, 255, 0.9);

}

.hh-action-label {  color: rgba(255, 255, 255, 0.9);

  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Vibrant Yellow Call-To-Action Button */
.hh-btn-yellow {
  display: inline-block;
  background-color: gold;
    color: rgba(255, 255, 255, 0.9);

  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(250, 204, 21, 0.3);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hh-btn-yellow:hover {
  background-color: var(--hh-yellow-hover);
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(250, 204, 21, 0.45);
}

/* Mobile Responsive Tweaks */
@media (max-width: 768px) {
  .hh-careers-hero {
    min-height: 400px;
    padding: 40px 0;
    /* Richer dark overlay for vertical screens */
    background-image: 
      linear-gradient(
        180deg, 
        rgba(24, 9, 45, 0.92) 0%, 
        rgba(15, 15, 20, 0.85) 100%
      ),
      url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1200&q=80');
  }

  .hh-hero-container {
    padding: 0 20px;
  }

  .hh-hero-subtitle {
    margin-bottom: 28px;
  }
}
@media (max-width: 1024px) {
    .content-grid {
      grid-template-columns: 1fr;
    }
    .vector-illustration {
      display: none; /* Hide decorative vectors on tablet/mobile */
    }
  }

  @media (max-width: 768px) {
    .reels-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    
    .reel-card {
      height: 360px;
    }

    .brand-row {
      gap: 20px;
    }

    .wanderlust-card {
      padding: 20px;
    }
  }

  @media (max-width: 480px) {
    .reels-grid {
      grid-template-columns: 1fr;
    }
    
    .section-title {
      font-size: 22px;
    }
  }

  :root {
      --purple-primary: #653bb4;
      --purple-dark: #24092d;
      --purple-light: #f5f0ff;
      --purple-accent: #8b5cf6;
      --text-dark: #1e1e24;
      --text-muted: #6b7280;
      --bg-light: #f8fafc;
      --card-bg: #ffffff;
      --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
      --shadow-lg: 0 20px 25px -5px rgba(101, 59, 180, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
      --radius-lg: 20px;
      --radius-md: 14px;
      --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }



    .hh-blogs-section {
      max-width: 1240px;
      margin: 0 auto;
    }

    .hh-section-header {
      margin-bottom: 32px;
    }

    .hh-section-title {
      font-size: 32px;
      font-weight: 800;
      color: var(--purple-dark);
      letter-spacing: -0.5px;
    }

    /* Hero / Featured Grid */
    .hh-featured-top {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 24px;
      margin-bottom: 24px;
    }

    /* Side Column for Small Featured Cards */
    .hh-side-column {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    /* Common Card Styling */
    .hh-blog-card {
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      padding: 16px;
      box-shadow: var(--shadow-sm);
      border: 1px solid rgba(101, 59, 180, 0.08);
      transition: var(--transition);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(30px);
    }

    .hh-blog-card.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .hh-blog-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(101, 59, 180, 0.3);
    }

    /* Card Media Wrapper */
    .hh-card-media {
      position: relative;
      width: 100%;
      border-radius: var(--radius-md);
      overflow: hidden;
      background-color: #eee;
    }

    .hh-card-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s ease;
    }

    .hh-blog-card:hover .hh-card-media img {
      transform: scale(1.06);
    }

    /* Large Hero Card Specifics */
    .hh-card-hero .hh-card-media {
      height: 340px;
    }

    .hh-card-hero .hh-card-content {
      padding-top: 16px;
    }

    .hh-card-hero .hh-card-title {
      font-size: 20px;
      font-weight: 700;
    }

    /* Horizontal Side Card Specifics */
    .hh-card-horizontal {
      flex-direction: row;
      gap: 16px;
      align-items: center;
      height: 100%;
    }

    .hh-card-horizontal .hh-card-media {
      width: 160px;
      height: 130px;
      flex-shrink: 0;
    }

    .hh-card-horizontal .hh-card-content {
      flex: 1;
    }

    .hh-card-horizontal .hh-card-title {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.35;
    }

    /* Standard Grid Layout */
    .hh-blogs-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-bottom: 24px;
    }

    .hh-card-standard .hh-card-media {
      height: 200px;
    }

    .hh-card-standard .hh-card-content {
      padding-top: 14px;
    }

    /* Meta & Typography */
    .hh-card-meta {
      font-size: 12px;
      color: var(--text-muted);
      font-weight: 500;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .hh-card-meta::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      background-color: var(--purple-primary);
      border-radius: 50%;
    }

    .hh-card-title {
      color: var(--purple-dark);
      font-size: 16px;
      font-weight: 700;
      line-height: 1.4;
      transition: color 0.2s ease;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .hh-blog-card:hover .hh-card-title {
      color: var(--purple-primary);
    }

    /* Action Container & Button */
    .hh-action-wrap {
      text-align: center;
      margin-top: 40px;
    }

    .hh-btn-primary {
      background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-accent) 100%);
      color: #ffffff;
      border: none;
      padding: 14px 40px;
      font-size: 15px;
      font-weight: 700;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(101, 59, 180, 0.35);
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .hh-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(101, 59, 180, 0.5);
      background: linear-gradient(135deg, var(--purple-accent) 0%, var(--purple-primary) 100%);
    }

    .hh-btn-primary:active {
      transform: translateY(0);
    }

    .hh-hidden-cards {
      display: none;
    }

    .hh-hidden-cards.show {
      display: grid;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
      .hh-featured-top {
        grid-template-columns: 1fr;
      }
      .hh-side-column {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
      }
      .hh-blogs-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      button .bi{
        margin-left: 75px;
      }
      .hh-side-column,
      .hh-blogs-grid {
        grid-template-columns: 1fr;
      }
      .hh-card-horizontal {
        flex-direction: column;
        align-items: flex-start;
      }
      .hh-card-horizontal .hh-card-media {
        width: 100%;
        height: 180px;
      }
      .hh-card-hero .hh-card-media {
        height: 240px;
      }
      .hh-section-title {
        font-size: 26px;
      }
    }
    .hh-section-card-wrapper {
      max-width: 1240px;
      margin: 0 auto;
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      padding: 48px;
      box-shadow: var(--shadow-sm);
      border: 1px solid rgba(101, 59, 180, 0.08);
      transition: var(--transition);
    }

    .hh-section-card-wrapper:hover {
      box-shadow: var(--shadow-lg);
      border-color: rgba(101, 59, 180, 0.2);
    }

    .hh-career-container {
      display: grid;
      grid-template-columns: 1fr 1.25fr;
      gap: 48px;
      align-items: center;
      max-width: 1100px;
      margin-inline: auto;
      padding: 40px;
    }

    /* Left Content Block */
    .hh-content-block {
      opacity: 0;
      transform: translateY(20px);
      transition: var(--transition);
    }

    .hh-content-block.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .hh-section-title {
      font-size: 32px;
      font-weight: 800;
      color: var(--purple-dark);
      letter-spacing: -0.5px;
      margin-bottom: 20px;
      line-height: 1.25;
    }

    .hh-section-title span {
      color: var(--purple-primary);
    }

    .hh-section-description {
      color: var(--text-muted);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.7;
    }

    /* Right Grid Layout */
    .hh-features-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
    }

    /* Category Cards - Styled like Section 1 Cards */
    .hh-feature-card {
      background: var(--card-bg);
      border-radius: var(--radius-md);
      padding: 24px 12px;
      text-align: center;
      border: 1px solid rgba(101, 59, 180, 0.12);
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 180px;
      opacity: 0;
      transform: translateY(30px);
      cursor: pointer;
    }

    .hh-feature-card.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .hh-feature-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: var(--purple-primary);
    }

    /* Dynamic Illustrated Badges matching Theme Accent */
    .hh-icon-box {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: radial-gradient(circle, #f5f0ff 0%, #ede5ff 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      transition: var(--transition);
      border: 1px solid rgba(101, 59, 180, 0.15);
    }

    .hh-icon-box svg {
      width: 30px;
      height: 30px;
      fill: var(--purple-primary);
      transition: var(--transition);
    }

    .hh-feature-card:hover .hh-icon-box {
      background: var(--purple-primary);
      transform: scale(1.08);
      border-color: var(--purple-primary);
    }

    .hh-feature-card:hover .hh-icon-box svg {
      fill: #ffffff;
    }

    .hh-feature-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--purple-dark);
      line-height: 1.35;
      transition: color 0.2s ease;
    }

    .hh-feature-card:hover .hh-feature-title {
      color: var(--purple-primary);
    }

    /* Responsive Adjustments */
    @media (max-width: 1024px) {
      .hh-section-card-wrapper {
        padding: 32px;
      }
      .hh-career-container {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .hh-features-grid {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    @media (max-width: 768px) {
      .hh-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .hh-section-title {
        font-size: 26px;
      }
    }

    @media (max-width: 480px) {
      .hh-section-card-wrapper {
        padding: 24px 16px;
      }
      .hh-features-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    /* Modern Animated Header */
    .sec-title h4 {
      font-weight: 800;
      font-size: 36px;
      color: var(--text-dark);
      letter-spacing: -0.5px;
      margin-bottom: 10px;
      position: relative;
      display: inline-block;
    }

    .sec-title p {
      color: var(--text-muted);
      font-size: 16px;
      max-width: 650px;
    }

    /* Continuous Flow Layout Wrappers */
    .flow-container {
      display: flex;
      flex-direction: column;
      gap: 80px;
    }

    .glass-card {
      background: var(--card-bg);
      border-radius: var(--radius-card);
      padding: 48px;
      box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.06);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .glass-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
      transition: 0.8s;
    }

    .glass-card:hover::before {
      left: 100%;
    }

    /* Special FX: Photo Gallery Grid */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 140px;
      gap: 16px;
    }

    .gallery-item {
      position: relative;
      border-radius: var(--radius-card);
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.06);
      cursor: pointer;
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition);
    }

    .gallery-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, rgba(45, 91, 227, 0.4) 0%, transparent 60%);
      opacity: 0;
      transition: var(--transition);
    }

    .gallery-item:hover img {
      transform: scale(1.08) rotate(1deg);
    }

    .gallery-item:hover::after {
      opacity: 1;
    }

    .g-col-3 { grid-column: span 3; grid-row: span 3; }
    .g-col-6 { grid-column: span 6; grid-row: span 2; }
    .g-col-3-sq { grid-column: span 3; grid-row: span 1; }

    @media (max-width: 768px) {
      .gallery-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: 100px;
      }
      .g-col-3 { grid-column: span 6; grid-row: span 2; }
      .g-col-6 { grid-column: span 6; grid-row: span 2; }
      .g-col-3-sq { grid-column: span 3; grid-row: span 2; }
    }

    /* Floating Pill Navigation */
    .position-links {
      display: block;
      padding: 14px 24px;
      border-radius: var(--radius-pill);
      color: var(--text-dark);
      font-weight: 600;
      text-decoration: none;
      transition: var(--transition);
      margin-bottom: 10px;
      border: 1px solid transparent;
    }

    .position-links.active,
    .position-links:hover {
      background-color: var(--accent-purple);
      color: #ffffff;
      transform: translateX(6px);
      box-shadow: 0 8px 20px rgba(45, 91, 227, 0.25);
    }

    /* Accordion Glow & Animations */
    .accordion-item {
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 16px !important;
      margin-bottom: 16px;
      overflow: hidden;
      transition: var(--transition);
      background: #ffffff;
    }

    .accordion-item:hover {
      border-color: var(--primary-blue);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(45, 91, 227, 0.08);
    }

    .accordion-button {
      padding: 20px 24px;
      font-size: 16px;
      font-weight: 700;
    }

    .accordion-button:not(.collapsed) {
      background: linear-gradient(90deg, #f0f4ff 0%, #ffffff 100%);
      color: var(--primary-blue);
    }

    .badge-hiring {
      background-color: var(--yellow-accent);
      color: #000000;
      font-weight: 700;
      font-size: 12px;
      padding: 6px 16px;
      border-radius: var(--radius-pill);
      box-shadow: 0 2px 8px rgba(255, 219, 0, 0.4);
      animation: pulse-glow 2s infinite;
    }

    @keyframes pulse-glow {
      0% { box-shadow: 0 0 0 0 rgba(255, 219, 0, 0.5); }
      70% { box-shadow: 0 0 0 8px rgba(255, 219, 0, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 219, 0, 0); }
    }

    /* Input Glow Special Effects */
    .input-div {
      position: relative;
      margin-bottom: 18px;
    }

    .input-icon, .select-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--text-muted);
      z-index: 5;
      transition: var(--transition);
    }

    .cta-form .form-control,
    .cta-form .form-select {
      background-color: var(--input-bg);
      border: 2px solid transparent;
      border-radius: var(--radius-input);
      padding: 14px 16px 14px 44px;
      font-size: 14px;
      transition: var(--transition);
    }

    .cta-form input[type="file"].form-control {
      padding-left: 16px;
    }

    .cta-form .form-control:focus,
    .cta-form .form-select:focus {
      border-color: var(--primary-blue);
      background-color: #ffffff;
      box-shadow: 0 0 15px rgba(45, 91, 227, 0.15);
    }

    .cta-form .input-div:focus-within .input-icon {
      color: var(--primary-blue);
      transform: translateY(-50%) scale(1.1);
    }

    /* Interactive Button Effect */
    .cta-submit-btn {
      background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-hover) 100%);
      color: #ffffff;
      font-weight: 700;
      border-radius: var(--radius-pill);
      padding: 16px 40px;
      border: none;
      position: relative;
      overflow: hidden;
      transition: var(--transition);
    }

    .cta-submit-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 28px rgba(45, 91, 227, 0.35);
    }

    /* Floating Feature Badges */
    .cta-botm ul {
      list-style: none;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
      margin-top: 28px;
      color: var(--text-muted);
      font-size: 14px;
      font-weight: 600;
    }

    .cta-botm li {
      display: flex;
      align-items: center;
      transition: var(--transition);
    }

    .cta-botm li:hover {
      color: var(--primary-blue);
      transform: translateY(-2px);
    }

    .cta-botm i {
      color: var(--primary-blue);
      font-size: 18px;
      margin-right: 8px;
    }
    .wander {
      padding: 50px 0;
      background-color: #ffffff;
    }

    .sec-title h4 {
      font-weight: 800;
      font-size: 32px;
      color: #0d0d0d;
      letter-spacing: -0.5px;
      margin: 0;
    }

    /* Slider Navigation Controls */
    .living-nav {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .living-nav .living {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: #2b57d4;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      box-shadow: 0 4px 12px rgba(43, 87, 212, 0.25);
      user-select: none;
    }

    .living-nav .living:hover {
      background-color: #1c42b0;
      transform: scale(1.08);
      box-shadow: 0 6px 16px rgba(43, 87, 212, 0.4);
    }

    .living-nav .living:active {
      transform: scale(0.95);
    }

    .living-nav .swiper-button-disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }

    /* Video Reel Card Container */
    .wander-slider {
      padding: 10px 5px 20px 5px;
    }

    .loading-image {
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      background-color: #000000;
    }

    .loading-image:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
    }

    .wander-pic {
      position: relative;
      width: 100%;
      padding-top: 177.78%; /* 9:16 Vertical Reel Ratio */
      overflow: hidden;
    }

    .wander-pic img,
    .wander-pic video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .loading-image:hover .wander-pic video {
      transform: scale(1.05);
    }

    /* Top-Right Logo Badge Overlay */
    .wander-pic::before {
      content: '';
      position: absolute;
      top: 14px;
      right: 14px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.4) url('https://cdn-icons-png.flaticon.com/512/2014/2014761.png') center/16px no-repeat;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      z-index: 5;
      pointer-events: none;
    }

    /* Bottom-Right Mute/Unmute Button */
    .insta-mute {
      position: absolute;
      bottom: 14px;
      right: 14px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border: 1px solid rgba(255, 255, 255, 0.25);
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .insta-mute:hover {
      background: rgba(0, 0, 0, 0.85);
      transform: scale(1.1);
    }

    .insta-mute i {
      font-size: 15px;
    }
    /* Section Layout */
.wander {
  padding: 40px 0;
  background-color: #ffffff;
}

.wander .sec-title h4 {
  font-weight: 800;
  font-size: 32px;
  color: #0d0d0d;
  letter-spacing: -0.5px;
  margin: 0;
}

/* Navigation Buttons */
.living-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.living-nav .living {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: #2b57d4;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 12px rgba(43, 87, 212, 0.25);
  user-select: none;
}

.living-nav .living:hover {
  background-color: #1c42b0;
  transform: scale(1.08);
}

.living-nav .swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Card Container Fix */
.loading-image {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  background-color: #000000;
}

.loading-image:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}

/* FIXED ASPECT RATIO AND CONTAINER */
.wander-pic {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16; /* Standard vertical Reel/Story format */
  overflow: hidden;
  background-color: #000000;
}

/* Force Video & Image to fill 100% of the container */
.wander-pic img,
.wander-pic video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.loading-image:hover .wander-pic video,
.loading-image:hover .wander-pic img {
  transform: scale(1.04);
}

/* Top-Right Logo Overlay */
.wander-pic::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4) url('https://cdn-icons-png.flaticon.com/512/2014/2014761.png') center/16px no-repeat;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  z-index: 5;
  pointer-events: none;
}

/* Mute Button Overlay */
.insta-mute {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: all 0.25s ease;
}

.insta-mute:hover {
  background: rgba(0, 0, 0, 0.85);
  transform: scale(1.1);
}

.insta-mute i {
  font-size: 14px;
}
:root {
      --yes-bank-color: #0b3c5d;
      --icici-bank-color: #d9381e;
      --card-bg: #ffffff;
      --section-bg: #f8fafc;
    }

    body {
      background-color: var(--section-bg);
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .payment-section {
      padding: 60px 0;
    }

    .payment-title h2 {
      font-weight: 800;
      color: #1e293b;
      margin-bottom: 10px;
    }

    .payment-title p {
      color: #64748b;
      font-size: 16px;
    }

    /* Card Styling */
    .payment-card {
      background: var(--card-bg);
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      overflow: hidden;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .payment-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }

    /* Card Header */
    .card-header-banner {
      padding: 20px;
      color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .yes-header {
      background: linear-gradient(135deg, #0b3c5d 0%, #1d6fa5 100%);
    }

    .icici-header {
      background: linear-gradient(135deg, #d9381e 0%, #f36e21 100%);
    }

    .card-header-banner h4 {
      margin: 0;
      font-size: 20px;
      font-weight: 700;
    }

    .card-header-banner span {
      font-size: 13px;
      background: rgba(255, 255, 255, 0.2);
      padding: 4px 12px;
      border-radius: 20px;
    }

    /* QR Code Display */
    .qr-container {
      text-align: center;
      padding: 25px 20px 15px;
      background-color: #ffffff;
    }

    .qr-code-wrapper {
      width: 210px;
      height: 210px;
      margin: 0 auto;
      padding: 10px;
      border: 2px dashed #cbd5e1;
      border-radius: 16px;
      background: #ffffff;
    }

    .qr-code-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 8px;
    }

    .scan-note {
      font-size: 13px;
      color: #64748b;
      margin-top: 10px;
    }

    /* Bank Info Details List */
    .bank-info-body {
      padding: 20px 25px 25px;
      flex-grow: 1;
    }

    .info-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 1px dashed #f1f5f9;
    }

    .info-item:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }

    .info-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background-color: #f1f5f9;
      color: #334155;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      margin-right: 15px;
      flex-shrink: 0;
    }

    .info-content {
      flex-grow: 1;
    }

    .info-label {
      font-size: 12px;
      text-transform: uppercase;
      color: #94a3b8;
      font-weight: 600;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }

    .info-value {
      font-size: 15px;
      font-weight: 600;
      color: #1e293b;
      word-break: break-all;
    }

    /* Copy Button */
    .btn-copy {
      border: none;
      background: transparent;
      color: #2563eb;
      font-size: 14px;
      padding: 2px 6px;
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .btn-copy:hover {
      color: #1d4ed8;
    }

    /* Address Text */
    .address-text {
      font-size: 13px;
      line-height: 1.5;
      color: #475569;
      font-weight: 500;
    }
    .lead-popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.65);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      padding: 15px;
    }

    /* Modal Active State */
    .lead-popup-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* Popup Box Styling */
    .lead-popup-card {
      background: #ffffff;
      width: 100%;
      max-width: 500px;
      border-radius: 20px;
      padding: 40px 35px 35px 35px;
      position: relative;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
      transform: scale(0.85);
      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      text-align: center;
    }

    .lead-popup-overlay.active .lead-popup-card {
      transform: scale(1);
    }

    /* Close Button (X) */
    .lead-popup-close {
      position: absolute;
      top: 15px;
      right: 15px;
      width: 32px;
      height: 32px;
      background: #000000;
      color: #ffffff;
      border: none;
      border-radius: 50%;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .lead-popup-close:hover {
      background: #333333;
      transform: scale(1.1);
    }

    /* Title */
    .lead-popup-title {
      font-size: 20px;
      font-weight: 700;
      color: #1a1a1a;
      margin-bottom: 28px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* Form Fields Styling */
    .lead-form-group {
      margin-bottom: 16px;
      position: relative;
    }

    .lead-input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      background-color: #f4f5f8;
      border-radius: 25px;
      padding: 4px 18px;
      border: 1px solid transparent;
      transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .lead-input-wrapper:focus-within {
      border-color: #2b57d4;
      background-color: #ffffff;
      box-shadow: 0 0 0 3px rgba(43, 87, 212, 0.1);
    }

    .lead-input-icon {
      color: #888888;
      font-size: 14px;
      margin-right: 12px;
    }

    .lead-input-field {
      width: 100%;
      border: none;
      background: transparent;
      padding: 12px 0;
      font-size: 14px;
      color: #333333;
      outline: none;
    }

    .lead-input-field::placeholder {
      color: #999999;
    }

    /* Phone Input Layout (Country Selector + Phone Input) */
    .phone-input-row {
      display: flex;
      gap: 12px;
    }

    .country-code-select {
      background-color: #f4f5f8;
      border-radius: 25px;
      padding: 0 16px;
      display: flex;
      align-items: center;
      border: 1px solid transparent;
      min-width: 105px;
    }

    .country-code-select select {
      border: none;
      background: transparent;
      font-size: 14px;
      font-weight: 600;
      color: #333333;
      outline: none;
      cursor: pointer;
      width: 100%;
    }

    /* Submit Button */
    .lead-submit-btn {
      width: 50%;
      min-width: 180px;
      background-color: #2b57d4;
      color: #ffffff;
      border: none;
      border-radius: 25px;
      padding: 12px 20px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 10px;
      transition: background-color 0.25s ease, transform 0.2s ease;
      box-shadow: 0 4px 12px rgba(43, 87, 212, 0.3);
    }

    .lead-submit-btn:hover {
      background-color: #1c42b0;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(43, 87, 212, 0.4);
    }

    .lead-submit-btn:active {
      transform: translateY(0);
    }

    /* Responsive Adjustments */
    @media (max-width: 480px) {
      .lead-popup-card {
        padding: 30px 20px 25px 20px;
      }
      .lead-popup-title {
        font-size: 17px;
      }
      .lead-submit-btn {
        width: 100%;
      }
    }
    :root {
      --hh-primary-blue: #2b57d4;
      --hh-dark-blue: #1c42b0;
      --hh-text-dark: #1e293b;
      --hh-bg-glass: rgba(255, 255, 255, 0.95);
      
      /* Social Colors */
      --color-whatsapp: #25d366;
      --color-instagram: #e1306c;
      --color-facebook: #1877f2;
      --color-phone: #0b3c5d;
      --color-email: #ea4335;
    }

    /* Fixed Sidebar Wrapper (Right Center) */
   :root {
  --color-whatsapp: #25d366;
  --color-facebook: #1877f2;
  --color-phone: #0f3e62;
  --color-email: #ea4335;
  --hh-text-dark: #1e293b;
}

/* Fixed Sidebar Wrapper (Right Center) */
.hh-social-sidebar {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Permanent White Floating Container */
.hh-social-drawer {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px 0 0 16px;
  padding: 8px 6px;
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-right: none;
  
  /* Always Visible */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Compact Social Icon Badges */
.hh-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.hh-social-btn:hover {
  transform: scale(1.12);
  color: #ffffff;
}

/* Brand Colors */
.hh-social-btn.whatsapp { 
  background: var(--color-whatsapp); 
}

.hh-social-btn.instagram { 
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); 
}

.hh-social-btn.facebook { 
  background: var(--color-facebook); 
}

.hh-social-btn.phone { 
  background: var(--color-phone); 
}

.hh-social-btn.email { 
  background: var(--color-email); 
}

/* Tooltip Labels (Desktop Only) */
.hh-social-btn .tooltip-label {
  position: absolute;
  right: 44px;
  background: var(--hh-text-dark);
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateX(6px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.hh-social-btn:hover .tooltip-label {
  opacity: 1;
  transform: translateX(0);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .hh-social-drawer {
    padding: 6px 5px;
    gap: 6px;
    border-radius: 12px 0 0 12px;
  }
  
  .hh-social-btn {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .hh-social-btn .tooltip-label {
    display: none;
  }
}
    /* Mobile Fine-Tuning */
    @media (max-width: 768px) {
      .hh-social-btn .tooltip-label {
        display: none; /* Hide hover tooltips on touch devices */
      }
      .hh-social-btn {
        width: 24px;
        height: 24px;
        font-size: 14px;
      }
    }
    .intl-listing-section {
      margin-top: 11vh;
        background-color: var(--bg-light);
        padding: 50px 20px;
        font-family: system-ui, -apple-system, sans-serif;
    }

    .intl-listing-container {
        max-width: 1100px;
        margin: 0 auto;
    }

    .intl-header {
        text-align: center;
        margin-bottom: 35px;
    }

    .intl-badge {
        display: inline-block;
        background-color: var(--yellow-badge);
        color: var(--text-dark);
        font-weight: 700;
        font-size: 0.85rem;
        padding: 4px 14px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 10px;
    }

    .intl-title {
        color: var(--text-dark);
        font-size: 2rem;
        font-weight: 800;
        margin: 0 0 8px 0;
    }

    .intl-subtitle {
        color: #64748b;
        font-size: 0.95rem;
        margin: 0;
    }

    /* Listing Cards Grid */
    .intl-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 16px;
    }

    .intl-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 16px 20px;
        text-decoration: none;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
        position: relative;
        overflow: hidden;
    }

    /* Left accent border on hover */
    .intl-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: var(--purple);
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .intl-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(118, 75, 203, 0.15);
        border-color: rgba(118, 75, 203, 0.3);
        color: var(--purple-dark);
    }

    .intl-card:hover::before {
        opacity: 1;
    }

    .intl-dest-name {
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .intl-dest-name span {
        color: var(--orange-tag);
        font-size: 1.1rem;
    }

    .intl-arrow {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: #f1f5f9;
        color: var(--text-dark);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        font-weight: bold;
        transition: all 0.25s ease;
    }

    .intl-card:hover .intl-arrow {
        background-color: var(--purple);
        color: var(--text-light);
        transform: translateX(3px);
    }

    @media (max-width: 576px) {
        .intl-title {
            font-size: 1.5rem;
        }
        .intl-grid {
            grid-template-columns: 1fr;
        }
    }
  

    .intl-listing-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .intl-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .intl-badge {
        display: inline-block;
        background-color: var(--yellow-badge);
        color: var(--text-dark);
        font-weight: 700;
        font-size: 0.85rem;
        padding: 4px 16px;
        border-radius: 20px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
    }

    .intl-title {
        color: var(--text-dark);
        font-size: 2.2rem;
        font-weight: 800;
        margin: 0 0 10px 0;
    }

    .intl-subtitle {
        color: #64748b;
        font-size: 1rem;
        margin: 0;
    }

    /* Destination Image Grid */
    .intl-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
    }

    .intl-card {
        position: relative;
        height: 200px;
        border-radius: 16px;
        overflow: hidden;
        text-decoration: none;
        display: flex;
        align-items: flex-end;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    /* Background Image & Overlay */
    .intl-card-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .intl-card-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(30, 41, 59, 0.85) 100%);
        transition: background 0.35s ease;
    }

    /* Card Content */
    .intl-card-content {
        position: relative;
        z-index: 2;
        width: 100%;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--text-light);
    }

    .intl-dest-name {
        font-size: 1.15rem;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .intl-arrow {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.25);
        backdrop-filter: blur(4px);
        color: var(--text-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: bold;
        transition: all 0.3s ease;
    }

    /* Hover Effects */
    .intl-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 25px rgba(118, 75, 203, 0.25);
    }

    .intl-card:hover .intl-card-bg {
        transform: scale(1.08);
    }

    .intl-card:hover .intl-card-overlay {
        background: linear-gradient(180deg, rgba(118, 75, 203, 0.2) 0%, rgba(101, 59, 180, 0.9) 100%);
    }

    .intl-card:hover .intl-arrow {
        background-color: var(--yellow-badge);
        color: var(--text-dark);
        transform: translateX(4px);
    }

    @media (max-width: 576px) {
        .intl-title {
            font-size: 1.6rem;
        }
        .intl-grid {
            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        }
    }
    /* ==========================================================================
   Holiday Hut - Compact & High-Legibility Footer Style
   ========================================================================== */

.holiday-hut-footer {
  width: 100%;
  background-color: #FAF8F5; /* Warm off-white base */
  padding-top: 32px;
  position: relative;
  box-sizing: border-box;
}

.hh-footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Single Horizontal Grid Layout */
.hh-footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.2fr 1fr 1.2fr;
  gap: 32px;
  align-items: start;
}

/* Brand Column */
.hh-logo-text {
  font-size: 24px;
  font-weight: 700;
  color: #6E44FF; /* Vibrant purple accent */
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.hh-brand-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #333333; /* High-contrast readable gray */
  margin: 0;
  max-width: 260px;
}

/* Titles */
.hh-col-title {
  font-size: 14px;
  font-weight: 700;
  color: #1A1A1A; /* Dark high-contrast heading color */
  margin: 0 0 12px 0;
}

/* Lists and Links */
.hh-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hh-footer-links li {
  margin-bottom: 6px; /* Tight compact spacing */
}

.hh-footer-links a {
  color: #4A4A4A; /* High readability link color */
  text-decoration: none;
  font-size: 13px;
  transition: color 0.15s ease;
}

.hh-footer-links a:hover {
  color: #6E44FF;
}

/* Contact Column */
.hh-contact-info p {
  margin: 0 0 6px 0;
  font-size: 13px;
}

.hh-contact-info a {
  color: #4A4A4A;
  text-decoration: none;
  transition: color 0.15s ease;
}

.hh-contact-info a:hover {
  color: #6E44FF;
}

/* Circular Social Icons */
.hh-social-links {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.hh-social-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #6E44FF;
  color: #6E44FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hh-social-icon:hover {
  background-color: #6E44FF;
  color: #FFFFFF;
}

/* Copyright Row */
.hh-footer-copyright {
  text-align: center;
  border-top: 1px dotted #D1D1D1;
  margin-top: 24px;
  padding-top: 14px;
  padding-bottom: 10px;
}

.hh-footer-copyright p {
  font-size: 12px;
  color: #666666;
  margin: 0;
}

/* Reduced Height Decorative Banner */
.hh-skyline-banner {
  width: 100%;
  height: 50px;
  overflow: hidden;
  line-height: 0;
}

.hh-skyline-banner svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Responsive Scaling */
@media (max-width: 992px) {
  .hh-footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .hh-footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hh-brand-desc {
    max-width: 100%;
  }
}

.category-navmenu .hh-mega-menu ,.hh-dropdown-menu {
   transition: all .3s ease-in-out;
    scale: 1.09;
}