/* =================================================================



   INSIGHT VACATIONS — style-home.css



   Fixes: font weight (Titillium Web, normal), card image gap,



          redesigned About Us + new "Where We Reach" section



   ================================================================= */







@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600;1,700&display=swap");







/* ================================================================



   1. CSS VARIABLES



   ================================================================ */



:root {



  --blue-pale: #eef4fb;



  --blue-light: #d0e6f7;



  --blue-mid: #6fa8d8;



  --blue: #2d7dc4;



  --blue-deep: #1a5a96;



  --navy: #0f2d4a;







  --skin-pale: #fdf5ee;



  --skin-light: #f0dcc4;



  --skin-warm: #c9955c;



  --skin-deep: #9e6d38;







  --white: #ffffff;



  --off-white: #faf8f5;



  --text-main: #0f2d4a;



  --text-body: #3a5068;



  --text-muted: #7a92a8;



  --border: rgba(42, 90, 140, 0.11);



  --border-md: rgba(42, 90, 140, 0.2);







  --font: 'Titillium Web', sans-serif;







  --section-gap: 28px;



  --radius: 8px;



  --radius-lg: 14px;



  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);



  --transition: 0.4s var(--ease);



}







/* ================================================================



   2. RESET & BASE



   ================================================================ */



*,



*::before,



*::after {



  box-sizing: border-box;



  margin: 0;



  padding: 0;



}



html {



  scroll-behavior: smooth;



}







body {



  font-family: var(--font);



  font-size: 15px;



  font-weight: 400;



  background: var(--white);



  color: var(--text-main);



  overflow-x: clip;



  -webkit-font-smoothing: antialiased;



}







a {



  text-decoration: none;



  color: inherit;



}







/* ── IMAGE GAP FIX ── */



/* Images inside cards/wrappers must be block + line-height:0 on parent */



img {



  display: block;



  width: 100%;



  height: auto; /* FIX */



  object-fit: cover;



}







/* Any wrapper that holds an img as sole child */



.tour-card,



.dep-card,



.offer-card,



.dest-card,



.pkgn-card,



.tad-img-wrap,



.theme-card,



.about-img-main,



.about-img-accent,



.hero-slide {



  font-size: 0;



  line-height: 0;



}







/* Restore font-size inside info overlays */



.tour-card-overlay,



.dep-card-info,



.offer-card-info,



.dest-card-info,



.pkgn-info,



.theme-card-content {



  font-size: 15px;



  line-height: 1.5;



}







ul {



  list-style: none;



}



section {



  width: 100%;



  position: relative;



}







/* ================================================================



   3. TYPOGRAPHY — Titillium Web, NOT bold



   ================================================================ */







/* Global font reset — everything uses Titillium Web */



body {



  font-family: var(--font);



}







/* Headings — semi-bold (600) max, never 700/800 */



h1,



h2,



h3,



h4,



.section-title,



.hero-title {



  font-weight: 600;



  letter-spacing: -0.01em;



  line-height: 1.2;



}







/* Body and supporting text — regular */



p,



span,



li,



a,



label,



input,



button,



.hero-sub,



.about-desc,



.testi-text,



.dep-card-date,



.tour-card-meta,



.pkgn-meta,



.dest-card-count,



.testi-loc,



.stat-label,



.theme-card-desc,



.tad-desc,



.visa-strip-text p {



  font-weight: 400;



}







/* Small labels — medium */



.section-label,



.view-all,



.btn-primary,



.btn-outline,



.visa-strip-btn,



.testi-name,



.pkgn-category,



.tad-visa-badge,



.offer-badge,



.tour-card-label,



.dep-card-tag,



.dest-card-link,



.pkgn-price strong,



.stat-num,



.about-badge-num,



.visa-strip-text h3 {



  font-weight: 600;



}







/* ── SECTION LABELS ── */



.section-label {



  font-size: 0.82rem;



  letter-spacing: 0.26em;



  text-transform: uppercase;



  color: var(--blue);



  margin-bottom: 10px;



  display: block;



}







.section-title {



  font-size: clamp(1.8rem, 3.2vw, 2.7rem);



  color: var(--text-main);



}







.section-title.light {



  color: var(--text-main);



}







.section-divider {



  width: 44px;



  height: 2px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  border-radius: 2px;



  margin: 14px 0 26px;



}



.section-divider.center {



  margin: 14px auto 26px;



}







/* ================================================================



   4. BUTTONS



   ================================================================ */



.btn-primary {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: var(--blue);



  color: var(--white) !important;



  padding: 12px 28px;



  border-radius: var(--radius);



  font-weight: 600;



  font-size: 0.84rem;



  letter-spacing: 0.03em;



  box-shadow: 0 4px 18px rgba(45, 125, 196, 0.28);



  transition:



    background var(--transition),



    transform 0.2s,



    box-shadow 0.2s;



}



.btn-primary:hover {



  background: var(--blue-deep);



  transform: translateY(-2px);



  box-shadow: 0 8px 28px rgba(45, 125, 196, 0.4);



}







.btn-outline {



  border: 1.5px solid rgba(255, 255, 255, 0.6);



  color: var(--white);



  padding: 12px 28px;



  border-radius: var(--radius);



  font-weight: 400;



  font-size: 0.84rem;



  transition:



    border-color var(--transition),



    background var(--transition);



}



.btn-outline:hover {



  border-color: var(--white);



  background: rgba(255, 255, 255, 0.12);



}







/* ================================================================



   5. HERO BANNER



   ================================================================ */



#hero {



  width: 100%;



  height: 100vh;



  min-height: 580px;



  position: relative;



  overflow: hidden;



  z-index: 0;



}







.hero-slides {



  width: 100%;



  height: 100%;



  position: relative;



}







.hero-slide {



  position: absolute;



  inset: 0;



  opacity: 0;



  transition: opacity 1.2s ease;



  z-index: 0;



}



.hero-slide.active {



  opacity: 1;



  z-index: 1;



}



.hero-slide img,



.hero-slide video {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



}







.hero-overlay {
  display: none !important;
}







#hero::before {



  content: "";



  position: absolute;



  inset: 0;



  pointer-events: none;



  z-index: 3;



  background:



    radial-gradient(



      circle at 8% 88%,



      rgba(253, 245, 238, 0.08) 0%,



      transparent 38%



    ),



    radial-gradient(



      circle at 92% 12%,



      rgba(111, 168, 216, 0.07) 0%,



      transparent 32%



    );



}







.hero-content {



  position: absolute;



  z-index: 4;



  top: 43%;



  left: 50%;



  transform: translate(-50%, -50%);



  width: 94%;



  max-width: 1000px;



  margin: 0 auto;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  text-align: center;



  pointer-events: none;



  padding: 20px;



  animation: heroCenterFade 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;



}







.hero-logo,



.hero-crest-logo {



  width: 84px;



  height: 84px;



  object-fit: contain;



  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.9)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.7));



  margin-bottom: 16px;



  transition: transform 0.3s ease;



  pointer-events: auto;



  display: block;



}







.hero-logo:hover,



.hero-crest-logo:hover {



  transform: scale(1.05);



}







.hero-brand-title {
  font-family: 'Cinzel', 'Playfair Display', 'Titillium Web', serif;
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: clamp(0.08em, 0.2vw, 0.18em);
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: #ffffff;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #ffffff;
  filter: none;
  text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.85),
    0 3px 10px rgba(0, 0, 0, 0.7),
    0 6px 22px rgba(0, 0, 0, 0.5);
  text-align: center;
  display: inline-block;
  pointer-events: auto;
}







.hero-brand-title .hero-word {



  display: inline-block;



  white-space: nowrap;



}







.hero-brand-title .hero-legal {
  font-size: clamp(0.72rem, 0.44em, 1.35rem);
  font-weight: 600;
  letter-spacing: clamp(0.08em, 0.16vw, 0.16em);
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  vertical-align: 0.12em;
  margin-left: clamp(5px, 0.28em, 8px);
  text-shadow: 
      0 1px 2px rgba(0, 0, 0, 0.85),
      0 2px 8px rgba(0, 0, 0, 0.6);
}

@media (max-width: 576px) {
  .hero-brand-title .hero-legal {
    display: block !important;
    font-size: 0.48em !important;
    margin-top: 4px !important;
    margin-left: 0 !important;
    letter-spacing: 0.14em !important;
  }
}







.hero-tagline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
  padding: 0;
  pointer-events: auto;
}







.hero-tagline .tagline-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.45rem);
  letter-spacing: 0.16em;
  color: #ffd992;
  background: none;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: #ffd992;
  filter: none;
  text-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 4px 16px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}







.hero-tagline .tagline-flourish {
  display: inline-block;
  width: clamp(28px, 4.5vw, 56px);
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #ffd992);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}







.hero-tagline .tagline-flourish.right {
  background: linear-gradient(90deg, #ffd992, transparent);
}







.hero-glass-crest {



  display: contents;



  background: none;



  border: none;



  box-shadow: none;



  backdrop-filter: none;



  -webkit-backdrop-filter: none;



  padding: 0;



}



.hero-glass-crest::before {



  display: none;



}







@keyframes emblemFloat {



  0% {



    transform: translateY(0) scale(1);



    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 25px rgba(201, 149, 92, 0.35);



  }



  100% {



    transform: translateY(-4px) scale(1.03);



    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 35px rgba(201, 149, 92, 0.55);



  }



}







@keyframes ringRotate {



  from { transform: rotate(0deg); }



  to { transform: rotate(360deg); }



}







.hero-dots {



  position: absolute;



  bottom: 28px;



  left: 50%;



  transform: translateX(-50%);



  z-index: 5;



  display: flex;



  gap: 8px;



}



.hero-dot {



  width: 7px;



  height: 7px;



  border-radius: 50%;



  background: rgba(255, 255, 255, 0.34);



  cursor: pointer;



  transition:



    background 0.3s,



    transform 0.3s;



}



.hero-dot.active {



  background: var(--white);



  transform: scale(1.4);



}







.hero-scroll-hint {



  position: absolute;



  right: 5%;



  bottom: 80px;



  z-index: 5;



  display: flex;



  flex-direction: column;



  align-items: center;



  gap: 8px;



  color: rgba(255, 255, 255, 0.5);



  font-size: 0.58rem;



  letter-spacing: 0.18em;



  text-transform: uppercase;



  writing-mode: vertical-lr;



}



.scroll-line {



  width: 1px;



  height: 50px;



  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);



  animation: scrollPulse 2s ease-in-out infinite;



}



@keyframes scrollPulse {



  0%,



  100% {



    opacity: 0.4;



  }



  50% {



    opacity: 1;



  }



}







/* ================================================================



   6. SLIDER — shared



   ================================================================ */



.slider-wrapper {



  position: relative;



  overflow: hidden;



  width: 100%;



}



.slider-track {



  display: flex;



  gap: 18px;



  transition: transform 0.55s var(--ease);



}







.slider-btn {



  position: absolute;



  top: 50%;



  transform: translateY(-50%);



  width: 40px;



  height: 40px;



  background: var(--white);



  border: 1px solid var(--border-md);



  border-radius: 50%;



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 4px 18px rgba(15, 45, 74, 0.12);



  z-index: 10;



  color: var(--navy);



  font-size: 0.9rem;



  transition:



    background var(--transition),



    color var(--transition),



    transform 0.2s;



}



.slider-btn:hover {



  background: var(--blue);



  color: var(--white);



  border-color: var(--blue);



  transform: translateY(-50%) scale(1.08);



}



.slider-btn.prev {



  left: -20px;



}



.slider-btn.next {



  right: -20px;



}







/* ================================================================



   7. TRENDING TOURS



   ================================================================ */



#trending {



  padding: var(--section-gap) 6%;



  background: var(--white);



}







.trending-header {



  display: flex;



  justify-content: space-between;



  align-items: flex-end;



  margin-bottom: 38px;



}







.view-all {



  font-size: 0.78rem;



  color: var(--blue);



  letter-spacing: 0.05em;



  border-bottom: 1px solid var(--blue-mid);



  padding-bottom: 2px;



  transition:



    color 0.25s,



    border-color 0.25s;



}



.view-all:hover {



  color: var(--blue-deep);



  border-color: var(--blue-deep);



}







/* Tour cards */



.tour-card {



  flex: 0 0 calc(25% - 14px);



  height: 320px;



  border-radius: var(--radius-lg);



  overflow: hidden;



  position: relative;



  cursor: pointer;



  box-shadow: 0 4px 22px rgba(15, 45, 74, 0.09);



  transition:



    box-shadow var(--transition),



    transform var(--transition);



}



.tour-card:hover {



  box-shadow: 0 14px 42px rgba(15, 45, 74, 0.18);



  transform: translateY(-5px);



}



.tour-card > img {



  transition: transform 0.65s ease;



}



.tour-card:hover > img {



  transform: scale(1.08);



}







.tour-card-label {



  position: absolute;



  top: 14px;



  left: 14px;



  background: rgba(255, 255, 255, 0.95);



  color: var(--blue-deep);



  font-size: 0.68rem;



  font-weight: 600;



  letter-spacing: 0.06em;



  text-transform: uppercase;



  padding: 6px 14px;



  border-radius: 20px;



  z-index: 2;



  box-shadow: 0 2px 10px rgba(15, 45, 74, 0.15);



  border: 1.5px solid rgba(45, 125, 196, 0.15);



}







.tour-card-overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to top,



    rgba(10, 30, 60, 0.9) 0%,



    transparent 55%



  );



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  padding: 20px;



  opacity: 0;



  transform: translateY(14px);



  transition:



    opacity 0.38s ease,



    transform 0.38s ease;



  z-index: 1;



}



.tour-card:hover .tour-card-overlay {



  opacity: 1;



  transform: translateY(0);



}







.tour-card-title {



  font-size: 1.1rem;



  font-weight: 600;



  color: var(--white);



  line-height: 1.3;



}



.tour-card-meta {



  display: flex;



  gap: 12px;



  font-size: 0.72rem;



  color: rgba(255, 255, 255, 0.7);



  margin-top: 7px;



}



.tour-card-meta span {



  display: flex;



  align-items: center;



  gap: 5px;



}







/* ================================================================



   8. DESTINATIONS WE OPERATE



   ================================================================ */



#destinations {



  padding: var(--section-gap) 6%;



  background: #ffffff !important;



}







.dest-grid {



  display: grid;



  grid-template-columns: 2fr 1fr 1fr;



  grid-template-rows: 260px 260px;



  gap: 14px;



  margin-top: 38px;



}







.dest-card {



  position: relative;



  border-radius: var(--radius-lg);



  overflow: hidden;



  cursor: pointer;



}



.dest-card:first-child {



  grid-row: 1 / 3;



}



.dest-card > img {



  transition: transform 0.65s ease;



}



.dest-card:hover > img {



  transform: scale(1.07);



}







.dest-card-info {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to top,



    rgba(10, 30, 60, 0.88) 0%,



    rgba(10, 30, 60, 0.06) 55%



  );



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  padding: 22px;



  transition: background 0.4s;



  font-size: 15px;



  line-height: 1.5;



}



.dest-card:hover .dest-card-info {



  background: linear-gradient(



    to top,



    rgba(10, 30, 60, 0.96) 0%,



    rgba(10, 30, 60, 0.26) 62%



  );



}







.dest-card-name {



  font-size: 1.45rem;



  font-weight: 600;



  color: var(--white);



  margin-bottom: 4px;



}



.dest-card:not(:first-child) .dest-card-name {



  font-size: 1.1rem;



}







.dest-card-count {



  font-size: 0.68rem;



  color: var(--skin-light);



  letter-spacing: 0.08em;



  margin-bottom: 10px;



}







.dest-card-link {



  display: inline-flex;



  align-items: center;



  gap: 5px;



  font-size: 0.74rem;



  color: var(--skin-light);



  font-weight: 600;



  opacity: 0;



  transform: translateY(9px);



  transition:



    opacity 0.35s,



    transform 0.35s;



}



.dest-card:hover .dest-card-link {



  opacity: 1;



  transform: translateY(0);



}







/* ================================================================



   9. GROUP DEPARTURES



   ================================================================ */



#group-departures {



  padding: var(--section-gap) 6%;



  background: var(--white);



}







.dep-card {



  flex: 0 0 calc(33.333% - 13px);



  height: 280px;



  border-radius: var(--radius-lg);



  overflow: hidden;



  position: relative;



  cursor: pointer;



  box-shadow: 0 4px 18px rgba(15, 45, 74, 0.09);



  transition:



    box-shadow var(--transition),



    transform var(--transition);



}



.dep-card:hover {



  box-shadow: 0 14px 40px rgba(15, 45, 74, 0.18);



  transform: translateY(-5px);



}



.dep-card > img {



  transition: transform 0.65s ease;



}



.dep-card:hover > img {



  transform: scale(1.07);



}







.dep-card-tag {



  position: absolute;



  top: 16px;



  right: 16px;



  background: rgba(255, 255, 255, 0.95);



  color: var(--blue-deep);



  font-size: 0.7rem;



  font-weight: 600;



  padding: 6px 14px;



  border-radius: 20px;



  letter-spacing: 0.06em;



  text-transform: uppercase;



  z-index: 2;



  border: 1.5px solid rgba(45, 125, 196, 0.18);



  box-shadow: 0 2px 10px rgba(15, 45, 74, 0.15);



}







.dep-card-info {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to top,



    rgba(10, 30, 60, 0.9) 0%,



    transparent 55%



  );



  padding: 20px;



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  opacity: 0;



  transform: translateY(14px);



  transition:



    transform 0.38s,



    opacity 0.38s;



  font-size: 15px;



  line-height: 1.5;



}



.dep-card:hover .dep-card-info {



  transform: translateY(0);



  opacity: 1;



}







.dep-card-title {



  font-size: 1.05rem;



  font-weight: 600;



  color: var(--white);



}



.dep-card-date {



  font-size: 0.72rem;



  color: var(--skin-light);



  margin-top: 5px;



  display: flex;



  align-items: center;



  gap: 5px;



}







/* ================================================================



   10. PACKAGES BY TRAVEL PARTNERS



   ================================================================ */



#packages {



  padding: var(--section-gap) 6%;



  background: var(--skin-pale);



}







#packages .section-title {



  color: var(--text-main) !important;



}



#packages [style*="color:rgba(255,255,255"] {



  color: var(--text-body) !important;



}



#packages > div > p {



  color: var(--text-body) !important;



}







.pkgn-row {



  display: grid;



  gap: 14px;



  margin-bottom: 14px;



}



.pkgn-row-3 {



  grid-template-columns: repeat(3, 1fr);



}



.pkgn-row-2 {



  grid-template-columns: 3fr 2fr;



}







.pkgn-card {



  position: relative;



  border-radius: var(--radius-lg);



  overflow: hidden;



  cursor: pointer;



  box-shadow: 0 6px 26px rgba(15, 45, 74, 0.1);



  transition:



    box-shadow var(--transition),



    transform var(--transition);



}



.pkgn-card:hover {



  box-shadow: 0 18px 50px rgba(15, 45, 74, 0.2);



  transform: translateY(-5px);



}







.pkgn-card-tall {



  height: 360px;



}



.pkgn-card-wide {



  height: 280px;



}



.pkgn-card-narrow {



  height: 280px;



}







.pkgn-card > img {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.65s ease;



}



.pkgn-card:hover > img {



  transform: scale(1.07);



}







.pkgn-card::after {



  content: "";



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to top,



    rgba(8, 24, 50, 0.94) 0%,



    rgba(8, 24, 50, 0.4) 46%,



    rgba(8, 24, 50, 0.05) 100%



  );



  transition: background 0.4s;



  z-index: 1;



}



.pkgn-card:hover::after {



  background: linear-gradient(



    to top,



    rgba(8, 24, 50, 0.98) 0%,



    rgba(8, 24, 50, 0.55) 55%,



    rgba(8, 24, 50, 0.1) 100%



  );



}







.pkgn-badge {



  position: absolute;



  top: 16px;



  left: 16px;



  z-index: 2;



  font-size: 0.68rem;



  font-weight: 600;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  padding: 7px 16px;



  border-radius: 20px;



  background: rgba(255, 255, 255, 0.95);



  color: var(--blue-deep);



  box-shadow: 0 2px 10px rgba(15, 45, 74, 0.15);



  border: 1.5px solid rgba(45, 125, 196, 0.15);



}



.pkgn-badge-luxury {



  background: rgba(253, 245, 238, 0.97);



  color: #7a4010;



  border-color: rgba(201, 149, 92, 0.25);



}



.pkgn-badge-faith {



  background: rgba(238, 244, 251, 0.97);



  color: var(--blue-deep);



  border-color: rgba(45, 125, 196, 0.22);



}



.pkgn-badge-corp {



  background: rgba(240, 245, 250, 0.97);



  color: #1a3f60;



  border-color: rgba(45, 125, 196, 0.18);



}



.pkgn-badge-adv {



  background: rgba(238, 247, 241, 0.97);



  color: #1a5a2e;



  border-color: rgba(45, 150, 80, 0.2);



}



.pkgn-badge-luxury {



  background: #fdf5ee;



  color: #7a4010;



}



.pkgn-badge-faith {



  background: #eef4fb;



  color: #1a5a96;



}



.pkgn-badge-corp {



  background: #f0f5fa;



  color: #1a3f60;



}



.pkgn-badge-adv {



  background: #eef7f1;



  color: #1a5a2e;



}







.pkgn-info {



  position: absolute;



  bottom: 0;



  left: 0;



  right: 0;



  z-index: 2;



  padding: 22px;



  transform: translateY(4px);



  transition: transform 0.35s ease;



  font-size: 15px;



  line-height: 1.5;



}



.pkgn-card:hover .pkgn-info {



  transform: translateY(0);



}







.pkgn-category {



  font-size: 0.62rem;



  font-weight: 600;



  letter-spacing: 0.18em;



  text-transform: uppercase;



  color: var(--skin-light);



  margin-bottom: 6px;



}







.pkgn-title {



  font-size: 1.2rem;



  font-weight: 600;



  color: var(--white);



  line-height: 1.28;



  margin-bottom: 8px;



}



.pkgn-card-wide .pkgn-title {



  font-size: 1.45rem;



}







.pkgn-meta {



  display: flex;



  gap: 14px;



  font-size: 0.7rem;



  color: rgba(255, 255, 255, 0.52);



  margin-bottom: 14px;



  flex-wrap: wrap;



}



.pkgn-meta span {



  display: flex;



  align-items: center;



  gap: 5px;



}







.pkgn-footer {



  display: flex;



  align-items: center;



  justify-content: space-between;



  border-top: 1px solid rgba(255, 255, 255, 0.1);



  padding-top: 12px;



}







.pkgn-price {



  font-size: 0.8rem;



  color: rgba(255, 255, 255, 0.56);



}



.pkgn-price strong {



  font-size: 1.2rem;



  font-weight: 600;



  color: var(--skin-light);



  margin-right: 2px;



}



.pkgn-price span {



  font-size: 0.68rem;



  color: rgba(255, 255, 255, 0.36);



}







.pkgn-arrow {



  width: 34px;



  height: 34px;



  border-radius: 50%;



  border: 1.5px solid rgba(240, 220, 196, 0.36);



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--skin-light);



  font-size: 0.82rem;



  flex-shrink: 0;



  opacity: 0;



  transform: scale(0.8);



  transition:



    background 0.25s,



    border-color 0.25s,



    transform 0.25s,



    opacity 0.25s;



}



.pkgn-card:hover .pkgn-arrow {



  opacity: 1;



  transform: scale(1);



}



.pkgn-arrow:hover {



  background: var(--skin-warm);



  color: var(--white);



  border-color: var(--skin-warm);



}







/* ================================================================



   11. EXCLUSIVE OFFERS



   ================================================================ */



#exclusive-offers {



  padding: var(--section-gap) 6%;



  background: var(--white);



}







.offer-card {



  flex: 0 0 calc(25% - 14px);



  height: 280px;



  border-radius: var(--radius-lg);



  overflow: hidden;



  position: relative;



  cursor: pointer;



  box-shadow: 0 4px 18px rgba(15, 45, 74, 0.09);



  transition:



    box-shadow var(--transition),



    transform var(--transition);



}



.offer-card:hover {



  box-shadow: 0 14px 42px rgba(15, 45, 74, 0.18);



  transform: translateY(-5px);



}



.offer-card > img {



  transition: transform 0.65s ease;



}



.offer-card:hover > img {



  transform: scale(1.08);



}







