font-family: 'Nunito', sans-serif;
}


:root {
  --bg: #194eeb;
  --muted: #ebeff3;
  --accent: #3e3ef0;
  --accent-2: #197ee3;
  --card: #042342;
  --radius: 12px;
  --maxw: 1100px;
}

/* Reset-ish */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
}

/* Page background (full-bleed image) */
body {
  background: url("school-bg.jpg") center/cover no-repeat fixed;
  background-size: cover;
  background-attachment: fixed;
  color: #0f172a;
}

/* Layout container */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

/* -------------------------
   TOP MARQUEE / ANNOUNCEMENT
   ------------------------- */
.top-banner {
  width: 100%;
  overflow: hidden;
  background: rgba(10,42,99,0.92);
  color: #fff;
  padding: 10px 0;
  position: relative;
  white-space: nowrap;
  z-index: 1200;
  font-size: 18px;
  font-weight: 600;
}

.marquee {
  display: inline-block;
  padding-left: 100%;
  animation: marquee-scroll 14s linear infinite;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* -------------------------
   HEADER / NAV (transparent)
   ------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1100;
  width: 100%;
  /* background: transparent !important; */
  border-bottom: none !important;
  box-shadow: none !important;
  padding: 10px 0;
}

/* header inner row */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  background: transparent;
}

/* brand */
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* .logo {
 .logo {
  width: 14px;           
  height: 64px;          
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.12) !important; 
} */

/* .logo img { */
  /* width: 50%;
  height: 50%;
  object-fit: contain;
  display: block; */


  /* FIXED LOGO SIZE */
/* .logo {
    width: 20px !important;
    height: 10px !important;
    overflow: hidden;
    border-radius: 10px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img {
    width: 30% !important;
    height: 20% !important;
    object-fit: contain !important;
}

}

} */




/* brand text color made white to read on bg */
.brand-text h1 {
  font-size: 20px;
  margin: 0;
  color: #ffffff;
}

.tag {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}

/* nav */
.nav {
  display: flex;
  gap: 18px;
  align-items: center;
  background: transparent;
}

.nav a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 6px;
  border-radius: 8px;
  transition: color 0.18s, transform 0.18s;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.nav a:hover {
  color: #ffd873;
  transform: translateY(-2px);
}

/* mobile toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  font-size: 20px;
  color: #fff;
}

/* -------------------------
   HERO
   ------------------------- */
/* .hero {
  position: relative;
  padding: 86px 0 40px;
  min-height: 520px;
  overflow: hidden; */

  /* HEADER IMAGE ONLY */
  
  /* background-attachment: fixed; */

  /* Soft overlay for readability */
  /* background-blend-mode: multiply; */
/* } */
/* Force Nunito on hero section */
.hero,
.hero h1,
.hero h2,
.hero p,
.hero button,
.hero a {
  font-family: 'Nunito', sans-serif;
}


.hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.hero-copy h2 {
  font-size: 42px;
  margin: 0 0 10px;
  color: #ffffff;
  text-shadow: 0 6px 22px rgba(0,0,0,0.45);
}

.hero-copy p {
  color: rgba(255,255,255,0.9);
  margin: 0 0 18px;
  font-size: 18px;
  max-width: 680px;
}

.hero-cta { display: flex; gap: 12px; align-items: center; }

/* buttons */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn.primary {
  background: linear-gradient(90deg, var(--accent), #2b3aa6);
  color: #fff;
  box-shadow: 0 8px 22px rgba(15,23,42,0.20);
}

.btn.ghost {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}

/* hero photo card (right) */
.hero-photo {
  height: 340px;
  border-radius: 18px;
  background-image: url("child.webp");
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 80px rgba(2,6,23,0.45);
  display: block;
  position: relative;
  overflow: hidden;
}

/* subtle overlay inside hero-photo for depth */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.16));
  pointer-events: none;
}

/* -------------------------
   STATS
   ------------------------- */
.stats {
  display: flex;
  gap: 18px;
  margin: 30px auto;
  padding: 0 20px;
  max-width: var(--maxw);
}

/* stat card base */
.stat-card {
  flex: 1;
  padding: 18px;
  border-radius: 12px;
  text-align: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  color: #ffffff;
  transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  box-shadow: 0 10px 30px rgba(2,6,23,0.35);
}

/* visible state (used by your js observer) */
.stat-card.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* stagger classes (already present in HTML) */
.stat-card.reveal.delay { transition-delay: 0.12s; }
.stat-card.reveal.delay-lg { transition-delay: 0.28s; }

/* hover lift */
.stat-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 30px 60px rgba(2,6,23,0.45);
}

/* stat numbers and labels */
.stat-number {
  font-size: 22px;
  font-weight: 800;
  color: #ffefc2;
  transition: color 0.35s ease;
}

