/* ══════════════════════════════════════════════════════════════════
   UNICOMPASS REVOLUTION — World-class visual transformation
   Pure CSS + vanilla JS. Zero build tools. Maximum impact.
   ══════════════════════════════════════════════════════════════════ */

/* ── ROOT SYSTEM ─────────────────────────────────────────────────── */
:root {
  --void:        #040A18;
  --deep:        #070E1F;
  --navy:        #0F2A5C;
  --navy-mid:    #152B5E;
  --gold:        #F0C040;
  --gold-bright: #FFD84D;
  --gold-dim:    #D97706;
  --white:       #FFFFFF;
  --mist:        #E2E8F0;
  --slate:       #94A3B8;

  --glow-gold:   0 0 40px rgba(240,192,64,0.35), 0 0 80px rgba(240,192,64,0.12);
  --glow-blue:   0 0 40px rgba(59,130,246,0.3),  0 0 80px rgba(59,130,246,0.1);
  --glow-purple: 0 0 40px rgba(124,58,237,0.3),  0 0 80px rgba(124,58,237,0.1);

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── GLOBAL SCROLL BEHAVIOUR ─────────────────────────────────────── */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════════════
   HERO — Deep space, aurora lights, particle stars
   ══════════════════════════════════════════════════════════════════ */
.hero {
  min-height: calc(100svh - 0px) !important;
  background: var(--void) !important;
  position: relative;
  overflow: hidden;
}

/* Multi-layer aurora background */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 80% at 15% 60%, rgba(59,130,246,0.18) 0%, transparent 55%),
    radial-gradient(ellipse 80%  90% at 85% 20%, rgba(124,58,237,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 60%  50% at 50% 100%,rgba(217,119,6,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 40%  40% at 90% 80%, rgba(5,150,105,0.10) 0%, transparent 45%);
  animation: auroraShift 12s ease-in-out infinite alternate;
}

@keyframes auroraShift {
  0%   { opacity: 1; transform: scale(1) rotate(0deg); }
  33%  { opacity: 0.85; }
  66%  { opacity: 0.95; }
  100% { opacity: 0.8; transform: scale(1.08) rotate(1.5deg); }
}

/* Star field */
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at  8%  12%, rgba(255,255,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 22%  38%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 35%  8%,  rgba(240,192,64,0.8)  0%, transparent 100%),
    radial-gradient(1px 1px at 48%  55%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 62%  22%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 72%  70%, rgba(167,139,250,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 83%  15%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 91%  42%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 14%  78%, rgba(240,192,64,0.6)  0%, transparent 100%),
    radial-gradient(1px 1px at 55%  88%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 3%   50%, rgba(167,139,250,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 77%  95%, rgba(255,255,255,0.6) 0%, transparent 100%);
  animation: starTwinkle 6s ease-in-out infinite alternate;
}
@keyframes starTwinkle {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* Floating orbs behind hero */
.hero-geo { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.hero-geo-1 {
  width: clamp(400px, 55vw, 800px);
  height: clamp(400px, 55vw, 800px);
  top: -20%; right: -15%;
  background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 65%);
  animation: orbFloat1 18s ease-in-out infinite;
}
.hero-geo-2 {
  width: clamp(300px, 40vw, 600px);
  height: clamp(300px, 40vw, 600px);
  bottom: -10%; left: -10%;
  background: radial-gradient(circle, rgba(217,119,6,0.14) 0%, transparent 65%);
  animation: orbFloat2 22s ease-in-out infinite;
}
.hero-geo-dot {
  width: 3px; height: 3px;
  background: var(--gold); border-radius: 50%;
  top: 30%; left: 8%;
  box-shadow: var(--glow-gold);
  animation: dotPulse 3s ease-in-out infinite;
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(-30px, 40px) scale(1.05); }
  66%       { transform: translate(20px, -25px) scale(0.97); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(40px, -30px) scale(1.07); }
  75%       { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px rgba(240,192,64,0.8); }
  50%       { opacity: 0.6; transform: scale(1.8); box-shadow: 0 0 24px rgba(240,192,64,0.4); }
}

/* Hero inner layout */
.hero-inner { position: relative; z-index: 1; }

/* Hero title — massive, editorial */
.hero-title {
  font-size: clamp(2.8rem, 7vw, 5.5rem) !important;
  font-weight: 900 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.045em !important;
  margin-bottom: 1.5rem !important;
}
.hero-title .line { display: block; }
.gold-stroke {
  -webkit-text-stroke: 2px var(--gold) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.gold-fill {
  background: linear-gradient(135deg, #F0C040 0%, #FFD84D 40%, #D97706 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 2px 20px rgba(240,192,64,0.5)) !important;
}

/* Hero sub — clean and readable */
.hero-sub {
  font-size: clamp(0.92rem, 1.8vw, 1.05rem) !important;
  line-height: 1.8 !important;
  color: var(--mist) !important;
  font-weight: 400 !important;
  max-width: 520px;
}

/* Hero stats — glowing numbers */
.hero-stats { margin-top: 2.5rem !important; }
.stat-item { position: relative; }
.stat-num {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem) !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 12px rgba(240,192,64,0.45)) !important;
  display: block;
  line-height: 1.1 !important;
}
.stat-lbl {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Hero CTA buttons */
.btn-gold {
  background: linear-gradient(135deg, #D97706, #F59E0B) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(217,119,6,0.4), 0 0 0 0 rgba(240,192,64,0) !important;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease !important;
  position: relative; overflow: hidden;
}
.btn-gold::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.btn-gold:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 32px rgba(217,119,6,0.55), 0 0 0 4px rgba(240,192,64,0.12) !important; }
.btn-gold:hover::before { left: 120%; }
.btn-gold:active { transform: translateY(-1px) !important; }

/* Hero search panel — premium glassmorphism */
.hero-panel {
  background: rgba(255,255,255,0.05) !important;
  backdrop-filter: blur(28px) saturate(180%) brightness(110%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(110%) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 24px !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.12) inset,
    0 -1px 0 rgba(0,0,0,0.2) inset !important;
  position: relative;
  overflow: hidden;
}
.hero-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240,192,64,0.4), transparent);
}

