body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.header {
    position: sticky;
    top: 0;
    background: #0b1220;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 30px;
    z-index: 999;
}

.logo {
    font-size: 20px;
    font-weight: bold;
}

.logo img {
  max-height: 75px;
  width: auto;
}

.nav a, .auth a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
}

.nav {
    flex: 1;
    text-align: center;
}

.hero-section {
  background: linear-gradient(135deg, #f5fbff 0%, #bbdefb 50%, #90caf9 100%);
  min-height: 600px;
  display: flex;
  align-items: center;
}

.programs-hero {
  background: linear-gradient(135deg, #f5fbff 0%, #bbdefb 50%, #90caf9 100%);
}


body {
    margin: 0;
}

/* Remove any gap between header and hero */
.header {
    margin-bottom: 0 !important;
}

.header {
  height: 80px;
  background: #ffffff;
  z-index: 1020;
}

.header-inner {
  height: 80px;
}

.header.sticky-top {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.logo-img {
  height: 120px;
  width: auto;
}

.nav a:hover {
  color: #2563eb !important;
}

.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 24px;
}

.header-left,
.header-center,
.header-right {
  display: flex;
  align-items: center;
}

.header-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 80px;
}

.header-left {
  justify-self: start;
  display: flex;
  align-items: center;
}

.header-center {
  justify-self: center;
}

.header-right {
  justify-self: end;
  display: flex;
  align-items: center;
}

.logo-img {
  height: 100px;   /* readable size */
  width: auto;
}

.site-footer {
  background: #f8fafc;
  border-top: 1px solid #e5e7eb;
  margin-top: 80px;
}

.site-footer .row > div {
  padding-right: 24px;
}

.site-footer h6 {
  letter-spacing: 0.4px;
}

.footer-bottom {
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.2s ease;
}

.social-link:hover {
  background: #2563eb;
  color: #ffffff;
}

.hero-image {
  max-width: 520px;
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}


@media (max-width: 768px) {
  .final-cta-section h2 {
    font-size: 1.5rem;
  }
}

.programs-section {
  background: #ffffff;
}

.program-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  transition: all 0.25s ease;
  background: #ffffff;
}

.program-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.program-img {
  height: 200px;
  width: 100%;
  object-fit: cover;
}

.why-choose-us {
  background: #f8fafc;
}

.why-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  transition: all 0.25s ease;
}

.why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.why-icon {
  font-size: 42px;
}

.testimonials-section {
  background: #ffffff;
}

.testimonial-card {
  max-width: 380px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  transition: all 0.25s ease;
}

.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: #ffffff;            /* Ensure text is visible */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
}

.final-cta-section {
  background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 50%, #ffffff 100%);
  border-top: 1px solid #e5e7eb;
}

.trust-badge {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.programs-hero {
  background: linear-gradient(135deg, #eef2ff 0%, #f0f9ff 50%, #ffffff 100%);
  border-bottom: 1px solid #e5e7eb;
}

.programs-list {
  background: #ffffff;
}

.programs-audience {
  background: #f8fafc;
}

.audience-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  transition: all 0.25s ease;
}

.audience-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.audience-icon {
  font-size: 40px;
}

.programs-how-it-works {
  background: #ffffff;
}

.how-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  transition: all 0.25s ease;
}

.how-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.how-step {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.programs-faq {
  background: #f8fafc;
}

.programs-filter {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.city-card {
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}
.city-card:hover {
  border-color: #0d6efd;
  transform: translateY(-2px);
}
.city-card.active {
  border: 2px solid #0d6efd;
  background: #f0f6ff;
}
.campus-card {
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}
.campus-card:hover {
  border-color: #0d6efd;
  transform: translateY(-2px);
}
.campus-card.active {
  border: 2px solid #0d6efd;
  background: #f0f6ff;
}

/* Mobile tap targets for campus cards */
@media (max-width: 576px) {
  .campus-card .card-body {
    padding: 16px 14px;
  }

  .campus-card {
    border-radius: 12px;
  }
}

.age-group-card {
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}
.age-group-card:hover {
  border-color: #0d6efd;
  transform: translateY(-2px);
}
.age-group-card.active {
  border: 2px solid #0d6efd;
  background: #f0f6ff;
}

/* ===== Registration Page UI Polish ===== */

#registrationForm {
  border-radius: 16px;
  background: #ffffff;
}

#registrationForm .form-label {
  font-weight: 600;
}

