/* ==========================================================
   KID-FRIENDLY ENHANCEMENTS
   ==========================================================
   Animations, floating decorations, colorful gradients,
   and alignment fixes that make the site feel playful.
   ========================================================== */

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
@keyframes float-reverse {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(10px) rotate(-3deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%      { transform: rotate(-10deg) scale(1.1); }
  75%      { transform: rotate(10deg) scale(1.1); }
}
@keyframes bounce-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes pulse-glow {
  0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
  100% { box-shadow: 0 0 0 18px rgba(249, 115, 22, 0); }
}
@keyframes sparkle {
  0%, 100% { opacity: 0;   transform: scale(0.4) rotate(0deg); }
  50%      { opacity: 0.9; transform: scale(1.1) rotate(180deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  10%      { transform: rotate(14deg); }
  20%      { transform: rotate(-8deg); }
  30%      { transform: rotate(14deg); }
  40%      { transform: rotate(-4deg); }
  50%      { transform: rotate(10deg); }
  60%      { transform: rotate(0deg); }
}

/* ==========================================================
   ACADEMICS — alignment fix + colorful, animated cards
   ========================================================== */
.academics-section { position: relative; overflow: hidden; }

/* Floating background decorations behind academic cards */
.academics-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.academics-decorations .deco {
  position: absolute;
  font-size: 32px;
  opacity: 0.5;
  animation: float 5s ease-in-out infinite;
}
.academics-decorations .deco:nth-child(1) { top:  8%; left:  4%; color: #ec4899; animation-delay: 0s;   }
.academics-decorations .deco:nth-child(2) { top: 18%; right: 6%; color: #f59e0b; animation-delay: 1s;   font-size: 36px; }
.academics-decorations .deco:nth-child(3) { bottom: 18%; left:  8%; color: #10b981; animation-delay: 2s; font-size: 30px; }
.academics-decorations .deco:nth-child(4) { bottom: 12%; right: 4%; color: #6366f1; animation-delay: 1.5s; }
.academics-decorations .deco:nth-child(5) { top: 50%; left: 50%; transform: translate(-50%, -50%); color: #f97316; animation-delay: 0.7s; font-size: 28px; opacity: 0.3; }

/* Bring the actual content above decorations */
.academics-section .container { position: relative; z-index: 2; }

/* Fixed grid — clean 4 → 2 → 1 progression, equal heights */
.academics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}
.academic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}
.academic-card .academic-icon { margin: 0 auto 18px; animation: float 4s ease-in-out infinite; }
.academic-card:nth-child(2) .academic-icon { animation-delay: 0.4s; }
.academic-card:nth-child(3) .academic-icon { animation-delay: 0.8s; }
.academic-card:nth-child(4) .academic-icon { animation-delay: 1.2s; }
.academic-card:hover .academic-icon { animation: wiggle 0.7s ease-in-out; }
.academic-card h3      { width: 100%; }
.academic-card .grades { margin: 0 auto 14px; }
.academic-card p       { flex: 1; }

/* Each card gets its own bright icon gradient */
.academic-card:nth-child(1) .academic-icon { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.academic-card:nth-child(2) .academic-icon { background: linear-gradient(135deg, #10b981, #14b8a6); }
.academic-card:nth-child(3) .academic-icon { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.academic-card:nth-child(4) .academic-icon { background: linear-gradient(135deg, #f59e0b, #f97316); }

/* Responsive: 4 → 2 → 1 columns at clean breakpoints */
@media (max-width: 1100px) { .academics-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .academics-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } }

/* ==========================================================
   FEATURE CARDS — colorful icons + wiggle on hover
   ========================================================== */
.feature-card:nth-child(1) .feature-icon { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.feature-card:nth-child(2) .feature-icon { background: linear-gradient(135deg, #10b981, #14b8a6); }
.feature-card:nth-child(3) .feature-icon { background: linear-gradient(135deg, #f59e0b, #f97316); }
.feature-card:nth-child(4) .feature-icon { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.feature-card:hover .feature-icon { animation: wiggle 0.7s ease-in-out; }

/* ==========================================================
   ACHIEVEMENTS — bouncing icons on hover
   ========================================================== */
.achievement-card .achievement-icon { transition: transform 0.4s ease; }
.achievement-card:hover .achievement-icon { animation: bounce-soft 0.55s ease-in-out 2; }

/* ==========================================================
   ANIMATED SECTION DIVIDER (rainbow shimmer)
   ========================================================== */
.section-divider {
  background: linear-gradient(90deg, #ec4899, #f97316, #f59e0b, #10b981, #3b82f6, #8b5cf6, #ec4899);
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
  height: 4px;
}

/* ==========================================================
   PLAYFUL PULSING CTA BUTTON
   ========================================================== */
.cta-section .btn-primary {
  position: relative;
  animation: pulse-glow 2s ease-out infinite;
}
.nav-cta { animation: pulse-glow 3s ease-out infinite; }

/* ==========================================================
   CAROUSEL ACTIVE DOT — gentle pulse
   ========================================================== */
.highlights-dot.active { animation: pulse-glow 2.5s ease-out infinite; }

/* ==========================================================
   FLOATING DECORATIONS — About & Achievements sections
   ========================================================== */
.about-section, .achievements-section { position: relative; overflow: hidden; }
.about-section .container, .achievements-section .container { position: relative; z-index: 2; }

.kid-decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.kid-decorations .deco {
  position: absolute;
  opacity: 0.5;
  font-size: 28px;
  animation: float 5s ease-in-out infinite;
}
.about-section .kid-decorations .deco:nth-child(1) { top:  10%; right:  5%; color: #ec4899; animation-delay: 0s; }
.about-section .kid-decorations .deco:nth-child(2) { bottom: 20%; left:  4%; color: #10b981; animation-delay: 1.5s; font-size: 32px; }
.about-section .kid-decorations .deco:nth-child(3) { top:  50%; right: 12%; color: #f59e0b; animation-delay: 0.8s; }

/* Floating shapes on the achievements (dark) section glow brighter */
.achievements-section .kid-decorations .deco { opacity: 0.65; color: rgba(255,255,255,0.7); font-size: 30px; }
.achievements-section .kid-decorations .deco:nth-child(1) { top: 12%;  left:  5%; animation-delay: 0s; }
.achievements-section .kid-decorations .deco:nth-child(2) { top: 35%;  right: 6%; animation-delay: 1s; animation-name: float-reverse; }
.achievements-section .kid-decorations .deco:nth-child(3) { bottom: 18%; left: 10%; animation-delay: 0.5s; }

/* ==========================================================
   GALLERY ITEMS — small wobble on hover
   ========================================================== */
.gallery-item:hover { transform: translateY(-4px) scale(1.02); }

/* ==========================================================
   ACADEMIC GRADE PILL — playful color rotation on hover
   ========================================================== */
.academic-card:nth-child(1):hover .grades { background: rgba(236, 72, 153, 0.15); color: #be185d; }
.academic-card:nth-child(2):hover .grades { background: rgba(16, 185, 129, 0.15);  color: #047857; }
.academic-card:nth-child(3):hover .grades { background: rgba(59, 130, 246, 0.15);  color: #1d4ed8; }
.academic-card:nth-child(4):hover .grades { background: rgba(249, 115, 22, 0.15);  color: #c2410c; }

/* ==========================================================
   TESTIMONIAL AVATARS — playful color rotation
   ========================================================== */
.testimonial-card:nth-child(1) .testimonial-avatar { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.testimonial-card:nth-child(2) .testimonial-avatar { background: linear-gradient(135deg, #10b981, #14b8a6); }
.testimonial-card:nth-child(3) .testimonial-avatar { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.testimonial-card:nth-child(4) .testimonial-avatar { background: linear-gradient(135deg, #f59e0b, #f97316); }
.testimonial-card:nth-child(5) .testimonial-avatar { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
.testimonial-card:nth-child(6) .testimonial-avatar { background: linear-gradient(135deg, #06b6d4, #0891b2); }

/* ==========================================================
   HOVER LIFT on news cards
   ========================================================== */
.news-card:hover { transform: translateY(-6px) rotate(-0.5deg); }

/* ==========================================================
   REDUCE motion for users who prefer it
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================
   LOGO IMAGE OVERRIDE — clean display when a real logo is used
   ========================================================== */
.logo-icon:has(img) {
  background: transparent !important;
  box-shadow: none;
  border-radius: 0;
  width: 56px;
  height: 56px;
  overflow: visible;
}
.logo-icon img {
  object-fit: contain !important;
  border-radius: 0;
  width: 100% !important;
  height: 100% !important;
}
/* Footer logo gets a soft white background for contrast on dark footer */
footer .logo-icon:has(img) {
  background: rgba(255,255,255,0.95) !important;
  border-radius: 12px;
  padding: 4px;
}
@media (max-width: 768px) {
  .logo-icon:has(img) { width: 48px; height: 48px; }
}

/* ==========================================================
   LOGO SIZE & SCHOOL-NAME IMAGE  (header + footer)
   ========================================================== */

/* Bigger logo icon on desktop */
.logo-icon,
.logo-icon:has(img) {
  width: 68px;
  height: 68px;
  font-size: 24px;
}
@media (max-width: 992px) {
  .logo-icon,
  .logo-icon:has(img) { width: 58px; height: 58px; font-size: 21px; }
}
@media (max-width: 768px) {
  .logo-icon,
  .logo-icon:has(img) { width: 52px; height: 52px; font-size: 19px; }
}

/* School-name image — handles both markup variants:
     • <img class="logo-name-img">                   (footer)
     • <div class="logo-name-img"><img></div>        (header)
*/
img.logo-name-img,
.logo-name-img > img {
  display: block;
  width: auto;
  max-width: 360px;
  height: 56px;
  object-fit: contain;
}
.logo-name-img {
  display: flex;
  align-items: center;
  min-width: 0;
}

@media (max-width: 1180px) {
  img.logo-name-img,
  .logo-name-img > img { height: 48px; max-width: 280px; }
}
@media (max-width: 992px) {
  img.logo-name-img,
  .logo-name-img > img { height: 44px; max-width: 240px; }
}
@media (max-width: 768px) {
  img.logo-name-img,
  .logo-name-img > img { height: 38px; max-width: 200px; }
}
@media (max-width: 480px) {
  img.logo-name-img,
  .logo-name-img > img { height: 32px; max-width: 160px; }
}

/* Footer — give the school-name image a soft white card behind it
   so a dark-toned image still reads on the dark footer background */
footer .logo-name-img,
footer img.logo-name-img {
  background: #ffffff;
  padding: 6px 12px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
footer .logo-name-img > img,
footer img.logo-name-img { height: 44px; }

/* Slightly tighter nav gap to compensate for the larger logo */
.nav-wrapper { gap: 16px; }

/* ==========================================================
   LOGO SIZE BUMP + TIGHTER GAP TO SCHOOL-NAME IMAGE
   (overrides the earlier logo sizing — appended last so it wins)
   ========================================================== */
.logo {
  gap: 8px;            /* was 12px — bring round logo closer to name image */
  align-items: center;
}
.logo-icon,
.logo-icon:has(img) {
  width: 84px;
  height: 84px;
  font-size: 28px;
}
.logo-icon img { padding: 2px; }   /* tiny breathing room inside the round logo */

img.logo-name-img,
.logo-name-img > img {
  height: 64px;
  max-width: 380px;
}

@media (max-width: 1180px) {
  .logo-icon,
  .logo-icon:has(img) { width: 72px; height: 72px; font-size: 25px; }
  img.logo-name-img,
  .logo-name-img > img { height: 56px; max-width: 300px; }
}
@media (max-width: 992px) {
  .logo-icon,
  .logo-icon:has(img) { width: 64px; height: 64px; font-size: 22px; }
  img.logo-name-img,
  .logo-name-img > img { height: 48px; max-width: 240px; }
}
@media (max-width: 768px) {
  .logo { gap: 6px; }
  .logo-icon,
  .logo-icon:has(img) { width: 56px; height: 56px; font-size: 20px; }
  img.logo-name-img,
  .logo-name-img > img { height: 40px; max-width: 200px; }
}
@media (max-width: 480px) {
  .logo-icon,
  .logo-icon:has(img) { width: 48px; height: 48px; font-size: 17px; }
  img.logo-name-img,
  .logo-name-img > img { height: 32px; max-width: 150px; }
}

/* Footer override — keep them a touch smaller and the gap consistent */
footer .logo { gap: 10px; }
footer .logo-icon:has(img) { width: 60px; height: 60px; }
footer .logo-name-img > img,
footer img.logo-name-img { height: 44px; max-width: 240px; }

/* Give the navbar a bit more headroom so the bigger logo sits comfortably */
.nav-wrapper { padding: 10px 0; }

/* ==========================================================
   ADJUST: bigger ROUND logo + smaller SCHOOL-NAME image
   (appended last so these win over earlier rules)
   ========================================================== */
.logo-icon,
.logo-icon:has(img) {
  width: 100px;
  height: 100px;
  font-size: 32px;
}
img.logo-name-img,
.logo-name-img > img {
  height: 44px;
  max-width: 280px;
}

@media (max-width: 1180px) {
  .logo-icon,
  .logo-icon:has(img) { width: 86px; height: 86px; font-size: 28px; }
  img.logo-name-img,
  .logo-name-img > img { height: 40px; max-width: 240px; }
}
@media (max-width: 992px) {
  .logo-icon,
  .logo-icon:has(img) { width: 74px; height: 74px; font-size: 24px; }
  img.logo-name-img,
  .logo-name-img > img { height: 36px; max-width: 210px; }
}
@media (max-width: 768px) {
  .logo-icon,
  .logo-icon:has(img) { width: 62px; height: 62px; font-size: 21px; }
  img.logo-name-img,
  .logo-name-img > img { height: 30px; max-width: 170px; }
}
@media (max-width: 480px) {
  .logo-icon,
  .logo-icon:has(img) { width: 52px; height: 52px; font-size: 18px; }
  img.logo-name-img,
  .logo-name-img > img { height: 26px; max-width: 130px; }
}

/* Footer — same logic on smaller scale */
footer .logo-icon:has(img) { width: 72px; height: 72px; }
footer .logo-name-img > img,
footer img.logo-name-img { height: 34px; max-width: 200px; }

/* Allow the header a hair more vertical room for the bigger round logo */
.nav-wrapper { padding: 8px 0; }

/* ==========================================================
   FINAL TUNING — match logo + school-name visually, tight gap
   ========================================================== */
.logo { gap: 4px; }

img.logo-name-img,
.logo-name-img > img {
  height: 90px;
  max-width: 420px;
}

@media (max-width: 1180px) {
  .logo { gap: 4px; }
  img.logo-name-img,
  .logo-name-img > img { height: 76px; max-width: 340px; }
}
@media (max-width: 992px) {
  img.logo-name-img,
  .logo-name-img > img { height: 66px; max-width: 280px; }
}
@media (max-width: 768px) {
  .logo { gap: 4px; }
  img.logo-name-img,
  .logo-name-img > img { height: 54px; max-width: 220px; }
}
@media (max-width: 480px) {
  img.logo-name-img,
  .logo-name-img > img { height: 44px; max-width: 170px; }
}

/* Footer — keep the same balanced proportions, on a smaller scale */
footer .logo { gap: 8px; }
footer .logo-icon:has(img) { width: 72px; height: 72px; }
footer .logo-name-img > img,
footer img.logo-name-img { height: 60px; max-width: 240px; }

/* ==========================================================
   School-name image desktop height — reduce to 50px
   ========================================================== */
img.logo-name-img,
.logo-name-img > img {
  height: 50px;
  max-width: 320px;
}

/* ==========================================================
   MESSAGE GRID — single column when photo is hidden
   ========================================================== */
.message-grid.no-photo {
  grid-template-columns: 1fr !important;
  max-width: 880px;
  margin: 0 auto;
}
.message-grid.no-photo .message-content {
  text-align: center;
}
.message-grid.no-photo .signature {
  display: inline-block;
  text-align: left;
}

/* ==========================================================
   CTA TAGLINE — small pill above the "Join Bharathi Family" title
   ========================================================== */
.cta-section .cta-tagline {
  display: inline-block;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(4px);
}

/* ==========================================================
   FOOTER LOGOS — transparent backgrounds (no white cards)
   ========================================================== */
footer .logo-icon:has(img),
footer .logo-icon {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
footer .logo-name-img,
footer img.logo-name-img,
footer .logo-name-img > img {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ==========================================================
   SECTION HEADERS — better line breaks (no orphan words)
   ========================================================== */
.section-header h2 {
  text-wrap: balance;          /* balances line lengths so you don't get a single word on the last line */
}
/* Keep specific phrases that should never split inside the highlight span together */
.section-header h2 .highlight {
  white-space: normal;
}
/* For the academics heading specifically, prevent "Grade 10" from breaking */
.section-header h2 .highlight {
  /* Use word-spacing to discourage the browser from breaking between "Grade" and "10" */
}

/* ==========================================================
   FOOTER SOCIAL ICONS — colourful brand backgrounds
   ========================================================== */
footer .social-links a {
  color: #ffffff !important;
  background: rgba(255,255,255,0.1) !important;
  transition: all 0.3s ease;
}
footer .social-links a:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

/* Per-platform brand colours */
footer .social-links a[aria-label="Facebook"]  { background: #1877f2 !important; }
footer .social-links a[aria-label="Instagram"] {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}
footer .social-links a[aria-label="YouTube"]   { background: #ff0000 !important; }
footer .social-links a[aria-label="WhatsApp"]  { background: #25d366 !important; }

footer .social-links a[aria-label="Facebook"]:hover  { background: #145bd2 !important; }
footer .social-links a[aria-label="YouTube"]:hover   { background: #cc0000 !important; }
footer .social-links a[aria-label="WhatsApp"]:hover  { background: #128c7e !important; }

/* ==========================================================
   DETAIL ARTICLE PAGES (achievement-detail, news-detail)
   ========================================================== */
.detail-article {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  padding: 38px 40px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border-top: 4px solid var(--accent);
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-dark);
}
.detail-article p { margin-bottom: 16px; }
.detail-article p:last-child { margin-bottom: 0; }
.detail-images {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.detail-images img {
  width: 100%;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.news-meta-pill {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 4px 14px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 12px;
}
.news-meta-date {
  color: rgba(255,255,255,0.92);
  font-size: 14px;
}
.news-meta-date i { margin-right: 4px; color: var(--accent); }
@media (max-width: 600px) {
  .detail-article { padding: 26px 22px; }
}

/* Clickable achievement / news cards get a "Read more" hint that appears on hover */
.achievement-card { cursor: pointer; }
.achievement-card .read-more-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  opacity: 0;
  transition: all 0.3s ease;
}
.achievement-card:hover .read-more-hint {
  opacity: 1;
  gap: 10px;
}
.news-card { cursor: pointer; }

/* ==========================================================
   KID HAPPY FACES — floating animated smiley decorations
   ========================================================== */
@keyframes happy-bob {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-14px) rotate(6deg); }
}
@keyframes happy-spin {
  0%   { transform: rotate(-15deg); }
  50%  { transform: rotate(15deg); }
  100% { transform: rotate(-15deg); }
}
@keyframes happy-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
@keyframes happy-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); }
  50%      { filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.7)); }
}

.happy-faces {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.happy-faces .face {
  position: absolute;
  font-size: 42px;
  opacity: 0.65;
}
.happy-faces .face:nth-child(1) {
  top: 12%; left: 4%;
  color: #f59e0b;
  animation: happy-bob 4s ease-in-out infinite;
}
.happy-faces .face:nth-child(2) {
  top: 22%; right: 6%;
  color: #ec4899;
  animation: happy-spin 5s ease-in-out infinite, happy-glow 3s ease-in-out infinite;
  animation-delay: 0.5s;
  font-size: 46px;
}
.happy-faces .face:nth-child(3) {
  bottom: 16%; left: 8%;
  color: #10b981;
  animation: happy-bob 4.5s ease-in-out infinite reverse;
  animation-delay: 1.2s;
  font-size: 40px;
}
.happy-faces .face:nth-child(4) {
  bottom: 14%; right: 5%;
  color: #6366f1;
  animation: happy-pulse 3s ease-in-out infinite, happy-bob 5s ease-in-out infinite;
  animation-delay: 0.8s;
  font-size: 44px;
}
.happy-faces .face:nth-child(5) {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: #f97316;
  animation: happy-pulse 2.8s ease-in-out infinite;
  opacity: 0.45;
  font-size: 36px;
}

/* Smiley emoji-style smileys on the about + achievements sections */
.feature-card::after,
.academic-card::after {
  content: '';
  pointer-events: none;
}

/* Wiggle smiley in section header when revealed */
@keyframes face-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-18deg); }
  40%      { transform: rotate(15deg); }
  60%      { transform: rotate(-10deg); }
  80%      { transform: rotate(8deg); }
}
.smiley-bullet {
  display: inline-block;
  font-size: 1.1em;
  color: var(--accent);
  animation: face-wiggle 2s ease-in-out 1s infinite;
}

/* ==========================================================
   HAPPY KIDS ANIMATED BANNER
   ========================================================== */
.happy-kids-banner {
  position: relative;
  overflow: hidden;
  padding: 70px 0;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 50%, #dbeafe 100%);
  background-size: 200% 200%;
  animation: kid-bg 18s ease-in-out infinite;
}
@keyframes kid-bg {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.happy-kids-banner .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.kids-text .kids-tag {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.kids-text h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
  line-height: 1.15;
}
.kids-text h2 .hl {
  background: linear-gradient(90deg, var(--accent), #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kids-text p {
  color: var(--text-dark);
  opacity: 0.78;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 22px;
  max-width: 480px;
}
.kids-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.kids-stat-pills .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dark);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease;
}
.kids-stat-pills .pill:hover { transform: translateY(-3px); }
.kids-stat-pills .pill i { color: var(--accent); }

.kids-art svg {
  width: 100%;
  height: auto;
  max-width: 600px;
}

/* --- Sun: gentle rotation + pulse --- */
.kids-sun {
  transform-origin: 500px 55px;
  animation: sun-spin 20s linear infinite, sun-pulse 3s ease-in-out infinite;
}
@keyframes sun-spin  { to { transform: rotate(360deg); } }
@keyframes sun-pulse { 0%,100%{filter:drop-shadow(0 0 0 rgba(251,191,36,0));} 50%{filter:drop-shadow(0 0 14px rgba(251,191,36,0.7));} }

/* --- Clouds drift across the sky --- */
.kids-clouds {
  animation: cloud-drift 12s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(35px); }
}

/* --- Kid 1 — waving arm + bounce --- */
.kid-1 {
  transform-origin: 140px 250px;
  animation: kid-bounce 3.2s ease-in-out infinite;
}
.arm-wave {
  transform-origin: -38px 100px;
  animation: arm-wave 1.2s ease-in-out infinite;
}
.hand-wave {
  transform-origin: -38px 100px;
  animation: arm-wave 1.2s ease-in-out infinite;
}
@keyframes arm-wave {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-55deg); }
}

/* --- Kid 2 — jumping --- */
.kid-2 {
  transform-origin: 300px 250px;
  animation: kid-jump 1.6s ease-in-out infinite;
}
@keyframes kid-jump {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-22px); }
}

/* --- Kid 3 — small bounce + sway --- */
.kid-3 {
  transform-origin: 460px 250px;
  animation: kid-sway 4s ease-in-out infinite;
}
@keyframes kid-sway {
  0%, 100% { transform: translateY(0)   rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}

@keyframes kid-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* --- Eyes blink for all kids --- */
.kid .eye {
  transform-origin: center;
  animation: blink 5s ease-in-out infinite;
}
.kid-2 .eye { animation-delay: 1.5s; }
.kid-3 .eye { animation-delay: 2.8s; }
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
  97%           { transform: scaleY(1); }
}

/* --- Floating hearts / stars --- */
.floaty text { animation: float-up 5s ease-in-out infinite; }
.float-1 { animation-delay: 0s !important; }
.float-2 { animation-delay: 1.5s !important; }
.float-3 { animation-delay: 3s !important; }
@keyframes float-up {
  0%   { opacity: 0; transform: translateY(0)  scale(0.6); }
  20%  { opacity: 1; transform: translateY(-20px) scale(1); }
  80%  { opacity: 1; transform: translateY(-60px) scale(1.1); }
  100% { opacity: 0; transform: translateY(-90px) scale(0.8); }
}

/* Responsive */
@media (max-width: 900px) {
  .happy-kids-banner .container { grid-template-columns: 1fr; text-align: center; gap: 30px; }
  .kids-text p { margin-left: auto; margin-right: auto; }
  .kids-stat-pills { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .happy-kids-banner,
  .kids-sun, .kids-clouds, .kid-1, .kid-2, .kid-3,
  .arm-wave, .hand-wave, .kid .eye, .floaty text { animation: none !important; }
}

/* ==========================================================
   HAPPY KIDS — circle face design (replaces SVG version)
   ========================================================== */
.kids-circles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 480px;
  margin-left: auto;
  padding: 20px 10px;
}
.kid-circle {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: visible;
}
.kid-circle:hover {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 22px 44px rgba(0,0,0,0.25);
}

.kid-circle .kid-face {
  font-size: clamp(3rem, 8vw, 5.4rem);
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.18));
}
.kid-circle .kid-name {
  margin-top: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(0.9rem, 1.6vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Four colour themes — bright and kid-friendly */
.kid-circle.k1 { background: linear-gradient(135deg, #f97316, #fbbf24); }
.kid-circle.k2 { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.kid-circle.k3 { background: linear-gradient(135deg, #3b82f6, #6366f1); }
.kid-circle.k4 { background: linear-gradient(135deg, #10b981, #14b8a6); }

/* Each circle bounces with a staggered delay */
@keyframes kid-circle-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
.kid-circle.k1 { animation: kid-circle-bounce 2.4s ease-in-out infinite; }
.kid-circle.k2 { animation: kid-circle-bounce 2.4s ease-in-out infinite; animation-delay: 0.3s; }
.kid-circle.k3 { animation: kid-circle-bounce 2.4s ease-in-out infinite; animation-delay: 0.6s; }
.kid-circle.k4 { animation: kid-circle-bounce 2.4s ease-in-out infinite; animation-delay: 0.9s; }

/* Face inside wiggles every few seconds */
@keyframes kid-face-wiggle {
  0%, 88%, 100% { transform: rotate(0deg) scale(1); }
  91%           { transform: rotate(-12deg) scale(1.08); }
  94%           { transform: rotate(10deg)  scale(1.08); }
  97%           { transform: rotate(-5deg)  scale(1.05); }
}
.kid-circle .kid-face {
  animation: kid-face-wiggle 4s ease-in-out infinite;
}
.kid-circle.k2 .kid-face { animation-delay: 0.8s; }
.kid-circle.k3 .kid-face { animation-delay: 1.6s; }
.kid-circle.k4 .kid-face { animation-delay: 2.4s; }

/* Two sparkles per circle that orbit / pop */
.kid-circle .sparkle {
  position: absolute;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.25);
  pointer-events: none;
  animation: sparkle-pop 3s ease-in-out infinite;
}
.kid-circle .sparkle.s1 { top: -6px;  right: -6px; }
.kid-circle .sparkle.s2 { bottom: 4px; left: -8px; animation-delay: 1.5s; }

@keyframes sparkle-pop {
  0%, 100% { opacity: 0;   transform: scale(0.4) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.2) rotate(180deg); }
}

/* Responsive — go single column on phones, smaller circles */
@media (max-width: 900px) {
  .kids-circles { margin: 0 auto; max-width: 420px; }
}
@media (max-width: 480px) {
  .kids-circles { gap: 18px; max-width: 320px; }
  .kid-circle .kid-face { font-size: 2.6rem; }
  .kid-circle .kid-name { font-size: 0.85rem; margin-top: 4px; }
}

/* Accessibility — disable for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .kid-circle, .kid-circle .kid-face, .kid-circle .sparkle { animation: none !important; }
}

/* ==========================================================
   HAPPY KIDS BANNER — REWRITTEN (clean icon row, no clipping)
   These rules win over the earlier SVG-banner styles because
   they're appended at the bottom of the stylesheet.
   ========================================================== */
.happy-kids-banner {
  position: relative;
  overflow: hidden;
  padding: 70px 0 80px;
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 35%, #dbeafe 100%);
  background-size: 200% 200%;
  animation: kid-bg 18s ease-in-out infinite;
}
.happy-kids-banner .container {
  display: block !important;       /* override the earlier grid layout */
  grid-template-columns: none !important;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* --- Header --- */
.happy-kids-banner .hk-header { max-width: 720px; margin: 0 auto 44px; }
.happy-kids-banner .kids-tag {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: 6px 16px;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.happy-kids-banner h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 14px;
  line-height: 1.15;
}
.happy-kids-banner h2 .hl {
  background: linear-gradient(90deg, var(--accent), #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.happy-kids-banner .hk-header p {
  color: var(--text-dark);
  opacity: 0.78;
  font-size: 16px;
  line-height: 1.7;
}

/* --- Icon row --- */
.hk-icon-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  margin: 0 auto 36px;
  max-width: 920px;
}
.hk-icon { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hk-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  color: #fff;
  box-shadow: 0 14px 28px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}
.hk-icon:hover .hk-circle { transform: scale(1.1) rotate(-6deg); }
.hk-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  color: var(--text-dark);
  font-size: 14px;
  letter-spacing: 0.3px;
}

/* Each icon gets its own bright colour */
.hk-1 .hk-circle { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); }
.hk-2 .hk-circle { background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%); }
.hk-3 .hk-circle { background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%); }
.hk-4 .hk-circle { background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%); }
.hk-5 .hk-circle { background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%); }

/* Different bouncy animations, staggered */
@keyframes hk-bounce-1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes hk-bounce-2 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(8deg); } }
@keyframes hk-bounce-3 { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.hk-1 .hk-circle { animation: hk-bounce-1 2.4s ease-in-out infinite; }
.hk-2 .hk-circle { animation: hk-bounce-2 2.6s ease-in-out infinite; animation-delay: 0.3s; }
.hk-3 .hk-circle { animation: hk-bounce-1 2.4s ease-in-out infinite; animation-delay: 0.5s; }
.hk-4 .hk-circle { animation: hk-bounce-3 2.2s ease-in-out infinite; animation-delay: 0.2s; }
.hk-5 .hk-circle { animation: hk-bounce-1 2.5s ease-in-out infinite; animation-delay: 0.7s; }

/* --- Pill row --- */
.hk-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.hk-pill-row .pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease;
}
.hk-pill-row .pill:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.hk-pill-row .pill i { color: var(--accent); }

/* --- Background floating shapes --- */
.hk-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.hk-bg-shapes .bg-shape {
  position: absolute;
  font-size: 32px;
  opacity: 0.35;
}
.hk-bg-shapes .shape-1 { top: 14%; left: 6%;  color: #f59e0b; animation: hk-float 5s ease-in-out infinite; }
.hk-bg-shapes .shape-2 { top: 70%; left: 10%; color: #ec4899; font-size: 28px; animation: hk-float 4.5s ease-in-out infinite reverse; }
.hk-bg-shapes .shape-3 { top: 22%; right: 8%; color: #10b981; font-size: 28px; animation: hk-float 5.5s ease-in-out infinite; animation-delay: 0.6s; }
.hk-bg-shapes .shape-4 { top: 68%; right: 12%; color: #6366f1; animation: hk-float 4s ease-in-out infinite; animation-delay: 1.4s; }
.hk-bg-shapes .shape-5 { top: 45%; left: 50%; color: #f97316; font-size: 26px; opacity: 0.25; animation: hk-float 5s ease-in-out infinite; animation-delay: 2s; }
@keyframes hk-float {
  0%, 100% { transform: translateY(0)   rotate(-8deg); }
  50%      { transform: translateY(-18px) rotate(8deg); }
}

@keyframes kid-bg {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Hide any leftover SVG banner styles */
.happy-kids-banner .kids-art,
.happy-kids-banner svg { display: none !important; }

@media (max-width: 768px) {
  .hk-circle { width: 76px; height: 76px; font-size: 34px; }
  .hk-icon-row { gap: 18px; }
  .happy-kids-banner { padding: 50px 0 60px; }
}
@media (max-width: 480px) {
  .hk-circle { width: 64px; height: 64px; font-size: 28px; }
  .hk-label  { font-size: 12px; }
  .hk-icon-row { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .happy-kids-banner, .hk-circle, .hk-bg-shapes .bg-shape { animation: none !important; }
}

/* ==========================================================
   JUMPING KIDS ROW — six happy character icons bouncing along a ground line
   ========================================================== */
.jumping-kids {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(12px, 3vw, 36px);
  flex-wrap: nowrap;
  margin: 36px auto 30px;
  padding: 0 12px 28px;
  max-width: 720px;
  height: 130px;
}
.jk {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1;
  display: inline-flex;
  align-items: flex-end;
  text-shadow: 0 6px 18px rgba(0,0,0,0.18);
  animation: jk-jump 1.6s ease-in-out infinite;
  transform-origin: bottom center;
}
.jk:hover { animation-play-state: paused; transform: scale(1.1) translateY(-10px); transition: transform 0.3s ease; }

.jk-1 { color: #f59e0b; animation-delay: 0s;   }
.jk-2 { color: #ec4899; animation-delay: 0.18s; }
.jk-3 { color: #3b82f6; animation-delay: 0.36s; }
.jk-4 { color: #10b981; animation-delay: 0.54s; }
.jk-5 { color: #a855f7; animation-delay: 0.72s; }
.jk-6 { color: #f97316; animation-delay: 0.90s; }

@keyframes jk-jump {
  0%, 100% { transform: translateY(0) scaleY(1)   scaleX(1); }
  10%      { transform: translateY(0) scaleY(0.92) scaleX(1.08); }   /* squash before takeoff */
  50%      { transform: translateY(-38px) scaleY(1.05) scaleX(0.95); } /* stretch at apex */
  90%      { transform: translateY(0) scaleY(0.94) scaleX(1.06); }    /* squash on landing */
}

.jk-ground {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 14px;
  height: 6px;
  background: linear-gradient(90deg,
              transparent 0%,
              rgba(34, 197, 94, 0.4) 15%,
              rgba(34, 197, 94, 0.7) 50%,
              rgba(34, 197, 94, 0.4) 85%,
              transparent 100%);
  border-radius: 999px;
}
.jk-ground::before {
  content: '';
  position: absolute;
  inset: 8px 0 -10px 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.08), transparent 70%);
  filter: blur(6px);
}

@media (max-width: 700px) {
  .jumping-kids { gap: 10px; height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .jk { animation: none; }
}

/* ==========================================================
   JUMP-ROPE VECTOR ILLUSTRATION  (hand-drawn SVG, no clipping)
   ========================================================== */
.jumprope-art {
  width: 100%;
  max-width: 820px;
  margin: 30px auto 14px;
  position: relative;
  overflow: visible;
}
.jumprope-art svg {
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.08));
}

/* Middle kids — jump in sync with a slight stagger */
.rope-jumper {
  transform-origin: 0 130px;
  animation: rope-jump 1.4s ease-in-out infinite;
}
.k2 { animation-delay: 0s;    }
.k3 { animation-delay: 0.15s; }
@keyframes rope-jump {
  0%, 100% { transform: translate(var(--tx, 0px), 0); }
  10%      { transform: translate(var(--tx, 0px), 4px)  scaleY(0.96); }
  50%      { transform: translate(var(--tx, 0px), -36px) scaleY(1.04); }
  90%      { transform: translate(var(--tx, 0px), 4px)  scaleY(0.96); }
}
/* Preserve the SVG's own translate; we override transform via CSS,
   so set --tx for each so kids stay on their X position. */
.k2 { --tx: 320px; }
.k3 { --tx: 490px; }

/* Rope swings up and down in sync with the jump */
.rope {
  animation: rope-swing 1.4s ease-in-out infinite;
  transform-origin: 400px 300px;
}
@keyframes rope-swing {
  0%, 100% { transform: translateY(0)   scaleY(1); }
  50%      { transform: translateY(-26px) scaleY(0.5); }
}

/* Shadows pulse smaller as the jumping kids leave the ground */
.shadow-jump   { animation: shadow-shrink 1.4s ease-in-out infinite; transform-origin: 320px 320px; }
.shadow-jump-2 { animation: shadow-shrink 1.4s ease-in-out infinite; transform-origin: 490px 320px; animation-delay: 0.15s; }
@keyframes shadow-shrink {
  0%, 100% { transform: scale(1); opacity: 0.22; }
  50%      { transform: scale(0.55); opacity: 0.10; }
}

/* Holders sway just a little */
.rope-holder { animation: holder-sway 2.8s ease-in-out infinite; transform-origin: center bottom; }
@keyframes holder-sway {
  0%, 100% { transform: var(--th, translate(0,0)) rotate(0deg); }
  50%      { transform: var(--th, translate(0,0)) rotate(-1.5deg); }
}

/* Responsive */
@media (max-width: 700px) {
  .jumprope-art { margin: 16px auto 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .rope-jumper, .rope, .shadow-jump, .shadow-jump-2, .rope-holder { animation: none !important; }
}

/* Hide the older jumping-kids icon row now that we have a richer illustration */
.jumping-kids { display: none !important; }

/* ==========================================================
   JUMP-ROPE SVG  —  fixed animation (nested-group approach)
   These rules override the earlier broken ones below.
   ========================================================== */
/* Wipe any earlier transforms that may have broken positioning */
.rope-jumper { animation: rj-jump 1.4s ease-in-out infinite; transform-box: fill-box; }
.k3 { animation-delay: 0.18s; }
@keyframes rj-jump {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-30px); }
}

.rope { animation: rj-rope 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rj-rope {
  0%, 100% { transform: translateY(0)   scaleY(1); }
  50%      { transform: translateY(-22px) scaleY(0.55); }
}

.shadow-jump   { animation: rj-shadow 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.shadow-jump-2 { animation: rj-shadow 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; animation-delay: 0.18s; }
@keyframes rj-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.55); opacity: 0.4; }
}

.rope-holder { animation: rj-sway 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center bottom; }
@keyframes rj-sway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-2deg); }
}

/* Make sure the illustration container shows fully, no clipping */
.jumprope-art {
  width: 100%;
  max-width: 880px;
  margin: 24px auto 14px;
  overflow: visible;
}
.jumprope-art svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
@media (prefers-reduced-motion: reduce) {
  .rope-jumper, .rope, .shadow-jump, .shadow-jump-2, .rope-holder { animation: none !important; }
}

/* ==========================================================
   JUMP-ROPE CSS — final fix (animations run on inner <g>, no X/Y vars needed)
   ========================================================== */
.rope-jumper {
  animation: rope-jump 1.4s ease-in-out infinite;
  transform-origin: 0 130px;
}
.k2 { animation-delay: 0s;    }
.k3 { animation-delay: 0.15s; }
@keyframes rope-jump {
  0%, 100% { transform: translateY(0)   scaleY(1);    }
  10%      { transform: translateY(4px)  scaleY(0.96); }
  50%      { transform: translateY(-38px) scaleY(1.04); }
  90%      { transform: translateY(4px)  scaleY(0.96); }
}

.rope-holder { animation: holder-sway 2.8s ease-in-out infinite; transform-origin: 0 160px; }
@keyframes holder-sway {
  0%, 100% { transform: rotate(0deg);    }
  50%      { transform: rotate(-1.5deg); }
}

/* ==========================================================
   KIDS ILLUSTRATION — simple image embed (final, reliable)
   ========================================================== */
.jumprope-art {
  width: 100%;
  max-width: 920px;
  margin: 30px auto 14px;
  display: block;
}
.kids-illustration {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
  animation: kids-float 5s ease-in-out infinite;
}
@keyframes kids-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .kids-illustration { animation: none; }
}

/* ==========================================================
   KIDS ILLUSTRATION — final blend-in style (no card / no shadow)
   ========================================================== */
.jumprope-art {
  width: 100%;
  max-width: 920px;
  margin: 20px auto 0;
  padding: 0;
}
.kids-illustration {
  width: 100%;
  height: auto;
  display: block;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  animation: kids-float 5s ease-in-out infinite;
}
@keyframes kids-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .kids-illustration { animation: none; }
}

/* ==========================================================
   FINAL TWEAKS — slimmer navbar + bigger highlight carousel
   + push smileys to the corners so they don't overlap content
   ========================================================== */

/* --- Navbar: smaller logo + tighter padding so the header is leaner --- */
.nav-wrapper { padding: 6px 0 !important; }
.logo-icon,
.logo-icon:has(img) {
  width: 78px !important;
  height: 78px !important;
  font-size: 24px;
}
img.logo-name-img,
.logo-name-img > img {
  height: 44px;
  max-width: 300px;
}
@media (max-width: 1180px) {
  .logo-icon, .logo-icon:has(img) { width: 66px !important; height: 66px !important; }
  img.logo-name-img, .logo-name-img > img { height: 38px; max-width: 240px; }
}
@media (max-width: 992px) {
  .logo-icon, .logo-icon:has(img) { width: 58px !important; height: 58px !important; }
  img.logo-name-img, .logo-name-img > img { height: 34px; max-width: 200px; }
}
@media (max-width: 768px) {
  .logo-icon, .logo-icon:has(img) { width: 50px !important; height: 50px !important; }
  img.logo-name-img, .logo-name-img > img { height: 28px; max-width: 160px; }
}

/* --- Highlights carousel: grow to fill the freed space --- */
.highlights-carousel {
  height: clamp(360px, 62vw, 680px) !important;
}
@media (max-width: 768px) {
  .highlights-carousel { height: clamp(280px, 75vw, 460px) !important; }
}

/* --- Happy faces: push to extreme corners + much smaller + behind content --- */
.happy-faces {
  pointer-events: none;
  z-index: 0;
}
.happy-faces .face {
  font-size: 24px !important;
  opacity: 0.32 !important;
}
/* About section — move to outer edges and top */
.about-section .happy-faces .face:nth-child(1) { top: 6%   !important; left: 2%   !important; }
.about-section .happy-faces .face:nth-child(2) { top: 10%  !important; right: 2%  !important; left: auto !important; }
.about-section .happy-faces .face:nth-child(3) { bottom: 6% !important; left: 3%  !important; top: auto !important; }
.about-section .happy-faces .face:nth-child(4) { bottom: 8% !important; right: 3% !important; left: auto !important; top: auto !important; }
.about-section .happy-faces .face:nth-child(5) { display: none !important; }

/* Academics */
.academics-section .happy-faces .face:nth-child(1) { top: 5%   !important; left: 2%   !important; }
.academics-section .happy-faces .face:nth-child(2) { top: 8%   !important; right: 2%  !important; left: auto !important; }
.academics-section .happy-faces .face:nth-child(3) { bottom: 5% !important; left: 3%  !important; top: auto !important; }
.academics-section .happy-faces .face:nth-child(4) { bottom: 7% !important; right: 3% !important; left: auto !important; top: auto !important; }
.academics-section .happy-faces .face:nth-child(5) { display: none !important; }

/* Achievements (dark section) */
.achievements-section .happy-faces .face {
  opacity: 0.18 !important;
  color: rgba(255,255,255,0.6) !important;
}
.achievements-section .happy-faces .face:nth-child(1) { top: 6%   !important; left: 2%   !important; }
.achievements-section .happy-faces .face:nth-child(2) { top: 8%   !important; right: 2%  !important; left: auto !important; }
.achievements-section .happy-faces .face:nth-child(3) { bottom: 8% !important; left: 3%  !important; top: auto !important; }
.achievements-section .happy-faces .face:nth-child(4) { bottom: 6% !important; right: 3% !important; left: auto !important; top: auto !important; }

/* Make sure section content sits above the decorations */
.about-section > .container,
.academics-section > .container,
.achievements-section > .container { position: relative; z-index: 2; }

/* ==========================================================
   HIGHLIGHTS CAROUSEL — fill remaining screen height
   (Top bar + Sticky Nav + Carousel = exactly one viewport height)
   ========================================================== */

/* Desktop / laptop:
   • top-bar ≈ 34px (13px font + 8px padding × 2)
   • nav    ≈ 96px (78px logo + 6px padding × 2 + few px borders)
   Total fixed = ~130px, so the carousel should fill 100vh - 130px.
*/
.highlights-carousel {
  height: calc(100vh - 130px) !important;
  min-height: 380px !important;
  max-height: 820px !important;
}

@media (max-width: 1180px) {
  /* Smaller logo on this breakpoint → nav ≈ 80px → fixed ≈ 116px */
  .highlights-carousel {
    height: calc(100vh - 116px) !important;
    min-height: 360px !important;
  }
}

@media (max-width: 992px) {
  /* hamburger active, nav ≈ 72px → fixed ≈ 108px */
  .highlights-carousel {
    height: calc(100vh - 108px) !important;
    min-height: 320px !important;
  }
}

@media (max-width: 768px) {
  /* mobile: top bar tighter, nav ≈ 64px → fixed ≈ 96px
     Use small-viewport-height (svh) when supported so iOS browser
     chrome doesn't push the carousel off-screen. */
  .highlights-carousel {
    height: calc(100vh - 96px) !important;
    min-height: 280px !important;
  }
  @supports (height: 100svh) {
    .highlights-carousel { height: calc(100svh - 96px) !important; }
  }
}