/* =========================================================
   SkyTrav — Style Sheet
   Fonts : Poppins (display) / Urbanist (body)
   ========================================================= */

:root{
  /* colors sampled from brand reference */
  --cream:        #FBF7ED;
  --cream-soft:    #F5EFDD;
  --navy-deep:     #16283A;   /* main dark heading text */
  --navy-darker:   #0C2434;   /* footer bottom bar */
  --blue-brand:    #23608F;   /* accent blue (headings / CTA banner) */
  --blue-soft:     #D8E6EF;   /* icon chip bg */
  --blue-pale:     #E9F1F7;   /* service card bg (blue tone) */
  --gold:          #F5C445;   /* primary buttons */
  --gold-dark:     #E8AC1F;
  --text-body:     #48504F;
  --text-muted:    #6B7472;
  --white:         #ffffff;
  --border-soft:   rgba(22,40,58,0.08);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 30px rgba(22,40,58,0.08);
  --shadow-card: 0 14px 34px rgba(22,40,58,0.10);

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Urbanist', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-body);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent; /* removes the grey flash Android/iOS show on tap */
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--navy-deep); margin:0; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

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

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.95rem;
  border:none;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  background:var(--gold);
  color:var(--navy-deep);
  padding:12px 8px 12px 22px;
}
.btn-primary:hover{
  background:var(--gold-dark);
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(232,172,31,0.35);
}
.btn-lg{ padding:15px 8px 15px 26px; font-size:1rem; }
.btn-icon-circle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--navy-deep);
  color:var(--gold);
  flex-shrink:0;
}
.btn-lg .btn-icon-circle{ width:34px; height:34px; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(251,247,237,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:14px;
  padding-bottom:14px;
  gap:20px;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand-logo{ height:40px; width:auto; }

.main-nav .nav-list{
  display:flex;
  align-items:center;
  gap:34px;
}
.nav-link{
  font-family:var(--font-display);
  font-weight:500;
  font-size:0.95rem;
  color:var(--navy-deep);
  position:relative;
  padding-bottom:4px;
}
.nav-link.active-link{ color:var(--blue-brand); }
.nav-link.active-link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:2px;
  background:var(--gold);
  border-radius:2px;
}
.nav-link:hover{ color:var(--blue-brand); }

.header-actions{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.header-phone{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-display);
  font-weight:500;
  font-size:0.92rem;
  color:var(--navy-deep);
}
.header-phone svg{ color:var(--blue-brand); }

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  background:transparent;
  border:none;
  border-radius:12px;
  flex-shrink:0;
}
.hamburger span{
  display:block;
  width:22px;
  height:2px;
  margin:0 auto;
  background:var(--navy-deep);
  transition:transform .25s ease, opacity .25s ease;
}
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none;
  flex-direction:column;
  gap:18px;
  background:var(--cream);
  padding:22px 24px 28px;
  border-top:1px solid var(--border-soft);
}
.mobile-menu ul{ display:flex; flex-direction:column; gap:16px; }
.mobile-nav-link{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  color:var(--navy-deep);
}
.mobile-phone{ font-size:1rem; }
.mobile-plan-btn{ justify-content:center; width:100%; padding:14px 20px; }
.menu-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(12,24,34,0.35);
  z-index:900;
}

/* =========================================================
   Hero
   ========================================================= */
.hero{ position:relative; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media-img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-media-placeholder{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 80% 20%, rgba(245,196,69,0.35), transparent 45%),
    linear-gradient(120deg,#dfe9ee 0%, #f4ecd8 55%, #f8e3c9 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:rgba(22,40,58,0.35);
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.85rem;
  line-height:1.4;
  border:2px dashed rgba(22,40,58,0.18);
}
.hero-inner{ position:relative; z-index:1; padding:64px 24px 72px; }
.hero-content{ max-width:640px; }

.eyebrow{
  display:inline-block;
  background:var(--blue-soft);
  color:var(--blue-brand);
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:0.06em;
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:18px;
}
.hero-title{
  font-size:2.5rem;
  line-height:1.12;
  font-weight:700;
  color:var(--navy-deep);
  margin-bottom:14px;
}
.text-accent{ color:var(--blue-brand); }
.hero-subtitle{
  font-size:1rem;
  color:var(--text-body);
  max-width:460px;
  margin-bottom:26px;
  position:relative;
  padding-bottom:16px;
}
.hero-subtitle::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:52px; height:3px;
  background:var(--gold);
  border-radius:3px;
}

