:root {
    --ather-green: #29b671;
    --dark: #111111;
    --light-gray: #f4f4f4;
}

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

body { overflow-x: hidden; color: #333; line-height: 1.6; }

.container { max-width: 1200px; margin: auto; padding: 0 20px; }

/* Responsive Navbar */
header { background: #fff; padding: 20px 0; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 1000; }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: 800; }
.logo span { color: var(--ather-green); }

nav a { text-decoration: none; color: #333; font-weight: 600; margin-left: 20px; }
.menu-icon { display: none; font-size: 28px; cursor: pointer; }

/* Hero Section */
.hero { padding: 80px 0; background: var(--light-gray); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hero-content h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 20px; }
.hero-content h1 span { color: var(--ather-green); }
.hero-image img { width: 100%; height: auto; border-radius: 10px; }
.badge { color: var(--ather-green); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* About & Stats */
.section-padding { padding: 80px 0; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.about-img img { width: 100%; border-radius: 15px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: center; }
.stats { background: var(--dark); color: #fff; padding: 60px 0; }
.stat-box h3 { font-size: 2.5rem; color: var(--ather-green); }

/* Buttons */
.btn-primary, .btn-large { 
    background: var(--ather-green); color: #fff; text-decoration: none; 
    padding: 15px 35px; border-radius: 5px; font-weight: 700; display: inline-block; 
}
.apply-btn-nav { background: var(--dark); color: #fff; padding: 10px 20px; border-radius: 5px; }

/* Footer */
footer { text-align: center; padding: 30px; background: #eee; }

/* --- RESPONSIVE QUERIES --- */

@media (max-width: 992px) {
    .hero-content h1 { font-size: 2.8rem; }
}

@media (max-width: 768px) {
    .menu-icon { display: block; }
    nav { 
        display: none; position: absolute; top: 100%; left: 0; width: 100%; 
        background: #fff; flex-direction: column; text-align: center; padding: 20px 0;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    }
    nav.active { display: flex; }
    nav a { margin: 15px 0; }

    .hero-grid, .about-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-content h1 { font-size: 2.5rem; }
    .stat-grid { grid-template-columns: 1fr; gap: 40px; }
}