:root {
  --brand-blue: #0a2540;
  --brand-yellow: #fec93d;
}

body {
  transition: background 0.3s, color 0.3s;
  font-family: "Segoe UI", sans-serif;
}

.hero {
  background: url("header-image.jpg") no-repeat center/cover;
  padding: 90px 20px;
  color: white;
  border-radius: 12px;
}

.feature-card {
  background: var(--brand-blue);
  color: #fff;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  min-height: 160px;
  transition: 0.3s;
}

.feature-card:hover {
  transform: translateY(-4px);
  opacity: 0.9;
}

.yellow-box {
  background: var(--brand-yellow);
  color: #0a2540;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  font-weight: 600;
}
.blue-box {
  background: var(--brand-blue);
  color: #fff;
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  font-weight: 600;
}

/* Light theme overrides */
@media (prefers-color-scheme: light) {
  body {
    background: #ffffff;
    color: #1c1c1c;
  }
}

/* Dark theme overrides */
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #eee;
  }

  .feature-card {
    background: #1e3e5c;
  }

  .yellow-box {
    background: #e9b32d;
  }
}

/* Manual override classes */
[data-bs-theme="dark"] body {
  background: #121212;
  color: #eee;
}

[data-bs-theme="Dark"] .feature-card {
  background: #1e3e5c !important;
}