/* ══════════════════════════════════════════════════════════════════
   NAVBAR — Obsidian glass with gold soul
   ══════════════════════════════════════════════════════════════════ */
.navbar {
  background: rgba(4,10,24,0.88) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.5) !important;
  transition: all 0.3s ease !important;
}
.navbar.scrolled {
  background: rgba(4,10,24,0.97) !important;
  box-shadow: 0 4px 40px rgba(0,0,0,0.6) !important;
}
.nav-links a, .nav-link-btn {
  color: rgba(255,255,255,0.85) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
  font-weight: 600 !important;
  transition: color 0.18s ease, background 0.18s ease !important;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 50%; right: 50%;
  height: 2px; background: var(--gold);
  border-radius: 2px;
  transition: left 0.22s var(--ease-out), right 0.22s var(--ease-out);
}
.nav-links a:hover { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
.nav-links a:hover::after { left: 10%; right: 10%; }
.nav-links a.active { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }
.nav-links a.active::after { left: 10%; right: 10%; }
.nav-brand { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-weight: 900 !important; }
.nav-brand .ico, .nav-brand i { color: var(--gold) !important; filter: drop-shadow(0 0 6px rgba(240,192,64,0.6)) !important; }

/* ══════════════════════════════════════════════════════════════════
   SECTION TYPOGRAPHY — Authority and clarity
   ══════════════════════════════════════════════════════════════════ */
.sec-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem) !important;
  font-weight: 900 !important;
  color: #0F2A5C !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
}
.sec-title.white { color: #FFFFFF !important; }
.sec-kicker {
  font-family: 'Manrope', sans-serif;
  font-size: 0.68rem !important; font-weight: 800 !important;
  text-transform: uppercase; letter-spacing: 0.15em !important;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
  color: #92400E !important; border: 1px solid rgba(217,119,6,0.3) !important;
  padding: 0.28rem 0.9rem !important; border-radius: 20px !important;
  display: inline-block; margin-bottom: 0.75rem !important;
}
.sec-sub {
  color: #4B5563 !important;
  font-size: 0.95rem !important;
  line-height: 1.8 !important;
  font-weight: 400 !important;
  max-width: 640px;
}

/* ══════════════════════════════════════════════════════════════════
   FEATURE CARDS — Holographic tilt cards
   ══════════════════════════════════════════════════════════════════ */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.25rem !important;
}
.feat-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(226,232,240,0.8) !important;
  border-radius: 20px !important;
  padding: 1.75rem !important;
  text-decoration: none !important;
  position: relative; overflow: hidden;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.25s ease, border-color 0.2s ease !important;
  transform-style: preserve-3d;
  will-change: transform;
}
.feat-card::before {
  content: '';
  position: absolute; inset: 0; border-radius: 20px; z-index: 0;
  background: linear-gradient(135deg, rgba(240,192,64,0) 0%, rgba(240,192,64,0.04) 100%);
  opacity: 0; transition: opacity 0.3s ease;
}
.feat-card::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, var(--card-color, #2563EB), transparent);
  opacity: 0; transition: opacity 0.2s ease;
}
.feat-card:hover { 
  box-shadow: 0 20px 50px rgba(15,42,92,0.14), 0 4px 16px rgba(15,42,92,0.06) !important;
  border-color: rgba(203,213,225,0.5) !important;
}
.feat-card:hover::before { opacity: 1; }
.feat-card:hover::after  { opacity: 1; }
.feat-card h3 { 
  font-size: 0.95rem !important; font-weight: 800 !important;
  color: #0F2A5C !important; margin-bottom: 0.5rem !important;
  -webkit-text-fill-color: #0F2A5C !important;
}
.feat-card p { 
  font-size: 0.8rem !important; color: #4B5563 !important; line-height: 1.7 !important;
  -webkit-text-fill-color: #4B5563 !important;
}
.feat-icon {
  width: 48px !important; height: 48px !important;
  border-radius: 14px !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem !important; margin-bottom: 1.1rem !important;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease;
}
.feat-card:hover .feat-icon {
  transform: scale(1.12) rotate(-3deg);
}
.feat-arrow {
  position: absolute !important; bottom: 1.4rem !important; right: 1.4rem !important;
  font-size: 0.75rem !important;
  opacity: 0; transform: translate(-4px, 4px);
  transition: opacity 0.2s ease, transform 0.2s var(--ease-spring) !important;
}
.feat-card:hover .feat-arrow { opacity: 1; transform: translate(0,0); }