.hero-quicklinks{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-card);
  margin-bottom:26px;
}
.hero-quicklinks li{
  flex:1 1 21%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  font-family:var(--font-display);
  font-weight:500;
  font-size:0.82rem;
  color:var(--navy-deep);
  min-width:78px;
}
.quick-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:14px;
  background:var(--cream-soft);
  color:var(--navy-deep);
}

.hero-location{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:600;
  color:var(--navy-deep);
  margin-bottom:4px;
  font-size:0.95rem;
}
.hero-location svg{ color:var(--blue-brand); flex-shrink:0; }
.hero-address{
  display:inline-block;
  color:var(--blue-brand);
  text-decoration:underline;
  font-size:0.9rem;
  margin-bottom:26px;
  font-weight:700; 
}

/* =========================================================
   Section shared
   ========================================================= */
.section{ padding:64px 0; }
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}
.section-title{
  font-size:1.7rem;
  font-weight:700;
  position:relative;
  padding-bottom:12px;
}
.section-title::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:44px; height:3px;
  background:var(--gold);
  border-radius:3px;
}
.link-arrow{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.9rem;
  color:var(--navy-deep);
  flex-shrink:0;
}
.link-arrow svg{ color:var(--blue-brand); }
/* .link-arrow used standalone (not inside a .section-head row), e.g. under
   a paragraph in .about-content — give it its own top spacing + underline
   so it still reads as a link and doesn't sit flush against the text. */
.about-content > .link-arrow, .contact-content > .link-arrow{
  margin-top:18px;
  display:inline-flex;
  border-bottom:1px solid var(--border-soft);
  padding-bottom:6px;
}
.about-content > .link-arrow:hover, .contact-content > .link-arrow:hover{ border-color:var(--blue-brand); color:var(--blue-brand); }

/* =========================================================
   Destinations
   ========================================================= */
.destinations{ background:var(--cream); }
.dest-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.dest-card{
  display:block; /* cards are <a> tags now (clickable through to packages.html) — anchors are inline by default */
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:var(--shadow-card);
}
.dest-img-placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.78rem;
  color:rgba(255,255,255,0.75);
  background:linear-gradient(160deg,#5b7a8c 0%, #7a95a3 45%, #a9beb0 100%);
  border:2px dashed rgba(255,255,255,0.35);
}
.dest-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.dest-card-overlay{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px;
  background:linear-gradient(0deg, rgba(10,20,28,0.82) 0%, rgba(10,20,28,0.35) 60%, transparent 100%);
  color:var(--white);
}
.dest-card-overlay h3{ color:var(--white); font-size:1.15rem; margin-bottom:2px; }
.dest-card-overlay p{ font-size:0.85rem; opacity:0.9; margin-bottom:10px; }
.price-badge{
  display:inline-block;
  background:var(--gold);
  color:var(--navy-deep);
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.78rem;
  padding:6px 12px;
  border-radius:999px;
}
.dest-dots{ display:none; justify-content:center; gap:8px; margin-top:20px; }
.dest-dots span{ width:7px; height:7px; border-radius:50%; background:var(--border-soft); }
.dest-dots span.active{ background:var(--gold-dark); width:20px; border-radius:5px; }

/* =========================================================
   Services
   ========================================================= */
.services-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
}
.service-card{
  padding:26px 22px;
  border-radius:var(--radius-md);
  transition:transform .2s ease, box-shadow .2s ease;
}
.service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.service-card.tone-blue{ background:var(--blue-pale); }
.service-card.tone-cream{ background:var(--cream-soft); }
.service-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px; height:52px;
  border-radius:14px;
  background:var(--white);
  color:var(--navy-deep);
  margin-bottom:16px;
}
.service-card h3{ font-size:1.05rem; margin-bottom:8px; }
.service-card p{ font-size:0.88rem; color:var(--text-muted); line-height:1.5; }
.service-card{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.3);
    box-shadow:
        0 20px 40px rgba(0,0,0,.08);
}

