:root {
  --primary-color: #1a237e;
  --secondary-color: #ff7f00;
  --accent-color: #fff;
  --dark-blue: #0d1b3d;
  --logo-text-color: orange;
}
.navbar {
  background-color: var(--primary-color);
}
.navbar .nav-link, .navbar-brand {
  color: var(--accent-color) !important;
}
.navbar .nav-link {
  color: orange !important;
  font-weight: 600;
}
.navbar-brand span {
  color: orange;
  font-weight: bold;
  font-size: 1.2rem;
}
.navbar .btn-warning {
  background-color: var(--secondary-color);
  color: #212529; /* dark text for readability */
  border: none;
}
.navbar .btn-warning:hover {
  background-color: #e06f00; /* slightly darker orange */
  color: #212529;
}
.dropdown-menu {
  background-color: var(--primary-color);
}
.dropdown-menu .dropdown-item {
  color: var(--accent-color);
}
.dropdown-menu .dropdown-item:hover {
  background-color: #283593;
}
/* Make active/pressed dropdown items and nav links show the primary blue background */
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active {
  background-color: var(--primary-color);
  color: var(--accent-color) !important;
}
/* Make navbar links that are active use the primary color background (for contrast on staff top-band) */
.navbar .nav-link.active,
.navbar .nav-link:active {
  background-color: var(--primary-color);
  color: var(--accent-color) !important;
}
/* ...endelea na css nyingine zote za header/navbar... */
/* ✅ Footer styles */
footer {
      background:#1a237e ;
      color: #fff;
      padding: 20px 0;
      text-align: center;
    }

    /* ✅ Social icons bigger & visible */
    footer .social-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      color: #fff;
      font-size: 1.5rem;
      margin-right: 10px;
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    footer .social-icon:hover {
      transform: scale(1.1);
      opacity: 0.9;
    }

    /* top-band (navbar + hero) styles moved from per-page styles
      Centralized so dropdowns and hero banners render consistently */
    .top-band{background:var(--primary-color)}
    .top-band .navbar{background:transparent!important;box-shadow:none;border-bottom:0}
    /* Brand and links show secondary (orange) text on the blue banner */
    .top-band .navbar .navbar-brand,.top-band .navbar .nav-link{color:var(--secondary-color)!important}
    /* Ensure dropdown menus inside the top-band use the primary background and accent text */
    .top-band .dropdown-menu{background:var(--primary-color) !important; color:var(--accent-color) !important; border:0}
    .top-band .dropdown-item{color:var(--accent-color) !important}
    .top-band .dropdown-item:hover, .top-band .dropdown-item:focus, .top-band .dropdown-item.active{background:#283593 !important; color:var(--accent-color) !important}
    /* Ensure the Get application (btn-warning) keeps an orange background and dark text */
    .top-band .navbar .btn.btn-warning{background:var(--secondary-color);color:#212529;border-color:var(--secondary-color)}
    .top-band .navbar .btn.btn-warning:hover{background:#e06f00}
    .hero-wrap{height:140px;display:flex;align-items:center}
    .hero-wrap .container{height:100%;display:flex;align-items:center;justify-content:center}
    .hero-inner{text-align:center;color:var(--accent-color)}
    .hero-inner h1{margin:0;font-size:1.8rem;font-weight:600}
    .hero-inner p{margin:0;margin-top:.5rem;opacity:.95}
    .top-band .brand-orange{color:var(--accent-color)}