/* =====================================================================
   LUMAFRICA — Frontend (home page) theme to match the coming-soon page
   + learning-themed animated background. Loaded after style.css.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  --secondary-color:#1B3A6B;          /* was #00A3FF */
  --lf-navy:#1B3A6B; --lf-green:#2C8A5B; --lf-gold:#E0A826; --lf-cream:#FBF9F7;
}

/* ---- canvas + base ---- */
html{ background:
  radial-gradient(120% 80% at 50% -10%, #ffffff 0%, #F4F7FB 45%, #EEF3F8 100%) fixed; }
body{ background:transparent !important; font-family:'Plus Jakarta Sans','Inter',sans-serif !important; color:#243049; }

h1,h2,h3,h4,h5,h6,.bannar-content h2,.title-area h1{ font-family:'Plus Jakarta Sans',sans-serif !important; }

/* kill the rainbow gradient text → Lumafrica navy→green→gold */
.title-area h3,.register-form-modal .modal-title,.bannar-content h4{
  background:linear-gradient(95deg,#1B3A6B 10%,#2C8A5B 55%,#E0A826 100%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent; color:transparent !important;
}
.bannar-content h2{ color:#15315c !important; }
.bannar-content h2 span,.title-area h1 span{ color:var(--lf-green) !important; }

/* buttons / pills */
.us-btn,.header-btn a,.submit-form-btn,.main-btn,button.us-btn{
  background:linear-gradient(135deg,#1B3A6B 0%,#15315c 100%) !important;
  border-color:#1B3A6B !important; color:#fff !important;
  box-shadow:0 12px 24px -12px rgba(27,58,107,.6) !important;
}
.us-btn:hover,.header-btn a:hover,.submit-form-btn:hover{ filter:brightness(1.08); }

/* LUMAFRICA #8: login button icon */
.header-btn a.login-btn{ display:inline-flex; align-items:center; gap:8px; }
.login-btn-icon{ font-size:.95em; line-height:1; }

/* header */
.header-area{ background:rgba(255,255,255,.86) !important; backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid #E7ECF3; }
.main-menu ul li a:hover,.primary-menu .nav-link:hover{ color:var(--lf-green) !important; }

/* hero */
.bannar-area{ background:transparent !important; }
.ekatoor-user .single-user h3{ color:var(--lf-navy) !important; }
.ekatoor-user .single-user span{ color:#6B7A90 !important; }

/* sections / cards accents */
.single-service:hover,.single-price{ border-color:#E7ECF3 !important; }
a{ color:var(--lf-navy); } a:hover{ color:var(--lf-green); }
.color-ff,.footer-area{ }
.footer-area{ background:#0B1C34 !important; }

/* dark Price section — readable titles on navy */
.pricing-area{ background:linear-gradient(160deg,#102746 0%,#0B1C34 100%) !important; }
.pricing-area .title-area h3{ background:none !important; -webkit-text-fill-color:#fff !important; color:#fff !important; }
.pricing-area .title-area p{ color:rgba(255,255,255,.82) !important; }
/* feature card icons on brand */
.single-service i,.service-icon i{ color:#1B3A6B; }
.single-service:hover i{ color:#2C8A5B; }

/* themed hero visual (replaces removed kid image) — clean baobab on a soft halo */
.lf-hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:460px; }
/* animated logo — real mark + glow + masked shine sweep */
.lf-logo-bob{ position:relative; z-index:2; animation:lf-bob 7s ease-in-out infinite; }
.lf-logo-mark{ position:relative; width:clamp(180px,24vw,250px); animation:lf-logo-in 1.1s cubic-bezier(.2,.85,.25,1) both; }
.lf-logo-img{ display:block; width:100%; height:auto; animation:lf-glow 4.5s ease-in-out infinite; }
.lf-shine{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  background-size:250% 100%; background-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain; mix-blend-mode:screen;
  animation:lf-shine 5.5s ease-in-out infinite; }
@keyframes lf-logo-in{ from{ opacity:0; transform:scale(.62) translateY(22px) } to{ opacity:1; transform:none } }
@keyframes lf-glow{ 0%,100%{ filter:drop-shadow(0 16px 34px rgba(27,58,107,.22)) } 50%{ filter:drop-shadow(0 18px 42px rgba(224,168,38,.42)) } }
@keyframes lf-shine{ 0%{ background-position:160% 0 } 55%,100%{ background-position:-60% 0 } }
.lf-hero-visual .lf-ring{ position:absolute; width:min(400px,80%); aspect-ratio:1; border-radius:50%; z-index:1;
  background:radial-gradient(circle, #ffffff 0%, rgba(244,247,251,.85) 52%, rgba(244,247,251,0) 72%);
  border:1px solid #E7ECF3; box-shadow:0 36px 80px -34px rgba(27,58,107,.32); }
.lf-hero-visual .lf-ring::after{ content:""; position:absolute; inset:8%; border-radius:50%; border:1.5px dashed rgba(27,58,107,.12); }
.lf-hero-visual .lf-orb{ position:absolute; border-radius:50%; filter:blur(3px); z-index:0; }
.lf-hero-visual .lf-orb.g1{ width:230px;height:230px; background:radial-gradient(circle,rgba(245,194,75,.32),transparent 70%); top:2%; right:4%; }
.lf-hero-visual .lf-orb.g2{ width:210px;height:210px; background:radial-gradient(circle,rgba(52,199,123,.24),transparent 70%); bottom:2%; left:2%; }
@keyframes lf-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }

/* hide the oversized faded section-title watermark */
.title-area h1{ display:none !important; }
.title-area h3{ font-size:38px !important; }
.title-area{ margin-bottom:48px !important; }


/* =====================================================================
   LEARNING-THEMED ANIMATED BACKGROUND (site-wide)
   ===================================================================== */
body::before, body::after{
  content:""; position:fixed; inset:-10%; z-index:-1; pointer-events:none;
  background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420' fill='none' stroke='%231B3A6B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg%3E%3Cpath d='M40 78 L78 62 L116 78 L78 94 Z'/%3E%3Cpath d='M116 78 v18'/%3E%3Cpath d='M58 86 v14 a20 7 0 0 0 40 0 v-14'/%3E%3C/g%3E%3Cg stroke='%232C8A5B'%3E%3Cpath d='M250 60 q22 -9 44 0 v44 q-22 -9 -44 0 z'/%3E%3Cpath d='M294 60 q22 -9 44 0 v44 q-22 -9 -44 0 z'/%3E%3Cpath d='M294 60 v44'/%3E%3C/g%3E%3Cg stroke='%23E0A826'%3E%3Cpath d='M300 300 l44 -44 l14 14 l-44 44 l-18 4 z'/%3E%3Cpath d='M330 270 l14 14'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='96' cy='300' r='20'/%3E%3Cpath d='M86 322 h20 M89 330 h14'/%3E%3C/g%3E%3Cg stroke='%232C8A5B'%3E%3Ccircle cx='210' cy='220' r='5'/%3E%3Cellipse cx='210' cy='220' rx='30' ry='11'/%3E%3Cellipse cx='210' cy='220' rx='30' ry='11' transform='rotate(60 210 220)'/%3E%3Cellipse cx='210' cy='220' rx='30' ry='11' transform='rotate(120 210 220)'/%3E%3C/g%3E%3Ctext x='168' y='372' font-size='44' fill='%23E0A826' stroke='none' font-family='serif'%3E%CF%80%3C/text%3E%3Ctext x='300' y='180' font-size='30' fill='%231B3A6B' stroke='none' font-weight='700' font-family='sans-serif'%3EAa%3C/text%3E%3C/svg%3E");
  background-size:420px 420px;
  opacity:.06;
  animation:lf-edu-drift 90s linear infinite;
}
body::after{ background-size:300px 300px; opacity:.045; animation:lf-edu-drift2 140s linear infinite; }
@keyframes lf-edu-drift{ from{ background-position:0 0 } to{ background-position:420px -420px } }
@keyframes lf-edu-drift2{ from{ background-position:0 0 } to{ background-position:-300px 300px } }

@media (prefers-reduced-motion: reduce){
  body::before, body::after{ animation:none; }
  .lf-float-ico,.lf-logo-bob,.lf-logo-svg,.lf-logo-svg *{ animation:none !important; }
}