/************************************************
  Author - Deepak Rawat
  Date of Creation - 29 June 2026
  Copyright: CISO Cybersecurity India Pvt. Ltd.
*************************************************/

/* ============================================
   LEAD Scholarship Exam — style.css
   All design tokens as CSS custom properties
   ============================================ */

:root {
  /* ── Palette ── */
	 color-scheme: light;
	--color-primary:       #272362;
	--color-primary-dark:  #2B2FA8;
	--color-primary-light: #6366F1;
	--color-accent:        #F5A623;
	--color-accent-dark:   #D4880A;
	--color-purple:        #272362;
	--color-purple-light:  #EDE9FE;
	--color-green:         #10B981;
	--color-green-light:   #D1FAE5;
	--color-pink:          #EC4899;
	--color-pink-light:    #FCE7F3;
	--color-yellow:        #FBBF24;
	--color-yellow-light:  #FEF3C7;
	--color-blue-light:    #27166A;

  /* ── Neutrals ── */
  --color-white:         #FFFFFF;
  --color-bg:            #F5F7FF;
  --color-surface:       #FFFFFF;
  --color-border:        #E5E7EB;
  /*--color-text:          #1E1B4B;  */
  --color-text:          #272362;
  --color-text-muted:    #6B7280;
  --color-text-light:    #9CA3AF;

  /* ── Dark Navy (footer / CTA strip) ── */
  --color-navy:          #272362;
  --color-navy-light:    #2D2A6E;

  /* ── Typography ── */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(59,63,216,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(59,63,216,.12), 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 40px rgba(59,63,216,.16), 0 4px 16px rgba(0,0,0,.08);
  --shadow-xl:  0 20px 60px rgba(59,63,216,.18), 0 8px 24px rgba(0,0,0,.10);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Category colors ── */
  --cat-tiny:    #FFF7ED;
  --cat-tiny-border: #FED7AA;
  --cat-tiny-text:   #EA580C;
  --cat-junior:  #FFF0F6;
  --cat-junior-border: #FBCFE8;
  --cat-junior-text: #DB2777;
  --cat-future:  #F5F3FF;
  --cat-future-border: #DDD6FE;
  --cat-future-text: #7C3AED;
  --cat-academic:#EFF6FF;
  --cat-academic-border:#BFDBFE;
  --cat-academic-text: #1D4ED8;
  --cat-elite:   #ECFDF5;
  --cat-elite-border: #A7F3D0;
  --cat-elite-text:   #047857;
}


/* Regular */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Medium */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* SemiBold */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* ExtraBold */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}
/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
}
/*
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
*/
body {
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.6;
/*overflow-x: hidden;  */
color-scheme: light !important;
}
.round-tab-btn {
  padding: 0.6rem 1.5rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.9rem;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s ease;
}
.round-tab-btn.active {
 /* background: var(--color-primary);   */
    background: linear-gradient(90deg, #ffb347 0%, #ff9933 45%, #ff6a00 100%);
  color: #fff;
}

img { max-width: 100%; display: block; }
a  { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */
.section-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-10);
}
.section-label::before,
.section-label::after {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  border-radius: var(--radius-full);
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,63,216,.3); }
  50%       { box-shadow: 0 0 0 14px rgba(59,63,216,0); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes counter-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes starPop {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes badgeBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  40%       { transform: translateY(-6px) scale(1.08); }
  70%       { transform: translateY(-2px) scale(1.02); }
}

/* ── NEW ANIMATIONS ── */
@keyframes ripple {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes typewriterBlink {
  0%, 100% { border-right-color: var(--color-primary); }
  50%       { border-right-color: transparent; }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes tiltWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-3deg) scale(1.05); }
  75%       { transform: rotate(3deg) scale(1.05); }
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(59,63,216,0.3)); }
  50%       { filter: drop-shadow(0 0 12px rgba(59,63,216,0.7)); }
}
@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.08); opacity: 0.9; }
  80%  { transform: scale(0.96); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes heroParticle {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
  33%  { transform: translateY(-20px) translateX(10px) scale(1.1); opacity: 1; }
  66%  { transform: translateY(-10px) translateX(-8px) scale(0.9); opacity: 0.8; }
  100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }
}

/* Reduced-motion overrides */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================
   SCROLL-REVEAL UTILITY
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s var(--transition-slow), transform 0.6s var(--transition-slow);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left  { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal-left.visible,
.reveal-right.visible { transform: translateX(0); opacity: 1; }
.reveal-scale  { transform: scale(0.9); }
.reveal-scale.visible { transform: scale(1); opacity: 1; }

/* Stagger delays */
.delay-1 { transition-delay: 100ms !important; }
.delay-2 { transition-delay: 200ms !important; }
.delay-3 { transition-delay: 300ms !important; }
.delay-4 { transition-delay: 400ms !important; }
.delay-5 { transition-delay: 500ms !important; }

/* ============================================
   NAVBAR
   ============================================ */
.navbar {
    position: sticky;
      top: 0;
 
    z-index: 9999;

	background: rgba(255,255,255,.40);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    transition: background 0.35s ease, box-shadow 0.35s ease;
    animation: navSlideDown 0.5s ease;
	 overflow: visible;
}





/*==========================
 NAVBAR BUBBLES
==========================*/

.navbar{
    overflow:visible;
}

.navbar-inner{
    position:relative;
    overflow:visible;
}

/* Common */

.nav-bubbles{
    position:absolute;
    top:50%;
    width:240px;
    height:90px;
    transform:translateY(-80%);
    pointer-events:none;
    z-index:0;
}

/* LEFT SIDE */

.left-bubbles{
    left:-60px;
}

/* RIGHT SIDE */

.right-bubbles{
    left:140px;      /* Logo ke baad */
}

/* Logo always above */

.nav-logo,
.nav-links,
.nav-actions,
.hamburger{
    position:relative;
    z-index:2;
}

/*==========================
 LEFT → RIGHT
==========================*/

.left-bubbles span{
    position:absolute;
    bottom:0;
    border-radius:50%;
    background:rgba(30,20,100,.22);
    border:1px solid rgba(30,20,100,.35);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
        0 0 8px rgba(30,20,100,.18),
        0 0 16px rgba(30,20,100,.12),
        inset 0 0 6px rgba(255,255,255,.25);

    animation:bubbleMove linear infinite;
}

/*==========================
 RIGHT → LEFT
==========================*/

.right-bubbles span{
    position:absolute;
    bottom:0;
    border-radius:50%;
    background:rgba(255,69,0,.18);
    border:1px solid rgba(255,69,0,.80);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
        0 0 8px rgba(255,69,0,.18),
        0 0 16px rgba(255,69,0,.12),
        inset 0 0 6px rgba(255,255,255,.25);

    animation:bubbleMoveReverse linear infinite;
}

/*==========================
 Bubble Sizes
==========================*/

.nav-bubbles span:nth-child(1){
    width:10px;
    height:10px;
    left:10px;
    animation-duration:7s;
}

.nav-bubbles span:nth-child(2){
    width:18px;
    height:18px;
    left:40px;
    animation-duration:8s;
    animation-delay:1s;
}

.nav-bubbles span:nth-child(3){
    width:12px;
    height:12px;
    left:80px;
    animation-duration:6s;
    animation-delay:2s;
}

.nav-bubbles span:nth-child(4){
    width:22px;
    height:22px;
    left:120px;
    animation-duration:9s;
}

.nav-bubbles span:nth-child(5){
    width:14px;
    height:14px;
    left:160px;
    animation-duration:7s;
    animation-delay:3s;
}

.nav-bubbles span:nth-child(6){
    width:9px;
    height:9px;
    left:200px;
    animation-duration:6s;
}

.nav-bubbles span:nth-child(7){
    width:26px;
    height:26px;
    left:70px;
    animation-duration:10s;
    animation-delay:2.5s;
}

/*==========================
 LEFT → RIGHT Animation
==========================*/

@keyframes bubbleMove{

    0%{
        transform:translate(-80px,35px) scale(.2);
        opacity:0;
    }

    20%{
        opacity:.7;
    }

    50%{
        transform:translate(80px,-15px) scale(1);
    }

    100%{
        transform:translate(200px,-55px) scale(.4);
        opacity:0;
    }

}

/*==========================
 RIGHT → LEFT Animation
==========================*/

@keyframes bubbleMoveReverse{

    0%{
        transform:translate(80px,35px) scale(.2);
        opacity:0;
    }

    20%{
        opacity:.7;
    }

    50%{
        transform:translate(-80px,-15px) scale(1);
    }

    100%{
        transform:translate(-200px,-55px) scale(.4);
        opacity:0;
    }

}
/* Background after scrolling */
.navbar.scrolled {
    background: rgba(211, 227, 253, 0.42);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.launching-text{
    display:flex;
    gap:8px;
    font-size:20px;
    font-weight:700;
    overflow:hidden;
}

.launching-text span{
    display:inline-block;
    opacity:0;
    transform:translateX(-60px);
    animation:slideWord 4s infinite;
}

.blue{
    color:#1e1464;
}

.orange{
    color:#ff4500;
}

.launching-text span:nth-child(1){ animation-delay:0s; }
.launching-text span:nth-child(2){ animation-delay:.2s; }
.launching-text span:nth-child(3){ animation-delay:.4s; }
.launching-text span:nth-child(4){ animation-delay:.6s; }

@keyframes slideWord{
    0%{
        opacity:0;
        transform:translateX(-60px);
    }
    15%{
        opacity:1;
        transform:translateX(8px);
    }
    20%{
        transform:translateX(0);
    }
    80%{
        opacity:1;
        transform:translateX(0);
    }
    100%{
        opacity:0;
        transform:translateX(60px);
    }
}
.navbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-xl);
  color: var(--color-primary);
}
.nav-logo .logo-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-purple));
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  animation: badgeBounce 3s ease-in-out infinite;
}