.stat-card:hover .stat-number { color: #fff; }

.stat-label {
  color: rgba(255,255,255,0.85);
  margin-top: 6px;
  font-size: 13px;
}

/* -------------------------
   SECTIONS & CARDS
   ------------------------- */
.section {
  padding: 44px 0;
  color: #fff;
}

.section.pale {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}

.section-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 28px;
  align-items: start;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.card {
  background: rgba(255,255,255,0.06);
  padding: 18px;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  transition: transform 0.18s, box-shadow 0.18s;
  color: #fff;
}

.card h3 { margin: 0 0 6px; }
.card p { margin: 0; color: rgba(255,255,255,0.85); }

/* event card */
.event-card h4 { margin: 0 0 6px; color: #fff; }
.event-card time { display: block; color: rgba(255,255,255,0.75); font-size: 13px; margin-bottom: 8px; }

/* image card */
.image-card img { width: 100%; border-radius: 10px; display: block; }
.image-caption { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 8px; }

/* forms */
.form-card input,
.form-card select,
.form-card textarea {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 14px;
  background: rgba(255,255,255,0.04);
  color: #fff;
}

.form-card button {
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  border: 0;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(90deg, var(--accent), #2b3aa6);
}

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 420px; gap: 20px; }
.contact-form input,
.contact-form textarea { padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); margin-bottom: 10px; background: rgba(255,255,255,0.04); color:#fff; }

/* footer */
.site-footer {
  padding: 22px 0;
  background: rgba(3,10,28,0.9);
  color: #dbeafe;
  border-top: 1px solid rgba(255,255,255,0.02);
}

/* reveal helper (used by JS) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(.2,.9,.25,1), transform 0.6s cubic-bezier(.2,.9,.25,1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* utilities */
.visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* -------------------------
   RESPONSIVE
   ------------------------- */
@media (max-width: 980px) {
  .hero-grid,
  .section-grid {
    grid-template-columns: 1fr;
  }

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

  .nav {
    display: none;
  }

  .nav.open {
    display: flex;
    position: absolute;
    top: 72px;
    right: 20px;
    background: rgba(0,0,0,0.6);
    padding: 12px;
    border-radius: 10px;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  }

  .nav-toggle {
    display: block;
    color: #fff;
    background: transparent;
    border: none;
    font-size: 20px;
  }

  .hero-photo {
    height: 220px;
  }

  .container {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .hero-copy h2 {
    font-size: 28px;
  }

  .logo {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }

  .brand-text h1 {
    font-size: 16px;
  }

  .top-banner {
    font-size: 14px;
  }
}

/* -------------------------
   FINAL OVERRIDES: force transparent header/nav and readable text
   (place at end so it overrides earlier rules)
   ------------------------- */
/* .top-banner {
  background: transparent !important;
  box-shadow: none !important;
} */

/* REMOVE TOP ANNOUNCEMENT BAR COMPLETELY */
/* Remove background ONLY, keep flowing text */
.top-banner {
    background: transparent !important;
}



.site-header {
  background: transparent !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.header-inner,
.nav {
  background: transparent !important;
}

.nav a,
.brand-text h1,
.brand-text .tag {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* give the logo a subtle glass backing so it remains readable */
/* .logo {
  background: rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(6px);
} */




.stat-card {
    background: #567cce !important;
    border-radius: 14px;
    padding: 20px;
}



.about-card {
    background: #a0d5eb;  /* Solid white card */
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #6c9bf7; /* soft gray border */
    max-width: 500px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.18); /* strong clean shadow */
    color: #0f172a; /* dark navy text */
}




/* === Solid White Cards for Academics Section === */
.section.pale .card {
    background: #56e0ef;           /* solid white card */
    border-radius: 16px;           /* rounded corners */
    padding: 24px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* soft shadow */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none;
    color: #0f172a; /* dark readable text */
}

/* Title styling inside the card */
.section.pale .card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Paragraph text */
.section.pale .card p {
    font-size: 15px;
    line-height: 1.45;
    color: #334155;
}



.hero {
  position: relative;
  padding: 86px 0 40px;
  min-height: 520px;
  overflow: hidden;

  /* HEADER IMAGE ONLY */
  background: url("school-bg.jpg") center/cover no-repeat;
  background-size: cover;
  background-attachment: scroll;

  /* Soft overlay for readability */
  background-blend-mode: multiply;
}




/* REMOVE ALL BACKGROUND IMAGES */
body {
    background: #ffffff !important; /* plain white background */
}

/* Remove hero/header background image */
.hero {
    background: none !important;
}


/* HEADER / HERO BACKGROUND IMAGE */
.hero {
    background: url("school video.mp4") center/cover no-repeat !important;
    background-size: cover !important;
    background-position: center !important;

    /* OPTIONAL overlay for readable white text */
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.28); /* dark overlay */
    backdrop-filter: blur(1px);
}

.hero-grid {
    position: relative; /* keep content above overlay */
    z-index: 2;
}
 


/* NAVBAR BLUE BACKGROUND */
.site-header {
    background: #3763e8 !important;   /* your theme blue */
    backdrop-filter: none !important;
    border-bottom: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.header-inner {
    background: #3661e3 !important;
}

/* NAV TEXT COLOR FIX */
.nav a {
    color: #ffffff !important;
    text-shadow: none !important;
}

.brand-text h1,
.brand-text .tag {
    color: #ffffff !important;
}




/* TOP ANNOUNCEMENT BANNER — DARK BLUE */
.top-banner {
    background: #0f1e64 !important;  /* dark navy blue */
    color: #ffffff !important;
}





/* About Section Side-by-Side Layout */
.about-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start; /* forces top alignment */
    gap: 40px;
    margin-top: 40px;
}

/* LEFT SIDE (about card) */
.about-left {
    flex: 1;
}

/* RIGHT SIDE (image) */
.about-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* top align */
}

/* IMAGE */
.about-right img {
    width: 100%;
    max-width: 500px;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.18);
    object-fit: cover;
}


/* Fade-in animation (initial hidden state) */
.fade-in {
    opacity: 0;
    transition: opacity 1s ease-out;
}

/* When card enters viewport */
.fade-in.visible {
    opacity: 1;
}



 /* Campus Section Layout */
.campus-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: #fff;
    padding: 50px 20px;
    border-radius: 14px;
    margin-top: 60px;
}

