:root {
    --primary: #c9a063;
    --dark: #0f0f0f;
    --card-bg: #1a1a1a;
    --light: #f4f4f4;
}

* { box-sizing: border-box; }
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    margin: 0; background: var(--dark); color: var(--light);
    overflow-x: hidden; scroll-behavior: smooth;
}

.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* Animations */
.reveal { opacity: 0; transform: translateY(30px); transition: 0.8s ease-out; }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Hero Section */
.hero {
    height: 80vh;
    background: url('hero-bg.jpg') center/cover no-repeat;
    display: flex; align-items: center; justify-content: center;
    position: relative; text-align: center;
}
.hero-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); }
.hero-content { z-index: 1; padding: 20px; }
.hero-content h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); color: var(--primary); margin: 0; letter-spacing: 2px; }

/* General Section Styling */
.section { padding: 80px 0; text-align: center; }
.about-text { max-width: 800px; margin: 0 auto; line-height: 1.8; color: #bbb; text-align: left; font-size: 1.1rem; }

/* Grids - This makes it Responsive */
.curriculum-grid, .gallery-grid, .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px; margin-top: 40px;
}

/* Gallery - 10 images */
.gallery-item { height: 300px; border-radius: 10px; overflow: hidden; border: 1px solid #333; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.gallery-item:hover img { transform: scale(1.1); }

/* Pricing Cards */
.card { background: var(--card-bg); padding: 40px 20px; border-radius: 20px; border: 1px solid #333; position: relative; }
.card.popular { border: 2px solid var(--primary); }
.badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--primary); padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; }
.price { font-size: 2.5rem; color: var(--primary); margin: 20px 0; font-weight: bold; }

/* Form */
.contact-form { max-width: 500px; margin: 0 auto; background: #151515; padding: 40px; border-radius: 20px; }
input, select { width: 100%; padding: 15px; margin: 10px 0; background: #222; border: 1px solid #444; color: white; border-radius: 10px; font-size: 16px; }

/* Buttons & Floats */
.btn { background: var(--primary); color: white; padding: 16px 32px; border: none; border-radius: 50px; font-weight: bold; cursor: pointer; text-decoration: none; display: inline-block; transition: 0.3s; }
.btn:hover { background: #b08952; transform: scale(1.05); }
.whatsapp-float { position: fixed; bottom: 20px; right: 20px; background: #25D366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 100; text-decoration: none; }
.footer { padding: 40px; background: #080808; text-align: center; }

/* Mobile Optimizations */
@media (max-width: 600px) {
    .hero { height: 60vh; }
    .section { padding: 50px 0; }
    .about-text { text-align: center; width: 95%; }
}