/* ==========================================================================
   New Generation Computer Center - Premium Design System & Stylesheet
   Location: Chakarbhata, Bilaspur, Chhattisgarh
   Theme: Modern, Corporate, Glassmorphism, Conversion-Focused
   ========================================================================== */


:root {
  /* Brand Colors */
  --primary-blue: #0B5ED7;
  --primary-dark-blue: #0A4EB5;
  --primary-light-blue: #E8F1FF;
  --accent-orange: #FF6B00;
  --accent-orange-hover: #E05D00;
  --accent-orange-light: #FFF2E8;
  --dark-slate: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-100: #F1F5F9;
  --slate-50: #F8FAFC;
  --white: #FFFFFF;
  --success-green: #10B981;
  --success-light: #ECFDF5;

  /* v2.0 additions (extend the existing system) */
  --slate-200: #E2E8F0;   /* was referenced in 5 places but never defined */
  --slate-300: #CBD5E1;   /* was referenced in 2 places but never defined */
  --section-y: 5rem;      /* vertical padding of every .section (reduced on mobile) */
  --focus-ring: var(--primary-blue);

  /* Glassmorphism Tokens */
  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px 0 rgba(11, 94, 215, 0.08);
  --glass-blur: blur(16px);
  
  /* Shadow System */
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 36px rgba(11, 94, 215, 0.12);
  --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.16);

  /* Radius System */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Typography */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  color: var(--slate-800);
  background-color: var(--slate-50);
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--dark-slate);
  font-weight: 700;
  line-height: 1.25;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

/* Layout Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Global Section Styling */
.section {
  padding: var(--section-y) 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 3.5rem auto;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1.1rem;
  background: var(--primary-light-blue);
  color: var(--primary-blue);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.section-tag.accent {
  background: var(--accent-orange-light);
  color: var(--accent-orange);
}

.section-title {
  font-size: 2.35rem;
  margin-bottom: 1rem;
  color: var(--dark-slate);
  letter-spacing: -0.02em;
}

.section-title span {
  color: var(--primary-blue);
  position: relative;
}

.section-subtitle {
  font-size: 1.1rem;
  color: var(--slate-600);
}

/* Button UI System */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.8rem 1.75rem;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  transition: all var(--transition-normal);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark-blue));
  color: var(--white);
  box-shadow: 0 4px 14px rgba(11, 94, 215, 0.28);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(11, 94, 215, 0.36);
}

.btn-accent {
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-orange-hover));
  color: var(--white);
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.28);
}

.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255, 107, 0, 0.36);
}

/* Student / Admin portal Login button */
.btn-login {
  background: #E8F0FE;
  color: var(--primary-blue);
  border: 2px solid transparent;
}

.btn-login:hover {
  background: #D6E4FD;
  color: var(--primary-dark-blue);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--dark-slate);
  border: 2px solid #CBD5E1;
}

.btn-outline:hover {
  background: var(--slate-100);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
  transform: translateY(-2px);
}

.btn-whatsapp {
  background: #25D366;
  color: #052E16; /* a11y: white on this green was 1.98:1; dark green text ~9:1, button colour unchanged */
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.28);
}

.btn-whatsapp:hover {
  background: #20BA5A;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(37, 211, 102, 0.36);
}

/* Notification Top Announcement Bar */
.top-bar {
  background: linear-gradient(90deg, var(--dark-slate) 0%, #1E1B4B 100%);
  color: var(--white);
  padding: 0.55rem 0;
  font-size: 0.85rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.top-bar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar-notice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.top-bar-badge {
  background: var(--accent-orange);
  color: #1A1A1A; /* a11y: white on orange was 2.85:1; dark text 6.1:1, badge colour unchanged */
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.top-bar-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.top-bar-info a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #CBD5E1;
  transition: color var(--transition-fast);
}

.top-bar-info a:hover {
  color: var(--white);
}

/* Header & Sticky Glass Navbar */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: all var(--transition-normal);
  padding: 0.75rem 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.navbar.scrolled {
  box-shadow: var(--shadow-md);
  padding: 0.55rem 0;
  background: rgba(255, 255, 255, 0.95);
}

.nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Official Logo Styling */
.brand-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.brand-logo-img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(11, 94, 215, 0.2);
  transition: transform var(--transition-bounce);
}

.brand-logo:hover .brand-logo-img {
  transform: scale(1.06) rotate(3deg);
}

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

.brand-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dark-slate);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.brand-tagline {
  font-size: 0.72rem;
  color: #B94D00; /* a11y: orange text on white was 2.83:1 -> 4.6:1 (same hue) */
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* the footer sits on a dark background, where the original bright orange is correct (6:1) */
.footer-brand .brand-tagline {
  color: var(--accent-orange);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
}

.nav-link {
  font-weight: 600;
  color: var(--slate-700);
  font-size: 0.925rem;
  transition: color var(--transition-fast);
  position: relative;
  padding: 0.35rem 0;
}

.nav-link:hover, .nav-link.active {
  color: var(--primary-blue);
  font-weight: 700;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: var(--primary-blue);
  transition: width var(--transition-fast);
  border-radius: 2px;
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mobile-toggle {
  display: none;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.75rem;
  font-size: 1.3rem;
  color: var(--dark-slate);
}

/* Mobile Drawer Overlay */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 290px;
  height: 100vh;
  height: 100dvh;
  background: var(--dark-slate);
  color: var(--white);
  z-index: 2500;
  padding: 2rem 1.5rem;
  padding-bottom: env(safe-area-inset-bottom, 1rem);
  transition: right 0.35s ease;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-nav-drawer.active {
  right: 0;
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-drawer-close {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-drawer-links {
  list-style: none;
  margin: 1.5rem 0;
}

.mobile-drawer-links li {
  margin-bottom: 1rem;
}

.mobile-drawer-links a {
  font-size: 1.05rem;
  font-weight: 600;
  color: #CBD5E1;
  display: block;
  padding: 0.5rem 0;
}

.mobile-drawer-links a:hover {
  color: var(--white);
}

/* HERO SECTION */
.hero {
  padding: 4rem 0 5rem 0;
  position: relative;
  background: radial-gradient(100% 100% at 50% 0%, #EBF3FF 0%, var(--slate-50) 100%);
  overflow: hidden;
}

.hero-glow-1 {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: rgba(11, 94, 215, 0.12);
  filter: blur(100px);
  border-radius: 50%;
  pointer-events: none;
}

.hero-glow-2 {
  position: absolute;
  bottom: -50px;
  left: -50px;
  width: 350px;
  height: 350px;
  background: rgba(255, 107, 0, 0.08);
  filter: blur(80px);
  border-radius: 50%;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  background: var(--white);
  border: 1px solid rgba(11, 94, 215, 0.2);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-700);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.hero-trust-badge .iso-pill {
  background: var(--primary-blue);
  color: var(--white);
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  font-weight: 700;
}

.hero-title {
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 1.25rem;
  color: var(--dark-slate);
}

.hero-title .highlight {
  background: linear-gradient(135deg, var(--primary-blue) 0%, #0045A5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--slate-600);
  line-height: 1.65;
  margin-bottom: 2rem;
  max-width: 620px;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero-highlights {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #E2E8F0;
}

.highlight-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--slate-700);
}

.highlight-item svg {
  color: var(--primary-blue);
  flex-shrink: 0;
}

.hero-media-wrapper {
  position: relative;
  z-index: 1;
}

.hero-image-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  border: 4px solid var(--white);
}

.hero-image-card img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  aspect-ratio: 4/3;
  transition: transform 0.6s ease;
}

.hero-image-card:hover img {
  transform: scale(1.03);
}

/* Floating Overlay Badges on Hero Image */
.hero-float-badge {
  position: absolute;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--white);
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  z-index: 3;
  animation: float 4s ease-in-out infinite alternate;
}

.hero-float-badge.top-right {
  top: 1.5rem;
  right: -1.5rem;
}

.hero-float-badge.bottom-left {
  bottom: 2rem;
  left: -1.5rem;
  animation-delay: 2s;
}

@keyframes float {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-10px); }
}