.campus-left h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
}

.campus-left p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #333;
}

.campus-link {
    font-weight: 600;
    color: #1f3fbf;
    text-decoration: underline;
}

.campus-gallery {
    display: flex;
    gap: 20px;
}

.campus-card {
    position: relative;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.18);
}

.campus-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.campus-card .caption {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-weight: 600;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}



/* Card Styling for Life at Apex Section */
.life-card {
    background: #211ca9;
    padding: 28px 35px;
    border-radius: 16px;
    max-width: 550px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.life-card p {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 18px;
    color: #4c84df;
}

.life-card .life-link {
    color: #1f3fbf;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}



/* ===== Scrollable updates box ===== */
.updates-card {
  background: #073b73;
  padding: 20px;
  border-radius: 14px;
  color: #fff;
  max-width: 500px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.25);
  border-left: 4px solid #c8a861;
}

/* the inner area becomes scrollable */
.updates-inner {
  max-height: 420px;       /* adjust height as you like */
  overflow-y: auto;
  padding-right: 8px;      /* avoids text under custom scrollbar */
  scroll-behavior: smooth; /* smooth on user scroll */
}

/* item style */
.update-item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.update-item:last-child {
  border-bottom: none;
}

.update-item .date {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.85);
}

.update-item .title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

/* Nice visible thin scrollbar for WebKit (Chrome, Safari) */
.updates-inner::-webkit-scrollbar {
  width: 10px;
}
.updates-inner::-webkit-scrollbar-track {
  background: transparent;
}
.updates-inner::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.updates-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.18);
}

/* Firefox scrollbar */
@supports (scrollbar-width: thin) {
  .updates-inner { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.12) transparent; }
}

/* ensure mobile touch scrolling feels natural */
.updates-inner {
  -webkit-overflow-scrolling: touch;
}
       




/* FORCE: stable, moderate banner height */
.school-updates-section {
  height: 100px !important;     /* final height you want — adjust */
  min-height: 0 !important;
  max-height: 100px !important; /* match height to avoid conflicts */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: scroll !important;
  box-sizing: border-box !important;
}









/* School Updates block (assembly background + card) */
.updates-bg {
  position: relative;
  background-image: url('assembly.jpg'); /* <- change to your actual path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;             /* banner height - adjust to taste */
  display: flex;
  align-items: left;
  padding: 20px 0;
  box-sizing: border-box;
}

/* overlay for contrast */
.updates-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
}

/* content sits above overlay */
.updates-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  justify-content: left;
  max-width: var(--maxw, 1100px);
  margin: 0 auto;
  padding: 0 20px;
}

/* left title */
.updates-title {
  color: rgba(255,255,255,0.95);
  font-size: 48px;
  font-weight: 700;
  margin: 6px 0 0;
  width: 38%;
  line-height: 1.05;
  text-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

/* blue card */
.updates-card {
  background: #1c5c9c;
  color: #fff;
  padding: 18px;
  border-radius: 10px;
  width: 56%;
  max-width: 500px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  border-left: 6px solid #c8a14a;
  overflow: hidden;
}

/* inner scrollable area */
.updates-inner {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 8px;

}

/* item styles */
.update-item {
  padding: 16px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.update-item:last-child { border-bottom: none; }

.update-item .date {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.85);
}

.update-item .title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

/* small-screen responsiveness */
@media (max-width: 900px) {
  .updates-content { flex-direction: column; align-items: stretch; }
  .updates-title { width: 100%; font-size: 32px; margin-bottom: 12px; }
  .updates-card { width: 100%; max-width: none; }
  .updates-inner { max-height: 500px; }
}

/* Two-forms side-by-side alignment (keeps both forms top-aligned and same height) */
.two-forms-wrapper {
  display: flex;
  gap: 40px;                 /* space between the two forms */
  align-items: flex-start;   /* keep both forms aligned at the top */
  justify-content: center;
  max-width: var(--maxw, 1100px);
  margin: 40px auto;         /* spacing above & center horizontally */
  padding: 0 20px;
  box-sizing: border-box;
}

/* each column wrapper */
.form-box {
  flex: 1 1 48%;             /* two columns with near-equal widths */
  display: flex;             /* make children stretch */
  align-items: stretch;      /* child cards will stretch to same height */
  min-width: 260px;          /* prevents too-narrow columns */
  box-sizing: border-box;
}

/* make the actual card fill its column and match height */
.contact-card-v2,
.feedback-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-items: stretch;
}

