/* RESET */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Montserrat',sans-serif; }
body { background:#eef2ff; color:#333; }

/* NAVBAR */
header { position:fixed; width:100%; top:0; backdrop-filter: blur(10px); background: rgba(255,255,255,0.7); z-index:100; border-bottom:1px solid rgba(0,0,0,0.05);}
.navbar { display:flex; justify-content:space-between; align-items:center; padding:0.8rem 5%; }
.logo img { width:70px; height:70px; border-radius:50%; transition:0.4s; }
.logo img:hover { transform:scale(1.1) rotate(-5deg);}
.nav-links { display:flex; list-style:none; }
.nav-links li { margin-left:1.5rem; }
.nav-links a { text-decoration:none; color:#1a1aff; font-weight:600; position:relative; }
.nav-links a::after { content:""; position:absolute; width:0%; height:2px; background:#ff6600; left:0; bottom:-5px; transition:0.3s;}
.nav-links a:hover::after { width:100%; }
.btn { background: linear-gradient(45deg,#1a1aff,#4d94ff); color:white !important; padding:0.5rem 1.2rem; border-radius:30px; transition:0.3s; }
.btn:hover { transform: translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.2); }
.close-btn { display:none; position:fixed; top:1rem; right:1rem; font-size:2rem; cursor:pointer; z-index:1100; color:white; background:#ff6600; border-radius:50%; padding:0.2rem 0.6rem; transition:all 0.3s ease; }
.close-btn:hover { background:#ff9933; }
.burger { display:none; flex-direction:column; gap:5px; cursor:pointer; }
.burger div { width:22px; height:2px; background:#1a1aff; }

/* HERO */
.about-hero { padding:9rem 5% 5rem; background: linear-gradient(135deg,#4d94ff,#1a1aff); color:white; }
.about-hero-wrapper { display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap; }
.about-text { max-width:600px; animation:fadeInUp 1s ease forwards; }
.about-text h1 { font-size:3rem; margin-bottom:1rem; color:#ffd633;}
.about-text p { opacity:0.95; line-height:1.6; font-size:1.1rem; animation:fadeInUp 1.2s ease forwards; }
.about-image img { width:450px; border-radius:20px; animation:float 6s ease-in-out infinite; box-shadow:0 20px 40px rgba(0,0,0,0.3); }

/* Mission & Vision */
.mission-vision { display:flex; justify-content:space-between; padding:5rem; background:#d0e0ff; flex-wrap:wrap; border-radius:20px; gap:2rem; }
.text-left { flex:1; min-width:300px; animation:fadeInLeft 1s ease forwards; }
.text-left h2 { color:#1a1aff; font-size:2rem; margin-bottom:1rem; }
.text-left p { margin-bottom:1.5rem; font-size:1.1rem; line-height:1.6; }
.illustration-right img { max-width:400px; border-radius:15px; animation:float 6s ease-in-out infinite; }

/* Principles */
.principles { padding:5rem; text-align:left; background: linear-gradient(135deg,#a0c4ff,#4d94ff); color:white; border-radius:20px; }
.principles h2 { font-size:2.2rem; margin-bottom:2rem; text-align:center; }
.principles p { font-size:1.1rem; margin:0.8rem 0; transition:transform 0.3s, color 0.3s; }
.principles p:hover { transform:scale(1.03); color:#ffcc00; }
.highlight { font-weight:700; color:#ffd633; }

/* Achievements */
.achievements { background: linear-gradient(135deg,#4d94ff,#1a1aff); padding:5rem 5%; text-align:center; color:white; border-radius:20px; }
.achievements h2 { font-size:2.5rem; margin-bottom:3rem; }
.stats-row { display:flex; justify-content:space-around; flex-wrap:wrap; gap:2rem; }
.stat h3 { font-size:3rem; color:#ffd633; animation:pulse 2s infinite; }
.stat p { font-weight:600; font-size:1.1rem; }

/* Testimonials */
.testimonials { background: linear-gradient(135deg,#a0e0ff,#00bfff); padding:5rem; border-radius:20px; text-align:center; color:white; }
.testimonials h2 { font-size:2.5rem; margin-bottom:3rem; }
.testimonial-cards { display:flex; flex-wrap:wrap; justify-content:center; gap:2rem; }
.testimonial-card { background: rgba(255,255,255,0.2); backdrop-filter: blur(8px); padding:2rem; border-radius:15px; width:280px; transition:0.4s; }
.testimonial-card p { font-size:1.05rem; line-height:1.5; margin-bottom:1rem; }
.testimonial-card h4 { font-weight:600; text-align:right; color:#ffd633; }
.testimonial-card:hover { transform:scale(1.05); box-shadow:0 20px 40px rgba(0,0,0,0.15); }

/* FOOTER */
footer { text-align:center; padding:1.5rem; background:#1a1aff; color:white; border-radius:0 0 20px 20px; }

/* MEDIA QUERIES */
@media(max-width:768px){
    .burger{display:flex;}
    .nav-links { display:flex; position:fixed; top:0; right:-200px; height:100vh; width:180px; background:#1a1aff; flex-direction:column; padding:5rem 1rem; gap:2rem; transition:right 0.3s ease-in-out; z-index:999; }
    .nav-links.nav-active { right:0; }
    .nav-links li a { color:white; font-size:1.1rem; text-align:left; }
    .nav-links.nav-active li a { padding-left:0.5rem; }
    .burger, .close-btn { z-index:1000; }
    .about-hero-wrapper { flex-direction:column; text-align:center; }
    .about-image img { width:90%; }
}

/* ANIMATIONS */
@keyframes fadeInUp { 0%{opacity:0; transform:translateY(30px);} 100%{opacity:1; transform:translateY(0);} }
@keyframes fadeInLeft { 0%{opacity:0; transform:translateX(-30px);} 100%{opacity:1; transform:translateX(0);} }
@keyframes float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-15px);} }
@keyframes pulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.1);} }