:root {
  --brand-1: #20313f;
  --brand-2: #1f6cd9;
  --brand-3: #34a883;
  --brand-4: #D9D9D9;
  --brand-5: #6d6d6d;
}

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

body {
  color: var(--brand-1);
}

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

.btn-brand-1 {
  background-color: var(--brand-1);
  color: white;
  border: none;
}

.btn-brand-1:hover {
  background-color: var(--brand-2);
  color: white;
}

.btn-brand-2 {
  background-color: var(--brand-2);
  color: white;
  border: none;
}

.btn-brand-2:hover {
  background-color: var(--brand-1);
  color: white;
}

.btn-brand-cta {
  background-color: var(--brand-2);
  color: white;
  border: none;
}

.btn-brand-cta:hover {
  background-color: var(--brand-2);
  color: white;
}

.bg-brand-1 {
  background-color: var(--brand-1);
}

.bg-brand-2 {
  background-color: var(--brand-2);
}

.navbar-nav .nav-link {
  color: var(--brand-1) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--brand-2) !important;
}

.dropdown-menu .dropdown-item {
  color: var(--brand-1) !important;
}

.dropdown-menu .dropdown-item:hover {
  color: var(--brand-2) !important;
}

.bg-call-green {
  background-color: #34C759;
}

.area-outline {
  fill: none;
  stroke: var(--brand-1);
  stroke-width: 4;
}

.location-star {
  fill: var(--brand-2);
  stroke: white;
  stroke-width: 1;
}

.hero-image-wrapper {
  width: 100%;
  background-color: #212529;
  padding-bottom: 3rem;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .hero-image {
    width: 60%;
  }
}

.accordion-button:not(.collapsed) {
  background-color: rgba(31,107,217, 0.5);
  color: white;
}

.accordion-button.collapsed {
  color: var(--brand-1);
}