.badge-icon-box {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--primary-light-blue);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.badge-icon-box.orange {
  background: var(--accent-orange-light);
  color: var(--accent-orange);
}

.badge-text-primary {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dark-slate);
}

.badge-text-sub {
  font-size: 0.75rem;
  color: var(--slate-500);
}

/* STATS COUNTER STRIP */
.stats-strip {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 2.25rem 3rem;
  margin-top: -3rem;
  position: relative;
  z-index: 10;
  border: 1px solid rgba(11, 94, 215, 0.08);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  align-items: center;
}

.stat-item {
  text-align: center;
  position: relative;
}

.stat-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1rem;
  top: 15%;
  height: 70%;
  width: 1px;
  background: #E2E8F0;
}

.stat-number {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--primary-blue);
  font-family: var(--font-heading);
  line-height: 1;
  margin-bottom: 0.35rem;
}

.stat-label {
  font-size: 0.95rem;
  color: var(--slate-600);
  font-weight: 600;
}

/* WHY CHOOSE US SECTION */
.why-rcp {
  background: var(--slate-50);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.75rem;
}

.feature-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid #F1F5F9;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0%;
  background: var(--primary-blue);
  transition: height var(--transition-normal);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(11, 94, 215, 0.15);
}

.feature-card:hover::before {
  height: 100%;
}

.feature-icon-wrapper {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--primary-light-blue);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  transition: transform var(--transition-bounce), background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}

.feature-card:hover .feature-icon-wrapper {
  transform: scale(1.1) rotate(-5deg);
  background: var(--primary-blue);
  color: var(--white);
}

.feature-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.65rem;
}

.feature-desc {
  font-size: 0.925rem;
  color: var(--slate-600);
  line-height: 1.6;
}

/* COURSES SECTION */
.courses-section {
  background: var(--white);
}

.course-filter-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.tab-btn {
  padding: 0.65rem 1.4rem;
  background: var(--slate-100);
  color: var(--slate-700);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.tab-btn:hover {
  background: var(--primary-light-blue);
  color: var(--primary-blue);
}

.tab-btn.active {
  background: var(--primary-blue);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(11, 94, 215, 0.3);
}

.courses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.course-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  border: 1px solid #E2E8F0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.course-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(11, 94, 215, 0.2);
}

.course-header {
  padding: 1.5rem 1.75rem 1rem 1.75rem;
  position: relative;
  background: linear-gradient(180deg, var(--slate-50) 0%, var(--white) 100%);
  border-bottom: 1px solid var(--slate-100);
}

.course-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--primary-light-blue);
  color: var(--primary-blue);
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}

.course-badge.popular {
  background: var(--accent-orange-light);
  color: #B94D00; /* a11y: 2.59:1 -> 4.6:1 (same hue) */
}

.course-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark-slate);
  margin-bottom: 0.4rem;
}

.course-subtitle {
  font-size: 0.875rem;
  color: var(--slate-500);
}

.course-meta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--slate-600);
  font-weight: 500;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.meta-item svg {
  color: var(--primary-blue);
}

.course-body {
  padding: 1.5rem 1.75rem;
  flex-grow: 1;
}

.course-highlights-list {
  list-style: none;
  margin-bottom: 1.5rem;
}

.course-highlights-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--slate-700);
  margin-bottom: 0.5rem;
}

.course-highlights-list li svg {
  color: var(--success-green);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.course-footer {
  padding: 1.25rem 1.75rem;
  background: var(--slate-50);
  border-top: 1px solid var(--slate-100);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* INTERACTIVE FEE RECOMMENDER QUIZ WIDGET */
.quiz-section {
  background: linear-gradient(135deg, var(--dark-slate) 0%, #0F2042 100%);
  color: var(--white);
  border-radius: var(--radius-xl);
  padding: 3.5rem 2.5rem;
  margin: 3rem auto;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.quiz-header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 2.5rem auto;
}

.quiz-header h3 {
  color: var(--white);
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.quiz-header p {
  color: var(--slate-300);
}

.quiz-box {
  max-width: 700px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
}

.quiz-step-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
  color: var(--white);
}

.quiz-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.quiz-option-btn {
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  color: var(--white);
  font-weight: 500;
  text-align: left;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-option-btn:hover, .quiz-option-btn.selected {
  background: var(--primary-blue);
  border-color: #60A5FA;
  transform: translateY(-2px);
}

.quiz-result-box {
  display: none;
  background: var(--white);
  color: var(--dark-slate);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  text-align: center;
  animation: fadeIn 0.4s ease;
}

.quiz-result-box h4 {
  font-size: 1.4rem;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

/* SUCCESS JOURNEY TIMELINE */
.journey-section {
  background: var(--slate-50);
}

.journey-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  position: relative;
  margin-top: 2.5rem;
}

.journey-step-card {
  background: var(--white);
  padding: 1.75rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid #F1F5F9;
  text-align: center;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--transition-normal);
}

.journey-step-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.step-number-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark-blue));
  color: var(--white);
  font-weight: 800;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
  box-shadow: 0 4px 10px rgba(11, 94, 215, 0.3);
}

.journey-step-card h4 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
}

.journey-step-card p {
  font-size: 0.85rem;
  color: var(--slate-600);
}