.offer-badge {



  position: absolute;



  top: 16px;



  left: 16px;



  background: var(--blue);



  color: var(--white);



  font-size: 0.68rem;



  font-weight: 600;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  padding: 7px 16px;



  border-radius: 20px;



  z-index: 2;



  box-shadow: 0 3px 12px rgba(45, 125, 196, 0.4);



  clip-path: none;



}







.offer-card-info {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to top,



    rgba(10, 30, 60, 0.9) 0%,



    transparent 52%



  );



  padding: 20px;



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  opacity: 1;



  transform: translateY(0);



  transition: transform 0.38s ease;



  font-size: 15px;



  line-height: 1.5;



}



.offer-card:hover .offer-card-info {



  transform: translateY(-6px);



}







.offer-card-title {



  font-size: 1.05rem;



  font-weight: 600;



  color: var(--white);



}



.offer-card-discount {



  font-size: 1.05rem;



  font-weight: 600;



  color: var(--skin-light);



  margin-top: 5px;



}







/* ================================================================



   12. THEME PACKAGES



   ================================================================ */



#theme-packages {



  padding: var(--section-gap) 6%;



  background: var(--blue-pale);



  text-align: center;



}



#theme-packages .section-title {



  color: var(--text-main) !important;



}



#theme-packages [style*="color:rgba(255,255,255"] {



  color: var(--text-body) !important;



}



#theme-packages > div > p {



  color: var(--text-body) !important;



}







.theme-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 20px;



  margin-top: 44px;



}







.theme-card {



  background: var(--white);



  border-radius: var(--radius-lg);



  overflow: hidden;



  position: relative;



  height: 200px;



  cursor: pointer;



  border: 1px solid var(--border);



  box-shadow: 0 4px 18px rgba(15, 45, 74, 0.06);



  transition:



    transform 0.35s ease,



    box-shadow 0.35s ease,



    border-color 0.35s;



}



.theme-card:hover {



  transform: translateY(-7px);



  box-shadow: 0 22px 54px rgba(15, 45, 74, 0.14);



  border-color: var(--blue-mid);



}



.theme-card > img {



  position: absolute;



  inset: 0;



  opacity: 0.16;



  transition: opacity 0.4s;



}



.theme-card:hover > img {



  opacity: 0.28;



}







.theme-card-content {



  position: relative;



  z-index: 1;



  height: 100%;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  padding: 24px;



}







.theme-icon {



  font-size: 2rem;



  margin-bottom: 12px;



}



.theme-card-name {



  font-size: 1.2rem;



  font-weight: 600;



  color: var(--text-main);



  margin-bottom: 7px;



}



.theme-card-desc {



  font-size: 0.76rem;



  color: white;



  line-height: 1.58;



}







/* ================================================================



   13. ABOUT US — REDESIGNED (reference image style)



   ================================================================ */



#about {



  padding: var(--section-gap) 6%;



  background: var(--white);



  overflow: hidden;



}







/* World-map background watermark */



#about::before {



  content: "";



  position: absolute;



  inset: 0;



  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 600'%3E%3Cellipse cx='600' cy='300' rx='580' ry='280' fill='none' stroke='%232d7dc4' stroke-width='0.5' opacity='0.08'/%3E%3Cellipse cx='600' cy='300' rx='440' ry='210' fill='none' stroke='%232d7dc4' stroke-width='0.5' opacity='0.06'/%3E%3Cellipse cx='600' cy='300' rx='290' ry='140' fill='none' stroke='%232d7dc4' stroke-width='0.5' opacity='0.05'/%3E%3Ccircle cx='600' cy='300' r='4' fill='%232d7dc4' opacity='0.1'/%3E%3C/svg%3E");



  background-repeat: no-repeat;



  background-position: center;



  background-size: 90%;



  pointer-events: none;



  z-index: 0;



}







.about-inner {



  position: relative;



  z-index: 1;



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 80px;



  align-items: center;



}







/* LEFT — circular image cluster */



.about-media {



  position: relative;



  display: flex;



  align-items: center;



  justify-content: center;



}







.about-circle-wrap {



  position: relative;



  width: 440px;



  height: 440px;



  flex-shrink: 0;



}







/* Rotating dashed ring */



.about-circle-wrap::before {



  content: "";



  position: absolute;



  inset: -16px;



  border-radius: 50%;



  border: 1.5px dashed rgba(45, 125, 196, 0.22);



  animation: spinRing 28s linear infinite;



}



.about-circle-wrap::after {



  content: "";



  position: absolute;



  inset: -40px;



  border-radius: 50%;



  border: 1px dashed rgba(45, 125, 196, 0.1);



  animation: spinRing 42s linear infinite reverse;



}



@keyframes spinRing {



  from {



    transform: rotate(0deg);



  }



  to {



    transform: rotate(360deg);



  }



}







/* Main circular photo */



.about-img-main {



  position: absolute;



  inset: 0;



  border-radius: 50%;



  overflow: hidden;



  box-shadow: 0 22px 64px rgba(15, 45, 74, 0.18);



  border: 6px solid var(--white);



}



.about-img-main img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  border-radius: 50%;



}







/* Floating tag bubbles */



.about-tag {



  position: absolute;



  background: var(--white);



  border-radius: 12px;



  padding: 10px 16px;



  box-shadow: 0 8px 28px rgba(15, 45, 74, 0.13);



  display: flex;



  align-items: center;



  gap: 10px;



  white-space: nowrap;



  border: 1px solid var(--border);



  animation: tagFloat 4s ease-in-out infinite;



  z-index: 10;



}



.about-tag:nth-child(2) {



  top: 10%;



  left: -30px;



  animation-delay: 0s;



}



.about-tag:nth-child(3) {



  top: 10%;



  right: -30px;



  animation-delay: 1s;



}



.about-tag:nth-child(4) {



  bottom: 14%;



  left: -30px;



  animation-delay: 0.5s;



}



.about-tag:nth-child(5) {



  bottom: 14%;



  right: -30px;



  animation-delay: 1.5s;



}







@keyframes tagFloat {



  0%,



  100% {



    transform: translateY(0);



  }



  50% {



    transform: translateY(-6px);



  }



}







.about-tag-icon {



  width: 28px;



  height: 28px;



  border-radius: 50%;



  background: var(--blue-pale);



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--blue);



  font-size: 0.8rem;



  flex-shrink: 0;



}



.about-tag-label {



  font-size: 0.72rem;



  font-weight: 600;



  color: var(--text-main);



}



.about-tag-sub {



  font-size: 0.6rem;



  color: var(--text-muted);



  display: block;



}







/* Play button overlay */



.about-play-btn {



  position: absolute;



  bottom: 50%;



  left: 50%;



  transform: translate(-50%, 50%);



  z-index: 20;



  width: 56px;



  height: 56px;



  border-radius: 50%;



  background: var(--skin-warm);



  border: none;



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--white);



  font-size: 1.1rem;



  box-shadow: 0 8px 28px rgba(201, 149, 92, 0.5);



  transition:



    transform 0.25s,



    box-shadow 0.25s;



}



.about-play-btn:hover {



  transform: translate(-50%, 50%) scale(1.08);



  box-shadow: 0 12px 36px rgba(201, 149, 92, 0.6);



}







/* RIGHT — text */



.about-text {



  position: relative;



  z-index: 1;



}







.about-quote {



  font-size: 1.1rem;



  font-style: italic;



  color: var(--text-body);



  line-height: 1.72;



  border-left: 3px solid var(--blue);



  padding-left: 20px;



  margin: 22px 0 26px;



}







.about-desc {



  font-size: 0.9rem;



  color: var(--text-body);



  line-height: 1.88;



  margin-bottom: 28px;



}







/* Stats row */



.about-stats {



  display: flex;



  gap: 0;



  background: var(--blue-pale);



  border-radius: var(--radius-lg);



  border: 1px solid var(--border);



  overflow: hidden;



  margin: 28px 0;



}



.stat-item {



  flex: 1;



  text-align: center;



  padding: 22px 16px;



  border-right: 1px solid var(--border);



}



.stat-item:last-child {



  border-right: none;



}







.stat-num {



  font-size: 2.1rem;



  color: var(--blue);



  font-weight: 600;



  line-height: 1;



}



.stat-label {



  font-size: 0.64rem;



  color: var(--text-muted);



  letter-spacing: 0.07em;



  text-transform: uppercase;



  margin-top: 5px;



}







/* Old selectors kept for compatibility */



.about-badge {



  position: absolute;



  bottom: 24px;



  right: 24px;



  width: 90px;



  height: 90px;



  background: var(--blue);



  border-radius: 50%;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  box-shadow: 0 8px 34px rgba(45, 125, 196, 0.44);



  z-index: 10;



}



.about-badge-num {



  font-size: 1.7rem;



  color: var(--white);



  font-weight: 600;



  line-height: 1;



}



.about-badge-text {



  font-size: 0.5rem;



  font-weight: 600;



  color: rgba(255, 255, 255, 0.8);



  text-transform: uppercase;



  letter-spacing: 0.09em;



  text-align: center;



  padding: 0 6px;



  margin-top: 3px;



}



/* Old image layout fallback */



.about-img-accent {



  position: absolute;



  bottom: 0;



  right: 0;



  width: 55%;



  height: 50%;



  border-radius: var(--radius-lg);



  overflow: hidden;



  border: 6px solid var(--white);



  box-shadow: 0 12px 44px rgba(15, 45, 74, 0.12);



}







/* ================================================================



   14. WHERE WE REACH — new section



   ================================================================ */



#where-we-reach {



  padding: var(--section-gap) 6%;



  background: var(--white); /* changed from var(--navy) */



  position: relative;



  overflow: hidden;



}







#where-we-reach > * {



  position: relative;



  z-index: 1;



}







#where-we-reach .section-label {



  color: var(--skin-light);



}



#where-we-reach .section-title {



  color: var(--white);



}



#where-we-reach .section-divider {



  background: linear-gradient(90deg, var(--skin-warm), var(--blue-mid));



}







.reach-header {



  display: flex;



  align-items: flex-end;



  justify-content: space-between;



  margin-bottom: 48px;



}







.reach-intro {



  font-size: 0.88rem;



  color: rgba(255, 255, 255, 0.55);



  max-width: 380px;



  line-height: 1.8;



  margin-top: 8px;



}







.reach-grid {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 16px;



}







.reach-card {



  background: rgba(255, 255, 255, 0.05);



  border: 1px solid rgba(255, 255, 255, 0.09);



  border-radius: var(--radius-lg);



  padding: 28px 22px;



  cursor: pointer;



  transition:



    background 0.3s,



    border-color 0.3s,



    transform 0.3s;



  position: relative;



  overflow: hidden;



}



.reach-card::before {



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  height: 3px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  opacity: 0;



  transition: opacity 0.3s;



}



.reach-card:hover {



  background: rgba(255, 255, 255, 0.09);



  border-color: rgba(255, 255, 255, 0.18);



  transform: translateY(-4px);



}



.reach-card:hover::before {



  opacity: 1;



}







.reach-flag {



  font-size: 2rem;



  margin-bottom: 14px;



}



.reach-region {



  font-size: 0.6rem;



  font-weight: 600;



  color: var(--skin-warm);



  letter-spacing: 0.2em;



  text-transform: uppercase;



  margin-bottom: 6px;



}



.reach-name {



  font-size: 1.1rem;



  font-weight: 600;



  color: var(--white);



  margin-bottom: 8px;



}



.reach-places {



  font-size: 0.72rem;



  color: rgba(255, 255, 255, 0.44);



  line-height: 1.7;



}







.reach-count-row {



  display: flex;



  gap: 0;



  margin-top: 48px;



  background: rgba(255, 255, 255, 0.04);



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: var(--radius-lg);



  overflow: hidden;



}



.reach-count-item {



  flex: 1;



  text-align: center;



  padding: 28px 16px;



  border-right: 1px solid rgba(255, 255, 255, 0.07);



}



.reach-count-item:last-child {



  border-right: none;



}



.reach-count-num {



  font-size: 2.4rem;



  font-weight: 600;



  color: var(--skin-light);



  line-height: 1;



}



.reach-count-label {



  font-size: 0.64rem;



  color: rgba(255, 255, 255, 0.4);



  letter-spacing: 0.1em;



  text-transform: uppercase;



  margin-top: 6px;



}







/* ================================================================



   15. TOUR ANY DAY



   ================================================================ */



#tours-any-day {



  padding: var(--section-gap) 6%;



  background: var(--skin-pale);



  text-align: center;



}



#tours-any-day .section-title {



  color: var(--text-main) !important;



}







.tad-subtitle {



  font-size: 0.88rem;



  color: var(--text-muted);



  max-width: 500px;



  line-height: 1.74;



  margin: 0 auto 44px;



}







.tad-grid {



  display: flex;



  flex-wrap: wrap;



  justify-content: center;



  gap: 14px;



  max-width: 1200px;



  margin: 0 auto;



}







.tad-country-card {



  flex: 0 0 calc(25% - 11px);



  border-radius: var(--radius-lg);



  overflow: hidden;



  border: 1px solid var(--border);



  cursor: pointer;



  background: var(--white);



  text-align: left;



  box-shadow: 0 4px 18px rgba(15, 45, 74, 0.06);



  transition:



    transform 0.3s ease,



    box-shadow 0.3s ease,



    border-color 0.3s;



}



.tad-country-card:hover {



  transform: translateY(-6px);



  box-shadow: 0 18px 44px rgba(15, 45, 74, 0.14);



  border-color: var(--blue-mid);



}







.tad-img-wrap {



  height: 150px;



  overflow: hidden;



}



.tad-img-wrap img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.55s ease;



}



.tad-country-card:hover .tad-img-wrap img {



  transform: scale(1.08);



}







.tad-country-info {



  padding: 16px 18px 18px;



  font-size: 15px;



  line-height: 1.5;



}







.tad-country-name {



  font-size: 1.05rem;



  font-weight: 600;



  color: var(--text-main);



  margin-bottom: 7px;



}







.tad-visa-badge {



  display: inline-block;



  font-size: 0.58rem;



  font-weight: 600;



  letter-spacing: 0.09em;



  text-transform: uppercase;



  padding: 3px 10px;



  border-radius: 4px;



  margin-bottom: 8px;



}



.tad-vfree {



  background: #e8f7ef;



  color: #1a6e3e;



  border: 1px solid rgba(45, 180, 100, 0.2);



}



.tad-voa {



  background: #fdf5ee;



  color: #8a5020;



  border: 1px solid rgba(201, 149, 92, 0.26);



}



.tad-schengen {



  background: var(--blue-pale);



  color: var(--blue-deep);



  border: 1px solid rgba(45, 125, 196, 0.2);



}



.tad-other {



  background: #f4f5f6;



  color: #5a6a7a;



  border: 1px solid rgba(90, 106, 122, 0.16);



}







.tad-desc {



  font-size: 0.7rem;



  color: var(--text-muted);



  line-height: 1.55;



  margin: 0;



}







/* ================================================================



   16. TESTIMONIALS



   ================================================================ */



#testimonials {



  padding: 70px 6%;



  background: var(--blue-pale);



  text-align: center;



}



#testimonials .section-title {



  color: var(--text-main);



}







.testi-carousel {



  position: relative;



  overflow: hidden;



  margin-top: 40px;



}



.testi-track {



  display: flex;



  transition: transform 0.5s ease;



}



.testi-item {



  flex: 0 0 50%;



  padding: 0 16px;



}







.testi-card {



  background: var(--white);



  border-radius: var(--radius-lg);



  padding: 30px 26px;



  text-align: left;



  box-shadow: 0 6px 26px rgba(15, 45, 74, 0.07);



  border-top: 3px solid var(--blue);



}







.testi-stars {



  color: var(--skin-warm);



  font-size: 1rem;



  letter-spacing: 2px;



  margin-bottom: 14px;



}







.testi-text {



  font-size: 0.88rem;



  color: var(--text-body);



  line-height: 1.84;



  font-style: italic;



}







.testi-author {



  margin-top: 20px;



  display: flex;



  align-items: center;



  gap: 12px;



}







.testi-avatar {



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: var(--blue);



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--white);



  font-size: 1.1rem;



  font-weight: 600;



  flex-shrink: 0;



}







.testi-name {



  font-weight: 600;



  color: var(--text-main);



  font-size: 0.88rem;



}



.testi-loc {



  font-size: 0.7rem;



  color: var(--text-muted);



}







.testi-nav {



  display: flex;



  justify-content: center;



  gap: 10px;



  margin-top: 28px;



}



.testi-nav-btn {



  width: 36px;



  height: 36px;



  border-radius: 50%;



  border: 1.5px solid var(--blue-mid);



  background: transparent;



  cursor: pointer;



  font-size: 0.88rem;



  color: var(--blue);



  transition: all 0.25s;



}



.testi-nav-btn:hover {



  background: var(--blue);



  color: var(--white);



  border-color: var(--blue);



}







/* ================================================================



   17. VISA STRIP



   ================================================================ */



#visa-strip {



  background: var(--blue);



  padding: 40px 6%;



  display: flex;



  align-items: center;



  justify-content: space-between;



  gap: 30px;



  flex-wrap: wrap;



  position: relative;



  overflow: hidden;



}



#visa-strip::before {



  content: "";



  position: absolute;



  top: 0;



  left: -120%;



  width: 55%;



  height: 100%;



  background: linear-gradient(



    120deg,



    transparent 0%,



    rgba(255, 255, 255, 0.06) 45%,



    rgba(255, 255, 255, 0.12) 50%,



    rgba(255, 255, 255, 0.06) 55%,



    transparent 100%



  );



  transform: skewX(-18deg);



  animation: stripShimmer 5s linear infinite;



  pointer-events: none;



}



@keyframes stripShimmer {



  from {



    left: -120%;



  }



  to {



    left: 130%;



  }



}



#visa-strip > * {



  position: relative;



  z-index: 1;



}







.visa-strip-text {



  color: var(--white);



}



.visa-strip-text h3 {



  font-size: 1.5rem;



  font-weight: 600;



}



.visa-strip-text p {



  color: rgba(255, 255, 255, 0.68);



  font-size: 0.84rem;



  margin-top: 4px;



}







.visa-strip-links {



  display: flex;



  gap: 14px;



  flex-wrap: wrap;



}



.visa-strip-btn {



  display: inline-flex;



  align-items: center;



  gap: 7px;



  padding: 11px 24px;



  border-radius: var(--radius);



  font-size: 0.82rem;



  font-weight: 600;



  cursor: pointer;



  transition: all 0.25s;



  text-decoration: none;



}



.visa-strip-btn.gold {



  background: var(--skin-pale);



  color: var(--blue-deep);



}



.visa-strip-btn.gold:hover {



  background: var(--white);



}



.visa-strip-btn.outline {



  border: 1.5px solid rgba(255, 255, 255, 0.5);



  color: var(--white);



}



.visa-strip-btn.outline:hover {



  border-color: var(--white);



  background: rgba(255, 255, 255, 0.1);



}







/* ================================================================



   18. SCROLL-REVEAL ANIMATIONS



   ================================================================ */



.reveal {



  opacity: 0;



  transform: translateY(32px);



  transition:



    opacity 0.7s ease,



    transform 0.7s ease;



}



.reveal.visible {



  opacity: 1;



  transform: translateY(0);



}







.reveal-left {



  opacity: 0;



  transform: translateX(-32px);



  transition:



    opacity 0.7s ease,



    transform 0.7s ease;



}



.reveal-left.visible {



  opacity: 1;



  transform: translateX(0);



}







.reveal-right {



  opacity: 0;



  transform: translateX(32px);



  transition:



    opacity 0.7s ease,



    transform 0.7s ease;



}



.reveal-right.visible {



  opacity: 1;



  transform: translateX(0);



}







[data-stagger] > *:nth-child(1) {



  transition-delay: 0.05s;



}



[data-stagger] > *:nth-child(2) {



  transition-delay: 0.11s;



}



[data-stagger] > *:nth-child(3) {



  transition-delay: 0.17s;



}



[data-stagger] > *:nth-child(4) {



  transition-delay: 0.23s;



}



[data-stagger] > *:nth-child(5) {



  transition-delay: 0.29s;



}



[data-stagger] > *:nth-child(6) {



  transition-delay: 0.35s;



}



[data-stagger] > *:nth-child(7) {



  transition-delay: 0.41s;



}



[data-stagger] > *:nth-child(8) {



  transition-delay: 0.47s;



}



[data-stagger] > *:nth-child(9) {



  transition-delay: 0.53s;



}







/* ================================================================



   19. AMBIENT SECTION EFFECTS



   ================================================================ */



#trending,



#group-departures,



#exclusive-offers,



#about {



  isolation: isolate;



}







#trending::before,



#group-departures::before,



#exclusive-offers::before {



  content: "";



  position: absolute;



  inset: 0;



  pointer-events: none;



  z-index: 0;



  background:



    radial-gradient(



      ellipse at 15% 25%,



      rgba(111, 168, 216, 0.07) 0%,



      transparent 55%



    ),



    radial-gradient(



      ellipse at 85% 75%,



      rgba(201, 149, 92, 0.05) 0%,



      transparent 50%



    );



}







#trending > *,



#group-departures > *,



#exclusive-offers > *,



#about .about-inner,



#destinations > *,



#theme-packages > *,



#testimonials > *,



#tours-any-day > *,



#packages > * {



  position: relative;



  z-index: 1;



}







/* ================================================================



   20. RESPONSIVE



   ================================================================ */



@media (max-width: 1100px) {



  .tour-card {



    flex: 0 0 calc(33.33% - 13px);



  }



  .offer-card {



    flex: 0 0 calc(33.33% - 13px);



  }



  .dep-card {



    flex: 0 0 calc(50% - 9px);



  }



  .pkgn-row-2 {



    grid-template-columns: 1fr 1fr;



  }



  .dest-grid {



    grid-template-columns: 1fr 1fr;



    grid-template-rows: repeat(5, 200px);



  }



  .dest-card:first-child {



    grid-row: 1 / 3;



  }



  .about-inner {



    grid-template-columns: 1fr;



    gap: 44px;



  }



  .about-circle-wrap {



    width: 340px;



    height: 340px;



  }



  .about-media {



    justify-content: flex-start;



  }



  .tad-country-card {



    flex: 0 0 calc(33.333% - 10px);



  }



  .reach-grid {



    grid-template-columns: repeat(2, 1fr);



  }



}







@media (max-width: 860px) {



  .pkgn-row-3 {



    grid-template-columns: 1fr 1fr;



  }



  .pkgn-card-tall {



    height: 300px;



  }



  .pkgn-row-3 .pkgn-card:last-child {



    grid-column: 1 / -1;



    height: 260px;



  }



  .pkgn-row-2 {



    grid-template-columns: 1fr;



  }



  .pkgn-card-wide,



  .pkgn-card-narrow {



    height: 260px;



  }



  .reach-grid {



    grid-template-columns: repeat(2, 1fr);



  }



}







@media (max-width: 768px) {



  :root {



    --section-gap: 56px;



  }



  .hero-scroll-hint {



    display: none;



  }



  .tour-card {



    flex: 0 0 calc(50% - 9px);



  }



  .dep-card {



    flex: 0 0 calc(50% - 9px);



  }



  .offer-card {



    flex: 0 0 calc(50% - 9px);



  }



  .tad-country-card {



    flex: 0 0 calc(50% - 7px);



  }



  .tad-img-wrap {



    height: 130px;



  }



  .dest-grid {



    grid-template-columns: 1fr;



    grid-template-rows: repeat(8, 180px);



  }



  .dest-card:first-child {



    grid-row: auto;



  }



  .theme-grid {



    grid-template-columns: 1fr 1fr;



  }



  .testi-item {



    flex: 0 0 100%;



  }



  .trending-header {



    flex-direction: column;



    align-items: flex-start;



    gap: 12px;



  }



  .about-circle-wrap {



    width: 280px;



    height: 280px;



  }



  .about-tag {



    display: none;



  }



  #visa-strip {



    flex-direction: column;



    align-items: flex-start;



  }



  .reach-grid {



    grid-template-columns: 1fr 1fr;



  }



  .reach-count-row {



    flex-wrap: wrap;



  }



  .reach-count-item {



    flex: 0 0 50%;



    border-bottom: 1px solid rgba(255, 255, 255, 0.07);



  }



  .reach-header {



    flex-direction: column;



    align-items: flex-start;



    gap: 12px;



  }



}







@media (max-width: 540px) {



  .pkgn-row-3 {



    grid-template-columns: 1fr;



  }



  .pkgn-row-3 .pkgn-card:last-child {



    grid-column: auto;



  }



  .pkgn-card-tall {



    height: 260px;



  }



  .reach-grid {



    grid-template-columns: 1fr;



  }



}