/* Logo text classes (replaces inline styles) */
.logo-title {
  font-size: 1.1rem;
}
.logo-subtitle {
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.nav-links a {
    font-size: var(--text-md);
    font-weight: 600;
    color:#1e1464;
    transition: color var(--transition-fast);
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #1e1464;
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

/*
.nav-links a:hover,
.nav-links a.active,
.dropdown:hover .dropdown-toggle,
.dropdown.active .dropdown-toggle {
    color: #ff4500;
    font-weight: 600;
}
*/

.nav-links a.active,
.dropdown.active .dropdown-toggle {
    color: #ff4500;
    font-weight: 600;
}
.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
	
}

.nav-actions { display: flex; align-items: center; gap: var(--space-3); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
  border-radius: var(--radius-full);
  padding: 0.6rem 1.4rem;
  cursor: pointer;
  border: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-outline {
 background: linear-gradient(90deg, #ffb347 0%, #ff9933 45%, #ff6a00 100%);

  color: var(--color-primary) !important;
}
.btn-outline:hover {    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-purple)); }

.btn-primary {
 /* background: linear-gradient(135deg, var(--color-primary), var(--color-purple));  */
background: linear-gradient(90deg, #ffb347 0%, #ff9933 45%, #ff6a00 100%);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}
.btn-primary:hover { box-shadow: var(--shadow-lg); background: linear-gradient(135deg, var(--color-primary-dark), var(--color-purple)); }

.btn-accent {
  /*background: linear-gradient(135deg, var(--color-accent), #F97316);  */
    background: linear-gradient(90deg, #ffb347 0%, #ff9933 45%, #ff6a00 100%);
  color: var(--color-white);
  box-shadow: 0 4px 16px rgba(245,166,35,.35);
}
.btn-accent:hover {
	
	box-shadow: var(--shadow-sm);
    background: linear-gradient(135deg, var(--color-primary-dark), var(--color-purple));
	}

.btn-ghost {
  background: rgba(255,255,255,0.15);
  color: var(--color-white);
  border: 2px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.25); }

/* Hero CTA button sizing */
.btn-hero-cta {
  font-size: 1rem;
  padding: 0.75rem 1.75rem;
}

/* CTA section register button */
.btn-cta-register {
  font-size: 1rem;
  padding: 0.9rem 2rem;
  white-space: nowrap;
}

/* Mobile menu action buttons */
.mobile-menu-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.mobile-btn {
  flex: 1;
  justify-content: center;
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.hamburger:hover { background: var(--color-blue-light); }
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
 /* background: var(--color-primary);  */
  background: #000;
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6) var(--space-6);
  flex-direction: column;
  gap: var(--space-4);
  box-shadow: var(--shadow-md);
  animation: fadeInUp 0.25s ease;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-weight: 600;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  
  border-bottom: 1px solid var(--color-border) !important;
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-dropdown{
    width:100%;
}

.mobile-dropdown-toggle{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border:none;
    background:none;
    font:inherit;
    font-weight:600;
    color:#1f2937;
    cursor:pointer;
}

.mobile-dropdown-toggle i{
    transition:.3s;
}

.mobile-dropdown.active .mobile-dropdown-toggle i{
    transform:rotate(180deg);
}

.mobile-dropdown-menu{
    display:none;
    padding-left:18px;
}

.mobile-dropdown.active .mobile-dropdown-menu{
    display:block;
}

.mobile-dropdown-menu a{
    display:block;
    padding:10px 0;
    color:#555;
    text-decoration:none;
}

.mobile-dropdown-menu a:hover{
    color:var(--color-primary);
}
/* ============================================
   HERO SECTION
   ============================================ */
.hero {
 /* background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 40%, #EDE9FE 100%);   */
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 40%, #EDE9FE 100%);
  overflow: hidden;
  position: relative;
     z-index: 0;
}
.hero::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(124,58,237,.12) 0%, transparent 70%);
  pointer-events: none;
  animation: heroParticle 8s ease-in-out infinite;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -60px; left: -60px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(59,63,216,.10) 0%, transparent 70%);
  pointer-events: none;
  animation: heroParticle 10s ease-in-out infinite reverse;
}
.hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: linear-gradient(135deg, var(--color-accent), #F97316);
  color: white;
  font-size: var(--text-xs);
  font-weight: 800;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  animation: bounceIn 0.7s 0.2s both;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  animation: fadeInLeft 0.7s 0.1s both;
}
.hero-title-1 {
  font-family: var(--font-display);
   font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  animation: fadeInLeft 0.7s 0.1s both;
}
.hero-title .highlight {
  /*background: linear-gradient(135deg, var(--color-primary), var(--color-purple), var(--color-pink));  */
  background: linear-gradient(135deg, #1e1464, #ff4500);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}
.hero-pill {
  display: inline-block;
 /* background: linear-gradient(135deg, var(--color-primary), var(--color-purple)); */
     background: linear-gradient(135deg, var(--color-accent), #F97316);
 
  color: white;
  font-size: var(--text-base);
  font-weight: 700;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  animation: slideUpFade 0.5s 0.3s both;
}
.hero-sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 440px;
  margin-bottom: var(--space-8);
  animation: fadeInLeft 0.7s 0.4s both;
  line-height: 1.7;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  animation: fadeInLeft 0.7s 0.5s both;
}
/* Ripple effect on primary CTA button */
.btn-hero-cta {
  position: relative;
  overflow: hidden;
}
.btn-hero-cta::after {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.35);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple 2.5s ease-out infinite;
}

.hero-social-proof {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  animation: fadeInLeft 0.7s 0.6s both;
}
.avatar-stack {
  display: flex;
}
.avatar-stack .avatar-placeholder {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 2px solid white;
  margin-left: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  color: white;
  font-weight: 700;
  overflow: hidden;
  transition: transform var(--transition-fast);
}
.avatar-stack .avatar-placeholder:first-child { margin-left: 0; }
.avatar-stack .avatar-placeholder:hover { transform: scale(1.15) translateY(-3px); z-index: 2; }

/* Avatar color variants */
.avatar-a { background: linear-gradient(135deg, var(--color-primary), var(--color-purple)); }
.avatar-b { background: linear-gradient(135deg, #EC4899, #F97316); }
.avatar-c { background: linear-gradient(135deg, #10B981, #3B3FD8); }
.avatar-d { background: linear-gradient(135deg, #F5A623, #EC4899); }

.social-proof-text { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.social-proof-text strong { color: var(--color-primary); }

/* Hero visual */
.hero-visual {
  position: relative;
  animation: fadeInRight 0.8s 0.3s both;
}
.hero-circle {
  width: 420px;
  height: 420px;
  /*background: linear-gradient(135deg, var(--color-primary), var(--color-purple));   */
  border-radius: var(--radius-full);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /*box-shadow: var(--shadow-xl);  */
  animation: glowPulse 4s ease-in-out infinite;
}
.hero-kids {
  font-size: 220px;
  line-height: 1;
  animation: float 4s ease-in-out infinite;
  user-select: none;
}
.hero-float-badge {
  position: absolute;
 /* background: #fffffff2;  */
  border-radius: var(--radius-lg);
  /*padding: var(--space-3) var(--space-4);   */
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  animation: float 3s ease-in-out infinite;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hero-float-badge:hover {
  transform: scale(1.08) translateY(-4px) !important;
  box-shadow: var(--shadow-xl);
}

/* Float badge label/value classes (replaces inline styles) */
.float-badge-label {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-weight: 600;
}
.float-badge-value {
  font-weight: 800;
}
.float-primary { color: var(--color-primary); }
.float-purple  { color: var(--color-purple); }
.float-green   { color: var(--color-green); }
.float-accent  { color: var(--color-accent); }
.float-pink    { color: var(--color-pink); }

/* 5-badge layout — orbiting the circle */
.hero-float-badge.pos-top-left  { top: 10px;  left: 80px;  animation-delay: 0s;   }
.hero-float-badge.pos-top-right { top: 10px;  right: 160px; animation-delay: 0.5s; }
.hero-float-badge.pos-mid-left  { top: 50%;   left: 40px;  transform: translateY(-50%); animation-delay: 1s;   }
.hero-float-badge.pos-mid-right { top: 50%;   right: 50px; transform: translateY(-50%); animation-delay: 1.5s; }
.hero-float-badge.pos-bottom    { top: 20px; left: 50%; transform: translateX(-50%); animation-delay: 2s;   }

.hero-float-badge.pos-mid-left,
.hero-float-badge.pos-mid-right { animation: floatMid 3.5s ease-in-out infinite; }
.hero-float-badge.pos-mid-right { animation-delay: 1.5s; }
.hero-float-badge.pos-bottom    { animation: floatBottom 3.5s ease-in-out infinite; animation-delay: 2s; }

@keyframes floatMid {
  0%, 100% { transform: translateY(calc(-50% + 0px)); }
  50%       { transform: translateY(calc(-50% - 10px)); }
}
@keyframes floatBottom {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-10px); }
}
.float-icon { font-size: 24px; }

/* ============================================
   STATS STRIP
   ============================================ */
.stats-strip {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 1200px;
  margin: -32px auto var(--space-4);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: var(--space-6) var(--space-8);
  gap: var(--space-4);
  position: relative;
  z-index: 10;
}
.stat-item {
  text-align: center;
  padding: var(--space-4);
  border-right: 1px solid var(--color-border);
  transition: transform var(--transition-base), background var(--transition-base);
  border-radius: var(--radius-md);
}
.stat-item:last-child { border-right: none; }
.stat-item:hover {
  transform: scale(1.05);
  background: var(--color-blue-light);
  color:#fff;
    transition:0s;
}
.stat-item:hover .stat-value,
.stat-item:hover .stat-label {
    color: #fff;
}
.stat-icon { font-size: 2rem; margin-bottom: var(--space-2); animation: tiltWiggle 4s ease-in-out infinite; }
.stat-item:nth-child(2) .stat-icon { animation-delay: 0.5s; }
.stat-item:nth-child(3) .stat-icon { animation-delay: 1s; }
.stat-item:nth-child(4) .stat-icon { animation-delay: 1.5s; }
.stat-item:nth-child(5) .stat-icon { animation-delay: 2s; }
.stat-value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 900;
  color: var(--color-primary); 
  /*color: #666; */
}
.stat-label { font-size: var(--text-md); color: var(--color-text-muted); font-weight: 600; }

/* ============================================
   FEATURES STRIP
   ============================================ */
.features-strip {
  background: var(--color-white);
  padding: var(--space-8) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.features-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
}
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast), transform var(--transition-base), box-shadow var(--transition-base);
  cursor: default;
}
.feature-item:hover {
  background: var(--color-blue-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.feature-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--color-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  transition: transform var(--transition-base);
}
.feature-item:hover .feature-icon-wrap { transform: rotate(-6deg) scale(1.1); }
.feature-label { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }

/* ============================================
   SECTIONS WRAPPER
   ============================================ */
.section { padding: var(--space-20) var(--space-6); }
.section-inner { max-width: 1280px; margin: 0 auto; }

/* ============================================
   CATEGORIES
   ============================================ */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.cat-card {
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-4) var(--space-4);
  text-align: center;
 /* border: 2px solid;  */
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.cat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.04) 100%);
  opacity: 0;
  transition: opacity var(--transition-base);
}
.cat-card:hover,
.cat-card.active-card {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}
.cat-card:hover::before { opacity: 1; }
/*
.cat-card.tiny     { background: var(--cat-tiny);     border-color: var(--cat-tiny-border); }
.cat-card.junior   { background: var(--cat-junior);   border-color: var(--cat-junior-border); }
.cat-card.future   { background: var(--cat-future);   border-color: var(--cat-future-border); }  */
.cat-card.academic { background: var(--cat-academic); border-color: var(--cat-academic-border); }
.cat-card.elite    { background: var(--cat-elite);    border-color: var(--cat-elite-border); }

.cat-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}
.cat-card.tiny     .cat-name { color: var(--cat-tiny-text); }
.cat-card.junior   .cat-name { color: var(--cat-junior-text); }
.cat-card.future   .cat-name { color: var(--cat-future-text); }
.cat-card.academic .cat-name { color: var(--cat-academic-text); }
.cat-card.elite    .cat-name { color: var(--cat-elite-text); }

.cat-range { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; margin-bottom: var(--space-4); }
.cat-emoji { font-size: 80px; margin-bottom: var(--space-3); display: block; animation: float 4s ease-in-out infinite; }
.cat-card:nth-child(2) .cat-emoji { animation-delay: 0.5s; }
.cat-card:nth-child(3) .cat-emoji { animation-delay: 1s; }
.cat-card:nth-child(4) .cat-emoji { animation-delay: 1.5s; }
.cat-card:nth-child(5) .cat-emoji { animation-delay: 2s; }

.cat-arrow {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  font-size: 18px;
  color: white;
  transition: transform var(--transition-base);
}
.cat-card:hover .cat-arrow { transform: translateX(6px) scale(1.1); }
.cat-card.tiny     .cat-arrow { background: var(--cat-tiny-text); }
.cat-card.junior   .cat-arrow { background: var(--cat-junior-text); }
.cat-card.future   .cat-arrow { background: var(--cat-future-text); }
.cat-card.academic .cat-arrow { background: var(--cat-academic-text); }
.cat-card.elite    .cat-arrow { background: var(--cat-elite-text); }

/* ============================================
   HOW IT WORKS
   ============================================ */
.how-bg {
  /*background: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-purple-light) 100%);  */
 /* background-color:#E8E8E8;  */
    background-color: #e8e8e81a;
}
.steps-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  justify-content: center;
  flex-wrap: wrap;
}
.step-item {
  flex: 1;
  min-width: 140px;
  max-width: 200px;
  text-align: center;
  padding: var(--space-4);
  position: relative;
}
.step-connector {
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 36px;
  color: var(--color-primary);
  font-size: 24px;
  opacity: 0.4;
  animation: float 2s ease-in-out infinite;
}
.step-connector:nth-of-type(2) { animation-delay: 0.3s; }
.step-connector:nth-of-type(4) { animation-delay: 0.6s; }
.step-connector:nth-of-type(6) { animation-delay: 0.9s; }
.step-connector:nth-of-type(8) { animation-delay: 1.2s; }

