/* ============================================================
   RAI INSTITUTE OF HOTEL MANAGEMENT — style.css
   Color Scheme: 60% White | 30% Navy #1B2370 | 10% Gold #C9A227
   Fonts: Lora (headings) | Poppins (body)
   ============================================================ */

/* ---------- CSS Variables ---------- */
:root {
  --navy:        #1B2370;
  --navy-dark:   #111850;
  --navy-light:  #2a3490;
  --gold:        #C9A227;
  --gold-light:  #e2bc4a;
  --gold-dark:   #a07f1a;
  --white:       #FFFFFF;
  --off-white:   #F8F9FC;
  --light-gray:  #EEF0F8;
  --text-dark:   #1a1a2e;
  --text-mid:    #444466;
  --text-light:  #7777aa;
  --shadow-sm:   0 2px 12px rgba(27,35,112,.08);
  --shadow-md:   0 6px 28px rgba(27,35,112,.14);
  --shadow-lg:   0 16px 48px rgba(27,35,112,.20);
  --radius:      12px;
  --radius-lg:   20px;
  --transition:  all .35s cubic-bezier(.4,0,.2,1);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Poppins', sans-serif;
  background: var(--white);
  color: var(--text-dark);
  line-height: 1.7;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lora', serif;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}

a { text-decoration: none; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Utility Classes ---------- */
.text-gold   { color: var(--gold) !important; }
.text-navy   { color: var(--navy) !important; }
.bg-navy     { background: var(--navy) !important; }
.bg-gold     { background: var(--gold) !important; }
.bg-off-white{ background: var(--off-white) !important; }

.section-title {
  font-family: 'Lora', serif;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--navy);
  margin-bottom: .5rem;
}
.section-subtitle {
  font-size: .95rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: 600;
  margin-bottom: .6rem;
}
.gold-divider {
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  margin: .8rem 0 1.6rem;
}
.gold-divider.center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn-primary-rihm {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--white);
  border: none;
  padding: .75rem 2rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .9rem;
  letter-spacing: .5px;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}
.btn-primary-rihm:hover {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--white);
}
.btn-gold-rihm {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: var(--navy);
  border: none;
  padding: .75rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .5px;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(201,162,39,.3);
}
.btn-gold-rihm:hover {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,162,39,.4);
  color: var(--navy);
}
.btn-outline-gold {
  background: transparent;
  color: var(--gold);
  border: 2px solid var(--gold);
  padding: .7rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .9rem;
  transition: var(--transition);
}
.btn-outline-gold:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}
.btn-outline-white {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.7);
  padding: .7rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .9rem;
  transition: var(--transition);
}
.btn-outline-white:hover {
  background: var(--white);
  color: var(--navy);
  transform: translateY(-2px);
}

/* ---------- Top Bar ---------- */
#top-bar {
  background: var(--navy-dark);
  padding: .45rem 0;
  font-size: .82rem;
  color: rgba(255,255,255,.75);
}
#top-bar a { color: var(--gold-light); }
#top-bar a:hover { color: var(--white); }
#top-bar .bi { font-size: .85rem; }

