:root {
  --brand:#0a6cf1;         /* Primary brand color */
  --brand-ink:#0a2a63;     /* Darker shade for headings */
  --accent:#19c37d;        /* Accent color */
  --bg:#f7f9fc;
  --ink:#101828;
  --muted:#667085;
  --card:#ffffff;
  --ring: 0 0 0 4px rgba(10,108,241,.15);
  --radius:14px;
  --shadow:0 10px 30px rgba(16,24,40,.08);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:50;
  background:#fff; box-shadow:0 1px 0 rgba(16,24,40,.06);
}
.container{width:min(1100px, 92%); margin-inline:auto}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{width:44px; height:44px; object-fit:contain; border-radius:8px; background:#eef3ff}
.brand .name{font-weight:700; color:var(--brand-ink); letter-spacing:.3px}
nav ul{display:flex; gap:20px; list-style:none; margin:0; padding:0}
nav a{color:var(--ink); text-decoration:none; font-weight:600}
nav a:hover{color:var(--brand)}
.menu-btn{display:none; background:none; border:0; font-size:28px; line-height:1; cursor:pointer}

/* Hero */
.hero{
  display:grid;
  gap:28px;
  align-items:center;
  grid-template-columns: 1.1fr .9fr;
  padding:40px 24px;
  position:relative;
  overflow:hidden;
  min-height:560px;
}
.hero-carousel{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-carousel .carousel-inner,
.hero-carousel .carousel-item,
.hero-carousel img{
  height:100%;
}
.hero-carousel img{
  object-fit:cover;
}
.hero-carousel::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(10,24,50,.56);
  z-index:1;
  pointer-events:none;
}
.hero-content{position:relative; z-index:2; max-width:640px}
.badge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.2); color:#fff; padding:6px 10px; border-radius:999px; font-weight:600; font-size:13px}
.hero h1{margin:10px 0 8px; font-size:clamp(28px, 4.6vw, 44px); line-height:1.15; color:#fff}
.hero p{color:#f1f5ff; font-size:clamp(15px, 2.2vw, 18px)}
.cta-row{display:flex; gap:12px; margin-top:14px; flex-wrap:wrap}

/* Buttons */
.btn{
  appearance:none; border:0; cursor:pointer; text-decoration:none;
  padding:12px 18px; border-radius:10px; font-weight:700; display:inline-flex; align-items:center; gap:10px;
}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow)}
.btn-outline{background:rgba(255,255,255,.92); color:var(--brand-ink); border:1px solid #e3e8ef}

/* Cards & Sections */
section{padding:42px 0}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px}
.section-head h2{margin:0; color:var(--brand-ink); font-size:28px}
.kicker{color:var(--muted); font-size:14px}

.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.card{
  background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
  border:1px solid #eef2f6;
}
.card h3{margin:0 0 8px; font-size:18px; color:var(--brand-ink)}
.list{margin:0; padding-left:18px}
.pill{display:inline-flex; padding:6px 10px; background:#f1f5f9; border-radius:999px; margin:6px 6px 0 0; font-size:13px}

/* Hero Card */
.hero-card{position:relative; z-index:2;
  background:linear-gradient(180deg,#ffffff 0%, #f1f6ff 100%);
  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.fact{background:var(--card); border-radius:12px; padding:14px; border:1px solid #eef2f6}
.fact strong{display:block; font-size:22px; color:var(--brand-ink)}
.fact span{color:var(--muted); font-size:13px}

/* Achievements */
.achievements{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.ach{background:#fff; border:1px dashed #d7e3ff; border-radius:12px; padding:14px; text-align:center}
.ach strong{display:block; color:var(--brand-ink); font-size:18px}

/* Admission steps */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.step{background:#fff; border:1px solid #e9eef5; border-radius:12px; padding:16px}
.step .num{width:32px; height:32px; border-radius:999px; display:inline-grid; place-items:center; background:#eaf2ff; color:var(--brand-ink); font-weight:700; margin-bottom:8px}

/* Contact */
.contact-wrap{display:grid; grid-template-columns: 1.1fr .9fr; gap:16px}
form input, form textarea{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #e3e8ef; outline:none; font:inherit; background:#fff;
}
form input:focus, form textarea:focus{box-shadow:var(--ring); border-color:#c9ddff}
form textarea{min-height:130px; resize:vertical}
.help{color:var(--muted); font-size:13px}

/* Result Portal (from first CSS) */
.result-form{display:grid; gap:14px; max-width:400px; margin-inline:auto}
.result-form label{font-size:14px; color:var(--muted); font-weight:600}
.result-form input,.result-form select{width:100%; padding:12px 14px; border-radius:10px; border:1px solid #e3e8ef; background:#fff; font:inherit}
.result-form input:focus,.result-form select:focus{box-shadow:var(--ring); border-color:#c9ddff}
.result-card{margin-top:20px; padding:20px; border:1px solid #e3e8ef; border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); display:none}
.result-card h3{margin:0 0 12px; color:var(--brand-ink)}
.result-table{width:100%; border-collapse:collapse}
.result-table th,.result-table td{padding:8px; border-bottom:1px solid #eaeef3; text-align:left; font-size:14px}
.result-actions{margin-top:14px; text-align:right}
.print-btn{background:var(--accent); color:#fff; padding:8px 14px; border-radius:8px; font-weight:600; cursor:pointer; border:0}
.print-btn:hover{opacity:.9}

/* Additional Sections */
.additional-info {
    margin: 20px 0;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.academic-performance, .past-performance {
    margin: 20px 0;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    background-color: var(--brand);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: var(--accent);
}

/* Popup Modal */
.popup-overlay{
  position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:1000;
  display:flex; align-items:center; justify-content:center;
}
.popup-content{
  background:#fff; border-radius:var(--radius); padding:30px; max-width:450px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
.popup-content h3{margin:0 0 15px; color:var(--brand-ink); font-size:22px}
.popup-content p{margin:12px 0; color:var(--ink); font-size:15px}
.popup-content a{color:var(--brand); text-decoration:none; font-weight:600}
.popup-close{
  position:absolute; top:15px; right:15px; font-size:28px; cursor:pointer; color:var(--muted);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.popup-close:hover{background:#f0f0f0}

/* Results Grid */
.results-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}

/* Login Card */
.student-login-form{display:grid; gap:12px}
.student-login-form label{font-size:14px; color:var(--muted); font-weight:600}
.student-login-form input{width:100%; padding:12px 14px; border-radius:10px; border:1px solid #e3e8ef; background:#fff; font:inherit}
.student-login-form input:focus{box-shadow:var(--ring); border-color:#c9ddff}

/* Footer */
footer{padding:28px 0 40px; color:#475467}
.foot{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between}
.small{font-size:13px}

/* Responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; padding:24px 16px; min-height:500px}
  .contact-wrap{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .results-grid{grid-template-columns:1fr}
  .achievements{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  nav ul{display:none; position:absolute; top:60px; right:4%; background:#fff; padding:14px; border-radius:12px; box-shadow:var(--shadow); border:1px solid #eef2f6}
  nav ul.show{display:flex; flex-direction:column}
  .menu-btn{display:inline-block}
}