.step-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: white;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto var(--space-3);
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  animation: pulse-glow 3s ease-in-out infinite;
}
.step-item:hover .step-icon-wrap { transform: scale(1.1); box-shadow: var(--shadow-xl); }
.step-item:nth-child(3) .step-icon-wrap { animation-delay: 0.6s; }
.step-item:nth-child(5) .step-icon-wrap { animation-delay: 1.2s; }
.step-item:nth-child(7) .step-icon-wrap { animation-delay: 1.8s; }
.step-item:nth-child(9) .step-icon-wrap { animation-delay: 2.4s; }

.step-num {
  position: absolute;
  top: -6px; right: -6px;
  width: 24px; height: 24px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-purple));
  color: white;
  font-size: var(--text-xs);
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-title { font-weight: 800; font-size: var(--text-sm); color: var(--color-primary); margin-bottom: var(--space-1); }
.step-desc  { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.5; }

/* ============================================
   PRIZES
   ============================================ */
.prizes-layout {
	display: grid;
	/*grid-template-columns: 40% 60%;  */
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-8);
	align-items:flex-start;
}
.prizes-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}


.prizes-cards:last-child{
    grid-template-columns:repeat(2,1fr);
}
.prize-card {
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.prize-card::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -40%;
  width: 180%;
  height: 180%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
/* .prize-card:hover::after { transform: translateX(100%); } */
/* .prize-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: var(--shadow-xl); } */
/*
.prize-card.gold   { background: linear-gradient(160deg, #FFF7ED, #FEEBC8); border: 2px solid #FCD34D; }
.prize-card.silver { background: linear-gradient(160deg, #F8FAFC, #E2E8F0); border: 2px solid #CBD5E1; }
.prize-card.bronze { background: linear-gradient(160deg, #FFF5EB, #FDE8D0); border: 2px solid #FDBA74; }
*/
.prize-trophy { font-size: 48px; margin-bottom: var(--space-2); display: block; animation: float 3.5s ease-in-out infinite; }
.prize-card.silver .prize-trophy { animation-delay: 0.8s; }
.prize-card.bronze .prize-trophy { animation-delay: 1.6s; }

.prize-rank {
  font-size: var(--text-xs);
  font-weight: 800;
 /* text-transform: uppercase;  */
  letter-spacing: 0.06em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  display: inline-block;
  margin-bottom: var(--space-3);
}
.prize-card.gold   .prize-rank { background: var(--color-accent); color: white; }
.prize-card.silver .prize-rank { background: #94A3B8; color: white; }
.prize-card.bronze .prize-rank { background: #FB923C; color: white; }

.prize-amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}
.prize-type { font-size: var(--text-xs); font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-3); }
.prize-perks { display: flex; flex-direction: column; gap: var(--space-1); }
.perk { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.perk::before { content: '+ '; color: var(--color-green); font-weight: 800; }

/* Stats panel */
.stats-panel {
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.panel-stat {
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.07);
  transition: background var(--transition-base), transform var(--transition-base);
}
.panel-stat:hover { background: rgba(255,255,255,0.12); transform: scale(1.04); }
.panel-stat-icon { font-size: 2rem; margin-bottom: var(--space-2); animation: tiltWiggle 5s ease-in-out infinite; }
.panel-stat:nth-child(2) .panel-stat-icon { animation-delay: 0.8s; }
.panel-stat:nth-child(3) .panel-stat-icon { animation-delay: 1.6s; }
.panel-stat-val  { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 900; color: var(--color-accent); }
.panel-stat-lbl  { font-size: var(--text-xs); color: rgba(255,255,255,0.65); font-weight: 600; margin-top: var(--space-1); }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.testi-card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  position: relative;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border-top: 4px solid transparent;
}
.testi-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
.testi-card:nth-child(1) { border-top-color: var(--color-primary); }
.testi-card:nth-child(2) { border-top-color: var(--color-accent); }
.testi-card:nth-child(3) { border-top-color: var(--color-green); }

.testi-quote-icon {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-size: 48px;
  color: var(--color-border);
  line-height: 1;
  font-family: Georgia, serif;
}
.stars { color: var(--color-accent); font-size: var(--text-lg); letter-spacing: 2px; margin-bottom: var(--space-3); animation: starPop 0.6s both; }
.testi-text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-4); font-style: italic; }
.testi-author { display: flex; align-items: center; gap: var(--space-3); }
.testi-avatar {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: 700; color: white;
  transition: transform var(--transition-base);
}
.testi-card:hover .testi-avatar { transform: scale(1.1) rotate(-5deg); }

