@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@300;400;500;600;700;800;900&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ═══════════════════════════════════════════════
   DREAMWORLD VACATIONS - GLOBAL PREMIUM THEME
   ═══════════════════════════════════════════════ */

:root {
  /* Premium Typography Pairings — Fraunces for display/headings (warm, characterful serif suited to a travel/hospitality brand), Work Sans for body */
  --font-sans: 'Work Sans', sans-serif;
  --font-display: 'Fraunces', serif;
  --font-serif: 'Fraunces', serif;

  /* Bright Ocean & Turquoise Tones */
  --navy: #0F3254;      /* Deep soft navy for headings */
  --navy2: #FFFFFF;     /* Light navbar background */
  --navy3: #00A8B5;     /* Ocean Turquoise primary */
  --slate: #05828E;     /* Medium Teal */
  
  /* Sunset Coral Accents */
  --accent: #FF7A59;    /* Coral Sunset primary */
  --accent2: #FD9B7F;   /* Light Coral secondary */
  --accent3: #FFEAA7;   /* Sunny Yellow Sand */
  
  /* Clean Backgrounds & Neutrals */
  --white: #FFFFFF;
  --off: #FAF8F5;       /* Warm linen white background */
  --txt: #2D3436;       /* Deep soft grey/charcoal text */
  --txt2: #4F5E71;      /* Secondary dark grey text */
  --muted: #8E9EAF;     /* Soft blue-grey */
  --muted2: #CAD5E2;    /* Faded border/track grey */
  
  /* Natural Sand Borders */
  --border: #E5DEC9;
  --border2: #ECE6D5;
  
  /* Feedback States */
  --green: #2ecc71;
  --green2: #E8F8F0;
  --red: #e74c3c;
  --red2: #FCECEB;
  --orange: #e67e22;
  --orange2: #FDF2E9;
  --blue: #3498db;
  --blue2: #EBF5FB;

  /* Global Shadow Systems */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 50, 84, 0.06);
  --shadow-lg: 0 12px 28px rgba(15, 50, 84, 0.1);
  --shadow-glow: 0 0 15px rgba(255, 122, 89, 0.35);
}

/* ── Smooth Scrolling ── */
html {
  scroll-behavior: smooth;
}

/* ── Global Enhancements ── */
body {
  font-family: var(--font-sans) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--off);
  color: var(--txt);
}

/* Custom Premium Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--off);
}
::-webkit-scrollbar-thumb {
  background: var(--muted2);
  border-radius: 10px;
  border: 2px solid var(--off);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ── Interactive Navigation & Menus ── */
nav {
  box-shadow: 0 4px 24px rgba(15, 50, 84, 0.08) !important;
  backdrop-filter: none !important;
  background: #FFFFFF !important; /* solid white background */
  transition: all 0.3s ease;
  border-bottom: 1px solid var(--border2);
}

/* Original colorful logo configuration */
.nav-logo img, .snav-logo img {
  height: 52px !important;
  width: auto !important;
  display: block !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}

.nav-links a, .nav-trigger {
  position: relative;
  transition: color 0.3s ease !important;
}

/* Modern Sliding Underline on Nav Hover */
.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}
.nav-item:hover::after, .nav-item.active::after {
  width: 80%;
}

.nav-links a:hover, .nav-trigger:hover, .nav-item.active>a, .nav-item.active .nav-trigger {
  color: var(--accent) !important;
}

/* Glassmorphism Dropdowns */
.mega, .topbar-pay-drop, .amc-pay-drop {
  backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(229, 231, 235, 0.7) !important;
  border-top: 3px solid var(--accent) !important;
  box-shadow: 0 20px 40px rgba(10, 22, 40, 0.12) !important;
  border-radius: 8px;
  overflow: hidden;
}

/* ── Buttons with Lifting Glow ── */
.btn, .lf-btn, .submit-btn, .contact-btn, .nav-cta, .topbar-paynow {
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-gold, .lf-btn, .submit-btn, .nav-cta, .topbar-paynow {
  background: var(--accent) !important;
  color: var(--navy) !important;
  border: none !important;
}

.btn-gold:hover, .lf-btn:hover, .submit-btn:hover, .nav-cta:hover, .topbar-paynow:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-glow) !important;
  background: var(--accent2) !important;
}

