:root{
      --navy:#003087;
      --gold:#FFC107;
      --white:#FFFFFF;
      --text:#0b1220;
    }
    html { scroll-behavior: smooth; }
    body{
      font-family: "Montserrat", Arial, sans-serif;
      color: var(--text);
      background-color: #f7f9fc;
      /* padding-top: 72px; space for fixed navbar */
    }

    /* Navbar */
    .navbar{
      background: var(--navy);
    }
    .navbar .nav-link, .navbar .navbar-brand{
      color: var(--white) !important;
      font-weight: 600;
    }
    .navbar .nav-link{
      position: relative;
    }
    .navbar .nav-link:hover::after,
    .navbar .nav-link:focus::after,
    .navbar .nav-link.active::after{
      content: "";
      position: absolute;
      left: 0; bottom: -4px;
      width: 100%; height: 3px;
      background: var(--gold);
      border-radius: 2px;
    }
    .btn-gold{
      background: var(--gold);
      border: none;
      color: #1d1d1d;
      font-weight: 700;
    }
    .btn-gold:hover{ filter: brightness(0.95); }

    /* Hero / Swiper */
    .hero{
      background: #000;
      color: var(--white);
    }
    .swiper-slide{
      /* height: 68vh; */
      /* min-height: 420px; */
      max-height: 760px;
      position: relative;
    }
    .swiper-slide img{
      object-fit: cover;
      width: 100%;
      height: auto;
      filter: brightness(1.0) contrast(1.05);
    }
    .hero-caption{
      position: absolute;
      left: 50%;
      bottom: 12%;
      transform: translateX(-50%);
      text-align: center;
      color: var(--white);
      text-shadow: 0 10px 30px rgba(0,0,0,.55);
    }
    .hero-caption h1{
      font-weight: 800;
      letter-spacing: .5px;
    }

    /* Section headings */
    .section-title{
      position: relative;
      font-weight: 800;
      color: var(--navy);
    }
    .section-title::after{
      content: "";
      display: block;
      margin-top: .5rem;
      width: 72px; height: 6px;
      background: var(--gold);
      border-radius: 999px;
    }

    /* Cards + images */
    .card{
      border: 0;
      box-shadow: 0 10px 30px rgba(0, 21, 64, .08);
      border-radius: 1rem;
    }
    .rounded-2xl{ border-radius: 1.25rem !important; }

    /* Advisor */
    .advisor-img{
      width: 300px; height: 300px;
      object-fit: cover;
      border-radius: 1rem;
      box-shadow: 0 10px 30px rgba(0,0,0,.15);
    }

    /* Gallery */
    .gallery-img{
      width: 100%;
      height: 240px;
      object-fit: cover;
      border-radius: .75rem;
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .gallery-img:hover{
      transform: translateY(-4px);
      box-shadow: 0 16px 40px rgba(0,0,0,.15);
    }
    .gallery-hidden {
      display: none;
    }

    /* Achievements timeline */
    .timeline{
      position: relative;
      padding-left: 1.5rem;
    }
    .timeline::before{
      content:"";
      position: absolute;
      left: 9px; top: 0; bottom: 0;
      width: 3px; background: #d6dbef;
      border-radius: 3px;
    }
    .tl-item{
      position: relative;
      margin-bottom: 1.25rem;
      padding-left: 1rem;
    }
    .tl-item::before{
      content:"";
      position: absolute;
      left: -2px; top: .3rem;
      width: 18px; height: 18px;
      background: var(--gold);
      border: 3px solid var(--white);
      border-radius: 50%;
      box-shadow: 0 0 0 3px #d6dbef;
    }

    /* Footer */
    footer{
      background: var(--navy);
      color: var(--white);
    }
    footer a{ color: var(--gold); text-decoration: none; }
    footer a:hover{ text-decoration: underline; }

    /* Focus styles for accessibility */
    :focus-visible{
      outline: 3px solid var(--gold);
      outline-offset: 2px;
      border-radius: 6px;
    }

    /* Admin panel */
    .admin-badge{
      font-size: .8rem;
      color: #0b1220;
      background: var(--gold);
      border-radius: 999px;
      padding: .15rem .6rem;
      font-weight: 700;
    }
    .form-hint{ font-size: .85rem; color: #6b7280; }
    .img-preview{ max-height: 140px; border-radius: .5rem; }

    /* Utility */
    .bg-navy{ background: var(--navy); }
    .text-navy{ color: var(--navy); }
    .minh-50{ min-height: 50vh; }

    #adminLogin {
      display: none;
    }