/* Testimonial avatar variants */
.testi-avatar-default { background: linear-gradient(135deg, var(--color-primary), var(--color-purple)); }
.testi-avatar-pink    { background: linear-gradient(135deg, #EC4899, #F97316); }
.testi-avatar-green   { background: linear-gradient(135deg, #10B981, #3B3FD8); }

.testi-name { font-weight: 800; font-size: var(--text-sm); color: var(--color-text); }
.testi-role { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ============================================
   CTA BANNER
   ============================================ */
.cta-banner {
 /* background: linear-gradient(135deg, var(--color-navy) 0%, #3B3FD8 50%, var(--color-purple) 100%);  */
 
 
	/*background: linear-gradient(90deg, #ffe66d 0%, #ffd23f 35%, #ffc107 70%, #ffb900 100%);  */
	
	background: linear-gradient(
	  90deg,
	  #ff8c42 0%,
	  #ff6a1a 35%,
	  #ff4500 70%,
	  #e63e00 100%
	) !important;
 
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  animation: heroParticle 7s ease-in-out infinite;
}
.cta-banner::after {
  content: '';
  position: absolute;
  bottom: -80px; left: 10%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(245,166,35,.15) 0%, transparent 70%);
  animation: heroParticle 9s ease-in-out infinite reverse;
}
.cta-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.cta-text h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  color: #fff;
  margin-bottom: var(--space-2);
}
.cta-text p { color: #fff; font-size: var(--text-base); }
.cta-deco {
  font-size: 120px;
  position: absolute;
  opacity: 0.06;
  right: 200px;
  top: 50%;
  transform: translateY(-50%);
  user-select: none;
  animation: spin-slow 20s linear infinite;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: #1f1463;
  color: rgba(255,255,255,0.75);
  padding: var(--space-16) var(--space-6) var(--space-8);
}
.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
 /* grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;  */
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-12);
}
.footer-brand p { font-size: var(--text-sm); line-height: 1.7; margin: var(--space-4) 0; }
.footer-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.social-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.social-btn:hover { background: var(--color-primary); transform: translateY(-2px) rotate(5deg); }

/* Footer logo classes */
.footer-logo { color: white; }
.footer-logo-title { font-size: 1.1rem; }
.footer-logo-subtitle {
  font-size: 0.55rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.08em;
}

.footer-col h4 { color: white; font-weight: 800; font-size: var(--text-sm); margin-bottom: var(--space-4); text-transform: uppercase; letter-spacing: 0.05em; }
.footer-col ul li { margin-bottom: var(--space-2); }
.footer-col ul li a { font-size: var(--text-sm); color: rgba(255,255,255,0.65); transition: color var(--transition-fast), padding-left var(--transition-fast); }
.footer-col ul li a:hover { color: white; padding-left: 4px; }

.footer-contact-item { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-sm); }
.contact-icon { font-size: 16px; margin-top: 2px; flex-shrink: 0; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.footer-bottom p { font-size: var(--text-xs); }
.footer-bottom-links { display: flex; gap: var(--space-6); }
.footer-bottom-links a { font-size: var(--text-xs); color: rgba(255,255,255,0.55); transition: color var(--transition-fast); }
.footer-bottom-links a:hover { color: white; }

/* ============================================
   SECTION ALTERNATING BG
   ============================================ */
.section-white { background: var(--color-white); }
.section-gray  { background: var(--color-bg); }

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */
@media (max-width: 1100px) {
  .categories-grid { grid-template-columns: repeat(3, 1fr); }
  .cat-card:nth-child(4),
  .cat-card:nth-child(5) { display: flex; flex-direction: column; align-items: center; }
  .footer-inner { grid-template-columns: repeat(3, 1fr); }
  .features-inner { grid-template-columns: repeat(3, 1fr); }
  .prizes-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-visual { order: -1; }
  .hero-circle { width: 280px; height: 280px; }
  .hero-kids { font-size: 150px; }
  .hero-float-badge.top-left  { left: 10px; }
  .hero-float-badge.top-right { right: 10px; }
  .hero-cta { justify-content: center; }
  .hero-social-proof { justify-content: center; }
  .hero-sub { margin: 0 auto var(--space-8); }
  .hero-pill { display: block; margin: 0 auto var(--space-4); width: fit-content; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); margin-top: var(--space-6); }
  .stat-item:nth-child(2) { border-right: none; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .prizes-cards { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: repeat(2, 1fr); }
  .features-inner { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .nav-links, .nav-actions { display: none; }
  .hamburger { display: flex; }
  .navbar-inner { padding: var(--space-3) var(--space-4); }

  .hero-inner { padding: var(--space-10) var(--space-4); }
  .hero-circle { width: 240px; height: 240px; }
  .hero-kids { font-size: 120px; }
  .hero-float-badge { font-size: var(--text-xs); padding: var(--space-2); }
  .hero-float-badge.pos-top-left  { left: 2px;  top: 4px; }
  .hero-float-badge.pos-top-right { right: 2px; top: 4px; }
  .hero-float-badge.pos-mid-left  { left: -10px; }
  .hero-float-badge.pos-mid-right { right: -10px; }
  .hero-float-badge.pos-bottom    { bottom: 4px; }

  .stats-strip { grid-template-columns: repeat(2, 1fr); padding: var(--space-4); gap: var(--space-2); }
  .stat-value { font-size: var(--text-xl); }
  .stat-item { border-right: none; border-bottom: 1px solid var(--color-border); }
  .stat-item:last-child { border-bottom: none; }

  .features-inner { grid-template-columns: repeat(2, 1fr); }
  .categories-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .section { padding: var(--space-12) var(--space-4); }
  .section-label { font-size: var(--text-xl); }

  .steps-row { flex-direction: column; align-items: center; }
  .step-connector { display: none; }

  .prizes-cards { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .prize-amount { font-size: var(--text-base); }
  .stats-panel { grid-template-columns: repeat(2, 1fr); }

  .cta-inner { flex-direction: column; text-align: center; }
  .cta-deco { display: none; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 400px) {
 /*.prizes-cards { grid-template-columns: 1fr; }  */
  .categories-grid { grid-template-columns: 1fr; }
}

/* ============================================
   MODALS — PHONE & OTP
   ============================================ */

/* Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 27, 75, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.modal-overlay.modal-open {
  opacity: 1;
  pointer-events: all;
}

/* Box */
.modal-box {
  /*background: var(--color-white);   */
      background: linear-gradient(326deg, #26b5f147 0%, #d1e1faf0 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8) var(--space-10);
  max-width: 500px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: var(--shadow-xl);
  transform: translateY(28px) scale(0.96);
  transition: transform var(--transition-slow), opacity var(--transition-slow);
  opacity: 0;
}


.modal-overlay.modal-open .modal-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Close ×  */
.modal-close-btn {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-full);
  width: 34px;
  height: 34px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.modal-close-btn:hover { background: #FEE2E2; color: #DC2626; }

/* Step badge */
.modal-step-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-green-light);
  color: var(--color-green);
  font-weight: 800;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
}
.modal-step-icon { font-size: 16px; }

/* Heading */
.modal-main-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.modal-main-sub {
  color:#000;
  font-size: var(--text-base);
  margin-bottom: var(--space-6);
}

/* Inner card */
.modal-card {
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: left;
}
.modal-card-blue  { background: #eff6ff59; }
.modal-card-green { background: #F0FDF4; }

/* Card header (phone modal) */
.modal-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.modal-card-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-card-icon-blue { background: #DBEAFE; }
.modal-card-title {
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--color-text);
}
.modal-card-sub { font-size: var(--text-sm); color: #000; margin-top: 2px; }
.modal-card::after{
	
	content: '';
	position: absolute;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	top: 10%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	animation: ripple 2.5s ease-out infinite;
}
/*
.modal-btn::after{
	
	content: '';
	position: absolute;
	width: 60px;
	height: 60px;
	background: rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	bottom: 20%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
	animation: ripple 2.5s ease-out infinite;
}  */
/* Field label */
.modal-field-label {
  display: block;
  font-weight: 800;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

/* Phone row */
.modal-phone-row {
  display: flex;
  align-items: center;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-5);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.modal-phone-row:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59,63,216,0.12);
}
.modal-country-code {
  background: var(--color-bg);
  border: none;
  border-right: 1.5px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.5;
}
.modal-phone-input {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  color: var(--color-text);
  outline: none;
  min-width: 0;
}
.modal-phone-input::placeholder { color: var(--color-text-light); }
.modal-phone-input:focus { outline: none; box-shadow: none; }

/* Buttons */
.modal-btn {
	width: 100%;
	border: none;
	border-radius: var(--radius-full);
	padding: var(--space-4) var(--space-6);
	font-size: var(--text-base);
	font-weight: 800;
	font-family: var(--font-display);
	color: white;
	cursor: pointer;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
	letter-spacing: 0.01em;
	text-align: center;
	justify-content: center;
}
.modal-btn:hover  { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.modal-btn:active { transform: translateY(0); box-shadow: none; }
.modal-btn-blue  { background: #60AADE; }
.modal-btn-green { background: var(--color-green); }

/* OTP modal specifics */
.modal-otp-icon-wrap {
  width: 68px;
  height: 68px;
  background: var(--color-green-light);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}
.modal-otp-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--color-text);
  margin-bottom: var(--space-2);
  text-align: center;
}
.modal-otp-subtext {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.7;
  margin-bottom: var(--space-5);
}
.modal-otp-subtext strong { color: var(--color-text); }
.modal-change-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: var(--space-2);
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--text-sm);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  transition: color var(--transition-fast);
}
.modal-change-link:hover { color: var(--color-primary-dark); text-decoration: underline; }

/* OTP digit boxes */
.modal-otp-boxes {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.modal-otp-box {
  width: 52px;
  height: 58px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  font-family: var(--font-display);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  caret-color: var(--color-primary);
}
.modal-otp-box:focus {
  border-color: #60AADE;
  box-shadow: 0 0 0 3px rgba(96,170,222,0.18);
}

/* Resend link */
.modal-resend-link {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: var(--space-4);
  background: none;
  border: none;
  color: #60AADE;
  font-weight: 700;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  cursor: pointer;
  transition: color var(--transition-fast);
}
.modal-resend-link:hover { color: var(--color-primary); text-decoration: underline; }
.modal-resend-link:disabled { color: var(--color-text-light); cursor: not-allowed; text-decoration: none; }

/* Responsive */
@media (max-width: 540px) {
  .modal-box { padding: var(--space-6) var(--space-4) var(--space-8); }
  .modal-otp-box { width: 42px; height: 50px; font-size: var(--text-xl); }
  .modal-otp-boxes { gap: var(--space-2); }
  .modal-main-title { font-size: var(--text-2xl); }
}


/* additional inline styles to ensure dropdown works */
    .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      min-width: 200px;
      padding: 0.5rem 0;
      margin: 0;
      background: #fff;
      border-radius: 0.5rem;
      box-shadow: 0 10px 30px rgba(0,0,0,0.12);
      list-style: none;
      transition: opacity 0.2s ease, transform 0.2s ease;
      opacity: 0;
      transform: translateY(6px);
      pointer-events: none;
    }
    .dropdown-menu.show,
    .dropdown:hover .dropdown-menu {
      display: block;
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .dropdown-item {
      display: block;
      padding: 0.4rem 1.5rem;
      color: #1e293b !important;
      text-decoration: none;
      font-weight: 500;
      font-size: 0.9rem;
      transition: background 0.15s;
    }
    .dropdown-item:hover {
      background: #f1f5f9;
      color: #fff;
    }
    .dropdown-toggle {
      background: transparent;
      border: none;
      font-weight: 600;
      font-size: 0.95rem;
      color: #1e1464;
      cursor: pointer;
      padding: 0.5rem 0.25rem;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .dropdown-toggle::after {
      content: "▾";
      font-size: 0.7rem;
      margin-left: 2px;
      opacity: 0.7;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.75rem;
    }
    /* .nav-links a { */
      /* font-weight: 600; */
      /* color: #1e293b; */
      /* text-decoration: none; */
      /* font-size: 0.95rem; */
      /* transition: color 0.2s; */
    /* } */
    .nav-links a:hover {
    /*  color: #ff4500;  */    }
    .dropdown {
      position: relative;
      display: inline-block;
    }
    @media (max-width: 1024px) {
      .nav-links {
        display: none;
      }
    }
	
	.cat-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.cat-btn {
    display: inline-block;
    padding: 8px 18px;
	/*background: linear-gradient(135deg, var(--color-primary), var(--color-purple));  */
	
	color: var(--color-white);
	box-shadow: var(--shadow-md);
    border: 1px solid #dcdcdc;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    transition: all .3s ease;
    cursor: pointer;
}
.grade-1{
    background: #5EDCEB;
    transition: all .3s ease;
}

.grade-1:hover{
    background: #27C7DB;
}

.grade-2{
    background: #FDBA74;
    transition: all .3s ease;
}

.grade-2:hover{
    background: #FC7827;
}

.grade-3{
    background: #8BCF67;
    transition: all .3s ease;
}

.grade-3:hover{
    background: #61A73D;
}
/*
.cat-btn::after {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: ripple 2.5s ease-out infinite;
}

*/
/*
.cat-btn:hover {
    background: #ff6b00;
    color: #fff;
    border-color: #ff6b00;
    transform: translateY(-2px);
}
  */
.cat-card{
    position:relative;
    overflow:hidden;
}

.floating-icons{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}

.float-icon{
    position:absolute;
    font-size:28px;
    opacity:.9;
    animation:floatAround 8s ease-in-out infinite;
}

/* Different Positions */

.icon1{
    top:15%;
    left:19%;
    animation-delay:0s;
}

.icon2{
    top:10%;
    right:19%;
    animation-delay:2s;
}

.icon3{
    bottom:50%;
    left:18%;
    animation-delay:4s;
}

.icon4{
    bottom:50%;
    right:18%;
    animation-delay:6s;
}

/* Content always above */

.cat-emoji,
.cat-range,
.cat-buttons,
.cat-arrow{
    position:relative;
    z-index:2;
}

@keyframes floatAround{

    0%{
        transform:translateY(0px) rotate(0deg) scale(1);
    }

    25%{
        transform:translateY(-18px) rotate(10deg) scale(1.2);
    }

    50%{
        transform:translateX(12px) translateY(8px) rotate(-10deg);
    }

    75%{
        transform:translateX(-12px) translateY(-10px) rotate(8deg);
    }

    100%{
        transform:translateY(0) rotate(0deg);
    }

}


/* Bottom Tiger */

.hero-bottom-tiger{
  position: absolute;
    left: 50%;
    top: -155px;
    transform: translateX(-50%);
    z-index: 20;
    pointer-events: none;
}

.hero-bottom-tiger img{
   
	max-width: 50%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	animation: tigerFloat 5s ease-in-out infinite;
   
}



@media (max-width: 767px) {
    .hero-bottom-tiger {
        display: none;
    }
	.hero-float-badge{
		 display: none;
	}
  .toastify {
    max-width: calc(99% - 20px) !important;
  }
}

/*==========================================
VIDEO SECTION
==========================================*/

.video-section {
    background: #fff;
    position: relative;
    overflow: hidden;
}

/* Background Pattern */
.video-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/pattern-bg.png");
    background-repeat: repeat;      /* Repeat the image */
    background-position: top left;  /* Start from top-left */
    background-size: auto;          /* Don't stretch the image */
    opacity: 0.4;
    z-index: 0;
	background-size: 450px 450px;
}

.video-wrapper{

    max-width:900px;
    margin:auto;
    position:relative;
    z-index:2;
}

.video-card{

    display:block;
    position:relative;
    overflow:hidden;

    border-radius:24px;

  

    transition:.45s;
}

.video-card img{

    width:100%;
    display:block;

    transition:.5s;
}

.video-card:hover{

    transform:translateY(-10px);
    
}

.video-card:hover img{

    transform:scale(1.05);
}

.video-overlay{

    position:absolute;
    inset:0;
}

/* Play Button */

.play-button{

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:90px;
    height:90px;

    border-radius:50%;

    background:#ff0000;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:34px;

    box-shadow:0 0 0 rgba(255,0,0,.5);

    animation:playPulse 2s infinite;
}
.section-label{
    position: relative;
    z-index: 2;
}
/* Pulse */

@keyframes playPulse{

    0%{

        box-shadow:
        0 0 0 0 rgba(255,0,0,.55);
    }

    70%{

        box-shadow:
        0 0 0 22px rgba(255,0,0,0);
    }

    100%{

        box-shadow:
        0 0 0 0 rgba(255,0,0,0);
    }
}

/* Mobile */

@media(max-width:768px){

    .play-button{

        width:70px;
        height:70px;

        font-size:28px;
    }
	.section-label {
        font-size: var(--text-md);
    }
	.participate-image img{
        border-radius:16px;
    }

}

/*==========================================
HOW TO PARTICIPATE IMAGE
==========================================*/

.participate-image{
  /*  max-width:1100px;   */
    margin:0 auto;
    text-align:center;
}

.participate-image img{
   /* width:100%;  */
    height:auto;
    display:block;
}
/*
.participate-image img:hover{
    transform:translateY(-8px) scale(1.02);
}
*/
.footer-nav{

    width:100%;

    display:flex;

  /*  justify-content:center;  */

    align-items:center;

    gap:35px;

    padding:25px 0;

    border-top:1px solid rgba(255,255,255,.12);

    border-bottom:1px solid rgba(255,255,255,.12);

    flex-wrap:wrap;
}

.footer-nav a{

    color:#fff;

    text-decoration:none;

    transition:.3s;
}

.footer-nav a:hover{

    color:#fff;
}

.champions-slider{
    position:relative;
}

.champion-card{

    display:block;

    position:relative;

    overflow:hidden;

    border-radius:18px;
}

.champion-card img{

    width:100%;

    transition:.4s;
}

.champion-card:hover img{

    transform:scale(1.05);
}

.swiper-slide{

    text-align:center;
}

.swiper-slide h4{

    margin-top:20px;

    font-size:22px;

    font-weight:700;
}

.swiper-slide p{

    color:#555;

    margin-top:8px;
}
.champion-prev,
.champion-next{

    width:52px;
    height:52px;

    border-radius:50%;

    background:rgba(255,255,255,.9);

    backdrop-filter:blur(10px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.12);

    transition:.35s;

    color:var(--color-primary);

}

.champion-prev:hover,
.champion-next:hover{

    background:var(--color-primary);

    color:#fff;

    transform:scale(1.08);
}

.champion-prev::after,
.champion-next::after{

    font-size:18px;
    font-weight:700;

}

@media(max-width:768px){

.champion-prev{

left:-5px;
}

.champion-next{

right:-5px;
}
.video-tiger{
	display:none;
}
}


.champion-video-area{

    padding:80px 20px;
    background:#fff;
}

.champion-video-container{

    max-width:1250px;
    margin:auto;
}

.champion-video-heading{

    text-align:center;
    margin-bottom:50px;
}

.champion-video-heading h2{
    margin-bottom:10px;
}

.champion-video-heading p{

    font-size:18px;
    color:#666;
}

.champion-video-wrapper{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.champion-video-box{

    display:block;
    text-decoration:none;
    background:#fff;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.champion-video-box:hover{

    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.champion-video-thumb{

    position:relative;
    overflow:hidden;
}

.champion-video-thumb img{

    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
    transition:.4s;
}

.champion-video-box:hover .champion-video-thumb img{

    transform:scale(1.08);
}

.champion-video-thumb::after{

    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.18);
}

.champion-video-play{

    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:70px;
    height:70px;
	background: linear-gradient(135deg, var(--color-accent), #F97316);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    z-index:2;
    transition:.35s;
}

.champion-video-box:hover .champion-video-play{

    transform:translate(-50%,-50%) scale(1.1);
}

.champion-video-details{

    padding:25px;
}

.champion-video-tag{

    display:inline-block;
    padding:8px 16px;
	/*background: linear-gradient(135deg, var(--color-primary), var(--color-purple));  */
	background: #D9D9D9;
	color: #1e1464;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:18px;
}
/*
.champion-video-details h3{
    margin-bottom:12px;
}
*/
.champion-video-details p{

    font-size:13px;
    color:#555;
    line-height:1.6;
}

.video-tiger{
	bottom: 11%;
	position: absolute;
	left: 3%;
}

/* ============================================
   EVENT SCHEDULE — v2 card journey additions
   Append to the end of style.css
   ============================================ */

/* ── Load-in stagger animation for every card ── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Flowing gradient connector line above milestone cards ── */
@keyframes lineFlow {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* ============================================
   MILESTONE CARDS (journey path)
   ============================================ */
.milestone-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  padding: var(--space-4) var(--space-2);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.milestone-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}
.milestone-final {
  background: linear-gradient(160deg, var(--color-yellow-light), #FFFFFF);
  border-color: var(--color-accent);
}
.milestone-final:hover { border-color: var(--color-accent-dark); }

.mc-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: var(--shadow-sm);
  animation: float 3.2s ease-in-out infinite;
}
.mc-date {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.mc-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
@media (min-width: 640px) {
  .mc-icon { width: 60px; height: 60px; font-size: 24px; }
  .mc-date { font-size: var(--text-base); }
  .mc-pill { font-size: 11px; }
}

/* ============================================
   DETAILED SCHEDULE CARDS (stacked list → cards)
   ============================================ */
.sched-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.sched-card:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}
.sched-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: white;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.sched-label {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
  min-width: 0;
}
.sched-date {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: right;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .sched-label { font-size: var(--text-base); }
  .sched-date { font-size: var(--text-md); }
}

/* ============================================
   TICKET CARDS (Regional Route)
   ============================================ */
.ticket-card {
  flex-shrink: 0;
  scroll-snap-align: start;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) var(--space-2);
  border: 2px dashed var(--color-purple-light);
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-purple-light), #FFFFFF);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.ticket-card:hover {
  transform: rotate(-2deg) translateY(-4px);
  border-color: var(--color-purple);
  box-shadow: var(--shadow-md);
}
.ticket-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  animation: float 3s ease-in-out infinite;
}
.ticket-city {
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-text);
}
.ticket-date {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
}
@media (min-width: 640px) {
  .ticket-card { width: auto; flex: 1 1 0; }
}

/* Reuse the .no-scrollbar utility already added previously.
   If not present yet, uncomment below:
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
*/

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .milestone-card, .sched-card, .ticket-card,
  .mc-icon, .ticket-icon {
    animation: none !important;
    transition: none !important;
  }
}











/* ============================================
   REWARDS & RECOGNITION PAGE
   (uses existing tokens from :root — no new colors)
   ============================================ */

/* ── Page intro ── */
.rewards-hero {
  /*background: linear-gradient(135deg, var(--color-blue-light) 0%, var(--color-purple-light) 100%);   */
  background: #E8E8E8;
  position: relative;
  overflow: hidden;
}
.rewards-class-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: linear-gradient(135deg, var(--color-navy), var(--color-navy-light));
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  letter-spacing: 0.03em;
}
.rewards-class-badge .badge-trophy { color: var(--color-accent); font-size: 18px; }

.rewards-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.rewards-title .txt-navy   { color: var(--color-navy); }
.rewards-title .txt-accent { color: var(--color-accent); }

.rewards-sub {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.7;
}
.rewards-sub strong { color: var(--color-text); }

/* ── Reward tier cards ── */
.reward-card {
	position: relative;
	background: var(--color-white);
	border-radius: var(--radius-xl);  
	box-shadow: var(--shadow-md);
	/*padding: var(--space-10) var(--space-6) var(--space-6);  */
	position: relative;
	text-align: center;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.reward-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}


.reward-badge-num {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}
.reward-badge-star { color: var(--color-accent); font-size: 14px; }
.reward-card-badge.badge-accent .reward-badge-star { color: white; }






.reward-list-title {
  font-size: var(--text-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}
.reward-list-box.list-accent .reward-list-title { color: var(--color-accent-dark); }

.reward-list-box ul { display: flex; flex-direction: column; gap: var(--space-2); }
.reward-list-box li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.reward-check {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: white;
  font-size: 11px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reward-list-box.list-accent .reward-check { background: var(--color-accent); }

/* ── "Regional Winners receive" strip — 4 equal columns ── */
.receive-strip {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

/* Each of the 4 columns is identical in structure & width (grid handles the width) */
.receive-col {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
  position: relative;
}
/* Vertical divider between columns (desktop: 4-up, so 1st/2nd/3rd get a divider, last doesn't) */
.receive-col:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--color-border);
}

.receive-headline-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  border: 3px solid var(--color-yellow-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--color-accent);
  flex-shrink: 0;
}
.receive-headline-text {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-base);
  color: var(--color-navy);
  line-height: 1.25;
}
.receive-item-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.receive-item-text {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.3;
}

/* On 2-column mobile layout, only kill the divider on every 2nd item (col 2 and col 4) */
@media (max-width: 1023px) {
  .receive-col:nth-child(2n)::after { display: none; }
  .receive-col { padding-bottom: var(--space-4); }
}

/* ── Bottom CTA banner (rewards page) ── */
.rewards-cta-banner {
 /* background: linear-gradient(135deg, var(--color-navy) 0%, #1D2A6E 50%, var(--color-primary-dark) 100%);  */
     background: linear-gradient(90deg, rgb(255, 140, 66) 0%, rgb(255, 106, 26) 35%, rgb(255, 69, 0) 70%, rgb(230, 62, 0) 100%) !important;
 /* background: #ffb900;  */
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.rewards-cta-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.08;
  pointer-events: none;
}
.rewards-cta-text {
  color: white;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}
.rewards-cta-text .hl-accent { color: #fff; }
.rewards-cta-trophy {
  font-size: 40px;
  animation: float 3.5s ease-in-out infinite;
}
.rewards-cta-trophy{
	color:#fff;
}


.banner-text{
	font-size: 24px;
	line-height: 34px;
	
	color:#1F1463;
	
      font-weight: 600;
	
}






.confetti-area{
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
}

.hero-float-badge-1,
.hero-float-badge-1e{
    position: absolute;
    z-index: 10;
}

.float-icon{
    width: 120px;
}

.float-icon img{
    width:100%;
    display:block;
    filter: drop-shadow(0 15px 25px rgba(0,0,0,.25));
}

/*==============================
 Positions
==============================*/

.pos-top-lef1-1{
    top:4%;
    left:8%;
    animation: floatTopLeft 5s ease-in-out infinite;
}

.pos-top-right-1{
    top:4%;
    right:-2%;
    animation: floatTopRight 5.5s ease-in-out infinite;
}

.pos-mid-left-1{
    top:42%;
    left:35px;
    animation: floatLeft 6s ease-in-out infinite;
}

.pos-mid-right-1{
    top:42%;
    right:-66px;
    animation: floatRight 6s ease-in-out infinite;
}

.pos-bottom-1{
    top:-5%;
    left:58%;
    transform:translateX(-50%);
    animation: floatBottom 5.5s ease-in-out infinite;
}

/*==============================
 Animations
==============================*/

@keyframes floatTopLeft{

0%{
transform:translate(0,0) rotate(0deg);
}

25%{
transform:translate(-18px,-15px) rotate(-5deg);
}

50%{
transform:translate(15px,10px) rotate(4deg);
}

75%{
transform:translate(-10px,18px) rotate(-4deg);
}

100%{
transform:translate(0,0) rotate(0deg);
}

}

@keyframes floatTopRight{

0%{
transform:translate(0,0) rotate(0deg);
}

25%{
transform:translate(18px,-15px) rotate(5deg);
}

50%{
transform:translate(-15px,10px) rotate(-4deg);
}

75%{
transform:translate(10px,18px) rotate(4deg);
}

100%{
transform:translate(0,0) rotate(0deg);
}

}

@keyframes floatLeft{

0%{
transform:translate(0,0);
}

25%{
transform:translate(-20px,-12px);
}

50%{
transform:translate(12px,12px);
}

75%{
transform:translate(-12px,20px);
}

100%{
transform:translate(0,0);
}

}

@keyframes floatRight{

0%{
transform:translate(0,0);
}

25%{
transform:translate(20px,-12px);
}

50%{
transform:translate(-12px,12px);
}

75%{
transform:translate(12px,20px);
}

100%{
transform:translate(0,0);
}

}

@keyframes floatBottom{

0%{
transform:translateX(-50%) translateY(0);
}

25%{
transform:translateX(-50%) translateY(-18px);
}

50%{
transform:translateX(-50%) translateY(12px);
}

75%{
transform:translateX(-50%) translateY(-10px);
}

100%{
transform:translateX(-50%) translateY(0);
}

}

/*==============================
 Responsive
==============================*/

@media (max-width:768px){

.float-icon{
    width:70px;
}

.pos-top-lef1-1{
    top:2%;
    left:0;
	display:none;
}

.pos-top-right-1{
    top:2%;
    right:0;
	display:none;
}

.pos-mid-left-1{
    left:-5%;
	display:none;
}

.pos-mid-right-1{
    right:-5%;
	display:none;
}

.pos-bottom-1{
    bottom:-2%;
	display:none;
}
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cat-card {
        width: 100%;
    }
}




/* ============================================
   LI'L CHAMPS PAGE — append to end of style.css
   Uses existing :root tokens only, no new colors
   ============================================ */

/* ── Hero banner ── */
.lc-hero {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
  position: relative;
  overflow: hidden;
}
.lc-hero-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--space-16) var(--space-6) var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.lc-hero-circle {
  width: 260px;
  height: 260px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background: var(--color-white);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow: var(--shadow-xl);
}
.lc-hero-img { width: 100%; height: 100%; object-fit: cover; }

.lc-hero-eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.lc-hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  color: var(--color-white);
  line-height: 1.1;
}