/* ---------- Navbar ---------- */
#main-navbar {
  background: var(--white);
  box-shadow: var(--shadow-sm);
  padding: .6rem 0;
  transition: var(--transition);
  position: sticky;
  top: 0;
  z-index: 1050;
}
#main-navbar.scrolled {
  box-shadow: var(--shadow-md);
  padding: .4rem 0;
}
.navbar-brand img { height: 90px; width: auto; }
.navbar-brand .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.navbar-brand .brand-text .brand-name {
  font-family: 'Lora', serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: .5px;
}
.navbar-brand .brand-text .brand-tagline {
  font-size: .65rem;
  color: var(--gold-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.nav-link {
  font-family: 'Poppins', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  color: var(--navy) !important;
  padding: .5rem 1rem !important;
  border-radius: 6px;
  transition: var(--transition);
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: var(--transition);
  border-radius: 2px;
}
.nav-link:hover::after,
.nav-link.active::after { width: 60%; }
.nav-link:hover { color: var(--gold-dark) !important; }
.navbar-nav .nav-link.active { color: var(--gold-dark) !important; }
.dropdown-menu {
  border: none;
  box-shadow: var(--shadow-md);
  border-radius: var(--radius);
  padding: .5rem;
  border-top: 3px solid var(--gold);
}
.dropdown-item {
  font-size: .85rem;
  font-weight: 500;
  padding: .5rem .9rem;
  border-radius: 6px;
  color: var(--navy);
}
.dropdown-item:hover {
  background: var(--light-gray);
  color: var(--gold-dark);
}
.navbar-toggler {
  border: 2px solid var(--navy);
  border-radius: 8px;
  padding: .3rem .6rem;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231B2370' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- Hero Carousel ---------- */
#hero-carousel {
  position: relative;
  overflow: hidden;
}
.hero-slide {
  position: relative;
  height: 92vh;
  min-height: 580px;
  overflow: hidden;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: brightness(.45);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(27,35,112,.7) 0%,
    rgba(17,24,80,.4) 50%,
    rgba(201,162,39,.15) 100%);
}
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.hero-content-inner { max-width: 860px; }
.hero-badge {
  display: inline-block;
  background: rgba(201,162,39,.25);
  border: 1px solid rgba(201,162,39,.6);
  color: var(--gold-light);
  padding: .4rem 1.2rem;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  backdrop-filter: blur(4px);
}
.hero-heading {
  font-family: 'Lora', serif;
  font-size: clamp(2rem, 5vw, 3.6rem);
  color: var(--white);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: .8rem;
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.hero-heading span { color: var(--gold-light); }
.hero-sub {
  font-size: clamp(.9rem, 1.8vw, 1.1rem);
  color: rgba(255,255,255,.85);
  margin-bottom: 2.2rem;
  font-weight: 400;
}
.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.hero-btn-call {
  background: var(--gold);
  color: var(--navy);
  border: none;
  padding: .8rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(201,162,39,.5);
}
.hero-btn-call:hover {
  background: var(--gold-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(201,162,39,.6);
  color: var(--navy);
}
.hero-btn-wp {
  background: #25D366;
  color: var(--white);
  border: none;
  padding: .8rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
}
.hero-btn-wp:hover {
  background: #1fb859;
  transform: translateY(-3px);
  color: var(--white);
}
.hero-btn-apply {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,.7);
  padding: .75rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: var(--transition);
}
.hero-btn-apply:hover {
  background: var(--white);
  color: var(--navy);
  transform: translateY(-3px);
}

.carousel-indicators [data-bs-target] {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  border: 2px solid var(--gold);
  transition: var(--transition);
}
.carousel-indicators .active {
  background: var(--gold);
  width: 28px;
  border-radius: 5px;
}
.carousel-control-prev,
.carousel-control-next {
  width: 5%;
  opacity: .7;
}

/* ---------- Stats Bar ---------- */
#stats-bar {
  background: var(--navy);
  padding: 1.8rem 0;
  position: relative;
  overflow: hidden;
}
#stats-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.07), transparent);
}
.stat-item {
  text-align: center;
  padding: .5rem 1rem;
  border-right: 1px solid rgba(255,255,255,.1);
}
.stat-item:last-child { border-right: none; }
.stat-number {
  font-family: 'Lora', serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.stat-label {
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: .3rem;
}

/* ---------- About Section ---------- */
#about { padding: 6rem 0; background: var(--white); }
.about-img-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.about-img-wrap img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  transition: transform .6s ease;
}
.about-img-wrap:hover img { transform: scale(1.04); }
.about-img-badge {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: var(--gold);
  color: var(--navy);
  padding: 1rem 1.4rem;
  border-radius: var(--radius);
  text-align: center;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}
.about-img-badge .badge-num {
  font-family: 'Lora', serif;
  font-size: 2rem;
  line-height: 1;
  display: block;
}
.about-img-badge .badge-txt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.about-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.about-feature-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: var(--light-gray);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-dark);
  font-size: 1.2rem;
  transition: var(--transition);
}
.about-feature-item:hover .about-feature-icon {
  background: var(--navy);
  color: var(--gold);
}
.about-feature-text h6 {
  font-size: .92rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .1rem;
  font-family: 'Poppins', sans-serif;
}
.about-feature-text p { font-size: .82rem; color: var(--text-mid); margin: 0; }