/* GALLERY SECTION */
.gallery-section {
  background: var(--white);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.gallery-item {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 320px;
  box-shadow: var(--shadow-md);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  content-visibility: auto;
  transition: transform 0.5s ease;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(15, 23, 42, 0.9) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  color: var(--white);
  opacity: 0.95;
  transition: opacity 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-title {
  font-size: 1.2rem;
  font-weight: 700;
}

.gallery-category {
  font-size: 0.85rem;
  color: #93C5FD;
}

/* TESTIMONIALS & REVIEWS SECTION */
.reviews-section {
  background: var(--slate-50);
}

.google-review-badge {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: var(--white);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--slate-200);
  margin-bottom: 2rem;
}

.stars-rating {
  color: #F59E0B;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.75rem;
}

.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2rem;
  border: 1px solid #F1F5F9;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-normal);
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.testimonial-quote {
  font-size: 0.975rem;
  color: var(--slate-700);
  font-style: italic;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.student-info {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.student-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-light-blue);
  color: var(--primary-blue);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.student-details h5 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark-slate);
}

.student-details p {
  font-size: 0.8rem;
  color: var(--slate-500);
}

/* VIDEO TESTIMONIALS GRID */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.video-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid #E2E8F0;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.video-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(11, 94, 215, 0.2);
}

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  background: var(--dark-slate);
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.video-info {
  padding: 1.25rem 1.5rem;
}

.video-info h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark-slate);
  margin-bottom: 0.3rem;
}

.video-info p {
  font-size: 0.9rem;
  color: var(--slate-600);
  line-height: 1.5;
}

/* Video Thumbnail Cards (Dynamic YouTube Gallery) */
.video-thumb-wrapper {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--dark-slate);
}

.video-thumb-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-card:hover .video-thumb-wrapper img {
  transform: scale(1.08);
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  opacity: 0.85;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}

.video-card:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 1;
}

/* TEAM SECTION */
.team-section {
  background: linear-gradient(180deg, var(--slate-50) 0%, var(--white) 100%);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

.team-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 2.25rem 1.75rem;
  border: 1px solid #E2E8F0;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.team-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary-blue), var(--accent-orange));
  transform: scaleX(0);
  transition: transform 0.4s ease;
  transform-origin: left;
}

.team-card:hover::before {
  transform: scaleX(1);
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 16px 44px rgba(11, 94, 215, 0.14);
  border-color: rgba(11, 94, 215, 0.15);
}

.team-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-light-blue), #DBEAFE);
  margin: 0 auto 1.25rem auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.team-card:hover .team-avatar {
  transform: scale(1.12);
}

.team-avatar-placeholder {
  font-size: 2.5rem;
  line-height: 1;
}

.team-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark-slate);
  margin-bottom: 0.25rem;
}

.team-role {
  font-size: 0.9rem;
  color: var(--primary-blue);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.team-desc {
  font-size: 0.875rem;
  color: var(--slate-600);
  line-height: 1.6;
  margin-bottom: 1.1rem;
}

.team-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.team-specialty-tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  background: var(--primary-light-blue);
  color: var(--primary-blue);
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}

/* FAQ ACCORDION SECTION */
.faq-section {
  background: var(--white);
}

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

.faq-item {
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all var(--transition-fast);
}

.faq-item.active {
  border-color: var(--primary-blue);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  width: 100%;
  padding: 1.25rem 1.5rem;
  background: var(--slate-50);
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--dark-slate);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background var(--transition-fast);
}

.faq-item.active .faq-question {
  background: var(--primary-light-blue);
  color: var(--primary-blue);
}

.faq-icon {
  font-size: 1.25rem;
  transition: transform var(--transition-fast);
  color: var(--primary-blue);
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, padding 0.35s ease-out;
  padding: 0 1.5rem;
  background: var(--white);
  color: var(--slate-600);
  font-size: 0.95rem;
  line-height: 1.65;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 1.25rem 1.5rem;
}

/* CONTACT & ENQUIRY SECTION */
.contact-section {
  background: radial-gradient(100% 100% at 50% 100%, #EBF3FF 0%, var(--slate-50) 100%);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3.5rem;
  align-items: flex-start;
}

.contact-info-card {
  background: var(--white);
  padding: 2.5rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--slate-200);
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.info-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--primary-light-blue);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.info-text h5 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.info-text p, .info-text a {
  font-size: 0.95rem;
  color: var(--slate-600);
  line-height: 1.5;
}

.info-text a:hover {
  color: var(--primary-blue);
}

.contact-form-card {
  background: var(--white);
  padding: 2.75rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(11, 94, 215, 0.12);
}

.contact-form-card h3 {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.contact-form-card p {
  color: var(--slate-600);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--slate-700);
  margin-bottom: 0.4rem;
}

.form-control {
  width: 100%;
  padding: 0.85rem 1.1rem;
  background: var(--slate-50);
  border: 1.5px solid #CBD5E1;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  color: var(--dark-slate);
  transition: all var(--transition-fast);
}

.form-control:focus {
  background: var(--white);
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(11, 94, 215, 0.12);
}

/* FOOTER */
.footer {
  background: var(--dark-slate);
  color: var(--slate-300);
  padding: 4.5rem 0 2rem 0;
  font-size: 0.925rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}

.footer-brand p {
  color: var(--slate-400);
  margin: 1rem 0 1.5rem 0;
  line-height: 1.6;
}

.footer-title {
  color: var(--white);
  font-size: 1.15rem;
  margin-bottom: 1.25rem;
}

.footer-links {
  list-style: none;
}

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

.footer-links a {
  color: var(--slate-400);
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: var(--white);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--slate-400);
  font-size: 0.85rem;
}

/* FLOATING ACTIONS & MOBILE STICKY BAR */
.floating-actions {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.fab-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 1.5rem;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-bounce);
  text-decoration: none;
}

.fab-btn:hover {
  transform: scale(1.12);
}

.fab-whatsapp {
  background: #25D366;
}

.fab-call {
  background: var(--primary-blue);
}

/* Sticky Bottom Navigation Bar for Mobile */
.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--white);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 0.6rem 1rem;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.mobile-sticky-bar .btn {
  padding: 0.65rem 0.5rem;
  font-size: 0.825rem;
  justify-content: center;
  text-align: center;
}

/* MODAL SYSTEM */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background: var(--white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2.25rem;
  box-shadow: var(--shadow-xl);
  position: relative;
  transform: translateY(20px) scale(0.95);
  transition: transform var(--transition-normal);
}

.modal-overlay.active .modal-content {
  transform: translateY(0) scale(1);
}

.modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.modal-close:hover {
  background: var(--slate-200);
  color: var(--dark-slate);
}