/* =========================================================
   About
   ========================================================= */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.about-media{ border-radius:var(--radius-lg); overflow:hidden; }
.about-img-placeholder{
  aspect-ratio:9/7;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.85rem;
  color:rgba(255,255,255,0.8);
  background:linear-gradient(150deg,#2e4657 0%, #5b7a8c 55%, #cfa06a 100%);
  border:2px dashed rgba(255,255,255,0.35);
  border-radius:var(--radius-lg);
}
.about-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:var(--radius-lg);
}
.about-content p{ font-size:1rem; line-height:1.7; margin:18px 0 26px; }
.trust-row{ display:flex; gap:28px; flex-wrap:wrap; }
.trust-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.88rem;
  color:var(--navy-deep);
}
.trust-icon{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--blue-pale);
  color:var(--blue-brand);
  flex-shrink:0;
}

/* =========================================================
   Why choose (card variant — prominent on mobile)
   ========================================================= */
.why-choose{ display:none; }
.why-grid{ display:flex; flex-direction:column; gap:14px; }
.why-card{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px;
  border-radius:var(--radius-md);
  background:var(--blue-pale);
}
.why-card:nth-child(2){ background:var(--cream-soft); }
.why-icon{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border-radius:12px;
  background:var(--white);
  color:var(--navy-deep);
  flex-shrink:0;
}
.why-card h3{ font-size:1rem; margin-bottom:4px; }
.why-card p{ font-size:0.86rem; color:var(--text-muted); line-height:1.5; }

/* =========================================================
   CTA banner
   ========================================================= */
.cta-banner{ background:var(--blue-brand); background-image:radial-gradient(circle at 90% 10%, rgba(255,255,255,0.08), transparent 45%); }
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:44px 24px;
  flex-wrap:wrap;
}
.cta-left{ display:flex; align-items:center; gap:18px; }
.cta-icon{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:50%;
  background:var(--white);
  color:var(--blue-brand);
  flex-shrink:0;
}
.cta-left h2{ color:var(--white); font-size:1.35rem; margin-bottom:4px; }
.cta-left p{ color:rgba(255,255,255,0.85); font-size:0.92rem; }

/* =========================================================
   Contact
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}
.contact-list{ display:flex; flex-direction:column; gap:18px; margin-top:24px; }
.contact-list li{ display:flex; align-items:center; gap:14px; font-size:0.98rem; }
.contact-icon{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--blue-pale);
  color:var(--blue-brand);
  flex-shrink:0;
}
.contact-icon.whatsapp{ background:#DEF5E5; color:#25B360; }
.contact-media{ border-radius:var(--radius-lg); overflow:hidden; }
.contact-img-placeholder{
  aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.85rem;
  color:rgba(255,255,255,0.8);
  background:linear-gradient(150deg,#3a5163 0%, #6f8a97 100%);
  border:2px dashed rgba(255,255,255,0.35);
  border-radius:var(--radius-lg);
}
.contact-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:var(--radius-lg);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background:var(--cream-soft); padding-top:56px; }
.footer-top{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:32px;
  padding-bottom:40px;
}
.footer-logo{ height:42px; width:auto; margin-bottom:18px; }
.footer-social{ display:flex; gap:10px; }
.social-btn{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  border-radius:50%;
  color:var(--white);
  transition:transform .2s ease;
}
.social-btn:hover{ transform:translateY(-3px); }
.social-btn.instagram{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af); }
.social-btn.facebook{ background:#1877F2; }
.social-btn.whatsapp{ background:#25D366; }

.footer-col h4{
  font-size:1rem;
  margin-bottom:18px;
  font-weight:600;
}
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:0.92rem; color:var(--text-body); }
.footer-col a:hover{ color:var(--blue-brand); }
.footer-contact li{ display:flex; align-items:center; gap:10px; font-size:0.92rem; color:var(--text-body); }
.footer-contact svg{ color:var(--blue-brand); flex-shrink:0; }

.footer-bottom{ background:var(--navy-darker); padding:18px 0; }
.footer-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.footer-bottom-inner p{ color:rgba(255,255,255,0.75); font-size:0.85rem; }
.heart{ font-size:0.85rem; }

/* =========================================================
   Back to top
   ========================================================= */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--navy-deep);
  color:var(--gold);
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-soft);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:800;
}
.back-to-top.visible{ opacity:1; visibility:visible; transform:translateY(0); }

