:root{
  --primary:#983024;           /* maroon */
  --accent:#f07d16;            /* orange */
  --ink:rgb(0,43,62);          /* deep blue */
  --bg-soft:#fff7f0;           /* soft orange tint bg */
  --muted:#f5f5f7;
}

/* Base */
body{ color:var(--ink); }

/* Topbar */
.topbar{
  background:var(--ink); color:#fff; font-size:.95rem;
}
.topbar a{ color:#fff; text-decoration:none; }

/* Logo block */
.logo-wrap{ padding:1.25rem 0; }
.brand-title{ color:var(--ink); font-weight:700; }
.brand-sub{ color:#555; font-size:.95rem; }

/* Centered navbar under logo */
.navbar{
  background:linear-gradient(90deg, var(--primary), var(--accent));
}
.navbar .nav-link{
  color:#fff; font-weight:600; padding:.85rem 1rem;
}
.navbar .nav-link:hover{ opacity:.9; }

/* Slider / Hero */
.hero{
  position:relative;
  min-height:58vh;
  background:#0b2a3c;
}
.hero .carousel-item img{
  height:58vh; object-fit:cover; filter:brightness(.7);
}
.hero .overlay-text{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; color:#fff;
  padding:1rem;
}

/* Overlay card */
.overlay-card{
  background:rgba(152,48,36,.85);
  border:2px solid rgba(240,125,22,.6);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  border-radius:1rem;
  padding:1.25rem 1.25rem 1rem;
  max-width:980px; margin:0 auto;
}
.overlay-card h1{ font-weight:800; letter-spacing:.3px; }
.badge-pill{
  background:var(--accent); color:#fff; border-radius:999px; padding:.35rem .8rem; font-weight:700;
  display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem;
}

/* Section headers */
.section-kicker{ color:var(--accent); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.9rem; }
.section-title{ font-weight:800; color:var(--primary); }
.leadish{ font-size:1.05rem; }

/* Stats */
.stats-card{
  background:#fff; border:1px solid #eee; border-radius:1rem; padding:1.25rem; height:100%;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.stats-card .icon-wrap{
  width:46px; height:46px; display:grid; place-items:center; border-radius:12px; background:var(--bg-soft); color:var(--primary);
}

/* Lists */
.feature-list li, .method-list li{
  margin:.6rem 0; display:flex; gap:.6rem; align-items:flex-start;
}
.feature-list i, .method-list i{ color:var(--accent); margin-top:.2rem; }

/* Highlight / CTA */
.highlight{
  background:linear-gradient(180deg,#fff, var(--muted));
  border-radius:1rem; padding:1.25rem;
}
.cta-strip{
  background:linear-gradient(90deg,var(--ink), var(--primary));
  color:#fff; border-radius:1rem; padding:1.25rem;
}

/* Quick links */
.quick-links a{
  text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid #eee; border-radius:.75rem; padding:.65rem .9rem; display:flex; align-items:center; gap:.6rem;
}
.quick-links a:hover{ border-color:var(--accent); transform:translateY(-2px); transition:.2s; }

/* Footer */
footer{
  background:#0d2d3f; color:#d6e6ef;
}
footer a{ color:#fff; text-decoration:none; }

.marker{ height:4px; width:60px; background:var(--accent); border-radius:999px; margin:.4rem 0 1rem; }

/* Buttons */
.btn-outline-accent{
  color:var(--accent); border-color:var(--accent);
}
.btn-outline-accent:hover{ background:var(--accent); color:#fff; }

/* Utilities */
.bg-soft{ background:var(--bg-soft); }
.rounded-2xl{ border-radius:1.25rem; }

/* === About: people cards (square photos) === */
.about-people-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.person-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
}
.person-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,.16);
}
.person-photo{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1; /* square */
  background:#eef1f4;
}
.person-photo img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.person-body{
  padding:.85rem 1rem 1rem;
  text-align:center;
}
.person-name{
  font-weight:800;
  color:var(--ink);
  margin-bottom:.15rem;
}
.person-role{
  color:#66707a;
  font-size:.95rem;
}
@media (max-width: 991.98px){
  .about-people-grid{ grid-template-columns: 1fr; }
}

/* Make columns equal height and keep photo from growing too tall */
#principal .row{ align-items: stretch; }   /* equal heights */
.principal-card{ height: 100%; }

/* (kept from your header to avoid changing look) */
.principal-card .principal-photo img{
  position:relative;
  height: 70%;
}

/* === Courses cards === */
.course-card{
  background:#fff; border:1px solid #eee; border-radius:1rem; overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease; height:100%;
}
.course-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.14); }
.course-media{ position:relative; aspect-ratio:16/9; background:#f3f4f6; }
.course-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.field-badge{
  position:absolute; left:12px; top:12px; z-index:2;
  background:var(--accent); color:#fff; border-radius:999px;
  padding:.35rem .7rem; font-weight:700; font-size:.8rem; letter-spacing:.02em;
}
.course-body{ padding:1rem 1rem 1.1rem; }
.course-code{ font-weight:800; color:var(--ink); font-size:1.35rem; margin:0; }
.course-name{ color:#6b7280; margin:.15rem 0 .75rem; }

/* solid accent button */
.btn-accent{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.btn-accent:hover{ filter:brightness(1.05); color:#fff; }

/* === Salient Features: tile grid === */
.sf-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.sf-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:1rem;
  padding:1.25rem 1.25rem 1rem;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  height:100%;
}
.sf-card:hover{
  transform: translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.14);
  border-color: rgba(240,125,22,.45);
}
.sf-icon{
  width:56px; height:56px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(180deg, var(--bg-soft), #fff);
  color:var(--accent);
  box-shadow: inset 0 0 0 2px rgba(240,125,22,.25);
  margin-bottom:.6rem;
  font-size:1.25rem;
}
.sf-title{
  margin:0 0 .25rem; font-weight:800; color:var(--primary);
}
.sf-desc{
  margin:0; color:#5d6670; line-height:1.45;
}
@media (max-width: 991.98px){
  .sf-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .sf-grid{ grid-template-columns: 1fr; }
}

/* === Eligibility & Guidelines cards === */
.elig-card{
  background:#fff; border:1px solid #eee; border-radius:1rem;
  padding:1.1rem 1.1rem 1rem; box-shadow:0 10px 26px rgba(0,0,0,.08);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; height:100%;
}
.elig-card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,.14); border-color:rgba(240,125,22,.45); }
.elig-icon{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(180deg, var(--bg-soft), #fff); color:var(--accent);
  box-shadow: inset 0 0 0 2px rgba(240,125,22,.25);
}
.elig-title{ margin:0; font-weight:800; color:var(--primary); }
.elig-sub{ color:#6b7280; font-size:.95rem; }
.elig-list{ margin:.6rem 0 1rem; padding:0; list-style:none; }
.elig-list li{ display:flex; gap:.55rem; align-items:flex-start; margin:.45rem 0; color:#4b5563; }
.elig-list i{ color:var(--accent); margin-top:.2rem; }

/* (duplicate kept intentionally to avoid side-effects) */
.btn-accent{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
.btn-accent:hover{ filter:brightness(1.05); color:#fff; }


/* ===== Courses page vertical tabs ===== */
.course-tabs .nav-link{
  border:1px solid #e6e6e6;
  background:#fff;
  color: var(--ink);
  border-radius: .8rem;
  padding: .75rem .9rem;
  margin-bottom: .55rem;
  text-align: left;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.course-tabs .nav-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  border-color: rgba(240,125,22,.35); /* accent tint */
}
.course-tabs .nav-link.active{
  color:#fff;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

/* Right side panel */
.course-pane{
  border: 1px solid #eee;
}

/* Syllabus table look */
.syll-table thead th{
  background: var(--bg-soft);
  color: var(--ink);
  font-weight: 800;
  border-bottom: 1px solid #e8e8e8;
}
.syll-table td, .syll-table th{
  vertical-align: top;
  border-color: #eee;
}

.navbar .nav-link.active{
  background:#f4b400;
  color:#000 !important;
  border-radius:.5rem;
}

.modal-content.rounded-2xl { border-radius: 1.25rem; }
.modal .form-label { font-weight: 600; }

/* ===== Enhanced Footer ===== */
.site-footer{
  background:#0d2d3f;
  color:#d6e6ef;
}
.site-footer a{
  color:#fff;
  text-decoration:none;
}
.site-footer a:hover{ color:var(--accent); }

.footer-accent{
  height:4px;
  background:linear-gradient(90deg, var(--accent), #ffb66a);
}

.footer-brand .footer-logo{
  height:64px;
  width:auto;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.25);
  background:#fff;
  padding:2px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

.footer-title{
  color:#fff;
  font-weight:800;
  letter-spacing:.02em;
  margin-bottom:.25rem;
}
.footer-marker{
  display:block;
  width:48px; height:3px;
  background:var(--accent);
  border-radius:999px;
}

.footer-list{
  list-style:none;
  padding:0; margin:0;
  display:grid; gap:.4rem;
  font-size:.95rem;
}
.footer-list li{ line-height:1.4; }
.footer-blurb{ max-width:46ch; }

.footer-bottom{
  background:rgba(255,255,255,.04);
  border-top:1px solid rgba(255,255,255,.08);
}

/* Responsive tweaks */
@media (max-width: 575.98px){
  .footer-brand .footer-logo{ height:56px; }
  .footer-blurb{ max-width:100%; }
}