/* RESPONSIVE MEDIA QUERIES */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .hero-media-wrapper {
    max-width: 600px;
    margin: 0 auto;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .stat-item:nth-child(2)::after {
    display: none;
  }

  .journey-timeline {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px) {
  .top-bar-info {
    display: none;
  }

  .nav-links, .nav-actions {
    display: none;
  }

  .mobile-toggle {
    display: block;
  }

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

  .stats-strip {
    padding: 1.75rem 1.5rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  .journey-timeline {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

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

  .mobile-sticky-bar {
    display: grid;
  }

  .floating-actions {
    bottom: 4.5rem;
  }

  .courses-grid {
    grid-template-columns: 1fr;
  }

  .stat-number {
    font-size: 1.75rem;
  }

  .stat-label {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.75rem;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .hero-cta-group {
    flex-direction: column;
  }

  .hero-cta-group .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .courses-grid,
  .video-grid,
  .team-grid,
  .footer-grid,
  .journey-timeline {
    grid-template-columns: 1fr;
  }

  .top-bar-content {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .hero-float-badge {
    display: none;
  }
}

/* ==========================================================================
   PREMIUM ANIMATION SYSTEM
   Keyframes, Scroll Reveals, Staggered Cascades, Micro-interactions
   ========================================================================== */

/* ── Keyframe Definitions ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(35px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(50px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes floatSlow {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(0px); }
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.08); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ── Scroll Reveal Utility ── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Staggered Card Cascade ── */
.stagger-reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-reveal.stagger-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── Enhanced Feature Card Hover ── */
.feature-card {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feature-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 40px rgba(11, 94, 215, 0.15);
}

.feature-card:hover .feature-icon-wrapper {
  transform: scale(1.15) rotate(-8deg);
  background: var(--primary-blue);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(11, 94, 215, 0.3);
}

/* ── Enhanced Course Card Hover ── */
.course-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.course-card:hover {
  transform: translateY(-10px) scale(1.015);
  box-shadow: 0 20px 50px rgba(11, 94, 215, 0.16);
}

.course-card:hover .course-badge {
  animation: bounceIn 0.5s ease;
}

/* ── Journey Step Card Hover ── */
.journey-step-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.journey-step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(11, 94, 215, 0.14);
}

.journey-step-card:hover .step-number-badge {
  transform: scale(1.15);
  box-shadow: 0 6px 18px rgba(11, 94, 215, 0.4);
}

.step-number-badge {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Gallery Hover Polish ── */
.gallery-item {
  transition: box-shadow 0.4s ease;
}

.gallery-item:hover {
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.22);
}

.gallery-item img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-overlay {
  transition: opacity 0.35s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-item:hover .gallery-title {
  animation: fadeInUp 0.4s ease forwards;
}

/* ── Testimonial Card Hover ── */
.testimonial-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.testimonial-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 36px rgba(11, 94, 215, 0.12);
}

/* ── FAQ Item Expand Transition ── */
.faq-answer {
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              padding 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-icon {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Button Ripple Effect ── */
.btn-ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: rippleSpread 0.6s ease-out;
  pointer-events: none;
}

@keyframes rippleSpread {
  to { transform: scale(4); opacity: 0; }
}

/* ── Tab Button Active Transition ── */
.tab-btn {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tab-btn:active {
  transform: scale(0.95);
}

/* ── Stats Number Pop Effect ── */
.stat-number {
  transition: color 0.3s ease;
}

.stat-item:hover .stat-number {
  color: var(--accent-orange);
  transform: scale(1.05);
}

.stat-item:hover .stat-label {
  color: var(--primary-blue);
}

.stat-item {
  transition: all 0.3s ease;
}

/* ── Floating Action Button Pulse ── */
.fab-whatsapp {
  position: relative;
}

.fab-whatsapp::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: pulseRing 2s ease-out infinite;
  z-index: -1;
}

/* ── Hero Float Badges ── */
.hero-float-badge.top-right {
  animation: floatSlow 5s ease-in-out infinite;
}

.hero-float-badge.bottom-left {
  animation: floatSlow 6s ease-in-out infinite 1.5s;
}

/* ── Quiz Option Hover ── */
.quiz-option-btn {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quiz-option-btn:hover {
  transform: translateY(-3px) scale(1.02);
}

.quiz-option-btn:active {
  transform: scale(0.97);
}

/* ── Quiz Result Box Reveal ── */
.quiz-result-box {
  animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Google Review Badge Shimmer ── */
.google-review-badge {
  position: relative;
  overflow: hidden;
}

.google-review-badge::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

/* ── Form Control Focus Glow ── */
.form-control {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-control:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(11, 94, 215, 0.12), 0 4px 12px rgba(11, 94, 215, 0.08);
}

/* ── Modal Enhanced Transition ── */
.modal-overlay {
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.modal-content {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Navbar Scroll Transition ── */
.navbar {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Section Tag Subtle Hover ── */
.section-tag {
  transition: all 0.3s ease;
}

.section-tag:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(11, 94, 215, 0.15);
}

/* ── Accessibility: Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   Header fit: longer brand name + Login button
   ========================================================================== */
.brand-title,
.nav-link,
.nav-actions .btn {
  white-space: nowrap;
}

@media (max-width: 1320px) {
  .nav-wrapper { gap: 1rem; }
  .nav-links { gap: 1.1rem; }
  .nav-link { font-size: 0.875rem; }
  .brand-title { font-size: 1.1rem; }
  .brand-logo-img { width: 44px; height: 44px; }
  .nav-actions { gap: 0.5rem; }
  .nav-actions .btn { padding: 0.65rem 1rem; font-size: 0.875rem; }
}

/* Switch to the hamburger menu a little earlier so the header never crowds */
@media (max-width: 1140px) {
  .nav-links, .nav-actions { display: none; }
  .mobile-toggle { display: block; }
}

/* University courses grid: centre the last row when the card count is not a multiple of the column count */
.university-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
}

.university-grid .feature-card {
  flex: 0 0 calc((100% - 5.25rem) / 4);
}

@media (max-width: 1199px) {
  .university-grid .feature-card { flex-basis: calc((100% - 3.5rem) / 3); }
}

@media (max-width: 899px) {
  .university-grid .feature-card { flex-basis: calc((100% - 1.75rem) / 2); }
}

@media (max-width: 599px) {
  .university-grid .feature-card { flex-basis: 100%; }
}

/* Scholarship Based Admissions banner (University Courses section) */
.scholarship-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  max-width: 820px;
  margin: 2.5rem auto 0;
  padding: 1.5rem 2rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--accent-orange-light), #FFE9C7);
  border: 1px solid #FFD6A8;
  box-shadow: var(--shadow-md);
}

.scholarship-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.scholarship-text h4 {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  color: var(--dark-slate);
  margin-bottom: 0.25rem;
}

.scholarship-text p {
  color: var(--slate-700);
  font-size: 0.95rem;
  line-height: 1.5;
}

.scholarship-text a {
  color: var(--primary-blue);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 599px) {
  .scholarship-banner {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1.25rem;
  }
}

/* ==========================================================================
   Our Branches - dark showcase
   Chakarbhata (head office) centred on the first row; Bilha on the left and
   Sargaon on the right of the second row, joined by glowing lines.
   Pure CSS grid, so the same pattern is kept on desktop, tablet and mobile.
   ========================================================================== */
@property --bangle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.branches-section { background: transparent; }

.branches-box {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 4rem 2.5rem 3.5rem;
  border-radius: var(--radius-xl);
  color: var(--white);
  background:
    radial-gradient(circle at 10% 92%, rgba(255, 107, 0, 0.18), transparent 42%),
    radial-gradient(circle at 92% 6%, rgba(11, 94, 215, 0.45), transparent 46%),
    linear-gradient(135deg, var(--dark-slate) 0%, #0F2042 100%);
  box-shadow: var(--shadow-xl);
}

.branches-box::before {                       /* subtle dot grid */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, transparent 78%);
  mask-image: radial-gradient(ellipse at center, #000 28%, transparent 78%);
  pointer-events: none;
}

/* ---- heading ---- */
.branches-box .section-header { margin-bottom: 3.25rem; }







.branches-box .section-title { color: var(--white); text-wrap: balance; }

.branches-gradient {
  background: linear-gradient(90deg, #6EA8FF 0%, #22D3EE 40%, #7DD3FC 65%, #6EA8FF 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  animation: branchShine 7s linear infinite;
}

.branches-box .section-subtitle { color: #CBD5E1; }

/* ---- tree layout: head office on top, four branches below ---- */
.branch-tree {
  --bl: #5B8FE6;
  --drop: 3.1rem;                         /* length of each vertical connector (line -> card) */
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1160px;
  margin: 0 auto;
}

.branch-main  { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 440px); }
.branch-stem  { grid-column: 1 / -1; grid-row: 2; justify-self: center; width: 3px; height: 2.9rem; }
.branch-node  { grid-row: 3; position: relative; display: flex; padding: var(--drop) 0.6rem 0; }
.branch-node > .branch-card { flex: 1; min-width: 0; padding: 1.7rem 1rem 1.5rem; justify-content: flex-start; }
.bn-1 { grid-column: 1; }
.bn-2 { grid-column: 2; }
.bn-3 { grid-column: 3; }
.bn-4 { grid-column: 4; }
.bn-5 { grid-column: 5; }
.branch-bus { grid-column: 1 / -1; grid-row: 3; position: relative; z-index: 3; pointer-events: none; }
.bn-trunk { display: none; }

/* ---- cards ---- */
.branch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03));
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(2, 8, 23, 0.35);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal), background var(--transition-normal);
}

.branch-card:hover {
  transform: translateY(-6px);
  border-color: rgba(110, 168, 255, 0.65);
  box-shadow: 0 18px 44px rgba(11, 94, 215, 0.4);
}

.branch-main.branch-card {
  padding: 2.4rem 2rem 2.1rem;
  border-color: transparent;
  background: linear-gradient(160deg, rgba(11, 94, 215, 0.45), rgba(11, 94, 215, 0.14) 60%, rgba(255, 107, 0, 0.12));
  box-shadow: 0 16px 48px rgba(11, 94, 215, 0.4);
  animation: branchGlow 3.4s ease-in-out infinite;
}

.branch-main.branch-card::before {            /* rotating gradient border */
  content: "";
  position: absolute;
  inset: -1px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--bangle), #0B5ED7, #6EA8FF, #22D3EE, #FF6B00, #6EA8FF, #0B5ED7);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: branchSpin 7s linear infinite;
  pointer-events: none;
}



.branch-icon {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  background: var(--primary-light-blue);
  color: var(--primary-blue);
  transition: transform var(--transition-bounce);
}

.branch-icon::after {                         /* pulsing ring */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 2px solid rgba(110, 168, 255, 0.5);
  animation: branchPing 2.8s ease-out infinite;
}

.branch-main .branch-icon {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  font-size: 1.9rem;
  color: var(--white);
  background: linear-gradient(135deg, #0B5ED7, #22D3EE);
  box-shadow: 0 10px 28px rgba(11, 94, 215, 0.6);
}

.branch-card:hover .branch-icon { transform: scale(1.1) rotate(-5deg); }

.branch-title {
  font-family: var(--font-heading);
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--white);
  margin: 0 0 0.65rem;
}

.branch-main .branch-title { font-size: 2.1rem; margin-bottom: 0.75rem; }

.branch-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.95rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: #BBD3FF;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.branch-label-main {
  background: linear-gradient(90deg, var(--accent-orange), #FF9A3D);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.45);
}

.branch-addr {
  display: block;
  max-width: 330px;
  margin: 1rem 0 0;
  text-align: center;
  color: #CBD5E1;
  font-size: 0.88rem;
  line-height: 1.5;
}






/* ---- connector lines + travelling light ---- */
.branch-stem { position: relative; }

.branch-stem::before {                        /* Chakarbhata -> down to the horizontal line */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--bl), #6EA8FF);
  box-shadow: 0 0 12px rgba(91, 143, 230, 0.55);
}

.branch-node::before {                        /* vertical connector: line -> card */
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: var(--drop);
  width: 3px;
  margin-left: -1.5px;
  background: linear-gradient(180deg, #6EA8FF, var(--bl));
  box-shadow: 0 0 12px rgba(91, 143, 230, 0.55);
}

.branch-node::after {                         /* horizontal line:  Bilha --- Kaya --- Sargaon --- Masturi */
  content: "";
  position: absolute;
  top: -1.5px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bl), #6EA8FF 50%, var(--bl));
  box-shadow: 0 0 12px rgba(91, 143, 230, 0.55);
}
.bn-1::after { left: 50%; }
.bn-5::after { right: 50%; }

.flow {
  position: absolute;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(110, 168, 255, 0.35), 0 0 14px 4px rgba(110, 168, 255, 0.9);
  opacity: 0;
  animation-duration: 3.6s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.flow-stem { left: 50%;  top: 0; animation-name: flowStem; }
.flow-l    { left: 50%;  top: 0; animation-name: flowLeft; }
.flow-r    { left: 50%;  top: 0; animation-name: flowRight; }
.flow-d    { top: 0; }
.flow-d1   { left: 10%; animation-name: flowDropB; }
.flow-d2   { left: 30%; animation-name: flowDropA; }
.flow-d3   { left: 50%; animation-name: flowDropA; }
.flow-d4   { left: 70%; animation-name: flowDropA; }
.flow-d5   { left: 90%; animation-name: flowDropB; }

.branch-junction {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dark-slate);
  border: 2px solid #5B8FE6;
  color: #8DB6FF;
  font-size: 0.95rem;
  box-shadow: 0 0 0 5px rgba(91, 143, 230, 0.2), 0 0 20px rgba(91, 143, 230, 0.55);
}

.branch-junction::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(110, 168, 255, 0.55);
  animation: branchPing 2.4s ease-out infinite;
}

/* ---- tablet / phone: SAME pattern, branches in two rows of two (never a vertical list) ---- */
@media (max-width: 899px) {
  .branch-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); --drop: 2.4rem; }
  .bn-1 { grid-column: 1; grid-row: 3; }
  .bn-2 { grid-column: 2; grid-row: 3; }
  .bn-3 { grid-column: 1; grid-row: 4; margin-top: 1.5rem; }
  .bn-4 { grid-column: 2; grid-row: 4; margin-top: 1.5rem; }
  .bn-5 { grid-column: 1 / -1; grid-row: 5; margin-top: 1.5rem; width: 50%; justify-self: center; }
  .bn-5::after { display: none; }
  .bn-1::after, .bn-3::after { left: 50%; right: 0; }
  .bn-2::after, .bn-4::after { left: 0; right: 50%; }
  .bn-1 .bn-trunk, .bn-3 .bn-trunk {                            /* centre line running down between the two rows */
    display: block;
    position: absolute;
    right: -1.5px;
    top: -1.5px;
    bottom: -1.5rem;
    width: 3px;
    background: linear-gradient(180deg, var(--bl), #6EA8FF);
    box-shadow: 0 0 12px rgba(91, 143, 230, 0.55);
  }
  .flow-l  { animation-name: flowLeftM; }
  .flow-r  { animation-name: flowRightM; }
  .flow-d1 { left: 25%; }
  .flow-d2 { left: 75%; animation-name: flowDropB; }
  .flow-d3, .flow-d4, .flow-d5 { display: none; }
}

