/* ═══════════════════════════════════════════════════════════════
   easygo unified theme v5 — TRUSTED TEAL & GOLD EDITION 🎩
   Trustworthy corporate teal (#0f766e) + gold/bronze (#d4af37/#b08d57)
   on clean white. Warm, accessible, professional, reassuring.
   One theme for the whole site. Loaded on every page,
   after page styles.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* ── UAE flag (kept for the flag stripe) ── */
  --uae-red:#EE1C25; --uae-green:#00732F;
  --uae-white:#ffffff; --uae-black:#131313;
  /* ── easygo logo ── */
  --eg-navy:#1F4E79; --eg-green:#8BAF4A; --eg-ink:#16281d;
  /* ── Trusted Teal & Gold palette ── */
  --lagoon:#0f766e; --lagoon-dark:#115e59; --lagoon-light:#14b8a6; --lagoon-pale:#d8f3ef;
  --gilded:#d4af37; --gilded-deep:#b08d57; --gilded-pale:#faf3e3;
  /* legacy aliases (older page markup may still reference these) */
  --meadow:#0f766e; --meadow-dark:#115e59; --meadow-light:#14b8a6; --meadow-pale:#d8f3ef;
  --sunny:#d4af37; --sunny-deep:#b08d57; --sunny-pale:#faf3e3;
  /* ── re-map the site's old palette to trusted teal ──
     (pages declare --orange in their own <style>; this file loads
     after them, so every var(--orange) across the site turns teal) */
  --orange:#0f766e; --orange-dark:#115e59;
}

/* one friendly typeface for the whole site */
*{font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;}

