/* =========================================================
   EPSE KIDS-FRIENDLY PROFESSIONAL THEME
   Colorful school-inspired backgrounds + high text contrast
   ========================================================= */
:root{
  --kids-blue:#1268d6;
  --kids-navy:#123b73;
  --kids-sky:#eaf8ff;
  --kids-yellow:#ffd75a;
  --kids-orange:#ff9f2f;
  --kids-green:#38b77a;
  --kids-pink:#ff7da8;
  --kids-purple:#8b72e8;
  --kids-cream:#fffaf0;
  --kids-ink:#17324d;
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 8% 15%, rgba(255,215,90,.20) 0 42px, transparent 43px),
    radial-gradient(circle at 94% 31%, rgba(56,183,122,.14) 0 55px, transparent 56px),
    linear-gradient(180deg,#f8fdff 0%,#fffaf2 52%,#f8fbff 100%);
  color:var(--kids-ink);
}

/* ---------- Header ---------- */
header{
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid rgba(18,104,214,.10);
  box-shadow:0 8px 30px rgba(18,59,115,.10)!important;
  backdrop-filter:blur(12px);
}
.navbar{min-height:82px}
.logo h2{color:var(--kids-navy)!important;line-height:1.1}
.logo img{filter:drop-shadow(0 4px 5px rgba(18,104,214,.12))}
nav a{color:var(--kids-navy)!important;position:relative;padding:10px 2px}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:3px;border-radius:10px;background:linear-gradient(90deg,var(--kids-blue),var(--kids-orange));transform:scaleX(0);transition:.25s}
nav a:hover::after,nav a.active::after{transform:scaleX(1)}
nav a:hover,nav a.active{color:var(--kids-blue)!important}

/* ---------- Decorative page background ---------- */
section:not(.hero-slider):not(.counter-section), .page-banner{
  position:relative;
  overflow:hidden;
}
section:not(.hero-slider):not(.counter-section)::before,
section:not(.hero-slider):not(.counter-section)::after,
.page-banner::before,.page-banner::after{
  position:absolute;
  pointer-events:none;
  z-index:0;
  opacity:.78;
}
section:not(.hero-slider):not(.counter-section)::before{
  content:"⭐   ✏️";
  top:20px;right:2.5%;font-size:1.45rem;letter-spacing:14px;
  transform:rotate(-7deg);
}
section:not(.hero-slider):not(.counter-section)::after{
  content:"☁️   📚";
  bottom:12px;left:2%;font-size:1.35rem;letter-spacing:12px;
}
section:not(.hero-slider):not(.counter-section) > .container,
section:not(.hero-slider):not(.counter-section) > main,
.page-banner > .container,
.page-banner > *{position:relative;z-index:1}