/* =========================================================
   Scroll reveal
   ========================================================= */
[data-reveal]{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}
[data-reveal].in-view{ opacity:1; transform:translateY(0); }

/* =========================================================
   MOBILE (<= 900px) — matches mobile reference: floating cards,
   stacked sections, hamburger nav
   ========================================================= */
@media (max-width:900px){
  .container{ padding:0 18px; }

  .main-nav{ display:none; }
  .header-actions{ display:none; }
  .hamburger{ display:flex; }

  .mobile-menu.open{ display:flex; }
  .menu-overlay.open{ display:block; }

  .hero{ margin:14px 14px 0; border-radius:26px; overflow:hidden; }
  .hero-inner{ padding:34px 18px 40px; }
  .hero-title{ font-size:2rem; }
  .hero-subtitle{ font-size:0.92rem; }
  .hero-quicklinks{ padding:16px; gap:10px; }
  .hero-quicklinks li{ flex:1 1 40%; font-size:0.76rem; }
  .quick-icon{ width:40px; height:40px; }
  .btn-lg{ width:100%; justify-content:space-between; }

  .section{ padding:44px 0; }
  .section-title{ font-size:1.4rem; }

  .dest-grid{
    grid-template-columns:repeat(4,86%);
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .dest-grid::-webkit-scrollbar{ display:none; }
  .dest-card{ scroll-snap-align:start; }
  .dest-dots{ display:flex; }

  .services-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .service-card{ padding:20px 16px; }

  .about-grid{ grid-template-columns:1fr; gap:28px; }
  .about-content p{ margin:14px 0 20px; }
  .trust-row{ display:none; } /* replaced by Why Choose cards on mobile */

  .why-choose{ display:block; }

  .cta-banner{ margin:0 14px; border-radius:26px; overflow:hidden; }
  .cta-inner{ flex-direction:column; align-items:flex-start; padding:32px 22px; }
  .cta-inner .btn-lg{ width:100%; justify-content:center; }

  .contact-grid{ grid-template-columns:1fr; gap:28px; }
  .contact-media{ order:2; }

  .footer-top{ grid-template-columns:1fr 1fr; gap:30px 20px; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-bottom-inner{ flex-direction:column; align-items:flex-start; gap:6px; }

  /* Room for the fixed mobile CTA bar (see "Mobile sticky CTA bar" block
     further down) so the footer's last line is never hidden behind it. */
  .site-footer{ padding-bottom:74px; }
}

@media (max-width:520px){
  .hero-title{ font-size:1.7rem; }
  .services-grid{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .dest-grid{ grid-template-columns:82%; }
}

/* =========================================================================
   INTERACTIVE / MOTION LAYER
   ---------------------------------------------------------------------
   Everything from here to the end of the file is ADDITIVE polish:
   cursor glow, hover micro-interactions, scroll-reveal stagger, etc.
   It does NOT touch the color palette (--gold / --blue-brand / --navy-deep
   ... all still come from the :root block at the very top of this file)
   and it does NOT change any layout widths, grids or spacing rules above.

   Want to turn a specific effect off? Just delete that one numbered
   block below — each is self-contained. Want to switch a glow color?
   Edit the rgba() values, they are intentionally written next to the
   matching CSS variable name in a comment so you know what to swap.
   ========================================================================= */

/* ---- 1. Cursor glow (soft light that follows the mouse) ---------------
   Two elements are created in script.js: #cursorGlow (big soft blur)
   and #cursorDot (small dot glued to the pointer). Both are purely
   decorative, sit above the background but never block clicks
   (pointer-events:none), and are automatically hidden on touch screens
   because a "hover" cursor doesn't exist there. */
#cursorGlow{
  position:fixed;
  top:0; left:0;
  width:440px;
  height:440px;
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  transform:translate(-50%,-50%);
  /* gold + blue-brand blended at low opacity, matches existing palette */
  background:radial-gradient(circle, rgba(245,196,69,0.15) 0%, rgba(35,96,143,0.07) 45%, transparent 70%);
  opacity:0;
  transition:opacity .5s ease;
  will-change:transform;
}
#cursorGlow.is-active{ opacity:1; }

#cursorDot{
  position:fixed;
  top:0; left:0;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gold-dark);
  pointer-events:none;
  z-index:2001;
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .3s ease, width .2s ease, height .2s ease, background .2s ease;
}
#cursorDot.is-active{ opacity:0.85; }
/* grows + goes translucent whenever it passes over anything clickable */
#cursorDot.is-hovering{ width:36px; height:36px; background:rgba(245,196,69,0.32); }

