/* Reset */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins', sans-serif; }

/* Body */
body { background:#f2f7f2; color:#222; scroll-behavior:smooth; }

/* Header */
header { display:flex; justify-content:space-between; align-items:center; padding:20px 50px; background:rgba(255,255,255,0.95); position:fixed; width:100%; top:0; z-index:1000; box-shadow:0 4px 15px rgba(0,0,0,0.1); }
header .logo { font-family:'Lora', serif; font-size:2rem; color:#2a5d34; font-weight:700; }
header nav ul { display:flex; gap:25px; list-style:none; }
header nav ul li a { text-decoration:none; color:#2a2a2a; font-weight:600; transition:0.3s; }
header nav ul li a:hover { color:#8cc63f; }

/* Hero Section */
.hero { height:100vh; background:url('../images/hero-bg.jpg') center/cover no-repeat; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; }
.hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.4); }
.hero-content { position:relative; color:#fff; z-index:2; }
.hero-content h1 { font-size:3rem; margin-bottom:15px; opacity:0; transform:translateY(30px); animation:fadeUp 1s forwards; }
.hero-content p { font-size:1.3rem; margin-bottom:25px; opacity:0; transform:translateY(30px); animation:fadeUp 1s forwards; animation-delay:0.3s; }
.btn-cta { padding:15px 35px; border-radius:30px; border:none; background:linear-gradient(45deg,#8cc63f,#6aa32f); color:#fff; font-weight:600; cursor:pointer; transition:0.3s; opacity:0; transform:translateY(30px); animation:fadeUp 1s forwards; animation-delay:0.6s; }
.btn-cta:hover { transform:scale(1.05); }

/* About Section */
.about { max-width:800px; margin:150px auto 50px auto; padding:50px; background:rgba(255,255,255,0.25); backdrop-filter:blur(15px); border-radius:25px; box-shadow:0 15px 35px rgba(0,0,0,0.2); text-align:center; }
.about h2 { font-family:'Lora', serif; font-size:2.5rem; margin-bottom:20px; color:#2a5d34; }
.about p { font-size:1.1rem; line-height:1.8; }

/* Classes */
.classes { max-width:1000px; margin:100px auto; padding:0 20px; text-align:center; }
.classes h2 { font-family:'Lora', serif; font-size:2.5rem; margin-bottom:40px; color:#2a5d34; }
.class-cards { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
.card { background:rgba(255,255,255,0.25); backdrop-filter:blur(15px); padding:25px; border-radius:20px; width:250px; transition:transform 0.3s, box-shadow 0.3s; }
.card:hover { transform:translateY(-10px); box-shadow:0 10px 25px rgba(0,0,0,0.2); }
.card h3 { font-family:'Lora', serif; font-size:1.5rem; margin-bottom:10px; color:#2a5d34; }

/* Gallery */
.gallery { max-width:1000px; margin:100px auto; padding:0 20px; text-align:center; }
.gallery h2 { font-family:'Lora', serif; font-size:2.5rem; margin-bottom:40px; color:#2a5d34; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.gallery-item { overflow:hidden; border-radius:20px; cursor:pointer; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s, filter 0.5s; }
.gallery-item:hover img { transform:scale(1.1); filter:brightness(1.1); }

/* Contact */
.contact { max-width:800px; margin:100px auto 50px auto; padding:50px; background:rgba(255,255,255,0.25); backdrop-filter:blur(15px); border-radius:25px; box-shadow:0 15px 35px rgba(0,0,0,0.2); text-align:center; }
.contact h2 { font-family:'Lora', serif; font-size:2.5rem; margin-bottom:20px; color:#2a5d34; }
.contact form { display:flex; flex-direction:column; gap:20px; }
.contact input, .contact textarea { padding:15px; border-radius:12px; border:none; font-size:1rem; width:100%; }
.contact button { padding:15px 35px; border-radius:30px; border:none; background:linear-gradient(45deg,#8cc63f,#6aa32f); color:#fff; font-weight:600; cursor:pointer; transition:0.3s; }
.contact button:hover { transform:scale(1.05); }

/* Footer */
footer { text-align:center; padding:40px 20px; background:#2a5d34; color:#fff; font-size:0.95rem; }
footer a { color:#fff; text-decoration:underline; transition:0.3s; }
footer a:hover { color:#8cc63f; }

/* Animations */
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

/* Responsive */
@media(max-width:768px){ .class-cards { flex-direction:column; align-items:center; } }
@media(max-width:480px){ .hero-content h1 { font-size:2rem; } .hero-content p { font-size:1rem; } }