/* RESET */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body {
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* CONTAINERS */
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 15px;
}

/* TOPBAR */
.topbar {
  position: relative;
  color: #fff;
  overflow: hidden;
  height: 60px;
}

.topbar-left {
  display: flex;
}

.topbar-bg-left {
  position: absolute;
  inset: 0;
  background: #F97316;
  clip-path: polygon(0 0, 70% 0, 60% 100%, 0 100%);
  z-index: 1;
}

.topbar-bg-right {
  position: absolute;
  inset: 0;
  background: #1e3a8a;
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 35% 100%);
  z-index: 1;
}

.topbar-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  flex-wrap: wrap;
}

.follow-text {
  margin-right: 10px;
  font-weight: 500;
}

.social-icons a {
  color: white;
  margin: 0 6px;
  transition: transform 0.3s;
}

.social-icons a:hover {
  transform: scale(1.2);
}

.topbar-right a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.topbar-right a:hover {
  opacity: 0.8;
}

/* NAVBAR */
/* ===== Navbar Base ===== */
.navbar {
  background: white;
  box-shadow: 0 2px 0px rgba(255 255 255 / 25%);
  position: relative;
  z-index: 10;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.logo img {
  height: 90px;
}

/* ===== Navigation Links ===== */
.nav-links .navigation {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  margin-left: 20px;
  text-decoration: none;
  color: #333;
  font-weight: 600;
  transition: color 0.3s;
  display: inline-block;
  padding: 8px 5px;
}

.nav-links a:hover {
  color: #f97316;
}

/* ===== Button ===== */
.btn-primary {
  background: #f97316;
  color: #fff !important;
  padding: 8px 14px;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.3s;
}

.btn-primary:hover {
  background: #ea580c;
}

/* ===== Dropdown ===== */
.dropdown-hd {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: none;
  flex-direction: column;
  list-style: none;
  /* padding: 10px 0; */
  min-width: 200px;
  z-index: 100;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;
  align-items: revert;
}

/* Dropdown items */
.dropdown-menu li a {
  margin: 0;
  padding: 10px 20px;
  display: block;
  color: #333;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.dropdown-menu li a:hover {
  background: #f5f5f5;
  color: #f97316;
}

/* Show dropdown on hover (desktop) */
.dropdown-hd:hover>.dropdown-menu {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* ===== Fixed Navbar After Scroll ===== */
.navbar.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: white;
  z-index: 1000;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.navbar-spacer {
  display: none;
  height: 0;
}

.navbar-spacer.active {
  display: block;
}

/* ===== Mobile Menu ===== */
.menu-toggle {
  background: none;
  border: none;
  font-size: 26px;
  display: none;
  cursor: pointer;
  color: #333;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu a {
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
  color: #333;
  text-decoration: none;
  display: block;
}

.mobile-menu a:hover {
  background: #f5f5f5;
  color: #f97316;
}

.mobile-menu.active {
  display: flex;
}

/* ===== Mobile Dropdown ===== */
.mobile-menu .dropdown-hd>a::after {
  content: " â–¾";
  float: right;
  font-size: 12px;
}

.mobile-menu .dropdown-menu {
  display: none;
  padding-left: 15px;
  background: #fafafa;
}

.mobile-menu .dropdown-hd.open .dropdown-menu {
  display: flex;
  flex-direction: column;
}


/* Make hero section full width */
.hero-carousel {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Full viewport height */
  overflow: hidden;
  /*display: flex;*/
  /*justify-content: center;*/
  padding-left: 200px;
}

/* Full-screen video background */
.hero-carousel video.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* makes it fill the section */
  z-index: 0;
}

/* Overlay layer to darken video slightly */
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  /* adjust transparency */
  z-index: 1;
}

/* Text content */
.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  /* top: 50%;
  transform: translateY(-80%); */
  padding: 0 20px;
}


/* HERO SECTION */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
      rgba(60, 119, 141, 0.45),
      rgba(60, 119, 141, 0.35),
      rgba(60, 119, 141, 0.3));
}

.tagline {
  display: table;
  margin-bottom: 20px;
  padding: 8px 20px;
  background: #4F636F;
  border: 1px solid rgba(255, 165, 0, 0.3);
  backdrop-filter: blur(4px);
  border-radius: 25px;
}

.tagline span {
  color: #fff;
  font-weight: 500;
  font-size: 14px;
}

