@import url("./fonts.css");
@import url("./reset.css");
@import url("./base.css");
@import url("./navbar.css");
@import url("./copy.css");
@import url("./footer.css");
@import url("./grid.css");

.themeWhite {
  --accentColor: var(--orange);
  --accentColor-06: var(--orange-06);
  --accentColorFilter: var(--orange-filter);
  --accentColorFromOther: var(--honey-yellow);
  --backgroundColor: #fff;
  --linkColor: var(--accentColor);
  --linkHoverColor: #0a2540;
  --buttonColor: var(--accentColor);
  --buttonHoverColor: #0a2540;
  --buttonDisabledColor: #cfd7df;
  --buttonDisabledOpacity: 0.7;
  --knockoutColor: var(--backgroundColor);
  --knockoutColorFilter: invert(100%) sepia(100%) saturate(0%)
    hue-rotate(150deg) brightness(100%) contrast(104%);
  --knockoutDisabledColor: #8898aa;
  --titleColor: var(--prussian-blue);
  --textColor: var(--neutralVeryDark);
  --inputBackground: #f1f4f7;
  --inputPlaceholderColor: #acb9c5;
  --inputTextColor: #0a2540;
  --inputErrorAccentColor: #ff5191;
  --navColor: var(--titleColor);
  --navBackgroundColor: #fff;
  --navHoverColor: #0a2540;
  --navHoverOpacity: 0.6;
  --footerColor: #0a2540;
  --cardBorderColor: #cbd6e0;
  --cardBackground: #fff;
  --subcardBackground: #f6f9fc;
}

.themeDark {
  --accentColor: var(--honey-yellow);
  --accentColor-06: var(--honey-yellow-06);
  --accentColorFilter: var(--honey-yellow-filter);
  --accentColorFromOther: var(--orange);
  --backgroundColor: #fff;
  --backgroundColorFromOther: #fff;
  --backgroundColor: linear-gradient(270deg, #8ecae6ff, #219ebcff);
  --linkColor: var(--accentColor);
  --linkHoverColor: var(--titleColor);
  --linkHoverOpacity: 1;
  --buttonColor: var(--accentColor);
  --buttonHoverColor: var(--titleColor);
  --buttonDisabledColor: #6b7c93;
  --buttonHoverOpacity: 1;
  --buttonDisabledOpacity: 0.7;
  --knockoutColor: #fff;
  --knockoutDisabledColor: #e6ebf1;
  --titleColor: var(--prussian-blue);
  --textColor: var(--prussian-blue);
  --inputBackground: #0c2e4e;
  --inputBackgroundAlt: #274869;
  --inputPlaceholderColor: #b6c2cd;
  --inputTextColor: #fff;
  --inputErrorAccentColor: #ff5191;
  --navColor: var(--titleColor);
  --navHoverColor: #fff;
  --navHoverOpacity: 0.6;
  --footerColor: #fff;
  --cardBorderColor: #0f395e;
  --cardBackground: #0c2e4e;
  --subcardBackground: #f6f9fc;
}

body {
  height: auto;
  --shadowImageBoxShadowColor: var(--backgroundColor);
}

universal-navbar {
  background: var(--backgroundColor);
}

ul {
  list-style: inside;
}

.variantHero {
  text-align: center;
  padding-bottom: 50px;
  background: var(--backgroundColorFromOther);
}

.variantHero full-width-background {
  height: calc(78% + 64px);
  background: var(--backgroundColor);
  --fullWidthBackgroundTop: -64px;
}

.variantHero #heroHeading {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1024px) {
  .variantHero #heroHeading {
    max-width: 80%;
  }
}

.headerSubTitle {
  color: var(--knockoutColor);
}

.variantHero .copyBody {
  white-space: initial;
  text-align: left;
}
.variantHero split-content {
  margin: 48px auto 0;
  width: 100%;
  --splitConentRightContainerMarginTop: 0px;
}
.variantHero .variantDetail {
  --bodyPaddingRight: var(--columnPaddingNormal);
}

.variantHero .sectionsContainer {
  padding: 32px 32px 0;
  padding: 32px clamp(16px, 4vw, 32px) 0 32px;
}

.variantHero .contentLeft,
.variantHero .contentRight {
  border-radius: 4px;
  --shadowImageBorderRadius: 4px;
  box-shadow: 0 15px 35px rgb(50 50 93 / 10%), 0 5px 15px rgb(0 0 0 / 7%);
}

.variantHero .contentLeft {
  background-color: var(--knockoutColor);
}
.variantHero .contentRight {
  background-color: var(--titleColor);
  margin: 0 auto;
  /* padding: 10px; */
  width: 80%;
}
.variantHero .contentRight shadow-image {
  --shadowImageBoxShadowColor: var(--titleColor);
  --shadowImageWidthS: auto;
  --shadowImageWidthL: auto;
  --shadowImageWidthXL: auto;
  --shadowImageAfterWidthS: 100%;
  --shadowImageBoxAfterLeftS: 0;
  --shadowImageBoxShadow: inset 0px 0px 4px 10px
    var(--shadowImageBoxShadowColor, white);
  --shadowImageBoxShadowL: inset 0px 0px 6px 14px
    var(--shadowImageBoxShadowColor, white);
}
.variantHero .contentLeft section + section {
  margin-top: var(--columnPaddingNormal);
}

.variantHero .contentLeft stylish-anchor {
  margin-top: 16px;
  padding: var(--columnPaddingNormal);
  width: 100%;
  border-radius: 2px;
  color: var(--textColor);
  text-align: center;
  text-transform: uppercase;
  --stylishAnchorBackground: var(--subcardBackground);
  --stylishAnchorColorOnHover: var(--textColor);
  --stylishAnchorBackgroundOnHover: #e6ebf1;
}

@media (min-width: 768px) {
  .variantHero split-content {
    margin: 72px auto 0;
    width: 85%;
    --splitConentRightContainerAlignSelf: center;
  }
  .variantHero .contentRight {
    width: auto;
  }
}

#service {
  background-color: transparent;
}

@media (max-width: 640px) {
  #service {
    padding-top: 0;
  }
}

#outro,
#outro full-width-background {
  background: linear-gradient(270deg, #8ecae6ff, #219ebcff);
}

#outro .copyBody > * {
  opacity: 0.9;
}

#bodyFooter {
  background-color: #f6f9fc;
  color: #425466;
}