/* content area inside the card grows so both cards have equal height */
.contact-card-v2 > .card-body,
.feedback-card > .card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* make form elements flow vertically inside the card-body */
.contact-card-v2 .form-inner,
.feedback-card .form-inner {
  width: 100%;
}

/* keep submit button at bottom with small top gap */
.contact-card-v2 .btn-submit,
.feedback-card .btn-submit {
  margin-top: 18px;
  align-self: center;
}

/* small screens: stack vertically */
@media (max-width: 980px) {
  .two-forms-wrapper {
    flex-direction: column;
    gap: 24px;
    margin: 28px auto;
  }
  .form-box { width: 100%; flex: 1 1 100%; }
  .contact-card-v2,
  .feedback-card { width: 100%; }
}




/* ===== Minimal override: force two forms side-by-side & equal-height ===== */
.two-forms-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;      /* keep them on one row on wide view */
  gap: 40px !important;
  align-items: stretch !important;   /* top-align & make heights equal */
  justify-content: center !important;
}

.two-forms-wrapper .form-box {
  flex: 1 1 48% !important;          /* two near-equal columns */
  display: flex !important;
  align-items: stretch !important;   /* ensure children stretch to full height */
  box-sizing: border-box !important;
  min-width: 260px !important;
}

/* Make the card elements fill their column and match height */
.contact-card-v2, .feedback-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure content area expands so buttons sit at bottom for visual parity */
.contact-card-v2 > .card-body,
.feedback-card > .card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

/* Keep form area flowing vertically */
.contact-card-v2 .form-inner,
.feedback-card .form-inner {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Responsive fallback: stack on small screens (keeps your existing breakpoint) */
@media (max-width: 980px) {
  .two-forms-wrapper { flex-direction: column !important; gap: 24px !important; }
  .two-forms-wrapper .form-box { width: 100% !important; flex: 1 1 100% !important; }
}


/* ===== Forms: nicer side-by-side styling (paste at end of style.css) ===== */

/* Basic typography for form fields */
.two-forms-wrapper,
.contact-card-v2,
.feedback-card {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #213444;
}

/* Card visuals (both cards) */
.contact-card-v2,
.feedback-card {
  background: #efefef;                /* pale card background */
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
  box-sizing: border-box;
}

/* Heading alignment */
.contact-card-v2 h2,
.feedback-card h2 {
  margin: 4px 0 18px;
  font-size: 28px;
  font-weight: 700;
  color: #213444;
  text-align: center;
}

/* Make the internal form area fill available space so cards match height */
.contact-card-v2 .card-body,
.feedback-card .card-body {
  display: flex;
  flex-direction: column;
}

/* Standard styles for all inputs/select/textarea inside both cards */
.contact-card-v2 input,
.contact-card-v2 textarea,
.contact-card-v2 select,
.feedback-card input,
.feedback-card textarea,
.feedback-card select,
.contact-form-v2 input,
.contact-form-v2 textarea,
.form-inner input,
.form-inner textarea,
.form-inner select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #cfcfcf;
  background: #fff;
  font-size: 14px;
  color: #13334a;
  box-sizing: border-box;
  outline: none;
}

/* small row inputs in contact card (two per row) */
.contact-form-v2 .row {
  display: flex;
  gap: 12px;
}
.contact-form-v2 .row input { flex: 1 1 50%; }

/* labels in feedback card (left stacked form) */
.feedback-card label {
  display: block;
  margin: 8px 0 6px;
  color: #2b4150;
  font-size: 15px;
  font-weight: 500;
}

/* Textarea sizing */
.contact-card-v2 textarea,
.feedback-card textarea {
  min-height: 160px;
  resize: vertical;
}

/* buttons */
.btn-submit,
.contact-card-v2 .btn-submit,
.feedback-card .btn-submit,
.btn-submit[type="submit"] {
  display: inline-block;
  background: linear-gradient(90deg,#133a6b,#2b3aa6);
  color: #ffd879;
  padding: 10px 18px;
  border-radius: 8px;
  border: 0;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15,23,42,0.12);
}