/* ---------- Courses Section ---------- */
#courses { padding: 6rem 0; background: var(--off-white); }

.course-category-label {
  display: inline-block;
  background: var(--navy);
  color: var(--gold);
  padding: .3rem 1rem;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 1.5rem;
}

.course-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  height: 100%;
  border: 1px solid rgba(27,35,112,.06);
  display: flex;
  flex-direction: column;
}
.course-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--gold);
}
.course-card-img {
  position: relative;
  overflow: hidden;
  height: 190px;
}
.course-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.course-card:hover .course-card-img img { transform: scale(1.08); }
.course-type-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--gold);
  color: var(--navy);
  font-size: .7rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border-radius: 50px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.course-card-body {
  padding: 1.4rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.course-card-body h5 {
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: .5rem;
  font-family: 'Lora', serif;
}
.course-card-body p {
  font-size: .82rem;
  color: var(--text-mid);
  flex: 1;
  margin-bottom: 1rem;
}
.course-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  background: var(--light-gray);
  border-top: 1px solid rgba(27,35,112,.06);
}
.course-duration {
  font-size: .78rem;
  color: var(--text-mid);
  font-weight: 600;
}
.course-duration i { color: var(--gold-dark); }
.btn-apply-sm {
  background: var(--navy);
  color: var(--white);
  padding: .35rem .9rem;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 600;
  border: none;
  transition: var(--transition);
}
.btn-apply-sm:hover {
  background: var(--gold);
  color: var(--navy);
}

/* ---------- Why Choose Us ---------- */
#why-us { padding: 6rem 0; background: var(--white); }
.why-card {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px solid transparent;
  transition: var(--transition);
  height: 100%;
}
.why-card:hover {
  background: var(--white);
  border-color: var(--gold);
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.why-icon-wrap {
  width: 72px;
  height: 72px;
  background: var(--navy);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
  font-size: 1.8rem;
  color: var(--gold);
  transition: var(--transition);
  box-shadow: 0 6px 20px rgba(27,35,112,.2);
}
.why-card:hover .why-icon-wrap {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 6px 20px rgba(201,162,39,.3);
}
.why-card h5 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .4rem;
  font-family: 'Poppins', sans-serif;
}
.why-card p { font-size: .82rem; color: var(--text-mid); margin: 0; }

/* ---------- Special Offer Banner ---------- */
#offer-banner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
}
#offer-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(201,162,39,.08);
}
.offer-badge {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-family: 'Lora', serif;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 1rem 2rem;
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(201,162,39,.4);
  transform: rotate(-2deg);
}

/* ---------- Vision & Mission ---------- */
#vision-mission { padding: 6rem 0; background: var(--off-white); }
.vm-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  height: 100%;
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.vm-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.vm-card.mission { border-top-color: var(--navy); }
.vm-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--navy);
  margin-bottom: 1.2rem;
}
.vm-card.mission .vm-icon {
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--gold);
}
.vm-card h4 {
  font-size: 1.3rem;
  color: var(--navy);
  margin-bottom: .8rem;
}
.vm-card p { font-size: .88rem; color: var(--text-mid); line-height: 1.8; }
.vm-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.vm-card ul li {
  font-size: .88rem;
  color: var(--text-mid);
  padding: .4rem 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px dashed var(--light-gray);
}
.vm-card ul li:last-child { border-bottom: none; }
.vm-card ul li i { color: var(--gold-dark); font-size: .85rem; }

/* ---------- Facilities ---------- */
#facilities { padding: 6rem 0; background: var(--navy); }
#facilities .section-title,
#facilities h2 { color: var(--white); }
#facilities .section-subtitle { color: var(--gold-light); }
#facilities .gold-divider { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.facility-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.4rem;
  text-align: center;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}
.facility-card:hover {
  background: rgba(201,162,39,.15);
  border-color: var(--gold);
  transform: translateY(-6px);
}
.facility-card i {
  font-size: 2.2rem;
  color: var(--gold);
  margin-bottom: 1rem;
  display: block;
}
.facility-card h6 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--white);
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