/* Info strip (overlaps bottom edge of hero, like .stats-strip) */
.lc-hero-strip {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 1000px;
  margin: calc(-1 * var(--space-10)) auto 0;
  padding: var(--space-6) var(--space-8);
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-around;
}
.lc-hero-strip-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.lc-hero-strip-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--cat-tiny);
  color: var(--cat-tiny-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.lc-hero-strip-title { font-weight: 800; font-size: var(--text-sm); color: var(--color-text); }
.lc-hero-strip-sub   { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }

@media (max-width: 768px) {
  .lc-hero-inner { flex-direction: column; text-align: center; padding-top: var(--space-12); }
  .lc-hero-circle { width: 180px; height: 180px; }
  .lc-hero-strip { flex-direction: column; align-items: flex-start; margin-top: var(--space-6); }
}

/* ── Finale section ── */
.lc-section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-3xl);
  color: var(--color-navy);
}
.lc-section-subtitle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--cat-tiny-text);
  margin-top: var(--space-1);
}
.lc-format-box {
  background: var(--cat-tiny);
  border: 1px solid var(--cat-tiny-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.9;
}
.lc-format-box strong { color: var(--cat-tiny-text); }

.lc-task-line {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
}
.lc-task-line strong { color: var(--color-text); }

.lc-download-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent-dark);
  font-weight: 700;
  font-size: var(--text-sm);
  transition: color var(--transition-fast);
}
.lc-download-link:hover { color: var(--color-accent); text-decoration: underline; }

