:root {
      --green-dark:   #01452c;
      --green-mid:    #0a6641;
      --green-light:  #1a8a56;
      --gold:         #c9a84c;
      --gold-light:   #e8cb7a;
      --cream:        #f9f5ee;
      --text-dark:    #1a1a1a;
      --text-muted:   #5a5a5a;
      --white:        #ffffff;
      --radius:       12px;
      --transition:   0.3s ease;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Mulish', sans-serif;
      background: var(--cream);
      color: var(--text-dark);
      overflow-x: hidden;
    }

      /* ── SCROLL PROGRESS ── */
    #progress-bar {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, var(--gold), #fff176);
      z-index: 9999;
      transition: width 0.1s linear;
    }

    /* ── NAVBAR ── */
    .navbar {
      background: rgba(1,69,44,0.97) !important;
      backdrop-filter: blur(12px);
      padding: 0.6rem 0;
      transition: all 0.4s ease;
      border-bottom: 1px solid rgba(245,197,24,0.12);
    }

    .navbar.scrolled {
      padding: 0.35rem 0;
      box-shadow: 0 4px 24px rgba(0,0,0,0.25);
    }

    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
    }

    .brand-logo {
      width: 48px; height: 48px;
      border-radius: 50%;
      border: 2px solid rgba(245,197,24,0.5);
      background: white;
      padding: 4px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .brand-logo:hover {
      transform: rotate(-5deg) scale(1.08);
      box-shadow: 0 0 20px rgba(245,197,24,0.5);
    }

    .brand-text {
      display: flex; flex-direction: column;
    }

    .brand-text .name {
      color: white;
      font-family: 'DM Sans', sans-serif;
      font-weight: 600;
      font-size: 0.95rem;
      line-height: 1.2;
      letter-spacing: 0.01em;
    }

    .brand-text .tagline {
      color: var(--gold);
      font-size: 0.68rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .navbar-nav .nav-link {
      color: rgba(255,255,255,0.88) !important;
      font-weight: 500;
      font-size: 0.88rem;
      letter-spacing: 0.02em;
      padding: 0.5rem 0.75rem !important;
      position: relative;
      transition: color 0.3s ease;
    }

    .navbar-nav .nav-link::after {
      content: '';
      position: absolute;
      bottom: 4px; left: 50%;
      width: 0; height: 2px;
      background: var(--gold);
      border-radius: 2px;
      transform: translateX(-50%);
      transition: width 0.3s ease;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
      color: var(--gold) !important;
    }

    .navbar-nav .nav-link:hover::after { width: 60%; }

    .navbar-nav .nav-link.active::after { width: 60%; }

    .dropdown-menu {
      background: #012e1e;
      border: 1px solid rgba(245,197,24,0.15);
      border-radius: var(--radius-md);
      padding: 0.5rem;
      margin-top: 8px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    }

    .dropdown-item {
      color: rgba(255,255,255,0.8);
      font-size: 0.85rem;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      transition: all 0.25s ease;
    }

    .dropdown-item:hover {
      background: rgba(245,197,24,0.12);
      color: var(--gold);
      padding-left: 1.3rem;
    }

    .navbar-toggler {
      border: none;
      padding: 0;
    }

/* =====================================
   HERO
===================================== */

.hero{
    position:relative;
    min-height:90vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.hero-bg{
    position:absolute;
    inset:0;
}

.hero-bg::after{
    content:'';
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        rgba(4, 58, 38, 0.78),
        rgba(1,69,44,.88)
    );
}

.hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    max-width:850px;
    padding:0 20px;
}

.hero-eyebrow{
    color:var(--gold);
    font-size:.8rem;
    font-weight:700;
    letter-spacing:.25em;
    text-transform:uppercase;
    margin-bottom:1rem;
}

.hero-title{
    font-family:'Bebas Neue',cursive;
    font-size:clamp(4rem,10vw,7rem);
    line-height:.9;
    letter-spacing:.04em;
    color:var(--white);
}

.hero-sub{
    margin:1.5rem auto 0;
    max-width:650px;
    color:rgba(255,255,255,.82);
    line-height:1.9;
    font-size:1.05rem;
}

.scroll-hint{
    margin-top:3rem;
    color:var(--gold);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    animation:bounce 2s infinite;
}

@keyframes bounce{
    0%,20%,50%,80%,100%{
        transform:translateY(0);
    }
    40%{
        transform:translateY(8px);
    }
    60%{
        transform:translateY(4px);
    }
}

/* =====================================
   SECTION HEADINGS
===================================== */

.section-head{
    text-align:center;
    margin-bottom:4rem;
}

.section-head h2{
    font-family:'Bebas Neue',cursive;
    font-size:clamp(2.8rem,5vw,4rem);
    color:var(--green-dark);
    letter-spacing:.04em;
    line-height:1;
}

.section-head .underline{
    display:inline-block;
    width:60px;
    height:4px;
    background:var(--gold);
    margin-top:12px;
}

/* =====================================
   VISION / MISSION
===================================== */

.ce-vision-section{
    background:var(--white);
    padding:6rem 0;
}

.vision-mission-box{
    background:var(--cream);
    padding:2.5rem;
    border-top:4px solid var(--gold);
    transition:var(--transition);
    height:100%;
}

.vision-mission-box:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.vision-mission-box h3{
    font-family:'Bebas Neue',cursive;
    font-size:2rem;
    letter-spacing:.04em;
    color:var(--green-dark);
    margin-bottom:.75rem;
}

.vision-mission-box p{
    color:var(--text-muted);
    line-height:1.9;
    margin-bottom:0;
}

/* =====================================
   CORE VALUES
===================================== */

.core-values{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:1rem;
}

.value-item{
    background:var(--green-dark);
    color:white;
    text-align:center;
    padding:1.5rem;
    border-top:4px solid var(--gold);
    transition:var(--transition);
}

.value-item:hover{
    transform:translateY(-5px);
}

.value-item strong{
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* =====================================
   MEC GOALS IMAGE
===================================== */

.maturity-image{
    width:100%;
    border-radius:var(--radius);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

/* =====================================
   PROJECTS
===================================== */

.ce-projects-section{
    background:var(--cream);
    padding:6rem 0;
}

.projects-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:1.5rem;
}

.project-item{
    background:white;
    padding:2rem;
    border-left:4px solid var(--gold);
    transition:var(--transition);
    height:100%;
}

.project-item:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.project-item h5{
    font-family:'Bebas Neue',cursive;
    font-size:1.8rem;
    color:var(--green-dark);
    letter-spacing:.04em;
    margin-bottom:.75rem;
}

.project-item p{
    color:var(--text-muted);
    line-height:1.8;
    margin:0;
}

/* =====================================
   OFF-CAMPUS FACILITY
===================================== */

.facility-section{
    background:white;
    padding:6rem 0;
}

.facility-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--cream);
    overflow:hidden;
    border-radius:var(--radius);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.facility-image img{
    width:100%;
    height:100%;
    min-height:500px;
    object-fit:cover;
}

.facility-content{
    padding:3rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.facility-tag{
    display:inline-block;
    width:fit-content;
    background:rgba(201,168,76,.12);
    color:var(--green-dark);
    padding:.55rem 1rem;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:1rem;
}

.facility-content h3{
    font-family:'Bebas Neue',cursive;
    font-size:3rem;
    letter-spacing:.04em;
    color:var(--green-dark);
    margin-bottom:1rem;
}

.facility-content p{
    color:var(--text-muted);
    line-height:1.9;
    margin-bottom:1.5rem;
}

.facility-location{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--green-mid);
    font-weight:700;
}

/* =====================================
   REVEAL ANIMATION
===================================== */

.reveal{
    opacity:0;
    transform:translateY(32px);
    transition:opacity .7s ease, transform .7s ease;
}

.reveal.visible{
    opacity:1;
    transform:none;
}

.reveal-delay-1{
    transition-delay:.1s;
}

.reveal-delay-2{
    transition-delay:.2s;
}

.reveal-delay-3{
    transition-delay:.3s;
}

.reveal-delay-4{
    transition-delay:.4s;
}

/* =====================================
   MOBILE
===================================== */

@media (max-width:991px){

    .facility-card{
        grid-template-columns:1fr;
    }

    .facility-image img{
        min-height:320px;
    }

}

@media (max-width:768px){

    .hero{
        min-height:75vh;
    }

    .hero-title{
        font-size:4rem;
    }

    .hero-sub{
        font-size:.95rem;
    }

    .projects-list{
        grid-template-columns:1fr;
    }

    .facility-content{
        padding:2rem;
    }

    .facility-content h3{
        font-size:2.3rem;
    }

    .section-head h2{
        font-size:3rem;
    }

    .core-values{
        grid-template-columns:1fr;
    }

}
/* ── FOOTER ── */
    .footer {
      background: #011c13;
      color: white;
      padding: 5rem 0 0;
    }

    .footer-brand p {
      color: rgba(255,255,255,0.55);
      font-size: 0.85rem;
      line-height: 1.7;
      margin-top: 1rem;
    }

    .footer-heading {
      color: var(--gold);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 1.2rem;
    }

    .footer-links { list-style: none; padding: 0; margin: 0; }

    .footer-links li { margin-bottom: 0.5rem; }

    .footer-links a {
      color: rgba(255,255,255,0.55);
      text-decoration: none;
      font-size: 0.85rem;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .footer-links a::before {
      content: '';
      display: inline-block;
      width: 0; height: 1.5px;
      background: var(--gold);
      transition: width 0.3s ease;
      vertical-align: middle;
    }

    .footer-links a:hover { color: var(--gold); }
    .footer-links a:hover::before { width: 10px; }

    .footer-contact li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: rgba(255,255,255,0.55);
      font-size: 0.82rem;
      margin-bottom: 0.75rem;
      line-height: 1.5;
    }

    .footer-contact li i {
      color: var(--gold);
      margin-top: 2px;
      flex-shrink: 0;
    }

    .social-links { display: flex; gap: 10px; margin-top: 1.25rem; }

    .social-link {
      width: 38px; height: 38px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.65);
      font-size: 1rem;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .social-link:hover {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--green-deep);
      transform: translateY(-3px);
    }

    .accred-section {
      border-top: 1px solid rgba(255,255,255,0.07);
      padding: 2.5rem 0;
      margin-top: 4rem;
    }

    .accred-label {
      font-size: 0.65rem;
      color: rgba(255,255,255,0.3);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: 1.5rem;
      text-align: center;
    }

    .accred-logos {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2.5rem;
      flex-wrap: wrap;
    }

    .accred-logos img {
      max-height: 52px;
      max-width: 100px;
      width: auto;
      opacity: 0.45;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .accred-logos img:hover { opacity: 0.9; transform: scale(1.06); }

    .footer-bottom {
      background: #010f09;
      padding: 1.2rem 0;
      text-align: center;
      color: rgba(255,255,255,0.28);
      font-size: 0.78rem;
      border-top: 1px solid rgba(255,255,255,0.05);
    }

    /* ── ANIMATIONS ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .reveal.visible {
      opacity: 1;
      transform: none;
    }

    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ── DIVIDER ── */
    .section-divider {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 1.5rem 0;
    }

    .section-divider .line {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(1,69,44,0.2), transparent);
    }

    .section-divider .dot {
      width: 6px; height: 6px;
      background: var(--gold);
      border-radius: 50%;
    }

    /* ── MOBILE ── */
    @media (max-width: 768px) {
      .hero-stats .d-flex { overflow-x: auto; }
      .hero-title { font-size: 1.9rem; }
      .programs-grid { grid-template-columns: 1fr; }
      .program-card { height: 380px; }
      .why-grid { grid-template-columns: 1fr; }
    }