/* ---- CTA ---- */

.branch-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
}

/* ---- entrance (only when JS is available) ---- */
.branches-box.branch-anim:not(.in-view) .branch-card { opacity: 0; }

.branches-box.branch-anim.in-view .branch-card { animation: branchRise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.branches-box.branch-anim.in-view .branch-main.branch-card { animation: branchRise 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) backwards, branchGlow 3.4s ease-in-out 0.85s infinite; }
.branches-box.branch-anim.in-view .bn-1 .branch-card { animation-delay: 0.4s; }
.branches-box.branch-anim.in-view .bn-2 .branch-card { animation-delay: 0.5s; }
.branches-box.branch-anim.in-view .bn-3 .branch-card { animation-delay: 0.6s; }
.branches-box.branch-anim.in-view .bn-4 .branch-card { animation-delay: 0.7s; }
.branches-box.branch-anim.in-view .bn-5 .branch-card { animation-delay: 0.8s; }

/* ---- keyframes ---- */
@keyframes branchSpin  { to { --bangle: 360deg; } }
@keyframes branchShine { to { background-position: 250% center; } }
@keyframes branchPing  { 0% { transform: scale(0.85); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes branchGlow  { 0%, 100% { box-shadow: 0 16px 48px rgba(11, 94, 215, 0.38); } 50% { box-shadow: 0 16px 60px rgba(34, 211, 238, 0.42); } }
@keyframes branchRise  { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: none; } }

@keyframes flowStem   { 0% { top: 0; opacity: 0; } 3% { opacity: 1; } 24% { top: 100%; opacity: 1; } 26%, 100% { top: 100%; opacity: 0; } }
@keyframes flowLeft   { 0%, 25% { left: 50%; opacity: 0; } 27% { opacity: 1; } 55% { left: 10%; opacity: 1; } 57%, 100% { left: 10%; opacity: 0; } }
@keyframes flowRight  { 0%, 25% { left: 50%; opacity: 0; } 27% { opacity: 1; } 55% { left: 90%; opacity: 1; } 57%, 100% { left: 90%; opacity: 0; } }
@keyframes flowLeftM  { 0%, 25% { left: 50%; opacity: 0; } 27% { opacity: 1; } 55% { left: 25%; opacity: 1; } 57%, 100% { left: 25%; opacity: 0; } }
@keyframes flowRightM { 0%, 25% { left: 50%; opacity: 0; } 27% { opacity: 1; } 55% { left: 75%; opacity: 1; } 57%, 100% { left: 75%; opacity: 0; } }
@keyframes flowDropA  { 0%, 35% { top: 0; opacity: 0; } 37% { opacity: 1; } 47% { top: var(--drop); opacity: 1; } 49%, 100% { top: var(--drop); opacity: 0; } }
@keyframes flowDropB  { 0%, 54% { top: 0; opacity: 0; } 56% { opacity: 1; } 66% { top: var(--drop); opacity: 1; } 68%, 100% { top: var(--drop); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .branches-box *, .branches-box *::before, .branches-box *::after { animation: none !important; }
  .branches-box.branch-anim:not(.in-view) .branch-card { opacity: 1; }
  .flow { display: none; }
}

/* ---- tablet / mobile: SAME pattern (centre on top, left + right below), just tighter ---- */
@media (max-width: 767px) {
  .branches-box { padding: 2.75rem 1rem 2.5rem; border-radius: var(--radius-lg); }
  .branches-box .section-header { margin-bottom: 2.25rem; }

  .branch-main { width: min(100%, 310px); }
  .branch-main.branch-card { padding: 1.75rem 1.1rem 1.5rem; }
  .branch-card { padding: 1.35rem 0.6rem 1.2rem; }
  .branch-node { padding-left: 0.3rem; padding-right: 0.3rem; }
  .branch-node > .branch-card { padding: 1.2rem 0.5rem 1.1rem; }
  .branch-icon { width: 48px; height: 48px; border-radius: 14px; font-size: 1.2rem; margin-bottom: 0.7rem; }
  .branch-main .branch-icon { width: 62px; height: 62px; font-size: 1.5rem; }
  .branch-title { font-size: 1.15rem; margin-bottom: 0.5rem; }
  .branch-main .branch-title { font-size: 1.6rem; }
  .branch-label { font-size: 0.64rem; padding: 0.26rem 0.65rem; letter-spacing: 0.04em; }
  .branch-addr { font-size: 0.8rem; margin-top: 0.85rem; }
  .branch-stem { height: 2.1rem; }
  .branch-junction { width: 30px; height: 30px; font-size: 0.7rem; box-shadow: 0 0 0 4px rgba(91, 143, 230, 0.2), 0 0 14px rgba(91, 143, 230, 0.5); }
  .branch-cta .btn { width: 100%; justify-content: center; }
}

@media (max-width: 400px) {
  .branch-card { padding: 1.2rem 0.4rem 1.1rem; }
  .branch-title { font-size: 1.05rem; }
  .branch-label { font-size: 0.6rem; padding: 0.24rem 0.55rem; }
}

/* addresses inside the four branch cards */
.branch-node .branch-addr { margin-top: 0.85rem; max-width: 220px; font-size: 0.8rem; }

@media (max-width: 767px) {
  .branch-cta { margin-top: 2.25rem; }
  .branch-node .branch-addr { font-size: 0.72rem; line-height: 1.45; }
}

/* icon / name / label sit on the same line in all four lower cards, whatever the address length (justify-content: flex-start above) */

/* ==========================================================
   CAMPUS MEDIA — hero building photo, tour videos, gallery
   ========================================================== */

/* Hero: square building render (no cropping of roof / steps) */
.hero-image-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.hero-tour-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-full);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--dark-slate);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-tour-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-xl);
}