/* ---------- Faculty (Carousel version) ---------- */
#faculty { padding: 6rem 0; background: var(--white); }

.faculty-card {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.4rem 1.8rem;
  text-align: center;
  border: 1px solid var(--light-gray);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.faculty-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
}
.faculty-img-wrap {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 1.2rem;
  border: 3px solid var(--gold);
  box-shadow: 0 6px 20px rgba(201,162,39,.25);
  background: var(--light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.faculty-img-wrap i { font-size: 3.5rem; color: var(--navy); }
.faculty-card h5 {
  font-size: .98rem;
  color: var(--navy);
  margin-bottom: .25rem;
  font-family: 'Lora', serif;
}
.faculty-card .designation {
  font-size: .78rem;
  color: var(--gold-dark);
  font-weight: 700;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.faculty-card .experience {
  font-size: .78rem;
  color: var(--text-mid);
  margin-top: auto;
}
.faculty-card .exp-divider {
  width: 32px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  margin: .6rem auto .7rem;
}

/* ---------- Gallery ---------- */
#gallery { padding: 6rem 0; background: var(--off-white); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 12px;
}
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-item:nth-child(5) { grid-column: span 2; }
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  min-height: 160px;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(27,35,112,.5);
  opacity: 0;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 2rem;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }

/* ---------- Testimonials (Carousel version) ---------- */
#testimonials { padding: 6rem 0; background: var(--white); }

.testimonial-card {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: 2rem 1.8rem 1.6rem;
  border: 1px solid var(--light-gray);
  transition: var(--transition);
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 10px;
  left: 18px;
  font-size: 5rem;
  color: var(--gold);
  opacity: .18;
  font-family: 'Lora', serif;
  line-height: 1;
  pointer-events: none;
}
.testimonial-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
  transform: translateY(-4px);
}
.testimonial-stars { color: var(--gold); font-size: .88rem; margin-bottom: .9rem; gap: .1rem; display: flex; }
.testimonial-text {
  font-size: .88rem;
  color: var(--text-mid);
  line-height: 1.85;
  margin-bottom: 1.4rem;
  font-style: italic;
  flex: 1;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--light-gray);
}
.testimonial-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.05rem;
  font-weight: 700;
  font-family: 'Lora', serif;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(27,35,112,.2);
}
.testimonial-author-info h6 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .1rem;
  font-family: 'Poppins', sans-serif;
}
.testimonial-author-info span {
  font-size: .74rem;
  color: var(--gold-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ---------- Admission CTA — redesigned -------------------- */
#admission-cta {
  background: var(--navy);
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* decorative blobs — contained, no overflow */
#admission-cta::before,
#admission-cta::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
#admission-cta::before {
  width: 420px; height: 420px;
  top: -140px; right: -100px;
  background: radial-gradient(circle, rgba(201,162,39,.15) 0%, transparent 70%);
}
#admission-cta::after {
  width: 320px; height: 320px;
  bottom: -120px; left: -80px;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
}

.cta-inner {
  position: relative;
  z-index: 1;
  padding: 5rem 0;
}

/* Main card */
.cta-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(201,162,39,.25);
  border-radius: 24px;
  padding: 3.5rem 2.5rem;
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset,
              0 24px 64px rgba(0,0,0,.25);
}

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(201,162,39,.18);
  border: 1px solid rgba(201,162,39,.4);
  color: var(--gold-light);
  padding: .4rem 1.1rem;
  border-radius: 50px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.cta-badge i { font-size: .85rem; }

.cta-headline {
  font-family: 'Lora', serif;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  color: var(--white);
  line-height: 1.2;
  margin-bottom: .9rem;
}
.cta-headline span { color: var(--gold-light); }

.cta-sub {
  color: rgba(255,255,255,.65);
  font-size: .96rem;
  max-width: 540px;
  margin: 0 auto 2.4rem;
  line-height: 1.7;
}

/* Info chips row */
.cta-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-bottom: 2.4rem;
}
.cta-chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
  padding: .45rem .9rem;
  border-radius: 50px;
  font-size: .78rem;
  font-weight: 600;
}
.cta-chip i { color: var(--gold); font-size: .8rem; }

