:root {
--body-darkest: #1d1d1d;
--body-darker: #2c2b2c;
--body-opacity-25: rgba(59,58,59,0.25);
--body-opacity-50: rgba(59,58,59,0.5);
--body-opacity-90: rgba(59,58,59,0.9);
--body: #3b3a3b;
--body-light: #9d9d9d;
--body-lighter: #cecece;
--body-lightest: #f5f5f5;
--primary-darkest: #054262;
--primary-darker: #086494;
--primary-opacity-25: rgba(11,133,197,0.25);
--primary-opacity-50: rgba(11,133,197,0.5);
--primary-opacity-90: rgba(11,133,197,0.9);
--primary: #0b85c5;
--primary-light: #85c2e2;
--primary-lighter: #c2e0f0;
--primary-lightest: #f3f9fc;
--secondary-darkest: #313131;
--secondary-darker: #494a4a;
--secondary-opacity-25: rgba(98,99,99,0.25);
--secondary-opacity-50: rgba(98,99,99,0.5);
--secondary-opacity-90: rgba(98,99,99,0.9);
--secondary: #626363;
--secondary-light: #b1b1b1;
--secondary-lighter: #d8d8d8;
--secondary-lightest: #f7f7f7;
--info-darkest: #2e6573;
--info-darker: #4697ac;
--info-opacity-25: rgba(93,202,230,0.25);
--info-opacity-50: rgba(93,202,230,0.5);
--info-opacity-90: rgba(93,202,230,0.9);
--info: #5dcae6;
--info-light: #aee5f3;
--info-lighter: #d6f2f9;
--info-lightest: #f7fcfe;
--highlight-darkest: #174c6a;
--highlight-darker: #2273a0;
--highlight-opacity-25: rgba(46,153,213,0.25);
--highlight-opacity-50: rgba(46,153,213,0.5);
--highlight-opacity-90: rgba(46,153,213,0.9);
--highlight: #2e99d5;
--highlight-light: #97ccea;
--highlight-lighter: #cbe5f4;
--highlight-lightest: #f4fafd;
--font-family-sans-serif: "neue-haas-unica", Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5 {
  color: var(--primary);
}

p {
  line-height: 1.5em;
}

.site-layout .navbar-nav {
  margin-left: auto;
}

.site-layout footer {
  background-color: white;
  color: var(--primary);
}

.site-layout .footer #cmsContent {
  padding: 1rem;
}

@media only screen and (max-width: 767.99px) {
  .site-layout .navbar-nav[data-section='0'] {
    margin: auto;
  }

  .site-layout .navbar-brand {    
    margin-right: 0;
  }
  
  .site-layout .navbar-toggler {
    display: none;
  }
}

.footer-logo {
  max-width: 220px;
  width: 50%;
}

.footer-contact {
  color: var(--primary);
  font-weight: 600;
  padding: 2rem;
}

@media only screen and (max-width: 767.99px) {
  .footer-contact {    
    padding-left: 0;
    padding-right: 0;
  }
}

#tenantCopyright:hover {
  color: var(--primary) !important;
}

#versionInfo a {
  color: var(--primary) !important;
}

#versionInfo a:hover {
  color: var(--secondary) !important;
}

.sticky-header {
  background-color: white;
}

.primary-canvas {
  background-color: var(--primary);
}

.secondary-light-canvas {
  background-color: var(--secondary-lightest);
}

.primary-light-canvas {
  background-color: var(--primary-lightest);
}

.block-content {
  padding: 2rem;
}

.benefits-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--primary);
}

.benefits-content p {
  font-size: 0.8rem;
}

.benefits-icon-wrapper {
    background-color: var(--primary);
    width: 60%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    justify-content: center;
}

.benefits-icon-wrapper h4 {
  color: white;
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: -20%;
}

.benefits-icon {
  width: 60%;
  object-fit: contain;
  margin-top: -50%;
}

@media only screen and (max-width: 767.99px) {
  .benefits-icon-wrapper h4 {
    font-size: 1.6rem;
  }

  .benefits-content p {
    font-size: 1rem;
    margin-bottom: 3rem;
    margin-left: 3rem;
    margin-right: 3rem;
  }
}

.feature-wrapper {
  display: grid;
  place-items: center;
  height: 100%;
}

.feature-content {
  background-color: var(--primary);
  width: 60%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 0.6rem;
}

.feature-content h5 {
  color: white;
  font-weight: 600;
}

.feature-icon {
  width: 60%;
  object-fit: contain;
  margin-top: -50%;
}

@media only screen and (max-width: 767.99px) {
  .feature-wrapper {
    margin-top: 2rem;
  }
}

.safety-wrapper {
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}

.safety-content {
  background-color: var(--primary);
  width: 70%;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: white;
  text-align: center;
  padding: 0.6rem;
}

.safety-content p {
  height: 6rem;
}

.safety-icon {
  width: 60%;
  object-fit: contain;
  margin-top: -25%;
}

@media only screen and (max-width: 767.99px) {
  .safety-wrapper {
    margin-top: 2rem;
  }

  .safety-icon {
    margin-top: -20%;
  }

  .safety-content p {
    height: 4rem;
  }
}