/* ===== RESET & BASE ===== */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #121212;
  color: #f0f0f0;
  line-height: 1.6;
  padding-top: 120px;
}
a {
  color: #58a6ff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.logo-img {
  max-width: 120px;
  max-height: 120px;
  height: auto;
  width: auto;
}

/* ===== NAVBAR ===== */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #1e1e1e;
  display: flex;
  align-items: center;
  padding: 1rem 2rem;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.8);
}
.logo-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.school-name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #58a6ff;
  text-transform: uppercase;
}
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.nav-links li a {
  color: #f0f0f0;
  font-size: 1rem;
  font-weight: 600;
  transition: color 0.3s ease;
}
.nav-links li a:hover {
  color: #58a6ff;
}

/* ===== HAMBURGER ===== */
.hamburger {
  background-color: #58a6ff;
  color: white;
  border: none;
  border-radius: 50px; /* pill */
  padding: 0.4rem 0.9rem;
  font-size: 1.5rem;
  cursor: pointer;
  display: none; /* hidden desktop */
  transition: background-color 0.2s ease;
  margin-left: auto;
}
.hamburger:hover {
  background-color: #377bb5;
}

/* ===== HERO ===== */
.hero {
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  padding: 5rem 2rem;
  text-align: center;
  width: 100%;
}
.hero h1 {
  font-size: clamp(1.8rem, 5vw, 3rem);
  margin-bottom: 0.5rem;
  color: #58a6ff;
  letter-spacing: 3px;
}
.hero p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  max-width: 700px;
  margin: 0 auto;
  font-weight: 500;
  color: #cfd8dc;
}

/* ===== SECTIONS ===== */
section {
  padding: 4rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}
section h2 {
  font-size: 2rem;
  color: #58a6ff;
  margin-bottom: 1rem;
  border-bottom: 2px solid #58a6ff;
  padding-bottom: 0.5rem;
}
section p {
  font-size: 1.125rem;
  margin-bottom: 1.5rem;
  color: #e0e0e0;
}

/* ===== FOOTER ===== */
footer {
  background-color: #1e1e1e;
  text-align: center;
  padding: 2rem 1rem;
  font-size: 0.9rem;
  color: #777;
}

/* ===== MOBILE STYLES ===== */
@media (max-width: 768px) {
  .navbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .hamburger {
    display: inline-block;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: #1e1e1e;
    margin-top: 0.5rem;
  }
  
  .nav-links li a {
    display: block;
    padding: 1rem;
    border-top: 1px solid #333;
  }
  section {
    padding: 2rem 1rem;
  }
}

 
    /* ===========================
       Variables & Reset
    ============================ */
    :root{
      --bg: #121212;
      --card: #1e1e1e;
      --text: #f0f0f0;
      --accent: #58a6ff;
      --accent-hover: #377bb5;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
      padding-top:96px; /* space for fixed header */
    }
    a{color:var(--accent);text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;height:auto;display:block}

    /* ===========================
       Navbar
    ============================ */
    .navbar{
      position:fixed;
      top:0;
      left:0;
      right:0;
      height:auto;
      background:var(--card);
      display:flex;
      align-items:center;
      gap:1rem;
      padding:1rem 1.25rem;
      z-index:1200;
      box-shadow:0 2px 8px rgba(0,0,0,.6);
    }

    .logo-container{display:flex;align-items:center;gap:.6rem}
    .logo-img{width:64px;height:auto;display:block}
    .school-name{font-weight:700;color:var(--accent);text-transform:uppercase;font-size:1.125rem}

    /* nav-links default uses max-height method (mobile-first) */
    .nav-links{
      list-style:none;
      width:100%;
      max-height:0;               /* collapsed by default on mobile */
      overflow:hidden;
      transition:max-height .36s ease, opacity .28s ease;
      opacity:0;
      background:var(--card);
      display:block;              /* keep block so slide can animate */
      margin-top:.5rem;
      border-radius:6px;
    }

    .nav-links.show{
      max-height:600px; /* large enough for links */
      opacity:1;
    }

    .nav-links li a{
      display:block;
      padding:.9rem 1rem;
      border-top:1px solid rgba(255,255,255,.04);
      color:var(--text);
      font-weight:600;
    }

    /* hamburger style */
    .hamburger{
      margin-left:auto;
      background:var(--accent);
      color:#fff;
      border:none;
      padding:.45rem .9rem;
      font-size:1.2rem;
      line-height:1;
      border-radius:999px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
    }
    .hamburger:focus{outline:3px solid rgba(88,166,255,.22)}

    /* desktop layout */
    @media (min-width: 769px){
      .navbar{
        padding:1rem 2.25rem;
      }
      .hamburger{display:none}
      .nav-links{
        display:flex !important; /* show horizontally on desktop */
        max-height:none;
        opacity:1;
        margin-top:0;
        align-items:center;
        gap:1.5rem;
        background:transparent;
        width:auto;
      }
      .nav-links li a{
        padding:0;
        border-top:none;
      }
    }

    /* small-screen tweaks */
    @media (max-width:480px){
      .school-name{font-size:.95rem}
      .logo-img{width:48px}
    }

    /* simple page content for demo */
    main{max-width:980px;margin:2rem auto;padding:0 1rem}
    .hero{padding:3rem 1rem;border-radius:8px;background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);color:#dbefff}
  
  [id] {
  scroll-margin-top: 100px;
}