:root {
  --brand-primary: #004B9C;
  --brand-light: #eef4fb;
}

html {
  scroll-behavior: smooth;
}

body {
  color: #1f2a37;
}

.text-brand {
  color: var(--brand-primary) !important;
}

.bg-brand {
  background-color: var(--brand-primary) !important;
}

.btn-brand {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: #003c7d;
  border-color: #003c7d;
  color: #fff;
}

.hero {
  background: url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80") center/cover no-repeat;
  padding-top: 6rem;
  padding-bottom: 5rem;
}

.hero-copy {
  color: #ffffff;
}

.hero-title {
  color: #ffffff;
  text-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.45);
}

.hero-lead {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.35);
  max-width: 42rem;
}

.hero-badge {
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-primary);
  border: 1px solid rgba(255, 255, 255, 0.85);
}

.hero-glass-card {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.icon-circle {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--brand-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.section-pad {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.navbar {
  box-shadow: 0 0.45rem 1.35rem rgba(0, 0, 0, 0.16);
}