@media (max-width: 480px) {



  .tour-card {



    flex: 0 0 82%;



  }



  .dep-card {



    flex: 0 0 86%;



  }



  .offer-card {



    flex: 0 0 82%;



  }



  .tad-country-card {



    flex: 0 0 100%;



  }



  .theme-grid {



    grid-template-columns: 1fr;



  }



  .about-stats {



    flex-direction: column;



  }



  .stat-item {



    border-right: none !important;



    border-bottom: 1px solid var(--border);



  }



  .stat-item:last-child {



    border-bottom: none;



  }



  .hero-btns {



    flex-direction: column;



  }



  .hero-title {



    font-size: 2.1rem;



  }



  .about-circle-wrap {



    width: 240px;



    height: 240px;



  }



}







.dest-card > img,



.tour-card > img,



.dep-card > img,



.offer-card > img,



.pkgn-card > img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



}







@media (max-width: 768px) {



  #hero {



    height: 65vh;



    min-height: 400px;



  }



  .hero-content {



    top: 44%;



    left: 50%;



    bottom: auto;



    right: auto;



    transform: translate(-50%, -50%);



    width: 96%;



    padding: 10px;



  }



  .hero-logo,



  .hero-crest-logo {



    width: 64px;



    height: 64px;



    margin-bottom: 12px;



  }



  .hero-brand-title {



    font-size: clamp(1.8rem, 6.8vw, 2.8rem);



    letter-spacing: 0.12em;



    margin: 0;



  }



  .hero-scroll-hint {



    bottom: 16px;



    font-size: 0.55rem;



  }



  .hero-scroll-hint .scroll-line {



    height: 24px;



  }



}







@media (max-width: 480px) {



  #hero {



    height: 58vh;



    min-height: 350px;



  }



  .hero-logo,



  .hero-crest-logo {



    width: 52px;



    height: 52px;



    margin-bottom: 10px;



  }



  .hero-brand-title {



    font-size: clamp(1.75rem, 7.8vw, 2.3rem);



    letter-spacing: 0.12em;



    margin: 0;



  }



  .hero-brand-title {



    font-size: clamp(1.45rem, 6.4vw, 2rem);



    letter-spacing: 0.08em;



  }



}







@media (max-width: 480px) {



  #hero {



    height: 50vh;



    min-height: 340px;



  }



}



@media (hover: none) and (pointer: coarse) {



  .tour-card-overlay,



  .dep-card-info,



  .offer-card-info,



  .pkgn-info,



  .pkgn-arrow,



  .dest-card-link {



    opacity: 1 !important;



    transform: translateY(0) !important;



  }







  .tour-card > img,



  .dep-card > img,



  .offer-card > img,



  .pkgn-card > img,



  .dest-card > img {



    transform: none !important;



  }



}



.slider-wrapper {



  overflow-x: auto;



  -webkit-overflow-scrolling: touch;



  scroll-snap-type: x mandatory;



  scrollbar-width: none;



}



.slider-wrapper::-webkit-scrollbar {



  display: none;



}







.slider-track {



  scroll-snap-align: start;



}







.tour-card,



.dep-card,



.offer-card {



  scroll-snap-align: start;



  flex-shrink: 0;



}



@media (max-width: 480px) {



  .tour-card {



    flex: 0 0 100%;



  }



  .dep-card {



    flex: 0 0 100%;



  }



  .offer-card {



    flex: 0 0 100%;



  }



}







@media (max-width: 768px) and (min-width: 481px) {



  .tour-card {



    flex: 0 0 calc(100% - 18px);



  }



  .dep-card {



    flex: 0 0 calc(100% - 18px);



  }



  .offer-card {



    flex: 0 0 calc(100% - 18px);



  }



}







/* ================================================================



   INSIGHT VISA CONSULTANCY



   ================================================================ */



#visa-consultancy {



  padding: var(--section-gap) 6%;



  background: white !important;



  position: relative;



  overflow: hidden;



  padding-bottom: 0;



}



#visa-consultancy::before {



  display: none !important;



}



#visa-consultancy::after {



  content: "";



  position: absolute;



  top: -120px;



  right: -120px;



  width: 400px;



  height: 400px;



  border-radius: 50%;



  border: 1px solid rgba(201, 149, 92, 0.13);



  pointer-events: none;



  z-index: 0;



}



#visa-consultancy > * {



  position: relative;



  z-index: 1;



}







.vc-inner {



  position: relative;



  z-index: 1;



}







.vc-top {



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  text-align: center;



  margin-bottom: 56px;



  gap: 24px;



}



.vc-label {



  font-size: 0.82rem;



  letter-spacing: 0.26em;



  text-transform: uppercase;



  color: var(--blue);



  font-weight: 600;



  display: block;



  margin-bottom: 10px;



}



.vc-title {



  font-size: clamp(1.8rem, 3.2vw, 2.7rem);



  color: var(--text-main);



  font-weight: 600;



  line-height: 1.15;



}



.vc-title span {



  color: var(--blue);



}



.vc-divider {



  width: 44px;



  height: 2px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  border-radius: 2px;



  margin: 14px auto 20px;



}



.vc-subtitle {



  font-size: 0.88rem;



  color: var(--text-muted);



  max-width: 480px;



  line-height: 1.8;



  margin: 0 auto;



}



.vc-apply-btn {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  background: var(--skin-warm);



  color: var(--white);



  padding: 13px 30px;



  border-radius: var(--radius);



  font-weight: 600;



  font-size: 0.84rem;



  transition:



    background var(--transition),



    transform 0.2s;



  white-space: nowrap;



}



.vc-apply-btn:hover {



  background: var(--skin-deep);



  transform: translateY(-2px);



}







/* Cards grid */



.vc-cards {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 0;



  margin-bottom: 24px;



}



.vc-card {



  position: relative;



  background: transparent !important;



  border: none !important;



  box-shadow: none !important;



  border-radius: 0 !important;



  cursor: default;



  transition: transform 0.3s ease;



  display: flex;



}



.vc-card:hover {



  transform: translateY(-2px);



}



.vc-card-bg,



.vc-card-pattern,



.vc-card-ring {



  display: none !important;



}







.vc-card-content {



  position: relative;



  z-index: 2;



  padding: 20px 0;



  display: flex;



  flex-direction: column;



  min-height: auto;



  width: 100%;



}



.vc-card.evisa .vc-card-content {



  padding-right: 48px;



  border-right: 1px solid rgba(0, 0, 0, 0.08);



}



.vc-card.stamp .vc-card-content {



  padding-left: 48px;



}







.vc-card-icon-wrap {



  width: 48px;



  height: 48px;



  border-radius: 12px;



  display: flex;



  align-items: center;



  justify-content: center;



  margin-bottom: 16px;



  font-size: 1.25rem;



}



.vc-card.evisa .vc-card-icon-wrap {



  background: rgba(26, 90, 150, 0.08);



  color: #1a5a96;



  border: 1px solid rgba(26, 90, 150, 0.12);



}



.vc-card.stamp .vc-card-icon-wrap {



  background: rgba(158, 109, 56, 0.08);



  color: #9e6d38;



  border: 1px solid rgba(158, 109, 56, 0.12);



}







.vc-card-tag {



  display: inline-block;



  font-size: 0.58rem;



  font-weight: 600;



  letter-spacing: 0.16em;



  text-transform: uppercase;



  padding: 4px 12px;



  border-radius: 6px;



  margin-bottom: 12px;



  width: fit-content;



}



.vc-card.evisa .vc-card-tag {



  background: rgba(26, 90, 150, 0.06);



  color: #1a5a96;



  border: 1px solid rgba(26, 90, 150, 0.12);



}



.vc-card.stamp .vc-card-tag {



  background: rgba(158, 109, 56, 0.06);



  color: #9e6d38;



  border: 1px solid rgba(158, 109, 56, 0.12);



}







.vc-card-name {



  font-size: 1.7rem;



  font-weight: 700;



  color: #1e293b;



  line-height: 1.15;



  margin-bottom: 10px;



}



.vc-card-desc {



  font-size: 0.84rem;



  color: #475569;



  line-height: 1.65;



  margin-bottom: 20px;



  flex: 1;



}



.vc-features {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 8px 24px;



  margin-bottom: 24px;



}



.vc-feature-item {



  display: flex;



  align-items: center;



  gap: 8px;



  font-size: 0.78rem;



  color: #334155;



}



.vc-feature-dot {



  width: 6px;



  height: 6px;



  border-radius: 50%;



  flex-shrink: 0;



}



.vc-card.evisa .vc-feature-dot {



  background: #1a5a96;



}



.vc-card.stamp .vc-feature-dot {



  background: #9e6d38;



}







.vc-card-cta {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  padding: 11px 24px;



  border-radius: 8px;



  font-size: 0.82rem;



  font-weight: 600;



  transition: all 0.25s ease;



  width: fit-content;



  margin-top: auto;



}



.vc-card.evisa .vc-card-cta {



  border: 1.5px solid #1a5a96;



  color: #1a5a96;



  background: transparent;



}



.vc-card.evisa .vc-card-cta:hover {



  background: #1a5a96;



  color: var(--white);



  transform: translateY(-2px);



  box-shadow: 0 4px 12px rgba(26, 90, 150, 0.2);



}



.vc-card.stamp .vc-card-cta {



  border: 1.5px solid #9e6d38;



  color: #9e6d38;



  background: transparent;



}



.vc-card.stamp .vc-card-cta:hover {



  background: #9e6d38;



  color: var(--white);



  transform: translateY(-2px);



  box-shadow: 0 4px 12px rgba(158, 109, 56, 0.2);



}







/* Stats bar */



.vc-stats-bar {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  background: rgba(255, 255, 255, 0.04);



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: 14px;



  overflow: hidden;



}



.vc-stat {



  text-align: center;



  padding: 26px 16px;



  border-right: 1px solid rgba(45, 125, 196, 0.1);



}



.vc-stat:last-child {



  border-right: none;



}



.vc-stat-num {



  font-size: 1.9rem;



  font-weight: 600;



  color: var(--blue-deep);



  line-height: 1;



}



.vc-stat-label {



  font-size: 0.62rem;



  color: var(--text-muted);



  letter-spacing: 0.1em;



  text-transform: uppercase;



  margin-top: 5px;



}







/* Responsive */



@media (max-width: 768px) {



  .vc-cards {



    grid-template-columns: 1fr;



    gap: 0;



  }



  .vc-card-content {



    min-height: auto;



    padding: 24px 0;



  }



  .vc-card.evisa .vc-card-content {



    padding-right: 0;



    border-right: none;



    border-bottom: 1px solid rgba(0, 0, 0, 0.08);



    padding-bottom: 32px;



    margin-bottom: 12px;



  }



  .vc-card.stamp .vc-card-content {



    padding-left: 0;



    padding-top: 20px;



  }



  .vc-stats-bar {



    background: rgba(255, 255, 255, 0.7);



    border: 1px solid rgba(45, 125, 196, 0.12);



  }



  .vc-stat {



    border-bottom: 1px solid rgba(255, 255, 255, 0.07);



  }



  .vc-top {



    flex-direction: column;



    align-items: flex-start;



  }



}



@media (max-width: 480px) {



  .vc-stats-bar {



    grid-template-columns: 1fr 1fr;



  }



  .vc-features {



    grid-template-columns: 1fr;



    gap: 8px;



  }



}



#where-we-reach .section-label {



  color: var(--blue);



}



#where-we-reach .section-title {



  color: var(--text-main);



}



#where-we-reach .section-divider {



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



}







.reach-intro {



  color: var(--text-muted);



}



.reach-card {



  background: var(--blue-pale);



  border: 1px solid var(--border);



  border-radius: var(--radius-lg);



  padding: 28px 22px;



  cursor: pointer;



  transition:



    background 0.3s,



    border-color 0.3s,



    transform 0.3s;



  position: relative;



  overflow: hidden;



}



.reach-card:hover {



  background: var(--blue-light);



  border-color: var(--blue-mid);



  transform: translateY(-4px);



}



.reach-region {



  color: var(--blue);



}



.reach-name {



  color: var(--text-main);



}



.reach-places {



  color: var(--text-muted);



}



.reach-count-row {



  background: var(--blue-pale);



  border: 1px solid var(--border);



}



.reach-count-item {



  border-right: 1px solid var(--border);



}



.reach-count-num {



  color: var(--blue-deep);



}



.reach-count-label {



  color: var(--text-muted);



}







/* Remove old play button */



.about-play-btn {



  display: none;



}







/* Seal badge */



.about-seal {



  position: absolute;



  bottom: 14%;



  left: 50%;



  transform: translateX(-50%);



  z-index: 20;



  width: 100px;



  height: 100px;



  display: flex;



  align-items: center;



  justify-content: center;



}







.about-seal-ring {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  animation: spinRingSeal 18s linear infinite;



}



@keyframes spinRingSeal {



  from {



    transform: rotate(0deg);



  }



  to {



    transform: rotate(360deg);



  }



}







.about-seal-inner {



  width: 68px;



  height: 68px;



  border-radius: 50%;



  background: var(--navy);



  border: 2.5px solid var(--skin-warm);



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  box-shadow: 0 6px 24px rgba(15, 45, 74, 0.35);



  gap: 1px;



  z-index: 1;



}







.about-seal-inner i {



  font-size: 1.1rem;



  color: var(--skin-warm);



  line-height: 1;



}







.about-seal-text {



  font-size: 0.5rem;



  font-weight: 600;



  letter-spacing: 0.12em;



  text-transform: uppercase;



  color: rgba(255, 255, 255, 0.55);



  line-height: 1;



}







.about-seal-year {



  font-size: 0.95rem;



  font-weight: 600;



  color: var(--white);



  line-height: 1;



}







#partners-marquee {



  padding: 20px 0;



  background: transparent;



  overflow: hidden;



  position: relative;



  width: 100%;



  margin: 0;



}



.pm-track-wrap {



  position: relative;



  width: 100%;



  overflow: hidden;



  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);



  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);



}



.pm-track {



  display: flex;



  gap: 16px;



  width: max-content;



  animation: pmScroll 34s linear infinite;



  padding: 6px 0;



}



.pm-track:hover {



  animation-play-state: paused;



}



@keyframes pmScroll {



  0% {



    transform: translateX(0);



  }



  100% {



    transform: translateX(-50%);



  }



}



.pm-logo-card {



  flex-shrink: 0;



  width: 175px;



  height: 82px;



  background: transparent;



  border-radius: 12px;



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 0;



  border: none;



  transition: transform 0.3s ease;



  cursor: pointer;



  overflow: hidden;



}



.pm-logo-card:hover {



  background: transparent;



  transform: translateY(-3px);



}



/* The white card box that wraps each logo */



.pm-logo-card-inner {



  width: 100%;



  height: 100%;



  background: #ffffff;



  border-radius: 12px;



  border: 1px solid rgba(197, 160, 89, 0.35);



  box-shadow: 0 8px 20px rgba(4, 15, 28, 0.28);



  display: flex;



  align-items: center;



  justify-content: center;



  padding: 10px 16px;



  overflow: hidden;



  transition: border-color 0.3s ease, box-shadow 0.3s ease;



}



.pm-logo-card:hover .pm-logo-card-inner {



  border-color: #c5a059;



  box-shadow: 0 10px 26px rgba(197, 160, 89, 0.22);



}



.pm-logo-card-inner img {



  max-width: 84%;



  max-height: 72%;



  width: auto;



  height: auto;



  object-fit: contain;



  display: block;



  margin: auto;



  filter: none;



  transition: transform 0.3s ease;



}



.pm-logo-card:hover .pm-logo-card-inner img {



  transform: scale(1.08);



}







@media (max-width: 768px) {



  .pm-logo-card {



    width: 145px;



    height: 74px;



  }



  .pm-track {



    animation-duration: 24s;



    gap: 12px;



  }



}







@media (max-width: 480px) {



  .pm-logo-card {



    width: 125px;



    height: 66px;



  }



}







/* ================================================================



   MODERN SECTIONS OVERRIDE — paste at the END of style-home.css



   Covers: Tour Any Day, Theme Packages, Where We Reach,



           Trending Tours, Testimonials, Packages, About



   ================================================================ */







/* ── SHARED TOKENS ── */



:root {



  --glass: rgba(255, 255, 255, 0.72);



  --glass-border: rgba(45, 125, 196, 0.14);



  --mesh-1: #e8f4ff;



  --mesh-2: #f0f7ff;



  --mesh-3: #fdf9ff;



}







/* ================================================================



   1. TOUR ANY DAY — pill-strip layout with floating badges



   ================================================================ */



#tours-any-day {



  padding: var(--section-gap) 6%;



  background: linear-gradient(135deg, #eef6ff 0%, #f5f0ff 50%, #fffaf5 100%);



  position: relative;



  overflow: hidden;



}



#tours-any-day::before {



  content: "";



  position: absolute;



  width: 600px;



  height: 600px;



  border-radius: 50%;



  background: radial-gradient(



    circle,



    rgba(45, 125, 196, 0.07) 0%,



    transparent 70%



  );



  top: -200px;



  right: -100px;



  pointer-events: none;



}



#tours-any-day::after {



  content: "";



  position: absolute;



  width: 400px;



  height: 400px;



  border-radius: 50%;



  background: radial-gradient(



    circle,



    rgba(201, 149, 92, 0.06) 0%,



    transparent 70%



  );



  bottom: -100px;



  left: -80px;



  pointer-events: none;



}







.tad-grid {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 16px;



  max-width: 1200px;



  margin: 0 auto;



}







.tad-country-card {



  flex: unset;



  position: relative;



  border-radius: 20px;



  overflow: hidden;



  border: 1px solid rgba(255, 255, 255, 0.9);



  background: rgba(255, 255, 255, 0.85);



  backdrop-filter: blur(12px);



  box-shadow:



    0 4px 24px rgba(45, 125, 196, 0.08),



    0 1px 4px rgba(0, 0, 0, 0.04);



  transition:



    transform 0.35s cubic-bezier(0.22, 0.68, 0, 1.2),



    box-shadow 0.35s ease;



  cursor: pointer;



}



.tad-country-card:hover {



  transform: translateY(-8px) scale(1.01);



  box-shadow:



    0 20px 48px rgba(45, 125, 196, 0.16),



    0 4px 16px rgba(0, 0, 0, 0.07);



  border-color: rgba(45, 125, 196, 0.3);



}







.tad-img-wrap {



  height: 160px;



  overflow: hidden;



  position: relative;



  border-radius: 16px 16px 0 0;



}



.tad-img-wrap::after {



  content: "";



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to bottom,



    transparent 40%,



    rgba(10, 30, 60, 0.35) 100%



  );



}



.tad-img-wrap img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.6s ease;



}



.tad-country-card:hover .tad-img-wrap img {



  transform: scale(1.1);



}







.tad-country-info {



  padding: 14px 16px 18px;



  background: transparent;



}



.tad-country-name {



  font-size: 1.05rem;



  font-weight: 600;



  color: var(--text-main);



  margin-bottom: 6px;



  display: flex;



  align-items: center;



  gap: 6px;



}



.tad-visa-badge {



  font-size: 0.58rem;



  font-weight: 600;



  letter-spacing: 0.07em;



  text-transform: uppercase;



  padding: 3px 9px;



  border-radius: 20px;



  margin-bottom: 6px;



  display: inline-block;



}



.tad-desc {



  font-size: 0.7rem;



  color: var(--text-muted);



  margin: 0;



  line-height: 1.5;



}







/* Bottom accent line on hover */



.tad-country-card::after {



  content: "";



  position: absolute;



  bottom: 0;



  left: 0;



  right: 0;



  height: 3px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  transform: scaleX(0);



  transition: transform 0.35s ease;



  transform-origin: left;



  border-radius: 0 0 20px 20px;



}



.tad-country-card:hover::after {



  transform: scaleX(1);



}







@media (max-width: 1100px) {



  .tad-grid {



    grid-template-columns: repeat(3, 1fr);



  }



}



@media (max-width: 768px) {



  .tad-grid {



    grid-template-columns: repeat(2, 1fr);



  }



}



@media (max-width: 480px) {



  .tad-grid {



    grid-template-columns: 1fr;



  }



}







/* ================================================================



   2. THEME PACKAGES — editorial magazine card style



   ================================================================ */



#theme-packages {



  padding: var(--section-gap) 6%;



  background: linear-gradient(160deg, #f8fcff 0%, #eef6ff 40%, #fdf8f4 100%);



  text-align: center;



  position: relative;



  overflow: hidden;



}



#theme-packages::before {



  content: "";



  position: absolute;



  inset: 0;



  background-image:



    radial-gradient(



      circle at 20% 20%,



      rgba(45, 125, 196, 0.05) 0%,



      transparent 50%



    ),



    radial-gradient(



      circle at 80% 80%,



      rgba(201, 149, 92, 0.05) 0%,



      transparent 50%



    );



  pointer-events: none;



}







.theme-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 20px;



  margin-top: 44px;



  position: relative;



  z-index: 1;



}







.theme-card {



  background: var(--white);



  border-radius: 24px;



  overflow: hidden;



  position: relative;



  height: 240px;



  cursor: pointer;



  border: 1px solid rgba(45, 125, 196, 0.08);



  box-shadow: 0 2px 16px rgba(15, 45, 74, 0.06);



  transition:



    transform 0.38s cubic-bezier(0.22, 0.68, 0, 1.2),



    box-shadow 0.38s ease;



}



.theme-card:hover {



  transform: translateY(-10px);



  box-shadow: 0 28px 60px rgba(15, 45, 74, 0.14);



}







/* Background image — full bleed, dark overlay */



.theme-card > img {



  position: absolute;



  inset: 0;



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  opacity: 0.35;



  transition:



    opacity 0.4s ease,



    transform 0.55s ease;



  filter: saturate(0.7);



}



.theme-card:hover > img {



  opacity: 0.55;



  transform: scale(1.08);



  filter: saturate(1.1);



}







/* Gradient overlay */



.theme-card::before {



  content: "";



  position: absolute;



  inset: 0;



  background: linear-gradient(



    160deg,



    rgba(238, 244, 251, 0.6) 0%,



    rgba(15, 45, 74, 0.18) 100%



  );



  z-index: 1;



  transition: background 0.4s;



}



.theme-card:hover::before {



  background: linear-gradient(



    160deg,



    rgba(45, 125, 196, 0.1) 0%,



    rgba(15, 45, 74, 0.5) 100%



  );



}







.theme-card-content {



  position: relative;



  z-index: 2;



  height: 100%;



  display: flex;



  flex-direction: column;



  align-items: flex-start;



  justify-content: flex-end;



  padding: 24px 26px;



  text-align: left;



}







.theme-icon {



  font-size: 2rem;



  margin-bottom: 10px;



  display: inline-block;



  padding: 10px;



  background: rgba(255, 255, 255, 0.9);



  border-radius: 14px;



  box-shadow: 0 4px 16px rgba(15, 45, 74, 0.12);



  line-height: 1;



  transition: transform 0.3s ease;



}



.theme-card:hover .theme-icon {



  transform: scale(1.1) rotate(-5deg);



}







.theme-card-name {



  font-size: 1.2rem;



  font-weight: 600;



  color: var(--text-main);



  margin-bottom: 5px;



  transition: color 0.3s;



}



.theme-card:hover .theme-card-name {



  color: var(--blue-deep);



}







.theme-card-desc {



  font-size: 0.73rem;



  color: white;



  line-height: 1.55;



  max-height: 0;



  overflow: hidden;



  opacity: 0;



  transform: translateY(8px);



  transition:



    max-height 0.4s ease,



    opacity 0.35s ease,



    transform 0.35s ease;



}



.theme-card:hover .theme-card-desc {



  max-height: 60px;



  opacity: 1;



  transform: translateY(0);



}







/* Arrow CTA */



.theme-card::after {



  content: "→";



  position: absolute;



  top: 20px;



  right: 20px;



  z-index: 2;



  width: 34px;



  height: 34px;



  background: var(--white);



  border-radius: 50%;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 0.9rem;



  color: var(--blue);



  box-shadow: 0 4px 12px rgba(15, 45, 74, 0.12);



  opacity: 0;



  transform: scale(0.7);



  transition:



    opacity 0.3s ease,



    transform 0.3s ease;



}



.theme-card:hover::after {



  opacity: 1;



  transform: scale(1);



}







@media (max-width: 768px) {



  .theme-grid {



    grid-template-columns: 1fr 1fr;



  }



  .theme-card {



    height: 200px;



  }



}



@media (max-width: 480px) {



  .theme-grid {



    grid-template-columns: 1fr;



  }



}