.hero-content h1 {
  text-align: left;
  font-size: 3.75rem;
  font-weight: 900;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-content h1 .highlight {
  color: #FF7057;
  font-weight: 900;
}

.hero-content p {
  text-align: left;
  font-size: 1.25rem;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 650px;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
}

.hero-btn.btn-primary {
  background: #FF7057;
  color: #fff;
  padding: 12px 40px;
  border-radius: 6px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.hero-btn.btn-primary:hover {
  transform: translateX(4px);
}

.hero-btn.btn-outline {
  border: 2px solid #fff;
  background: #fff;
  color: #000;
  padding: 5px 35px;
  border-radius: 6px;
  transition: background 0.3s ease, color 0.3s ease;
}

.hero-carousel {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* justify-content: center; */
  color: #fff;
  /* text-align: center; */
}

/* Background Images */
.hero-images {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-images img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.hero-images img.active {
  opacity: 1;
}

.hero-buttons {
  display: flex;
  gap: 15px;
  /* justify-content: center; */
}

.btn-primary,
.btn-outline {
  padding: 12px 25px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
}

.btn-primary {
  background: #ffcc00;
  color: #002b5c;
}

/* .btn-primary:hover {
  background: #e6b800;
} */

.btn-outline {
  border: 2px solid #fff;
  color: #fff;
}

.btn-outline:hover {
  background: #fff;
  color: #002b5c;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-content p {
    font-size: 1rem;
  }
}




/* FEATURES SECTION */
.features {
  /* padding: 4rem 0; */
  position: relative;
  z-index: 20;
}

.features .container {
  max-width: 1400px;
  margin: 10px auto;
  padding: 0 15px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.feature-card {
  border: 1px solid rgb(100 98 98 / 20%);
  background: #3F51B5;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.feature-card:hover {
  background: #F97316;
  transform: translateY(-8px);
}

.feature-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem auto;
  border-radius: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);
}

.feature-icon i {
  font-size: 1.8rem;
  color: #fff;
}

/* Gradient backgrounds for each icon */
.gradient-blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.gradient-teal {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
}

.gradient-purple {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.gradient-orange {
  background: linear-gradient(135deg, #fb923c, #ea580c);
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #060606;
  transition: color 0.3s ease;
}

.feature-card p {
  font-size: 0.95rem;
  color: #656565;
  line-height: 1.6;
  transition: color 0.3s ease;
}

.feature-card:hover h3,
.feature-card:hover p {
  color: #000;
}


.about-section {
  padding: 80px 20px;
  background: #fff;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.about-images {
  display: flex;
  flex-direction: column;
  /* grid-template-columns: repeat(2, 1fr); */
  gap: 24px;
  position: relative;
}

/* Large Main Image */
.image-main {
  grid-column: span 2;
  position: relative;
}

.image-overlay {
  position: absolute;
  inset: 0;
  background: #FA6E55;
  border-radius: 2rem;
  transform: translate(8px, 8px);
  z-index: 0;
}

.image-overlay-primary {
  position: absolute;
  inset: 0;
  background: #1D3557;
  border-radius: 2rem;
  transform: translate(8px, 8px);
  z-index: 0;
}

.image-wrapper {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  border: 4px solid #F97316;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.image-wrapper img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.image-wrap {
  position: relative;
  border-radius: 2rem;
  overflow: hidden;
  border: 4px solid #F97316;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  height: 170px;
}

.image-wrap img {
  width: 100%;
  object-fit: cover;
}

/* Stats Card */

.vertical-card {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.stats-card {
  background: #F97316;
  color: #fff;
  padding: 40px 20px;
  border-radius: 2rem;
  text-align: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  height: 170px;
}

.stats-number {
  font-size: 3rem;
  font-weight: bold;
}

.stats-text {
  font-size: 1.2rem;
}

.image-small .image-wrapper {
  height: 400px;
}

/* Content */
.about-content .section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.label-text {
  color: #F97316;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.about-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #1D3557;
  margin-bottom: 24px;
}

.about-intro {
  font-size: 1.1rem;
  color: #1D3557;
  margin-bottom: 16px;
}

.about-intro strong {
  font-weight: 700;
}

.about-text {
  font-size: 1rem;
  color: #555;
  margin-bottom: 16px;
  line-height: 2;
}

/* Highlights */
.highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.highlight-item {
  display: flex;
  gap: 16px;
}

.highlight-number {
  width: 70px;
  height: 38px;
  background: #F97316;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.highlight-title {
  font-weight: bold;
  font-size: 1.1rem;
  color: #1D3557;
}

.highlight-desc {
  font-size: 1rem;
  color: #555;
}

/* CTA Button */
.cta-btn {
  padding: 12px 32px;
  background: #1D3557;
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.cta-btn-link {
  color: #fff;
  text-decoration: none;
}

.cta-btn:hover {
  background: #3a5a97;
}

@media (max-width: 600px) {
  .highlights {
    grid-template-columns: 1fr;
  }

  .about-title {
    font-size: 2rem;
  }
}


body {
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: #f8f8f8;
  margin: 0;
  padding: 0;
}

.memorandum-section {
  background: #ff8a82;
  text-align: center;
  padding: 60px 20px;
}

.memorandum-section h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #F97316;
  margin-bottom: 10px;
}

.memorandum-section p {
  font-style: italic;
  color: #444;
  font-size: 1.1rem;
  margin-bottom: 40px;
}

.memorandum-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease;
  overflow: hidden;
}

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

/* Individual background colors */
.card.blue {
  background-color: #e8ecf3;
}

.card.orange {
  background-color: #e8ecf3;
  color: #fff;
}

.card.deeporange {
  background-color: #e8ecf3;
  color: #fff;
}

.card.purple {
  background-color: #e8ecf3;
  color: #fff;
}

.profile-pic {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  margin-bottom: 10px;
}

.card h3 {
  font-size: 1.3rem;
  margin: 5px 0;
}

.card span {
  font-weight: 500;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 15px;
}

.handwriting {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  padding: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.handwriting img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 600px) {
  .memorandum-section h1 {
    font-size: 2rem;
  }

  .memorandum-section p {
    font-size: 1rem;
  }
}




.vm-section {
  padding: 80px 20px;
  background: #fff;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.vm-header {
  text-align: center;
  margin-bottom: 48px;
}

.vm-subtitle {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1D3557;
  border-bottom: 2px solid #1D3557;
  padding-bottom: 4px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.vm-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #222;
}

/* Grid */
.vm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Cards */
.vm-card {
  background: #fff8f4;
  border-top: 4px solid transparent;
  padding: 32px;
  border-radius: 8px;
  /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);*/
  box-shadow: 0 8px 20px 6px rgba(249, 115, 22, 0.6);
  transition: box-shadow 0.3s ease;
}

.vm-card:hover {
  box-shadow: 0 8px 20px 6px rgba(249, 115, 22, 0.6);
  /* background-color: #F97316; */
}

/* Vision card border color */
.vision-card {
  border-top-color: #1D3557;
  /* primary color */
}

/* Mission card border color */
.mission-card {
  border-top-color: #f59e0b;
  /* accent color */
}

/* Card Header */
.vm-card-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.vm-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}

.vision-icon {
  background: rgba(29, 53, 87, 0.1);
  color: #1D3557;
}

.mission-icon {
  background: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
}

.vm-card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #222;
  margin-bottom: 4px;
}

.vm-divider {
  width: 64px;
  height: 4px;
  border-radius: 2px;
}

.vision-divider {
  background: #1D3557;
}

.mission-divider {
  background: #f59e0b;
}

/* List */
.vm-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vm-list li {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
  margin-bottom: 12px;
  position: relative;
  padding-left: 20px;
}

.vm-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 1.2rem;
}

.vision-card .vm-list li::before {
  color: #1D3557;
}

.mission-card .vm-list li::before {
  color: #f59e0b;
}

