/* Brand palette: yellow + charcoal across the public site */
:root {
  --be-yellow: #FFD51E;
  --be-charcoal: #36454F;
}

body {
  color: var(--be-charcoal);
}

.text-black {
  color: var(--be-charcoal) !important;
}

.color--black,
.color--black h1,
.color--black h2,
.color--black h3,
.color--black h4,
.color--black h5,
.color--black h6,
.color--black p,
.color--black a,
.color--black li,
.color--black i,
.color--black span {
  color: var(--be-charcoal);
}

.bg--theme,
.shape--blue-400:after {
  background-color: var(--be-yellow);
}

.btn--theme {
  color: var(--be-charcoal) !important;
  border-color: var(--be-yellow) !important;
  background-color: var(--be-yellow) !important;
}

.hover--theme:hover,
.white-scroll .scroll .hover--theme:hover,
.black-scroll .scroll .hover--theme:hover,
.theme--dark .white-scroll .scroll .hover--theme:hover,
.theme--dark .white-scroll .hover--theme:hover {
  color: var(--be-yellow) !important;
  border-color: var(--be-charcoal) !important;
  background-color: var(--be-charcoal) !important;
}

.color--theme,
.color--theme h1,
.color--theme h2,
.color--theme h3,
.color--theme h4,
.color--theme h5,
.color--theme h6,
.color--theme p,
.color--theme a,
.color--theme li,
.color--theme i,
.color--theme span,
.color--white .color--theme {
  color: var(--be-yellow) !important;
}

.text-yellow {
  color: var(--be-yellow) !important;
}

.btn--black,
.hover--black:hover {
  color: #fff !important;
  background-color: var(--be-charcoal) !important;
  border-color: var(--be-charcoal) !important;
}

.btn--tra-black,
.hover--tra-black:hover {
  color: var(--be-charcoal) !important;
  background-color: transparent !important;
  border-color: var(--be-charcoal) !important;
}

.loading--theme .loader {
  border-color: transparent var(--be-yellow);
}

.nav-theme .sm-info,
.theme-pagination .page-item.active .page-link,
.faqs-section .tabs--theme .tabs-1 li.current,
.faqs-section .tabs--theme .tabs-1 li.current:hover,
.switch-wrap input:checked + .switcher.switcher--theme {
  background-color: var(--be-yellow);
  border-color: var(--be-yellow);
}

.wsmenu > .wsmenu-list.nav-theme > li > ul.sub-menu > li > a:hover,
.hero-section .quick-form .form-control:focus,
.tabs-1.tabs--theme,
.tabs-1.tabs--theme li.current:hover {
  color: var(--be-yellow);
  border-color: var(--be-yellow);
}

.bg--gray-500 {
  background-color: var(--be-charcoal) !important;
  border-color: var(--be-charcoal) !important;
}