/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Arial Rounded MT Bold','Varela Round',Arial,sans-serif;color:#2D2D2D;background:#fff;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font-family:'Arial Rounded MT Bold','Varela Round',Arial,sans-serif}

/* ─── TOKENS ─── */
:root{
  --y:#FFD000;
  --yd:#F5B800;
  --yl:#FFF9C4;
  --o:#FF8C00;
  --r:#E53935;
  --b:#1A2E5A;
  --bl:#42A5F5;
  --g:#2E7D32;
  --gl:#66BB6A;
  --txt:#1A1A2E;
  --muted:#5a5a72;
  --rad:16px;
  --sh:0 4px 24px rgba(0,0,0,.10);
  --sh-lg:0 10px 44px rgba(0,0,0,.14);
  --sp-xs:clamp(10px,1.5vw,14px);
  --sp-sm:clamp(16px,2.5vw,24px);
  --sp-md:clamp(26px,4vw,48px);
  --sp-lg:clamp(42px,6vw,80px);
  --sp-xl:clamp(58px,8vw,110px);
}

/* ─── TOP STRIP ─── */
.topstrip{
  background:var(--r);
  color:#fff;
  font-size:clamp(.8rem,.95vw,.92rem);
  font-weight:700;
  padding:8px var(--sp-sm);
  text-align:center;
}
.topstrip a{color:var(--y);text-decoration:underline}
.topstrip-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px}