/* ── Do's & Don'ts accordion ── */
.lc-accordion {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.lc-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--color-accent), #F97316);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  letter-spacing: 0.03em;
  border: none;
  padding: var(--space-4) var(--space-6);
  cursor: pointer;
}
.lc-accordion-icon { transition: transform var(--transition-base); }
.lc-accordion-toggle.open .lc-accordion-icon { transform: rotate(180deg); }

.lc-accordion-panel {
  background: var(--color-white);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}
.lc-accordion-panel.open { max-height: 900px; }

.lc-list-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}
.lc-list { display: flex; flex-direction: column; gap: var(--space-2); }
.lc-list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  padding-left: var(--space-4);
  position: relative;
}
.lc-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}


/*    Li'l Chapmas pages css start   ***************/
/* ============================================
   INFO STRIP (overlaps hero bottom)
   ============================================ */
.info-strip {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6) var(--space-8);
}
.info-strip-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}
.info-strip-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  display: none;
}
@media (min-width: 640px) {
  .info-strip-divider { display: block; }
}
.info-strip-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.info-strip-icon-purple { background: var(--color-purple-light); color: var(--color-purple); }
.info-strip-icon-blue   {     background: #27166a82;   color:#fff; }
.info-strip-icon-green  { background: var(--color-green-light);  color: var(--color-green); }

.info-strip-title { font-weight: 800; font-size: var(--text-sm); color: var(--color-text); }
.info-strip-sub   { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 600; }
.info-strip-sub-strong { color: var(--color-text); font-weight: 800; }

/* ============================================
   SCHOOL ROUND SECTION
   ============================================ */
.sr-section { background: var(--color-white); }

.sr-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-2xl);
  color: var(--color-text);
}