/* ================================================================



   3. WHERE WE REACH — horizontal bento grid, blue-white gradient bg



   ================================================================ */







#where-we-reach .section-label {



  color: var(--blue);



}



#where-we-reach .section-title {



  color: var(--text-main);



}



#where-we-reach .section-divider {



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



}



.reach-intro {



  color: var(--text-muted);



}







.reach-header {



  display: flex;



  align-items: flex-end;



  justify-content: space-between;



  margin-bottom: 48px;



  position: relative;



  z-index: 1;



}







/* Bento-style grid */



.reach-grid {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  grid-template-rows: auto auto;



  gap: 14px;



  position: relative;



  z-index: 1;



}







/* Make first two cards span 2 cols for bento feel */



.reach-card:nth-child(1) {



  grid-column: span 2;



}



.reach-card:nth-child(6) {



  grid-column: span 2;



}







.reach-card {



  background: rgba(255, 255, 255, 0.82);



  border: 1px solid rgba(45, 125, 196, 0.1);



  border-radius: 20px;



  padding: 28px 26px;



  cursor: pointer;



  backdrop-filter: blur(8px);



  box-shadow: 0 2px 16px rgba(45, 125, 196, 0.06);



  transition:



    transform 0.35s cubic-bezier(0.22, 0.68, 0, 1.2),



    box-shadow 0.35s ease,



    background 0.3s;



  position: relative;



  overflow: hidden;



}



.reach-card::before {



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  height: 3px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  opacity: 0;



  transition: opacity 0.3s;



}



.reach-card:hover {



  transform: translateY(-6px);



  box-shadow: 0 20px 48px rgba(45, 125, 196, 0.14);



  background: rgba(255, 255, 255, 0.97);



  border-color: rgba(45, 125, 196, 0.22);



}



.reach-card:hover::before {



  opacity: 1;



}







.reach-flag {



  font-size: 2.2rem;



  margin-bottom: 14px;



  display: block;



}



.reach-region {



  font-size: 0.58rem;



  font-weight: 600;



  letter-spacing: 0.22em;



  text-transform: uppercase;



  color: var(--blue);



  margin-bottom: 6px;



}



.reach-name {



  font-size: 1.05rem;



  font-weight: 600;



  color: var(--text-main);



  margin-bottom: 8px;



  line-height: 1.3;



}



.reach-places {



  font-size: 0.7rem;



  color: var(--text-muted);



  line-height: 1.72;



}







/* Stats bar */



.reach-count-row {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 0;



  margin-top: 48px;



  background: rgba(255, 255, 255, 0.85);



  border: 1px solid rgba(45, 125, 196, 0.1);



  border-radius: 20px;



  overflow: hidden;



  backdrop-filter: blur(8px);



  box-shadow: 0 4px 24px rgba(45, 125, 196, 0.07);



  position: relative;



  z-index: 1;



}



.reach-count-item {



  text-align: center;



  padding: 30px 16px;



  border-right: 1px solid rgba(45, 125, 196, 0.08);



  transition: background 0.3s;



}



.reach-count-item:hover {



  background: rgba(238, 244, 251, 0.7);



}



.reach-count-item:last-child {



  border-right: none;



}



.reach-count-num {



  font-size: 2.4rem;



  font-weight: 600;



  color: var(--blue-deep);



  line-height: 1;



}



.reach-count-label {



  font-size: 0.62rem;



  color: var(--text-muted);



  letter-spacing: 0.1em;



  text-transform: uppercase;



  margin-top: 6px;



}







@media (max-width: 1100px) {



  .reach-grid {



    grid-template-columns: repeat(2, 1fr);



  }



  .reach-card:nth-child(1),



  .reach-card:nth-child(6) {



    grid-column: span 1;



  }



  .reach-count-row {



    grid-template-columns: repeat(2, 1fr);



  }



}



@media (max-width: 600px) {



  .reach-grid {



    grid-template-columns: 1fr;



  }



  .reach-header {



    flex-direction: column;



    align-items: flex-start;



    gap: 14px;



  }



}







/* ================================================================



   4. TRENDING TOURS — asymmetric overlap cards



   ================================================================ */



#trending {



  padding: var(--section-gap) 6%;



  background: var(--white);



  position: relative;



}



#trending::before {



  content: "";



  position: absolute;



  inset: 0;



  background:



    radial-gradient(



      ellipse at 5% 50%,



      rgba(238, 244, 251, 0.8) 0%,



      transparent 45%



    ),



    radial-gradient(



      ellipse at 95% 30%,



      rgba(253, 245, 238, 0.6) 0%,



      transparent 40%



    );



  pointer-events: none;



}







/* Override slider track for new card size */



#trending-slider .slider-track {



  gap: 20px;



  padding: 12px 4px 24px;



}







.tour-card {



  flex: 0 0 calc(25% - 16px);



  height: 360px;



  border-radius: 22px;



  overflow: hidden;



  position: relative;



  cursor: pointer;



  box-shadow: 0 6px 28px rgba(15, 45, 74, 0.1);



  transition:



    transform 0.4s cubic-bezier(0.22, 0.68, 0, 1.2),



    box-shadow 0.4s ease;



}



.tour-card:hover {



  transform: translateY(-10px) scale(1.02);



  box-shadow: 0 24px 56px rgba(15, 45, 74, 0.2);



}







/* Permanent bottom gradient (not just on hover) */



.tour-card-overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to top,



    rgba(8, 24, 55, 0.95) 0%,



    rgba(8, 24, 55, 0.4) 45%,



    transparent 70%



  );



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  padding: 22px;



  opacity: 1;



  transform: none;



  z-index: 1;



}







.tour-card-title {



  font-size: 1rem;



  font-weight: 600;



  color: var(--white);



  line-height: 1.35;



  margin-bottom: 8px;



}







.tour-card-meta {



  display: flex;



  gap: 10px;



  font-size: 0.7rem;



  color: rgba(255, 255, 255, 0.65);



}







/* Label redesign */



.tour-card-label {



  position: absolute;



  top: 16px;



  left: 16px;



  z-index: 2;



  background: rgba(255, 255, 255, 0.93);



  color: var(--blue-deep);



  font-size: 0.62rem;



  font-weight: 600;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  padding: 5px 12px;



  border-radius: 20px;



  box-shadow: 0 2px 12px rgba(15, 45, 74, 0.14);



  border: 1px solid rgba(45, 125, 196, 0.12);



  backdrop-filter: blur(4px);



}







/* Hover image zoom */



.tour-card > img {



  transition: transform 0.7s ease;



}



.tour-card:hover > img {



  transform: scale(1.09);



}







@media (max-width: 1100px) {



  .tour-card {



    flex: 0 0 calc(33.33% - 14px);



  }



}



@media (max-width: 768px) {



  .tour-card {



    flex: 0 0 calc(50% - 10px);



    height: 300px;



  }



}



@media (max-width: 480px) {



  .tour-card {



    flex: 0 0 88%;



    height: 280px;



  }



}







/* ================================================================



   5. TESTIMONIALS — "Voices of Happiness" magazine style



   ================================================================ */



#testimonials {



  padding: var(--section-gap) 6%;



  background: var(--white);



  text-align: center;



  position: relative;



  overflow: hidden;



}



#testimonials::before {



  content: "";



  position: absolute;



  inset: 0;



  background:



    radial-gradient(



      ellipse at 20% 0%,



      rgba(238, 244, 251, 0.9) 0%,



      transparent 55%



    ),



    radial-gradient(



      ellipse at 80% 100%,



      rgba(253, 245, 238, 0.7) 0%,



      transparent 50%



    );



  pointer-events: none;



}







/* Section header */



#testimonials .section-title {



  color: var(--text-main);



}







/* Eyebrow italic */



.testi-eyebrow {



  font-size: 0.78rem;



  font-style: italic;



  color: var(--skin-warm);



  letter-spacing: 0.06em;



  display: block;



  margin-bottom: 8px;



}







.testi-carousel {



  position: relative;



  overflow: hidden;



  margin-top: 48px;



}



.testi-track {



  display: flex;



  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);



}



.testi-item {



  flex: 0 0 50%;



  padding: 0 12px;



}







/* New card style — inspired by screenshot 3 */



.testi-card {



  background: var(--white);



  border-radius: 24px;



  padding: 36px 30px 28px;



  text-align: left;



  box-shadow: 0 4px 32px rgba(15, 45, 74, 0.08);



  border: 1px solid rgba(45, 125, 196, 0.08);



  position: relative;



  overflow: hidden;



  transition:



    transform 0.35s ease,



    box-shadow 0.35s ease;



}



.testi-card:hover {



  transform: translateY(-6px);



  box-shadow: 0 20px 50px rgba(15, 45, 74, 0.13);



}







/* Large decorative quote mark */



.testi-card::before {



  content: "\201C";



  position: absolute;



  top: -10px;



  right: 24px;



  font-size: 7rem;



  color: rgba(45, 125, 196, 0.07);



  font-family: var(--font);



  line-height: 1;



  pointer-events: none;



}







/* Top accent */



.testi-card::after {



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  height: 3px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  border-radius: 24px 24px 0 0;



}







.testi-stars {



  color: var(--skin-warm);



  font-size: 0.9rem;



  letter-spacing: 2px;



  margin-bottom: 16px;



  display: flex;



  gap: 3px;



}







.testi-text {



  font-size: 0.88rem;



  color: var(--text-body);



  line-height: 1.9;



  font-style: italic;



  margin-bottom: 24px;



}







.testi-author {



  display: flex;



  align-items: center;



  gap: 14px;



  border-top: 1px solid var(--border);



  padding-top: 18px;



}







.testi-avatar {



  width: 46px;



  height: 46px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--blue), var(--blue-deep));



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--white);



  font-size: 1.1rem;



  font-weight: 600;



  flex-shrink: 0;



  box-shadow: 0 4px 14px rgba(45, 125, 196, 0.3);



}







.testi-name {



  font-weight: 600;



  font-size: 0.9rem;



  color: var(--text-main);



}



.testi-loc {



  font-size: 0.68rem;



  color: var(--text-muted);



  margin-top: 2px;



  display: flex;



  align-items: center;



  gap: 4px;



}



.testi-loc::before {



  content: "📍";



  font-size: 0.7rem;



}







/* Nav buttons */



.testi-nav {



  display: flex;



  justify-content: center;



  gap: 10px;



  margin-top: 36px;



  position: relative;



  z-index: 1;



}



.testi-nav-btn {



  width: 40px;



  height: 40px;



  border-radius: 50%;



  border: 1.5px solid var(--blue-mid);



  background: var(--white);



  cursor: pointer;



  font-size: 0.88rem;



  color: var(--blue);



  display: flex;



  align-items: center;



  justify-content: center;



  box-shadow: 0 3px 12px rgba(45, 125, 196, 0.1);



  transition: all 0.25s ease;



}



.testi-nav-btn:hover {



  background: var(--blue);



  color: var(--white);



  border-color: var(--blue);



  transform: scale(1.08);



}







@media (max-width: 768px) {



  .testi-item {



    flex: 0 0 100%;



  }



}







/* ================================================================



   6. PACKAGES BY TRAVEL PARTNERS — gradient bg



   ================================================================ */



#packages {



  padding: var(--section-gap) 6%;



  background: linear-gradient(135deg, #fafaf8 0%, #e4e4e3 50%, #ecebe3 100%);



  position: relative;



  overflow: hidden;



}



#packages::before {



  content: "";



  position: absolute;



  inset: 0;



  background-image:



    radial-gradient(



      circle at 15% 30%,



      rgba(201, 149, 92, 0.06) 0%,



      transparent 40%



    ),



    radial-gradient(



      circle at 85% 70%,



      rgba(45, 125, 196, 0.06) 0%,



      transparent 40%



    );



  pointer-events: none;



}



#packages .section-title {



  color: var(--text-main) !important;



}



#packages > div > p {



  color: var(--text-body) !important;



}







/* ================================================================



   7. ABOUT US — match screenshot 1 style (teal/blue accent)



   ================================================================ */



#about {



  background: white;



}







.about-inner {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 80px;



  align-items: center;



}







.about-desc {



  font-size: 0.9rem;



  color: var(--text-body);



  line-height: 1.9;



}







/* Stats — inspired by screenshot orange numbers */



.about-stats {



  display: flex;



  gap: 0;



  background: var(--white);



  border-radius: 16px;



  border: 1px solid rgba(45, 125, 196, 0.1);



  overflow: hidden;



  margin: 28px 0;



  box-shadow: 0 4px 20px rgba(45, 125, 196, 0.07);



}



.stat-item {



  flex: 1;



  text-align: center;



  padding: 24px 16px;



  border-right: 1px solid rgba(45, 125, 196, 0.08);



}



.stat-item:last-child {



  border-right: none;



}



.stat-num {



  font-size: 2.2rem;



  font-weight: 600;



  background: linear-gradient(135deg, var(--blue), var(--skin-warm));



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



  line-height: 1;



}



.stat-label {



  font-size: 0.64rem;



  color: var(--text-muted);



  letter-spacing: 0.08em;



  text-transform: uppercase;



  margin-top: 5px;



}







/* ================================================================



   8. BLOG SECTION — "Our Blogs" inspired by screenshot 2



   ================================================================ */



#blog-section {



  padding: var(--section-gap) 6%;



  position: relative;



  background: linear-gradient(135deg, #fafaf8 0%, #e4e4e3 50%, #ecebe3 100%);







  overflow: hidden;



}



#blog-section::before {



  content: "";



  position: absolute;



  inset: 0;



  background-image: radial-gradient(



    circle at 80% 20%,



    rgba(45, 125, 196, 0.05) 0%,



    transparent 40%



  );



  pointer-events: none;



}







.blog-eyebrow {



  font-style: italic;



  font-size: 0.9rem;



  color: var(--skin-warm);



  display: block;



  margin-bottom: 8px;



}



.blog-title-line {



  display: flex;



  align-items: center;



  gap: 16px;



  margin-bottom: 40px;



}



.blog-title-bar {



  width: 48px;



  height: 3px;



  background: var(--blue);



  border-radius: 2px;



  flex-shrink: 0;



}



.blog-title-line h2 {



  font-size: clamp(1.8rem, 3vw, 2.5rem);



  font-weight: 600;



  color: var(--text-main);



}



.blog-title-line h2 span {



  color: var(--blue);



}







.blog-layout {



  display: grid;



  grid-template-columns: 1fr 380px;



  gap: 28px;



  align-items: start;



}







/* Featured blog card */



.blog-featured {



  position: relative;



  border-radius: 24px;



  overflow: hidden;



  background: var(--white);



  box-shadow: 0 8px 36px rgba(15, 45, 74, 0.1);



  display: grid;



  grid-template-columns: 1fr 1fr;



  min-height: 340px;



}



.blog-featured-img {



  position: relative;



  overflow: hidden;



}



.blog-featured-img img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.6s ease;



}



.blog-featured:hover .blog-featured-img img {



  transform: scale(1.06);



}







.blog-featured-body {



  background: linear-gradient(135deg, #0f5e6a, #1a7a8a);



  padding: 32px 28px;



  display: flex;



  flex-direction: column;



  justify-content: center;



  position: relative;



}



.blog-featured-date {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  background: rgba(255, 255, 255, 0.12);



  border: 1px solid rgba(255, 255, 255, 0.2);



  color: rgba(255, 255, 255, 0.85);



  font-size: 0.7rem;



  padding: 5px 12px;



  border-radius: 20px;



  margin-bottom: 16px;



  width: fit-content;



}



.blog-featured-title {



  font-size: 1.15rem;



  font-weight: 600;



  color: var(--white);



  line-height: 1.4;



  margin-bottom: 14px;



}



.blog-featured-desc {



  font-size: 0.78rem;



  color: rgba(255, 255, 255, 0.7);



  line-height: 1.75;



  margin-bottom: 24px;



}



.blog-featured-cta {



  width: 42px;



  height: 42px;



  border-radius: 50%;



  border: 1.5px solid rgba(255, 255, 255, 0.5);



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--white);



  font-size: 1.1rem;



  cursor: pointer;



  transition:



    background 0.25s,



    border-color 0.25s;



  text-decoration: none;



}



.blog-featured-cta:hover {



  background: rgba(255, 255, 255, 0.2);



  border-color: var(--white);



}







/* Sidebar blog list */



.blog-sidebar {



  display: flex;



  flex-direction: column;



  gap: 16px;



}



.blog-sidebar-item {



  display: grid;



  grid-template-columns: 100px 1fr;



  gap: 14px;



  background: var(--white);



  border-radius: 16px;



  overflow: hidden;



  box-shadow: 0 3px 16px rgba(15, 45, 74, 0.07);



  border: 1px solid rgba(45, 125, 196, 0.07);



  cursor: pointer;



  transition:



    transform 0.3s ease,



    box-shadow 0.3s ease;



}



.blog-sidebar-item:hover {



  transform: translateX(4px);



  box-shadow: 0 8px 28px rgba(15, 45, 74, 0.12);



}



.blog-sidebar-img {



  position: relative;



  overflow: hidden;



}



.blog-sidebar-img img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.5s ease;



}



.blog-sidebar-item:hover .blog-sidebar-img img {



  transform: scale(1.1);



}







/* Date badge on sidebar */



.blog-sidebar-date-badge {



  position: absolute;



  top: 6px;



  left: 6px;



  background: linear-gradient(135deg, var(--blue), #0f5e6a);



  color: white;



  font-size: 0.55rem;



  font-weight: 600;



  padding: 3px 8px;



  border-radius: 8px;



  line-height: 1.2;



  letter-spacing: 0.04em;



}







.blog-sidebar-body {



  padding: 14px 16px 14px 0;



  display: flex;



  flex-direction: column;



  justify-content: center;



}



.blog-sidebar-title {



  font-size: 0.82rem;



  font-weight: 600;



  color: var(--text-main);



  line-height: 1.4;



  margin-bottom: 6px;



}



.blog-sidebar-excerpt {



  font-size: 0.68rem;



  color: var(--text-muted);



  line-height: 1.55;



  margin-bottom: 8px;



  display: -webkit-box;



  -webkit-line-clamp: 2;



  -webkit-box-orient: vertical;



  overflow: hidden;



}



.blog-read-more {



  font-size: 0.65rem;



  font-weight: 600;



  color: var(--blue);



  letter-spacing: 0.06em;



  text-transform: uppercase;



  display: flex;



  align-items: center;



  gap: 4px;



  text-decoration: none;



  transition: gap 0.2s ease;



}



.blog-read-more:hover {



  gap: 8px;



}







.blog-view-all {



  display: flex;



  align-items: center;



  gap: 8px;



  font-size: 0.75rem;



  font-weight: 600;



  color: var(--blue);



  letter-spacing: 0.04em;



  text-decoration: none;



  padding: 12px 20px;



  border: 1.5px solid rgba(45, 125, 196, 0.25);



  border-radius: 12px;



  width: fit-content;



  margin-top: 4px;



  background: rgba(238, 244, 251, 0.5);



  transition:



    background 0.25s,



    border-color 0.25s;



}



.blog-view-all:hover {



  background: rgba(238, 244, 251, 1);



  border-color: var(--blue-mid);



}







@media (max-width: 900px) {



  .blog-layout {



    grid-template-columns: 1fr;



  }



  .blog-featured {



    grid-template-columns: 1fr;



    min-height: auto;



  }



  .blog-featured-img {



    height: 220px;



  }



}



@media (max-width: 600px) {



  .blog-sidebar-item {



    grid-template-columns: 80px 1fr;



  }



}







/* ================================================================



   TESTIMONIALS — MARQUEE REDESIGN



   Paste at the END of style-home.css (replaces previous override)



   ================================================================ */







#testimonials {



  padding: var(--section-gap) 6%;



  background: linear-gradient(145deg, #f0f8ff 0%, #eef6ff 40%, #fff9f5 100%);



  overflow: hidden;



  position: relative;



}



#testimonials::before {



  content: "";



  position: absolute;



  width: 600px;



  height: 600px;



  border-radius: 50%;



  background: radial-gradient(



    circle,



    rgba(45, 125, 196, 0.07) 0%,



    transparent 70%



  );



  top: -200px;



  right: -100px;



  pointer-events: none;



  z-index: 0;



}



#testimonials::after {



  content: "";



  position: absolute;



  width: 400px;



  height: 400px;



  border-radius: 50%;



  background: radial-gradient(



    circle,



    rgba(201, 149, 92, 0.06) 0%,



    transparent 70%



  );



  bottom: -100px;



  left: -80px;



  pointer-events: none;



  z-index: 0;



}



#testimonials > * {



  position: relative;



  z-index: 1;



}







.testi-eyebrow {



  font-size: 0.62rem;



  letter-spacing: 0.22em;



  text-transform: uppercase;



  color: var(--skin-warm);



  font-weight: 600;



  display: block;



  margin-bottom: 8px;



}



#testimonials .section-title {



  color: var(--text-main);



}



#testimonials .section-title span {



  color: var(--blue);



}







/* ── MARQUEE WRAPPER ── */



.testi-marquee-wrap {



  overflow: hidden;



  display: flex;



  flex-direction: column;



  gap: 16px;



  margin-top: 48px;



  -webkit-mask-image: linear-gradient(



    90deg,



    transparent 0%,



    black 8%,



    black 92%,



    transparent 100%



  );



  mask-image: linear-gradient(



    90deg,



    transparent 0%,



    black 8%,



    black 92%,



    transparent 100%



  );



}



.testi-marquee-wrap:hover .testi-row {



  animation-play-state: paused;



}







.testi-row {



  display: flex;



  gap: 18px;



  width: max-content;



}



.testi-row-1 {



  animation: testiScrollLeft 40s linear infinite;



}



.testi-row-2 {



  animation: testiScrollRight 52s linear infinite;



}







@keyframes testiScrollLeft {



  0% {



    transform: translateX(0);



  }



  100% {



    transform: translateX(-50%);



  }



}



@keyframes testiScrollRight {



  0% {



    transform: translateX(-50%);



  }



  100% {



    transform: translateX(0);



  }



}







/* ── TESTI CARD ── */



.testi-card {



  background: rgba(255, 255, 255, 0.92);



  backdrop-filter: blur(12px);



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



  border: 1px solid rgba(45, 125, 196, 0.1);



  border-radius: 22px;



  padding: 26px 28px 22px;



  width: 320px;



  flex-shrink: 0;



  position: relative;



  overflow: hidden;



  box-shadow: 0 2px 16px rgba(45, 125, 196, 0.06);



  transition:



    transform 0.35s cubic-bezier(0.22, 0.68, 0, 1.2),



    box-shadow 0.35s ease,



    border-color 0.35s;



  cursor: default;



  user-select: none;



}



.testi-card:hover {



  transform: translateY(-8px);



  box-shadow: 0 22px 52px rgba(45, 125, 196, 0.15);



  border-color: rgba(45, 125, 196, 0.25);



}







/* Top accent */



.testi-card::after {



  content: "";



  position: absolute;



  top: 0;



  left: 0;



  right: 0;



  height: 3px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  border-radius: 22px 22px 0 0;



}







/* Decorative quote */



.testi-card::before {



  content: "\201C";



  position: absolute;



  top: -10px;



  right: 18px;



  font-size: 90px;



  color: rgba(45, 125, 196, 0.06);



  font-family: var(--font);



  line-height: 1;



  pointer-events: none;



}







/* Featured dark card */



.testi-card.testi-featured {



  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-deep) 100%);



  border-color: rgba(255, 255, 255, 0.1);



  width: 380px;



}



.testi-card.testi-featured::before {



  color: rgba(255, 255, 255, 0.04);



}



.testi-card.testi-featured .testi-stars {



  color: var(--skin-light);



}



.testi-card.testi-featured .testi-text {



  color: rgba(255, 255, 255, 0.75);



}



.testi-card.testi-featured .testi-name {



  color: var(--white);



}



.testi-card.testi-featured .testi-loc {



  color: rgba(255, 255, 255, 0.45);



}



.testi-card.testi-featured .testi-author {



  border-top-color: rgba(255, 255, 255, 0.1);



}



.testi-card.testi-featured .testi-avatar {



  background: linear-gradient(135deg, var(--skin-warm), var(--skin-deep));



}







/* Stars */



.testi-stars {



  color: var(--skin-warm);



  font-size: 0.82rem;



  letter-spacing: 3px;



  margin-bottom: 12px;



  display: block;



}







/* Quote text */



.testi-text {



  font-size: 0.84rem;



  color: var(--text-body);



  line-height: 1.88;



  font-style: italic;



  margin-bottom: 20px;



}







/* Author row */



