:root {
  /* Professional Government/MNC palette */
  --bs-primary: #0d4d4d;
  --bs-secondary: #001f3f;
  --bs-success: #1a5f5f;
  --bs-warning: #b88b2a;
  --bs-danger: #b91c1c;
  --bs-info: #0ea5e9;

  --brand-ink: #0b1220;
  --brand-muted: #475569;
  --brand-surface: #ffffff;
  --brand-surface-2: #faf8f5;
  --brand-border: rgba(0, 31, 63, 0.12);

  --brand-grad: linear-gradient(135deg, #0d4d4d 0%, #1a5f5f 55%, #2d7f7f 100%);
  --brand-grad-dark: linear-gradient(135deg, rgba(0,31,63,0.96) 0%, rgba(0,22,46,0.94) 55%, rgba(13,77,77,0.92) 100%);
}

body {
  color: var(--brand-ink);
  background: radial-gradient(1200px 600px at 15% -10%, rgba(13,77,77,0.12), transparent 60%),
              radial-gradient(900px 500px at 90% 0%, rgba(0,31,63,0.10), transparent 55%),
              var(--brand-surface-2);
}

/* Buttons feel different */
.btn-primary {
  background: var(--brand-grad);
  border: 0;
  box-shadow: 0 10px 22px rgba(13,77,77,0.18);
}
.btn-primary:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

/* Header redesign (same markup, new look) */
.navbar-main {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--brand-border);
}

.navbar-main .navbar-brand {
  gap: 12px;
}

.navbar-main .brand-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--brand-grad);
  color: #fff;
  box-shadow: 0 14px 26px rgba(0,31,63,0.14);
}

.navbar-main .brand-top,
.navbar-main .brand-bottom {
  letter-spacing: 0.2px;
}

.navbar-main .nav-link {
  font-weight: 700;
}

.navbar-donate-outside,
.btn-donate-header {
  background: var(--brand-grad);
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 12px 24px rgba(13,77,77,0.16);
  border: 1px solid rgba(255,255,255,0.18);
}

.navbar-donate-outside:hover,
.btn-donate-header:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* Footer redesign - White Background with Animation */
.footer {
  background: #ffffff !important;
  position: relative;
  overflow: hidden;
}

.footer::after {
  content: "";
  position: absolute;
  inset: -40% -20% auto -20%;
  height: 280px;
  background: radial-gradient(circle at 40% 40%, rgba(59, 130, 246, 0.08), transparent 60%),
              radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.06), transparent 55%),
              radial-gradient(circle at 10% 90%, rgba(251, 191, 36, 0.06), transparent 60%);
  pointer-events: none;
  animation: footerGradientMove 15s ease-in-out infinite;
}

@keyframes footerGradientMove {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(10%, 5%) scale(1.1);
  }
  66% {
    transform: translate(-5%, 10%) scale(0.95);
  }
}

.footer h4 {
  letter-spacing: 0.2px;
}

.footer .btn.btn-link:hover {
  color: #3b82f6 !important;
}

/* Cards / surfaces */
.card {
  border: 1px solid var(--brand-border);
  border-radius: 18px;
}

/* Make headings look distinct */
h1, h2, h3, h4 {
  letter-spacing: -0.02em;
}