/* Meta row (format / duration / language) */
.sr-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}
.sr-meta-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin: 0 var(--space-4);
}
.sr-meta-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
      background: #FF5722;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sr-meta-label { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.sr-meta-value { font-size: var(--text-sm); font-weight: 800; color: var(--color-text); }

/* Topic box */
.sr-topic-box {
  background: var(--color-purple-light);
  border: 1px solid #DDD6FE;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.sr-topic-heading {
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--color-purple);
  margin-bottom: var(--space-4);
}
.sr-topic-list li {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  padding-left: var(--space-4);
  position: relative;
}
.sr-topic-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-purple);
}
.sr-topic-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  border-top: 1px solid #DDD6FE;
  padding-top: var(--space-4);
}
.sr-topic-note strong { color: var(--color-text); }

/* ============================================
   SIDEBAR CARDS (Do's & Don'ts / Evaluation)
   ============================================ */
.sr-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.sr-card-header {
	background: linear-gradient(135deg, #27166ad6, #7c3aedbf);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-6);
}

.sr-card-header-1 {
	background: linear-gradient(135deg, #ff4500, #ff7a45);
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-6);
}

.sr-card-header-2 {
	    background: var(--color-purple-light);
	color: #000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4) var(--space-6);
}
.sr-card-header h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
}
.sr-card-header-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.sr-card-body { padding: var(--space-6); }

.sr-dodont-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-base);
  margin-bottom: var(--space-3);
}
.sr-dodont-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  color: white;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sr-dodont-icon-do   { background: var(--color-green); }
.sr-dodont-icon-dont { background: #EF4444; }

.sr-dodont-list { display: flex; flex-direction: column; gap: var(--space-3); }
.sr-dodont-list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.sr-dodont-list li:last-child { border-bottom: none; padding-bottom: 0; }
.sr-strike { text-decoration: line-through; opacity: 0.55; }

.sr-eval-list { display: flex; flex-direction: column; gap: var(--space-4); }
.sr-eval-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.sr-eval-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-blue-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* ============================================
   BOTTOM CTA BANNER
   ============================================ */
.sr-cta-banner {
  background: var(--color-yellow-light);
  border: 1px solid #FDE68A;
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-8);
}
.sr-cta-trophy { font-size: 44px; animation: float 3.5s ease-in-out infinite; }
.sr-cta-trophy { font-size: 44px; animation: float 3.5s ease-in-out infinite; }
.sr-cta-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-xl);
  color: var(--color-primary);
  margin-bottom: var(--space-1);
}
.sr-cta-text { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 460px; }
.sr-cta-btn { flex-shrink: 0; white-space: nowrap; }

/* ============================================
   RESPONSIVE TWEAKS
   ============================================ */
@media (max-width: 640px) {
  .sr-meta-divider { display: none; }
  .sr-card-body { padding: var(--space-5); }
  .sr-cta-banner { padding: var(--space-6); }
}
/*    Li'l Chapmas pages css End   ***************/

/*==========================
  DOWNLOAD BUTTONS
===========================*/

.sr-download-row{
    width:100%;
    max-width:760px;
    /*margin-top:32px;  */
    margin-top:0px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e8dff9;
    box-shadow:0 8px 24px rgba(31,41,55,.06);
}

.sr-download-link{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    padding:26px 22px;
    text-decoration:none;

    transition:.35s;
    position:relative;
}

.sr-download-link:first-child{
    border-right:1px solid #e8dff9;
}

/* icon */

.sr-download-link i{
    font-size:34px;
    flex-shrink:0;
}

/* text */

.sr-download-link div{
    display:flex;
    flex-direction:column;
    line-height:1.15;
}

.sr-download-title{
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
}

.sr-download-link strong{
    font-size:24px;
    font-weight:900;
    text-transform:uppercase;
}

/* Left */

