:root {
  --edu-white: #FFFFFF;
  --edu-blue: #1E3EA4;
  --edu-navy: #0F172A;
  --edu-gray: #64748B;
  --soft-bg: #F8FAFC;
  --bg-pattern: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%231E3EA4" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  color: var(--edu-navy);
  background-color: var(--soft-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Merriweather', serif;
}

/* CUSTOM SCROLLBAR */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--edu-blue);
}

/* MATH BACKGROUND PATTERN */
.bg-pattern-math {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48dGV4dCB4PSIxMCIgeT0iMjAiIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4yIiBmb250LWZhbWlseT0ic2VyaWYiIGZvbnQtc2l6ZT0iMjAiPsOoPC90ZXh0Pjx0ZXh0IHg9IjYwIiB5PSI2MCIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjIiIGZvbnQtZmFtaWx5PSJzZXJpZiIgZm9udC1zaXplPSIyMCI+4o6rbcKyPC90ZXh0Pjx0ZXh0IHg9IjMwIiB5PSI4MCIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjIiIGZvbnQtZmFtaWx5PSJzZXJpZiIgZm9udC1zaXplPSIyMCI+4oi1PC90ZXh0Pjx0ZXh0IHg9IjgwIiB5PSIyMCIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjIiIGZvbnQtZmFtaWx5PSJzZXJpZiIgZm9udC1zaXplPSIyMCI+4oi1PC90ZXh0Pjwvc3ZnPg==');
}

/* ANIMATED MATH SYMBOLS BACKGROUND */
.math-symbols-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.math-symbol {
    position: absolute;
    font-family: 'Merriweather', serif;
    font-weight: bold;
    color: var(--edu-blue);
    animation: floatUp linear infinite;
    pointer-events: none;
}

@keyframes floatUp {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

/* UTILITIES */
.shadow-premium {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.shadow-premium-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ANIMATIONS */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-in-up {
  animation: slideInUp 0.8s ease-out;
}

/* COMPONENT STYLES */
.btn-primary {
  background-color: var(--edu-blue);
  color: white;
  transition: all 0.3s;
}

.btn-primary:hover {
  background-color: var(--edu-navy);
  transform: translateY(-2px);
}

/* DETAILS / SUMMARY ANIMATION */
details > summary {
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details[open] summary ~ * {
  animation: slideInUp 0.3s ease-in-out;
}

/* WHATSAPP FLOAT */
.whatsapp-float {
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* RESPONSIVE IMPROVEMENTS */
@media (max-width: 768px) {
    .math-symbol {
        font-size: 16px !important;
    }
}

/* PRINT STYLES */
@media print {
    .whatsapp-float,
    nav,
    footer,
    .math-symbols-container {
        display: none !important;
    }
}
/* HEADER HERO SECTION ANIMATIONS */
.math-symbols-container-header {
    position: relative;
    width: 100%;
    height: 100%;
}

.math-symbol-header {
    position: absolute;
    font-family: 'Merriweather', serif;
    font-weight: bold;
    color: white;
    animation: floatUpHeader 20s linear infinite;
    pointer-events: none;
}

@keyframes floatUpHeader {
    0% {
        transform: translateY(100%) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.2;
    }
    90% {
        opacity: 0.2;
    }
    100% {
        transform: translateY(-100%) rotate(360deg);
        opacity: 0;
    }
}

/* HEADER RESPONSIVE */
@media (max-width: 1024px) {
    .math-symbol-header {
        font-size: 18px !important;
    }
}

@media (max-width: 768px) {
    .math-symbol-header {
        font-size: 14px !important;
    }
}