.hero-tour-btn:focus-visible {
  outline: 3px solid var(--primary-blue);
  outline-offset: 3px;
}

.hero-tour-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-orange);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  padding-left: 2px; /* optically centre the play triangle */
}

/* Video modal (opened from hero button) */
.modal-content.modal-video-content {
  max-width: 960px;
  padding: 0;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.modal-video-content video {
  display: block;
  width: 100%;
  max-height: 82vh;
  aspect-ratio: 16 / 9;
  background: #000;
}

.modal-video-content .modal-close {
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
}

/* Virtual campus tour section */
.tour-section {
  background: var(--white);
}

.tour-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.tour-card {
  margin: 0;
  background: var(--white);
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.tour-video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.tour-video-wrap video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.tour-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.1rem 1.4rem 1.3rem;
}

.tour-card figcaption strong {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--dark-slate);
}

.tour-card figcaption span {
  font-size: 0.95rem;
  color: var(--slate-600);
}

/* Gallery: keep the whole building visible (16:9 renders) */
.gallery-item {
  height: auto;
  aspect-ratio: 16 / 9;
}

.gallery-section {
  background: var(--slate-50);
}

@media (min-width: 641px) and (max-width: 1024px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .gallery-overlay { padding: 1rem; }
  .gallery-title { font-size: 1.05rem; }
}