.btn-outline {
  border-radius: 6px !important;
  border-width: 2px !important;
  border-color: var(--navy) !important;
  color: var(--navy) !important;
  background: transparent !important;
  transition: all 0.25s ease !important;
}
.btn-outline:hover {
  background: var(--navy) !important;
  color: var(--white) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(10, 22, 40, 0.15) !important;
}

/* ── Card Lift & Polish ── */
.card, .rel-card, .trip-summary, .info-card, .sc-card {
  border-radius: 12px !important;
  border: 1px solid var(--border2) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover, .rel-card:hover, .trip-summary:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lg) !important;
  border-color: rgba(200, 151, 42, 0.5) !important;
}

/* Rarity/Badge Glows */
.tag-hot {
  background: var(--orange2) !important;
  color: var(--orange) !important;
  border: 1px solid rgba(196, 98, 26, 0.2) !important;
  border-radius: 4px;
}
.tag-new {
  background: var(--blue2) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(26, 79, 138, 0.2) !important;
  border-radius: 4px;
}

/* ── Interactive List Rows ── */
.doc-row, .pay-row, .itin-day, .support-contact {
  border-radius: 8px;
  margin-bottom: 4px;
  transition: all 0.2s ease;
}
.doc-row:hover, .pay-row:hover, .support-contact:hover {
  background: rgba(200, 151, 42, 0.04) !important;
  transform: translateX(4px);
  border-left: 2px solid var(--accent);
}

/* ── Smooth Image Visuals ── */
img {
  transition: transform 0.5s ease;
}
.ts-img:hover img, .rel-card:hover img {
  transform: scale(1.04);
}

/* ── Portal Sidebar Updates ──
   Stays dark top-to-bottom on purpose: every label in here (logo, user
   name, nav items) is set to white/near-white text. var(--navy2) is the
   *light* navbar color used on the public site's top nav — using it here
   put white text against a white top half of the sidebar. */
.portal-sidebar {
  background: linear-gradient(180deg, var(--navy) 0%, #081D33 100%) !important;
}
/* Belt-and-suspenders: each section gets its own explicit dark background
   too, so the nav list can't end up transparent/uncovered regardless of
   the sidebar box's actual height vs. its content height. */
.sb-logo, .sb-user, .sb-nav {
  background: var(--navy) !important;
}
.sb-item {
  border-left: 4px solid transparent !important;
  transition: all 0.2s ease !important;
}
.sb-item.active {
  border-left-color: var(--accent2) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--white) !important;
}
.sb-item:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  padding-left: 1.6rem !important;
  color: var(--accent2) !important;
}

/* ── Modals Glass Overlays ── */
#book-holiday-modal, #amc-due-modal {
  backdrop-filter: blur(8px) !important;
}

/* ═══════════════════════════════════════════════
   PREMIUM HEADER & NAVIGATION TYPOGRAPHY OVERRIDES
   ═══════════════════════════════════════════════ */

/* Topbar Typography */
.topbar {
  font-family: var(--font-sans) !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.06em !important;
  font-weight: 400 !important;
  color: var(--txt2) !important; /* Soft Charcoal color */
  border-bottom: 1px solid var(--border2);
}

.topbar-left span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.topbar-right {
  align-items: center !important;
}

.topbar-right a {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  color: var(--txt2) !important; /* Soft Charcoal color */
  transition: all 0.2s ease;
}

.topbar-right a:hover {
  color: var(--accent) !important;
}

/* Pay Now Button (Topbar) */
.topbar-paynow {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  font-size: 0.72rem !important;
  padding: 0.25rem 0.9rem !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1.5px solid var(--navy3) !important; /* Turquoise border */
  color: var(--navy3) !important;
  box-shadow: none !important;
}
.topbar-pay-wrap:hover .topbar-paynow {
  background: var(--navy3) !important;
  color: var(--white) !important;
  border-color: var(--navy3) !important;
  box-shadow: 0 3px 10px rgba(0, 168, 181, 0.3) !important;
}

/* Payment Gateway Dropdown */
.pay-drop-header {
  font-family: var(--font-display) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 400 !important;
  color: var(--accent2) !important;
  padding: 0.5rem 1rem !important;
  background: var(--navy) !important;
}

.pay-name {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  color: var(--navy) !important;
}

.pay-desc {
  font-family: var(--font-sans) !important;
  font-weight: 400 !important;
  font-size: 0.66rem !important;
  color: var(--muted) !important;
}