/* center buttons and keep them bottom-aligned */
.contact-card-v2 .btn-submit,
.feedback-card .btn-submit {
  margin-top: auto;       /* pushes button to bottom of card-body */
  align-self: center;
}

/* give the two columns equal visual height and spacing */
.two-forms-wrapper .form-box { display: flex; }
.two-forms-wrapper .form-box > div {
  flex: 1 1 auto;
}

/* tighten spacing and ensure the contact card rows line up visually */
.contact-card-v2 .form-inner .row + .row,
.feedback-card .form-inner > label + label {
  margin-top: 6px;
}

/* subtle hover on inputs */
.contact-card-v2 input:focus,
.contact-card-v2 textarea:focus,
.feedback-card input:focus,
.feedback-card textarea:focus {
  border-color: #9ab6e6;
  box-shadow: 0 6px 18px rgba(41,84,155,0.07);
}

/* small screens: stack vertically (keeps your responsive rule intact) */
@media (max-width: 500px) {
  .two-forms-wrapper { flex-direction: column; gap: 28px; margin: 24px auto; }
  .contact-form-v2 .row { flex-direction: column; }
}

/* Accessibility: increase tap targets on small screens */
@media (max-width: 480px) {
  .btn-submit { padding: 12px 18px; font-size: 15px; }
  .contact-card-v2 input,
  .feedback-card input { padding: 12px; }
}



/* Reduce textarea height for both forms */
.contact-card-v2 textarea,
.feedback-card textarea {
    min-height: 40px !important;   /* was 160–300px */
}

/* Also reduce vertical padding inside the cards */
.contact-card-v2,
.feedback-card {
    padding: 18px !important;
}

/* Reduce top margin of both card headings */
.contact-card-v2 h2,
.feedback-card h2 {
    margin-bottom: 12px !important;
}




.footer-contact {
  background: #222;             /* dark background */
  color: #ffffff;               /* white text */
  text-align: center;
  padding: 60px 20px;           /* height and spacing */
  font-size: 18px;
}

.footer-contact h2 {
  font-size: 28px;
  margin-bottom: 15px;
  font-weight: 700;
}

.footer-contact p {
  margin: 6px 0;
}



/* Remove the large empty space under the Contact + Feedback forms */
section.container:nth-of-type(1),
.two-forms-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove bottom spacing inside the card boxes */
.form-box {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove top margin from the next section (Events) */
#events {
    margin-top: 0 !important;
    padding-top: 0 !important;
}



 /* Remove space below the two forms */
.two-forms-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove padding from the section that wraps the forms */
section.container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure the next section (events) does NOT add extra top space */
#events {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Pull the footer upward (remove top space) */
.site-footer {
    margin-top: 0 !important;
    padding-top: 20px !important;  /* keep small spacing so it does not stick */
}


section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.two-forms-wrapper {
    margin-bottom: 20px !important; /* small space only */
}

.site-footer {
    margin-top: 0 !important;
}


/* REMOVE ALL SPACE UNDER THE CONTACT + FEEDBACK FORMS */
.two-forms-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