/* ══════════════════════════════════════════════════════════════════
   UNIVERSITY CARDS — Premium listing cards
   ══════════════════════════════════════════════════════════════════ */
.uni-card {
  border-radius: 18px !important;
  border: 1px solid rgba(226,232,240,0.9) !important;
  background: #FFFFFF !important;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease, border-color 0.18s ease !important;
  will-change: transform;
  overflow: hidden;
}
.uni-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 48px rgba(15,42,92,0.13), 0 4px 14px rgba(15,42,92,0.06) !important;
  border-color: #CBD5E8 !important;
}

/* ══════════════════════════════════════════════════════════════════
   DESTINATION CARDS — Flag lift with glow
   ══════════════════════════════════════════════════════════════════ */
.dest-card {
  background: #FFFFFF !important;
  border: 1px solid #E8EDF5 !important;
  border-radius: 18px !important;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease !important;
  will-change: transform;
  text-decoration: none !important;
}
.dest-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 16px 40px rgba(15,42,92,0.14) !important;
  border-color: #D97706 !important;
}
.dest-flag { font-size: 2.4rem !important; transition: transform 0.2s var(--ease-spring); }
.dest-card:hover .dest-flag { transform: scale(1.2) rotate(-3deg); }
.dest-name { font-weight: 800 !important; color: #0F2A5C !important; }
.dest-count { color: #6B7280 !important; font-size: 0.72rem !important; }

/* ══════════════════════════════════════════════════════════════════
   SCHOLARSHIP CARDS
   ══════════════════════════════════════════════════════════════════ */
.sc2 {
  border-radius: 18px !important;
  border: 1px solid #E8EDF5 !important;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease, border-color 0.18s !important;
  will-change: transform;
  background: #FFFFFF !important;
}
.sc2:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(15,42,92,0.12) !important;
  border-color: #D97706 !important;
}

/* ══════════════════════════════════════════════════════════════════
   DEADLINE SECTION — Deep space cards
   ══════════════════════════════════════════════════════════════════ */
.deadline-section {
  background: linear-gradient(160deg, #070E1F 0%, #0F2040 50%, #070E1F 100%) !important;
  position: relative; overflow: hidden;
}
.deadline-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(124,58,237,0.1), transparent),
    radial-gradient(ellipse 40% 60% at 10% 80%, rgba(217,119,6,0.08), transparent);
}
.deadline-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 16px !important;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease, background 0.2s, border-color 0.2s !important;
  position: relative; overflow: hidden;
}
.deadline-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0; transition: opacity 0.2s;
}
.deadline-card:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(240,192,64,0.3) !important;
  transform: translateX(6px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}