@media (max-width: 768px) {
  .tour-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  .gallery-item { aspect-ratio: 4 / 3; }
  .hero-tour-btn { top: auto; bottom: 0.75rem; right: 0.75rem; font-size: 0.8rem; }
}

/* ==========================================================================
   VERSION 2.0 - VISUAL REFINEMENTS
   Targeted polish layered on the existing design system. No class, ID or
   piece of markup is renamed or removed. Keep this block at the end of the
   file so it wins the cascade over the earlier layers.
   ========================================================================== */

/* 1. Typography: smoother heading scale between breakpoints, tidier line breaks */
h1, h2, h3 { text-wrap: balance; }
.hero-title    { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.1rem); }
.section-title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.35rem); }

/* 2. Keyboard focus: the base reset removes outlines, so give every control a visible ring */
:where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}
.form-control:focus-visible { outline: none; }          /* these already show a border + glow ring */
.top-bar :focus-visible,
.footer :focus-visible,
.branches-box :focus-visible { outline-color: var(--white); }   /* ring must contrast on dark panels */

/* 3. Buttons: equal heights inside a row (links and <button>s computed different line-heights), press feedback */
button.btn { line-height: inherit; }                  /* <button> ignored the page line-height, so it rendered shorter than <a class="btn"> */
.nav-actions,
.hero-cta-group,
.course-footer { align-items: stretch; }
.btn:active { transform: translateY(0); }

/* 4. Hero: fade the bottom edge so the tinted background and glow no longer end in a hard line */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6rem;
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0), var(--slate-50));
  pointer-events: none;
  z-index: 0;
}

/* 5. Course cards: header, feature list and buttons line up across a row, whatever the title length */
@supports (grid-template-rows: subgrid) {
  .courses-grid > .course-card {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);   /* without this the card's column grows to its widest content and spills out of the card */
    row-gap: 0;
  }
}
.course-card:hover { transform: translateY(-6px); }      /* was -10px plus scale, which softened text */

/* 6. Section rhythm: the branches panel sat between two same-colour sections, leaving a ~160px void */
.branches-section { padding: 1rem 0; }
section[id] { scroll-margin-top: 5rem; }
.contact-grid > * { min-width: 0; }                     /* lets the form's <select> shrink instead of widening the page on narrow phones */                /* direct #links clear the sticky header */