#registrationForm .form-select,
#registrationForm .form-control {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

#registrationForm .form-select:focus,
#registrationForm .form-control:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

#weeksSelect {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

#totalPriceBox {
  border-radius: 12px;
}

#registrationForm button[type="submit"] {
  border-radius: 12px;
  padding: 14px 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Mobile spacing */
@media (max-width: 576px) {
  #registrationForm {
    padding: 16px !important;
  }
}

/* Ensure dropdowns don't visually collapse */
#registrationForm .form-select {
  margin-bottom: 14px;
}

/* Extra spacing before Weeks box */
#weeksSelect {
  margin-top: 8px;
}

/* Force Age Group dropdown to be visible */
#ageGroupSelect {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 1;
  margin-bottom: 16px;
}

/* Definitive fix for Age Group dropdown visibility */
#registrationForm #ageGroupSelect {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 48px;           /* matches form-select-lg height */
  margin-top: 10px;
  margin-bottom: 16px;
  background-color: #fff;    /* ensure not blending with bg */
}

/* ===== Final Registration Page Polish ===== */

/* Soft shaded card */
#registrationForm {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

/* Sleek inputs */
#registrationForm .form-select,
#registrationForm .form-control {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
}

#registrationForm .form-select::placeholder,
#registrationForm .form-control::placeholder {
  color: #9aa3af;
  font-weight: 500;
}

/* Focus state */
#registrationForm .form-select:focus,
#registrationForm .form-control:focus {
  border-color: #4f46e5; /* subtle indigo accent */
  box-shadow: 0 0 0 0.2rem rgba(79, 70, 229, 0.15);
}

/* CTA button polish */
#registrationForm .btn-primary {
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Weeks box refinement */
#weeksSelect {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}

/* Subtle divider polish */
#registrationForm hr {
  opacity: 0.15;
}

/* Mobile padding */
@media (max-width: 576px) {
  #registrationForm {
    padding: 18px !important;
  }
}

/* ===== Premium Registration Card (More Shade / Depth) ===== */
#registrationForm {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border-radius: 20px;
  box-shadow:
    0 20px 40px rgba(15, 23, 42, 0.12),
    0 6px 12px rgba(15, 23, 42, 0.06);
}

/* ===== Delicate Select Fields ===== */
#registrationForm .form-select {
  border-radius: 14px;
  border: 1px solid #e6e9f0;
  background-color: #ffffff;
  padding: 14px 16px;
  font-size: 16px;            /* selected value size */
  font-weight: 500;
}

/* Smaller, classy placeholder text */
#registrationForm .form-select option[value=""] {
  color: #9aa3af;
  font-size: 13px;
  font-weight: 500;
}

/* When focused */
#registrationForm .form-select:focus {
  border-color: #5b6cff;      /* subtle brand accent */
  box-shadow: 0 0 0 0.2rem rgba(91, 108, 255, 0.15);
}

/* Spacing between fields */
#registrationForm .mb-3 {
  margin-bottom: 18px !important;
}

/* Soft inner padding for form */
#registrationForm {
  padding: 28px !important;
}

@media (max-width: 576px) {
  #registrationForm {
    padding: 22px !important;
  }
}

/* ===== Registration Page Background = Home Hero Gradient ===== */
/* Adjust these colors to EXACTLY match your home hero gradient if needed */
.registration-page-bg {
  background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 50%, #ecfeff 100%);
}

/* Ensure full-width background behind the form */
.registration-page-bg .container {
  max-width: 100%;
}

/* ===== Programs Page Polish ===== */

.filter-card {
  background: #ffffff;
}

.program-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.program-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

.program-img {
  height: 200px;
  object-fit: cover;
}