/* Main Navigation Menu */
.nav-item > a, .nav-trigger {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.08em !important;
  color: var(--txt) !important; /* Soft Charcoal color */
  text-transform: uppercase !important;
}

.nav-item:hover > a, .nav-item:hover .nav-trigger, .nav-item.active > a, .nav-item.active .nav-trigger {
  color: var(--accent) !important;
}

.nav-item.active > a {
  border-bottom: 2px solid var(--accent) !important;
}

/* Mega Menu Dropdown */
.mega-top-bar {
  font-family: var(--font-display) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.15em !important;
  font-weight: 400 !important;
  color: var(--accent2) !important;
  padding: 0.6rem 1.75rem !important;
}

.mega-col h4 {
  font-family: var(--font-display) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.06em !important;
  font-weight: 400 !important;
  color: var(--navy) !important;
  border-bottom: 2px solid var(--accent) !important;
  padding-bottom: 0.4rem !important;
}

.mega-col ul li a {
  font-family: var(--font-sans) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: var(--txt2) !important;
  transition: all 0.2s ease;
}

.mega-col ul li a:hover {
  color: var(--accent) !important;
  padding-left: 0.4rem !important;
}

.mp-num {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  color: var(--navy) !important;
}

.mp-lbl {
  font-family: var(--font-sans) !important;
  font-size: 0.56rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--muted) !important;
}

.mega-promo-cta {
  font-family: var(--font-sans) !important;
  font-size: 0.66rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  border-radius: 4px !important;
}

/* Right Side elements */
.nav-phone {
  font-family: var(--font-sans) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.02em !important;
  color: var(--txt2) !important; /* Soft charcoal text */
}

.nav-phone strong {
  font-family: var(--font-sans) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important; /* Deep navy text */
  letter-spacing: 0.02em !important;
  display: block !important;
}

.nav-cta {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  padding: 0.45rem 1.1rem !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  background: var(--accent) !important; /* Sunset Coral */
  color: var(--white) !important;
  box-shadow: 0 4px 10px rgba(255, 122, 89, 0.2) !important;
  transition: all 0.25s ease !important;
}

.nav-cta:hover {
  background: var(--accent2) !important;
  box-shadow: 0 6px 16px rgba(255, 122, 89, 0.3) !important;
  transform: translateY(-1.5px) !important;
}

.nav-portal-btn {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em !important;
  padding: 0.42rem 1.1rem !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: 1.5px solid var(--navy3) !important; /* Turquoise outline */
  color: var(--navy3) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.25s ease !important;
}

/* Every page's own inline CSS has tried to hide this below ~900px, but
   this rule's !important always won regardless of source order — it was
   never actually hidden on mobile. Member Login is reachable through the
   mobile nav panel instead at this width, so hide the header button here,
   centrally, with matching !important so it actually takes effect.
   Matches the mobile-nav breakpoint (767px) exactly — a mismatched
   threshold here would show the hamburger AND this button at once in
   the gap between the two breakpoints. */
@media (max-width: 767px) {
  .nav-portal-btn {
    display: none !important;
  }
}

.nav-portal-btn:hover {
  background: var(--navy3) !important;
  color: var(--white) !important;
  border-color: var(--navy3) !important;
  box-shadow: 0 4px 12px rgba(0, 168, 181, 0.25) !important;
  transform: translateY(-1.5px) !important;
}

/* ── Rich Page Titles and Section Headings (Fraunces, bold display weight — warm serif suited to a travel brand) ── */
.sec-title h2,
.page-hero h1,
.hero h1,
.why-right h2,
.cta-band h2,
.te-title {
  font-family: 'Fraunces', var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: uppercase !important;
}

/* Unified styling for italic highlights in headings */
h1 em, h2 em, h3 em, .sec-title h2 em, .te-title em, .hero-content h1 em {
  font-family: inherit !important;
  font-style: italic !important;
  font-weight: inherit !important;
  text-transform: inherit !important;
  color: var(--accent) !important;
}

.sec-title p,
.page-hero-sub,
.hero-desc,
.cta-band p {
  font-family: var(--font-sans) !important;
  letter-spacing: 0.02em !important;
}