.testi-author {



  display: flex;



  align-items: center;



  gap: 12px;



  border-top: 1px solid rgba(45, 125, 196, 0.08);



  padding-top: 16px;



}



.testi-avatar {



  width: 42px;



  height: 42px;



  border-radius: 50%;



  background: linear-gradient(135deg, var(--blue), var(--blue-deep));



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--white);



  font-size: 1rem;



  font-weight: 600;



  flex-shrink: 0;



  box-shadow: 0 4px 14px rgba(45, 125, 196, 0.28);



}



.testi-name {



  font-size: 0.85rem;



  font-weight: 600;



  color: var(--text-main);



}



.testi-loc {



  font-size: 0.68rem;



  color: var(--text-muted);



  margin-top: 2px;



}







/* Hide old nav buttons (not needed) */



.testi-nav {



  display: none;



}







/* Remove old testi-carousel / testi-track / testi-item styles */



.testi-carousel {



  overflow: visible;



  margin: 0;



}



.testi-track {



  display: none !important;



}



.testi-item {



  display: none !important;



}







@media (max-width: 768px) {



  .testi-card {



    width: 270px;



    padding: 20px 22px;



  }



  .testi-card.testi-featured {



    width: 310px;



  }



}



@media (max-width: 480px) {



  .testi-card {



    width: 240px;



  }



  .testi-card.testi-featured {



    width: 260px;



  }



}



/* ================================================================



   TESTIMONIALS — Centered Card Slider (screenshot style)



   TOUR ANY DAY — Centered Card Slider



   Paste at END of style-home.css



   ================================================================ */







/* ── TESTIMONIALS ── */



#testimonials {



  padding: var(--section-gap) 6%;



  background: var(--white);



  overflow: hidden;



  position: relative;



  text-align: center;



}



#testimonials::before {



  content: "";



  position: absolute;



  inset: 0;



  background-image:



    radial-gradient(circle, rgba(45, 125, 196, 0.05) 1px, transparent 1px),



    radial-gradient(circle, rgba(201, 149, 92, 0.04) 1px, transparent 1px);



  background-size:



    40px 40px,



    60px 60px;



  background-position:



    0 0,



    20px 20px;



  pointer-events: none;



}



#testimonials > * {



  position: relative;



  z-index: 1;



}







.testi-eyebrow {



  font-style: italic;



  font-size: 0.8rem;



  color: var(--blue);



  letter-spacing: 0.04em;



  display: block;



  margin-bottom: 10px;



}



.testi-title-row {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 16px;



  margin-bottom: 14px;



}



.testi-title-bar {



  width: 44px;



  height: 3px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  border-radius: 2px;



  flex-shrink: 0;



}



.testi-title-row h2 {



  font-size: clamp(1.8rem, 3.5vw, 2.6rem);



  font-weight: 700;



  color: var(--text-main);



}



.testi-title-row h2 span {



  color: var(--blue);



}



.testi-section-sub {



  font-size: 0.84rem;



  color: var(--text-muted);



  max-width: 520px;



  margin: 0 auto 48px;



  line-height: 1.75;



}







/* ── SLIDER STAGE ── */



.testi-stage {



  position: relative;



  height: 380px;



  display: flex;



  align-items: center;



  justify-content: center;



}



.testi-track-inner {



  position: relative;



  width: 100%;



  height: 100%;



  display: flex;



  align-items: center;



  justify-content: center;



}







/* ── CARD ── */



.testi-slide-card {



  position: absolute;



  width: 560px;



  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-deep) 100%);



  border-radius: 24px;



  padding: 44px 48px 36px;



  text-align: left;



  transition: all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);



  cursor: pointer;



  box-shadow: 0 16px 56px rgba(15, 45, 74, 0.22);



}



.testi-slide-card.sc-center {



  transform: translateX(0) scale(1);



  opacity: 1;



  filter: none;



  z-index: 10;



}



.testi-slide-card.sc-left {



  transform: translateX(-440px) scale(0.87);



  opacity: 0.55;



  z-index: 5;



}



.testi-slide-card.sc-right {



  transform: translateX(440px) scale(0.87);



  opacity: 0.55;



  filter: blur(2.5px);



  z-index: 5;



}



.testi-slide-card.sc-far-left {



  transform: translateX(-700px) scale(0.78);



  opacity: 0;



  filter: blur(4px);



  z-index: 1;



  pointer-events: none;



}



.testi-slide-card.sc-far-right {



  transform: translateX(700px) scale(0.78);



  opacity: 0;



  filter: blur(4px);



  z-index: 1;



  pointer-events: none;



}



.testi-slide-card.sc-hidden {



  opacity: 0;



  pointer-events: none;



  z-index: 0;



}







/* Card internals */



.tsc-photos {



  display: flex;



  margin-bottom: 22px;



}



.tsc-photo {



  width: 52px;



  height: 52px;



  border-radius: 50%;



  border: 3px solid rgba(255, 255, 255, 0.35);



  background: rgba(255, 255, 255, 0.18);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1.1rem;



  font-weight: 700;



  color: var(--white);



  flex-shrink: 0;



  margin-right: -14px;



}



.tsc-text {



  font-size: 0.93rem;



  color: rgba(255, 255, 255, 0.88);



  line-height: 1.84;



  margin-bottom: 28px;



  font-style: italic;



}



.tsc-author {



  display: flex;



  align-items: center;



  gap: 10px;



}



.tsc-author-icon {



  width: 32px;



  height: 32px;



  border-radius: 50%;



  border: 1.5px solid rgba(255, 255, 255, 0.35);



  display: flex;



  align-items: center;



  justify-content: center;



  color: rgba(255, 255, 255, 0.7);



  font-size: 0.8rem;



}



.tsc-name {



  font-size: 0.95rem;



  font-weight: 700;



  color: var(--white);



}



.tsc-loc {



  font-size: 0.68rem;



  color: rgba(255, 255, 255, 0.5);



  margin-top: 2px;



}



.tsc-qq {



  position: absolute;



  bottom: 22px;



  right: 30px;



  font-size: 5rem;



  font-weight: 900;



  color: rgba(255, 255, 255, 0.1);



  font-family: var(--font);



  line-height: 1;



  user-select: none;



  pointer-events: none;



}







/* ── DOTS ── */



.testi-dots {



  display: flex;



  justify-content: center;



  gap: 8px;



  margin-top: 28px;



}



.testi-dot {



  width: 8px;



  height: 8px;



  border-radius: 50%;



  background: rgba(0, 0, 0, 0.15);



  border: none;



  cursor: pointer;



  padding: 0;



  transition: all 0.3s ease;



}



.testi-dot.active {



  background: var(--blue);



  width: 24px;



  border-radius: 4px;



}







/* View all link */



.testi-view-all {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  margin-top: 24px;



  font-size: 0.78rem;



  font-weight: 700;



  color: var(--blue);



  text-decoration: none;



  letter-spacing: 0.05em;



  text-transform: uppercase;



}



.testi-view-all-icon {



  width: 22px;



  height: 22px;



  border-radius: 50%;



  background: var(--blue);



  display: flex;



  align-items: center;



  justify-content: center;



  color: var(--white);



  font-size: 0.75rem;



}







/* Hide old carousel */



.testi-carousel,



.testi-track,



.testi-item,



.testi-nav {



  display: none !important;



}







@media (max-width: 900px) {



  .testi-slide-card {



    width: 80vw;



    padding: 30px 28px;



  }



  .testi-slide-card.sc-left {



    transform: translateX(-70vw) scale(0.85);



  }



  .testi-slide-card.sc-right {



    transform: translateX(70vw) scale(0.85);



  }



  .testi-stage {



    height: 340px;



  }



}



@media (max-width: 600px) {



  .testi-slide-card {



    width: 86vw;



    padding: 24px 22px;



  }



  .testi-slide-card.sc-left {



    transform: translateX(-82vw) scale(0.82);



  }



  .testi-slide-card.sc-right {



    transform: translateX(82vw) scale(0.82);



  }



  .testi-stage {



    height: 320px;



  }



}







/* ================================================================



   TOUR ANY DAY — Centered Card Slider



   ================================================================ */



#tours-any-day {



  padding: var(--section-gap) 6%;



  background: linear-gradient(135deg, #f0f8ff 0%, #eef6ff 50%, #fffaf5 100%);



  overflow: hidden;



  position: relative;



  text-align: center;



}



#tours-any-day::before {



  content: "";



  position: absolute;



  inset: 0;



  background:



    radial-gradient(



      circle at 15% 30%,



      rgba(45, 125, 196, 0.06) 0%,



      transparent 45%



    ),



    radial-gradient(



      circle at 85% 70%,



      rgba(201, 149, 92, 0.05) 0%,



      transparent 40%



    );



  pointer-events: none;



}



#tours-any-day > * {



  position: relative;



  z-index: 1;



}







/* ── TAD SLIDER STAGE ── */



.tad-stage {



  position: relative;



  height: 380px;



  display: flex;



  align-items: center;



  justify-content: center;



  margin-top: 48px;



}



.tad-track-inner {



  position: relative;



  width: 100%;



  height: 100%;



  display: flex;



  align-items: center;



  justify-content: center;



}







/* ── TAD ARROW BUTTONS ── */



.tad-arrow-btn {



  position: absolute;



  top: 50%;



  transform: translateY(-50%);



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: var(--white);



  border: 1px solid rgba(45, 125, 196, 0.2);



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1rem;



  color: var(--blue);



  box-shadow: 0 4px 18px rgba(15, 45, 74, 0.1);



  z-index: 20;



  transition:



    background 0.25s,



    color 0.25s,



    transform 0.25s;



}



.tad-arrow-btn:hover {



  background: var(--blue);



  color: var(--white);



  transform: translateY(-50%) scale(1.08);



}



.tad-arrow-btn.tad-prev-btn {



  left: calc(50% - 280px);



}



.tad-arrow-btn.tad-next-btn {



  right: calc(50% - 280px);



}







/* ── TAD CARD ── */



.tad-slide-card {



  position: absolute;



  width: 280px;



  border-radius: 22px;



  overflow: hidden;



  background: var(--white);



  box-shadow: 0 8px 34px rgba(15, 45, 74, 0.12);



  transition: all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);



  cursor: pointer;



}



.tad-slide-card.tsc-center {



  transform: translateX(0) scale(1);



  opacity: 1;



  filter: none;



  z-index: 10;



  width: 300px;



  box-shadow: 0 20px 56px rgba(15, 45, 74, 0.18);



}



.tad-slide-card.tsc-left {



  transform: translateX(-300px) scale(0.87);



  opacity: 0.6;



  filter: blur(2.5px);



  z-index: 5;



}



.tad-slide-card.tsc-right {



  transform: translateX(300px) scale(0.87);



  opacity: 0.6;



  filter: blur(2.5px);



  z-index: 5;



}



.tad-slide-card.tsc-far-left {



  transform: translateX(-530px) scale(0.77);



  opacity: 0.25;



  filter: blur(4px);



  z-index: 2;



}



.tad-slide-card.tsc-far-right {



  transform: translateX(530px) scale(0.77);



  opacity: 0.25;



  filter: blur(4px);



  z-index: 2;



}



.tad-slide-card.tsc-hidden {



  opacity: 0;



  z-index: 0;



  pointer-events: none;



}







/* Card image */



.tad-slide-img {



  height: 200px;



  overflow: hidden;



  position: relative;



}



.tad-slide-img img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.6s ease;



}



.tad-slide-card.tsc-center:hover .tad-slide-img img {



  transform: scale(1.07);



}



.tad-slide-img-overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to bottom,



    transparent 45%,



    rgba(10, 30, 60, 0.55) 100%



  );



}







/* Visa badge on image */



.tad-slide-visa {



  position: absolute;



  top: 14px;



  left: 14px;



  font-size: 0.58rem;



  font-weight: 700;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  padding: 4px 12px;



  border-radius: 20px;



  z-index: 2;



}



.tad-vfree {



  background: rgba(26, 90, 150, 0.93);



  color: #fff;



}



.tad-voa {



  background: rgba(201, 149, 92, 0.95);



  color: #fff;



}



.tad-schengen {



  background: rgba(45, 125, 196, 0.92);



  color: #fff;



}



.tad-other {



  background: rgba(15, 45, 74, 0.88);



  color: #fff;



}







/* Country name on image bottom */



.tad-slide-country {



  position: absolute;



  bottom: 14px;



  left: 16px;



  z-index: 2;



  display: flex;



  align-items: center;



  gap: 8px;



}



.tad-slide-flag {



  font-size: 1.4rem;



  line-height: 1;



}



.tad-slide-name {



  font-size: 1.1rem;



  font-weight: 700;



  color: #fff;



  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);



}







/* Card body */



.tad-slide-body {



  padding: 16px 18px 18px;



  text-align: left;



}



.tad-slide-cities {



  font-size: 0.72rem;



  color: var(--text-muted);



  line-height: 1.6;



  margin-bottom: 12px;



}



.tad-slide-cta {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  font-size: 0.68rem;



  font-weight: 700;



  color: var(--blue);



  letter-spacing: 0.06em;



  text-transform: uppercase;



  background: none;



  border: none;



  cursor: pointer;



  padding: 0;



}



.tad-slide-cta-arrow {



  width: 26px;



  height: 26px;



  border-radius: 50%;



  background: var(--blue-pale);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 0.8rem;



  color: var(--blue);



  transition:



    background 0.2s,



    color 0.2s;



}



.tad-slide-card.tsc-center .tad-slide-cta-arrow {



  background: var(--blue);



  color: var(--white);



}







/* TAD Dots */



.tad-dots {



  display: flex;



  justify-content: center;



  gap: 8px;



  margin-top: 22px;



}



.tad-dot {



  width: 8px;



  height: 8px;



  border-radius: 50%;



  background: rgba(45, 125, 196, 0.2);



  border: none;



  cursor: pointer;



  padding: 0;



  transition: all 0.3s ease;



}



.tad-dot.active {



  background: var(--blue);



  width: 24px;



  border-radius: 4px;



}







/* Hide old tad grid */



.tad-grid {



  display: none !important;



}



.tad-subtitle {



  margin-bottom: 0;



}







@media (max-width: 900px) {



  .tad-slide-card {



    width: 75vw;



  }



  .tad-slide-card.tsc-center {



    width: 82vw;



  }



  .tad-slide-card.tsc-left {



    transform: translateX(-72vw) scale(0.86);



  }



  .tad-slide-card.tsc-right {



    transform: translateX(72vw) scale(0.86);



  }



  .tad-arrow-btn.tad-prev-btn {



    left: 4%;



  }



  .tad-arrow-btn.tad-next-btn {



    right: 4%;



  }



}



@media (max-width: 540px) {



  .tad-slide-card {



    width: 82vw;



  }



  .tad-slide-card.tsc-center {



    width: 88vw;



  }



  .tad-slide-card.tsc-left {



    transform: translateX(-85vw) scale(0.82);



  }



  .tad-slide-card.tsc-right {



    transform: translateX(85vw) scale(0.82);



  }



}







* {



  box-sizing: border-box;



  margin: 0;



  padding: 0;



}



.ts-section {



  padding: 28px 0;



  background: linear-gradient(



    135deg,



    #fafaf7 0%,



    #f0f0e6 50%,



    #f2f1eb 100%



  ) !important;



  font-family: "Titillium Web", sans-serif;



  position: relative;



  overflow: hidden;



  text-align: center;



}



.ts-section::before {



  content: "";



  position: absolute;



  inset: 0;



  background-image:



    radial-gradient(circle, rgba(45, 125, 196, 0.06) 1px, transparent 1px),



    radial-gradient(circle, rgba(201, 149, 92, 0.05) 1px, transparent 1px);



  background-size:



    40px 40px,



    60px 60px;



  background-position:



    0 0,



    20px 20px;



  pointer-events: none;



}



.ts-eyebrow {



  font-size: 1.3rem;



  color: var(--blue);



  letter-spacing: 0.04em;



  display: block;



  margin-bottom: 10px;



}



.ts-heading {



  font-size: 38px;



  font-weight: 700;



  color: var(--text-main);



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 14px;



}



.ts-heading span {



  color: var(--blue);



}



.ts-heading-bar {



  width: 44px;



  height: 3px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  border-radius: 2px;



  flex-shrink: 0;



}



.ts-sub {



  font-size: 13px;



  color: var(--text-muted);



  max-width: 520px;



  margin: 14px auto 0;



  line-height: 1.75;



}







/* SLIDER */



.ts-slider-wrap {



  position: relative;



  margin-top: 0px;



  height: 360px;



  display: flex;



  align-items: center;



  justify-content: center;



}



.ts-slider-track {



  display: flex;



  align-items: center;



  justify-content: center;



  gap: 0;



  position: relative;



  width: 100%;



}







/* CARDS */



.ts-card {



  flex-shrink: 0;



  width: 560px;



  background: linear-gradient(135deg, var(--navy) 0%, var(--blue-deep) 100%);



  border-radius: 24px;



  padding: 44px 48px 36px;



  text-align: left;



  position: absolute;



  transition: all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);



  cursor: pointer;



}



.ts-card.pos-center {



  transform: translateX(0) scale(1);



  opacity: 1;



  filter: none;



  z-index: 10;



  pointer-events: auto;



}



.ts-card.pos-left {



  transform: translateX(-440px) scale(0.88);



  opacity: 0.55;



  filter: blur(2px);



  z-index: 5;



  pointer-events: none;



}



.ts-card.pos-right {



  transform: translateX(440px) scale(0.88);



  opacity: 0.55;



  filter: blur(2px);



  z-index: 5;



  pointer-events: none;



}



.ts-card.pos-far-left {



  transform: translateX(-700px) scale(0.8);



  opacity: 0;



  filter: blur(4px);



  z-index: 1;



  pointer-events: none;



}



.ts-card.pos-far-right {



  transform: translateX(700px) scale(0.8);



  opacity: 0;



  filter: blur(4px);



  z-index: 1;



  pointer-events: none;



}



.ts-card.pos-hidden {



  opacity: 0;



  pointer-events: none;



  z-index: 0;



}







/* Card inner */



.ts-card-photos {



  display: flex;



  margin-bottom: 24px;



  position: relative;



  height: 56px;



}



.ts-card-photo {



  width: 56px;



  height: 56px;



  border-radius: 50%;



  border: 3px solid rgba(255, 255, 255, 0.4);



  object-fit: cover;



  background: rgba(255, 255, 255, 0.2);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 20px;



  font-weight: 700;



  color: #fff;



  flex-shrink: 0;



}



.ts-card-photo:nth-child(2) {



  margin-left: -16px;



}



.ts-card-text {



  font-size: 15px;



  color: rgba(255, 255, 255, 0.9);



  line-height: 1.82;



  margin-bottom: 28px;



}



.ts-card-author {



  display: flex;



  align-items: center;



  gap: 10px;



}



.ts-card-author-icon {



  width: 34px;



  height: 34px;



  border-radius: 50%;



  border: 1.5px solid rgba(255, 255, 255, 0.4);



  display: flex;



  align-items: center;



  justify-content: center;



  color: rgba(255, 255, 255, 0.8);



  font-size: 14px;



}



.ts-card-name {



  font-size: 15px;



  font-weight: 700;



  color: #fff;



}



.ts-card-loc {



  font-size: 11px;



  color: rgba(255, 255, 255, 0.55);



}



.ts-qq {



  position: absolute;



  bottom: 24px;



  right: 32px;



  font-size: 72px;



  font-weight: 900;



  color: rgba(255, 255, 255, 0.12);



  font-family: var(--font);



  line-height: 1;



  user-select: none;



}



.ts-pin {



  position: absolute;



  bottom: 24px;



  left: 48px;



  display: flex;



  align-items: center;



  gap: 6px;



  font-size: 11px;



  color: rgba(255, 255, 255, 0.45);



}



.ts-pin-dot {



  width: 18px;



  height: 18px;



  border-radius: 50%;



  border: 1.5px solid rgba(255, 255, 255, 0.35);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 9px;



}







/* DOTS */



.ts-dots {



  display: flex;



  justify-content: center;



  gap: 8px;



  /* margin-top: 32px; */



}



.ts-dot {



  width: 8px;



  height: 8px;



  border-radius: 50%;



  background: rgba(0, 0, 0, 0.15);



  cursor: pointer;



  transition: all 0.3s;



  border: none;



  padding: 0;



}



.ts-dot.active {



  background: var(--blue);



  width: 24px;



  border-radius: 4px;



}







/* VIEW ALL */



.ts-view-all {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  margin-top: 28px;



  font-size: 13px;



  font-weight: 700;



  color: var(--blue);



  text-decoration: none;



  letter-spacing: 0.03em;



}



.ts-view-all-icon {



  width: 22px;



  height: 22px;



  border-radius: 50%;



  background: var(--blue);



  display: flex;



  align-items: center;



  justify-content: center;



  color: #fff;



  font-size: 11px;



}



* {



  box-sizing: border-box;



  margin: 0;



  padding: 0;



}



.tad-section {



  padding: 20px 0;



  background: linear-gradient(135deg, #fafaf7 0%, #f0f0e6 50%, #f2f1eb 100%);



  font-family: "Titillium Web", sans-serif;



  text-align: center;



  overflow: hidden;



  position: relative;



}



.tad-eyebrow {



  font-size: 0.82rem;



  letter-spacing: 0.22em;



  text-transform: uppercase;



  color: #03275c;



  font-weight: 600;



  display: block;



  margin-bottom: 8px;



}



.tad-title {



  font-size: 32px;



  font-weight: 700;



  color: #0f2d4a;



  margin-bottom: 8px;



}



.tad-divider {



  width: 44px;



  height: 3px;



  background: linear-gradient(90deg, #03275c, #c9955c);



  border-radius: 2px;



  margin: 10px auto 14px;



}



.tad-sub {



  font-size: 13px;



  color: #7a92a8;



  max-width: 480px;



  margin: 0 auto 20px;



  line-height: 1.7;



}







/* SLIDER */



.tad-slider-wrap {



  position: relative;



  height: 380px;



  display: flex;



  align-items: center;



  justify-content: center;



}



.tad-track {



  display: flex;



  align-items: center;



  justify-content: center;



  position: relative;



  width: 100%;



}







/* CARD */



.tad-card {



  position: absolute;



  width: 280px;



  border-radius: 24px;



  overflow: hidden;



  flex-shrink: 0;



  transition: all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);



  cursor: pointer;



  background: #fff;



  box-shadow: 0 8px 32px rgba(15, 45, 74, 0.12);



}



.tad-card.pos-center {



  transform: translateX(0) scale(1);



  opacity: 1;



  filter: none;



  z-index: 10;



  width: 300px;



}



.tad-card.pos-left {



  transform: translateX(-300px) scale(0.88);



  opacity: 0.9;



  z-index: 5;



}



.tad-card.pos-right {



  transform: translateX(300px) scale(0.88);



  opacity: 0.9;



  z-index: 5;



}



.tad-card.pos-far-left {



  transform: translateX(-520px) scale(0.78);



  opacity: 0.7;



  z-index: 2;



}



.tad-card.pos-far-right {



  transform: translateX(520px) scale(0.78);



  opacity: 0.7;



  z-index: 2;



}



.tad-card.pos-hidden {



  opacity: 0;



  z-index: 0;



  pointer-events: none;



}







.tad-img-wrap {



  height: 200px;



  overflow: hidden;



  position: relative;



}



.tad-img-wrap img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.6s ease;



}



.tad-card.pos-center:hover .tad-img-wrap img {



  transform: scale(1.07);



}



.tad-img-overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to bottom,



    transparent 50%,



    rgba(10, 30, 60, 0.5) 100%



  );



}







/* Visa badge on image */



.tad-visa-on-img {



  position: absolute;



  top: 14px;



  left: 14px;



  font-size: 10px;



  font-weight: 700;



  letter-spacing: 0.07em;



  text-transform: uppercase;



  padding: 10px 12px;



  border-radius: 20px;



  z-index: 2;



}



.tad-vfree {



  background: rgba(26, 90, 150, 0.92);



  color: #fff;



}



.tad-voa {



  background: rgba(201, 149, 92, 0.95);



  color: #fff;



}



.tad-schengen {



  background: rgba(45, 125, 196, 0.92);



  color: #fff;



}



.tad-other {



  background: rgba(15, 45, 74, 0.88);



  color: #fff;



}







/* Country flag on image bottom */



.tad-country-on-img {



  position: absolute;



  bottom: 14px;



  left: 16px;



  z-index: 2;



  display: flex;



  align-items: center;



  gap: 8px;



}



.tad-flag-emoji {



  font-size: 22px;



  line-height: 1;



  display: flex;



  align-items: center;



}



