:root {
  --color-primary: #24406e;
  --color-accent: #f8b500;
  --color-bg: #f5f6fa;
  --color-card: #fff;
  --color-dark: #1d1d1d;
  --color-grey: #6a7791;
  --color-border: #e2e8ef;

  --radius: 1.5em;
  --shadow: 0 4px 20px rgba(36, 64, 110, 0.07);

  --font-main: 'Inter', sans-serif;
  --font-title: 'Playfair Display', serif;
}

/* Reset and base styles */
* {margin:0; padding:0; box-sizing:border-box;}
html {scroll-behavior: smooth;}
body {
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-dark);
  min-height: 100vh;
  font-size: 18px;
}

/* Container */
.container {max-width: 1200px; margin:auto; padding: 0 2em;}
h1,h2,h3,h4 {font-family:var(--font-title); letter-spacing:-0.5px;}
h1 {font-size: 2.6em; font-weight: 700;}
h2 {font-size: 2em; margin-bottom: .3em;}
section {padding:4em 0;}

/* Navbar */
.navbar {
  background: rgba(255,255,255,0.97);
  box-shadow: var(--shadow);
  position:sticky;
  top:0; left:0; width:100%; z-index:10;
  backdrop-filter: blur(12px);
  transition: background .25s;
}
.nav-content {
  display: flex; align-items:center; justify-content:space-between; height:70px;
}
.logo {
  width: 70px;
  height: 70px;
}

.nav-list {list-style:none; display:flex; gap:2.2em;}
.nav-list a {color: var(--color-primary); font-weight:600; text-decoration:none;transition:.18s;}
.nav-list a:hover,.nav-list a:focus {color: var(--color-accent);}
.nav-toggle {display:none; background:none; border:none; font-size:2em; cursor:pointer;}
@media (max-width: 900px){
  .nav-list {display:none;}
  .nav-list.open {display:flex; flex-direction:column; background:var(--color-card); 
      position:absolute; right:2em; top:70px; padding:1.5em 2.5em; box-shadow:var(--shadow);}
  .nav-toggle {display:block;}
}

/* Hero Banner */
.hero {position:relative; background:linear-gradient(115deg,var(--color-primary) 0%,#3e5a8c 80%, var(--color-bg) 100%);}
.hero-grid {display:grid; grid-template-columns:1.2fr 1fr; align-items:center; min-height:480px;}
.hero-text {z-index:2; color:#fff;}
.hero-text h1 span {font-size:.8em; color:var(--color-accent);}
.hero-text p {color:#eef; margin:1.1em 0;}
.hero-img-placeholder {height:300px; background:var(--color-card); border-radius:var(--radius); box-shadow:var(--shadow);}
.hero-bg-decor {
  position: absolute; right:5vw; bottom:-50px; width:180px; height:180px; background:
    radial-gradient(circle at 60% 25%, var(--color-accent) 40%,transparent 80%);
  opacity:.20; border-radius:60%;
}
.btn {display:inline-block; font:inherit; border-radius:32px; background:var(--color-accent); color:#fff;padding:.8em 2.3em; font-weight:700; border:0; text-decoration:none; transition: background .18s;}
.btn:hover,.btn:focus {background:#dd9600; color:#fff;}
@media (max-width: 900px){
  .hero-grid {grid-template-columns:1fr; gap:2em;}
}

/* "We Value" */
.values h2 {text-align:center;}
.values-cards {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2em; margin-top:2em;}
.value-card {background:var(--color-card); border-radius:var(--radius); box-shadow:var(--shadow); text-align:center; padding:2.2em 1.5em; transition:transform .18s;}
.value-card span {font-size:2.3em;}
.value-card:hover {transform:translateY(-8px) scale(1.04); box-shadow:0 4px 36px rgba(36,64,110,0.12);}
.value-card h3 {margin-top:.5em; color:var(--color-primary);}
.value-card p {color:var(--color-grey);}

/* Mission */
.mission {background:#fff;}
.mission p {max-width:700px; margin:auto; text-align:center; font-size:1.22em; color:var(--color-grey);}
.mission .highlight {color:var(--color-accent); font-weight:bold;}

/* Academics */
.academics-cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:2em; margin-top:2em;}
.academic-card {background:var(--color-card); border-radius:var(--radius); box-shadow:var(--shadow); padding:2em 1.2em; text-align:center; transition:.18s;}
.academic-card:hover {background:var(--color-primary); color:#fff;}
.academic-card:hover h3 {color:var(--color-accent);}
.academic-card h3{margin-bottom:.8em; color:var(--color-primary); transition:.18s;}
@media (max-width: 700px){.academics-cards, .values-cards {grid-template-columns:1fr;}}

/* Admissions */
.admissions {background:linear-gradient(120deg, var(--color-primary) 60%, #fff 100%);}
.admissions-flex {display:flex; justify-content:space-between; align-items:stretch; gap:3em; flex-wrap:wrap;}
.admissions-info {color:#fff;flex:1;padding:2em;}
.admissions-form {background:var(--color-card); padding:2em 1.5em; border-radius:var(--radius); box-shadow:var(--shadow); flex:1; min-width:320px;}
.admissions-form h3 {margin-bottom:1em;}
.admissions-form input,.admissions-form select,.admissions-form textarea {
  width:100%; padding:.8em 1em; margin-bottom:.8em; border-radius:8px; border:1px solid var(--color-border); background:#f8fafc; font-size:1em;
}
.admissions-form input:focus,.admissions-form textarea:focus,.admissions-form select:focus {
  outline:2px solid var(--color-accent); border-color:var(--color-accent);}
.admissions-form button {margin-top:.5em;}
.form-success {color:var(--color-primary); font-weight:bold; padding-top:.5em;}

/* Stats */
.stats {background:var(--color-bg);}
.stats-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:2em; margin-top:1em; justify-items:center;}
.stat-card {background:var(--color-card); border-radius:var(--radius); padding:2em; box-shadow:var(--shadow); text-align:center;}
.stat-number {font-size:2.6em; color:var(--color-accent); font-weight:800;}

/* Footer */
.footer {background:var(--color-primary); color:#fff; padding:2.5em 0 1em;}
.footer-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2em;}
.footer a {color:var(--color-accent); text-decoration:none;}
.footer-bottom {text-align:center; color:#b6c1da; margin-top:1.6em;}
@media (max-width:700px){.footer-grid{grid-template-columns:1fr;}.admissions-flex{flex-direction:column;}}
/* Section reveal animation */
.reveal {opacity:0; transform:translateY(60px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.visible {opacity:1; transform:translateY(0);}