:root{
  --primary:#1e88e5; /* blue */
  --accent:#ff7043;  /* orange */
  --success:#43a047; /* green */
  --dark:#263238;
  --light:#fafafa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;color:#333;background:var(--light)}
a{color:var(--primary);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 16px}

/* Navbar */
.nav{position:sticky;top:0;z-index:1000;background:#fff;border-bottom:1px solid #eee;height: 150px;}
.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  flex-wrap: nowrap;
}
.brand{display:flex;align-items:center;gap:10px;white-space: nowrap;flex-shrink: 0;}
.brand img{height:56px;width:auto;object-fit: contain;}
.brand .title{font-weight:800;color:var(--dark)}
.nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0; white-space: nowrap;}
.nav li a{padding:10px 12px;border-radius:8px}
.nav li a:hover,.nav li a.active{background:rgba(30,136,229,.08)}
.menu-btn{display:none;border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 10px;flex-shrink: 0;}

/* Hero */
.hero{background:linear-gradient(135deg,#e3f2fd, #fff);padding:48px 0}
.hero .row{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center}
.hero h1{font-size:44px;margin:0 0 8px}
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(255,112,67,.1);color:var(--accent);font-weight:600;margin-bottom:10px}
.cta{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;border:none;border-radius:10px;padding:12px 16px;font-weight:700;cursor:pointer}
.btn.secondary{background:var(--success)}
.btn.outline{background:#fff;color:var(--primary);border:2px solid #1e88e5}

/* Sections */
.section{padding:56px 0}
.section h2{font-size:32px;margin:0 0 12px}
.section p.lead{color:#555}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:#fff;border:1px solid #eee;border-radius:12x;padding:18px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.card h3{margin:8px 0}
.icon{font-size:28px}

/* Carousel */
.carousel{position:relative;overflow:hidden;border-radius:16px}
.carousel img,.carousel video{width:100%;display:block}
.carousel .dots{position:absolute;bottom:10px;left:0;right:0;display:flex;gap:6px;justify-content:center}
.carousel .dot{width:10px;height:10px;border-radius:50%;background:#fff;border:1px solid #ccc;opacity:.7}
.carousel .dot.active{background:var(--primary);opacity:1}

/* FAQ */
.faq-item{border:1px solid #eee;background:#fff;border-radius:10px;margin:10px 0}
.faq-q{width:100%;text-align:left;padding:14px;background:#fff;border:none;border-radius:10px;font-weight:700}
.faq-a{display:none;padding:0 14px 14px;color:#555}

/* Forms */
form{display:grid;gap:12px}
.input{display:flex;flex-direction:column}
.input label{font-weight:600;margin-bottom:6px}
.input input,.input select,.input textarea{padding:12px;border:1px solid #ddd;border-radius:10px}

/* Gallery Grid */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-grid img{width:100%;height:260px;object-fit:cover;border-radius:12px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.06)}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr}.gallery-grid img{height:220px}}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(2,6,23,.86);display:none;align-items:center;justify-content:center;z-index:10000}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox .close{position:absolute;top:18px;right:18px;background:#fff;border:none;border-radius:10px;padding:10px 12px;font-weight:800;cursor:pointer}

/* WhatsApp FAB */
.whatsapp-fab{position:fixed;right:16px;bottom:16px;background:#25D366;color:#fff;border-radius:999px;padding:12px 14px;font-weight:800;display:flex;gap:8px;align-items:center;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:9999}
.whatsapp-fab:hover{filter:brightness(1.05)}
.whatsapp-fab .only-icon{display:none}
@media(max-width:600px){.whatsapp-fab span{display:none}.whatsapp-fab .only-icon{display:inline}}

/* Footer */
.footer{background:#fff;border-top:1px solid #eee;padding:24px 0;margin-top:40px}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.footer small{color:#666}

/* Responsive */
@media(max-width:900px){
  .hero .row{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .nav ul{display:none;position:absolute;top:64px;right:16px;background:#fff;border:1px solid #eee;border-radius:12px;padding:12px}
  .nav ul.open{display:flex;flex-direction:column;min-width:220px}
  .menu-btn{display:block}
  .footer .cols{grid-template-columns:1fr}
}
.program-grid {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.program-grid li {
  background: linear-gradient(135deg, #ffffff, #f3f7ff);
  border-radius: 16px;
  padding: 10px 16px;

  text-align: center;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;

  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.program-grid li:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.program-grid .icon {
  font-size: 40px;
}

.program-grid h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

/* Tablet */
@media (max-width: 1024px) {
  .program-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .program-grid {
    grid-template-columns: 1fr;
  }
}
/* ✅ One single grey box */
.school-title {
  display: flex;
  align-items: left;
  gap: 10px;
	
  background: #f1f3f6;        /* ✅ Single grey box */
  padding: 8px 14px;
  border-radius: 8px;
}

/* NEEV – brand blue, bold */
.neev {
  font-weight: 800;
  font-size: 40px;
  letter-spacing: 2px;
  color: #1e3a8a;             /* Brand blue */

  display: flex;
  align-items: center;
}

/* Tagline – bold, clean */
.tagline {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.25;
  color: #1f2937;
  wrap:wrap;

  display: flex;
  align-items: center;
}

/* 📱 Mobile‑friendly */
@media (max-width: 600px) {
  .school-title {
    flex-direction: column;
    text-align: center;
    gap: 4px;
  }

  .neev {
    font-size: 38px;
  }

  .tagline {
    font-size: 16px;
  }
}

/* Base nav link */
.nav ul li a {
  position: relative;
  text-decoration: none;
  font-weight: 600;
  padding: 6px 8px;
  color: #1f2937;
}

/* ✅ Active link highlight */
.nav ul li a.active {
  color: #1e3a8a; /* brand blue */
}

/* underline highlight */
.nav ul li a.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 3px;
  background-color: #1e3a8a;
  border-radius: 2px;
}