.pkg-name,
.h-card-name,
.mood-name,
.blog-title,
.blog-sm-title,
.why-card h3 {
  font-family: var(--font-serif) !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════
   SITE-WIDE READABILITY & VISIBILITY ENHANCEMENTS
   ═══════════════════════════════════════════════ */

/* Body text, descriptions and card content */
p,
.pkg-desc,
.why-card p,
.h-card-price span,
.h-card-link,
.rel-card p,
.card p,
.intro-text p,
.testi-card blockquote,
.hero-desc,
.footer-brand p {
  font-size: 0.88rem !important; /* Scaled up from 0.72rem - 0.8rem for visibility */
  line-height: 1.75 !important;
  font-weight: 400 !important;
  color: var(--txt2) !important;
}

/* Make blockquotes italic but readable — testimonial cards are a bright
   white background now, so this needs dark text, not the white it used
   to need back when the card background was dark navy. */
.testi-card blockquote {
  font-size: 0.9rem !important;
  font-style: italic !important;
  color: var(--txt2) !important;
}

/* Links & columns */
.mega-col ul li a,
.footer-col ul li a,
.pay-option,
.topbar-right a {
  font-size: 0.85rem !important; /* Scaled up from 0.8rem */
  line-height: 1.65 !important;
}

/* Badges, tags, and tiny labels */
.tag-hot,
.tag-new,
.pkg-tag,
.pkg-badge,
.pkg-days,
.mood-tag,
.mp-lbl,
.certs span {
  font-size: 0.65rem !important; /* Scaled up from 0.52rem - 0.58rem */
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  padding: 3px 8px !important;
}

/* Booking Strip & Search Forms — floating pill search card */
.booking-strip h3 {
  font-size: 1.15rem !important;
}

.bf-group label {
  font-size: 0.8rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 700 !important;
}

.bf-input,
.bf-select {
  font-size: 0.78rem !important;
  padding: 0 !important;
}

.bf-btn {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  padding: 0.9rem 1.9rem !important;
}

/* Buttons sizing */
.btn,
.nav-cta,
.topbar-paynow,
.nav-portal-btn,
.mega-promo-cta {
  font-size: 0.78rem !important;
  padding: 0.5rem 1.25rem !important;
}

.topbar-paynow {
  padding: 0.28rem 0.95rem !important;
}

/* Small UI Details */
.breadcrumb,
.pay-desc {
  font-size: 0.78rem !important;
  font-weight: 400 !important;
}

.pay-desc {
  color: var(--muted) !important;
}

.pay-name {
  font-size: 0.84rem !important;
}


/* ═══════════════════════════════════════════════
   CUSTOM DESIGN SECTIONS FOR HOME PAGE (INDEX)
   ═══════════════════════════════════════════════ */

/* ── Great Journeys Section ── */
.great-journeys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--white);
  padding: 4rem 3rem 0;
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: 2rem;
  border-bottom: 6px solid #22e25b; /* Solid neon green highlight bar */
}

@media(max-width: 992px) {
  .great-journeys {
    grid-template-columns: 1fr;
    padding-bottom: 2rem;
  }
}

.gj-visuals {
  position: relative;
  width: 100%;
  height: 480px;
  background: url('images/world_map_light.jpg') no-repeat center;
  background-size: cover;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.gj-woman-img {
  width: 80%;
  max-height: 450px;
  object-fit: contain;
  z-index: 5;
  filter: drop-shadow(0 10px 20px rgba(10,22,40,0.15));
}

/* Floating Polaroids */
.polaroid-collage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.polaroid-frame {
  position: absolute;
  background: var(--white);
  padding: 0.6rem 0.6rem 1.8rem;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.06);
}

.polaroid-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.p-barcelona {
  width: 130px;
  height: 150px;
  top: 40px;
  left: 5%;
  transform: rotate(-10deg);
}

.p-waterfall {
  width: 120px;
  height: 140px;
  top: 20px;
  left: 45%;
  transform: rotate(6deg);
}

.p-plane {
  width: 135px;
  height: 110px;
  top: 100px;
  right: 5%;
  transform: rotate(-8deg);
}

/* Pin Overlay */
.gj-pin {
  position: absolute;
  top: 20px;
  left: 20%;
  width: 28px;
  height: auto;
  z-index: 10;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
}

.gj-text {
  padding: 2rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.gj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy3);
  border-left: 2.5px solid #3ac4d2;
  padding-left: 0.6rem;
}

.gj-eyebrow svg {
  width: 14px;
  height: 14px;
  fill: #3ac4d2;
}

