:root {
  /* BRAND COLORS */
  --brand-navy: #121639;   
  --brand-teal: #009ca6;   
  --brand-gold: #c5a065;   
  --brand-red: #e31e24;    
  --brand-light: #f8f9fa;
}

/* =========================================
   1. GLOBAL THEME
   ========================================= */
body {
  background-color: #f4f6f8;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--brand-navy);
  font-weight: 700;
}

/* =========================================
   2. NAVBAR STYLING (The Fixes)
   ========================================= */

/* A. Header Height & Alignment */
.navbar {
  min-height: 110px !important; /* Force tall header */
  align-items: center; 
  padding: 0 !important; /* Reset padding to let us control it */
}

.container-fluid {
  height: 100%; /* Ensure container fills the navbar height */
}

/* B. Burger Button - Remove "Large Border" on click */
.navbar-toggler {
  border: none; /* Optional: removes the white square border */
  padding: 0.5rem;
}

.navbar-toggler:focus {
  box-shadow: none !important; /* ✅ REMOVES THE GLOW/RING */
  outline: none !important;
}

.navbar-toggler-icon {
  width: 1.5em;
  height: 1.5em;
}

/* C. Logo Hover */
.navbar-brand img {
  transition: opacity 0.2s ease;
}
.navbar-brand:hover img {
  opacity: 1 !important;
}

/* =========================================
   3. MOBILE MENU OVERLAY FIX
   ========================================= */
@media (max-width: 991.98px) {
  
  #mainNav {
    position: fixed; /* ✅ Changed to FIXED to cover screen properly */
    top: 110px;      /* ✅ STARTS EXACTLY BELOW THE LOGOS (Matches min-height) */
    left: 0;
    width: 100%;
    background-color: #121639;
    z-index: 1050;
    
    border-top: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    padding: 2rem 1rem;
  }

  /* ✅ CENTER TEXT FIX */
  .navbar-nav {
    width: 100%;
    text-align: center;
  }
  
  .navbar-nav .nav-item {
    width: 100%; /* Ensure row takes full width */
    display: flex;
    justify-content: center;
  }

  .navbar-nav .nav-link {
    display: block;
    width: 100%;
    text-align: center; /* Force center alignment */
    font-size: 1.2rem;
    padding: 15px 0;
    color: rgba(255,255,255,0.8) !important;
  }