.how-step {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0d6efd;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ===== Premium Filter Bar (match Registration form) ===== */
.programs-filter .filter-card {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border-radius: 18px;
  box-shadow:
    0 12px 24px rgba(15, 23, 42, 0.10),
    0 4px 10px rgba(15, 23, 42, 0.05);
}

.programs-filter .form-select {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 500;
  background-color: #ffffff;
}

.programs-filter .form-select option[value=""] {
  color: #9aa3af;
  font-size: 13px;
  font-weight: 500;
}

.programs-filter .form-select:focus {
  border-color: #5b6cff;
  box-shadow: 0 0 0 0.2rem rgba(91, 108, 255, 0.15);
}

.programs-filter .btn-primary {
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ===== Homepage Final Polish ===== */

.hero-image {
  max-height: 420px;
  object-fit: cover;
}

.program-card,
.why-card,
.testimonial-card {
  transition: transform .2s ease, box-shadow .2s ease;
}

.program-card:hover,
.why-card:hover,
.testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

.trust-badge {
  background: #f8fafc;
  border-radius: 999px;
  padding: 10px 16px;
  display: inline-block;
  font-weight: 600;
}

/* ===== About Page (Multi-Section) ===== */

.about-hero {
  background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 50%, #ecfeff 100%);
}

.about-sections .card {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.10),
    0 6px 12px rgba(15, 23, 42, 0.05);
}

.about-sections .content-prose p {
  line-height: 1.75;
  margin-bottom: 1rem;
}

.about-sections ul {
  padding-left: 1.1rem;
}

.about-sections li {
  margin-bottom: 0.5rem;
}

/* ===== About Page (Wide Sections, Premium Cards) ===== */
.about-hero {
  background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 50%, #ecfeff 100%);
}

.about-sections .card {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.10),
    0 6px 12px rgba(15, 23, 42, 0.05);
}

.about-sections .content-prose p {
  line-height: 1.75;
  margin-bottom: 1rem;
}

.about-sections ul {
  padding-left: 1.1rem;
}

.about-sections li {
  margin-bottom: 0.5rem;
}

/* ===== About Page Side Images ===== */
.about-side-img {
  max-height: 280px;
  object-fit: cover;
}

.hero-section .btn-outline-primary {
  background-color: #ffffff;
  color: #1e88e5; /* blue text, visible by default */
  border: 2px solid #ffffff;
}

.hero-section .btn-outline-primary:hover {
  background-color: #e3f2fd;
  color: #0f4c81; /* darker blue on hover */
}

/* Uniform hero for all internal pages (About, Programs, Testimonials, Contact) */
.about-hero,
.programs-hero,
.testimonials-hero,
.contact-hero {
  min-height: 350px;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg,
    #dbeafe 0%,   /* light blue behind text */
    #bfdbfe 35%,
    #93c5fd 70%,  /* deeper blue */
    #60a5fa 100%
  );
}

/* Program cards hover effect */
.program-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.program-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Program card image zoom on hover */
.program-card img {
  transition: transform 0.25s ease;
}

.program-card:hover img {
  transform: scale(1.05);
}

/* Homepage unified background + section dividers */
body {
  background-color: #f8f9fa; /* matches bg-light */
}

.homepage section {
  background: transparent !important;
  padding-top: 4rem;
  padding-bottom: 4rem;
  position: relative;
}

.homepage section::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.06); /* light divider */
  margin-top: 3rem;
}

/* Remove divider from last section */
.homepage section:last-of-type::after {
  display: none;
}

/* ================================
   HOMEPAGE SECTION SPACING + DIVIDERS
   ================================ */

