:root {
  --navy: #0b3d63;
  --navy-dark: #082c48;
  --teal: #1a9c92;
  --teal-light: #e6f6f5;
  --green: #3fa66a;
  --bg-light: #f7f9fb;
}

body {
  font-family: 'Inter', sans-serif;
  color: #26313c;
  background: #fff;
  overflow-x: hidden; /* safety net: nothing on the page should ever cause horizontal scroll */
}
h1, h2, h3, h4, h5, .brand-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color: var(--navy);
}
.top-bar { background: var(--navy-dark); color: #fff; font-size: .85rem; }
.top-bar a:hover { color: var(--teal-light); }

.navbar .nav-link { color: var(--navy); font-weight: 500; }
.navbar .nav-link.active, .navbar .nav-link:hover { color: var(--teal); }

/* Long college names wrap onto two lines instead of pushing the nav
   off-screen; combined with navbar-expand-xl this keeps the header
   clean on laptop widths and collapses to a hamburger below that. */
/* This nowrap rule must ONLY apply once the nav is showing as a full
   single row (xl breakpoint and up). Left unscoped, it also stops the
   mobile hamburger dropdown from wrapping onto its own row below the
   header, causing it to overlap the brand text instead. */
@media (min-width: 1200px) {
  .navbar > .container { flex-wrap: nowrap; }
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;   /* let the brand block shrink instead of forcing the row wider than the screen */
  min-width: 0;     /* required for a flex child to be allowed to shrink below its content size */
  overflow: hidden;
}
.navbar-brand img,
.navbar-brand .fa-notes-medical { flex-shrink: 0; }
.navbar-brand .brand-text {
  max-width: 230px;
  white-space: normal !important; /* override Bootstrap's .navbar-brand { white-space: nowrap } */
  line-height: 1.15;
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: break-word;
}
.navbar-toggler { flex-shrink: 0; }

@media (max-width: 575.98px) {
  .navbar-brand img { height: 34px !important; }
  .navbar-brand .fa-notes-medical { font-size: 1.5rem !important; }
  .navbar-brand .brand-text { max-width: 150px; font-size: .85rem; line-height: 1.1; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .navbar-brand .brand-text { max-width: 190px; font-size: .95rem; }
}
@media (min-width: 1200px) and (max-width: 1400px) {
  .navbar .nav-link { padding-left: .5rem; padding-right: .5rem; font-size: .92rem; }
}


.btn-primary { background: var(--teal); border-color: var(--teal); }
.btn-primary:hover { background: var(--navy); border-color: var(--navy); }
.btn-outline-primary { color: var(--teal); border-color: var(--teal); }
.btn-outline-primary:hover { background: var(--teal); border-color: var(--teal); }

.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 520px;
  display: flex;
  align-items: center;
  position: relative;
  color: #fff;
  width: 100%;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(11,61,99,.88), rgba(11,61,99,.55));
}
.hero .hero-content { position: relative; z-index: 2; }
.hero h1 { color: #fff; font-size: 2.6rem; }

/* Scale the hero down on smaller screens so it doesn't dominate the
   viewport on a phone — height and heading size both adapt. */
@media (max-width: 991.98px) {
  .hero { min-height: 420px; }
  .hero h1 { font-size: 2rem; }
}
@media (max-width: 575.98px) {
  .hero { min-height: 340px; }
  .hero h1 { font-size: 1.6rem; }
  .hero .fs-5 { font-size: 1rem !important; }
}

.notice-bar { background: var(--teal-light); border-left: 4px solid var(--teal); }

.info-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(11,61,99,.08);
  padding: 28px 20px;
  text-align: center;
  height: 100%;
  transition: transform .2s ease;
}
.info-card:hover { transform: translateY(-6px); }
.info-card i { font-size: 2rem; color: var(--teal); margin-bottom: 12px; }

.section-title { position: relative; margin-bottom: 2rem; }
.section-title::after {
  content: "";
  display: block;
  width: 60px; height: 3px;
  background: var(--teal);
  margin-top: 10px;
}
.section-title.text-center::after { margin-left: auto; margin-right: auto; }

.course-card, .facility-card, .faculty-card, .news-card {
  border: 1px solid #eaeef1;
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  transition: box-shadow .2s ease;
  background: #fff;
}
.course-card:hover, .facility-card:hover, .faculty-card:hover, .news-card:hover {
  box-shadow: 0 8px 24px rgba(11,61,99,.12);
}
.course-card img, .facility-card img, .news-card img { height: 190px; width: 100%; object-fit: cover; }
.faculty-card img { height: 240px; width: 100%; object-fit: cover; }

.management-card {
  background: #fff;
  border: 1px solid #eaeef1;
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.management-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 767.98px) {
  .management-card { flex-direction: column; align-items: center; text-align: center; }
}

.why-list li { padding: 8px 0; }
.why-list i { color: var(--green); margin-right: 10px; }

.footer-link { color: #cfd8de; text-decoration: none; }
.footer-link:hover { color: #fff; }

.gallery-thumb { border-radius: 10px; overflow: hidden; cursor: pointer; }
.gallery-thumb img { height: 200px; width: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-thumb:hover img { transform: scale(1.06); }

.bg-soft { background: var(--bg-light); }