section.container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Remove default space added by any .section below */
.section {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure Events section starts immediately after forms */
#events {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Keep footer tight under events */
.site-footer {
    margin-top: 0 !important;
}


/* ===============================
   SMALL OVERRIDES — KEEP DESIGN (Option A)
   Fix: remove blank gap under Contact + Feedback forms
   Place this at the very end of style.css
   =============================== */

/* keep forms side-by-side and flush to the next element */
.two-forms-wrapper {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;      /* stays side-by-side on wide screens */
  align-items: stretch !important; /* equal-height columns */
}

/* remove bottom spacing from the container that wraps the forms */
section.container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* collapse margin/padding of whatever immediately follows the forms */
.two-forms-wrapper + * ,
.two-forms-wrapper ~ * {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* common next-section targets — ensure events/admissions/footer sit immediately after */
#events,
#admissions,
.updates-bg,
.footer-contact,
.site-footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* pull footer tight under content, keep slight breathing room */
.site-footer {
  margin-top: 0 !important;
  padding-top: 10px !important;
}

/* hide completely-empty accidental sections that produce huge gaps */
section:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* tiny responsive safety: stack forms on narrow screens (keeps your existing breakpoints) */
@media (max-width: 980px) {
  .two-forms-wrapper { flex-direction: column !important; gap: 24px !important; }
  .two-forms-wrapper .form-box { width: 100% !important; flex: 1 1 100% !important; }
}




/* FORCE extra spacing between "Life on Campus" and "School Updates" */
.about-section + .campus-section + .updates-bg,
.campus-section + .updates-bg,
.section.campus-section + .updates-bg,
.updates-bg {
  margin-top: 80px !important;      /* adjust spacing here */
  padding-top: 20px !important;     /* optional — keeps inner spacing consistent */
}

/* slightly smaller spacing on narrow screens */
@media (max-width: 900px) {
  .about-section + .campus-section + .updates-bg,
  .campus-section + .updates-bg,
  .section.campus-section + .updates-bg,
  .updates-bg {
    margin-top: 36px !important;
    padding-top: 12px !important;
  }
}
















.footer-card {
    background: #042b64;  /* unified dark card */
    color: #ffffff;
    text-align: center;
    padding: 50px 20px;
    border-top: 1px solid #0f4bd8; /* optional highlight */
}

.footer-card h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 8px;
}

.footer-card p {
    margin: 6px 0;
    font-size: 18px;
}

.footer-card hr {
    width: 80%;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    margin: 25px auto;
}

.footer-card .copy {
    font-size: 16px;
    opacity: 0.85;
    margin-top: 2px;
}









/* ---- FORCE-SIZE logo: place at very end of your stylesheet ---- */
/* .logo, .logo img, img.logo {
  width: 64px !important;        
  height: 70px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  display: inline-block !important;
  object-fit: contain !important;
  overflow: hidden !important;
  vertical-align: middle !important;
} */



/* === FIX LOGO SIZE & REMOVE BLUE BACKGROUND === */
/* .logo {
    width: 120px !important;    
    height: 120px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;   
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
     
} */

/* .brand {
    gap: 60px;   /* increases space between logo and text */
/* } */


/* .logo img {
    width: 120% !important;
    height: 120% !important;
    object-fit: contain !important;
    display: block !important;
} */



/* Reduce NAVBAR height */
.site-header {
    padding: 4px 0 !important;     /* reduces top & bottom space */
    height: 60px !important;       /* adjust navbar height */
}

.header-inner {
    padding: 4px 0 !important;
    height: 60px !important;
    display: flex;
    align-items: center !important;
}



/* Make navbar full-width with no left/right gaps */
.site-header {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.header-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 30px !important;  /* adjust spacing as needed */
    margin: 0 !important;
    background: #3763e8 !important; /* ensure solid background */
}




.two-forms-wrapper {
    margin-bottom: 80px !important;   /* space between forms and footer */
    padding-bottom: 0 !important;
}
.section.pale {
    margin-bottom: 60px !important;  /* space below Academics cards */
}







/* ===== FORCE section heading to visible blue ===== */
#academics,
#academics .section,
#academics .section-title,
#academics h2 {
  background: transparent !important;
  color: #1a4fff !important;         /* blue text */
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

/* Ensure the heading sits above any overlay */
#academics h2,
#academics .section-title {
  position: relative !important;
  z-index: 9999 !important;
  display: inline-block !important; /* so background overlays don't cover it */
}

/* Remove any overlay pseudo-elements coming from parent sections */
#academics::before,
#academics::after,
#academics .section::before,
#academics .section::after,
#academics .section-title::before,
#academics .section-title::after {
  display: none !important;
  content: none !important;
  background: none !important;
}




/* Replace HERO background image with video */

.hero {
  position: relative;
  overflow: hidden;
  background: none !important; /* removes building image */
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Keep text & cards above video */
.hero .container {
  position: relative;
  z-index: 2;
}

/* Dark overlay for readability */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}




/* ===== FORCE FIX HEADER BLUR ===== */