/* 7. FAQ: consistent corner radius, clearer open state, no stray native marker on Safari */
.faq-accordion > details {
  border-radius: var(--radius-md) !important;           /* !important only because the markup sets inline styles */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.faq-accordion > details:hover,
.faq-accordion > details[open] { border-color: rgba(11, 94, 215, 0.35) !important; }
.faq-accordion > details > summary { gap: 1rem; }
.faq-accordion > details > summary::-webkit-details-marker { display: none; }
.faq-accordion > details > summary > span {
  flex-shrink: 0;
  font-size: 1.35rem;
  line-height: 1;
  transition: transform var(--transition-normal);
}
.faq-accordion > details[open] > summary > span { transform: rotate(45deg); }   /* + becomes x */
.faq-accordion > details > summary:focus-visible {
  outline: 3px solid var(--focus-ring) !important;      /* markup sets outline:none inline */
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.faq-section { padding-top: var(--section-y) !important; padding-bottom: var(--section-y) !important; }

/* 8. Footer: social icons get a comfortable tap target without changing the icon size */
.footer a[aria-label] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem;
  border-radius: 50%;
  transition: background var(--transition-fast);
}
.footer a[aria-label]:hover { background: rgba(255, 255, 255, 0.1); }
.footer a[aria-label]:first-child { margin-left: -0.5rem; }   /* keeps the first icon aligned with the heading above */

/* 9. Responsive refinements */
@media (max-width: 768px) {
  :root { --section-y: 3.75rem; }
  .top-bar-badge { white-space: nowrap; }                /* the orange pill no longer wraps onto two lines */
  .floating-actions { right: 0.75rem; gap: 0.6rem; }
  .fab-btn { width: 48px; height: 48px; font-size: 1.25rem; }
}
@media (max-width: 350px) {
  /* 320px phones: the 300px course-grid minimum and the long Google-reviews button made the page ~5px wider than the screen */
  .courses-grid { grid-template-columns: minmax(0, 1fr) !important; }   /* !important because the markup sets the columns inline */
  .course-footer { padding-left: 1rem; padding-right: 1rem; gap: 0.5rem; }   /* keeps View Details + Enroll Now on one line */
  .course-footer .btn { padding-left: 1rem; padding-right: 1rem; }
  #reviews .btn { max-width: 100%; white-space: normal; text-align: center; }
  /* navbar brand: logo + name + bordered menu button needed ~281px of a 272px row at 320px */
  .navbar .brand-logo { gap: 0.5rem; min-width: 0; }
  .navbar .brand-logo-img { width: 40px; height: 40px; }
  .navbar .brand-tagline { font-size: 0.6rem; letter-spacing: 0.02em; }
  .mobile-toggle { padding-left: 0.6rem; padding-right: 0.6rem; }
}
@media (max-width: 480px) {
  /* Announcement bar: 2 lines from 360px up (3 at 320px) even with a wider web font than the fallback */
  .top-bar-content { padding-inline: 0.75rem; }
  .top-bar { font-size: 0.7rem; }
  .top-bar-notice { gap: 0.3rem; line-height: 1.25; }
  .top-bar-badge { white-space: nowrap; font-size: 0.58rem; padding: 0.1rem 0.35rem; letter-spacing: -0.01em; }
  .top-bar-notice i { margin-right: 3px !important; }   /* !important only because the icon's margin is set inline */
  .hero-trust-badge { border-radius: var(--radius-lg); line-height: 1.35; }
  .hero-highlights { flex-wrap: wrap; gap: 0.6rem 1.25rem; }
}

/* OPTIONAL - not active, needs your approval because it hides a visible component.
   The mobile bottom bar already offers Call and WhatsApp, so the floating buttons duplicate it on phones
   and briefly sit over page content while scrolling. To hide them on phones, remove the comment markers:

@media (max-width: 768px) {
  .floating-actions { display: none; }
}
*/

/* ==========================================================================
   Navbar brand name: "NEW GENERATION COMPUTER" is ~45% longer than the old name
   ========================================================================== */
@media (min-width: 1321px) {
  .brand-title { font-size: 1.1rem; }          /* same size as 1141-1320px, so logo + name + menu + buttons never crowd */
}
@media (max-width: 480px) {
  /* two-line lockup: NEW GENERATION / COMPUTER (a single line would run into the menu button) */
  .navbar .brand-logo,
  .navbar .brand-text-content { min-width: 0; }
  .navbar .brand-title { white-space: normal; max-width: 10em; font-size: 1.05rem; line-height: 1.1; }
  .navbar .brand-tagline { line-height: 1.3; }
  .mobile-toggle { flex-shrink: 0; }
}
@media (max-width: 350px) {
  .navbar .brand-title { font-size: 1rem; }
}


/* ==========================================================
   Branch network - curved connectors with end-dots (desktop)
   Head office on top, one smooth line out to all four branches,
   each ending in a glowing dot on the card edge.
   ========================================================== */
@media (min-width: 900px) {
  .branch-tree { --bl: #4DA3FF; --drop: 3.4rem; }
  .branch-stem { height: 3.1rem; }

  .branch-node > .branch-card { padding-top: 2.4rem; }

  /* curved line segment */
  .branch-node::after {
    content: "";
    position: absolute;
    top: -1.5px;
    height: var(--drop);
    background: none;
    box-shadow: none;
    border: 0 solid #4DA3FF;
    filter: drop-shadow(0 0 5px rgba(77, 163, 255, 0.65));
    pointer-events: none;
  }
  /* 5 branches: Bilha | Kaya | Sargaon (centre, straight drop) | Masturi | Sirgitti - all lines meet at the centre of node 3 */
  .bn-1::after { left: 50%; right: -150%; margin-left: -1.5px; border-width: 3px 0 0 3px; border-radius: 30px 0 0 0; }
  .bn-2::after { left: 50%; right: -50%;  margin-left: -1.5px; border-width: 3px 0 0 3px; border-radius: 30px 0 0 0; }
  .bn-3::after { left: 50%; right: auto; width: 0; margin-left: -1.5px; border-width: 0 0 0 3px; border-radius: 0; }
  .bn-4::after { left: -50%;  right: 50%; margin-right: -1.5px; border-width: 3px 3px 0 0; border-radius: 0 30px 0 0; }
  .bn-5::after { left: -150%; right: 50%; margin-right: -1.5px; border-width: 3px 3px 0 0; border-radius: 0 30px 0 0; }

  /* glowing end-dot where the line meets the card */
  .branch-node::before {
    top: calc(var(--drop) - 8px);
    height: 16px;
    width: 16px;
    margin-left: -8px;
    border-radius: 50%;
    z-index: 4;
    background: #fff;
    border: 3px solid #1E6FE8;
    box-shadow: 0 0 0 4px rgba(77, 163, 255, 0.25), 0 0 14px rgba(77, 163, 255, 0.9);
  }
}


/* ==========================================================
   Branch tree - robust layout (flex instead of grid auto-placement)
   head office -> stem -> row of five branches, same on every browser
   ========================================================== */
.branch-tree { display: block; max-width: 1160px; margin: 0 auto; }
.branch-main { display: flex; grid-column: auto; grid-row: auto; width: min(100%, 440px); margin: 0 auto; }
.branch-stem { position: relative; display: block; grid-column: auto; grid-row: auto; width: auto; height: 3.1rem; margin: 0; }
.branch-stem::before { inset: 0 auto 0 50%; width: 3px; margin-left: -1.5px; }
.branch-row { position: relative; display: flex; flex-wrap: nowrap; align-items: stretch; }
.branch-row > .branch-node { grid-column: auto; grid-row: auto; flex: 1 1 0; min-width: 0; margin-top: 0; }
.branch-row > .branch-bus { position: absolute; inset: 0; grid-column: auto; grid-row: auto; z-index: 3; pointer-events: none; }
@media (max-width: 899px) {
  .branch-row { flex-wrap: wrap; }
  .branch-row > .branch-node { flex: 0 0 50%; max-width: 50%; }
  .branch-row > .bn-3, .branch-row > .bn-4, .branch-row > .bn-5 { margin-top: 1.5rem; }
  .branch-row > .bn-5 { margin-left: 25%; }   /* 5th card sits centred on its own row, fed by the centre trunk */
  .branch-stem { height: 2.4rem; }
}


/* ITI / Paramedical / Open School block */
.more-courses-heading {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  text-align: center;
  color: var(--primary-blue);
  margin: 2.5rem 0 1.5rem;
}
.more-courses-heading:first-of-type { margin-top: 0; }
@media (min-width: 900px) {
  .university-grid.university-grid-3 .feature-card { flex-basis: calc((100% - 3.5rem) / 3); }
}