.tad-flag-emoji .tad-flag-icon {



  width: 1.33333333em;



  height: 1em;



  display: inline-block;



  vertical-align: middle;



  border-radius: 3px;



  box-shadow: 0 2px 4px rgba(0,0,0,0.3);



  border: 1px solid rgba(255,255,255,0.15);



}



.tad-country-name-img {



  font-size: 16px;



  font-weight: 700;



  color: #fff;



  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);



}







.tad-body {



  padding: 16px 18px 18px;



  text-align: left;



}



.tad-cities {



  font-size: 12px;



  color: #7a92a8;



  line-height: 1.5;



  margin-bottom: 10px;



}



.tad-cta {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  font-size: 11px;



  font-weight: 700;



  color: #03275c;



  letter-spacing: 0.05em;



  text-transform: uppercase;



  border: none;



  background: none;



  cursor: pointer;



  padding: 0;



}



.tad-cta-arrow {



  width: 24px;



  height: 24px;



  border-radius: 50%;



  background: #eef4fb;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 12px;



  color: #03275c;



  transition: background 0.2s;



}



.tad-card.pos-center .tad-cta-arrow {



  background: #03275c;



  color: #fff;



}







/* Arrow buttons */



.tad-arrow {



  position: absolute;



  top: 50%;



  transform: translateY(-50%);



  width: 42px;



  height: 42px;



  border-radius: 50%;



  background: #fff;



  border: 1px solid rgba(45, 125, 196, 0.2);



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 16px;



  color: #03275c;



  box-shadow: 0 4px 16px rgba(15, 45, 74, 0.1);



  z-index: 20;



  transition:



    background 0.25s,



    color 0.25s;



}



.tad-arrow:hover {



  background: #03275c;



  color: #fff;



}



.tad-arrow-left {



  left: calc(50% - 260px);



}



.tad-arrow-right {



  right: calc(50% - 260px);



}







/* Dots */



.tad-dots {



  display: flex;



  justify-content: center;



  gap: 8px;



  margin-top: 0px;



}



.tad-dot {



  width: 8px;



  height: 8px;



  border-radius: 50%;



  background: rgba(45, 125, 196, 0.2);



  cursor: pointer;



  transition: all 0.3s;



  border: none;



  padding: 0;



}



.tad-dot.active {



  background: #03275c;



  width: 24px;



  border-radius: 4px;



}







/* ================================================================



   FIX 1 — ABOUT US RESPONSIVE



   Paste at END of style-home.css



   ================================================================ */







/* Tablet (≤1100px) — reduce gap, shrink circle */



@media (max-width: 1100px) {



  .about-inner {



    gap: 48px;



  }



  .about-circle-wrap {



    width: 360px;



    height: 360px;



  }



  .about-tag {



    padding: 8px 12px;



    font-size: 0; /* hide text, keep icon */



    gap: 0;



  }



  .about-tag-label,



  .about-tag-sub {



    display: none;



  }



  .about-tag-icon {



    font-size: 0.9rem;



  }



}







/* Tablet portrait (≤860px) — go single column */



@media (max-width: 860px) {



  .about-inner {



    grid-template-columns: 1fr;



    gap: 36px;



    text-align: center;



  }



  .about-media {



    justify-content: center;



  }



  .about-circle-wrap {



    width: 300px;



    height: 300px;



    margin: 0 auto;



  }



  .about-tag:nth-child(2) {



    top: 4%;



    left: -20px;



  }



  .about-tag:nth-child(3) {



    top: 4%;



    right: -20px;



  }



  .about-tag:nth-child(4) {



    bottom: 8%;



    left: -20px;



  }



  .about-tag:nth-child(5) {



    bottom: 8%;



    right: -20px;



  }



  .section-divider {



    margin-left: auto;



    margin-right: auto;



  }



  .about-quote {



    text-align: left;



  }



}







/* Mobile (≤600px) — hide floating tags, shrink circle further */



@media (max-width: 600px) {



  .about-circle-wrap {



    width: 240px;



    height: 240px;



  }



  .about-tag {



    display: none; /* tags overlap badly at this size */



  }



  .about-seal {



    bottom: -4%;



    width: 80px;



    height: 80px;



  }



  .about-seal-inner {



    width: 54px;



    height: 54px;



  }



}







/* Mobile (≤480px) — stats stack vertically */



@media (max-width: 480px) {



  .about-stats {



    flex-direction: column;



  }



  .stat-item {



    border-right: none !important;



    border-bottom: 1px solid var(--border);



    padding: 16px;



  }



  .stat-item:last-child {



    border-bottom: none;



  }



  .about-text {



    text-align: left;



  }



  .section-divider {



    margin-left: 0;



    margin-right: 0;



  }



}







/* ================================================================



   FIX 2 — VISA STRIP — Professional dark layout with pattern



   Paste at END of style-home.css



   ================================================================ */







#visa-strip {



  background: var(--navy); /* deep navy #0f2d4a */



  padding: 52px 6%;



  display: grid;



  grid-template-columns: 1fr auto;



  align-items: center;



  gap: 48px;



  position: relative;



  overflow: hidden;



  flex-wrap: unset; /* override old flex-wrap */



}







/* Diagonal hatch pattern */



#visa-strip::before {



  content: "";



  position: absolute;



  inset: 0;



  background-image: repeating-linear-gradient(



    45deg,



    rgba(255, 255, 255, 0.03) 0px,



    rgba(255, 255, 255, 0.03) 1px,



    transparent 1px,



    transparent 18px



  );



  pointer-events: none;



  z-index: 0;



}







/* Decorative rings top-right */



#visa-strip::after {



  content: "";



  position: absolute;



  top: -80px;



  right: -80px;



  width: 320px;



  height: 320px;



  border-radius: 50%;



  border: 1px solid rgba(201, 149, 92, 0.15);



  box-shadow: 0 0 0 40px rgba(45, 125, 196, 0.06);



  pointer-events: none;



  z-index: 0;



}







/* Shimmer sweep */



#visa-strip .visa-shimmer {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    120deg,



    transparent 0%,



    rgba(255, 255, 255, 0.04) 45%,



    rgba(255, 255, 255, 0.08) 50%,



    rgba(255, 255, 255, 0.04) 55%,



    transparent 100%



  );



  animation: vsShimmer 6s linear infinite;



  pointer-events: none;



  z-index: 0;



}



@keyframes vsShimmer {



  from {



    transform: translateX(-120%);



  }



  to {



    transform: translateX(120%);



  }



}







/* Everything inside above z-index 0 */



#visa-strip > * {



  position: relative;



  z-index: 1;



}







/* LEFT — content */



.visa-strip-text {



  color: var(--white);



}







.visa-strip-eyebrow {



  display: inline-block;



  font-size: 0.58rem;



  font-weight: 600;



  letter-spacing: 0.22em;



  text-transform: uppercase;



  color: rgba(255, 255, 255, 0.5);



  background: rgba(255, 255, 255, 0.07);



  border: 1px solid rgba(255, 255, 255, 0.12);



  padding: 4px 12px;



  border-radius: 4px;



  margin-bottom: 14px;



}







.visa-strip-icon {



  width: 52px;



  height: 52px;



  border-radius: 50%;



  background: rgba(201, 149, 92, 0.16);



  border: 1px solid rgba(201, 149, 92, 0.35);



  display: flex;



  align-items: center;



  justify-content: center;



  font-size: 1.4rem;



  margin-bottom: 16px;



}







.visa-strip-text h3 {



  font-size: clamp(1.5rem, 2.8vw, 2.2rem);



  font-weight: 600;



  color: var(--white);



  line-height: 1.18;



  margin-bottom: 10px;



}







.visa-strip-text p {



  font-size: 0.86rem;



  color: rgba(255, 255, 255, 0.5);



  line-height: 1.78;



  margin-bottom: 16px;



}







/* Service tags */



.visa-strip-tags {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



  margin-top: 4px;



}



.visa-strip-tag {



  font-size: 0.64rem;



  font-weight: 600;



  letter-spacing: 0.06em;



  text-transform: uppercase;



  padding: 4px 12px;



  border-radius: 4px;



  background: rgba(255, 255, 255, 0.07);



  border: 1px solid rgba(255, 255, 255, 0.14);



  color: rgba(255, 255, 255, 0.65);



}







/* RIGHT — buttons + mini stats */



.visa-strip-links {



  display: flex;



  flex-direction: column;



  gap: 10px;



  min-width: 210px;



}







.visa-strip-btn.gold {



  background: var(--skin-warm);



  color: var(--white);



  border: none;



  padding: 13px 26px;



  font-size: 0.84rem;



  font-weight: 600;



  border-radius: var(--radius);



  display: inline-flex;



  align-items: center;



  gap: 8px;



  justify-content: center;



  transition:



    background var(--transition),



    transform 0.2s;



}



.visa-strip-btn.gold:hover {



  background: var(--skin-deep);



  transform: translateY(-2px);



}







.visa-strip-btn.outline {



  border: 1.5px solid rgba(255, 255, 255, 0.28);



  color: rgba(255, 255, 255, 0.75);



  padding: 12px 26px;



  font-size: 0.84rem;



  font-weight: 400;



  border-radius: var(--radius);



  display: inline-flex;



  align-items: center;



  justify-content: center;



  gap: 6px;



  background: transparent;



  transition:



    border-color 0.25s,



    background 0.25s;



}



.visa-strip-btn.outline:hover {



  border-color: rgba(255, 255, 255, 0.6);



  background: rgba(255, 255, 255, 0.07);



}







/* Mini stats bar below buttons */



.visa-strip-stats {



  display: flex;



  background: rgba(255, 255, 255, 0.04);



  border: 1px solid rgba(255, 255, 255, 0.08);



  border-radius: var(--radius);



  overflow: hidden;



  margin-top: 4px;



}



.visa-strip-stat {



  flex: 1;



  text-align: center;



  padding: 10px 6px;



  border-right: 1px solid rgba(255, 255, 255, 0.07);



}



.visa-strip-stat:last-child {



  border-right: none;



}



.visa-strip-stat-n {



  font-size: 1rem;



  font-weight: 600;



  color: var(--skin-light);



  line-height: 1;



}



.visa-strip-stat-l {



  font-size: 0.55rem;



  color: rgba(255, 255, 255, 0.35);



  letter-spacing: 0.08em;



  text-transform: uppercase;



  margin-top: 3px;



}







/* Responsive */



@media (max-width: 900px) {



  #visa-strip {



    grid-template-columns: 1fr;



    gap: 28px;



    padding: 44px 6%;



  }



  .visa-strip-links {



    flex-direction: row;



    flex-wrap: wrap;



    min-width: unset;



  }



  .visa-strip-btn {



    flex: 1;



    min-width: 140px;



  }



}







@media (max-width: 480px) {



  .visa-strip-links {



    flex-direction: column;



  }



  .visa-strip-btn {



    width: 100%;



  }



}







/* MOBILE: force single centered card */



@media (max-width: 768px) {



  .ts-slider-track {



    position: relative;



    height: auto;



  }







  .ts-card {



    position: absolute;



    left: 50%;



    top: 0;



    transform: translateX(-50%) scale(0.9);



    width: 90%;



    max-width: 350px;



    opacity: 0;



    transition: all 0.4s ease;



  }







  .ts-card.pos-center {



    transform: translateX(-50%) scale(1);



    opacity: 1;



    position: relative;



  }







  .ts-card.pos-hidden {



    opacity: 0;



    pointer-events: none;



  }



}



/* ================================================================



   EXCLUSIVE OFFERS — background pattern (similar to Where We Reach)



   ================================================================ */



#exclusive-offers {



  background:



    repeating-linear-gradient(



      -45deg,



      rgba(6, 117, 214, 0.04) 0px,



      rgba(19, 101, 172, 0.04) 2px,



      transparent 1px,



      transparent 28px



    ),



    repeating-linear-gradient(



      45deg,



      rgba(6, 117, 214, 0.04) 0px,



      rgba(19, 101, 172, 0.04) 2px,



      transparent 1px,



      transparent 48px



    ),



    var(--white);



  position: relative;



}



/* ================================================================



   MERGED TOURS & DESTINATIONS SECTION



   ================================================================ */







/* Tab switcher */



.tad-tabs {



  display: flex;



  justify-content: center;



  gap: 0;



  margin: 0 auto 0px;



  background: rgba(255, 255, 255, 0.7);



  border: 1px solid rgba(45, 125, 196, 0.18);



  border-radius: 50px;



  padding: 5px;



  width: fit-content;



  backdrop-filter: blur(8px);



}



.tad-tab {



  padding: 10px 28px;



  border-radius: 40px;



  border: none;



  background: transparent;



  font-family: var(--font);



  font-size: 0.84rem;



  font-weight: 600;



  color: var(--text-muted);



  cursor: pointer;



  transition:



    background 0.3s,



    color 0.3s;



}



.tad-tab.active {



  background: var(--blue);



  color: #fff;



  box-shadow: 0 4px 14px rgba(45, 125, 196, 0.3);



}







/* Panel visibility */



.tad-panel {



  display: block;



}



.tad-panel-hidden {



  display: none;



}







/* Trending grid */



.trending-grid {



  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 18px;



  max-width: 1100px;



  margin: 0 auto;



}







/* Trending card */



.tr-card {



  position: relative;



  height: 280px;



  border-radius: 18px;



  overflow: hidden;



  cursor: pointer;



  box-shadow: 0 6px 24px rgba(15, 45, 74, 0.1);



  transition:



    transform 0.35s cubic-bezier(0.22, 0.68, 0, 1.2),



    box-shadow 0.35s;



  font-size: 0;



  line-height: 0;



}



.tr-card:hover {



  transform: translateY(-8px);



  box-shadow: 0 20px 48px rgba(15, 45, 74, 0.18);



}



.tr-card img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.6s ease;



}



.tr-card:hover img {



  transform: scale(1.08);



}







.tr-label {



  position: absolute;



  top: 14px;



  left: 14px;



  background: rgba(255, 255, 255, 0.93);



  color: var(--blue-deep);



  font-size: 0.62rem;



  font-weight: 600;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  padding: 5px 12px;



  border-radius: 20px;



  z-index: 2;



  box-shadow: 0 2px 10px rgba(15, 45, 74, 0.14);



  border: 1px solid rgba(45, 125, 196, 0.12);



}







.tr-overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to top,



    rgba(8, 24, 55, 0.92) 0%,



    rgba(8, 24, 55, 0.35) 45%,



    transparent 70%



  );



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  padding: 20px;



  z-index: 1;



  font-size: 15px;



  line-height: 1.5;



}



.tr-title {



  font-size: 1rem;



  font-weight: 600;



  color: #fff;



  line-height: 1.35;



  margin-bottom: 7px;



}



.tr-meta {



  display: flex;



  gap: 12px;



  font-size: 0.7rem;



  color: rgba(255, 255, 255, 0.65);



}



.tr-meta span {



  display: flex;



  align-items: center;



  gap: 4px;



}







/* Responsive */



@media (max-width: 900px) {



  .trending-grid {



    grid-template-columns: repeat(2, 1fr);



  }



}



@media (max-width: 540px) {



  .trending-grid {



    grid-template-columns: 1fr;



  }



  .tad-tab {



    padding: 9px 18px;



    font-size: 0.78rem;



  }



}



/* ================================================================



   TESTIMONIALS — RESPONSIVE FIX



   ================================================================ */



.ts-slider-wrap {



  overflow: hidden;



}







@media (max-width: 768px) {



  .ts-section {



    padding: 48px 5%;



  }



  .ts-heading {



    font-size: 26px;



    gap: 10px;



  }



  .ts-heading-bar {



    width: 32px;



  }



  .ts-slider-wrap {



    height: auto;



    min-height: 340px;



  }







  .ts-card {



    width: 88vw !important;



    max-width: 420px;



    padding: 28px 22px;



  }



  .ts-card.pos-center {



    transform: translateX(-50%) scale(1) !important;



    left: 50%;



    opacity: 1 !important;



    filter: none !important;



    position: relative;



    left: auto;



    transform: none !important;



    margin: 0 auto;



  }



  .ts-card.pos-left,



  .ts-card.pos-right,



  .ts-card.pos-far-left,



  .ts-card.pos-far-right {



    opacity: 0 !important;



    pointer-events: none;



    position: absolute;



  }



  .ts-slider-track {



    position: relative;



    display: flex;



    justify-content: center;



    align-items: center;



    min-height: 320px;



  }



}







@media (max-width: 480px) {



  .ts-heading {



    font-size: 22px;



  }



  .ts-sub {



    font-size: 12px;



  }



  .ts-card {



    padding: 22px 18px;



  }



  .ts-card-text {



    font-size: 13px;



  }



  .ts-card-name {



    font-size: 13px;



  }



} /* ================================================================



   TESTIMONIALS — MOBILE RESPONSIVE FIX



   ================================================================ */







/* Mobile: stack layout, single visible card */



@media (max-width: 768px) {



  .ts-slider-wrap {



    height: auto !important;



    min-height: 280px;



  }







  .ts-slider-track {



    position: relative;



    display: flex;



    justify-content: center;



    align-items: flex-start;



    min-height: 260px;



  }







  /* All cards use normal flow on mobile — only center is visible */



  .ts-card {



    position: relative !important;



    transform: none !important;



    opacity: 0 !important;



    filter: none !important;



    pointer-events: none !important;



    width: 88vw !important;



    max-width: 400px !important;



    left: auto !important;



    top: auto !important;



    display: none;



  }







  /* Only the active center card is shown */



  .ts-card.pos-center {



    opacity: 1 !important;



    pointer-events: auto !important;



    display: block;



    margin: 0 auto;



  }







  .ts-heading {



    font-size: 24px;



    gap: 10px;



    flex-wrap: wrap;



    justify-content: center;



  }







  .ts-heading-bar {



    width: 32px;



  }



  .ts-sub {



    font-size: 12px;



    padding: 0 12px;



  }



  .ts-section {



    padding: 48px 4%;



  }



  .ts-card-text {



    font-size: 13px;



    line-height: 1.75;



  }



  .ts-card-name {



    font-size: 13px;



  }



  .ts-dots {



    margin-top: 20px;



  }



}







@media (max-width: 480px) {



  .ts-card {



    width: 94vw !important;



    padding: 24px 20px !important;



  }



  .ts-heading {



    font-size: 20px;



  }



}



/* Trending tours — label badge override */



.trend-card .trend-label {



  background: rgba(255, 255, 255, 0.93);



  color: var(--blue-deep);



  border: 1px solid rgba(45, 125, 196, 0.15);



}







/* Trending card — country name sits at bottom, allow wrapping */



.trend-card .tad-country-name-img {



  font-size: 13px;



  line-height: 1.35;



  white-space: normal;



  max-width: 200px;



}



#exclusive-offers {



  padding: 28px 6%;



  background: linear-gradient(



    135deg,



    #fafaf7 0%,



    #f0f0e6 50%,



    #f2f1eb 100%



  ) !important;



  position: relative;



  overflow: hidden;



}







/* Section header */



.eo-header {



  display: flex;



  justify-content: space-between;



  align-items: flex-end;



}



.section-label {



  font-size: 0.82rem;



  letter-spacing: 0.26em;



  text-transform: uppercase;



  color: var(--blue);



  font-weight: 600;



  display: block;



  margin-bottom: 8px;



}



.section-title {



  font-size: clamp(1.6rem, 2.8vw, 2.4rem);



  font-weight: 600;



  color: var(--text-main);



  line-height: 1.15;



}



.section-divider {



  width: 44px;



  height: 2px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  border-radius: 2px;



  margin-top: 14px;



}



.view-all {



  font-size: 0.78rem;



  color: var(--blue);



  font-weight: 600;



  border-bottom: 1px solid rgba(45, 125, 196, 0.4);



  padding-bottom: 2px;



  text-decoration: none;



  transition: color 0.25s;



}



.view-all:hover {



  color: var(--blue-deep);



}







/* ===== CARDS GRID ===== */



.eo-grid {



  display: flex !important;



  flex-direction: row !important;



  flex-wrap: nowrap !important;



  overflow-x: auto !important;



  overflow-y: hidden !important;



  gap: 22px !important;



  padding: 10px 4px 24px !important;



  scroll-snap-type: x mandatory !important;



  scroll-behavior: smooth !important;



  -webkit-overflow-scrolling: touch !important;



}







.eo-grid .eo-card {



  flex: 0 0 320px !important;



  width: 320px !important;



  min-width: 320px !important;



  max-width: 320px !important;



  scroll-snap-align: start !important;



}







/* Hide scrollbar while preserving scroll functionality */



.eo-grid::-webkit-scrollbar {



  display: none !important;



  width: 0 !important;



  height: 0 !important;



}



.eo-grid {



  -ms-overflow-style: none !important;



  scrollbar-width: none !important;



}







/* ===== SINGLE CARD ===== */



.eo-card {



  background: var(--white);



  border-radius: var(--radius-lg);



  overflow: hidden;



  box-shadow: 0 4px 20px rgba(15, 45, 74, 0.08);



  transition:



    transform 0.35s cubic-bezier(0.22, 0.68, 0, 1.2),



    box-shadow 0.35s ease;



  cursor: pointer;



  position: relative;



}



.eo-card:hover {



  transform: translateY(-8px);



  box-shadow: 0 20px 48px rgba(15, 45, 74, 0.16);



}







/* Image area */



.eo-img-wrap {



  position: relative;



  height: 210px;



  overflow: hidden;



  font-size: 0;



  line-height: 0;



  border-radius: var(--radius-lg) var(--radius-lg) 0 0;



}



.eo-img-wrap img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.65s ease;



}



.eo-card:hover .eo-img-wrap img {



  transform: scale(1.07);



}







/* Top-left: destination label (dark pill) */



.eo-dest-pill {



  position: absolute;



  top: 14px;



  left: 14px;



  background: rgba(15, 45, 74, 0.82);



  color: #fff;



  border-radius: 10px;



  padding: 10px 14px;



  z-index: 2;



  backdrop-filter: blur(4px);



}



.eo-dest-name {



  font-size: 0.95rem;



  font-weight: 600;



  color: #fff;



  letter-spacing: 0.02em;



}



.eo-dest-nights {



  font-size: 0.68rem;



  color: var(--skin-light);



  margin-top: 1px;



}







/* Top-right: badge */



.eo-badge {



  position: absolute;



  top: 14px;



  right: 14px;



  font-size: 0.62rem;



  font-weight: 600;



  letter-spacing: 0.08em;



  text-transform: uppercase;



  padding: 10px 12px;



  border-radius: 20px;



  z-index: 2;



}



.eo-badge-sale {



  background: var(--skin-warm);



  color: #fff;



}



.eo-badge-early {



  background: var(--blue);



  color: #fff;



}



.eo-badge-flash {



  background: var(--skin-deep);



  color: #fff;



}



.eo-badge-couples {



  background: var(--blue-deep);



  color: #fff;



}



.eo-badge-summer {



  background: var(--blue);



  color: #fff;



}



.eo-badge-bogo {



  background: var(--navy);



  color: var(--skin-light);



}







/* Bottom info */



.eo-body {



  padding: 18px 18px 20px;



}



.eo-title {



  font-size: 1rem;



  font-weight: 600;



  color: var(--text-main);



  margin-bottom: 10px;



  line-height: 1.3;



}



.eo-price-row {



  display: flex;



  align-items: baseline;



  gap: 8px;



  margin-bottom: 14px;



}



.eo-price {



  font-size: 1.5rem;



  font-weight: 600;



  color: var(--text-main);



}



.eo-price-old {



  font-size: 0.84rem;



  color: var(--text-muted);



  text-decoration: line-through;



}



.eo-price-sub {



  font-size: 0.68rem;



  color: var(--text-muted);



  display: block;



  margin-top: -8px;



  margin-bottom: 14px;



}



.eo-book-btn {



  display: block;



  width: 100%;



  padding: 11px 0;



  background: var(--blue);



  color: #fff;



  font-family: var(--font);



  font-size: 0.82rem;



  font-weight: 600;



  letter-spacing: 0.06em;



  text-transform: uppercase;



  border: none;



  border-radius: var(--radius);



  cursor: pointer;



  text-align: center;



  text-decoration: none;



  transition:



    background 0.25s,



    transform 0.2s;



}



.eo-book-btn:hover {



  background: var(--blue-deep);



  transform: translateY(-1px);



}







/* Divider line inside card */



.eo-divider {



  height: 1px;



  background: var(--border);



  margin: 0 0 14px;



}







/* ===== RESPONSIVE ===== */