/* CTA buttons row */
.cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .9rem;
}

/* Primary apply */
.cta-btn-apply {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
  background-size: 200% auto;
  color: var(--navy);
  border: none;
  padding: .85rem 2.2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .92rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  transition: background-position .4s ease, transform .28s ease, box-shadow .28s ease;
  box-shadow: 0 6px 24px rgba(201,162,39,.45);
  cursor: pointer;
  text-decoration: none;
}
.cta-btn-apply:hover,
.cta-btn-apply:focus-visible {
  background-position: right center;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 32px rgba(201,162,39,.6);
  color: var(--navy);
  outline: 3px solid rgba(201,162,39,.5);
  outline-offset: 3px;
}

/* Call button */
.cta-btn-call {
  background: rgba(255,255,255,.1);
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,.3);
  padding: .82rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(4px);
}
.cta-btn-call:hover,
.cta-btn-call:focus-visible {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.6);
  transform: translateY(-3px);
  color: var(--white);
  outline: 3px solid rgba(255,255,255,.3);
  outline-offset: 3px;
}

/* WhatsApp button */
.cta-btn-wp {
  background: #25D366;
  color: var(--white);
  border: none;
  padding: .82rem 1.8rem;
  border-radius: 50px;
  font-weight: 600;
  font-size: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(37,211,102,.3);
}
.cta-btn-wp:hover,
.cta-btn-wp:focus-visible {
  background: #1fb859;
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(37,211,102,.45);
  color: var(--white);
  outline: 3px solid rgba(37,211,102,.4);
  outline-offset: 3px;
}

/* Responsive */
@media (max-width: 575px) {
  .cta-card { padding: 2.4rem 1.4rem; }
  .cta-btns { flex-direction: column; align-items: stretch; }
  .cta-btn-apply,
  .cta-btn-call,
  .cta-btn-wp { justify-content: center; }
}

/* ---------- Contact Section ---------- */
#contact { padding: 6rem 0; background: var(--off-white); }
.contact-info-card {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  color: var(--white);
  height: 100%;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.contact-info-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.contact-info-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: rgba(201,162,39,.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 1.1rem;
}
.contact-info-text span {
  display: block;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gold-light);
  font-weight: 600;
  margin-bottom: .2rem;
}
.contact-info-text p {
  font-size: .88rem;
  color: rgba(255,255,255,.85);
  margin: 0;
  line-height: 1.5;
}
.contact-info-text a {
  color: rgba(255,255,255,.85);
  display: block;
  font-size: .88rem;
}
.contact-info-text a:hover { color: var(--gold-light); }

.contact-form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  box-shadow: var(--shadow-md);
}
.form-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: .4rem;
}
.form-control, .form-select {
  border: 1.5px solid var(--light-gray);
  border-radius: 10px;
  padding: .7rem 1rem;
  font-size: .88rem;
  color: var(--text-dark);
  transition: var(--transition);
  background: var(--off-white);
}
.form-control:focus, .form-select:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27,35,112,.1);
  background: var(--white);
}
.form-floating label { font-size: .88rem; color: var(--text-light); }
textarea.form-control { resize: none; }

/* ---------- Map ---------- */
#map-section { height: 340px; overflow: hidden; }
#map-section iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(.2);
}

/* ---------- Footer ---------- */
#main-footer {
  background: var(--navy-dark);
  padding: 4rem 0 0;
  color: rgba(255,255,255,.75);
}
.footer-logo { height: 70px; margin-bottom: 1rem; }
.footer-about {
  font-size: .84rem;
  line-height: 1.9;
  color: rgba(255,255,255,.6);
  margin-bottom: 1.4rem;
}
.footer-heading {
  font-family: 'Lora', serif;
  font-size: 1.05rem;
  color: var(--gold);
  margin-bottom: 1.2rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a {
  color: rgba(255,255,255,.65);
  font-size: .84rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: var(--transition);
}
.footer-links a i { font-size: .7rem; color: var(--gold); }
.footer-links a:hover { color: var(--gold-light); padding-left: 4px; }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin-bottom: .9rem;
  font-size: .84rem;
  color: rgba(255,255,255,.65);
}
.footer-contact-item i { color: var(--gold); margin-top: 3px; font-size: .9rem; }
.footer-contact-item a { color: rgba(255,255,255,.65); }
.footer-contact-item a:hover { color: var(--gold-light); }
.social-icons { display: flex; gap: .7rem; margin-top: .5rem; }
.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.7);
  font-size: .9rem;
  transition: var(--transition);
}
.social-icon:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}
.footer-bottom {
  margin-top: 3rem;
  padding: 1.2rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
  font-size: .8rem;
  color: rgba(255,255,255,.4);
}
.footer-bottom a { color: var(--gold-light); }