/* Responsive */
@media (max-width: 768px) {
  .vm-grid {
    grid-template-columns: 1fr;
  }

  .vm-title {
    font-size: 2rem;
  }
}



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

.acheivements {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 5%;
  background: #f6f8fb;
  gap: 50px;
}

/* Left content */
.acheivements-left {
  flex: 1.5;
}

.acheivements-left h2 {
  font-size: 2.8rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #ff6f1e;
}

.acheivements-left p {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 40px;
  max-width: 350px;
  line-height: 1.5;
}

/* Arrow buttons */
.acheivements-arrows {
  display: flex;
  gap: 20px;
}

.acheivements-arrows button {
  width: 60px;
  height: 60px;
  background: #ff6b3d;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  transition: background 0.3s;
}

.acheivements-arrows button:hover {
  background: #ff4f1a;
}

/* Right carousel */
.acheivements-right {
  flex: 2;
  overflow: hidden;
}

.acheivements-carousel {
  width: calc((360px*2)+30px);
  overflow: hidden;
  position: relative;
}

.acheivements-track {
  display: flex;
  gap: 30px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.acheivements-card {
  min-width: 280px;
  /* Fixed card width */
  height: 350px;
  /* Fixed card height */
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.acheivements-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Show the full image without cropping */
  background: #fff;
  /* Optional: background behind transparent images */
  padding: 10px;
  /* Add some padding for neat look */
  border-radius: 10px;
}



/* Section Base */
.testimonials-section {
  padding: 80px 20px;
  background: #f9f7f7;
}

/* Header */
.testimonials-header {
  text-align: center;
  margin-bottom: 48px;
}

.subtitle {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1D3557;
  border-bottom: 2px solid #1D3557;
  padding-bottom: 4px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #222;
  margin-bottom: 12px;
}

.description {
  font-size: 1rem;
  color: #555;
  max-width: 600px;
  margin: 0 auto;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ===== DESKTOP & TABLET GRID ===== */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== MOBILE SIDE SCROLL ===== */
@media (max-width: 768px) {
  .testimonials-grid {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    scroll-snap-type: x mandatory;
    padding-bottom: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .testimonial-card {
    min-width: 100%;
    /* Reduced width */
    max-width: 75%;
    padding: 18px;
  }

  .testimonial-text {
    height: auto;
    /* Remove fixed height */
    max-height: 140px;
    /* Limit card height */
    overflow: hidden;
    /* No inner scroll */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    /* Show only 6 lines */
    -webkit-box-orient: vertical;
  }

  .quote-icon {
    font-size: 4rem;
    /* Smaller quote on mobile */
    margin-bottom: -20px;
  }

  .testimonial-author p {
    font-size: 12px;
  }

  /* Hide scrollbar */
  .testimonials-grid::-webkit-scrollbar {
    display: none;
  }
}

/* ===== CARD ===== */
.testimonial-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  line-height: normal;
}

.testimonial-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
  background-color: #F97316;
  color: #fff;
}

/* Quote Icon */
.quote-icon {
  font-size: 6.5rem;
  color: rgba(29, 53, 87, 0.2);
  margin-bottom: -45px;
}

/* Text */
.testimonial-text {
  font-style: italic;
  color: #555;
  line-height: 1.6;
  margin-bottom: 16px;
  height: 200px;
  overflow: auto;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: block;
}

.testimonial-author {
  display: flex;
  gap: 10px;
}

/* Author */
.testimonial-author h4 {
  font-weight: 600;
  margin-bottom: 2px;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  color: #000;
}

.testimonial-author img {
  border-radius: 50%;
}

.testimonial-author p {
  font-size: 0.875rem;
}



/* ===== TESTIMONIALS CAROUSEL ===== */
.testimonial-carousel-wrapper {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.testimonial-carousel-track {
    display: flex;
    gap: 25px;
    transition: transform 0.4s ease;
}

/* SHOW 4 CARDS DESKTOP */
.testimonial-card {
    flex: 0 0 calc(25% - 20px);   /* 4 cards */
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    padding: 20px;
}

/* Arrows */
.testimonial-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #1d355763;
    color: #fff;
    border: none;
    font-size: 24px;
    padding: 7px 16px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
}

/* .testimonial-btn.prev { left: -5px; }
.testimonial-btn.next { right: -5px; } */

.testimonial-btn:hover {
    background: #000;
}

/* RESPONSIVE: 2 CARDS TABLET */
@media (max-width: 992px) {
    .testimonial-card {
        flex: 0 0 calc(50% - 20px);
    }
}

/* RESPONSIVE: 1 CARD MOBILE */
@media (max-width: 600px) {
    .testimonial-card {
        flex: 0 0 100%;
    }

    .testimonial-btn.prev { left: 5px; }
    .testimonial-btn.next { right: 5px; }
}



/* Responsive */
@media (max-width: 768px) {
  .title {
    font-size: 2rem;
  }
}


/* ===== PARENT SAYS SECTION ===== */
.parent-section {
  background: #f9f7f7;
}

/* --- HEADER GRID (if needed elsewhere) --- */
.parent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}

/* ===== CARD DESIGN ===== */
.parent-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  text-align: center;
  padding: 16px;
  transition: 0.3s;
}

.parent-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

/* ==========================================================
   ================  CAROUSEL SECTION  =====================
   ========================================================== */

.parent-carousel-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 20px 0;
}

.parent-carousel-track {
  display: flex;
  gap: 25px;
  transition: transform 0.4s ease;
}

/* SHOW 2 VIDEOS BY DEFAULT */
.parent-carousel-item {
  flex: 0 0 calc(50% - 15px);
}

/* ===== Thumbnail ===== */
.video-thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.video-thumb img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 12px;
}

/* Play Button */
.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* ===== NAVIGATION BUTTONS ===== */
.parent-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #2b2b2b;
  color: #fff;
  border: none;
  padding: 5px 14px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
}

.parent-carousel-btn.prev {
  left: 0px;
}

.parent-carousel-btn.next {
  right: 0px;
}

.parent-carousel-btn:hover {
  background: #000;
}

/* ===== CARD TEXT ===== */
.parent-card h4 {
  margin-top: 15px;
  font-size: 16px;
  font-weight: 600;
  color: #1D3557;
}