.deadline-card:hover::before { opacity: 1; }
.dl-name   { color: #FFFFFF !important; font-weight: 700 !important; font-size: 0.85rem !important; }
.dl-date   { color: rgba(255,255,255,0.55) !important; font-size: 0.7rem !important; }
.dl-days   { color: var(--gold) !important; font-weight: 900 !important; font-size: 1.5rem !important; line-height: 1 !important; }
.dl-unit   { color: rgba(255,255,255,0.45) !important; font-size: 0.58rem !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.1em; }
.dl-badge  { color: #FFFFFF !important; border-radius: 10px !important; font-size: 0.7rem !important; font-weight: 800 !important; }

/* Deadline "All Deadlines" button */
.btn-ghost-white {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1.5px solid rgba(255,255,255,0.3) !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}
.btn-ghost-white:hover {
  background: rgba(255,255,255,0.2) !important;
  border-color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

/* ══════════════════════════════════════════════════════════════════
   TESTIMONIALS — Cards with editorial presence
   ══════════════════════════════════════════════════════════════════ */
.testimonial-card {
  background: #FFFFFF !important;
  border: 1px solid #EEF2FF !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 24px rgba(15,42,92,0.07) !important;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease !important;
  position: relative; overflow: hidden;
}
.testimonial-card::before {
  content: '"'; position: absolute; top: -10px; left: 16px;
  font-size: 5rem; font-weight: 900; color: rgba(15,42,92,0.06);
  font-family: Georgia, serif; line-height: 1;
}
.testimonial-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 12px 36px rgba(15,42,92,0.12) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SECTION BACKGROUNDS — Depth and rhythm
   ══════════════════════════════════════════════════════════════════ */
.section-ivory {
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
}
.section-white { background: #FFFFFF !important; }
.section-ink {
  background: linear-gradient(160deg, #0B1E3D 0%, #152B5E 50%, #0B1E3D 100%) !important;
  position: relative; overflow: hidden;
}
.section-ink::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 5% 50%,  rgba(240,192,64,0.07), transparent),
    radial-gradient(ellipse 50% 70% at 95% 30%,  rgba(59,130,246,0.1),  transparent);
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL REVEAL — Content appears as you scroll
   ══════════════════════════════════════════════════════════════════ */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out) !important;
}
.fade-up.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger delays for grids */
.feat-card.fade-up:nth-child(2) { transition-delay: 0.08s !important; }
.feat-card.fade-up:nth-child(3) { transition-delay: 0.16s !important; }
.feat-card.fade-up:nth-child(4) { transition-delay: 0.24s !important; }
.feat-card.fade-up:nth-child(5) { transition-delay: 0.32s !important; }
.feat-card.fade-up:nth-child(6) { transition-delay: 0.40s !important; }
.uni-card.fade-up:nth-child(2)  { transition-delay: 0.06s !important; }
.uni-card.fade-up:nth-child(3)  { transition-delay: 0.12s !important; }
.uni-card.fade-up:nth-child(4)  { transition-delay: 0.18s !important; }
.dest-card.fade-up:nth-child(2) { transition-delay: 0.07s !important; }
.dest-card.fade-up:nth-child(3) { transition-delay: 0.14s !important; }
.dest-card.fade-up:nth-child(4) { transition-delay: 0.21s !important; }

/* ══════════════════════════════════════════════════════════════════
   SHARE / FOOTER SECTION — Maximum legibility
   ══════════════════════════════════════════════════════════════════ */
section[style*="0F2A5C"] p,
section[style*="152B5E"] p,
section[style*="0B1E3D"] p {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 500 !important;
}
section[style*="0F2A5C"] strong { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }
section[style*="0F2A5C"] h2 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
#shareUrl { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER — Polished dark
   ══════════════════════════════════════════════════════════════════ */
footer {
  background: linear-gradient(180deg, #0C1A35, #070E1F) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
footer * { color: rgba(255,255,255,0.7) !important; -webkit-text-fill-color: rgba(255,255,255,0.7) !important; }
footer h4 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-weight: 800 !important; letter-spacing: 0.05em !important; }
footer a:hover { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }
footer .foot-brand-logo,
footer .foot-brand-logo * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }
footer .ico { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }

/* ══════════════════════════════════════════════════════════════════
   SCROLLBAR — Gold branded
   ══════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gold-dim), var(--gold));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ══════════════════════════════════════════════════════════════════
   TEXT SELECTION
   ══════════════════════════════════════════════════════════════════ */
::selection { background: rgba(240,192,64,0.3); color: inherit; }

/* ══════════════════════════════════════════════════════════════════
   FOCUS — Gold branded
   ══════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2.5px solid var(--gold) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   PAGE ENTRANCE ANIMATION
   ══════════════════════════════════════════════════════════════════ */
@keyframes pageEntrance {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
body {
  animation: pageEntrance 0.5s var(--ease-out) both;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE OPTIMISATIONS
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero { min-height: calc(100vh - 56px) !important; }
  .hero-title { font-size: clamp(2.2rem,9vw,3.2rem) !important; }
  .feat-card:hover, .uni-card:hover, .dest-card:hover,
  .deadline-card:hover, .testimonial-card:hover { transform: none !important; }
  #uc-cursor, #uc-cursor-ring { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   PRINT — Clean and minimal
   ══════════════════════════════════════════════════════════════════ */
@media print {
  .navbar, footer, #compassFab, #compassPanel,
  #announcementBar, .hero::before, .hero::after { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  * { box-shadow: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   WHITE GAP FIX — Inner page padding and background continuity
   ══════════════════════════════════════════════════════════════════ */

/* All inner page wrappers — ensure background fills continuously */
.compare-page, .search-page, .page-body, .calc-page,
.ielts-page, .grading-page, .gc-page, .sp2-page,
.forum-page, .aiadv-page, .psychometric-page,
.psych-page, .legal-page, .institution-page, .ip-page {
  padding-top: 64px !important;
  min-height: 100vh;
}

/* The page-hero-sm on inner pages — eliminate any gap above it */
.page-hero-sm {
  margin-top: 0 !important;
}

/* Ensure section backgrounds are contiguous — no white slices */
section { margin: 0 !important; }

/* Hero on homepage only: full viewport */
section.hero {
  min-height: calc(100svh - 0px) !important;
  height: auto !important;
  max-height: none !important;
  padding-top: 64px !important;
}

/* Page-level body background continuity */
body {
  background: #F1F5F9;
}

/* Ensure first section after navbar touches it immediately */
.navbar + * {
  margin-top: 0 !important;
}

/* Fix: search page hero band gap */
.search-hero-band {
  margin-top: 0 !important;
  border-top: none !important;
}

/* Fix: announcement bar on homepage */
#announcementBar {
  position: relative !important;
  z-index: 999 !important;
}

/* Smart match strip background continuity */
.smartmatch-strip {
  background: linear-gradient(135deg, #0F2A5C, #162B4A) !important;
  border-top: none !important;
  margin-top: 0 !important;
}

/* ── SECTION DIVIDERS — Smooth colour transitions ── */
.section-ivory + .section-white,
.section-white + .section-ivory {
  position: relative;
}

/* ── HERO bottom fade into next section ── */
section.hero + section {
  margin-top: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   CONTINUED VISUAL ENHANCEMENT PACK
   ══════════════════════════════════════════════════════════════════ */

/* ── SECTION HEADS — Generous breathing room ── */
.sec-head {
  margin-bottom: 2.5rem !important;
}
.sec-head.center {
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ── BUTTONS — System-wide upgrade ── */
.btn {
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  transition: transform 0.18s var(--ease-spring), box-shadow 0.18s ease !important;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-navy {
  background: linear-gradient(135deg, #0F2A5C, #1E3A5F) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(15,42,92,0.25) !important;
}
.btn-navy:hover {
  box-shadow: 0 8px 24px rgba(15,42,92,0.38) !important;
  background: linear-gradient(135deg, #0A1E45, #152B5E) !important;
}

/* ── SMART MATCH STRIP ── */
.smartmatch-strip {
  background: linear-gradient(135deg, #0C2040 0%, #162B4A 50%, #0C2040 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── PAGE HERO SM — Inner page headers ── */
.page-hero-sm {
  background: linear-gradient(160deg, #0F2A5C, #1a3870) !important;
  padding: 2.5rem clamp(1rem,5vw,3rem) !important;
  position: relative; overflow: hidden;
}
.page-hero-sm::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 90% 50%, rgba(124,58,237,0.12), transparent),
    radial-gradient(ellipse 40% 50% at 5%  50%, rgba(240,192,64,0.08), transparent);
}
.page-hero-sm h1 {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem) !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  letter-spacing: -0.03em !important;
}
.page-hero-sm p {
  color: rgba(255,255,255,0.78) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.78) !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

/* ── SEARCH HERO BAND ── */
.search-hero-band {
  background: linear-gradient(160deg, #0B1E3D 0%, #152B5E 55%, #0B1E3D 100%) !important;
  position: relative;
}
.search-hero-band::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 5%  50%, rgba(240,192,64,0.07), transparent),
    radial-gradient(ellipse 40% 60% at 95% 30%, rgba(59,130,246,0.1),  transparent);
}
.search-hero-band h1,
.search-hero-band h1 * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ── SEARCH/FILTER SIDEBAR ── */
.search-sidebar, .sp2-panel {
  background: #FFFFFF !important;
  border-radius: 18px !important;
  border: 1px solid #E8EDF5 !important;
  box-shadow: 0 2px 12px rgba(15,42,92,0.06) !important;
}

/* ── SCHOLARSHIP BADGE ── */
.sc2-type[style*="full"] {
  background: #FEF3C7 !important;
  border-color: rgba(217,119,6,0.3) !important;
  color: #92400E !important;
}

/* ── GRADE / TOOLS PAGES ── */
.gc-page, .grading-page {
  background: #F1F5F9 !important;
}

/* ── FORUM PAGE ── */
.forum-hero {
  position: relative;
}
.forum-hero::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 80% at 90% 50%, rgba(124,58,237,0.18), transparent),
    radial-gradient(ellipse 40% 60% at 5%  50%, rgba(240,192,64,0.08), transparent);
}
.forum-hero > * { position: relative; z-index: 1; }

/* ── AI ADVISOR PAGE ── */
.aiadv-page {
  background: linear-gradient(180deg, #040A18 0%, #070E1F 100%) !important;
}
.aiadv-hero {
  position: relative; overflow: hidden;
}
.aiadv-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(217,119,6,0.12), transparent);
}

/* ── IELTS PAGE ── */
.ielts-hero {
  background: linear-gradient(160deg, #0B1E3D, #152B5E, #0B1E3D) !important;
  position: relative;
}
.ielts-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 5%  50%, rgba(212,160,23,0.12), transparent),
    radial-gradient(ellipse 40% 60% at 95% 30%, rgba(59,130,246,0.18), transparent);
}

/* ── CARDS — Consistent elevation system ── */
.il-card {
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(15,42,92,0.07) !important;
  transition: box-shadow 0.2s ease !important;
  border: 1px solid #E8EDF5 !important;
}
.il-card:hover {
  box-shadow: 0 8px 28px rgba(15,42,92,0.1) !important;
}

/* ── PSYCHOMETRIC / CAREER TEST ── */
.psych-hero, .psych-header {
  background: linear-gradient(160deg, #0B1E3D, #152B5E) !important;
  position: relative; overflow: hidden;
}

/* ── NEWSLETTER / CTA STRIPS ── */
.newsletter-section,
.nl-section {
  background: linear-gradient(135deg, #0F2A5C, #1a3870) !important;
  position: relative; overflow: hidden;
}
.newsletter-section::before,
.nl-section::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 80% at 90% 50%, rgba(240,192,64,0.08), transparent),
    radial-gradient(ellipse 40% 60% at 5%  50%, rgba(59,130,246,0.08), transparent);
}
.nl-title { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-weight: 900 !important; }
.nl-sub   { color: rgba(255,255,255,0.78) !important; -webkit-text-fill-color: rgba(255,255,255,0.78) !important; }
.nl-input {
  background: rgba(255,255,255,0.1) !important;
  border: 1.5px solid rgba(255,255,255,0.2) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  border-radius: 10px !important;
}
.nl-input::placeholder { color: rgba(255,255,255,0.4) !important; }
.nl-input:focus { border-color: var(--gold) !important; background: rgba(255,255,255,0.15) !important; }
.nl-btn {
  background: linear-gradient(135deg, #D97706, #F59E0B) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 800 !important; border: none !important;
  box-shadow: 0 4px 16px rgba(217,119,6,0.35) !important;
}

/* ── FLOATING COMPASS AI BUTTON ── */
#compassFab {
  box-shadow: 0 4px 20px rgba(217,119,6,0.5), 0 0 0 0 rgba(240,192,64,0) !important;
  animation: fabPulse 3s ease-in-out infinite !important;
  transition: transform 0.22s var(--ease-spring), box-shadow 0.22s ease !important;
}
#compassFab:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 8px 32px rgba(217,119,6,0.65) !important;
  animation: none !important;
}
@keyframes fabPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(217,119,6,0.5), 0 0 0 0 rgba(240,192,64,0); }
  50%       { box-shadow: 0 4px 20px rgba(217,119,6,0.4), 0 0 0 10px rgba(240,192,64,0); }
}

/* ── MINI CHAT PANEL ── */
#compassPanel {
  box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 4px 20px rgba(0,0,0,0.3) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
}

/* ── GRADE CONVERTER SPECIFIC ── */
.gc-result-band, .gc-band {
  border-radius: 12px !important;
}

/* ── RESPONSIVE FIXES ── */
@media (max-width: 768px) {
  section.hero {
    min-height: calc(100svh - 56px) !important;
    padding-top: 56px !important;
  }
  .compare-page, .search-page, .page-body, .calc-page,
  .ielts-page, .grading-page, .gc-page, .sp2-page,
  .forum-page, .aiadv-page, .psych-page, .legal-page, .ip-page {
    padding-top: 56px !important;
  }
}

/* ── LOADING STATE — Skeleton shimmer ── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%) !important;
  background-size: 800px 100% !important;
  animation: shimmer 1.5s infinite !important;
  border-radius: 8px !important;
  color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════
   TYPOGRAPHY REFINEMENTS
   ══════════════════════════════════════════════════════════════════ */

/* Body text baseline */
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Strong/bold in dark sections always golden */
.section-ink strong, .deadline-section strong,
.page-hero-sm strong, .search-hero-band strong {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
}

/* ══════════════════════════════════════════════════════════════════
   NEWSLETTER SECTION — Dark, newsletter on ink
   ══════════════════════════════════════════════════════════════════ */
.newsletter-section {
  background: linear-gradient(135deg, #0F2A5C, #162B4A) !important;
  position: relative; overflow: hidden;
}
.newsletter-section::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 80% at 90% 50%, rgba(240,192,64,0.07), transparent);
}
.nl-title {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  font-weight: 800 !important; font-size: 1rem !important;
}
.nl-sub {
  color: rgba(255,255,255,0.7) !important; -webkit-text-fill-color: rgba(255,255,255,0.7) !important;
}
.nl-icon { color: var(--gold) !important; }
.nl-input {
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
  background: rgba(255,255,255,0.1) !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
}
.nl-input::placeholder { color: rgba(255,255,255,0.45) !important; -webkit-text-fill-color: rgba(255,255,255,0.45) !important; }
.nl-input:focus { border-color: var(--gold) !important; background: rgba(255,255,255,0.15) !important; }