/* ---------- Floating WhatsApp ---------- */
#floating-wp {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9999;
}
#floating-wp a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  font-size: 1.6rem;
  box-shadow: 0 6px 24px rgba(37,211,102,.5);
  transition: var(--transition);
  animation: wpPulse 2.5s infinite;
}
#floating-wp a:hover {
  transform: scale(1.1);
  box-shadow: 0 10px 32px rgba(37,211,102,.6);
}
@keyframes wpPulse {
  0%,100% { box-shadow: 0 6px 24px rgba(37,211,102,.5); }
  50% { box-shadow: 0 6px 36px rgba(37,211,102,.8); }
}

/* ---------- Scroll to Top ---------- */
#scroll-top {
  position: fixed;
  bottom: 96px;
  right: 28px;
  z-index: 9998;
  display: none;
}
#scroll-top button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  border: none;
  font-size: 1rem;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
}
#scroll-top button:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px);
}

/* ---------- Animations ---------- */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-in {
  opacity: 0;
  transition: opacity .6s ease;
}
.fade-in.visible { opacity: 1; }

/* ---------- Preloader ---------- */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--navy);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}
#preloader img { height: 80px; animation: preloaderPulse 1s ease-in-out infinite; }
.preloader-bar {
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,.2);
  border-radius: 2px;
  overflow: hidden;
}
.preloader-bar-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  animation: preloaderFill 1.5s ease-in-out forwards;
}
@keyframes preloaderPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .7; transform: scale(.95); }
}
@keyframes preloaderFill {
  0% { width: 0; }
  100% { width: 100%; }
}

/* ============================================================
   DEGREE PROGRAMME CARD — redesigned
   ============================================================ */
.degree-section-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--navy);
  padding: .55rem 1.6rem;
  border-radius: 50px;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0 4px 16px rgba(201,162,39,.3);
  margin-bottom: 2rem;
}

.degree-card {
  background: var(--white);
  border-radius: 20px;
  border: 2px solid var(--gold);
  box-shadow: 0 8px 40px rgba(27,35,112,.12), 0 0 0 1px rgba(201,162,39,.1);
  overflow: hidden;
  transition: var(--transition);
  max-width: 760px;
  margin: 0 auto;
}
.degree-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 56px rgba(27,35,112,.18), 0 0 0 2px var(--gold);
}

.degree-card-inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 220px;
}

/* Left: image pane */
.degree-card-img {
  position: relative;
  overflow: hidden;
}
.degree-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  display: block;
}
.degree-card:hover .degree-card-img img { transform: scale(1.06); }

.degree-img-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--gold);
  color: var(--navy);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: .3rem .8rem;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* Right: content pane */
.degree-card-body {
  padding: 2rem 2.2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
}

.degree-card-pretitle {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gold-dark);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.degree-card-pretitle::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.degree-card-title {
  font-family: 'Lora', serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin: 0;
}

.degree-card-desc {
  font-size: .875rem;
  color: var(--text-mid);
  line-height: 1.75;
  margin: 0;
}

.degree-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .3rem;
}
.degree-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--light-gray);
  color: var(--text-mid);
  font-size: .76rem;
  font-weight: 600;
  padding: .35rem .85rem;
  border-radius: 50px;
}
.degree-meta-pill i { color: var(--gold-dark); font-size: .78rem; }
.degree-meta-pill.pill-ugc {
  background: rgba(27,35,112,.07);
  color: var(--navy);
}
.degree-meta-pill.pill-ugc i { color: var(--navy); }