.parent-card p {
  font-size: 14px;
  color: #555;
}

/* ==========================================================
   ====================  VIDEO MODAL  ======================
   ========================================================== */

.parent-video-modal {
  display: none;
  position: fixed;
  z-index: 99999;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
}

.parent-video-modal video {
  width: 50%;
  max-width: 900px;
  border-radius: 14px;
  background: #000;
}

.close-modal {
  position: absolute;
  top: 25px;
  right: 35px;
  font-size: 36px;
  color: #fff;
  cursor: pointer;
}

/* ==========================================================
   ======================= RESPONSIVE ======================
   ========================================================== */

/* MOBILE + TABLET */
@media (max-width: 768px) {

  /* make carousel show 1 item */
  .parent-carousel-item {
    flex: 0 0 100%;
  }

  .video-thumb img {
    height: 200px;
  }

  .parent-video-modal video {
    width: 95%;
  }
}

/* MOBILE — single column grid */
@media (max-width: 600px) {
  .parent-grid {
    grid-template-columns: 1fr;
  }
}



/* Intro Banner Section */
.scholor-banner {
  position: relative;
  height: 50vh;
  background: url('./images/scholorship new.jpeg') center center / cover no-repeat;
  display: flex;
  align-items: center;
  padding-left: 8%;
  color: #fff;
  overflow: hidden;
}

/* Dark Overlay (lower opacity for better image visibility) */
.scholor-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  background: rgba(0, 0, 0, 0.55);
  /* Reduced opacity */
  z-index: 1;
}

.scholor-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.scholor-content h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  font-weight: bold;
}

.scholor-highlight {
  color: #f15a29;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
}

.scholor-content p {
  margin-top: 20px;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 650px;
}

/* Glowing Play Button */
.scholor-play {
  position: absolute;
  right: 20%;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  z-index: 2;
}

.scholor-play a {
  background: #FF7057;
  color: #fff;
  padding: 12px 40px;
  border-radius: 6px;
  transition: background 0.3s ease, transform 0.3s ease;
  font-size: 20px;
  text-decoration: none;
}

/* Responsive */
@media(max-width: 768px) {
  .scholor-banner {
    padding: 0 20px;
    text-align: center;
    justify-content: center;
  }

  .scholor-content h1 {
    font-size: 2.5rem;
  }
}


/* Intro Banner Section */
.intro-banner {
  position: relative;
  height: 75vh;
  background: url('./images/intro_video.JPG') center center / cover no-repeat;
  display: flex;
  align-items: center;
  padding-left: 8%;
  color: #fff;
  overflow: hidden;
}

.about-banner {
  position: relative;
  height: 75vh;
  background: url('./images/resource/School_Song.jpg') center center / cover no-repeat;
  display: flex;
  align-items: center;
  padding-left: 8%;
  color: #fff;
  overflow: hidden;
}

/* Dark Overlay (lower opacity for better image visibility) */
.intro-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75vh;
  background: rgba(0, 0, 0, 0.55);
  /* Reduced opacity */
  z-index: 1;
}

.intro-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.intro-content h1 {
  font-size: 3.5rem;
  line-height: 1.2;
  font-weight: bold;
}

.intro-highlight {
  color: #f15a29;
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 5px;
}

.intro-content p {
  margin-top: 20px;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 500px;
}

/* Glowing Play Button */
.intro-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: 90px;
  border: 3px dashed rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.1);
  z-index: 2;
  animation: glowPulse 2s infinite ease-in-out;
}

.intro-play button {
  background: transparent;
  border: none;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  font-size: 28px;
  color: white;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.video-modal.active {
  display: flex;
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 900px;
}

.video-modal video {
  width: 100%;
  border-radius: 12px;
  background: #000;
}

.close-modal {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 32px;
  background: none;
  color: #fff;
  border: none;
  cursor: pointer;
}


#openVideo {
  font-size: 22px;
  padding: 10px 16px;
  cursor: pointer;
}


/* Glowing Animation */
@keyframes glowPulse {
  0% {
    box-shadow: 0 0 10px rgba(241, 90, 41, 0.6),
      0 0 20px rgba(241, 90, 41, 0.4);
    transform: translateY(-50%);
  }

  50% {
    box-shadow: 0 0 25px rgba(241, 90, 41, 0.9),
      0 0 50px rgba(241, 90, 41, 0.7);
    transform: translateY(-50%);
  }

  100% {
    box-shadow: 0 0 10px rgba(241, 90, 41, 0.6),
      0 0 20px rgba(241, 90, 41, 0.4);
    transform: translateY(-50%);
  }
}

/* Hover Effect */
.intro-play:hover {
  background: rgba(241, 90, 41, 0.8);
  border-color: #f15a29;
  transition: 0.3s;
}

/* Responsive */
@media(max-width: 768px) {
  .intro-banner {
    padding: 0 20px;
    text-align: center;
    justify-content: center;
  }

  .intro-content h1 {
    font-size: 2.5rem;
  }

  .intro-play {
    right: 50%;
    transform: translate(50%, -50%);
  }
}




.news-section {
  padding: 80px 20px;
  background: #fff;
}

/* Header */
.news-header {
  text-align: center;
  margin-bottom: 48px;
}