/* ── UAE flag stripe (used under nav + above footer) ── */
.uae-flag-strip{background:linear-gradient(90deg,
  #EE1C25 0 25%, #00732F 25% 50%, #f4f4f4 50% 75%, #131313 75% 100%);}

/* ═══ TOP NAVIGATION — deep teal sweep ═══ */
nav,.sitenav,.sticky{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(90deg,#042f2e 0%,#134e4a 55%,#115e59 100%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;justify-content:center;align-items:center;gap:4px;
  padding:9px 12px;flex-wrap:wrap;
  box-shadow:0 4px 22px rgba(4,47,46,.4);
}
.sticky{position:fixed;left:0;right:0;}          /* homepage fixed bar keeps its layout */
nav::after,.sitenav::after,.sticky::after{       /* the flag stripe under every bar */
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,#EE1C25 0 25%,#00732F 25% 50%,#f4f4f4 50% 75%,#131313 75% 100%);
}
nav a,.sitenav a{
  color:#d9f2ee;text-decoration:none;font-size:13.5px;font-weight:600;
  padding:7px 12px;border-radius:999px;transition:all .18s;
  display:inline-flex;align-items:center;gap:6px;
}
nav a img,.sitenav a img{height:23px;width:auto;}
nav a:hover,.sitenav a:hover{background:rgba(212,175,55,.22);color:#fff;}
nav a.on,.sitenav a.on{
  background:linear-gradient(180deg,#f0d97c,#d4af37);color:#43310a;
  box-shadow:0 3px 12px rgba(212,175,55,.5);
}

/* homepage sticky-bar text links */
.sticky a.nl{color:#d9f2ee;}
.sticky a.nl:hover{background:rgba(212,175,55,.22);color:#fff;}

/* ═══ FOOTER — teal to deep sea, flag stripe on top ═══ */
footer,.sitefoot{
  background:linear-gradient(180deg,#134e4a 0%,#042f2e 90%);
  color:#c7ece7;text-align:center;padding:32px 20px;font-size:13.5px;
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,#EE1C25 0 25%,#00732F 25% 50%,#f4f4f4 50% 75%,#131313 75% 100%) 1;
}

/* ═══ BUTTONS — teal gradient + golden hover ring ═══ */
.btn{
  background:linear-gradient(180deg,#14b8a6,#0f766e);
  box-shadow:0 6px 18px rgba(15,118,110,.4);
  transition:transform .15s,filter .15s,box-shadow .15s;
}
.btn:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(15,118,110,.45),0 0 0 1.5px rgba(212,175,55,.65);
}

/* ═══ HOMEPAGE HERO — white → mint mist → pale gold ═══ */
header.hero{
  background:linear-gradient(165deg,#ffffff 0%,#effaf8 45%,#fdf8ec 100%);
}

/* ── ✨ sparkling Call button — golden shimmer sweep + twinkles ── */
.vc-spark{
  position:relative;overflow:visible !important;
  background:linear-gradient(180deg,#f0d97c,#d4af37) !important;
  color:#43310a !important;font-weight:800 !important;
  box-shadow:0 0 10px rgba(212,175,55,.6),0 0 22px rgba(212,175,55,.32);
  animation:sparkGlow 2.2s ease-in-out infinite;
}
.vc-spark::before{ /* shimmering light sweep */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);
  background-size:250% 100%;
  animation:sparkShine 2.2s linear infinite;
}
.vc-spark::after{ /* twinkling star */
  content:"✦";position:absolute;top:-7px;right:-4px;font-size:11px;color:#fffbe8;
  text-shadow:0 0 6px #d4af37,0 0 12px #d4af37;pointer-events:none;
  animation:sparkTwinkle 1.1s ease-in-out infinite;
}
@keyframes sparkShine{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes sparkGlow{
  0%,100%{box-shadow:0 0 10px rgba(212,175,55,.6),0 0 22px rgba(212,175,55,.32)}
  50%{box-shadow:0 0 16px rgba(212,175,55,.9),0 0 34px rgba(212,175,55,.55)}
}
@keyframes sparkTwinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0deg)}50%{opacity:1;transform:scale(1.25) rotate(25deg)}}

/* ── small polish ── */
::selection{background:#0f766e;color:#fff;}
img{user-select:none;}

/* ═══════════════════════════════════════════════════════════
   HAPPY LAYER — the "smile" design accent ☺
   Rounded, warm, friendly: every card gets a soft lift,
   every page greets you with a smile.
   ═══════════════════════════════════════════════════════════ */

/* smooth, gentle page feel */
html{scroll-behavior:smooth;}
body{-webkit-font-smoothing:antialiased;}

/* every card smiles: soft lift + teal glow on hover */
.card,.stat,.step-card,.gate-card,.prod,.tip,
.faq details,.video-card,.idea-card,.gstep{
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover,.stat:hover,.step-card:hover,.gate-card:hover,
.prod:hover,.idea-card:hover,.video-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(15,118,110,.14),0 3px 10px rgba(31,41,55,.06);
  border-color:rgba(15,118,110,.35);
}

/* inputs greet you with a teal ring when focused */
input:focus,textarea:focus,select:focus{
  border-color:#0f766e !important;
  box-shadow:0 0 0 3.5px rgba(15,118,110,.16);
  outline:none;
}

/* the welcome ribbon — "you're among friends" */
.happy-hello{
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(90deg,rgba(15,118,110,.1),rgba(212,175,55,.2));
  border:1.5px solid rgba(15,118,110,.3);
  color:#115e59;font-weight:700;font-size:14.5px;
  padding:8px 20px;border-radius:999px;margin-bottom:16px;
}
.happy-hello .face{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(180deg,#f0d97c,#d4af37);
  font-size:15px;box-shadow:0 2px 6px rgba(212,175,55,.55);
  animation:happyWiggle 2.6s ease-in-out infinite;
}
@keyframes happyWiggle{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) scale(1.08)}}

/* soft happy fade-in for main content */
main>section, main>.card, main>div, header+section, .wrap>section{
  animation:happyIn .5s ease both;
}
@keyframes happyIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* links in content get a friendly underline */
p a,li a{text-underline-offset:3px;}

/* ── AdSense slot — clean white card that matches the theme ── */
.eg-ad{max-width:940px;margin:26px auto;padding:10px 14px;
  background:#fff;border:1px solid #d8f3ef;border-radius:16px;
  box-shadow:0 4px 14px rgba(15,118,110,.06);min-height:60px;}
.eg-ad ins{display:block;}