/* ExcelKidsHub Global Styles */
:root {
    --primary: #FFD700; /* Sunshine Yellow */
    --secondary: #00A8E8; /* Bright Blue */
    --accent: #FF6B6B; /* Soft Coral */
    --success: #4CAF50; /* Growth Green */
    --dark: #2C3E50;
    --light: #F8F9FA;
    --white: #ffffff;
}

* { box-sizing: border-box; transition: 0.3s; }
body { font-family: 'Poppins', sans-serif; margin: 0; line-height: 1.6; background-color: var(--light); color: var(--dark); }

/* Navigation */
nav { background: var(--white); display: flex; justify-content: space-around; align-items: center; padding: 15px 5%; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
nav .logo { font-size: 1.5rem; font-weight: bold; color: var(--secondary); text-decoration: none; }
nav ul { list-style: none; display: flex; gap: 20px; margin: 0; }
nav a { text-decoration: none; color: var(--dark); font-weight: 500; }
nav a:hover { color: var(--secondary); }

/* Hero Section */
.hero { background: linear-gradient(135deg, var(--secondary), var(--primary)); color: white; padding: 60px 20px; text-align: center; border-radius: 0 0 50px 50px; }
.hero h1 { font-size: 2.5rem; margin-bottom: 10px; }

/* Content Sections */
.container { max-width: 1200px; margin: 40px auto; padding: 0 20px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }

/* Batch Cards */
.batch-card { background: var(--white); border-radius: 15px; padding: 20px; border-top: 8px solid var(--primary); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.batch-card.level2 { border-top-color: var(--secondary); }
.batch-card.level3 { border-top-color: var(--accent); }
.batch-card h3 { margin-top: 0; color: var(--dark); }
.tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; margin-bottom: 10px; }
.tag-online { background: #E3F2FD; color: #1E88E5; }
.tag-offline { background: #E8F5E9; color: #2E7D32; }

/* Footer */
footer { background: var(--dark); color: white; padding: 40px 20px; text-align: center; margin-top: 50px; }
.btn { background: var(--secondary); color: white; padding: 12px 25px; text-decoration: none; border-radius: 30px; display: inline-block; margin-top: 20px; font-weight: bold; }
.btn:hover { transform: scale(1.05); background: var(--dark); }