/* ─── NAVBAR ─── */
.navbar{
  background:var(--y);
  position:sticky;top:0;z-index:900;
  box-shadow:0 3px 14px rgba(0,0,0,.14);
}
.nav-inner{
  max-width:1280px;margin:0 auto;
  padding:0 var(--sp-sm);
  display:flex;align-items:center;
  justify-content:space-between;
  height:clamp(66px,10vw,90px);
  gap:12px;
}
.nav-logo{flex-shrink:0}
.nav-logo img{
  height:clamp(52px,8vw,78px);
  width:auto;object-fit:contain;
  background:#fff;
  border-radius:10px;
  padding:5px 10px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.nav-links{
  display:flex;align-items:center;gap:2px;list-style:none;
  flex:1;justify-content:center;flex-wrap:wrap;
}
.nav-links a{
  font-weight:800;font-size:clamp(.88rem,.95vw,1rem);
  color:var(--b);
  padding:8px clamp(8px,1.2vw,16px);
  border-radius:24px;transition:all .2s;white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active{background:var(--b);color:#fff}
.nav-cta{background:var(--r)!important;color:#fff!important;padding:9px clamp(12px,1.5vw,20px)!important}
.nav-cta:hover{background:#c62828!important}
.nav-social{display:flex;gap:8px;flex-shrink:0}
.nav-social a{
  width:36px;height:36px;border-radius:50%;
  background:var(--b);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;font-weight:900;transition:all .2s;
}
.nav-social a:hover{background:var(--r);transform:scale(1.1)}
.hamburger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;flex-shrink:0;
}
.hamburger span{display:block;width:26px;height:3px;background:var(--b);border-radius:3px;transition:all .3s}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,6px)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-6px)}

/* ─── MOBILE MENU ─── */
.mob-menu{
  display:none;position:fixed;inset:0;
  background:var(--y);z-index:2000;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  overflow-y:auto;
}
.mob-menu.open{display:flex}
.mob-close{
  position:absolute;top:18px;right:22px;
  font-size:2rem;color:var(--b);
  background:none;border:none;cursor:pointer;line-height:1;
  min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;
}
.mob-menu a{
  font-family:'Fredoka One',cursive;font-size:clamp(1.3rem,4vw,1.8rem);
  color:var(--b);
  padding:12px 36px;border-radius:32px;
  min-width:200px;text-align:center;
  transition:all .2s;
}
.mob-menu a:hover,.mob-menu a:focus{background:var(--b);color:#fff}
.mob-cta-link{background:var(--r)!important;color:#fff!important}

/* ─── HERO ─── */
.hero{background:#f5faff;overflow:hidden}

.hero-top{
  max-width:1280px;margin:0 auto;
  padding:var(--sp-lg) var(--sp-sm) var(--sp-md);
  display:grid;
  grid-template-columns:1fr minmax(280px,420px);
  gap:var(--sp-md);
  align-items:center;
  position:relative;z-index:1;
}

.admission-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--r);color:#fff;
  font-weight:900;font-size:clamp(1.05rem,1.2vw,1.35rem);
  padding:10px 24px;border-radius:24px;margin-bottom:16px;
  border:2.5px solid var(--y);
  box-shadow:0 4px 18px rgba(229,57,53,.45);
  animation:pop 2.5s ease-in-out infinite;
}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

.hero-h1{
  font-family:'Fredoka One',cursive;
  font-size:clamp(1.9rem,4vw,3.2rem);
  color:var(--b);line-height:1.15;margin-bottom:14px;
}
.hero-h1 .acc{color:var(--r)}
.hero-sub{
  font-size:clamp(.92rem,1.1vw,1.02rem);
  color:var(--muted);line-height:1.8;
  margin-bottom:18px;max-width:480px;
}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.htag{
  background:var(--yl);border:2px solid var(--yd);
  color:var(--b);font-weight:800;font-size:clamp(.78rem,.82vw,.84rem);
  padding:5px 13px;border-radius:20px;white-space:nowrap;
}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap}

/* ─── BUTTONS ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-weight:900;font-size:clamp(.88rem,.98vw,1rem);
  padding:clamp(11px,1.5vw,14px) clamp(18px,2.5vw,28px);
  border-radius:30px;border:none;cursor:pointer;
  transition:all .22s;white-space:nowrap;min-height:44px;
}
.btn-y{background:var(--y);color:var(--b);box-shadow:0 4px 16px rgba(255,208,0,.45)}
.btn-y:hover{background:var(--yd);transform:translateY(-2px)}
.btn-bl{background:transparent;color:var(--b);border:2.5px solid var(--b)}
.btn-bl:hover{background:var(--b);color:#fff}
.btn-r{background:var(--r);color:#fff;box-shadow:0 4px 16px rgba(229,57,53,.38)}
.btn-r:hover{background:#c62828;transform:translateY(-2px)}
.btn-navy{
  background:linear-gradient(135deg,var(--b),#1976D2);color:#fff;
  box-shadow:0 4px 18px rgba(21,101,192,.3);
}
.btn-navy:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(21,101,192,.4)}

/* ─── HERO QUICK CARD ─── */
.hero-card{
  background:#fff;border-radius:22px;
  padding:clamp(20px,3vw,30px);
  box-shadow:var(--sh-lg);
  border:3px solid var(--y);
}
.hero-card h3{
  font-family:'Fredoka One',cursive;
  font-size:clamp(1.1rem,1.5vw,1.3rem);
  color:var(--b);margin-bottom:3px;
}
.hero-card .sub{font-size:.82rem;color:var(--muted);margin-bottom:16px}
.fg0{margin-bottom:11px}
.fg0 input,.fg0 select{
  width:100%;padding:12px 14px;
  border-radius:12px;border:2px solid #dde4f0;
  font-size:clamp(.86rem,.95vw,.92rem);
  color:var(--txt);background:#f8faff;outline:none;
  transition:border .2s;min-height:44px;
}
.fg0 input:focus,.fg0 select:focus{border-color:var(--yd);background:#fff}
.fg0 input::placeholder{color:#aab}

/* ─── HERO SCENE ─── */
.hero-scene{
  position:relative;background:#e8f5e9;
  overflow:hidden;
}
.scene-ground{position:absolute;bottom:0;left:0;width:100%;pointer-events:none}
.hero-scene-inner{
  position:relative;
  height:clamp(200px,28vw,340px);
}
.sc-elephant{
  position:absolute;
  bottom:clamp(15px,4vw,30px);
  left:clamp(16px,5%,60px);
  width:clamp(90px,14vw,200px);
  mix-blend-mode:multiply;
  filter:brightness(1.08) contrast(1.08);
  animation:bounce 3s ease-in-out infinite;
  z-index:2;
}
.sc-giraffe{
  position:absolute;
  bottom:clamp(15px,4vw,30px);
  right:clamp(16px,5%,60px);
  width:clamp(70px,10vw,150px);
  mix-blend-mode:multiply;
  filter:brightness(1.08) contrast(1.08);
  animation:sway 4s ease-in-out infinite;
  z-index:2;
}
.sc-train{
  position:absolute;
  bottom:clamp(8px,2.5vw,18px);
  left:50%;transform:translateX(-50%);
  width:clamp(110px,18vw,240px);
  mix-blend-mode:multiply;
  filter:brightness(1.08) contrast(1.08);
  animation:trainpuff 6s ease-in-out infinite;
  z-index:2;
}
.sc-flower{
  position:absolute;
  bottom:clamp(30px,8vw,60px);
  left:32%;
  font-size:clamp(1.4rem,3vw,2.2rem);
  animation:sway 3s ease-in-out infinite;
  z-index:3;
}
.sc-cloud{
  position:absolute;
  background:#fff;border-radius:50px;
  opacity:.7;pointer-events:none;z-index:1;
}
.sc-cloud::before,.sc-cloud::after{
  content:'';position:absolute;background:#fff;border-radius:50%;
}
.c-a{width:clamp(50px,7vw,90px);height:clamp(22px,3vw,36px);top:8%;left:8%}
.c-a::before{width:70%;height:160%;top:-60%;left:15%}
.c-a::after{width:60%;height:140%;top:-40%;left:45%}
.c-b{width:clamp(40px,5vw,70px);height:clamp(18px,2.5vw,28px);top:12%;left:35%}
.c-b::before{width:70%;height:160%;top:-60%;left:15%}
.c-b::after{width:60%;height:140%;top:-40%;left:45%}
.c-c{width:clamp(44px,6vw,80px);height:clamp(20px,2.8vw,32px);top:6%;right:20%}
.c-c::before{width:70%;height:160%;top:-60%;left:15%}
.c-c::after{width:60%;height:140%;top:-40%;left:45%}
.sc-dot{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  background:var(--y);opacity:.55;
}
.sd1{width:10px;height:10px;top:30%;left:25%}
.sd2{width:7px;height:7px;top:20%;right:35%}
.sd3{width:12px;height:12px;bottom:40%;left:18%}

.palm{position:absolute;bottom:clamp(12px,3.5vw,25px);z-index:2}
.palm svg{display:block}
.palm-l{right:clamp(90px,18%,220px)}
.palm-r{right:clamp(20px,4%,50px)}

@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes trainpuff{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}

.hero-strip{height:16px;background:var(--o)}

/* ─── STATS BAR ─── */
.stats{background:var(--b);padding:clamp(18px,3vw,26px) 0}
.stats-grid{
  max-width:1280px;margin:0 auto;
  padding:0 var(--sp-sm);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.stat{
  text-align:center;
  border-right:1px solid rgba(255,255,255,.12);
  padding:6px 0;
}
.stat:last-child{border:none}
.stat-n{
  font-family:'Fredoka One',cursive;
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  color:var(--y);line-height:1;
}
.stat-l{font-size:clamp(.78rem,.88vw,.84rem);color:rgba(255,255,255,.75);margin-top:4px;font-weight:700}

/* ─── SECTION SHELL ─── */
.sec{padding:var(--sp-xl) 0}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--sp-sm)}
.sec-head{text-align:center;margin-bottom:var(--sp-md)}
.sec-tag{
  display:inline-block;
  background:var(--yl);border:2px solid var(--yd);
  color:var(--b);font-weight:900;
  font-size:clamp(.75rem,.82vw,.82rem);
  letter-spacing:2px;text-transform:uppercase;
  padding:5px 16px;border-radius:20px;margin-bottom:12px;
}
.sec-head h2{
  font-family:'Fredoka One',cursive;
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  color:var(--b);line-height:1.2;margin-bottom:10px;
}
.sec-head h2 .acc{color:var(--r)}
.sec-head p{font-size:clamp(.9rem,1.05vw,1rem);color:var(--muted);max-width:560px;margin:0 auto;line-height:1.8}
.divider{width:56px;height:5px;background:linear-gradient(90deg,var(--y),var(--o));border-radius:3px;margin:14px auto 0}

/* ─── PROGRAMS ─── */
.programs{background:#fff}
.prog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(clamp(160px,18vw,200px),1fr));
  gap:clamp(12px,2vw,20px);
}
.prog-card{
  border-radius:20px;overflow:hidden;box-shadow:var(--sh);
  border:3px solid transparent;background:#fff;
  transition:all .3s;cursor:pointer;
}
.prog-card:hover{transform:translateY(-7px);box-shadow:var(--sh-lg);border-color:var(--yd)}
.prog-head{padding:clamp(18px,2.5vw,26px) clamp(14px,2vw,20px) clamp(14px,2vw,18px);text-align:center}
.p1 .prog-head{background:linear-gradient(135deg,#1565C0,#1976D2)}
.p2 .prog-head{background:linear-gradient(135deg,#F57F17,#FFA000)}
.p3 .prog-head{background:linear-gradient(135deg,#2E7D32,#388E3C)}
.p4 .prog-head{background:linear-gradient(135deg,#6A1B9A,#7B1FA2)}
.p5 .prog-head{background:linear-gradient(135deg,#C62828,#D32F2F)}
.p6 .prog-head{background:linear-gradient(135deg,#00796B,#009688)}
.p7 .prog-head{background:linear-gradient(135deg,#E64A19,#FF5722)}
.p8 .prog-head{background:linear-gradient(135deg,#AD1457,#E91E63)}
.p9 .prog-head{background:linear-gradient(135deg,#37474F,#546E7A)}
.p10 .prog-head{background:linear-gradient(135deg,#283593,#3949AB)}
.prog-icon{font-size:clamp(2rem,3.5vw,2.8rem);margin-bottom:8px}
.prog-head h3{font-family:'Fredoka One',cursive;font-size:clamp(.95rem,1.25vw,1.1rem);color:#fff;margin-bottom:4px}
.prog-age{background:rgba(255,255,255,.2);color:#fff;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:12px;display:inline-block}
.prog-body{padding:clamp(12px,1.8vw,16px) clamp(14px,2vw,18px) clamp(14px,2vw,20px)}
.prog-list{list-style:none;margin-bottom:13px}
.prog-list li{
  font-size:clamp(.8rem,.88vw,.86rem);color:var(--muted);
  padding:5px 0;border-bottom:1px solid #f0f0f0;
  display:flex;align-items:flex-start;gap:6px;
}
.prog-list li::before{content:"✓";color:var(--gl);font-weight:900;font-size:.88rem;flex-shrink:0;margin-top:1px}
.prog-list li:last-child{border:none}
.prog-btn{
  display:block;text-align:center;
  background:var(--yl);color:var(--b);
  font-weight:800;font-size:clamp(.76rem,.84vw,.82rem);
  padding:9px;border-radius:10px;
  border:2px solid var(--yd);transition:all .2s;
  min-height:40px;display:flex;align-items:center;justify-content:center;
}
.prog-btn:hover{background:var(--yd)}

/* ─── VISION & MISSION ─── */
.vision-sec{background:linear-gradient(135deg,#E3F2FD 0%,#FFF9C4 100%)}
.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px)}
.vm-card{
  background:#fff;border-radius:22px;
  padding:clamp(28px,4vw,48px);
  box-shadow:var(--sh-lg);
  text-align:center;
  border-top:6px solid var(--b);
  transition:transform .25s;
}
.vm-card:hover{transform:translateY(-6px)}
.vm-card.mission{border-top-color:var(--r)}
.vm-icon{font-size:clamp(2.8rem,4.5vw,4rem);margin-bottom:18px}
.vm-h{
  font-family:'Fredoka One',cursive;
  font-size:clamp(2rem,3.2vw,2.8rem);
  color:var(--b);
  margin-bottom:18px;
  line-height:1.1;
}
.vm-card.mission .vm-h{color:var(--r)}
.vm-p{font-size:clamp(.92rem,1.1vw,1.02rem);color:var(--muted);line-height:2}

/* ─── ADMISSIONS ─── */
.admissions{background:#FFFDE7}
.admit-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:clamp(28px,5vw,56px);
  align-items:start;
}
.steps-list{list-style:none}
.step-item{display:flex;gap:14px;padding:16px 0;border-bottom:2px dashed var(--yd)}
.step-item:last-child{border:none}
.step-num{
  width:42px;height:42px;min-width:42px;
  background:var(--b);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka One',cursive;font-size:1.1rem;flex-shrink:0;
}
.step-celebrate .step-num{background:var(--g);font-size:1.3rem}
.step-content h4{font-family:'Fredoka One',cursive;font-size:clamp(.95rem,1.05vw,1.06rem);color:var(--b);margin-bottom:3px}
.step-content p{font-size:clamp(.8rem,.88vw,.84rem);color:var(--muted);line-height:1.65}

.form-card{
  background:#fff;border-radius:22px;
  padding:clamp(20px,3vw,34px);
  box-shadow:var(--sh-lg);border:3px solid var(--y);
}
.form-card h3{font-family:'Fredoka One',cursive;font-size:clamp(1.15rem,1.55vw,1.45rem);color:var(--b);margin-bottom:3px}
.form-sub{font-size:.84rem;color:var(--muted);margin-bottom:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fg{margin-bottom:13px}
.fg label{display:block;font-weight:800;font-size:.74rem;color:var(--b);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.req{color:var(--r)}
.fc{
  width:100%;padding:12px 14px;
  border:2px solid #dde4f0;border-radius:12px;
  font-size:clamp(.86rem,.94vw,.9rem);
  color:var(--txt);background:#f8faff;
  outline:none;transition:all .2s;
  min-height:46px;
}
.fc:focus{border-color:var(--yd);background:#fff;box-shadow:0 0 0 3px rgba(255,208,0,.15)}
.fc.err{border-color:var(--r);background:#fff8f8}
.fc.ok{border-color:var(--gl)}
.err-msg{font-size:.72rem;color:var(--r);margin-top:3px;display:none}
.err-msg.show{display:block}
.btn-submit{width:100%;margin-top:6px}
.form-note{font-size:.74rem;color:var(--muted);text-align:center;margin-top:8px}
.succ-msg{
  display:none;background:linear-gradient(135deg,var(--g),#388E3C);
  color:#fff;border-radius:12px;padding:18px;text-align:center;margin-top:12px;
}
.succ-msg.show{display:block}
.succ-msg h4{font-family:'Fredoka One',cursive;font-size:1.05rem;margin-bottom:4px}
.succ-msg p{font-size:.84rem;opacity:.9}

/* ─── ABOUT ─── */
.about{background:#FFFDE7}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}
.about-grid-single{grid-template-columns:1fr;max-width:800px;margin-left:auto;margin-right:auto}
.about-visual{position:relative;padding-bottom:24px}

.about-box{
  border-radius:22px;overflow:hidden;
  border:4px solid var(--y);
  box-shadow:var(--sh-lg);
  background:#fff;
  aspect-ratio:4/3;
  display:flex;align-items:center;justify-content:center;
}
.about-box img{
  width:100%;height:100%;object-fit:contain;
  padding:12px;
}
.about-badge{
  position:absolute;top:-14px;left:20px;
  background:var(--r);color:#fff;
  font-family:'Fredoka One',cursive;font-size:clamp(.84rem,1.05vw,.98rem);
  padding:7px 18px;border-radius:20px;
  box-shadow:0 4px 12px rgba(229,57,53,.28);
  z-index:2;
}

.mascot-strip{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:#fff;border:2px solid var(--y);
  border-radius:16px;padding:10px 16px;
  margin-top:10px;
  box-shadow:var(--sh);
}
.mascot-strip img{
  width:clamp(40px,6vw,64px);
  height:clamp(40px,6vw,64px);
  object-fit:contain;
  mix-blend-mode:multiply;
}

.about-content .sec-tag{display:block;width:fit-content;text-align:left}
.about-h2{
  font-family:'Fredoka One',cursive;
  font-size:clamp(1.5rem,2.5vw,2.1rem);
  color:var(--b);line-height:1.2;margin-bottom:12px;
}
.about-h2 .acc{color:var(--yd)}
.about-lead{font-size:clamp(.9rem,1.05vw,.98rem);color:var(--muted);line-height:1.85;margin-bottom:22px}
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,1.5vw,12px);margin-bottom:22px}
.feat{
  background:#fff;border-radius:14px;
  padding:clamp(10px,1.5vw,14px);
  border-left:4px solid var(--yd);
  box-shadow:var(--sh);transition:transform .2s;
}
.feat:hover{transform:translateY(-3px)}
.feat-icon{font-size:clamp(1.3rem,1.9vw,1.6rem);margin-bottom:5px}
.feat h4{font-family:'Fredoka One',cursive;font-size:clamp(.88rem,1vw,.96rem);color:var(--b);margin-bottom:2px}
.feat p{font-size:clamp(.76rem,.84vw,.8rem);color:var(--muted);line-height:1.5}

.dir-card{
  background:var(--b);border-radius:16px;
  padding:clamp(12px,2vw,16px) clamp(14px,2vw,18px);
  display:flex;align-items:center;gap:14px;
}
.dir-av{
  width:72px;height:72px;min-width:72px;border-radius:50%;
  border:3px solid var(--y);overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.dir-av img{width:100%;height:100%;object-fit:cover;object-position:center top}
.dir-text h4{font-family:'Fredoka One',cursive;font-size:clamp(.92rem,1.05vw,.98rem);color:var(--y);margin-bottom:3px}
.dir-text p{font-size:clamp(.78rem,.84vw,.82rem);color:rgba(255,255,255,.8);line-height:1.65}

/* ─── TESTIMONIALS ─── */
.testimonials{background:var(--b);padding:var(--sp-xl) 0}
.testimonials .sec-head h2{color:#fff}
.testimonials .sec-tag{background:rgba(255,208,0,.18);border-color:rgba(255,208,0,.35);color:var(--y)}
.testimonials .sec-head p{color:rgba(255,255,255,.7)}
.rating-bar{
  display:flex;align-items:center;justify-content:center;gap:16px;
  background:rgba(255,255,255,.08);border-radius:16px;
  padding:16px 28px;max-width:360px;margin:-6px auto 40px;
  border:1px solid rgba(255,255,255,.12);
}
.rating-num{font-family:'Fredoka One',cursive;font-size:clamp(2.4rem,4vw,3.2rem);color:var(--y);line-height:1}
.rating-stars{color:var(--y);font-size:1.15rem;letter-spacing:2px}
.rating-count{font-size:.74rem;color:rgba(255,255,255,.55);margin-top:2px}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(clamp(220px,28vw,270px),1fr));gap:14px}
.rev-card{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:clamp(14px,2vw,22px);transition:all .25s;
}
.rev-card:hover{background:rgba(255,255,255,.14);transform:translateY(-5px)}
.rev-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.rev-av{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,var(--y),var(--o));
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka One',cursive;font-size:.92rem;color:var(--b);
}
.rev-stars{color:var(--y);font-size:.82rem}
.rev-q{font-size:clamp(.82rem,.92vw,.88rem);color:rgba(255,255,255,.85);line-height:1.75;font-style:italic;margin-bottom:12px}
.rev-by strong{font-family:'Fredoka One',cursive;font-size:.86rem;color:#fff;display:block}
.rev-by span{font-size:.72rem;color:rgba(255,255,255,.5)}

/* ─── GALLERY ─── */
/* ─── CURRICULUM ─── */
.curriculum-sec{background:#f0f7ff}
.curr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(14px,2vw,22px);
  margin-top:8px;
}
.curr-card{
  background:#fff;border-radius:20px;
  padding:clamp(18px,2.5vw,28px);
  border:2px solid var(--yl);
  box-shadow:var(--sh);
  transition:transform .22s,box-shadow .22s,border-color .22s;
}
.curr-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--yd)}
.curr-icon{
  width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;margin-bottom:14px;
}
.curr-age{
  font-size:.75rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--b);background:#e3f0ff;padding:3px 10px;border-radius:12px;
  display:inline-block;margin-bottom:8px;
}
.curr-title{font-family:'Fredoka One',cursive;font-size:clamp(1.1rem,1.4vw,1.3rem);color:var(--b);margin-bottom:10px}
.curr-list{list-style:none;padding:0;margin:0}
.curr-list li{
  font-size:clamp(.82rem,.9vw,.9rem);color:var(--muted);
  padding:5px 0;border-bottom:1px dashed #e8e8e8;
  display:flex;align-items:center;gap:8px;
}
.curr-list li:last-child{border-bottom:none}
.curr-list li::before{content:'✦';color:var(--o);font-size:.65rem;flex-shrink:0}
.curr-note{
  margin-top:clamp(28px,3.5vw,40px);
  background:linear-gradient(135deg,var(--yl),#fff9c4);
  border-radius:16px;padding:clamp(16px,2vw,24px) clamp(18px,2.5vw,28px);
  border-left:5px solid var(--o);
  display:flex;align-items:flex-start;gap:14px;
}
.curr-note-icon{font-size:1.8rem;flex-shrink:0}
.curr-note h4{font-family:'Fredoka One',cursive;color:var(--b);font-size:1.05rem;margin-bottom:4px}
.curr-note p{font-size:.88rem;color:var(--muted);line-height:1.7}
.curr-hero{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,40px);align-items:center;
  margin-bottom:clamp(28px,4vw,48px);
}
.curr-intro{font-size:clamp(.9rem,1.05vw,1rem);color:var(--muted);line-height:1.85;margin-bottom:14px}
.curr-intro:last-child{margin-bottom:0}
.curr-intro strong{color:var(--b);font-weight:800}
.curr-hero-imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.curr-photo{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:16px;border:3px solid var(--yl);
  box-shadow:var(--sh);transition:transform .3s;
}
.curr-photo:hover{transform:scale(1.03)}
@media(max-width:768px){
  .curr-hero{grid-template-columns:1fr}
  .curr-hero-imgs{grid-template-columns:1fr 1fr}
}
@media(max-width:400px){
  .curr-hero-imgs{grid-template-columns:1fr}
}

/* ─── GALLERY ─── */
.gallery{background:#fff}
.gal-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(140px,16vw,200px);
  gap:clamp(7px,1vw,12px);
}
.gal-item{
  border-radius:14px;overflow:hidden;position:relative;
  cursor:pointer;border:3px solid var(--yl);
  transition:border-color .2s,transform .2s;
  background:#f0f4f8;
}
.gal-item:hover{border-color:var(--yd);transform:scale(1.02)}
.gal-item:nth-child(1){grid-column:span 2;grid-row:span 2}
.gal-item:nth-child(8){grid-column:span 2}
.gal-item:nth-child(15){grid-column:span 2}
.gal-item:nth-child(22){grid-column:span 2}
.gal-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s;
}
.gal-item:hover img{transform:scale(1.08)}
.gal-ov{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(21,101,192,.75)0%,transparent 55%);
  opacity:0;transition:opacity .3s;
  display:flex;align-items:flex-end;padding:12px;
}
.gal-item:hover .gal-ov{opacity:1}
.gal-ov span{font-family:'Fredoka One',cursive;font-size:clamp(.76rem,.9vw,.86rem);color:#fff}
/* ─── LIGHTBOX ─── */
.lb-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.92);
  align-items:center;justify-content:center;
  flex-direction:column;
}
.lb-overlay.open{display:flex}
.lb-img{
  max-width:92vw;max-height:82vh;
  border-radius:12px;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.lb-close{
  position:absolute;top:18px;right:24px;
  font-size:2.2rem;color:#fff;background:none;border:none;cursor:pointer;
  line-height:1;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s;
}
.lb-close:hover{transform:scale(1.2)}
.lb-nav{
  display:flex;gap:16px;margin-top:16px;
}
.lb-btn{
  background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.3);
  color:#fff;font-size:1.4rem;width:48px;height:48px;border-radius:50%;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.lb-btn:hover{background:rgba(255,255,255,.3)}
.lb-counter{color:rgba(255,255,255,.7);font-size:.85rem;margin-top:8px}

/* ─── CONTACT ─── */
.contact{background:#FFFDE7}
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(28px,5vw,56px);align-items:start}
.contact-info h3{font-family:'Fredoka One',cursive;font-size:clamp(1.25rem,1.85vw,1.55rem);color:var(--b);margin-bottom:8px}
.contact-sub{font-size:clamp(.86rem,1vw,.94rem);color:var(--muted);line-height:1.8;margin-bottom:22px}
.c-items{display:flex;flex-direction:column;gap:11px}
.c-item{
  background:#fff;border-radius:14px;
  padding:clamp(10px,1.5vw,14px) clamp(12px,1.8vw,16px);
  display:flex;align-items:flex-start;gap:12px;
  box-shadow:var(--sh);border:2px solid var(--yl);transition:transform .2s;
}
.c-item:hover{transform:translateX(4px);border-color:var(--yd)}
.c-ico{
  width:40px;height:40px;min-width:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.ico-n{background:var(--b);color:#fff}
.ico-y{background:var(--y);color:var(--b)}
.ico-b{background:var(--bl);color:#fff}
.ico-g{background:var(--gl);color:#fff}
.c-dt h4{font-family:'Fredoka One',cursive;font-size:.8rem;color:var(--b);margin-bottom:2px;text-transform:uppercase;letter-spacing:.4px}
.c-dt p,.c-dt a{font-size:clamp(.82rem,.9vw,.88rem);color:var(--muted);line-height:1.7}
.c-dt a{color:var(--bl)}
.map-wrap{border-radius:18px;overflow:hidden;box-shadow:var(--sh-lg);border:3px solid var(--y)}
.map-wrap iframe{width:100%;height:clamp(300px,40vw,420px);border:none;display:block}

/* ─── FOOTER ─── */
footer{background:var(--b);padding:clamp(24px,3.5vw,36px) 0 0}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(16px,2.5vw,28px);
  margin-bottom:clamp(16px,2.5vw,24px);
}
.ft-logo{
  height:clamp(40px,5.5vw,52px);margin-bottom:8px;
  background:#fff;border-radius:10px;padding:5px 10px;
  display:block;
}
.ft-desc{font-size:clamp(.78rem,.85vw,.82rem);color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:10px;max-width:260px}
.ft-badge{display:inline-block;background:var(--y);color:var(--b);font-weight:900;font-size:.72rem;padding:4px 14px;border-radius:12px}
.ft-social{display:flex;gap:6px;margin-top:10px}
.ft-social a{
  width:32px;height:32px;border-radius:6px;
  background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;color:#fff;
  border:1px solid rgba(255,255,255,.15);transition:all .2s;
}
.ft-social a:hover{background:var(--y);color:var(--b)}
.ft-col h4{
  font-family:'Fredoka One',cursive;font-size:.82rem;
  color:var(--y);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px;
}
.ft-col ul{list-style:none}
.ft-col ul li{margin-bottom:6px}
.ft-col ul li a{
  font-size:clamp(.78rem,.85vw,.82rem);color:rgba(255,255,255,.65);
  transition:color .2s;display:flex;align-items:center;gap:5px;
}
.ft-col ul li a::before{content:"›";color:var(--y)}
.ft-col ul li a:hover{color:#fff}
.ft-txt{font-size:clamp(.78rem,.85vw,.82rem);color:rgba(255,255,255,.65);line-height:1.65}
.ft-txt a{color:var(--y)}
.ft-bot{
  border-top:1px solid rgba(255,255,255,.1);
  padding:clamp(12px,2vw,16px) 0;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
}
.ft-bot p{font-size:clamp(.72rem,.8vw,.76rem);color:rgba(255,255,255,.45)}

/* ─── FLOAT BUTTONS ─── */
.wa{
  position:fixed;bottom:26px;right:26px;
  width:56px;height:56px;
  background:#25D366;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.48);
  z-index:800;transition:all .25s;
}
.wa:hover{transform:scale(1.12)}
.wa svg{width:30px;height:30px;fill:#fff}
.wa-tip{
  position:absolute;right:68px;
  background:var(--b);color:#fff;
  font-weight:800;font-size:.74rem;
  padding:6px 12px;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.wa:hover .wa-tip{opacity:1}
.stb{
  position:fixed;bottom:26px;left:26px;
  width:42px;height:42px;
  background:var(--b);color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;font-weight:900;
  box-shadow:var(--sh);z-index:800;border:none;cursor:pointer;
  opacity:0;pointer-events:none;transition:all .3s;
}
.stb.show{opacity:1;pointer-events:all}
.stb:hover{background:var(--o)}

/* ═══════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════ */

@media(max-width:1200px){
  .nav-links a{padding:7px clamp(6px,1vw,12px);font-size:.9rem}
}

@media(max-width:1024px){
  .hero-top{grid-template-columns:1fr;gap:var(--sp-sm);padding-top:var(--sp-md)}
  .hero-sub{max-width:100%}
  .hero-text{text-align:center}
  .hero-tags,.hero-btns{justify-content:center}
  .about-grid{grid-template-columns:1fr;gap:var(--sp-sm)}
  .admit-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,24px)}
  .vision-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .nav-links,.nav-social{display:none}
  .hamburger{display:flex}
  .nav-inner{height:clamp(60px,12vw,72px)}

  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:10px}
  .stat:nth-child(3),.stat:nth-child(4){border-bottom:none}

  .prog-grid{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .vision-grid{grid-template-columns:1fr}
  .gal-grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:clamp(120px,22vw,160px);
  }
  .gal-item:nth-child(1){grid-column:span 2;grid-row:span 1}
  .gal-item:nth-child(8),.gal-item:nth-child(15),.gal-item:nth-child(22){grid-column:span 2}
  .footer-grid{grid-template-columns:1fr}

  .hero-scene-inner{height:clamp(180px,36vw,260px)}
}

@media(max-width:576px){
  .topstrip-inner{flex-direction:column;gap:4px}
  .prog-grid{grid-template-columns:1fr}
  .about-features{grid-template-columns:1fr 1fr}
  .hero-scene-inner{height:clamp(160px,40vw,220px)}
  .sc-elephant{width:clamp(70px,20vw,110px)}
  .sc-giraffe{width:clamp(56px,16vw,90px)}
  .sc-train{width:clamp(90px,24vw,140px)}
  .gal-grid{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:clamp(100px,25vw,140px);
  }
  .gal-item:nth-child(8),.gal-item:nth-child(15),.gal-item:nth-child(22){grid-column:span 2}
  .dir-card{flex-direction:column;text-align:center}
  .footer-grid{grid-template-columns:1fr}
  .ft-bot{flex-direction:column;text-align:center;gap:4px}
}

@media(max-width:400px){
  .hero-top{padding:var(--sp-sm) var(--sp-xs) var(--sp-xs)}
  .hero-btns{flex-direction:column}
  .hero-btns .btn{width:100%}
  .prog-grid{grid-template-columns:1fr}
  .gal-grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:clamp(90px,28vw,130px);
  }
  .gal-item:nth-child(1){grid-column:span 2;grid-row:span 1}
  .gal-item:nth-child(8),.gal-item:nth-child(15),.gal-item:nth-child(22){grid-column:span 2}
  .hero-scene-inner{height:clamp(150px,42vw,200px)}
  .sc-train{width:clamp(80px,22vw,120px)}
  .sc-elephant{width:clamp(60px,18vw,90px)}
  .sc-giraffe{width:clamp(48px,14vw,70px)}
  .about-features{grid-template-columns:1fr}
}

/* ─── PROGRAM MODAL ─── */
.prog-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.25s ease-out;
}
.prog-modal-overlay.open {
  display: flex;
}
.prog-modal-card {
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 520px;
  box-shadow: var(--sh-lg);
  border: 3px solid var(--y);
  position: relative;
  overflow: hidden;
  animation: scaleUp 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scaleUp {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.prog-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 1.6rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  min-width: 36px;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, color 0.2s;
  z-index: 10;
}
.prog-modal-close:hover {
  transform: scale(1.1);
  color: var(--r);
}
.prog-modal-header {
  padding: 24px 24px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px dashed #f0f0f0;
}
.prog-modal-header.p-bg-1 { background: linear-gradient(135deg, rgba(21,101,192,0.1), rgba(25,118,210,0.1)); border-bottom-color: #1565C0; }
.prog-modal-header.p-bg-2 { background: linear-gradient(135deg, rgba(245,127,23,0.1), rgba(255,160,0,0.1)); border-bottom-color: #F57F17; }
.prog-modal-header.p-bg-3 { background: linear-gradient(135deg, rgba(46,125,50,0.1), rgba(56,142,60,0.1)); border-bottom-color: #2E7D32; }
.prog-modal-header.p-bg-4 { background: linear-gradient(135deg, rgba(106,27,154,0.1), rgba(123,31,162,0.1)); border-bottom-color: #6A1B9A; }
.prog-modal-header.p-bg-5 { background: linear-gradient(135deg, rgba(198,40,40,0.1), rgba(211,47,47,0.1)); border-bottom-color: #C62828; }
.prog-modal-header.p-bg-6 { background: linear-gradient(135deg, rgba(0,121,107,0.1), rgba(0,150,136,0.1)); border-bottom-color: #00796B; }
.prog-modal-header.p-bg-7 { background: linear-gradient(135deg, rgba(230,74,25,0.1), rgba(255,87,34,0.1)); border-bottom-color: #E64A19; }
.prog-modal-header.p-bg-8 { background: linear-gradient(135deg, rgba(173,20,87,0.1), rgba(233,30,99,0.1)); border-bottom-color: #AD1457; }
.prog-modal-header.p-bg-9 { background: linear-gradient(135deg, rgba(55,71,80,0.1), rgba(84,110,122,0.1)); border-bottom-color: #37474F; }
.prog-modal-header.p-bg-10 { background: linear-gradient(135deg, rgba(40,53,147,0.1), rgba(57,73,171,0.1)); border-bottom-color: #283593; }

.prog-modal-icon {
  font-size: 2.5rem;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sh);
}
.prog-modal-header h3 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.5rem;
  color: var(--b);
  margin-bottom: 2px;
}
.prog-modal-age {
  background: var(--yl);
  color: var(--b);
  border: 1.5px solid var(--yd);
  font-weight: 800;
  font-size: 0.76rem;
  padding: 2px 10px;
  border-radius: 12px;
  display: inline-block;
}
.prog-modal-body {
  padding: 20px 24px;
  max-height: 380px;
  overflow-y: auto;
}
.prog-modal-section {
  margin-bottom: 18px;
}
.prog-modal-section:last-child {
  margin-bottom: 0;
}
.prog-modal-section h4 {
  font-family: 'Fredoka One', cursive;
  font-size: 0.95rem;
  color: var(--b);
  margin-bottom: 8px;
}
.prog-modal-list {
  list-style: none;
  padding: 0;
}
.prog-modal-list li {
  font-size: 0.88rem;
  color: var(--muted);
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.prog-modal-list li::before {
  content: "✦";
  color: var(--o);
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 4px;
}
.prog-modal-footer {
  padding: 16px 24px 24px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
}

/* ─── BLOG SYSTEM STYLES ─── */
.blog-hero {
  background: linear-gradient(135deg, var(--yl), #FFFDE7);
  padding: var(--sp-lg) var(--sp-sm);
  text-align: center;
  border-bottom: 4px dashed var(--y);
  position: relative;
  overflow: hidden;
}
.blog-hero h1 {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--b);
  margin-bottom: 12px;
}
.blog-hero p {
  font-family: 'Varela Round', sans-serif;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  color: var(--muted);
  max-width: 600px;
  margin: 0 auto;
}
.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-lg) var(--sp-sm);
}
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-md);
}
.blog-card {
  background: #fff;
  border: 3px solid #f0f0f0;
  border-radius: var(--rad);
  overflow: hidden;
  box-shadow: var(--sh);
  transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}
.blog-card:hover {
  transform: translateY(-6px);
  border-color: var(--y);
  box-shadow: var(--sh-lg);
}
.blog-card-img {
  height: 200px;
  overflow: hidden;
  position: relative;
  background: #f7f7f7;
}
.blog-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}
.blog-card:hover .blog-card-img img {
  transform: scale(1.05);
}
.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-card-meta {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-card-title {
  font-family: 'Fredoka One', cursive;
  font-size: 1.25rem;
  color: var(--b);
  margin-bottom: 10px;
  line-height: 1.3;
}
.blog-card-title a {
  transition: color 0.2s;
}
.blog-card-title a:hover {
  color: var(--o);
}
.blog-card-excerpt {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 20px;
  flex-grow: 1;
}
.blog-card-link {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--r);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s, color 0.2s;
}
.blog-card-link:hover {
  color: var(--b);
  gap: 8px;
}

/* --- INDIVIDUAL ARTICLE STYLES --- */
.article-container {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--sp-lg) var(--sp-sm);
}
.article-header {
  margin-bottom: var(--sp-md);
  text-align: center;
}
.article-meta {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.article-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--b);
  line-height: 1.2;
  margin-bottom: 16px;
}
.article-featured-img {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--rad);
  border: 4px solid var(--y);
  box-shadow: var(--sh-lg);
  margin-bottom: var(--sp-md);
}
.article-content {
  font-family: 'Varela Round', sans-serif;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #333;
}
.article-content p {
  margin-bottom: 24px;
}
.article-content h2 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.6rem;
  color: var(--b);
  margin: 36px 0 16px;
  line-height: 1.3;
}
.article-content h3 {
  font-family: 'Fredoka One', cursive;
  font-size: 1.3rem;
  color: var(--b);
  margin: 28px 0 12px;
  line-height: 1.3;
}
.article-content ul, .article-content ol {
  margin-bottom: 24px;
  padding-left: 24px;
}
.article-content li {
  margin-bottom: 8px;
}
.article-content blockquote {
  border-left: 5px solid var(--o);
  background: var(--yl);
  padding: 16px 20px;
  margin: 28px 0;
  border-radius: 0 var(--rad) var(--rad) 0;
  font-style: italic;
  color: var(--b);
}
.article-content blockquote p {
  margin-bottom: 0;
}
.article-footer {
  margin-top: var(--sp-lg);
  padding-top: 24px;
  border-top: 2px dashed #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.article-share {
  display: flex;
  align-items: center;
  gap: 8px;
}
.article-share span {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--b);
}
.article-share-links {
  display: flex;
  gap: 8px;
}
.article-share-links a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: transform 0.2s, background-color 0.2s;
}
.article-share-links a:hover {
  background: var(--o);
  transform: scale(1.1);
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--b);
  font-size: 0.95rem;
  transition: transform 0.2s;
}
.btn-back:hover {
  transform: translateX(-4px);
}
.blog-empty {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 3px dashed #e0e0e0;
  border-radius: var(--rad);
  color: var(--muted);
  grid-column: 1 / -1;
}
.blog-empty p {
  margin-bottom: 16px;
}

/* ─── BLOG ADMIN PANEL STYLES ─── */
.admin-container {
  max-width: 900px;
  margin: var(--sp-md) auto var(--sp-lg);
  padding: 32px;
  background: #fff;
  border: 4px solid var(--y);
  border-radius: var(--rad);
  box-shadow: var(--sh-lg);
}
.admin-header {
  border-bottom: 3px dashed var(--y);
  padding-bottom: 20px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.admin-header h1 {
  font-family: 'Fredoka One', cursive;
  color: var(--b);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}
.admin-form-group {
  margin-bottom: 20px;
}
.admin-form-group label {
  display: block;
  font-family: 'Fredoka One', cursive;
  font-size: 0.95rem;
  color: var(--b);
  margin-bottom: 8px;
}
.admin-input, .admin-select, .admin-textarea {
  width: 100%;
  padding: 12px 16px;
  font-family: 'Varela Round', sans-serif;
  font-size: 0.95rem;
  color: var(--txt);
  background: #fdfdfd;
  border: 3px solid #e0e0e0;
  border-radius: 12px;
  transition: border-color 0.2s, background-color 0.2s;
  outline: none;
}
.admin-input:focus, .admin-select:focus, .admin-textarea:focus {
  border-color: var(--y);
  background: #fff;
}
.admin-textarea {
  resize: vertical;
  min-height: 250px;
}
.admin-help {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 4px;
}
.admin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 600px) {
  .admin-row {
    grid-template-columns: 1fr;
  }
}
.admin-image-selector {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.admin-image-selector select {
  flex-grow: 1;
}
.admin-preview-box {
  width: 90px;
  height: 90px;
  border: 3px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.admin-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.admin-preview-box span {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
  padding: 4px;
}
.admin-buttons {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}
.btn-admin-publish {
  background: var(--r);
  color: #fff;
  border: none;
  border-radius: 24px;
  padding: 12px 32px;
  font-family: 'Fredoka One', cursive;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(229,57,53,0.3);
  transition: transform 0.2s, background-color 0.2s;
}
.btn-admin-publish:hover {
  background: #c62828;
  transform: translateY(-2px);
}
.btn-admin-cancel {
  background: #e0e0e0;
  color: var(--muted);
  border: none;
  border-radius: 24px;
  padding: 12px 24px;
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-admin-cancel:hover {
  background: #d5d5d5;
}
.admin-status {
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: bold;
  margin-bottom: 20px;
  display: none;
}
.admin-status.success {
  display: block;
  background: #E8F5E9;
  color: #2E7D32;
  border: 2px solid #A5D6A7;
}
.admin-status.error {
  display: block;
  background: #FFEBEE;
  color: #C62828;
  border: 2px solid #FFCDD2;
}

/* Button to access admin locally from blog.html */
.blog-admin-link-wrapper {
  text-align: right;
  margin-bottom: var(--sp-xs);
}
.btn-blog-admin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: bold;
  background: #f0f0f0;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 20px;
  transition: all 0.2s;
  border: 1px solid #e0e0e0;
}
.btn-blog-admin:hover {
  background: var(--y);
  color: var(--b);
  border-color: var(--yd);
}

/* Tabs for Select vs Upload image */
.admin-tab-container {
  display: flex;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 12px;
  gap: 8px;
}
.admin-tab {
  padding: 8px 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: 'Fredoka One', cursive;
  font-size: 0.85rem;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}
.admin-tab:hover {
  color: var(--b);
}
.admin-tab.active {
  color: var(--b);
  border-bottom-color: var(--y);
}
.admin-tab-content {
  display: block;
}
.admin-tab-content.hidden {
  display: none;
}
.btn-admin-file-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #f0f0f0;
  color: var(--b);
  font-family: 'Fredoka One', cursive;
  font-size: 0.85rem;
  border: 2px dashed #ccc;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-admin-file-trigger:hover {
  background: #e5e5e5;
  border-color: var(--b);
}
.admin-file-info {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 6px;
  font-weight: bold;
}

/* Deletion & management section in admin panel */
.admin-posts-section {
  margin-top: 48px;
  border-top: 4px dashed var(--y);
  padding-top: 32px;
}
.admin-posts-section h2 {
  font-family: 'Fredoka One', cursive;
  color: var(--b);
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.admin-posts-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-family: 'Varela Round', sans-serif;
  font-size: 0.95rem;
}
.admin-posts-table th {
  background: #f5f5f5;
  color: var(--b);
  font-family: 'Fredoka One', cursive;
  font-size: 0.85rem;
  text-align: left;
  padding: 12px;
  border-bottom: 2px solid #e0e0e0;
}
.admin-posts-table td {
  padding: 12px;
  border-bottom: 1px solid #eee;
  color: var(--txt);
}
.admin-posts-table tr:hover {
  background: #fafafa;
}
.btn-admin-delete {
  background: var(--r);
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 6px 16px;
  font-family: 'Fredoka One', cursive;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-admin-delete:hover {
  background: #b71c1c;
  transform: scale(1.03);
}
.admin-no-posts {
  padding: 32px;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

/* Category Filter Bar */
.blog-filters {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: var(--sp-md);
  flex-wrap: wrap;
}
.filter-btn {
  font-family: 'Fredoka One', cursive;
  font-size: 0.88rem;
  padding: 8px 20px;
  border-radius: 24px;
  border: 3px solid var(--y);
  background: #fff;
  color: var(--b);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.filter-btn:hover, .filter-btn.active {
  background: var(--y);
  color: var(--b);
  box-shadow: 0 4px 12px rgba(255,208,0,0.25);
  transform: translateY(-1px);
}

/* Category Badges on Cards */
.blog-card-category-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--y);
  color: var(--b);
  font-family: 'Fredoka One', cursive;
  font-size: 0.72rem;
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: var(--sh);
  z-index: 5;
  cursor: pointer;
  transition: transform 0.2s, background-color 0.2s;
  border: 1.5px solid var(--yd);
}
.blog-card-category-badge:hover {
  transform: scale(1.05);
  background: var(--yd);
}

/* Category Badge on Post Pages */
.article-category-badge {
  display: inline-block;
  background: var(--yl);
  color: var(--b);
  font-family: 'Fredoka One', cursive;
  font-size: 0.82rem;
  padding: 4px 14px;
  border-radius: 16px;
  border: 2px solid var(--yd);
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* Gallery Filter Bar styling */
.gallery-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: var(--sp-md);
  margin-bottom: var(--sp-lg);
  flex-wrap: wrap;
}

/* Modal overlay styling */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-card {
  background: #fff;
  border-radius: 24px;
  padding: 35px 30px;
  max-width: 450px;
  width: 90%;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 4px solid var(--r);
  position: relative;
}
.modal-overlay.open .modal-card {
  transform: scale(1);
}
.modal-icon {
  font-size: 3.5rem;
  margin-bottom: 15px;
  display: inline-block;
  animation: popIcon 0.5s ease;
}
@keyframes popIcon {
  0% { transform: scale(0); }
  70% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.modal-card h3 {
  font-family: 'Fredoka One', cursive;
  color: var(--b);
  margin-bottom: 12px;
  font-size: 1.6rem;
}
.modal-card p {
  color: #555;
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 25px;
}
.modal-card .btn {
  display: inline-flex;
  justify-content: center;
  min-width: 140px;
}

/* Admin Login Overlay */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border: 4px solid var(--r);
  text-align: center;
}
.login-card h2 {
  font-family: 'Fredoka One', cursive;
  color: var(--b);
  margin-bottom: 20px;
}
.login-card p {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 25px;
}
.login-field {
  margin-bottom: 20px;
  text-align: left;
}
.login-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
}
.login-input {
  width: 100%;
  padding: 12px 15px;
  border: 2px solid #ddd;
  border-radius: 10px;
  font-size: 0.95rem;
  box-sizing: border-box;
}
.login-input:focus {
  border-color: var(--b);
  outline: none;
}
.login-error {
  color: #d32f2f;
  font-size: 0.85rem;
  margin-top: 10px;
  display: none;
}

/* Admin Gallery Upload Layout */
.admin-gallery-sec {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 30px;
  border: 2px solid #eef2f5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.admin-gallery-sec h3 {
  font-family: 'Fredoka One', cursive;
  color: var(--b);
  margin-top: 0;
  margin-bottom: 18px;
}

/* Admin Subpage Switcher Navigation */
.admin-tab-nav {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  margin-bottom: 30px;
  border-bottom: 2px solid #eef2f5;
  padding-bottom: 15px;
}
.admin-nav-tab-btn {
  background: #fff;
  border: 2px solid #ddd;
  border-radius: 12px;
  padding: 12px 24px;
  font-family: 'Fredoka One', cursive;
  font-size: 1rem;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}
.admin-nav-tab-btn:hover {
  border-color: var(--b);
  color: var(--b);
}
.admin-nav-tab-btn.active {
  background: var(--b);
  border-color: var(--b);
  color: #fff;
  box-shadow: 0 4px 12px rgba(87, 70, 227, 0.2);
}
.admin-page-view {
  display: block;
}
.admin-page-view.hidden {
  display: none !important;
}