.sr-download-purple{
    background:linear-gradient(180deg,#ffffff 0%,#f7f3ff 100%);
    color:#4f2ed6;
}

.sr-download-purple:hover{
    background:#f2ebff;
    transform:translateY(-2px);
}

/* Right */

.sr-download-accent{
    background:linear-gradient(180deg,#ffffff 0%,#fff8ef 100%);
    color:#f97316;
}

.sr-download-accent:hover{
    background:#fff2df;
    transform:translateY(-2px);
}

/*==========================
  TABLET
===========================*/

@media (max-width:768px){

.sr-download-link{
    padding:20px 16px;
    gap:14px;
}

.sr-download-link i{
    font-size:28px;
}

.sr-download-title{
    font-size:11px;
}

.sr-download-link strong{
    font-size:18px;
}

}

/*==========================
  MOBILE
===========================*/

@media (max-width:640px){

.sr-download-row{
    border-radius:16px;
}

.sr-download-link{
    justify-content:flex-start;
    padding:18px;
}

.sr-download-link:first-child{
    border-right:none;
    border-bottom:1px solid #e8dff9;
}

.sr-download-link i{
    font-size:26px;
}

.sr-download-title{
    font-size:11px;
}

.sr-download-link strong{
    font-size:16px;
}

}




/* ============================================
   REWARD JOURNEY CARDS (Round 1 → Round 2 → Regional → Finale)
   ============================================ */
.reward-journey-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  position: relative;
  margin-top: var(--space-8);
}

/* connecting flow line behind the cards (desktop only) */
.reward-journey-grid::before {
  content: '';
  position: absolute;
  top: 46px;
  left: 8%;
  right: 8%;
  height: 3px;
  background: linear-gradient(90deg, var(--cat-tiny-text), var(--color-purple), var(--color-primary-dark), var(--color-accent));
  background-size: 200% 100%;
  animation: lineFlow 4s linear infinite;
  z-index: 0;
  opacity: .5;
}

.journey-card {
  position: relative;
  z-index: 1;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-6) var(--space-5) var(--space-5);
  text-align: center;
  border-top: 4px solid transparent;
  opacity: 0;
  animation: cardIn 0.6s ease forwards;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.journey-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-xl);
}

.jc-1 { border-top-color: var(--cat-tiny-text);    animation-delay: .1s; }
.jc-2 { border-top-color: var(--color-purple);     animation-delay: .3s; }
.jc-3 { border-top-color: var(--color-primary-dark); animation-delay: .5s; }
.jc-4 { border-top-color: var(--color-accent);     animation-delay: .7s; }

/* Icon bubble */
.jc-icon-wrap {
  width: 76px;
  height: 76px;
  margin: 0 auto var(--space-3);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  animation: badgeBounce 3s ease-in-out infinite;
  box-shadow: var(--shadow-md);
}
.jc-1 .jc-icon-wrap { background: linear-gradient(135deg, var(--cat-tiny-text), #FDBA74); }
.jc-2 .jc-icon-wrap { background: linear-gradient(135deg, var(--color-purple), #A78BFA); animation-delay: .3s; }
.jc-3 .jc-icon-wrap { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light)); animation-delay: .6s; }
.jc-4 .jc-icon-wrap { background: linear-gradient(135deg, var(--color-accent), #F97316); animation-delay: .9s; }

.jc-final .jc-icon-wrap { animation: badgeBounce 2.2s ease-in-out infinite, glowPulse 2.5s ease-in-out infinite; }

.jc-step {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--color-text-light);
  margin-bottom: var(--space-1);
}
.jc-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.jc-list { display: flex; flex-direction: column; gap: var(--space-3); text-align: left; }
.jc-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
}
.jc-list li small {
  display: block;
  font-weight: 500;
  color: var(--color-text-muted);
  font-size: 11px;
  margin-top: 2px;
}
.jc-check {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: var(--color-green);
  color: white;
  font-size: 10px;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Finale card special highlight */
.jc-final {
  background: linear-gradient(160deg, var(--color-yellow-light), var(--color-white));
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .reward-journey-grid { grid-template-columns: repeat(2, 1fr); }
  .reward-journey-grid::before { display: none; }
}
@media (max-width: 640px) {
  .reward-journey-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .jc-icon-wrap { width: 64px; height: 64px; font-size: 24px; }
}

/* ============================================
   REWARD JOURNEY CARDS — gradients & animation
   (layout ab Tailwind classes se ho raha hai)
   ============================================ */
.journey-card {
  opacity: 0;
  animation: cardIn 0.6s ease forwards;
}
.jc-1 { border-top-color: var(--cat-tiny-text);      animation-delay: .1s; }
.jc-2 { border-top-color: var(--color-purple);       animation-delay: .3s; }
.jc-3 { border-top-color: var(--color-primary-dark); animation-delay: .5s; }
.jc-4 { border-top-color: var(--color-accent);       animation-delay: .7s; }

.jc-icon-wrap { animation: badgeBounce 3s ease-in-out infinite; }
.jc-1 .jc-icon-wrap { background: linear-gradient(135deg, var(--cat-tiny-text), #FDBA74); }
.jc-2 .jc-icon-wrap { background: linear-gradient(135deg, var(--color-purple), #A78BFA); animation-delay: .3s; }
.jc-3 .jc-icon-wrap { background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-light)); animation-delay: .6s; }
.jc-4 .jc-icon-wrap { background: linear-gradient(135deg, var(--color-accent), #F97316); animation-delay: .9s; }

.jc-final { background: linear-gradient(160deg, var(--color-yellow-light), var(--color-white)); }
.jc-final .jc-icon-wrap { animation: badgeBounce 2.2s ease-in-out infinite, glowPulse 2.5s ease-in-out infinite; }
/*********************** video Player start ***********************/

/*********************** video Player end ***********************/



@media (max-width: 767px) {

    .stats-strip.swiper {
        overflow: hidden;
        padding: 0 45px;
    }

    .stats-strip .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: stretch;
        height: auto;
    }

    .stats-strip .swiper-button-next,
    .stats-strip .swiper-button-prev {
        width: 38px;
        height: 38px;
        background: #0B2473;
        border-radius: 50%;
        color: #fff;
    }

    .stats-strip .swiper-button-next::after,
    .stats-strip .swiper-button-prev::after {
        font-size: 15px;
        font-weight: bold;
    }

    .stats-strip .swiper-button-disabled{
        opacity:.35;
    }
}

@media (max-width: 767px){

    .stats-strip .stat-icon{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 12px;
    }

    .stats-strip .stat-icon img{
        width: 80% !important;
       
        height: auto;
        margin: 0 auto;
        display: block;
    }

    /* Coding Champs image */
    .stats-strip .stat-item:last-child .stat-icon img{
        width: 60% !important;
        max-width: 80%;
    }

}

.stats-strip .swiper-pagination{
    position:relative;
    margin-top:20px;
    text-align:center;
}

.stats-strip .swiper-pagination-bullet{
    width:10px;
    height:10px;
    margin:0 5px !important;
    background:#d1d5db;
    opacity:1;
    border-radius:50%;
    transition:.3s;
}

.stats-strip .swiper-pagination-bullet-active{
    width:28px;
    border-radius:20px;
    background:#1e1464;
}






/* ============================================
   CHAMPIONS WALL — Winner Cards
   ============================================ */
/* ============================================
   CHAMPIONS WALL — CARDS + STAR ANIMATION
   ============================================ */
/* One Background for All 3 Cards */

.champ-group{
    position: relative;
    overflow: hidden;

    padding: 40px 20px;

    border-radius: 28px;

    background: linear-gradient(
    135deg,
    #D7DBF6 0%,
    #E2E6FA 30%,
    #EEF1FD 70%,
    #F5F7FF 100%
);

    background-size: 300% 300%;
    animation: gradientMove 8s ease infinite;
}

/* Shine Effect */

.champ-group::before{
    content:"";
    position:absolute;

    width:40%;
    height:180%;

    top:-40%;
    left:-50%;

    background:rgba(255,255,255,.25);

    transform:rotate(25deg);

    animation:shine 5s linear infinite;
}

@keyframes shine{

    0%{
        left:-60%;
    }

    100%{
        left:140%;
    }

}

@keyframes gradientMove{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}
.champ-card{

    background: transparent !important;

    box-shadow: none !important;

    border-radius: 0;

    padding: 20px;

    position: relative;
}





.stat-item{
    cursor:pointer;
    transition:.3s;
}

.stat-item.active{
    background:#272362;
    color:#fff;
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,.2);
}

/* Default Image */

.stat-icon img{
    width:90px;
    height:auto;
    margin:auto;
    transition:all .35s ease;
}

/* Active Image */

.stat-item.active .stat-icon img{
    width:120px;
    transform:scale(1.1);
}

.stat-item.active .stat-value,
.stat-item.active .stat-label{
    color:#fff;
}


.stats-strip-1 {
  grid-template-columns: repeat(6, 1fr) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .stats-strip-1 {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px;
  }
.launching-text{
    justify-content: center;
}
}





/* Stats strip responsive fix, tablet and mobile card view */
@media (min-width: 768px) and (max-width: 1023px) {
  .stats-strip-1 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .stats-strip-1 {
    grid-template-columns: 1fr !important;
    gap: 0;
  }
  .stats-strip-1 .stat-item {
    display: none;
    border-right: none;
  }
  .stats-strip-1 .stat-item.active {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

.stats-strip-1 .stat-icon img {
    width: 40% !important;
    max-width: 40%;
  }

  .stats-strip-1 .stat-item:last-child .stat-icon img {
    width: 40% !important;
    max-width: 40%;
  }
  .stats-strip-1 .stat-value {
    font-size: 14px !important;
  }

  .stats-strip-1 .stat-label {
    font-size: 12px !important;
  }
 .hero-circle {
    width:50% !important;

  }

  .hero-kids img {
    width: 100% !important;
    height: auto !important;
        padding-bottom: 0px;
  }

.ticket-card {

    width: 100%;
}

.stats-mobile-controls {
  gap: 14px;
}

.stats-arrow {
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  background: #0B2473;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.stats-arrow:hover {
  transform: scale(1.08);
}
.stats-arrow:active {
  transform: scale(0.95);
}

.stats-dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px;
}
.stats-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #d1d5db;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all .3s ease;
}
.stats-dot.active {
  width: 28px;
  border-radius: 20px;
  background: #1e1464;
}