@media (max-width: 1100px) {



  .eo-grid {



    grid-template-columns: repeat(2, 1fr);



  }



}



@media (max-width: 600px) {



  .eo-grid {



    display: grid !important;



    grid-template-columns: repeat(2, 1fr) !important;



    gap: 10px !important;



    padding: 0 !important;



    margin: 0 !important;



    overflow-x: visible !important;



  }



  .eo-grid::-webkit-scrollbar {



    display: none;



  }



  .eo-grid .eo-card {



    flex: none !important;



    width: 100% !important;



    border-radius: 14px !important;



    display: flex !important;



    flex-direction: column !important;



  }



  .eo-img-wrap {



    height: 120px !important;



    border-radius: 14px 14px 0 0 !important;



  }



  .eo-dest-pill {



    top: 6px !important;



    left: 6px !important;



    padding: 3px 7px !important;



    border-radius: 6px !important;



  }



  .eo-dest-name {



    font-size: 0.65rem !important;



    font-weight: 700 !important;



    letter-spacing: 0.04em !important;



  }



  .eo-badge {



    top: 6px !important;



    right: 6px !important;



    font-size: 0.58rem !important;



    padding: 3px 6px !important;



    border-radius: 12px !important;



  }



  .eo-body {



    padding: 10px 10px 12px !important;



    display: flex !important;



    flex-direction: column !important;



    flex: 1 !important;



  }



  .eo-title {



    font-size: 0.85rem !important;



    line-height: 1.25 !important;



    margin-bottom: 6px !important;



    min-height: 2.3em !important;



    display: -webkit-box !important;



    -webkit-line-clamp: 2 !important;



    -webkit-box-orient: vertical !important;



    overflow: hidden !important;



  }



  .eo-price-row {



    margin-bottom: 3px !important;



    gap: 5px !important;



    align-items: baseline !important;



  }



  .eo-price {



    font-size: 1.15rem !important;



    font-weight: 700 !important;



  }



  .eo-price-old {



    font-size: 0.72rem !important;



  }



  .eo-price-sub {



    font-size: 0.58rem !important;



    margin-top: 0 !important;



    margin-bottom: 8px !important;



  }



  .eo-divider {



    margin: 0 0 8px !important;



  }



  .eo-book-btn {



    padding: 8px 0 !important;



    font-size: 0.72rem !important;



    border-radius: 6px !important;



    margin-top: auto !important;



  }



  .eo-header {



    flex-direction: column;



    align-items: flex-start;



    gap: 12px;



  }



}



/* ================================================================



   OUR GALLERY SECTION



   Append at the very END of style-home.css



   ================================================================ */







/* ── SECTION SHELL ── */



#gallery-section {



  padding: var(--section-gap) 6%;



  background: #ffffff !important;



  position: relative;



  overflow: hidden;



}



#gallery-section::before {



  display: none !important;



}







/* ── HEADER ── */



.gallery-header {



  display: flex;



  align-items: flex-end;



  justify-content: space-between;



  flex-wrap: wrap;



  gap: 24px;



  margin-bottom: 40px;



  position: relative;



  z-index: 1;



}



.gallery-eyebrow {



  display: block;



  font-size: 0.82rem;



  letter-spacing: 0.26em;



  text-transform: uppercase;



  color: var(--skin-warm);



  font-weight: 600;



  margin-bottom: 8px;



}



.gallery-title-row {



  display: flex;



  align-items: center;



  gap: 14px;



  margin-bottom: 10px;



}



.gallery-title-bar {



  width: 44px;



  height: 3px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  border-radius: 2px;



  flex-shrink: 0;



}



.gallery-title-row h2 {



  font-size: clamp(1.8rem, 3vw, 2.5rem);



  font-weight: 600;



  color: var(--text-main);



  line-height: 1.1;



}



.gallery-title-row h2 span {



  color: var(--blue);



}



.gallery-sub {



  font-size: 0.84rem;



  color: var(--text-muted);



  line-height: 1.72;



  max-width: 360px;



  margin: 0;



}







/* ── FILTER PILLS ── */



.gallery-filters {



  display: flex;



  flex-wrap: wrap;



  gap: 8px;



  align-items: center;



}



.gf-btn {



  padding: 8px 20px;



  border-radius: 50px;



  border: 1.5px solid rgba(45, 125, 196, 0.22);



  background: rgba(255, 255, 255, 0.75);



  color: var(--text-muted);



  font-family: var(--font);



  font-size: 0.76rem;



  font-weight: 600;



  cursor: pointer;



  backdrop-filter: blur(6px);



  transition:



    background 0.25s,



    border-color 0.25s,



    color 0.25s,



    transform 0.2s;



  white-space: nowrap;



}



.gf-btn:hover {



  background: rgba(238, 244, 251, 0.95);



  border-color: var(--blue-mid);



  color: var(--blue);



  transform: translateY(-1px);



}



.gf-btn.active {



  background: var(--blue);



  border-color: var(--blue);



  color: #fff;



  box-shadow: 0 4px 14px rgba(45, 125, 196, 0.3);



}







/* ── GRID ── */



.gallery-grid {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 14px;



}







/* Span modifiers */



.g-card.g-tall {



  grid-row: span 2;



}



.g-card.g-wide {



  grid-column: span 2;



}







/* ── CARD ── */



.g-card {



  border-radius: 18px;



  overflow: hidden;



  position: relative;



  cursor: pointer;



  transition:



    transform 0.38s cubic-bezier(0.22, 0.68, 0, 1.2),



    box-shadow 0.38s ease;



  box-shadow: 0 4px 18px rgba(15, 45, 74, 0.09);



  aspect-ratio: 4 / 3;



  height: auto;



}



.g-card:hover {



  transform: translateY(-6px) scale(1.01);



  box-shadow: 0 22px 50px rgba(15, 45, 74, 0.18);



  z-index: 2;



}







/* Hidden cards during filter */



.g-card.g-hidden {



  opacity: 0;



  transform: scale(0.9);



  pointer-events: none;



  transition:



    opacity 0.3s ease,



    transform 0.3s ease;



}



.g-card.g-visible {



  opacity: 1;



  transform: scale(1);



  pointer-events: auto;



  transition:



    opacity 0.4s ease,



    transform 0.4s ease;



}







/* Image wrapper */



.g-img-wrap {



  width: 100%;



  height: 100%;



  position: relative;



  font-size: 0;



  line-height: 0;



}



.g-img-wrap img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.65s ease;



}



.g-card:hover .g-img-wrap img {



  transform: scale(1.08);



}







/* Gradient overlay */



.g-overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to top,



    rgba(8, 22, 50, 0.88) 0%,



    rgba(8, 22, 50, 0.28) 40%,



    transparent 70%



  );



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  align-items: flex-start;



  padding: 16px;



  opacity: 0;



  transform: translateY(8px);



  transition:



    opacity 0.35s ease,



    transform 0.35s ease;



  font-size: 15px;



  line-height: 1.5;



}



.g-card:hover .g-overlay {



  opacity: 1;



  transform: translateY(0);



}







/* Info text inside overlay */



.g-info {



  flex: 1;



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



}



.g-title {



  font-size: 0.88rem;



  font-weight: 600;



  color: #fff;



  line-height: 1.3;



  margin-bottom: 4px;



}



.g-loc {



  font-size: 0.68rem;



  color: rgba(255, 255, 255, 0.65);



  display: flex;



  align-items: center;



  gap: 4px;



}



.g-loc i {



  font-size: 0.6rem;



}







/* Zoom button */



.g-zoom-btn {



  position: absolute;



  top: 12px;



  right: 12px;



  width: 34px;



  height: 34px;



  border-radius: 50%;



  background: rgba(255, 255, 255, 0.18);



  border: 1.5px solid rgba(255, 255, 255, 0.4);



  color: #fff;



  font-size: 0.78rem;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  backdrop-filter: blur(4px);



  transition:



    background 0.25s,



    border-color 0.25s,



    transform 0.2s;



  opacity: 0;



  transform: scale(0.8);



  transition:



    opacity 0.3s ease,



    transform 0.3s ease,



    background 0.25s;



}



.g-card:hover .g-zoom-btn {



  opacity: 1;



  transform: scale(1);



}



.g-zoom-btn:hover {



  background: rgba(255, 255, 255, 0.35);



  border-color: rgba(255, 255, 255, 0.8);



}







/* Category badge */



.g-cat-badge {



  position: absolute;



  top: 12px;



  left: 12px;



  font-size: 0.58rem;



  font-weight: 600;



  letter-spacing: 0.1em;



  text-transform: uppercase;



  padding: 10px 10px;



  border-radius: 20px;



  background: rgba(255, 255, 255, 0.92);



  color: var(--blue-deep);



  border: 1px solid rgba(45, 125, 196, 0.15);



  backdrop-filter: blur(4px);



  box-shadow: 0 2px 8px rgba(15, 45, 74, 0.14);



  z-index: 2;



}







/* ── VIEW ALL CTA ── */



.gallery-cta-wrap {



  display: flex;



  justify-content: center;



  margin-top: 40px;



  position: relative;



  z-index: 1;



}



.gallery-view-all-btn {



  display: inline-flex;



  align-items: center;



  gap: 10px;



  padding: 13px 34px;



  background: var(--blue);



  color: #fff !important;



  border-radius: var(--radius);



  font-size: 0.84rem;



  font-weight: 600;



  letter-spacing: 0.03em;



  box-shadow: 0 6px 22px rgba(45, 125, 196, 0.3);



  transition:



    background var(--transition),



    transform 0.2s,



    box-shadow 0.2s;



  text-decoration: none;



}



.gallery-view-all-btn:hover {



  background: var(--blue-deep);



  transform: translateY(-2px);



  box-shadow: 0 10px 32px rgba(45, 125, 196, 0.42);



}







/* ── RESPONSIVE ── */



@media (max-width: 1100px) {



  .gallery-grid {



    grid-template-columns: repeat(3, 1fr);



    grid-auto-rows: 200px;



  }



}



@media (max-width: 768px) {



  .gallery-header {



    flex-direction: column;



    align-items: flex-start;



  }



  .gallery-grid {



    grid-template-columns: repeat(2, 1fr);



    grid-auto-rows: 180px;



  }



  .g-card.g-wide {



    grid-column: span 1;



  }



  .g-overlay {



    opacity: 1;



    transform: translateY(0);



  }



  .g-zoom-btn {



    opacity: 1;



    transform: scale(1);



  }



}



@media (max-width: 480px) {



  .gallery-grid {



    grid-template-columns: repeat(2, 1fr);



    grid-auto-rows: 150px;



  }



  .gf-btn {



    font-size: 0.7rem;



    padding: 7px 14px;



  }



}







/* ================================================================



   LIGHTBOX



   ================================================================ */



.glb-backdrop {



  position: fixed;



  inset: 0;



  background: rgba(6, 14, 30, 0.92);



  backdrop-filter: blur(18px);



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



  z-index: 9999;



  display: flex;



  align-items: center;



  justify-content: center;



  opacity: 0;



  pointer-events: none;



  transition: opacity 0.35s ease;



}



.glb-backdrop.glb-open {



  opacity: 1;



  pointer-events: auto;



}







/* Inner container — constrain image size */



.glb-inner {



  position: relative;



  display: flex;



  flex-direction: column;



  align-items: center;



  max-width: min(90vw, 900px);



  width: 100%;



  transform: scale(0.92) translateY(20px);



  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);



}



.glb-backdrop.glb-open .glb-inner {



  transform: scale(1) translateY(0);



}







/* Image wrapper */



.glb-img-wrap {



  position: relative;



  border-radius: 20px;



  overflow: hidden;



  width: 100%;



  max-height: 72vh;



  background: rgba(255, 255, 255, 0.04);



  border: 1px solid rgba(255, 255, 255, 0.1);



  display: flex;



  align-items: center;



  justify-content: center;



}



#glbImg {



  width: 100%;



  height: 100%;



  max-height: 72vh;



  object-fit: contain;



  display: block;



  border-radius: 20px;



  transition: opacity 0.3s ease;



}



#glbImg.glb-loading {



  opacity: 0;



}







/* Loader */



.glb-loader {



  position: absolute;



  inset: 0;



  display: flex;



  align-items: center;



  justify-content: center;



  opacity: 0;



  pointer-events: none;



  transition: opacity 0.2s;



}



.glb-loader.glb-show {



  opacity: 1;



}



.glb-spin {



  width: 36px;



  height: 36px;



  border: 3px solid rgba(255, 255, 255, 0.12);



  border-top-color: rgba(255, 255, 255, 0.8);



  border-radius: 50%;



  animation: glbSpin 0.7s linear infinite;



}



@keyframes glbSpin {



  to {



    transform: rotate(360deg);



  }



}







/* Caption */



.glb-caption {



  margin-top: 16px;



  text-align: center;



}



.glb-caption-title {



  font-size: 1.1rem;



  font-weight: 600;



  color: #fff;



  margin-bottom: 4px;



}



.glb-caption-loc {



  font-size: 0.76rem;



  color: rgba(255, 255, 255, 0.5);



  display: flex;



  align-items: center;



  gap: 5px;



  justify-content: center;



}



.glb-caption-loc i {



  color: var(--skin-warm);



}







/* Counter */



.glb-counter {



  position: absolute;



  bottom: -36px;



  right: 0;



  font-size: 0.68rem;



  font-weight: 600;



  color: rgba(255, 255, 255, 0.35);



  letter-spacing: 0.08em;



}







/* Close button */



.glb-close {



  position: fixed;



  top: 24px;



  right: 28px;



  width: 44px;



  height: 44px;



  border-radius: 50%;



  background: rgba(255, 255, 255, 0.1);



  border: 1.5px solid rgba(255, 255, 255, 0.2);



  color: rgba(255, 255, 255, 0.85);



  font-size: 1rem;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  z-index: 10001;



  transition:



    background 0.25s,



    transform 0.2s;



}



.glb-close:hover {



  background: rgba(255, 255, 255, 0.2);



  transform: scale(1.1) rotate(90deg);



}







/* Arrow nav */



.glb-arrow {



  position: fixed;



  top: 50%;



  transform: translateY(-50%);



  width: 48px;



  height: 48px;



  border-radius: 50%;



  background: rgba(255, 255, 255, 0.1);



  border: 1.5px solid rgba(255, 255, 255, 0.2);



  color: rgba(255, 255, 255, 0.85);



  font-size: 1rem;



  display: flex;



  align-items: center;



  justify-content: center;



  cursor: pointer;



  z-index: 10001;



  transition:



    background 0.25s,



    transform 0.2s;



}



.glb-arrow:hover {



  background: rgba(255, 255, 255, 0.22);



}



.glb-prev {



  left: 20px;



}



.glb-next {



  right: 20px;



}



.glb-arrow:hover.glb-prev {



  transform: translateY(-50%) translateX(-2px);



}



.glb-arrow:hover.glb-next {



  transform: translateY(-50%) translateX(2px);



}







@media (max-width: 768px) {



  .glb-arrow {



    display: none;



  }



  .glb-inner {



    max-width: 95vw;



  }



  .glb-caption-title {



    font-size: 0.95rem;



  }



}







/* ================================================================



   GROUP DEPARTURES — Roadmap / Journey Timeline Style



   Light theme, world-map SVG background, modern cards



   Paste at END of style-home.css (replaces old #group-departures)



   ================================================================ */







#group-departures {



  padding: 88px 6%;



  background: linear-gradient(135deg, #fafaf7 0%, #f0f0e6 50%, #f2f1eb 100%);



  position: relative;



  overflow: hidden;



}







/* ── World map dot-grid watermark ── */



#group-departures::before {



  content: "";



  position: absolute;



  inset: 0;



  background-image: radial-gradient(



    circle,



    rgba(45, 125, 196, 0.18) 1.5px,



    transparent 1.5px



  );



  background-size: 28px 28px;



  pointer-events: none;



  z-index: 0;



  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cellipse cx='400' cy='200' rx='380' ry='185' fill='white' opacity='0.9'/%3E%3Cellipse cx='160' cy='160' rx='100' ry='70' fill='white'/%3E%3Cellipse cx='420' cy='130' rx='120' ry='60' fill='white'/%3E%3Cellipse cx='600' cy='180' rx='90' ry='55' fill='white'/%3E%3Cellipse cx='280' cy='260' rx='80' ry='45' fill='white'/%3E%3Cellipse cx='520' cy='270' rx='110' ry='50' fill='white'/%3E%3C/svg%3E");



  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400'%3E%3Cellipse cx='400' cy='200' rx='380' ry='185' fill='white' opacity='0.9'/%3E%3Cellipse cx='160' cy='160' rx='100' ry='70' fill='white'/%3E%3Cellipse cx='420' cy='130' rx='120' ry='60' fill='white'/%3E%3Cellipse cx='600' cy='180' rx='90' ry='55' fill='white'/%3E%3Cellipse cx='280' cy='260' rx='80' ry='45' fill='white'/%3E%3Cellipse cx='520' cy='270' rx='110' ry='50' fill='white'/%3E%3C/svg%3E");



  mask-size: 100% 100%;



  -webkit-mask-size: 100% 100%;



  mask-repeat: no-repeat;



  -webkit-mask-repeat: no-repeat;



}







/* Soft glow blobs */



#group-departures::after {



  content: "";



  position: absolute;



  top: -120px;



  right: -100px;



  width: 500px;



  height: 500px;



  border-radius: 50%;



  background: radial-gradient(



    circle,



    rgba(45, 125, 196, 0.07) 0%,



    transparent 70%



  );



  pointer-events: none;



  z-index: 0;



}







#group-departures > * {



  position: relative;



  z-index: 1;



}







/* ── HEADER ── */



.gd-header {



  display: flex;



  justify-content: space-between;



  align-items: flex-end;



  margin-bottom: 56px;



}



.gd-header .view-all {



  font-size: 0.78rem;



  color: var(--blue);



  font-weight: 600;



  border-bottom: 1px solid rgba(45, 125, 196, 0.4);



  padding-bottom: 2px;



  text-decoration: none;



}







/* ── ROADMAP WRAPPER ── */



.gd-roadmap {



  position: relative;



  padding: 0 0 24px;



}







/* The horizontal spine */



.gd-spine {



  position: absolute;



  top: 52px;



  left: 48px;



  right: 48px;



  height: 3px;



  background: linear-gradient(



    90deg,



    transparent 0%,



    rgba(45, 125, 196, 0.3) 8%,



    var(--blue) 20%,



    var(--blue) 80%,



    rgba(45, 125, 196, 0.3) 92%,



    transparent 100%



  );



  border-radius: 3px;



  z-index: 0;



}







/* Animated dashes on spine */



.gd-spine::after {



  content: "";



  position: absolute;



  top: -1px;



  left: 0;



  width: 60px;



  height: 5px;



  background: linear-gradient(



    90deg,



    transparent,



    rgba(255, 255, 255, 0.9),



    transparent



  );



  border-radius: 3px;



  animation: spineGlide 4s linear infinite;



}



@keyframes spineGlide {



  0% {



    transform: translateX(0);



    opacity: 0;



  }



  10% {



    opacity: 1;



  }



  90% {



    opacity: 1;



  }



  100% {



    transform: translateX(calc(100vw - 300px));



    opacity: 0;



  }



}







/* ── STOPS TRACK ── */



.gd-stops {



  display: grid;



  grid-template-columns: repeat(5, 1fr);



  gap: 16px;



  position: relative;



  z-index: 1;



}







/* ── SINGLE STOP ── */



.gd-stop {



  display: flex;



  flex-direction: column;



  align-items: center;



  cursor: pointer;



}







/* Node circle on the spine */



.gd-node {



  width: 24px;



  height: 24px;



  border-radius: 50%;



  background: var(--white);



  border: 3px solid var(--blue);



  box-shadow: 0 0 0 5px rgba(45, 125, 196, 0.12);



  margin-bottom: 18px;



  position: relative;



  flex-shrink: 0;



  transition:



    transform 0.3s ease,



    box-shadow 0.3s ease;



  z-index: 2;



}



.gd-node::after {



  content: "";



  position: absolute;



  inset: 3px;



  border-radius: 50%;



  background: var(--blue);



  transform: scale(0);



  transition: transform 0.3s ease;



}



.gd-stop:hover .gd-node,



.gd-stop.gd-active .gd-node {



  transform: scale(1.3);



  box-shadow: 0 0 0 8px rgba(45, 125, 196, 0.18);



}



.gd-stop:hover .gd-node::after,



.gd-stop.gd-active .gd-node::after {



  transform: scale(1);



}







/* Card body */



.gd-card {



  background: rgba(255, 255, 255, 0.88);



  backdrop-filter: blur(12px);



  border: 1px solid rgba(45, 125, 196, 0.12);



  border-radius: 20px;



  overflow: hidden;



  width: 100%;



  box-shadow: 0 4px 22px rgba(15, 45, 74, 0.08);



  transition:



    transform 0.38s cubic-bezier(0.22, 0.68, 0, 1.2),



    box-shadow 0.38s ease,



    border-color 0.3s;



}



.gd-stop:hover .gd-card {



  transform: translateY(-8px);



  box-shadow: 0 22px 52px rgba(15, 45, 74, 0.16);



  border-color: rgba(45, 125, 196, 0.3);



}







/* Card image */



.gd-card-img {



  position: relative;



  height: 140px;



  overflow: hidden;



  font-size: 0;



  line-height: 0;



}



.gd-card-img img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transition: transform 0.65s ease;



}



.gd-stop:hover .gd-card-img img {



  transform: scale(1.08);



}



.gd-card-img::after {



  content: "";



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to bottom,



    transparent 40%,



    rgba(10, 30, 60, 0.45) 100%



  );



}







/* Seat tag */



.gd-seat-tag {



  position: absolute;



  top: 12px;



  right: 12px;



  background: rgba(255, 255, 255, 0.95);



  color: var(--blue-deep);



  font-size: 0.6rem;



  font-weight: 700;



  letter-spacing: 0.07em;



  text-transform: uppercase;



  padding: 4px 10px;



  border-radius: 20px;



  z-index: 2;



  box-shadow: 0 2px 8px rgba(15, 45, 74, 0.15);



  border: 1px solid rgba(45, 125, 196, 0.2);



}



.gd-seat-tag.tag-hot {



  color: #c0392b;



  border-color: rgba(192, 57, 43, 0.2);



}



.gd-seat-tag.tag-new {



  background: var(--blue);



  color: #fff;



  border-color: transparent;



}



.gd-seat-tag.tag-pop {



  background: var(--skin-warm);



  color: #fff;



  border-color: transparent;



}



.gd-seat-tag.tag-gtd {



  background: #1a7a4a;



  color: #fff;



  border-color: transparent;



}







/* Stop number badge */



.gd-stop-num {



  position: absolute;



  bottom: 10px;



  left: 12px;



  z-index: 2;



  font-size: 1.8rem;



  font-weight: 700;



  color: rgba(255, 255, 255, 0.18);



  line-height: 1;



  font-family: var(--font);



  pointer-events: none;



}







/* Card body text */



.gd-card-body {



  padding: 14px 16px 16px;



}



.gd-card-title {



  font-size: 0.9rem;



  font-weight: 600;



  color: var(--text-main);



  line-height: 1.3;



  margin-bottom: 6px;



}



.gd-card-date {



  font-size: 0.68rem;



  color: var(--text-muted);



  display: flex;



  align-items: center;



  gap: 5px;



  margin-bottom: 10px;



}



.gd-card-date i {



  color: var(--blue);



}







/* Bottom accent line */



.gd-card-bar {



  height: 3px;



  border-radius: 0 0 20px 20px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  transform: scaleX(0);



  transform-origin: left;



  transition: transform 0.4s ease;



}



.gd-stop:hover .gd-card-bar {



  transform: scaleX(1);



}







/* Connector arrow between stops */



.gd-connector {



  position: absolute;



  top: 41px;



  font-size: 1rem;



  color: rgba(45, 125, 196, 0.5);



  pointer-events: none;



  z-index: 3;



}







/* Destination stamp watermark inside card */



.gd-dest-stamp {



  position: absolute;



  bottom: 8px;



  right: 10px;



  font-size: 1.6rem;



  z-index: 2;



  opacity: 0.85;



  line-height: 1;



}







/* ── SCROLL ON MOBILE ── */



@media (max-width: 1100px) {



  .gd-stops {



    grid-template-columns: repeat(3, 1fr);



  }



  .gd-spine {



    display: none;



  }



}



@media (max-width: 700px) {



  .gd-stops {



    grid-template-columns: repeat(2, 1fr);



  }



  .gd-header {



    flex-direction: column;



    align-items: flex-start;



    gap: 14px;



  }



}