.degree-card-cta {
  margin-top: .5rem;
}
.btn-degree-apply {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  color: var(--white);
  border: none;
  padding: .72rem 1.7rem;
  border-radius: 50px;
  font-size: .86rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 16px rgba(27,35,112,.22);
  text-decoration: none;
}
.btn-degree-apply:hover,
.btn-degree-apply:focus-visible {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,162,39,.35);
  outline: 3px solid rgba(201,162,39,.4);
  outline-offset: 2px;
}
.btn-degree-apply i { transition: transform .28s ease; }
.btn-degree-apply:hover i { transform: translateX(3px); }

/* Responsive degree card */
@media (max-width: 640px) {
  .degree-card-inner {
    grid-template-columns: 1fr;
  }
  .degree-card-img { height: 180px; }
  .degree-card-body { padding: 1.6rem 1.4rem; }
  .degree-card-title { font-size: 1.2rem; }
}

/* ============================================================
   OVERFLOW AUDIT — global safeguards (320 px → 1920 px)
   ============================================================ */

/* 1. Universal clamp */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 2. All images / media never exceed container */
img, video, iframe, embed, object, svg {
  max-width: 100%;
}

/* 3. Containers never leak */
.container, .container-fluid,
.container-sm, .container-md,
.container-lg, .container-xl {
  max-width: 100%;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

/* 4. Section-level containment */
section, header, footer, nav, div {
  max-width: 100%;
}

/* 5. Hero carousel */
#hero-carousel,
#hero-carousel .carousel-inner,
.hero-slide { max-width: 100%; overflow: hidden; }

/* 6. Gallery grid — no blowout at narrow widths */
.gallery-grid {
  width: 100%;
  max-width: 100%;
}
.gallery-item { min-width: 0; }

/* 7. Stat bar text won't overflow on 320px */
.stat-number {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 8. Navbar brand text at smallest screens */
.navbar-brand .brand-text .brand-name {
  font-size: clamp(.7rem, 2.2vw, 1rem);
  word-break: break-word;
}

/* 9. Tables & preformatted text */
table { max-width: 100%; overflow-x: auto; display: block; }
pre, code { max-width: 100%; overflow-x: auto; }

/* 10. Form controls */
.form-control, .form-select, input, textarea, select {
  max-width: 100%;
  min-width: 0;
}

/* 11. Cards in bootstrap rows never overflow */
.row { --bs-gutter-x: 1.5rem; }
[class*="col-"] { min-width: 0; }

/* 12. Degree card safe on narrow */
.degree-card { width: 100%; max-width: 760px; }

/* 13. Top bar long address text */
#top-bar { overflow: hidden; }
#top-bar .container { overflow: hidden; }

/* 14. Hero headings */
.hero-heading { overflow-wrap: break-word; word-break: break-word; }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 991px) {
  .hero-slide { height: 70vh; min-height: 480px; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); }
  .stat-item:last-child { border-bottom: none; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item:nth-child(1) { grid-column: span 1; grid-row: span 1; }
  .gallery-item:nth-child(5) { grid-column: span 1; }
}

@media (max-width: 767px) {
  .hero-slide { height: 85vh; min-height: 500px; }
  .hero-heading { font-size: 1.9rem; }
  .hero-btns { flex-direction: column; align-items: center; }
  section { padding: 0rem 0; }
  #about, #courses, #why-us, #vision-mission,
  #facilities, #faculty, #gallery,
  #testimonials, #contact { padding: 4rem 0; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .navbar-brand img { height: 80px; }
  .hero-btns { width: 100%; }
  .hero-btn-call, .hero-btn-wp, .hero-btn-apply {
    width: 100%;
    justify-content: center;
  }
  .row { --bs-gutter-x: 1rem; }
}

@media (max-width: 400px) {
  .cta-chips { gap: .4rem; }
  .cta-chip { font-size: .72rem; padding: .35rem .7rem; }
  .hero-heading { font-size: 1.6rem; }
}

/* ── 320px edge-case ──────────────────────────────────────── */
@media (max-width: 320px) {
  .container { padding-left: .75rem; padding-right: .75rem; }
  .hero-heading { font-size: 1.4rem; }
  .section-title { font-size: 1.5rem; }
}