@media (hover:none), (pointer:coarse){
  /* touch devices: no mouse, so no point rendering these */
  #cursorGlow, #cursorDot{ display:none !important; }
}

/* ---- 2. Scroll-reveal stagger ------------------------------------------
   The base [data-reveal] fade-up rule already exists earlier in this file
   (search "Scroll reveal"). Here we just add an easing curve and let
   script.js stagger each card by setting --reveal-delay inline, so rows
   of cards cascade in one-by-one instead of popping in all at once. */
[data-reveal]{
  transition:opacity .7s cubic-bezier(.19,.85,.24,1), transform .7s cubic-bezier(.19,.85,.24,1);
  transition-delay:var(--reveal-delay, 0s);
}

/* ---- 3. Hero parallax --------------------------------------------------
   script.js nudges this element's transform a few pixels on scroll,
   this transition just smooths that motion out. */
.hero-media-img{ transition:transform .2s linear; }

/* ---- 4. Destination card hover: lift + image zoom ----------------------- */
.dest-card{ transition:transform .5s cubic-bezier(.19,.85,.24,1), box-shadow .5s ease; }
.dest-card:hover{ transform:translateY(-10px); box-shadow:0 26px 50px rgba(22,40,58,0.20); }
.dest-img{ transition:transform .7s cubic-bezier(.19,.85,.24,1); }
.dest-card:hover .dest-img{ transform:scale(1.09); }
.price-badge{ transition:transform .35s ease; }
.dest-card:hover .price-badge{ transform:translateY(-2px); }

/* ---- 5. Service card hover: icon tilt ----------------------------------- */
.service-icon{ transition:transform .35s cubic-bezier(.19,.85,.24,1), background .35s ease, color .35s ease; }
.service-card:hover .service-icon{ transform:rotate(-8deg) scale(1.1); background:var(--gold); color:var(--navy-deep); }

/* ---- 6. Why-choose card hover -------------------------------------------- */
.why-card{ transition:transform .3s ease, box-shadow .3s ease; }
.why-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }

/* ---- 7. Image zoom on About / Contact photos ----------------------------- */
.about-media, .contact-media{ overflow:hidden; }
.about-img, .contact-img{ transition:transform .7s cubic-bezier(.19,.85,.24,1); }
.about-media:hover .about-img, .contact-media:hover .contact-img{ transform:scale(1.06); }

/* ---- 8. Magnetic buttons -------------------------------------------------
   script.js shifts the button a few px toward the cursor while hovering
   (a "magnetic" feel); this transition makes that shift feel smooth and
   snap back neatly when the mouse leaves. */
.btn{ transition:transform .25s cubic-bezier(.19,.85,.24,1), box-shadow .2s ease, background .2s ease; }

/* ---- 9. Nav underline sweep ------------------------------------------------ */
.nav-link::before{
  content:"";
  position:absolute;
  left:0; right:100%; bottom:-2px;
  height:2px;
  background:var(--blue-brand);
  border-radius:2px;
  transition:right .3s cubic-bezier(.19,.85,.24,1);
}
.nav-link:hover::before{ right:0; }

/* ---- 10. Brand logo + back-to-top micro interactions ------------------------ */
.brand-logo{ transition:transform .35s ease; }
.brand:hover .brand-logo{ transform:rotate(-4deg) scale(1.05); }
.back-to-top{ transition:opacity .25s ease, transform .25s ease, visibility .25s ease, background .25s ease; }
.back-to-top:hover{ background:var(--blue-brand); transform:translateY(-4px); }
.social-btn{ transition:transform .25s ease, box-shadow .25s ease; }
.social-btn:hover{ box-shadow:0 10px 20px rgba(22,40,58,0.25); }

