/* === Glassmorphism & Neumorphism Effects === */
.glass {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 1.5rem;
  border: 1.5px solid rgba(255,255,255,0.22);
  transition: background 0.4s, box-shadow 0.4s;
}
.neumorph {
  background: #f8fafc;
  border-radius: 1.5rem;
  box-shadow: 8px 8px 24px #e0e0e0, -8px -8px 24px #ffffff;
  transition: box-shadow 0.3s, background 0.3s;
}
body.dark .neumorph {
  background: #23272f;
  box-shadow: 8px 8px 24px #18181b, -8px -8px 24px #2d3748;
}

/* === Accent Colors & Theme Variables === */
:root {
  --accent: #f59e42;
  --accent2: #fbbf24;
  --accent3: #ffb703;
  --card-bg: #fff;
  --card-bg-glass: rgba(255,255,255,0.7);
  --card-shadow: 0 4px 32px 0 rgba(251,191,36,0.10);
  --text-main: #1a1a1a;
  --text-muted: #6b7280;
}
body.dark {
  --card-bg: #23272f;
  --card-bg-glass: rgba(36,39,46,0.7);
  --card-shadow: 0 4px 32px 0 rgba(251,191,36,0.18);
  --text-main: #f3f4f6;
  --text-muted: #a1a1aa;
}

/* === Card, Section, and Button Styles === */
.card, .section-card, .product-card, .online-class-card, .quiz-card, .scholarship-img {
  background: var(--card-bg-glass);
  box-shadow: var(--card-shadow);
  border-radius: 1.5rem;
  border: 1.5px solid rgba(251,191,36,0.10);
  transition: background 0.4s, box-shadow 0.4s, transform 0.2s;
}
body.dark .card, body.dark .section-card, body.dark .product-card, body.dark .online-class-card, body.dark .quiz-card, body.dark .scholarship-img {
  background: var(--card-bg-glass);
  box-shadow: var(--card-shadow);
}
.card:hover, .section-card:hover, .product-card:hover, .online-class-card:hover, .quiz-card:hover, .scholarship-img:hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 8px 40px 0 var(--accent2), 0 2px 8px 0 rgba(251,191,36,0.10);
}

/* === Button Styles & Animations === */
.btn, .glow-btn {
  background: linear-gradient(90deg, var(--accent) 60%, var(--accent2) 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 1.2em;
  box-shadow: 0 2px 8px 0 rgba(251,191,36,0.15);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.2s;
  border: none;
  outline: none;
}
.btn:hover, .glow-btn:hover {
  background: linear-gradient(90deg, var(--accent2) 60%, var(--accent) 100%);
  color: #fffde4;
  box-shadow: 0 4px 16px 0 rgba(251,191,36,0.25);
  transform: scale(1.06);
}
.glow-btn {
  animation: glowPulse 2s infinite;
}

/* === Link & Nav Hover Effects === */
a, .nav-link {
  transition: color 0.2s, text-shadow 0.2s;
}
a:hover, .nav-link:hover {
  color: var(--accent);
  text-shadow: 0 2px 8px var(--accent2, #fbbf24, 0.12);
}

/* === Soft Shadows for Images & Avatars === */
img, .rounded-xl, .rounded-full {
  box-shadow: 0 2px 12px 0 rgba(251,191,36,0.10);
  transition: box-shadow 0.3s;
}
img:hover, .rounded-xl:hover, .rounded-full:hover {
  box-shadow: 0 6px 24px 0 var(--accent2, #fbbf24, 0.18);
}

/* === Subtle Section Fade-in Animation === */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px);}
  100% { opacity: 1; transform: translateY(0);}
}
.section-card, .product-card, .online-class-card, .quiz-card, .scholarship-img {
  animation: fadeInUp 1s cubic-bezier(0.4,0,0.2,1) both;
}

/* === Floating Coin Animation === */
@keyframes floatCoin {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 0.8;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(-180px) scale(1.2) rotate(360deg);
    opacity: 0;
  }
}
.coin-anim {
  animation: floatCoin 3.5s linear infinite;
  pointer-events: none;
}

/* === Bounce-in animation for quiz cards === */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.7) translateY(60px);
  }
  60% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }
  80% {
    transform: scale(0.98) translateY(5px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.bounce-in {
  animation: bounceIn 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
}

/* === Slide-down animation for mobile navbar menu === */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-24px) scaleY(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}
.animate-slide-down {
  animation: slideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* === Confetti Animation === */
@keyframes confettiFall {
  0% {
    opacity: 0.8;
    transform: translateY(-40px) rotate(0deg) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(120px) rotate(360deg) scale(1.2);
  }
}
.confetti {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  opacity: 0.8;
  z-index: 15;
  pointer-events: none;
  animation: confettiFall 2.5s linear infinite;
}

/* === Button Glow Animation === */
@keyframes glowPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(251,191,36,0.7), 0 0 0 0 rgba(245,158,66,0.5);
  }
  70% {
    box-shadow: 0 0 16px 8px rgba(251,191,36,0.4), 0 0 32px 16px rgba(245,158,66,0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(251,191,36,0.7), 0 0 0 0 rgba(245,158,66,0.5);
  }
}

/* === Badge Style === */
.badge {
  display: inline-block;
  background: linear-gradient(90deg, var(--accent) 60%, var(--accent2) 100%);
  color: #fff;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 9999px;
  padding: 0.4em 1.2em;
  box-shadow: 0 2px 8px 0 rgba(251,191,36,0.15);
  letter-spacing: 0.02em;
  margin-bottom: 0.5em;
  border: 2px solid #fff3;
}

/* === Responsive Tweaks === */
@media (max-width: 768px) {
  .card, .section-card, .product-card, .online-class-card, .quiz-card, .scholarship-img {
    border-radius: 1em;
  }
  .btn, .glow-btn {
    font-size: 1rem;
    padding: 0.7em 1.2em;
  }
}

/* === Typography Enhancements === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Urbanist', 'Inter', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.01em;
}
body, p, li, span, a, button {
  font-family: 'Inter', 'Urbanist', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
}