@media (max-width: 480px) {



  .gd-stops {



    grid-template-columns: 1fr;



  }



  .gd-node {



    display: none;



  }



}







/* ================================================================



   WHERE WE REACH — Interactive Split: List (left) + Image Frame (right)



   Light, modern, eyecatchy. No images needed in grid — all JS driven.



   Paste at END of style-home.css (replaces old #where-we-reach block)



   ================================================================ */







#where-we-reach {



  padding: 28px 6%;



  background: white;



  position: relative;



  overflow: hidden;



}







#where-we-reach::before {



  content: "";



  position: absolute;



  inset: 0;



  pointer-events: none;



  z-index: 0;



}



#where-we-reach > * {



  position: relative;



  z-index: 1;



}







/* ── HEADER ── */



.wwr-header {



  display: flex;



  align-items: flex-end;



  justify-content: space-between;



  margin-bottom: 52px;



  flex-wrap: wrap;



  gap: 20px;



}



.wwr-intro {



  font-size: 0.88rem;



  color: var(--text-muted);



  max-width: 380px;



  line-height: 1.8;



  margin-top: 8px;



}







/* ── SPLIT LAYOUT ── */



.wwr-split {



  display: grid;



  grid-template-columns: 1fr 1fr;



  gap: 36px;



  align-items: start;



}







/* ── LEFT: DESTINATION LIST ── */



.wwr-list {



  display: flex;



  flex-direction: column;



  gap: 0;



}







.wwr-region-group {



  margin-bottom: 8px;



}







.wwr-region-label {



  font-size: 0.58rem;



  font-weight: 700;



  letter-spacing: 0.24em;



  text-transform: uppercase;



  color: var(--blue);



  padding: 10px 18px 6px;



  display: block;



  opacity: 0.7;



}







.wwr-item {



  display: flex;



  align-items: center;



  gap: 14px;



  padding: 12px 18px;



  border-radius: 14px;



  cursor: pointer;



  transition:



    background 0.25s ease,



    transform 0.25s ease,



    box-shadow 0.25s;



  position: relative;



  border: 1px solid transparent;



}



.wwr-item:hover {



  background: rgba(255, 255, 255, 0.85);



  border-color: rgba(45, 125, 196, 0.12);



  transform: translateX(4px);



  box-shadow: 0 4px 18px rgba(45, 125, 196, 0.08);



}



.wwr-item.wwr-active {



  background: rgba(255, 255, 255, 0.97);



  border-color: rgba(45, 125, 196, 0.22);



  box-shadow: 0 6px 24px rgba(45, 125, 196, 0.13);



  transform: translateX(6px);



}







/* Active left accent bar */



.wwr-item.wwr-active::before {



  content: "";



  position: absolute;



  left: 0;



  top: 8px;



  bottom: 8px;



  width: 3px;



  background: linear-gradient(180deg, var(--blue), var(--skin-warm));



  border-radius: 3px;



}







/* Flag / icon */



.wwr-item-flag {



  font-size: 1.4rem;



  line-height: 1;



  flex-shrink: 0;



  width: 36px;



  height: 36px;



  display: flex;



  align-items: center;



  justify-content: center;



  background: rgba(45, 125, 196, 0.06);



  border-radius: 10px;



  transition: background 0.25s;



}



.wwr-item.wwr-active .wwr-item-flag,



.wwr-item:hover .wwr-item-flag {



  background: rgba(45, 125, 196, 0.12);



}







/* Text */



.wwr-item-text {



  flex: 1;



  min-width: 0;



}



.wwr-item-name {



  font-size: 1.22rem;



  font-weight: 600;



  color: var(--text-main);



  line-height: 1.2;



}



.wwr-item-places {



  font-size: 0.98rem;



  color: var(--text-muted);



  margin-top: 2px;



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;



}







/* Count badge */



.wwr-item-count {



  font-size: 0.62rem;



  font-weight: 700;



  color: var(--blue);



  background: rgba(45, 125, 196, 0.08);



  border: 1px solid rgba(45, 125, 196, 0.15);



  padding: 3px 9px;



  border-radius: 20px;



  flex-shrink: 0;



}



.wwr-item.wwr-active .wwr-item-count {



  background: var(--blue);



  color: #fff;



  border-color: transparent;



}







/* Arrow indicator */



.wwr-item-arrow {



  font-size: 0.7rem;



  color: var(--text-muted);



  opacity: 0;



  transform: translateX(-4px);



  transition:



    opacity 0.2s,



    transform 0.2s;



  flex-shrink: 0;



}



.wwr-item:hover .wwr-item-arrow,



.wwr-item.wwr-active .wwr-item-arrow {



  opacity: 1;



  transform: translateX(0);



  color: var(--blue);



}







/* ── RIGHT: IMAGE FRAME ── */



.wwr-frame {



  position: sticky;



  top: 100px;



}







.wwr-frame-shell {



  position: relative;



  border-radius: 28px;



  overflow: hidden;



  aspect-ratio: 4 / 3;



  background: var(--blue-pale);



  box-shadow:



    0 12px 48px rgba(15, 45, 74, 0.15),



    0 2px 8px rgba(15, 45, 74, 0.08);



  border: 1px solid rgba(45, 125, 196, 0.12);



}







/* Image slides */



.wwr-img-slide {



  position: absolute;



  inset: 0;



  opacity: 0;



  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);



  border-radius: 28px;



  overflow: hidden;



}



.wwr-img-slide.wwr-img-active {



  opacity: 1;



  z-index: 2;



}



.wwr-img-slide img {



  width: 100%;



  height: 100%;



  object-fit: cover;



  display: block;



  transform: scale(1.04);



  transition: transform 6s ease;



}



.wwr-img-slide.wwr-img-active img {



  transform: scale(1);



}







/* Placeholder shown when no image */



.wwr-frame-placeholder {



  position: absolute;



  inset: 0;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  z-index: 1;



  gap: 12px;



  transition: opacity 0.4s;



}



.wwr-frame-placeholder.wwr-ph-hidden {



  opacity: 0;



  pointer-events: none;



}



.wwr-ph-icon {



  font-size: 3rem;



  opacity: 0.25;



}



.wwr-ph-text {



  font-size: 0.78rem;



  color: var(--text-muted);



  opacity: 0.5;



}







/* Gradient overlay on image */



.wwr-frame-overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to top,



    rgba(10, 30, 60, 0.82) 0%,



    rgba(10, 30, 60, 0.12) 50%,



    transparent 75%



  );



  z-index: 3;



  border-radius: 28px;



}







/* Info panel at bottom */



.wwr-frame-info {



  position: absolute;



  bottom: 0;



  left: 0;



  right: 0;



  z-index: 4;



  padding: 22px 24px;



  display: flex;



  align-items: flex-end;



  justify-content: space-between;



}



.wwr-frame-name {



  font-size: 1.5rem;



  font-weight: 600;



  color: #fff;



  line-height: 1.15;



}



.wwr-frame-sub {



  font-size: 0.72rem;



  color: rgba(255, 255, 255, 0.6);



  margin-top: 4px;



}



.wwr-frame-explore {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  background: rgba(255, 255, 255, 0.15);



  border: 1.5px solid rgba(255, 255, 255, 0.35);



  color: #fff;



  font-size: 0.72rem;



  font-weight: 600;



  padding: 8px 16px;



  border-radius: 20px;



  backdrop-filter: blur(4px);



  text-decoration: none;



  transition: background 0.25s;



  flex-shrink: 0;



}



.wwr-frame-explore:hover {



  background: rgba(255, 255, 255, 0.28);



}







/* Top-left badge */



.wwr-frame-badge {



  position: absolute;



  top: 18px;



  left: 18px;



  z-index: 4;



  background: rgba(255, 255, 255, 0.92);



  border-radius: 12px;



  padding: 8px 14px;



  display: flex;



  align-items: center;



  gap: 8px;



  backdrop-filter: blur(8px);



  box-shadow: 0 4px 14px rgba(15, 45, 74, 0.18);



  transform: translateY(-4px);



  opacity: 0;



  transition:



    transform 0.4s ease,



    opacity 0.4s ease;



}



.wwr-frame-shell:hover .wwr-frame-badge,



.wwr-frame-badge.wwr-badge-show {



  transform: translateY(0);



  opacity: 1;



}



.wwr-frame-badge-flag {



  font-size: 1.2rem;



}



.wwr-frame-badge-label {



  font-size: 0.68rem;



  font-weight: 600;



  color: var(--text-main);



  line-height: 1.2;



}



.wwr-frame-badge-sub {



  font-size: 0.58rem;



  color: var(--text-muted);



}







/* Stats row below frame */



.wwr-stats {



  display: grid;



  grid-template-columns: repeat(4, 1fr);



  gap: 0;



  margin-top: 20px;



  background: rgba(255, 255, 255, 0.82);



  border: 1px solid rgba(45, 125, 196, 0.1);



  border-radius: 18px;



  overflow: hidden;



  backdrop-filter: blur(8px);



  box-shadow: 0 4px 20px rgba(45, 125, 196, 0.07);



}



.wwr-stat {



  text-align: center;



  padding: 20px 12px;



  border-right: 1px solid rgba(45, 125, 196, 0.08);



  transition: background 0.25s;



}



.wwr-stat:last-child {



  border-right: none;



}



.wwr-stat:hover {



  background: rgba(238, 244, 251, 0.7);



}



.wwr-stat-num {



  font-size: 1.6rem;



  font-weight: 600;



  background: linear-gradient(135deg, var(--blue), var(--skin-warm));



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



  line-height: 1;



}



.wwr-stat-label {



  font-size: 0.6rem;



  color: var(--text-muted);



  letter-spacing: 0.1em;



  text-transform: uppercase;



  margin-top: 4px;



}







/* ── RESPONSIVE ── */



@media (max-width: 960px) {



  .wwr-split {



    grid-template-columns: 1fr;



    gap: 28px;



  }



  .wwr-frame {



    position: static;



  }



  .wwr-frame-shell {



    aspect-ratio: 16 / 9;



  }



  .wwr-stats {



    grid-template-columns: repeat(2, 1fr);



  }



}



@media (max-width: 600px) {



  .wwr-header {



    flex-direction: column;



    align-items: flex-start;



  }



  .wwr-stats {



    grid-template-columns: repeat(2, 1fr);



  }



}



/* ================================================================



   BEYOND LUXURY SHOWCASE — Flex expanding panel accordion



   Highly modern, typography-centric, beautiful travel curations



   ================================================================ */







#beyond-luxury-showcase {



  padding: 88px 6%;



  background: linear-gradient(



    135deg,



    #fafaf7 0%,



    #f0f0e6 50%,



    #f2f1eb 100%



  ) !important;



  position: relative;



  overflow: hidden;



}







.bl-inner {



  position: relative;



  z-index: 1;



}







.bl-header {



  text-align: center;



  margin-bottom: 48px;



}







.bl-label {



  font-size: clamp(1.6rem, 2.8vw, 2.4rem);



  color: var(--text-main);



  font-weight: 600;



}







.bl-divider {



  width: 44px;



  height: 2px;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm));



  border-radius: 2px;



  margin: 14px auto 20px;



}







.bl-subtitle {



  font-size: 0.88rem;



  color: var(--text-muted);



  max-width: 480px;



  line-height: 1.8;



  margin: 0 auto;



}







.bl-accordion {



  display: flex;



  width: 100%;



  height: 480px;



  gap: 16px;



  overflow: hidden;



}







.bl-panel {



  flex: 1;



  height: 100%;



  border-radius: 16px;



  position: relative;



  overflow: hidden;



  cursor: pointer;



  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);



  background-size: cover;



  background-position: center;



  border: 1px solid rgba(255, 255, 255, 0.12);



}







.bl-panel:hover {



  flex: 3;



  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);



}







.bl-panel-overlay {



  position: absolute;



  inset: 0;



  background: linear-gradient(



    to top,



    rgba(0, 0, 0, 0.9) 0%,



    rgba(0, 0, 0, 0.25) 50%,



    rgba(0, 0, 0, 0.45) 100%



  );



  z-index: 1;



  display: flex;



  flex-direction: column;



  justify-content: flex-end;



  padding: 32px 28px;



  transition: background 0.3s ease;



}







.bl-panel:hover .bl-panel-overlay {



  background: linear-gradient(



    to top,



    rgba(0, 0, 0, 0.95) 0%,



    rgba(0, 0, 0, 0.15) 50%,



    rgba(0, 0, 0, 0.3) 100%



  );



}







.bl-panel-tag {



  display: inline-block;



  font-size: 0.58rem;



  font-weight: 700;



  letter-spacing: 0.18em;



  text-transform: uppercase;



  color: var(--skin-warm);



  margin-bottom: 8px;



  transition: transform 0.3s;



}







.bl-panel-name {



  font-size: 1.5rem;



  font-weight: 600;



  color: var(--white);



  line-height: 1.2;



  margin: 0;



  white-space: nowrap;



  transition: transform 0.3s;



}







.bl-panel-desc {



  font-size: 0.82rem;



  color: rgba(255, 255, 255, 0.7);



  line-height: 1.6;



  margin: 0;



  max-height: 0;



  opacity: 0;



  overflow: hidden;



  transition:



    max-height 0.4s ease,



    opacity 0.4s ease,



    margin-top 0.4s ease;



}







.bl-panel:hover .bl-panel-desc {



  max-height: 100px;



  opacity: 1;



  margin-top: 12px;



}







.bl-panel-cta {



  display: inline-flex;



  align-items: center;



  gap: 8px;



  color: var(--white);



  font-size: 0.8rem;



  font-weight: 600;



  margin-top: 16px;



  opacity: 0;



  transform: translateY(10px);



  transition:



    opacity 0.4s ease,



    transform 0.4s ease,



    color 0.25s;



}







.bl-panel-cta i {



  transition: transform 0.25s;



}







.bl-panel:hover .bl-panel-cta {



  opacity: 1;



  transform: translateY(0);



  transition-delay: 0.15s;



}







.bl-panel-cta:hover {



  color: var(--skin-warm);



}







.bl-panel-cta:hover i {



  transform: translateX(4px);



}







/* Tablet Showcase */



@media (max-width: 960px) {



  .bl-accordion {



    height: 380px;



  }



  .bl-panel-name {



    font-size: 1.3rem;



  }



}







/* Mobile Showcase Stack */



@media (max-width: 768px) {



  #beyond-luxury-showcase {



    padding: 60px 6%;



  }



  .bl-accordion {



    flex-direction: column;



    height: auto;



    gap: 16px;



  }



  .bl-panel {



    height: 140px;



    flex: none;



  }



  .bl-panel:hover {



    height: 220px;



    flex: none;



  }



  .bl-panel:hover .bl-panel-desc {



    max-height: 60px;



  }



  .bl-panel-overlay {



    padding: 24px 20px;



  }



}







/* ============================================================



   UNIFIED BACKGROUND STYLING FOR UNIFORM LOOK



   ============================================================ */







/* ── ENSURE UNIFORM LIGHT CREAM & PURE WHITE SECTION CADENCE ── */



#destinations,



#visa-consultancy,



#where-we-reach,



#gallery-section {



  background-color: #f8f4ed !important;



  background: #f8f4ed !important;



}







#beyond-luxury-showcase,



#exclusive-offers,



.ts-section,



#blog-section {



  background-color: #ffffff !important;



  background: #ffffff !important;



}







/* ── REMOVE ALL CLASHING FLOATING BLOBS & DOT PATTERNS ── */



#beyond-luxury-showcase::before,



#beyond-luxury-showcase::after,



#exclusive-offers::before,



#exclusive-offers::after,



.ts-section::before,



.ts-section::after,



#visa-consultancy::before,



#visa-consultancy::after,



#gallery-section::before,



#gallery-section::after {



  display: none !important;



  background: none !important;



  background-image: none !important;



}







/* ============================================================



   GLOBAL HOMEPAGE UNIFORMITY & COMPACTION



   ============================================================ */







/* ── 1. GLOBAL FONT UNIFICATION ── */



body, p, a, h1, h2, h3, h4, h5, h6, span, div, li, ul, ol, label, input, select, button, textarea, table, th, td, blockquote, strong, b, em {



  font-family: 'Titillium Web', sans-serif !important;



}







/* ── 2. UNIFORM SECTION PADDING (NO EXTRA GAPS) ── */



.tad-section,



#destinations,



#beyond-luxury-showcase,



#visa-consultancy,



#exclusive-offers,



#where-we-reach,



.ts-section,



#gallery-section {



  padding: 48px 6% !important;



  margin: 0 !important;



}







/* Specific adjustment for visa consultancy which previously had padding-bottom: 0 */



#visa-consultancy {



  padding-bottom: 48px !important;



}







/* ── 3. UNIFORM SECTION HEADINGS (SIZES, COLORS & LAYOUTS) ── */







/* Eyebrows */



.tad-eyebrow,



.section-label,



.bl-label,



.vc-label,



.ts-eyebrow,



.gallery-label,



.gallery-eyebrow {



  font-size: 0.8rem !important;



  letter-spacing: 0.22em !important;



  text-transform: uppercase !important;



  color: var(--blue) !important;



  font-weight: 600 !important;



  display: block !important;



  margin-bottom: 10px !important;



  text-align: center !important;



}







/* Titles */



.tad-title,



.section-title,



.bl-title,



.vc-title,



.ts-title,



.gallery-title {



  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;



  color: var(--text-main) !important;



  font-weight: 700 !important;



  line-height: 1.2 !important;



  margin: 0 !important;



  text-align: center !important;



}







/* Dividers */



.tad-divider,



.section-divider,



.bl-divider,



.vc-divider,



.ts-divider,



.gallery-divider {



  width: 44px !important;



  height: 2px !important;



  background: linear-gradient(90deg, var(--blue), var(--skin-warm)) !important;



  border-radius: 2px !important;



  margin: 14px auto 20px !important;



}







/* Subtitles */



.tad-subtitle,



.bl-subtitle,



.vc-subtitle,



.gallery-subtitle,



.section-subtitle,



.gallery-sub,



.ts-sub {



  font-size: 0.88rem !important;



  color: var(--text-muted) !important;



  line-height: 1.75 !important;



  max-width: 520px !important;



  margin: 0 auto !important;



  text-align: center !important;



}







/* ── CENTERING LAYOUT FOR EXCLUSIVE OFFERS & WHERE WE REACH HEADERS ── */



.eo-header,



.wwr-header {



  display: flex !important;



  flex-direction: column !important;



  align-items: center !important;



  justify-content: center !important;



  text-align: center !important;



  margin-bottom: 44px !important;



  gap: 16px !important;



  width: 100% !important;



}







.eo-header > div,



.wwr-header > div {



  display: flex !important;



  flex-direction: column !important;



  align-items: center !important;



  justify-content: center !important;



  text-align: center !important;



}







.wwr-intro {



  text-align: center !important;



  margin-left: auto !important;



  margin-right: auto !important;



  max-width: 520px !important;



}







/* ── CENTERING LAYOUT FOR OUR GALLERY HEADER ── */



.gallery-header {



  display: flex !important;



  flex-direction: column !important;



  align-items: center !important;



  justify-content: center !important;



  text-align: center !important;



  margin-bottom: 44px !important;



  gap: 20px !important;



  width: 100% !important;



}







.gallery-header-left {



  display: flex !important;



  flex-direction: column !important;



  align-items: center !important;



  justify-content: center !important;



  text-align: center !important;



  width: 100% !important;



}







.gallery-title-row {



  justify-content: center !important;



  text-align: center !important;



  margin-bottom: 12px !important;



}







.gallery-eyebrow {



  text-align: center !important;



  display: block !important;



  margin-bottom: 10px !important;



}







.gallery-header-right {



  display: flex !important;



  justify-content: center !important;



  width: 100% !important;



}







#mobile-menu {



  z-index: 99999 !important;



}







/* ── PROTECT NAVBAR & MOBILE MENU FROM GLOBAL MOSAIC FONT OVERRIDE ── */



#main-nav,



#main-nav *,



.main-nav,



.main-nav *,



#mobile-menu-content,



#mobile-menu-content * {



  font-family: "Titillium Web", sans-serif !important;



}



.fa,



.fa-solid,



.fa-regular,



.fa-brands,



[class^="fa-"],



[class*=" fa-"] {



  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;



}







/* ── MODERN NAV STYLING FOR UNIFORM LOOK Across Site ── */



#main-nav {



  position: sticky !important;



  top: 0 !important;



  z-index: 1000 !important;



  width: 100% !important;



  font-family: "Titillium Web", sans-serif !important;



  background: #ffffff !important;



  border-top: none !important;



  border-bottom: 1px solid rgba(42, 90, 140, 0.11) !important;



  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07) !important;



}







#main-nav ul li a {



  font-family: "Titillium Web", sans-serif !important;



  color: #0f2d4a !important;



  font-weight: 600 !important;



}



#main-nav ul li a:hover {



  color: #c9955c !important;



  background: transparent !important;



}







#main-nav .group:hover .absolute,



#main-nav .absolute {



  font-family: "Titillium Web", sans-serif !important;



  background: #ffffff !important;



  border: 1px solid rgba(42, 90, 140, 0.11) !important;



  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13) !important;



}



#main-nav .absolute a {



  color: #3a5068 !important;



  font-family: "Titillium Web", sans-serif !important;



  font-weight: 400 !important;



}



#main-nav .absolute a:hover {



  color: #0f2d4a !important;



  background: #eef4fb !important;



}







#main-nav a[href="book-now.php"] {



  font-family: "Titillium Web", sans-serif !important;



  font-weight: 600 !important;



}







html, body {



  overflow-x: clip !important;



  overflow-y: visible !important;



}







#top-contact-bar {



  position: -webkit-sticky !important;



  position: sticky !important;



  top: 0 !important;



  z-index: 1001 !important;



  height: 41px !important;



  box-sizing: border-box !important;



  margin: 0 !important;



}







#main-nav {



  position: -webkit-sticky !important;



  position: sticky !important;



  top: 41px !important;



  z-index: 1000 !important;



  width: 100% !important;



  margin: 0 !important;



}







@media screen and (max-width: 1023px) {



  #main-nav {



    top: 0 !important;



  }



}







/* ── MOBILE HOMEPAGE UNIFORM SECTION PADDING (NO EXTRA VOIDS) ── */



@media screen and (max-width: 768px) {



  .tad-section,



  #destinations,



  #beyond-luxury-showcase,



  #visa-consultancy,



  #exclusive-offers,



  #where-we-reach,



  .ts-section,



  #gallery-section {



    padding: 28px 4% !important;



    margin: 0 !important;



  }



}



@media screen and (max-width: 480px) {



  .tad-section,



  #destinations,



  #beyond-luxury-showcase,



  #visa-consultancy,



  #exclusive-offers,



  #where-we-reach,



  .ts-section,



  #gallery-section {



    padding: 22px 3% !important;



    margin: 0 !important;



  }



}











/* ===== EQUAL HEIGHT EO CARDS & LEVEL BUTTONS ===== */



.eo-card {



  display: flex !important;



  flex-direction: column !important;



  height: 100% !important;



}







.eo-img-wrap {



  height: 195px !important;



  min-height: 195px !important;



  max-height: 195px !important;



  flex-shrink: 0 !important;



}







.eo-body {



  display: flex !important;



  flex-direction: column !important;



  flex: 1 1 auto !important;



  padding: 18px 18px 20px !important;



}







.eo-title {



  font-size: 0.98rem !important;



  font-weight: 700 !important;



  color: var(--text-main) !important;



  line-height: 1.35 !important;



  height: 2.7em !important;



  min-height: 2.7em !important;



  max-height: 2.7em !important;



  display: -webkit-box !important;



  -webkit-line-clamp: 2 !important;



  -webkit-box-orient: vertical !important;



  overflow: hidden !important;



  margin-bottom: 10px !important;



}







.eo-price-row {



  display: flex !important;



  align-items: baseline !important;



  gap: 8px !important;



  margin-bottom: 4px !important;



  height: 28px !important;



}







.eo-price-sub {



  font-size: 0.72rem !important;



  color: var(--text-muted) !important;



  display: block !important;



  height: 18px !important;



  line-height: 18px !important;



  white-space: nowrap !important;



  overflow: hidden !important;



  text-overflow: ellipsis !important;



  margin-bottom: 14px !important;



}







.eo-divider {



  height: 1px !important;



  background: var(--border) !important;



  margin: auto 0 14px 0 !important;



}







.eo-book-btn {



  margin-top: auto !important;



  display: block !important;



  width: 100% !important;



  padding: 12px 0 !important;



  text-align: center !important;



}