/* ══════════════════════════════════════════════════════════════════
   TRUST STRIP — Clean dark bar
   ══════════════════════════════════════════════════════════════════ */
.trust-strip { background: #040A18 !important; }
.trust-item  { color: rgba(255,255,255,0.55) !important; }
.trust-item i { color: var(--gold) !important; }
.trust-div    { background: rgba(255,255,255,0.12) !important; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER — Premium dark
   ══════════════════════════════════════════════════════════════════ */
footer {
  background: linear-gradient(180deg, #0A1628 0%, #040A18 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
.foot-col h4 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-weight: 800 !important; }
.foot-col a  { color: rgba(255,255,255,0.6) !important; -webkit-text-fill-color: rgba(255,255,255,0.6) !important; }
.foot-col a:hover { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,0.08) !important; }
.foot-bottom p { color: rgba(255,255,255,0.4) !important; -webkit-text-fill-color: rgba(255,255,255,0.4) !important; }
.foot-social-btn {
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.6) !important;
  transition: all 0.18s ease !important;
}
.foot-social-btn:hover {
  background: var(--gold-dim) !important;
  border-color: var(--gold) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}
.foot-brand-tag { color: rgba(255,255,255,0.5) !important; -webkit-text-fill-color: rgba(255,255,255,0.5) !important; }

/* ══════════════════════════════════════════════════════════════════
   SMART MATCH STRIP — Bold and readable
   ══════════════════════════════════════════════════════════════════ */
.sm-label { color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; font-weight: 700 !important; }
.sm-desc  { color: rgba(255,255,255,0.8) !important; -webkit-text-fill-color: rgba(255,255,255,0.8) !important; font-weight: 400 !important; }
.sm-icon  { box-shadow: 0 4px 16px rgba(240,192,64,0.4) !important; }

/* ══════════════════════════════════════════════════════════════════
   INSTITUTION / DETAIL PAGES
   ══════════════════════════════════════════════════════════════════ */
.ip-hero { background: linear-gradient(160deg, #0F2A5C, #1a3870) !important; position: relative; overflow: hidden; }
.ip-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(124,58,237,0.12), transparent);
}
.ip-name { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-weight: 900 !important; }
.ip-meta span { color: rgba(255,255,255,0.75) !important; -webkit-text-fill-color: rgba(255,255,255,0.75) !important; }

/* ══════════════════════════════════════════════════════════════════
   SEARCH PAGE — Elevated filter panel
   ══════════════════════════════════════════════════════════════════ */
.search-filters {
  background: #FFFFFF !important;
  border: 1px solid #E8EDF5 !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 16px rgba(15,42,92,0.07) !important;
}

/* Search result count badge */
.result-count {
  font-weight: 800 !important;
  color: #0F2A5C !important;
  -webkit-text-fill-color: #0F2A5C !important;
}

/* ══════════════════════════════════════════════════════════════════
   QUICK MATCH BOX — Sharp white card
   ══════════════════════════════════════════════════════════════════ */
#qmBox {
  box-shadow: 0 8px 40px rgba(15,42,92,0.14), 0 2px 10px rgba(15,42,92,0.06) !important;
  border: 1px solid #E8EDF5 !important;
}
#qmBar { box-shadow: 0 0 8px rgba(240,192,64,0.4) !important; }
.qm-opt {
  transition: all 0.18s var(--ease-spring) !important;
}
.qm-opt:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(15,42,92,0.12) !important;
}