/* Remove any blur/filter from header */
.site-header,
.site-header * {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Make header solid and above everything */
.site-header {
  background-color: #3f66e0 !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999 !important;
}

/* Prevent hero overlay/video from touching header */
.hero::before,
.hero::after {
  top: 100px; /* pushes overlay below header */
}




.hero-bg-video {
  image-rendering: auto;
  filter: none !important;
  transform: translateZ(0);
}




/* Campus section: cards on LEFT, title on RIGHT */

.campus-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

.campus-photo-grid {
  order: 1;          /* cards FIRST = left side */
  flex: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.campus-title {
  order: 2;          /* title SECOND = right side */
  flex: 1;
  text-align: left;
}
/* FORCE Nunito everywhere */
*,
*::before,
*::after {
  font-family: 'Nunito', sans-serif !important;
}









.site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.header-container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo-btn img {
    height: 55px;
}

.nav-menu a {
    margin-left: 20px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

.nav-menu a:hover {
    color: #0056b3;
}





/* =====================================
   FIX: Campus Life (2nd Blue Bar)
   ===================================== */

.campus-header {
    background: #2344c6;        /* keep blue */
    padding: 6px 0 !important;  /* 👈 HEIGHT CONTROL */
    margin: 0 !important;

    min-height: unset !important;
    height: auto !important;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Text inside the bar */
.campus-header h5 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;  /* smaller text = shorter bar */
    line-height: 1.2 !important;
    font-weight: 600;
    color: #ffffff;
}


/* =====================================
   FIX: Campus Life spacing & separation
   ===================================== */

/* 1. Campus Life blue bar — tight */
.campus-header {
    padding: 16px 0 !important;
    margin: 36px !important;
    background: #2344c6;
}

/* 2. Remove gap BELOW the blue bar */
.campus-header + * {
    margin-top: 12px !important;   /* small clean gap */
    padding-top: 0 !important;
}

/* 3. Remove excessive top spacing from campus section */
.campus-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4. Optional: subtle separation line */
.campus-header::after {
    content: "";
    display: block;
    height: 1px;
    background: rgba(255,255,255,0.25);
    margin-top: 6px;
}


/* Make Campus Life bar full width like the image */
.campus-header {
    width: 100vw !important;       /* full viewport width */
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}


/* ================================
   REMOVE ABOUT SECTION CARD STYLE
   ================================ */

.about-card,
.about-section .about-card,
#about .about-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 800px;   /* keeps text readable */
}

/* Optional: improve text readability */
.about-card h2,
.about-card h3 {
    margin-top: 0;
}

.about-card p {
    color: #0f172a;
    line-height: 1.6;
}

/* ================================
   UNIFY TEXT ALIGNMENT (About)
   ================================ */

/* Wrapper for long text sections */
.text-content,
.about-text,
.about-left,
.keshava-text {
    max-width: 700px;        /* same readable width */
    margin: 0;               /* left aligned */
    text-align: left;
}

/* Paragraph styling */
.text-content p,
.about-text p,
.about-left p,
.keshava-text p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 18px;
    color: #1f2937;          /* dark readable text */
}
/* Force same left alignment for heading & text */
.about-left {
    max-width: 700px;
    margin: 0;              /* left aligned */
    padding: 0;
}

.about-left h2 {
    margin: 0 0 12px 0;     /* no left offset */
    padding: 0;
    text-align: left;
}

.about-left p {
    margin: 0 0 18px 0;
    padding: 0;
    text-align: left;
}




.about-section * {
  margin-left: 0 !important;
  padding-left: 0 !important;
}





/* ===== ABOUT SECTION ===== */
.about-section {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 24px;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* image bigger */
  gap: 60px;
  align-items: center;
}

/* IMAGE LEFT */
.about-image img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 25px 50px rgba(0,0,0,0.18);
}

/* TEXT RIGHT */
.about-text h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

.about-text .intro {
  font-weight: 600;
  margin-bottom: 16px;
}

.about-text p {
  line-height: 1.7;
  margin-bottom: 14px;
}

/* MOBILE */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}



/* Floating WhatsApp Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
.whatsapp-float img {
  width: 32px;
  height: 32px;
}


/* Floating WhatsApp Button */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  z-index: 9999;

  /* Attention animation */
  animation: whatsapp-attention 5s infinite;
}

/* Icon size */
.whatsapp-float img {
  width: 32px;
  height: 32px;
}

/* Hover effect */
.whatsapp-float:hover {
  transform: scale(1.12);
}

/* Attention animation: jump + pulse */
@keyframes whatsapp-attention {
  0% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(211, 37, 51, 0.6);
  }

  6% {
    transform: translateY(-8px);
  }

  12% {
    transform: translateY(0);
    box-shadow: 0 0 0 18px rgba(222, 37, 173, 0);
  }

  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 rgba(211, 86, 37, 0);
  }
}






/* Remove ONLY dark blue background of top announcement bar */
.top-banner {
    background: transparent !important;
}


/* =========================
   VIDEO REPLACING GREY AREA
   ========================= */

.video-section {
  width: 100%;
  height: 420px;          /* same height as grey area */
  position: relative;
  overflow: hidden;
  background: #000;
}

.video-section video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Optional dark overlay */
.video-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
/* ===== HERO VIDEO SECTION ===== */
.hero {
  position: relative;
  height: 220px;          /* adjust video height here */
  overflow: hidden;
}

/* Video full cover */
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Overlay to place stats */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 2;
}

/* ===== STATS ON VIDEO ===== */
.stats {
  position: absolute;
  bottom: 15px;          /* move cards up/down */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  z-index: 3;
  width: auto;
}

/* Individual stat cards */
.stat-card {
  background: rgba(83, 124, 214, 0.95);
  padding: 28px 45px;
  border-radius: 16px;
  text-align: center;
  color: #fff;
  min-width: 220px;
}

/* Numbers */
.stat-number {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 6px;
}

/* Labels */
.stat-label {
  font-size: 14px;
  opacity: 0.95;
}

/* Push next section down */
.about-section {
  margin-top: 120px;
}

/* ===== MOBILE FIX ===== */
@media (max-width: 900px) {
  .hero {
    height: 300px;
  }

  .stats {
    flex-direction: column;
    gap: 16px;
    bottom: 20px;
  }

  .stat-card {
    min-width: 260px;
  }
}


/* =====================================
   FORCE DECREASE VIDEO HEIGHT (FINAL)
   ===================================== */