.gj-title {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 400 !important;
  color: var(--accent);
  line-height: 1.2;
}

.gj-title span {
  color: var(--accent);
  display: block;
}

.gj-title strong {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--accent);
}

.gj-desc {
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
  color: var(--txt2) !important;
  margin-top: 0.5rem;
  border-left: 1px solid var(--border);
  padding-left: 1.2rem;
}


/* ── Travel Experience Section ── */
.travel-experience {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  background: var(--off);
  padding: 5rem 3rem;
  align-items: center;
  gap: 3rem;
}

@media(max-width: 992px) {
  .travel-experience {
    grid-template-columns: 1fr;
    padding: 3rem 1.5rem;
  }
}

.te-visuals {
  position: relative;
  width: 100%;
  height: 480px;
  background: url('images/world_map_light.jpg') no-repeat center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.te-man-img {
  width: 85%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  z-index: 5;
  filter: drop-shadow(0 12px 24px rgba(10,22,40,0.12));
}

/* Floating Travel Icons decoration */
.te-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.te-icon-bubble {
  position: absolute;
  background: var(--white);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(200, 151, 42, 0.15);
}

.te-icon-bubble svg {
  width: 22px;
  height: 22px;
  fill: var(--muted);
}

.te-bubble-1 { top: 15%; left: 8%; }
.te-bubble-2 { top: 22%; right: 5%; }
.te-bubble-3 { bottom: 35%; left: 2%; }
.te-bubble-4 { bottom: 15%; right: 10%; }

.te-content {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.te-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--navy3);
  border-left: 2.5px solid #3ac4d2;
  padding-left: 0.6rem;
}

.te-eyebrow svg {
  width: 14px;
  height: 14px;
  fill: #3ac4d2;
}

.te-title {
  font-family: var(--font-display) !important;
  font-size: 2.5rem !important;
  font-weight: 400 !important;
  color: var(--navy) !important;
  line-height: 1.2;
}

.te-title em {
  font-family: inherit !important;
  font-style: italic !important;
  color: var(--accent) !important;
}

.te-desc {
  font-family: var(--font-sans) !important;
  font-size: 0.95rem !important;
  line-height: 1.75 !important;
  color: var(--txt2) !important;
  max-width: 580px;
}

/* Destination mini-cards */
.te-cards {
  display: flex;
  gap: 1.25rem;
  margin: 1rem 0;
}

@media(max-width: 576px) {
  .te-cards {
    flex-direction: column;
  }
}

.te-card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border2);
  padding: 0.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 0.9rem;
  flex: 1;
  align-items: center;
  transition: all 0.3s ease;
}

.te-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(200, 151, 42, 0.4);
}

.te-card-img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.te-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0; /* allows text truncation */
}

.te-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.te-card-name {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
}

.te-card-flag {
  width: 18px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.te-card-loc {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.te-card-rating {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--txt2);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.te-card-rating span {
  color: #f1b81c; /* Gold color for star */
}

/* Actions Row */
.te-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 0.5rem;
}

.btn-teal {
  background: #3ac4d2 !important;
  color: var(--white) !important;
  border: none !important;
  box-shadow: 0 4px 14px rgba(58, 196, 210, 0.3) !important;
}

.btn-teal:hover {
  background: #2cb0be !important;
  box-shadow: 0 6px 18px rgba(58, 196, 210, 0.45) !important;
  transform: translateY(-2px);
}

.te-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.te-video-avatar-wrap {
  position: relative;
  width: 36px;
  height: 36px;
}

.te-video-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--white);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.te-play-icon {
  position: absolute;
  bottom: -2px;
  right: -6px;
  background: var(--navy);
  color: var(--accent2);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  border: 1px solid var(--white);
}