/* ══════════════════════════════════════════════════════════════════
   SCHOLARSHIP SPOTLIGHT SECTION
   ══════════════════════════════════════════════════════════════════ */
.schol-spotlight { background: linear-gradient(160deg, #0B1E3D, #152B5E) !important; }

/* ══════════════════════════════════════════════════════════════════
   CTA SECTION
   ══════════════════════════════════════════════════════════════════ */
.section-ink .sec-title.white {
  text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.section-ink .sec-sub.white {
  color: rgba(255,255,255,0.82) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.82) !important;
}

/* ══════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — Vivid
   ══════════════════════════════════════════════════════════════════ */
#announcementBar {
  background: #050D1F !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   COMPARE PAGE — Table refinements
   ══════════════════════════════════════════════════════════════════ */
.compare-table th {
  background: linear-gradient(180deg, #EEF2FF, #E8F0FE) !important;
  color: #0F2A5C !important;
  -webkit-text-fill-color: #0F2A5C !important;
  font-weight: 800 !important;
}
.compare-table td {
  color: #374151 !important;
  -webkit-text-fill-color: #374151 !important;
}
.compare-table tr:hover td {
  background: #F8FAFF !important;
}

/* ══════════════════════════════════════════════════════════════════
   SCORE BARS — Visual progress indicators
   ══════════════════════════════════════════════════════════════════ */
.score-bar-fill {
  background: linear-gradient(90deg, #D97706, #F0C040) !important;
  box-shadow: 0 0 8px rgba(240,192,64,0.3) !important;
}

/* ══════════════════════════════════════════════════════════════════
   FORM ELEMENTS — Global polish
   ══════════════════════════════════════════════════════════════════ */
.sp2-inp, .sp2-types .sp2-chip {
  transition: all 0.15s ease !important;
}
.sp2-chip.active, .sp2-chip:hover {
  transform: translateY(-1px) !important;
}
.sp2-btn {
  background: linear-gradient(135deg, #0F2A5C, #1E3A5F) !important;
  box-shadow: 0 4px 16px rgba(15,42,92,0.25) !important;
  transition: all 0.2s var(--ease-spring) !important;
}
.sp2-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(15,42,92,0.38) !important;
}

/* ══════════════════════════════════════════════════════════════════
   APPLY/LISTING PAGE
   ══════════════════════════════════════════════════════════════════ */
.apply-hero { background: linear-gradient(160deg, #0F2A5C, #1a3870) !important; }

/* ══════════════════════════════════════════════════════════════════
   FINAL SPECIFICITY OVERRIDES
   All nav link colours — locked absolutely last
   ══════════════════════════════════════════════════════════════════ */
.navbar .nav-links a,
.navbar .nav-links a:any-link,
.navbar .nav-link-btn {
  color: rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
}
.navbar .nav-links a:hover,
.navbar .nav-link-btn:hover {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  background: rgba(255,255,255,0.08) !important;
}
.navbar .nav-links a.active {
  color: var(--gold) !important;
  -webkit-text-fill-color: var(--gold) !important;
}

/* Dropdown must be dark text on white — max specificity */
.navbar .nav-dropdown a,
.navbar .nav-dropdown a:any-link,
.navbar .nav-item .nav-dropdown a {
  color: #1E293B !important;
  -webkit-text-fill-color: #1E293B !important;
  background: transparent !important;
}
.navbar .nav-dropdown a:hover {
  color: #0F2A5C !important;
  -webkit-text-fill-color: #0F2A5C !important;
  background: #EEF2FF !important;
}