/* ---- 11. Sticky header shrink feel (class toggled by script.js on scroll) --- */
.site-header{ transition:box-shadow .3s ease, padding .3s ease; }

/* ---- 12. Respect "reduce motion" OS setting --------------------------------
   Accessibility: if the visitor's system asks for less motion, every
   transition/animation on the page collapses to near-instant and the
   cursor effects disappear entirely. */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  #cursorGlow, #cursorDot{ display:none !important; }
}

/* =========================================================================
   MOBILE STICKY CTA BAR
   ---------------------------------------------------------------------
   On mobile, the header's phone number + "Plan My Trip" button are
   hidden (replaced by the hamburger menu — see the <=900px block above),
   so there's no one-tap way to call or message us while browsing. This
   bar fixes that: a slim two-button strip pinned to the bottom of the
   screen, thumb-reachable at all times. Desktop never sees it.

   Markup (already added near the end of <body> on both pages):
     <div class="mobile-cta-bar">
       <a href="tel:..." class="mobile-cta-btn call">...Call</a>
       <a href="https://wa.me/..." class="mobile-cta-btn whatsapp">...WhatsApp</a>
     </div>
   ========================================================================= */
.mobile-cta-bar{ display:none; } /* desktop: hidden entirely */

@media (max-width:900px){
  .mobile-cta-bar{
    display:flex;
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:850; /* sits below .menu-overlay (900) so it's dimmed/covered while the mobile menu is open */
    background:var(--white);
    border-top:1px solid var(--border-soft);
    box-shadow:0 -8px 24px rgba(22,40,58,0.10);
    /* padding-bottom uses the safe-area inset so the bar clears the home
       indicator strip on notched iPhones instead of sitting under it */
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    gap:10px;
  }
  .mobile-cta-btn{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:0.88rem;
    padding:12px 10px;
    border-radius:999px;
    transition:transform .2s ease, filter .2s ease;
  }
  .mobile-cta-btn:active{ transform:scale(0.96); }
  .mobile-cta-btn.call{ background:var(--gold); color:var(--navy-deep); }
  .mobile-cta-btn.whatsapp{ background:#25D366; color:var(--white); }

  /* back-to-top needs to sit ABOVE the new bottom bar instead of
     overlapping it */
  .back-to-top{ bottom:82px; right:16px; }
}

/* =========================================================================
   PRELOADER (flight-path loading animation)
   ---------------------------------------------------------------------
   Full-screen overlay shown while the page's assets are loading. A plane
   glyph travels along a dashed arc while the SkyTrav wordmark pulses
   underneath. script.js removes/hides this on window "load" (with a
   safety timeout so it can never hang forever). Purely cosmetic — delete
   the markup + this block + the script.js "Preloader" section and the
   site works identically without it.
   ========================================================================= */
#preloader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cream);
  transition:opacity .5s ease, visibility .5s ease;
}
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:22px;
}
.preloader-path{
  position:relative;
  width:220px;
  height:70px;
}
.preloader-path svg{ width:100%; height:100%; overflow:visible; }
.preloader-track{
  fill:none;
  stroke:var(--border-soft);
  stroke-width:2;
  stroke-dasharray:4 8;
  stroke-linecap:round;
}
.preloader-plane{
  offset-path:path('M4,55 C60,10 160,10 216,55');
  offset-rotate:auto;
  animation:preloaderFly 1.6s ease-in-out infinite;
  color:var(--blue-brand);
  transform-origin:center;
}
@keyframes preloaderFly{
  0%{ offset-distance:0%; opacity:0; }
  8%{ opacity:1; }
  92%{ opacity:1; }
  100%{ offset-distance:100%; opacity:0; }
}
.preloader-word{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.1rem;
  letter-spacing:.06em;
  color:var(--navy-deep);
}
.preloader-word span{ color:var(--blue-brand); }
.preloader-dots{ display:flex; gap:6px; justify-content:center; }
.preloader-dots i{
  width:6px; height:6px; border-radius:50%;
  background:var(--gold-dark);
  animation:preloaderDot 1.1s ease-in-out infinite;
}
.preloader-dots i:nth-child(2){ animation-delay:.15s; }
.preloader-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes preloaderDot{
  0%,80%,100%{ transform:translateY(0); opacity:.4; }
  40%{ transform:translateY(-5px); opacity:1; }
}
/* Fallback for browsers without CSS motion-path (offset-path) support:
   plane just fades in place instead of flying — never breaks layout. */