/* Force the video section height */
.video-section {
  height: 220px !important;
  max-height: 600px !important;
  min-height: 600px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Force video to stay inside the section */
.video-section video {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Kill any hero/video interference */
.hero,
.hero-bg-video {
  display: none !important;
}

/* Pull stats upward so they align nicely */
.stats {
  margin-top: -60px !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Mobile fix */
@media (max-width: 768px) {
  .video-section {
    height: 180px !important;
  }

  .stats {
    margin-top: -30px !important;
  }
}



/* =====================================
   FIX: KEEP STATS UNDER THE VIDEO
   ===================================== */

/* Video section height (you can adjust this) */
.video-section {
  height: 260px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Video fits inside section */
.video-section video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* RESET stats positioning */
.stats {
  position: relative !important;     /* ❌ remove absolute */
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 40px auto 0 !important;    /* space BELOW video */
  padding: 0 20px !important;
  background: #ffffff !important;    /* white area under video */
  z-index: 1 !important;
}

/* Keep cards aligned */
.stat-card {
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Mobile fix */
@media (max-width: 768px) {
  .video-section {
    height: 200px !important;
  }

  .stats {
    flex-direction: column;
    gap: 20px;
  }
}



/* =====================================
   ADD SPACE BETWEEN CAMPUS & FORMS
   ===================================== */

/* Space below Campus section */
.campus-section,
.campus-photos-section {
  margin-bottom: 100px !important;   /* adjust as needed */
}

/* Extra safety: space above Contact section */
#contact {
  margin-top: 100px !important;
}




.stat-number {
  position: relative;
  font-size: 32px;
  font-weight: 800;
  color: #ffefc2;
}

/* PLUS SYMBOL */
.stat-number.plus::after {
  content: "+";
  position: absolute;
  top: 0px;        /* move up */
  right: 40px;     /* move to top-right */
  font-size: 18px;
  font-weight: 700;
  color: #ffefc2;
}

.stats .stat-card:nth-child(2) .stat-number::after {
  content: "+";
  position: absolute;
  top: -6px;
  right: 80px;
  font-size: 18px;
  font-weight: 700;
  color: #ffefc2;
}
.stats .stat-card:nth-child(3) .stat-number::after {
  content: "+";
  position: absolute;
  top: -6px;
  right: 80px;
  font-size: 18px;
  font-weight: 700;
  color: #ffefc2;
}





/* =========================
   NAVBAR → WHITE
   ========================= */
.site-header {
  background: #2f0ac2 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.header-inner {
  background: #f5f5f8 !important;
}

/* Keep nav links readable */
.nav a {
  color: #062c81 !important;
  text-shadow: none !important;
}

/* =========================
   ANNOUNCEMENT BAR → TEXT BLUE
   ========================= */
.top-banner {
  background: inherit !important;   /* background unchanged */
}

.top-banner,
.top-banner .marquee {
  color: #1f3fbf !important;         /* blue text */
  font-weight: 600;
}

/* Announcement bar text → WHITE */
.top-banner,
.top-banner .marquee {
    color: #ffffff !important;
}


.about-text p {
  text-align: justify;
  text-justify: inter-word;
}





/* ================================
   HEADER STRUCTURE FIX (FINAL)
   ================================ */

.site-header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
}

/* layout */
.header-layout {
  display: flex;
  width: 100%;
}

/* LOGO COLUMN */
.logo-column {
  width: 180px;                 /* adjust if needed */
  background: #f9f9fd;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* logo fits both bars */
.logo-column img {
  width: 55%;
  height: auto;
  object-fit: contain;
}

/* RIGHT SIDE */
.header-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* TOP STRIP */
.top-banner {
  height: 40px;
  background: #ffffff;        /* WHITE strip */
  color: #062c81;             /* readable blue text */
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e6e6e6;  /* subtle separation */
}


/* NAV STRIP */
.nav-bar {
  height: 35px;
  background: #f9f9fd;
  display: flex;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
}

/* NAV LINKS */
.nav a {
  color: #062c81;
  font-weight: 600;
  text-decoration: none;
  margin-right: 16px;
}


/* ================================
   FORCE TOP STRIP TO WHITE (FINAL)
   ================================ */
.site-header .top-banner {
  background-color:#f9f9fd !important;
  color: #062c81 !important;
  border-bottom: 1px solid #e6e6e6 !important;
}

/* marquee text color */
.site-header .top-banner .marquee {
  color: #2a1580 !important;
  font-weight: 600;
}

.top-banner .marquee {
  font-weight: 900;   /* bold */
}

/* ===== FORCE BOLD TEXT IN TOP BANNER ===== */
.site-header .top-banner .marquee,
.top-banner .marquee,
.marquee {
  font-weight: 900 !important;
  font-family: 'Nunito', sans-serif !important;
}





.erp-btn {
    background: #1f3c88;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    text-decoration: none;
}

.erp-btn:hover {
    background: #162d63;
}  where i want to change the logo size increase