.te-video-text {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: #bfa15f;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}

.te-video-btn:hover .te-video-text {
  color: var(--accent);
}


/* ── Partners & Instagram Section ── */
.partners-instagram {
  background: var(--white);
}

.partners-row {
  background: #f4efe6;
  padding: 2.2rem 3rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
}

.partner-logo {
  height: 38px;
  width: auto;
  opacity: 0.5;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

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

.instagram-sec {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

@media(max-width: 768px) {
  .instagram-sec {
    grid-template-columns: 1fr;
  }
}

.ig-purple-card {
  background: #8e70f2;
  color: var(--white);
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.2rem;
}

.ig-purple-card svg {
  width: 52px;
  height: 52px;
  fill: var(--white);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
}

.ig-purple-card h4 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.ig-purple-card span {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  opacity: 0.85;
}

.ig-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
}

@media(max-width: 576px) {
  .ig-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.ig-item {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  display: block;
}

.ig-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ig-overlay {
  position: absolute;
  inset: 0;
  background: rgba(142, 112, 242, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.ig-overlay svg {
  width: 28px;
  height: 28px;
  fill: var(--white);
  transform: scale(0.8);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ig-item:hover img {
  transform: scale(1.08);
}

.ig-item:hover .ig-overlay {
  opacity: 1;
}

.ig-item:hover .ig-overlay svg {
  transform: scale(1);
}



/* ── Cinematic Hero Slider Upgrades ── */
.hero-slide {
  transform: scale(1.05);
  transition: opacity 1.4s ease, transform 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.hero-slide.active {
  opacity: 1 !important;
  transform: scale(1.15) !important;
}

.hero-ov {
  background: linear-gradient(to bottom, rgba(7, 18, 33, 0.82) 0%, rgba(7, 18, 33, 0.25) 28%, rgba(7, 18, 33, 0.55) 65%, rgba(7, 18, 33, 0.92) 100%) !important;
}

.hero-content h1 {
  font-family: var(--font-display) !important;
  font-size: 4.4rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.05 !important;
  text-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.hero-content h1 em {
  font-family: inherit !important;
  font-style: italic !important;
  font-weight: inherit !important;
  color: var(--accent2) !important;
}

.hero-desc {
  font-size: 1.05rem !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
  max-width: 580px !important;
}


/* ── Home Page Sticky Scroll Navbar Transitions ── */
.topbar.home-topbar {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  z-index: 1000 !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

.topbar.home-topbar a {
  color: rgba(255, 255, 255, 0.75) !important;
}

.topbar.home-topbar a:hover {
  color: var(--accent) !important;
}

.topbar.home-topbar .topbar-paynow {
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.topbar.home-topbar .topbar-pay-wrap:hover .topbar-paynow {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #fff !important;
  color: #fff !important;
  box-shadow: none !important;
}

nav.home-nav {
  position: absolute !important;
  top: 0 !important; /* sit at the very top of the page */
  left: 0 !important;
  right: 0 !important;
  background: rgba(8, 20, 36, 0.88) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, padding 0.4s ease, height 0.4s ease !important;
  z-index: 999 !important;
}
/* Root cause of the original "blank gap on the right, fixes itself on
   scroll" bug: the unwrapped desktop nav-links row overflows past the
   device width with nothing to collapse it, which makes Android Chrome
   auto-zoom the whole page out to fit that overflow (confirmed via live
   remote debugging — window.visualViewport.scale ~0.367 instead of 1.0).
   The mobile hamburger menu stops this at its source below 767px (a real
   phone's width, comfortably below this). Above 767px — including a
   phone's "Desktop site" mode (~980px) — the full nav is shown at its
   natural width on purpose: the user can pinch-zoom/pan, same as any
   other desktop-site content; overflow-x:hidden is scoped to only the
   narrow range where it's actually needed, so it never clips the desktop
   nav's own content (e.g. the Book Now button) in that wider range. */
@media (max-width: 767px) {
  nav.home-nav {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
}

nav.home-nav .nav-logo img {
  mix-blend-mode: normal !important;
  filter: none !important;
  transition: none !important;
}

nav.home-nav .nav-item > a, nav.home-nav .nav-trigger {
  color: #FFFFFF !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7) !important;
  letter-spacing: 0.07em !important;
  transition: color 0.3s ease !important;
}

nav.home-nav .nav-item:hover > a, nav.home-nav .nav-item:hover .nav-trigger {
  color: var(--accent) !important;
}

nav.home-nav .nav-phone {
  color: rgba(255, 255, 255, 0.88) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  transition: color 0.3s ease !important;
}

nav.home-nav .nav-phone strong {
  color: #ff9f43 !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6) !important;
  transition: color 0.3s ease !important;
}

nav.home-nav .nav-portal-btn {
  border: 1.5px solid #00c9db !important;
  color: #ffffff !important;
  background: rgba(0, 168, 181, 0.22) !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 12px rgba(0, 168, 181, 0.28) !important;
  transition: all 0.3s ease !important;
}

nav.home-nav .nav-portal-btn:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
  border-color: #fff !important;
}

/* Scrolled Nav State (Transition to Clean Solid White Bar) */
nav.home-nav.nav-scrolled {
  position: fixed !important;
  top: 0 !important;
  background: #FFFFFF !important; /* solid white background on scroll */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 4px 20px rgba(15, 50, 84, 0.08) !important;
  border-bottom: 1px solid var(--border2) !important;
  height: 72px !important;
}

nav.home-nav.nav-scrolled .nav-logo img {
  mix-blend-mode: normal !important;
  filter: none !important;
}

nav.home-nav.nav-scrolled .nav-item > a,
nav.home-nav.nav-scrolled .nav-trigger {
  color: var(--txt) !important;
  text-shadow: none !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
}

nav.home-nav.nav-scrolled .nav-item:hover > a,
nav.home-nav.nav-scrolled .nav-item:hover .nav-trigger,
nav.home-nav.nav-scrolled .nav-item.active > a,
nav.home-nav.nav-scrolled .nav-item.active .nav-trigger {
  color: var(--accent) !important;
  text-shadow: none !important;
}

nav.home-nav.nav-scrolled .chev {
  color: var(--txt2) !important;
  text-shadow: none !important;
}

nav.home-nav.nav-scrolled .nav-phone {
  color: var(--txt2) !important;
  text-shadow: none !important;
}

nav.home-nav.nav-scrolled .nav-phone strong {
  color: var(--navy) !important;
  text-shadow: none !important;
  font-weight: 600 !important;
}

nav.home-nav.nav-scrolled .nav-portal-btn {
  border: 1.5px solid var(--navy3) !important;
  color: var(--navy3) !important;
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

nav.home-nav.nav-scrolled .nav-portal-btn:hover {
  background: var(--navy3) !important;
  color: var(--white) !important;
  border-color: var(--navy3) !important;
  box-shadow: 0 4px 12px rgba(0, 168, 181, 0.25) !important;
}

/* ── Footer Pay Now Button & Links ── */
.footer-pay-box {
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.footer-paynow-btn {
  background: var(--accent) !important;
  color: var(--navy) !important;
  border: none !important;
  padding: 0.4rem 1rem !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: default !important;
}
.footer-paynow-btn svg {
  stroke: var(--navy) !important;
}
.footer-pay-links {
  display: flex;
  gap: 0.6rem;
}
.f-pay-link {
  font-size: 0.76rem !important;
  font-weight: 500;
  color: var(--navy3) !important;
  border: 1px solid var(--navy3);
  padding: 0.3rem 0.8rem;
  border-radius: 4px;
  transition: all 0.25s ease;
  text-decoration: none;
}
.f-pay-link:hover {
  background: var(--navy3);
  color: var(--white) !important;
  box-shadow: 0 4px 10px rgba(0, 168, 181, 0.15);
}

/* ── Footer Background Photo Overlay ── */
footer {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(6, 20, 34, 0.90) 0%, rgba(6, 20, 34, 0.94) 100%),
    url('https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1800&q=70') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ── Footer Text Colors (bright white against the photo background) ── */
footer, footer p, footer span, footer li { color: rgba(255, 255, 255, 0.85) !important; }
.footer-brand p { color: rgba(255, 255, 255, 0.9) !important; }
.footer-col h4 { color: var(--accent2) !important; }
.footer-col ul li a { color: rgba(255, 255, 255, 0.9) !important; }
.footer-col ul li a:hover { color: var(--white) !important; }
.footer-bottom, .footer-bottom span { color: rgba(255, 255, 255, 0.8) !important; }
.footer-bottom a { color: rgba(255, 255, 255, 0.95) !important; }
.footer-bottom a:hover { color: var(--accent2) !important; }
.certs span { color: rgba(255, 255, 255, 0.75) !important; }
.soc { color: rgba(255, 255, 255, 0.95) !important; }
.footer-newsletter p { color: rgba(255, 255, 255, 0.85) !important; }

/* ── Footer Newsletter Signup ── */
.footer-newsletter { margin-top: 1.5rem; }
.footer-newsletter h4 {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--accent2);
  display: inline-block;
}
.footer-newsletter p {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-bottom: 0.9rem;
}
.footer-nl-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 300px;
}
.footer-nl-form input {
  background: var(--white);
  border: none;
  padding: 0.7rem 0.9rem;
  font-size: 0.78rem;
  font-family: var(--font-sans);
  border-radius: 2px;
  color: #111;
  outline: none;
}
.footer-nl-form button {
  background: var(--accent2);
  color: var(--navy);
  border: none;
  padding: 0.7rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.2s ease;
  font-family: var(--font-sans);
}
.footer-nl-form button:hover { background: var(--accent); }

/* ── Back to Top Button ── */
.back-to-top {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  width: 46px;
  height: 46px;
  background: var(--accent2);
  color: var(--navy);
  border: none;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 500;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--accent); transform: translateY(-2px); }
@media(max-width: 640px) {
  .back-to-top { bottom: 1.1rem; right: 1.1rem; width: 42px; height: 42px; }
}

/* ── Interactive Card-Expanding Slider Upgrades ── */
.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background-color: #0F3254;
}

/* Scroll-reveal "pop" for grid tiles (destinations, packages, why-cards,
   testimonials, hotel cards). Each tile starts hidden and pops into place
   the first time it enters the viewport; .in-view is added once by JS and
   never removed, so it never re-triggers on scroll-back. */
.reveal-tile {
  opacity: 0;
  transform: translateY(26px) scale(0.96);
  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-tile.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Content block positioning (used as-is by the static page-heroes on other
   pages; the home hero overrides position/bottom via ".stack-card
   .hero-content" in index.html's own stylesheet since its text now lives
   inside each stacked card rather than floating over a full-bleed image). */
.hero-content {
  position: absolute;
  left: 10%;
  top: 38%;
  transform: translateY(-50%);
  z-index: 5;
  color: var(--white);
  max-width: 600px;
}

/* Navigation controls */
.slider-arrows {
  position: absolute;
  bottom: 12%;
  left: 10%;
  display: flex;
  gap: 1rem;
  z-index: 10;
}

.slider-arrows .arrow-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  color: var(--white) !important;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-arrows .arrow-btn:hover {
  background: var(--white);
  color: var(--navy) !important;
  border-color: var(--white) !important;
  box-shadow: 0 4px 12px rgba(255,255,255,0.25);
  transform: scale(1.05);
}

/* Responsive constraints */
@media (max-width: 768px) {
  .hero-content {
    left: 5%;
    right: 5%;
    max-width: 100%;
    top: 50%;
  }
  .slider-arrows {
    bottom: 8%;
    left: 5%;
  }
}

/* Global Scroll Reveal Animations */
[class^="reveal-"]:not(.reveal-stagger), [class*=" reveal-"]:not(.reveal-stagger) {
  opacity: 0;
  will-change: transform, opacity;
}

.reveal-fade {
  transform: none;
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-slide-up {
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-slide-left {
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-slide-right {
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-scale {
  transform: scale(0.95);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active in-view state */
[class^="reveal-"].in-view, [class*=" reveal-"].in-view, .reveal-tile.in-view {
  opacity: 1 !important;
  transform: none !important;
}

/* Image scale-in + mask/clip-path "uncover" reveal. Applied automatically
   by theme.js to any <img> inside a reveal-marked tile/section. Driven
   purely by the ancestor's existing .in-view class via a descendant
   selector, so it stays in sync with the tile's own fade/slide with no
   extra JS observing. Starts clipped away (as if covered) and slightly
   zoomed in, then uncovers and settles to its normal size. */
.img-uncover {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.12);
  transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1) 0.1s,
              transform 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

[class^="reveal-"].in-view .img-uncover,
[class*=" reveal-"].in-view .img-uncover,
.reveal-tile.in-view .img-uncover {
  clip-path: inset(0 0 0% 0);
  transform: scale(1);
}

/* Gentle floating idle animation for decorative feature icons across the
   marketing pages, so the interface doesn't feel static between scrolls.
   Deliberately excludes functional/portal icons (sidebar nav, doc rows). */
@keyframes floatIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.why-icon, .afc-fact-icon, .vt-item-icon, .mem-tile-icon,
.wi-icon, .ci-icon, .amen-icon, .ms-icon {
  animation: floatIdle 4.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .img-uncover {
    transition: none;
    clip-path: none;
    transform: none;
  }
  .why-icon, .afc-fact-icon, .vt-item-icon, .mem-tile-icon,
  .wi-icon, .ci-icon, .amen-icon, .ms-icon {
    animation: none;
  }
}