@supports not (offset-path: path('M0,0')){
  .preloader-plane{ animation:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .preloader-plane{ animation:none; opacity:1; offset-distance:50%; }
  .preloader-dots i{ animation:none; opacity:.7; }
}

/* =========================================================================
   HERO BACKGROUND SLIDER (multiple crossfading images)
   ---------------------------------------------------------------------
   .hero-media now holds several stacked <img class="hero-slide">; script.js
   toggles "is-active" every few seconds to crossfade between them. Parallax
   (see script.js "Hero parallax") now transforms the whole .hero-slides
   wrapper instead of a single <img>, so it still works unchanged.
   ========================================================================= */
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero-slide.is-active{ opacity:1; }
.hero-dots{
  position:absolute;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  gap:8px;
}
.hero-dots button{
  width:8px; height:8px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.5);
  padding:0;
  transition:background .25s ease, transform .25s ease;
}
.hero-dots button.is-active{ background:var(--gold); transform:scale(1.25); }

/* =========================================================================
   EXCLUSIVE FARES POPUP
   ---------------------------------------------------------------------
   A dismissible promo modal for Gulf-country fares. script.js shows it a
   couple of seconds after the homepage loads (once per browser session)
   and wires up the close button / overlay click / Escape key.
   ========================================================================= */
.fares-popup-overlay{
  position:fixed;
  inset:0;
  z-index:9998;
  background:rgba(12,24,34,0.55);
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.fares-popup-overlay.is-open{ opacity:1; visibility:visible; }
.fares-popup{
  position:relative;
  width:100%;
  max-width:440px;
  background:var(--cream);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 70px rgba(12,24,34,0.35);
  padding:38px 30px 30px;
  text-align:center;
  transform:translateY(24px) scale(.97);
  transition:transform .4s cubic-bezier(.19,.85,.24,1);
  overflow:hidden;
}
.fares-popup-overlay.is-open .fares-popup{ transform:translateY(0) scale(1); }
.fares-popup::before{
  content:"";
  position:absolute;
  top:-60px; right:-60px;
  width:160px; height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,196,69,0.35), transparent 70%);
}
.fares-popup-close{
  position:absolute;
  top:14px; right:14px;
  width:32px; height:32px;
  border-radius:50%;
  border:none;
  background:var(--white);
  color:var(--navy-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-soft);
  transition:transform .2s ease, background .2s ease;
}
.fares-popup-close:hover{ background:var(--gold); transform:rotate(90deg); }
.fares-popup-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:var(--navy-deep);
  color:var(--gold);
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.72rem;
  letter-spacing:.06em;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:16px;
}
.fares-popup h3{
  font-size:1.4rem;
  line-height:1.35;
  margin-bottom:10px;
}
.fares-popup h3 span{ color:var(--blue-brand); }
.fares-popup p{
  font-size:0.94rem;
  line-height:1.6;
  color:var(--text-muted);
  margin-bottom:20px;
}
.fares-popup-countries{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-bottom:24px;
}
.fares-popup-countries li{
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--blue-pale);
  color:var(--navy-deep);
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.82rem;
  padding:8px 14px;
  border-radius:999px;
}
.fares-popup-actions{ display:flex; flex-direction:column; gap:10px; }
.fares-popup-actions .btn{ justify-content:center; width:100%; }
.fares-popup-later{
  font-family:var(--font-display);
  font-weight:600;
  font-size:0.85rem;
  color:var(--text-muted);
  padding:6px;
}
.fares-popup-later:hover{ color:var(--navy-deep); }
@media (max-width:520px){
  .fares-popup{ padding:32px 22px 24px; }
}