/* ---------- Banners ---------- */
.page-banner{
  margin-top:82px;
  padding:72px 0 64px!important;
  background:
    radial-gradient(circle at 12% 35%, rgba(255,215,90,.55) 0 34px, transparent 35px),
    radial-gradient(circle at 88% 28%, rgba(255,125,168,.22) 0 55px, transparent 56px),
    linear-gradient(135deg,#dff6ff 0%,#fff7df 48%,#f1eaff 100%)!important;
  border-bottom:1px solid rgba(18,104,214,.08)!important;
}
.page-banner::before{content:"☁️";left:5%;top:20px;font-size:3rem}
.page-banner::after{content:"⭐  ✏️";right:5%;bottom:20px;font-size:2rem}
h1.main-title,.page-banner h1{color:var(--kids-navy)!important;text-shadow:0 2px 0 rgba(255,255,255,.7)}
.page-banner p{color:#35516d!important}

/* ---------- Homepage hero ---------- */
.hero-slider{margin-top:82px;min-height:650px!important;background:#cfeeff}
.hero-slider .slide-bg img{object-position:center}
.hero-slider .slide-overlay{
  background:linear-gradient(90deg,rgba(8,46,93,.82) 0%,rgba(8,46,93,.58) 38%,rgba(8,46,93,.08) 72%,rgba(8,46,93,.05) 100%)!important;
}
.hero-slider .slide::after{
  content:"⭐     ✏️     ☁️";
  position:absolute;right:4%;top:9%;font-size:2rem;letter-spacing:10px;z-index:2;
  opacity:.9;transform:rotate(-5deg);
}
.hero-slider .hero-content{z-index:4}
.hero-slider .main-title{color:#fff!important;max-width:780px;text-shadow:0 3px 12px rgba(0,0,0,.35)}
.hero-slider .hero-content p{max-width:680px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.hero-slider .btn-primary{background:var(--kids-orange)!important;border-color:var(--kids-orange)!important;color:#17324d!important;box-shadow:0 9px 25px rgba(255,159,47,.32)!important}
.hero-slider .btn-primary:hover{background:#ffb84f!important;border-color:#ffb84f!important}
.hero-slider .btn-outline{background:rgba(255,255,255,.94)!important;color:var(--kids-blue)!important;border-color:#fff!important}
.hero-slider .slider-arrow{background:rgba(255,255,255,.9)!important;color:var(--kids-blue)!important;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.hero-slider .dot.active{background:var(--kids-orange)!important}

/* ---------- Sections ---------- */
section:not(.hero-slider){padding:74px 0!important}
section:not(.hero-slider):nth-of-type(odd){background-color:rgba(255,255,255,.74)}
section:not(.hero-slider):nth-of-type(even){background-color:rgba(234,248,255,.60)}
.section-title{color:var(--kids-navy)!important;font-weight:800!important}
.section-title::after{height:5px!important;width:72px!important;background:linear-gradient(90deg,var(--kids-blue),var(--kids-orange),var(--kids-green))!important}
.section-subtitle,.section-intro{color:#46627b!important}

/* ---------- Cards / feature blocks ---------- */
.card,.feature-card,.message-card,.assessment-box,.principle,.stage,.quote-panel{
  background:rgba(255,255,255,.93)!important;
  border:1px solid rgba(18,104,214,.10)!important;
  border-radius:22px!important;
  box-shadow:0 14px 35px rgba(18,59,115,.10)!important;
}
.card:hover,.feature-card:hover{transform:translateY(-8px);box-shadow:0 20px 42px rgba(18,104,214,.15)!important}
.card:nth-child(3n+1) .highlight-icon,.feature-card:nth-child(3n+1) .feature-icon{color:var(--kids-blue)!important}
.card:nth-child(3n+2) .highlight-icon,.feature-card:nth-child(3n+2) .feature-icon{color:var(--kids-orange)!important}
.card:nth-child(3n) .highlight-icon,.feature-card:nth-child(3n) .feature-icon{color:var(--kids-green)!important}
.card h3,.feature-card h3,.message-card h3{color:var(--kids-navy)!important}
.highlight-icon,.feature-icon{font-size:2.4rem}
.feature-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#eaf6ff;margin-bottom:18px}

/* ---------- Stats ---------- */
.counter-section{
  background:
    radial-gradient(circle at 10% 20%,rgba(255,215,90,.28) 0 42px,transparent 43px),
    radial-gradient(circle at 90% 75%,rgba(255,125,168,.22) 0 55px,transparent 56px),
    linear-gradient(135deg,#123b73,#1268d6)!important;
  position:relative;overflow:hidden;
}
.counter-section::before{content:"⭐  ☁️  ✏️  📚";position:absolute;top:18px;left:5%;font-size:1.5rem;opacity:.75;letter-spacing:18px}
.counter-section::after{content:"☁️  ⭐";position:absolute;bottom:12px;right:5%;font-size:2rem;opacity:.7}
.counter-card{background:rgba(255,255,255,.12)!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:22px!important;backdrop-filter:blur(8px)}
.counter-icon{color:var(--kids-yellow)!important}

/* ---------- Buttons ---------- */
.btn-primary{background:var(--kids-blue)!important;border-color:var(--kids-blue)!important;box-shadow:0 9px 22px rgba(18,104,214,.24)!important}
.btn-primary:hover{background:#0c57b7!important;border-color:#0c57b7!important}
.btn-outline{color:var(--kids-blue)!important;border-color:var(--kids-blue)!important;background:#fff}
.btn-outline:hover{background:var(--kids-blue)!important;color:#fff!important}

/* ---------- Footer ---------- */
footer,.site-footer{background:linear-gradient(135deg,#102f59,#123b73)!important;position:relative;overflow:hidden}
footer::before{content:"⭐   ✏️   ☁️   📚";position:absolute;right:4%;top:18px;opacity:.22;font-size:1.5rem;letter-spacing:15px}

/* ---------- Mobile ---------- */
@media(max-width:768px){
  .page-banner{margin-top:0!important;padding:54px 0 46px!important}
  .hero-slider{margin-top:0!important;min-height:600px!important}
  .hero-slider .slide-overlay{background:linear-gradient(180deg,rgba(8,46,93,.82),rgba(8,46,93,.54) 65%,rgba(8,46,93,.25))!important}
  section:not(.hero-slider){padding:58px 0!important}
  section:not(.hero-slider)::before{right:4%;font-size:1.1rem;letter-spacing:5px}
  section:not(.hero-slider)::after{left:3%;font-size:1.05rem;letter-spacing:4px}
  nav ul{padding-bottom:4px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}