.subtitle {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1D3557;
  border-bottom: 2px solid #1D3557;
  padding-bottom: 4px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #222;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* Grid */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 1024px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.news-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.news-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

/* Image */
.news-image {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.news-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.news-card:hover .news-image img {
  transform: scale(1.1);
}

.overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

/* Content */
.news-content {
  padding: 20px;
}

.news-date {
  font-size: 0.875rem;
  color: #555;
  margin-bottom: 8px;
}

.news-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #F97316;
  margin-bottom: 12px;
  transition: color 0.3s;
}

.news-card:hover .news-title {
  color: #FF6F1E;
}

.news-desc {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 12px;
}

/* Read More */
.read-more {
  color: #F97316;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.3s;
}

.read-more:hover {
  transform: translateX(15px);
}


.enrollment-form {
  max-width: 420px;
  margin: 60px auto;
  background: #fff;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  border-bottom-left-radius: 0px;
}

/* Header */
.enrollment-form .form-header {
  background: linear-gradient(135deg, #ffa726, #ff9800);
  color: #fff;
  padding: 20px 25px;
  /* border-top-left-radius: 20px;
  border-top-right-radius: 20px; */
  border-radius: 50px;
  border-bottom-left-radius: 0px;
}

.enrollment-form .form-header h3 {
  color: #fff;
  text-align: center;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.enrollment-form .form-header p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #fff8e1;
}

/* Form Body */
.enrollment-form form {
  padding: 25px;
}

.enrollment-form label {
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.enrollment-form .form-control {
  width: 100%;
  background: #f5f7fa;
  border: none;
  padding: 12px 15px;
  border-radius: 10px;
  margin-top: 6px;
  font-size: 14px;
  transition: 0.3s;
}

.enrollment-form .form-control:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ff9800;
  background: #fff;
}

/* Button */
.enrollment-form button[type="submit"] {
  width: 100%;
  background: linear-gradient(135deg, #ffa726, #ff9800);
  border: none;
  color: #fff;
  padding: 14px 0;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.enrollment-form button[type="submit"]:hover {
  background: #fb8c00;
}

/* Small text */
.enrollment-form p {
  text-align: left;
  font-size: 13px;
  color: #666;
  margin-top: 10px;
}


.admission-section {
  position: relative;
  padding: 50px 20px;
  /* background: linear-gradient(135deg, #25667D, rgba(48, 109, 131, 0.9)); */
  color: #f1f1f1;
  overflow: hidden;
  background-color: #673BB7;
  display: flex;
}

.decorative {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255, 111, 30, 0.1);
  filter: blur(80px);
  z-index: 1;
}

.decorative.top-right {
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

.decorative.bottom-left {
  bottom: 0;
  left: 0;
  transform: translate(-50%, 50%);
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}


.header-image img {
  height: 100px;
  border-radius: 8px;
  margin-left: 20px;
}





body {
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.appointment-section {
  text-align: center;
  padding: 80px 20px;
}

.appointment-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ff7350;
  margin-bottom: 40px;
}

.appointment-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 50px;
  justify-content: center;
  max-width: 1300px;
  margin: 0 auto;
}

.appointment-card {
  background-color: #f7faff;
  border-radius: 15px;
  padding: 40px 20px;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.appointment-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.appointment-card a {
  font-size: smaller;
}

/* Background color variations */
.light-blue {
  background-color: #f0f7ff;
}

.light-peach {
  background-color: #fff5ed;
}

/* Icon circle */
.icon-circle {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px auto;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

.icon-circle i {
  font-size: 46px;
  color: #000;
}

.appointment-card h3 {
  font-size: 1.5rem;
  color: #000;
  font-weight: 600;
  margin-bottom: 8px;
}

.appointment-card p {
  font-size: 0.9rem;
  color: #666;
  margin: 0;
}

@media (max-width: 600px) {
  .appointment-section h2 {
    font-size: 1.7rem;
  }

  .appointment-card {
    padding: 30px 15px;
  }

  .icon-circle {
    width: 70px;
    height: 70px;
  }

  .icon-circle i {
    font-size: 28px;
  }
}

.admission-content {
  display: flex;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.admission-icon {
  width: 80px;
  height: 80px;
  background: #FF6F1E;
  color: #fff;
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  margin: 0 auto 20px;
}

.admission-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 16px;
}

.admission-subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.admission-year {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 40px;
}

.admission-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}

.ad-feature-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 60px 25px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  transition: transform 0.3s, box-shadow 0.3s;
  width: 270px;
}

.ad-feature-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 12px 0 6px;
}

.ad-feature-card p {
  font-size: 1rem;
  color: #fff;
  font-weight: 300;
}

.admission-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn {
  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #FF7057;
  color: #fff;
}

.btn-outline {
  border: 2px solid #f1f1f1;
  color: #f1f1f1;
  background: transparent;
}

.btn-outline:hover {
  background: #f1f1f1;
  color: #1D3557;
}


.footer-section {
  background: #002b5c;
  color: #ffffff;
  padding: 50px 20px 20px;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  line-height: 26px;
}

.footer-section h3 {
  font-weight: 900;
  font-size: 22px;
  color: white;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.container.footer-container {
  max-width: 1400px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* Left side (Contacts) */
.footer-left {
  flex: 2;
}

.footer-contacts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.contact-box h3 {
  font-size: 16px;
  font-weight: 600;
  color: #FF7057;
  margin-bottom: 10px;
}

.contact-box ul {
  list-style: none;
  padding: 0;
}

.contact-box ul li {
  font-size: 14px;
  margin-bottom: 6px;
}

.contact-box ul li i {
  color: #FF7057;
  margin-right: 8px;
}

/* Right side (Brand, Links, Social) */
.footer-right {
  flex: 1;
  min-width: 300px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.brand-logo {
  width: 50px;
  height: 50px;
  background: #FF7057;
  color: #002b5c;
  font-size: 22px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.footer-desc {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 5px;
  color: white;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

.footer-affiliation {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
  color: white;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

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

.footer-links li {
  margin-bottom: 6px;
}

.footer-links li a {
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-links li a:hover {
  color: #FF7057;
}

.footer-social {
  margin-top: 15px;
}

.footer-social a {
  margin-right: 12px;
  font-size: 18px;
  color: #ffffff;
  transition: color 0.3s;
}

.footer-social a:hover {
  color: #FF7057;
}

/* Bottom Bar */
.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 15px;
  font-size: 14px;
  opacity: 0.8;
  margin-top: 30px;
}

.footer-bottom p {
  color: white;
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
}


/* Gallery view */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 9999;
  /* Highest layer */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* When modal is open */
.modal.active {
  display: flex;
}

/* Image inside modal */
.modal img {
  max-width: 90%;
  max-height: 80%;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

.modal img:hover {
  transform: scale(1.02);
}

/* Navigation arrows */
.modal .prev,
.modal .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  padding: 10px;
  user-select: none;
  transition: color 0.3s;
}

.modal .prev:hover,
.modal .next:hover {
  color: #f97316;
}

.modal .prev {
  left: 30px;
}

.modal .next {
  right: 30px;
}

/* Close button */
.modal .close {
  position: absolute;
  top: 25px;
  right: 35px;
  font-size: 40px;
  color: #fff;
  cursor: pointer;
  transition: color 0.3s;
}

.modal .close:hover {
  color: #f97316;
}

/* Prevent background interference when modal is open */
body.modal-open {
  overflow: hidden;
  /* Disable scroll */
}

/* When modal is active, ensure navbar/container don't overlap */
body.modal-open .navbar {
  position: static !important;
  z-index: auto !important;
}

body.modal-open .container {
  position: static !important;
  z-index: auto !important;
}

/* Gallery view */


@media (max-width: 600px) {
  .container.footer-container {
    flex-direction: column;
  }

  .footer-contacts-grid {
    grid-template-columns: 1fr;
  }
}


/* Memorandum */
.memorandum-header {
  text-align: center;
  margin-bottom: 50px;
}

.memorandum-subtitle {
  color: #424242;
  font-style: italic;
  font-size: 1rem;
}

.memorandum-title {
  font-size: 2.2rem;
  font-weight: bold;
  margin-top: 10px;
  color: #ffffff;
}

/* Carousel Section */
.guest-carousel {
  padding: 40px 0;
}

.carousel-container {
  max-width: 1200px;
  margin: auto;
  position: relative;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-item {
  background: #ffffff00;
  margin: 10px;
  flex: 0 0 calc(25% - 20px);
  text-align: center;
  border-radius: 6px;
  /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);*/
}

.carousel-item img {
  width: 90%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.carousel-item h3 {
  font-size: 1.2rem;
  margin-top: 10px;
  color: #333;
}

.carousel-item p {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 10px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #316e854a;
  border: none;
  color: #ffffff7a;
  font-size: 2rem;
  padding: 2px 15px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.carousel-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}

@media(max-width:600px) {
  .carousel-item {
    flex: 0 0 calc(50% - 20px);
  }
}


.logo-carousel {
  background: #f9f9f9;
  padding: 40px 0;
  overflow: hidden;
  text-align: center;
}

.logo-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.logo-track {
  display: flex;
  width: calc(200px * 10);
  /* 5 logos × 2 */
  animation: scroll 20s linear infinite;
}

.logo-track img {
  height: 80px;
  width: auto;
  margin: 0 40px;
  object-fit: contain;
  opacity: 0.85;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.logo-track img:hover {
  transform: scale(1.1);
  opacity: 1;
}

/* Smooth scrolling animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}


.image-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  justify-content: center;
  align-items: center;
}

.image-modal img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 10px;
  animation: zoomIn 0.3s ease;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

@keyframes zoomIn {
  from {
    transform: scale(0.7);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.whatsapp-float {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 25px;
  right: 25px;
  background-color: #25D366;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-icon {
  width: 35px;
  height: 35px;
}

.whatsapp-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}



.alumni-form-section {
    background: #f6f8fc;
    padding: 70px 0;
}

.alumni-card {
    background: #002B5C;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.page-title {
    padding-top: 170px !important;
    padding-bottom: 110px !important;
}

.page-title .content-box h1 {
    font-size: 52px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    margin-bottom: 15px !important;
}

.alumni-card .alumni-title {
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    text-align: center;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.alumni-association-section .alumni-title,
.alumni-title-dark {
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    text-align: center;
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #002B5C !important;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.alumni-subtitle {
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    text-align: center;
    margin-bottom: 35px;
    color: #F97316 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.form-section-title {
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    margin-top: 35px;
    margin-bottom: 20px;
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    border-left: 5px solid #F97316;
    padding-left: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 0 8px 8px 0;
}

.alumni-btn-wrapper {
    text-align: center;
    width: 100%;
    margin-top: 35px;
}

.alumni-btn {
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    background: linear-gradient(135deg, #F97316 0%, #ea580c 100%);
    border: none;
    padding: 16px 45px;
    color: #ffffff !important;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.4);
    letter-spacing: 0.5px;
    width: auto;
    min-width: 260px;
    text-align: center;
}

.alumni-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(249, 115, 22, 0.55);
}

.alumni-btn:active:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(249, 115, 22, 0.35);
}

.alumni-btn:disabled {
    background: #64748b !important;
    color: #cbd5e1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.6;
    transform: none !important;
}

.alumni-association-section {
    background: #f7f9fc;
}

.alumni-container {
    max-width: 900px;
}

.alumni-content {
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    background: #fff;
    padding: 40px;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    line-height: 1.7;
}

.alumni-content p{
  font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
}

.alumni-content h4 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
    margin-top: 25px;
    color: #1D3557;
    font-weight: 600;
}

.alumni-content ul {
    padding-left: 20px;
}

.alumni-content ul li {
    margin-bottom: 8px;
}

.alumni-contact-box {
    margin-top: 30px;
    background: #f1f5ff;
    padding: 20px;
    border-left: 4px solid #F97316;
    border-radius: 8px;
}

.alumini-logo{
  border-radius: 50px;
  width: 300px;
}

.alumini-txt{
  text-align: center;
  font-size: 20px;
  background-color: #F97316;
  padding: 5px 5px;
  border-radius: 10px;
}

.alumini-txt a{
  font-weight: 600;
  color: white;
  text-decoration: none;
}


/* Fixed navbar only for desktop view */
@media (max-width: 992px) {

  .nav-links {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  /* Disable hover dropdowns on mobile */
  .dropdown-hd:hover>.dropdown-menu {
    display: none;
  }

  .logo img {
    height: 55px;
  }

  .mobile-menu {
    display: none;
  }

  .mobile-menu.active {
    display: flex;
  }

  .carousel-item {
    flex: 0 0 calc(33.33% - 20px);
  }

  .about-grid {
    gap: 48px;
  }

  .acheivements {
    flex-direction: column;
    text-align: center;
    overflow: hidden;
  }

  .acheivements-arrows {
    justify-content: center;
  }

  .acheivements-track {
    gap: 20px;
  }

  .admission-section {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media (max-width: 768px) {
  .carousel-item {
    margin: 9.2px;
    flex: 0 0 100%;
    /* Show 1 at a time on mobile */
  }

  .logo-track {
    animation-duration: 15s;
  }

  .logo-track img {
    height: 60px;
    margin: 0 25px;
  }
}

@media(max-width: 431px) {

  /* .navbar{
    width: 320px;
  } */

  .topbar {
    display: none;
  }

  .topbar-content {
    display: none;
    justify-content: center;
    font-size: 18px;
    gap: 7px;
  }

  .topbar-right {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
  }

  .topbar-bg-left {
    background: #1e3a8a;
  }

  .topbar-bg-right {
    background-color: #1e3a8a;
  }

  .logo img {
    height: 60px;
  }

  .hero-carousel {
    padding: 0px;
  }

  .hero-content {
    margin: 0px 10px;
  }

  .features-grid {
    display: block;
  }

  .feature-card {
    margin-top: 10px;
  }

  .stats-card {
    padding: 30px 20px;
    width: 100%;
  }

  .image-wrapper {
    width: 100%;
  }

  .image-overlay {
    width: 100%;
  }

  .about-grid {
    display: flex;
    flex-direction: column;
  }

  .about-title {
    font-size: 28px;
  }

  .about-intro {
    font-size: 20px;
  }

  .about-text {
    font-size: 0.9rem;
    text-align: justify;
    width: 100%;
  }

  .cta-btn {
    padding: 10px 20px;
  }

  .about-section {
    padding: 20px 0px;
  }

  .vertical-card {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .vm-section {
    padding: 50px 20px;
  }

  .scholor-content {
    margin-top: -30px;
  }

  .scholor-content h1 {
    font-size: 1.6rem;
  }

  .scholor-content p {
    font-size: 0.9rem;
  }

  .scholor-play {
    margin-top: 115px;
  }

  .scholor-play button {
    padding: 7px 40px;
  }

  .acheivements-left h2 {
    font-size: 2rem;
  }

  .acheivements-carousel {
    width: 360px;
  }

  .intro-content {
    margin-top: -30px;
  }

  .intro-content h1 {
    font-size: 1.9rem;
  }

  .intro-play {
    right: 35%;
    margin-top: auto;
  }

  .admission-features {
    display: flex;
    flex-direction: column;
    margin-left: -15px;
    align-items: center;
  }

  .footer-section {
    padding: 0px 0px 20px;
  }
}

@media(max-width: 375px) {
  .navbar {
    width: 350px;
  }

}

@media(max-width: 320px) {
  .navbar {
    width: 320px;
  }
}








/*
.acheivements-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.acheivements-track {
  display: flex;
  gap: 20px;
  transition: transform 0.6s ease-in-out;
}

.acheivements-card {
  flex: 0 0 calc(33.33% - 20px);
  background: #fff;
  border-radius: 15px;
}

/* Tablet 
@media (max-width: 992px) {
  .acheivements-card {
    flex: 0 0 calc(50% - 20px);
  }
}

/* Premium Payment QR & Screenshot Upload Section */
.payment-card-wrap {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08) 0%, rgba(249, 115, 22, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 30px;
    margin-top: 30px;
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

.payment-card-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #F97316 0%, #FFB800 100%);
}

.qr-frame-box {
    background: #ffffff;
    padding: 14px;
    border-radius: 14px;
    display: inline-block;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    border: 2px solid #e2e8f0;
    position: relative;
}

.qr-frame-box:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 14px 32px rgba(249, 115, 22, 0.3);
    border-color: #F97316;
}

.qr-frame-box img {
    max-width: 260px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.upi-copy-badge {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 6px 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.upi-copy-badge:hover {
    background: #F97316;
    color: #ffffff;
    border-color: #F97316;
}

.custom-upload-zone {
    background: #ffffff;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.custom-upload-zone:hover {
    border-color: #F97316;
    background: #fffdfa;
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.15);
}

.custom-upload-zone i {
    font-size: 36px;
    color: #F97316;
    margin-bottom: 8px;
    display: block;
}

.preview-badge-container {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---------------------------------------------------------------
   Typography — Fraunces for headings, Manrope for everything else.
   --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.alumni-title, .alumni-title-dark, .alumni-steps-title,
.sec-title h2, .sec-title h1 {
  /* !important is needed here: several title rules above set the body face on
     headings with !important, which would otherwise win. */
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* ---------------------------------------------------------------
   Alumni header button — the only call to action in the navbar.

   This lives at the end of the file on purpose: .btn-primary is
   redefined three times above (#f97316, #ffcc00, #FF7057), so an
   earlier rule here would be overridden by those later ones.
   --------------------------------------------------------------- */
a.btn-primary.btn-alumni {
  background: #002B5C;
  color: #ffffff !important;
  border: 1.5px solid #002B5C;
}

a.btn-primary.btn-alumni:hover {
  background: #001433;
  color: #ffffff !important;
  border-color: #001433;
}


/* =============================================================================
   HOMEPAGE POLISH LAYER
   Appended last on purpose — several section rules earlier in this file set
   their own backgrounds and paddings, so an earlier block would be overridden.

   What this fixes, measured on the live page before the change:
     · six unrelated section backgrounds (salmon #FF8A82, mint #B8EAD1,
       purple #673BB7, three different greys) against a navy/orange brand
     · section padding running 0 / 40 / 50 / 60 / 80px with no scale
     · section headings at 35.2 / 40 / 44.8px with no scale
   ============================================================================= */

:root {
  /* Brand — taken from the footer and the existing accent, not invented. */
  --nb-navy: #002B5C;
  --nb-navy-deep: #001B3D;
  --nb-accent: #F97316;
  --nb-ink: #1C2430;
  --nb-muted: #5B6779;
  --nb-line: #E3E9F2;
  --nb-surface: #F5F8FC;

  /* One vertical rhythm for every content section. */
  --nb-sec-y: clamp(56px, 7vw, 96px);
  /* One size for every section title. */
  --nb-title: clamp(28px, 3.2vw, 40px);
}

/* -----------------------------------------------------------------------------
   1. Vertical rhythm — every content section breathes the same.
   Banner sections keep their own spacing; they are full-bleed imagery.
   -------------------------------------------------------------------------- */
.about-section,
.memorandum-section,
.vm-section,
.guest-carousel,
.acheivements,
.testimonials-section,
.admission-section,
.news-section {
  padding-top: var(--nb-sec-y);
  padding-bottom: var(--nb-sec-y);
}

.logo-carousel {
  padding-top: calc(var(--nb-sec-y) * 0.55);
  padding-bottom: calc(var(--nb-sec-y) * 0.55);
}

/* -----------------------------------------------------------------------------
   2. Background system — alternating white and one tint, with navy reserved
   for the admission call to action and the footer.
   -------------------------------------------------------------------------- */
.about-section,
.vm-section,
.acheivements,
#parents-says.testimonials-section,
.logo-carousel {
  background: #ffffff;
}

.memorandum-section,
.guest-carousel,
#testimonials.testimonials-section,
.news-section {
  background: var(--nb-surface);
}

/* The salmon panel used a teal body colour that measured 3.56:1 — under AA. */
.memorandum-section,
.memorandum-section p,
.memorandum-section li {
  color: var(--nb-ink);
}

.guest-carousel {
  /* Overrides the inline background="#B8EAD1" left on this section. */
  background: var(--nb-surface) !important;
}

/* Admission is the page's primary conversion point: give it the brand navy. */
.admission-section {
  background: linear-gradient(160deg, #013A78 0%, var(--nb-navy) 55%, var(--nb-navy-deep) 100%);
}

/* -----------------------------------------------------------------------------
   3. Section titles — one scale, one face, one colour.
   -------------------------------------------------------------------------- */
.memorandum-title,
.vm-title,
.acheivements > h2,
.acheivements .title,
.testimonials-section .title,
.news-section .title,
.admission-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-size: var(--nb-title) !important;
  font-weight: 600 !important;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--nb-navy);
}

/* Titles that sit on the navy admission panel stay legible. */
.admission-section .admission-title,
.admission-section > .container > h2 {
  color: #ffffff;
}

/* The section subtitle that follows a title. */
.memorandum-section > .container > p,
.vm-section > .container > p,
.news-section > .container > p {
  color: var(--nb-muted);
  font-size: 15px;
  line-height: 1.7;
}

/* -----------------------------------------------------------------------------
   4. Card language — one radius, one border, one shadow across the page.
   -------------------------------------------------------------------------- */
.acheivements .card,
.acheivements .achievement-card,
.news-section .news-card,
.news-section .card,
.testimonials-section .testimonial-card,
.vm-section .vm-card {
  border-radius: 14px;
  border: 1px solid var(--nb-line);
  box-shadow: 0 6px 20px rgba(0, 43, 92, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.acheivements .card:hover,
.news-section .news-card:hover,
.testimonials-section .testimonial-card:hover,
.vm-section .vm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 43, 92, 0.11);
}


/* -----------------------------------------------------------------------------
   5. Feature cards — the five pastel fills (#F5C0BA, #B8EAD1, #FEEBE7,
   #C6D0F4, #82b8f0) had no relationship to each other or to the brand. The
   colour now lives in the icon badge, which already carries gradient classes.
   -------------------------------------------------------------------------- */
.features .feature-card {
  background: #ffffff;
  border: 1px solid var(--nb-line);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 43, 92, 0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.features .feature-card:hover {
  transform: translateY(-4px);
  border-color: #cfdcee;
  box-shadow: 0 16px 36px rgba(0, 43, 92, 0.12);
}

.features .feature-card h3 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  color: var(--nb-navy);
}

.features .feature-card p {
  color: var(--nb-muted);
  line-height: 1.65;
}

/* -----------------------------------------------------------------------------
   6. Hero call to action — the hero had no action at all, so a visitor who
   landed on the homepage had nothing to click toward admissions.
   -------------------------------------------------------------------------- */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

.hero-cta i {
  font-size: 13px;
  transition: transform .2s ease;
}

.hero-cta:hover i {
  transform: translateX(3px);
}

/* Navy on the brand orange measures 4.99:1 (AA). White on the same orange is
   only 2.80:1, so the label is navy rather than the orange being darkened —
   this keeps the exact brand colour used across the rest of the site. */
.hero-cta-primary {
  background: var(--nb-accent);
  color: var(--nb-navy);
  box-shadow: 0 8px 22px rgba(249, 115, 22, 0.32);
}

.hero-cta-primary:hover {
  background: #ffa04d;
  color: var(--nb-navy);
  transform: translateY(-2px);
}

/* Sits on photography, so it needs its own backdrop rather than a plain border. */
.hero-cta-ghost {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  backdrop-filter: blur(6px);
}

.hero-cta-ghost:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

@media (max-width: 480px) {
  .hero-actions { gap: 10px; }
  .hero-cta { flex: 1 1 100%; justify-content: center; padding: 14px 20px; }
}

/* -----------------------------------------------------------------------------
   7. Mobile density — measured at 375px before this block:
        admission section 2175px (2.7 screens), footer 1887px (2.3 screens).
   The admission feature cards carried 60px of vertical padding and the footer's
   five contact blocks sat on a 25px grid gap with loose headings.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* --- Admission --- */
  .admission-section .ad-feature-card {
    padding: 24px 20px;
  }

  .admission-section .admission-features {
    gap: 14px;
  }

  .admission-section .admission-icon {
    transform: scale(0.8);
    transform-origin: center;
  }

  /* --- Footer --- */
  .footer-section .footer-contacts-grid {
    gap: 18px;
  }

  .footer-section .contact-box h3 {
    font-size: 14.5px;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .footer-section .contact-box ul {
    margin: 0;
  }

  .footer-section .contact-box ul li {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 5px;
  }

  .footer-section .footer-right {
    margin-bottom: 26px;
  }

  .footer-section .footer-right ul li {
    margin-bottom: 6px;
  }
}

/* Sub-label separating the alumni and parent groups inside the merged
   "Voices of Nava Bharath" section. */
.testimonials-section .voices-group-label {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--nb-navy);
  text-align: center;
  margin: 48px 0 22px;
  position: relative;
}

.testimonials-section .voices-group-label::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--nb-accent);
  margin: 10px auto 0;
}

@media (max-width: 767px) {
  .testimonials-section .voices-group-label { margin: 34px 0 18px; font-size: 17px; }
}