.home-section {
  background: #ffffff !important;
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.home-hero {
  background: inherit !important;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.home-section + .home-section {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ================================
   HOMEPAGE SECTION SPACING (FINAL)
   ================================ */

/* Increase padding for all homepage sections */
.hero-section {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

.home-section {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

/* Optional: slightly more breathing room for final CTA */
.final-cta-section {
  padding-top: 6.5rem !important;
  padding-bottom: 6.5rem !important;
}

/* ================================
   ABOUT PAGE SECTION DIVIDERS + SPACING
   ================================ */

/* Increase top & bottom padding for About page sections */
.about-page section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* Light horizontal divider between About page sections */
.about-page section + section {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}


/* ================================
   ABOUT PAGE VERTICAL BALANCE (FINAL)
   ================================ */

/* Space between sections */
body .about-page section {
  margin-top: 5rem !important;
  margin-bottom: 5rem !important;
}

/* Extra top padding for the FIRST section to balance the page */
body .about-page section:first-of-type {
  padding-top: 6rem !important;
}

/* Divider between sections */
body .about-page section + section {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ================================
   ABOUT PAGE SPACING – HARD OVERRIDE
   ================================ */

/* Remove Bootstrap py-5 effect on About page sections */
body .about-page section.py-5 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Apply symmetric spacing we control */
body .about-page section {
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}

/* Add divider between sections */
body .about-page section + section {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ================================
   ABOUT PAGE SPACING (FINAL, GUARANTEED)
   ================================ */

/* Apply spacing to section */
body .about-page section {
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
}

/* Ensure inner container doesn't collapse visual spacing */
body .about-page section > .container {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

/* Divider between sections */
body .about-page section + section {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* ================================
   ABOUT PAGE VISIBLE CONTENT SPACING (FINAL FIX)
   ================================ */

/* Force spacing inside section content */
body .about-page section > .container {
  padding-top: 5rem !important;
  padding-bottom: 1.5rem !important;
}

/* Divider between sections (keep) */
body .about-page section + section {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
/* ================================
   HERO SECTION – NO TOP PADDING
   ================================ */

.hero-section {
  padding-top: 0 !important;
}

/* ================================
   FORCE HERO SECTION TO TOP (FINAL)
   ================================ */

/* Remove any top spacing on hero */
body .hero-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* If base.html wraps content in a padded main/container, neutralize it for hero */
body main > .hero-section:first-child,
body main .hero-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Remove top margin from first inner row to avoid Bootstrap spacing */
body .hero-section .row:first-child {
  margin-top: 0 !important;
}

/* ================================
   HERO SECTION – NO TOP & NO BOTTOM PADDING
   ================================ */

body .hero-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ================================
   FORCE HERO SECTION BOTTOM SPACE REMOVAL
   ================================ */

/* Remove bottom padding on hero section and its inner container */
body .hero-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove bottom padding from inner container */
body .hero-section > .container {
  padding-bottom: 0 !important;
}

/* Remove bottom margin from last elements inside hero */
body .hero-section .row:last-child {
  margin-bottom: 0 !important;
}

body .hero-section .col-lg-6:last-child {
  margin-bottom: 0 !important;
}

/* ================================
   REMOVE BASE WRAPPER PADDING FOR HERO
   ================================ */

/* If base.html wraps content in <main class="container ...">, neutralize padding for hero */
body main > .hero-section:first-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body main {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Restore padding for sections after hero */
body main > section:not(.hero-section) {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

/* ================================
   REMOVE WRAPPER PADDING FOR HOMEPAGE HERO ONLY
   ================================ */

/* Remove wrapper spacing only when hero is the first section on home */
body main > .hero-section:first-child {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove extra bottom spacing coming from base wrapper around hero */
body main > .hero-section:first-child > .container {
  padding-bottom: 0 !important;
}

/* Keep other pages and sections unaffected */

/* ================================
   HERO SECTION OVERRIDE (NO TOP & NO BOTTOM GAP)
   ================================ */
.hero-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ================================
   ABOUT PAGE HERO – REMOVE BOTTOM GAP COMPLETELY
   ================================ */
.about-hero {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Remove top spacing of the section right after About hero */
.about-hero + section {
  margin-top: 0 !important;
  padding-top: 4rem; /* keep nice spacing, adjust if needed */
}
/* ================================
   FINAL FIX: REMOVE HERO TOP GAP
   ================================ */

/* Ensure hero touches header */
body .hero-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Kill any Bootstrap row margin inside hero */
body .hero-section .row:first-child {
  margin-top: 0 !important;
}

/* If main wrapper adds spacing, neutralize only for hero */
body main > .hero-section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure hero container has no top padding */
body .hero-section > .container {
  padding-top: 0 !important;
}

/* Prevent accidental top gap from first column */
body .hero-section .col-lg-6:first-child,
body .hero-section .col-md-6:first-child,
body .hero-section .col-12:first-child {
  margin-top: 0 !important;
}

/* ================================
   FINAL GLOBAL FIX: REMOVE TOP GAP
   ================================ */

/* Ensure no global top margin/padding creates a gap under sticky header */
html, body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Neutralize top spacing on main content wrapper */
main.site-main,
.site-main,
main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Neutralize any generic section top spacing that may add a gap */
body > section:first-child,
main > section:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure first child of main has no accidental margin */
main > *:first-child {
  margin-top: 0 !important;
}

/* If Bootstrap containers add spacing at the top, neutralize for first container */
main > .container:first-child,
main .container:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ================================
   HEADER HEIGHT: ~75px (FINAL)
   ================================ */

/* Lock header height */
.site-header {
  height: 100px;
}

/* Vertically center header contents */
.site-header .container {
  height: 100%;
}

.site-header .d-flex {
  height: 100%;
  align-items: center;
}

/* Ensure logo fits nicely within 75px header */
.site-header .logo img {
  max-height: 100px;  /* adjust if needed */
}

/* Ensure nav links are vertically centered */
.site-header .main-nav a {
  line-height: 1.2;
}

/* White background for mobile burger menu */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: #ffffff;
    padding: 12px 0;
  }
}

/* ================================
   MOBILE BURGER MENU PANEL (LEFT)
   ================================ */
@media (max-width: 991.98px) {
  /* Position the collapse panel under header, aligned left */
  .navbar-collapse {
    position: absolute;
    top: 75px;              /* header height */
    left: 0;
    background: #ffffff;
    width: auto;           /* auto width based on content */
    min-width: 220px;      /* ensure readable width */
    max-width: 90vw;       /* prevent overflow on very small screens */
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  }

  /* Left-align nav items */
  .navbar-collapse .navbar-nav {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .navbar-collapse .nav-link {
    padding: 10px 8px;
    width: 100%;
  }
}

/* ================================
   FINAL NAV POLISH: BOLD + BIG LOGO
   ================================ */

/* Bold nav links (desktop + mobile) */
.site-header .nav-link {
  font-weight: 600;   /* semibold */
}

/* Slightly bigger logo while respecting 75px header */
.site-header .logo img {
  max-height: 100px;   /* was ~48px */
}

/* Sticky Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030; /* above content, below modals */
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Prevent content from hiding under sticky header */
body {
  scroll-padding-top: 80px; /* adjust if your header height differs */
}

/* Navbar outlined gray icons */
.site-header .nav-icon,
.site-header .navbar .bi {
  color: #6c757d; /* Bootstrap gray */
  font-size: 1.1rem;
  transition: color 0.15s ease, transform 0.15s ease;
}

.site-header .nav-icon:hover,
.site-header .navbar .bi:hover {
  color: #343a40; /* darker on hover */
  transform: translateY(-1px);
}

/* Navbar icons: gray outlined */
.site-header .nav-icon {
  color: #6c757d !important;  /* gray */
  font-size: 1.05rem;
  opacity: 0.9;
  transition: color 0.15s ease, transform 0.15s ease;
}

.site-header .nav-link:hover .nav-icon,
.site-header .nav-link:focus .nav-icon {
  color: #343a40 !important;  /* darker on hover */
  transform: translateY(-1px);
}

/* Alternate section background (same as footer light gray) */
.section-alt {
  background-color: #f8f9fa; /* matches footer bg light gray */
}

/* Dashboard top spacing */
.dashboard-page {
  padding-top: 100px;
}

/* Make select placeholder text same size as input placeholders */
.form-control-lg,
.form-select-lg {
  font-size: 1rem !important;   /* unify font size */
  height: calc(3.2rem + 2px);  /* unify height */
  line-height: 1.5;
}

.form-select-lg {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

  .week-item {
    display: none !important;
  }

.alert-box {
    background-color: #ffe5e5;
    color: #b30000;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 600;
}
/* Login Page Spacing */
.login-container {
    margin-top: 100px;
}