/*
 * Theme Name: Centric Security® 2026
 * Version: 1
 * Description: For centricstl.com
 * Author: Thoughtprocess Interactive
*/

@import url("https://use.typekit.net/uee4tlq.css");

:root {
  /* Theme colors */
  --theme-color-centric-blue: #004169;
  --theme-color-teal: #306681;
  --theme-color-light-blue: #9ACED2;
  --theme-color-deep-tan: #B4A394;
  --theme-color-tan: #EDEBE6;
  --theme-color-white: #ffffff; 
  --theme-color-dark-gray: #333132;
  --theme-color-emergency: #893022;

  /* Fonts */
  --theme-font-sans-serif: "work-sans", sans-serif;
}

/* Negative spacing utilities. These match the WP sizes, only in negative values */

:root {
  --cstl-neg16px: clamp(-1rem, calc(-1 * (0.5442vw + 0.56rem)), -0.67rem);
  --cstl-neg32px: clamp(-2rem, calc(-1 * (1.0884vw + 1.12rem)), -1.33rem);
  --cstl-neg48px: clamp(-3rem, calc(-1 * (1.6327vw + 1.67rem)), -2rem);
  --cstl-neg64px: clamp(-4rem, calc(-1 * (2.1769vw + 2.23rem)), -2.67rem);
  --cstl-neg80px: clamp(-5rem, calc(-1 * (2.7211vw + 2.79rem)), -3.33rem);
  --cstl-neg96px: clamp(-6rem, calc(-1 * (3.2653vw + 3.35rem)), -4rem);
  --cstl-neg112px: clamp(-7rem, calc(-1 * (3.8095vw + 3.9rem)), -4.67rem);
  --cstl-neg128px: clamp(-8rem, calc(-1 * (4.3537vw + 4.46rem)), -5.33rem);
  --cstl-neg144px: clamp(-9rem, calc(-1 * (4.898vw + 5.02rem)), -6rem);
  --cstl-neg160px: clamp(-10rem, calc(-1 * (5.4422vw + 5.58rem)), -6.67rem);
  --cstl-neg176px: clamp(-11rem, calc(-1 * (5.9864vw + 6.14rem)), -7.33rem);
  --cstl-neg192px: clamp(-12rem, calc(-1 * (6.5306vw + 6.69rem)), -8rem);
  --cstl-neg208px: clamp(-13rem, calc(-1 * (7.0748vw + 7.25rem)), -8.67rem);
  --cstl-neg224px: clamp(-14rem, calc(-1 * (7.619vw + 7.81rem)), -9.33rem);
  --cstl-neg240px: clamp(-15rem, calc(-1 * (8.1633vw + 8.37rem)), -10rem);
  --cstl-neg256px: clamp(-16rem, calc(-1 * (8.7075vw + 8.93rem)), -10.67rem);
  --cstl-neg272px: clamp(-17rem, calc(-1 * (9.2517vw + 9.48rem)), -11.33rem);
  --cstl-neg288px: clamp(-18rem, calc(-1 * (9.7959vw + 10.04rem)), -12rem);
  --cstl-neg304px: clamp(-19rem, calc(-1 * (10.3401vw + 10.6rem)), -12.67rem);
  --cstl-neg320px: clamp(-20rem, calc(-1 * (10.8844vw + 11.16rem)), -13.33rem);
  --cstl-neg336px: clamp(-21rem, calc(-1 * (11.4286vw + 11.71rem)), -14rem);
  --cstl-neg352px: clamp(-22rem, calc(-1 * (11.9728vw + 12.27rem)), -14.67rem);
  --cstl-neg368px: clamp(-23rem, calc(-1 * (12.517vw + 12.83rem)), -15.33rem);
  --cstl-neg384px: clamp(-24rem, calc(-1 * (13.0612vw + 13.39rem)), -16rem);
  --cstl-neg400px: clamp(-25rem, calc(-1 * (13.6054vw + 13.95rem)), -16.67rem);
}

.cstl-mt-neg16px {
  margin-top: var(--cstl-neg16px) !important;
}
.cstl-mt-neg32px {
  margin-top: var(--cstl-neg32px) !important;
}
.cstl-mt-neg48px {
  margin-top: var(--cstl-neg48px) !important;
}
.cstl-mt-neg64px {
  margin-top: var(--cstl-neg64px) !important;
}
.cstl-mt-neg80px {
  margin-top: var(--cstl-neg80px) !important;
}
.cstl-mt-neg96px {
  margin-top: var(--cstl-neg96px) !important;
}
.cstl-mt-neg112px {
  margin-top: var(--cstl-neg112px) !important;
}
.cstl-mt-neg128px {
  margin-top: var(--cstl-neg128px) !important;
}
.cstl-mt-neg144px {
  margin-top: var(--cstl-neg144px) !important;
}
.cstl-mt-neg160px {
  margin-top: var(--cstl-neg160px) !important;
}
.cstl-mt-neg176px {
  margin-top: var(--cstl-neg176px) !important;
}
.cstl-mt-neg192px {
  margin-top: var(--cstl-neg192px) !important;
}
.cstl-mt-neg208px {
  margin-top: var(--cstl-neg208px) !important;
}
.cstl-mt-neg224px {
  margin-top: var(--cstl-neg224px) !important;
}
.cstl-mt-neg240px {
  margin-top: var(--cstl-neg240px) !important;
}
.cstl-mt-neg256px {
  margin-top: var(--cstl-neg256px) !important;
}
.cstl-mt-neg272px {
  margin-top: var(--cstl-neg272px) !important;
}
.cstl-mt-neg288px {
  margin-top: var(--cstl-neg288px) !important;
}
.cstl-mt-neg304px {
  margin-top: var(--cstl-neg304px) !important;
}
.cstl-mt-neg320px {
  margin-top: var(--cstl-neg320px) !important;
}
.cstl-mt-neg336px {
  margin-top: var(--cstl-neg336px) !important;
}
.cstl-mt-neg352px {
  margin-top: var(--cstl-neg352px) !important;
}
.cstl-mt-neg368px {
  margin-top: var(--cstl-neg368px) !important;
}
.cstl-mt-neg384px {
  margin-top: var(--cstl-neg384px) !important;
}
.cstl-mt-neg400px {
  margin-top: var(--cstl-neg400px) !important;
}

.cstl-mb-neg16px {
  margin-bottom: var(--cstl-neg16px) !important;
}
.cstl-mb-neg32px {
  margin-bottom: var(--cstl-neg32px) !important;
}
.cstl-mb-neg48px {
  margin-bottom: var(--cstl-neg48px) !important;
}
.cstl-mb-neg64px {
  margin-bottom: var(--cstl-neg64px) !important;
}
.cstl-mb-neg80px {
  margin-bottom: var(--cstl-neg80px) !important;
}
.cstl-mb-neg96px {
  margin-bottom: var(--cstl-neg96px) !important;
}
.cstl-mb-neg112px {
  margin-bottom: var(--cstl-neg112px) !important;
}
.cstl-mb-neg128px {
  margin-bottom: var(--cstl-neg128px) !important;
}
.cstl-mb-neg144px {
  margin-bottom: var(--cstl-neg144px) !important;
}
.cstl-mb-neg160px {
  margin-bottom: var(--cstl-neg160px) !important;
}
.cstl-mb-neg176px {
  margin-bottom: var(--cstl-neg176px) !important;
}
.cstl-mb-neg192px {
  margin-bottom: var(--cstl-neg192px) !important;
}
.cstl-mb-neg208px {
  margin-bottom: var(--cstl-neg208px) !important;
}
.cstl-mb-neg224px {
  margin-bottom: var(--cstl-neg224px) !important;
}
.cstl-mb-neg240px {
  margin-bottom: var(--cstl-neg240px) !important;
}
.cstl-mb-neg256px {
  margin-bottom: var(--cstl-neg256px) !important;
}
.cstl-mb-neg272px {
  margin-bottom: var(--cstl-neg272px) !important;
}
.cstl-mb-neg288px {
  margin-bottom: var(--cstl-neg288px) !important;
}
.cstl-mb-neg304px {
  margin-bottom: var(--cstl-neg304px) !important;
}
.cstl-mb-neg320px {
  margin-bottom: var(--cstl-neg320px) !important;
}
.cstl-mb-neg336px {
  margin-bottom: var(--cstl-neg336px) !important;
}
.cstl-mb-neg352px {
  margin-bottom: var(--cstl-neg352px) !important;
}
.cstl-mb-neg368px {
  margin-bottom: var(--cstl-neg368px) !important;
}
.cstl-mb-neg384px {
  margin-bottom: var(--cstl-neg384px) !important;
}
.cstl-mb-neg400px {
  margin-bottom: var(--cstl-neg400px) !important;
}

.cstl-ml-neg16px {
  margin-left: var(--cstl-neg16px) !important;
}
.cstl-ml-neg32px {
  margin-left: var(--cstl-neg32px) !important;
}
.cstl-ml-neg48px {
  margin-left: var(--cstl-neg48px) !important;
}
.cstl-ml-neg64px {
  margin-left: var(--cstl-neg64px) !important;
}
.cstl-ml-neg80px {
  margin-left: var(--cstl-neg80px) !important;
}
.cstl-ml-neg96px {
  margin-left: var(--cstl-neg96px) !important;
}
.cstl-ml-neg112px {
  margin-left: var(--cstl-neg112px) !important;
}
.cstl-ml-neg128px {
  margin-left: var(--cstl-neg128px) !important;
}
.cstl-ml-neg144px {
  margin-left: var(--cstl-neg144px) !important;
}
.cstl-ml-neg160px {
  margin-left: var(--cstl-neg160px) !important;
}
.cstl-ml-neg176px {
  margin-left: var(--cstl-neg176px) !important;
}
.cstl-ml-neg192px {
  margin-left: var(--cstl-neg192px) !important;
}
.cstl-ml-neg208px {
  margin-left: var(--cstl-neg208px) !important;
}
.cstl-ml-neg224px {
  margin-left: var(--cstl-neg224px) !important;
}
.cstl-ml-neg240px {
  margin-left: var(--cstl-neg240px) !important;
}
.cstl-ml-neg256px {
  margin-left: var(--cstl-neg256px) !important;
}
.cstl-ml-neg272px {
  margin-left: var(--cstl-neg272px) !important;
}
.cstl-ml-neg288px {
  margin-left: var(--cstl-neg288px) !important;
}
.cstl-ml-neg304px {
  margin-left: var(--cstl-neg304px) !important;
}
.cstl-ml-neg320px {
  margin-left: var(--cstl-neg320px) !important;
}
.cstl-ml-neg336px {
  margin-left: var(--cstl-neg336px) !important;
}
.cstl-ml-neg352px {
  margin-left: var(--cstl-neg352px) !important;
}
.cstl-ml-neg368px {
  margin-left: var(--cstl-neg368px) !important;
}
.cstl-ml-neg384px {
  margin-left: var(--cstl-neg384px) !important;
}
.cstl-ml-neg400px {
  margin-left: var(--cstl-neg400px) !important;
}

.cstl-mr-neg16px {
  margin-right: var(--cstl-neg16px) !important;
}
.cstl-mr-neg32px {
  margin-right: var(--cstl-neg32px) !important;
}
.cstl-mr-neg48px {
  margin-right: var(--cstl-neg48px) !important;
}
.cstl-mr-neg64px {
  margin-right: var(--cstl-neg64px) !important;
}
.cstl-mr-neg80px {
  margin-right: var(--cstl-neg80px) !important;
}
.cstl-mr-neg96px {
  margin-right: var(--cstl-neg96px) !important;
}
.cstl-mr-neg112px {
  margin-right: var(--cstl-neg112px) !important;
}
.cstl-mr-neg128px {
  margin-right: var(--cstl-neg128px) !important;
}
.cstl-mr-neg144px {
  margin-right: var(--cstl-neg144px) !important;
}
.cstl-mr-neg160px {
  margin-right: var(--cstl-neg160px) !important;
}
.cstl-mr-neg176px {
  margin-right: var(--cstl-neg176px) !important;
}
.cstl-mr-neg192px {
  margin-right: var(--cstl-neg192px) !important;
}
.cstl-mr-neg208px {
  margin-right: var(--cstl-neg208px) !important;
}
.cstl-mr-neg224px {
  margin-right: var(--cstl-neg224px) !important;
}
.cstl-mr-neg240px {
  margin-right: var(--cstl-neg240px) !important;
}
.cstl-mr-neg256px {
  margin-right: var(--cstl-neg256px) !important;
}
.cstl-mr-neg272px {
  margin-right: var(--cstl-neg272px) !important;
}
.cstl-mr-neg288px {
  margin-right: var(--cstl-neg288px) !important;
}
.cstl-mr-neg304px {
  margin-right: var(--cstl-neg304px) !important;
}
.cstl-mr-neg320px {
  margin-right: var(--cstl-neg320px) !important;
}
.cstl-mr-neg336px {
  margin-right: var(--cstl-neg336px) !important;
}
.cstl-mr-neg352px {
  margin-right: var(--cstl-neg352px) !important;
}
.cstl-mr-neg368px {
  margin-right: var(--cstl-neg368px) !important;
}
.cstl-mr-neg384px {
  margin-right: var(--cstl-neg384px) !important;
}
.cstl-mr-neg400px {
  margin-right: var(--cstl-neg400px) !important;
}

@media (max-width: 1024px) {
  .cstl-mobile-mr-0 {
    margin-right: 0 !important;
  }
  .cstl-mobile-ml-0 {
    margin-left: 0 !important;
  }
  .cstl-mobile-mt-0 {
    margin-top: 0 !important;
  }
  .cstl-mobile-mb-0 {
    margin-bottom: 0 !important;
  }
}

html {
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overscroll-behavior: none;
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  font-family: var(--theme-font-sans-serif);
  color: var(--theme-color-dark-gray);
  background: var(--theme-color-white);
}

h1,
h2,
h3,
h4 {
  font-family: var(--theme-font-sans-serif);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 300;
  text-wrap: pretty;
}

h1 {
  font-size: clamp(2.5rem, 1.607rem + 2.381vw, 3.75rem);
}

h2 {
  font-size: clamp(1.75rem, 1.214rem + 1.429vw, 2.5rem);
}

h3 {
  font-size: clamp(1.5rem, 1.143rem + 0.952vw, 2rem);
}

h4 {
  font-size: clamp(1rem, 0.464rem + 1.429vw, 1.75rem);
  letter-spacing: -.05em;
  text-wrap: pretty;
}

h5 {
  font-size: clamp(1.125rem, 0.813rem + 0.833vw, 1.563rem);
  letter-spacing: -.05em;
  text-wrap: pretty;
  font-weight: 400;
}

.has-headline-xxl-font-size,
.has-headline-xl-font-size,
.has-headline-large-font-size,
.has-headline-medium-font-size {
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 300;
}

.has-headline-small-font-size {
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
}

.has-headline-medium-font-size,
.has-headline-small-font-size {
  letter-spacing: -.05em !important;
  text-wrap: pretty;
}

.util--text-wrap--balance {
  text-wrap: balance;
}

.util--text-wrap--pretty {
  text-wrap: pretty;
}

p {
  font-size: clamp(0.875rem, 0.786rem + 0.238vw, 1rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.has-body-large-font-size,
.has-body-default-font-size,
.has-body-small-font-size {
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

strong {
  font-weight: 700;
}

iframe {
  max-width: 100%;

}

a {
  color: var(--theme-color-centric-blue);
  transition: all .25s ease-out;
  text-decoration: none;

  &:hover {
    color: var(--theme-color-deep-tan);
  }
}

.wp-block-button {

  .wp-block-button__link {
    background: var(--theme-color-centric-blue);
    padding: 10px 16px;
    color: var(--theme-color-tan);
    text-align: center;
    font-weight: 500;

    &:hover {
      background: #265E80;
    }
  }
  

  &.is-style-fill .wp-block-button__link {
    background: var(--theme-color-centric-blue);
    padding: 10px 16px;
    color: var(--theme-color-white);
    text-align: center;
    font-weight: 500;

    &:hover {
      background: #265E80;
    }
  }

  &.is-style-outline .wp-block-button__link {
    background: transparent;
    padding: 10px 16px;
    color: var(--theme-color-centric-blue);
    border: 1px solid var(--theme-color-centric-blue);
    text-align: center;
    font-weight: 500;

    &:hover {
      background: #E2E7EA;
    }
  }

  &.is-style-tan .wp-block-button__link {
    background: var(--theme-color-tan);
    padding: 10px 16px;
    color: var(--theme-color-centric-blue);
    text-align: center;
    font-weight: 500;

    &:hover {
      background: #F5F5F4;
    }
  }

  &.is-style-light-blue .wp-block-button__link {
    background: var(--theme-color-light-blue);
    padding: 10px 16px;
    color: var(--theme-color-centric-blue);
    text-align: center;
    font-weight: 500;

    &:hover {
      background: #B8DDE0;
    }
  }

  &.is-style-text-cta .wp-block-button__link {
    background: transparent;
    padding: 10px 16px;
    color: var(--theme-color-centric-blue);
    text-align: center;
    font-weight: 500;

    &:hover {
      color: var(--theme-color-teal);
      text-decoration: underline;
    }
  }

  &.is-style-text-cta-w-arrow .wp-block-button__link {
    background: transparent;
    padding: 10px 16px;
    color: var(--theme-color-centric-blue);
    text-align: center;
    font-weight: 500;

    &:after {
      content: '\276F';
      position: relative;
      left: .5rem;
    }

    &:hover {
      color: var(--theme-color-teal);
      &:after {
        left: 1rem;
      }
    }
  }
}

p.cta-w-arrow a {
  display: block;

    &:after {
      content: '\276F';
      position: relative;
      left: .5rem;
      transition: all .25s ease-out;
    }

    &:hover {
      color: var(--theme-color-light-blue) !important;

      &:after {
        left: 1rem;
      }
    }
}

header {
  position: sticky;
  top: 0;
  z-index: 100;
}

nav.cstl_top-nav {
  .btn-nav {
    background: var(--theme-color-light-blue) !important;
    color: var(--theme-color-centric-blue) !important;
    font-weight: 500;
    padding: 5px 10px !important;
    border: 0;

    &:hover {
      background: #B8DDE0 !important;
    }
  }
}

nav.cstl_main-nav {
  @media (max-width: 1024px) {
    margin: 0 1rem 0 0;
  }
  /* MAIN NAV */
  ul.cstl_main-nav {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;

    li {
      padding: 12px;
      border-bottom: 2px solid var(--theme-color-centric-blue);
      transition: all .25s ease-out;
      font-size: clamp(0.75rem, 0.571rem + 0.476vw, 1rem) !important;
      white-space: nowrap;

      &:hover {
        background: #0F4C72;
      }

      &.current-menu-item {
        background: #0F4C72;
        border-bottom: 2px solid var(--theme-color-white);
      }
      .wp-block-navigation__submenu-icon {
        font-size: 24px;
        position: relative;
        top: -3px;
      }

      .submenu-toggle {
        display: none;
      }

      &.btn-nav {
        background: var(--theme-color-light-blue) !important;
        color: var(--theme-color-centric-blue) !important;
        font-weight: 500;
        padding: 12px 16px !important;
        margin-left: 10px;
        border: 0;

        &:hover {
          background: #B8DDE0 !important;
        }

        &.btn-mob-only {
          @media (min-width: 1024px) {
            display: none;
          }
        }
      }
      .nav-mob-only {
        @media (min-width: 1024px) {
          display: none !important;
        }
      }

      &.mob-menu {
        display: none;

        &.top-line {
          &:before {
            content: '';
            background: var(--theme-color-teal);
            height: 1px;
            position: relative;
            margin: 1rem 20px;
          }
        }
      }

      &.has-child .wp-block-navigation__submenu-container {
        top: 103%;

        li {
          white-space: nowrap;
          padding: 5px 10px;
          border-bottom: 2px solid #0F4C72;

          &:hover {
            border-bottom: 2px solid var(--theme-color-white);
          }

          a {
            padding: 10px 20px !important;
          }
        }
      }
    }
  }
}

/* MOBILE NAV */
@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }
  
  .cstl_menu-container {
    background: var(--theme-color-centric-blue);
  }

  .cstl_main-nav-row {
    align-items: center;
    
    .custom-logo-link {
      margin-top: 10px;
    }
  }
  
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
    .has-modal-open & {
      display: none !important;
    }
  }

  .wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
    width: 44px;
    height: 44px;
  }
  
  .wp-block-navigation__responsive-container.is-menu-open {
    background: none !important;
    pointer-events: none;

    .wp-block-navigation__responsive-close {
      margin: 0 !important;
      max-width: 100% !important;
    }

    .wp-block-navigation__responsive-container-content {
      padding-top: 0px !important;
      position: relative;
      top: 80px;
      background: var(--theme-color-centric-blue) !important;
      pointer-events: auto;
      align-items: flex-start !important;
      height: calc(100vh - 80px);
      overflow: auto !important;

      .cstl_main-nav {
        align-items: stretch !important;
        width: 100%;

        li {
          font-size: 1.4rem !important;
          padding: 0;
          align-items: stretch !important;
          
          &:hover, &.current-menu-item {
            border: none;
          }

          &.btn-nav {
            background: none !important;
            padding: 0 !important;
            margin-top: 2rem;
            margin-left: 0;
            border: 0;

            a {
              background: var(--theme-color-light-blue) !important;
              color: var(--theme-color-centric-blue) !important;
              font-weight: 500;
              padding: 12px 16px !important;
              text-align: center;
              margin: 0 20px;
            }
          }

          &.mob-menu {
            display: flex;
          }

          a {
            padding: 10px 20px;
          }

          &.has-child {
            position: relative;

            a {
              width: 80%;
            }

            &.submenu-open {
              background: #0F4C72 !important;

              .submenu-toggle::after {
                  transform: rotate(-135deg);
                }
            }

            .wp-block-navigation__submenu-container {
              display: none;

              .submenu-open > & {
                display: block;
              }
            }

            .submenu-toggle {
              display: inline-block;
              background: none;
              border: 0;
              cursor: pointer;
              padding: 0.25rem 1rem;
              position: absolute;
              top: 8px;
              right: 0;
              color: var(--theme-color-white);
              border-left: 1px solid var(--theme-color-white);

              &::after {
                content: "";
                width: 8px;
                height: 8px;
                border-right: 2px solid currentColor;
                border-bottom: 2px solid currentColor;
                transform: rotate(45deg);
                transition: transform 0.2s ease;
                display: inline-block;
              }
            }

            ul.wp-block-navigation-submenu {
              padding: 0 10px;
              li {
                font-size: 1rem !important;
                border-bottom: none;
                padding: 0;
              }
            }
          }
        }
      }
    }

    .wp-block-navigation__responsive-container-close {
      top: 12px;
      right: 0;
      margin-right: 7vw;
    }
  }
}

/* CUSTOM BODY STYLES */

.wp-block-post-content {
  margin: 0 !important;
}

.cstl_bg-color {
  position: relative;
  z-index: -1;
}

.cstl_bg-clipper {
  overflow: hidden !important;
}

.cstl_bg-center {
  background-position: center center;
}

.cstl_logo-bg {
  max-width: 1440px !important;
  margin: auto;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 105%;
    height: 100%;
    background-image: url('./assets/images/bg-logo-mark-blue.svg');
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: -1;

    @media (max-width: 780px) {
      opacity: 0.05;
      width: 120%;
    }
  }
}

.cstl_first-bg {
  position:relative;
}
.cstl_logo-bg-teal {

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./assets/images/bg-logo-mark-teal.svg');
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
  }
}


.cstl_logo-bg-tan {

  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./assets/images/bg-logo-mark-tan.svg');
    background-position: 154% top;
    background-repeat: no-repeat;
    background-size: 52%;
    z-index: -1;

    @media (max-width: 780px) {
      opacity: 0.5;
      background-size: 120%;
      background-position: -200% center;
    }
  }
}

.cstl_logo-bg-brown {
  max-width: 1440px !important;
  margin: auto;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 105%;
    height: 100%;
    background-image: url('./assets/images/bg-logo-mark-brown.svg');
    background-position: 100% 40%;
    background-repeat: no-repeat;
    background-size: 60vh;
    z-index: -1;

    @media (max-width: 780px) {
      opacity: 0.3;
      width: 120%;
    }
  }
}

.cstl_logo-bg-blue {
  max-width: 1440px !important;
  margin: auto;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 105%;
    height: 100%;
    background-image: url('./assets/images/bg-logo-mark-blue.svg');
    background-position: 100% 40%;
    background-repeat: no-repeat;
    background-size: 60vh;
    z-index: -1;

    @media (max-width: 780px) {
      opacity: 0.3;
      width: 120%;
    }
  }
}

.cstl_banner-bg {
  background-size: auto 100% !important;
  background-position: center right;
  background-repeat: no-repeat;
  max-width: 1440px !important;
  margin: auto;

  @media screen and (max-width: 880px) {
    background-size: contain !important;
    background-position: 50% 30vh;
    padding: var(--wp--preset--spacing--30) 0 60vh !important;
  }

  @media screen and (max-width: 630px) {
    background-size: contain !important;
    padding: var(--wp--preset--spacing--30) 0 50vh !important;
  }

  @media screen and (max-width: 540px) {
    background-size: contain !important;
    background-position: 50% 40vh;
    padding: var(--wp--preset--spacing--30) 0 40vh !important;
  }
}

.cstl_banner-bg-higher {
  background-size: auto 100% !important;
  background-position: center right;
  background-repeat: no-repeat;
  max-width: 1440px !important;
  margin: auto;

  @media screen and (max-width: 880px) {
    background-size: contain !important;
    background-position: 50% 30vh;
    padding: var(--wp--preset--spacing--30) 0 60vh !important;
  }

  @media screen and (max-width: 630px) {
    background-size: contain !important;
    padding: var(--wp--preset--spacing--30) 0 50vh !important;
  }

  @media screen and (max-width: 540px) {
    background-size: contain !important;
    background-position: 50% 30vh;
    padding: var(--wp--preset--spacing--30) 0 40vh !important;
  }
}

.cstl_border-right {
  border-right: 1px solid var(--theme-color-tan);

  @media screen and (max-width: 780px) {
    border-bottom: 1px solid var(--theme-color-tan);
    border-right: none;
  }

}

.two-col {
  columns: 2;
  column-gap: 1rem;

  @media screen and (max-width: 780px) {
    columns: 1;
  }
}

.cstl_fw-image img {
  max-height: 600px;
  object-fit: cover;
  object-position: center;
}

ul.is-style-lt-blue-shield-list {
  list-style-type: none;
  padding: 0;

  li {
    list-style-type: none;
    display: flex;
    gap: 12px;
    font-size: var(--wp--preset--font-size--body-large);
    margin-bottom: 16px;
    line-height: 1.2;

    &::before {
      content: url(assets/images/icon-lt-blue-shield.svg);
      display: inline-block;
    }
  }
}


ul.is-style-tan-shield-list {
  list-style-type: none;
  padding: 0;

  li {
    list-style-type: none;
    display: flex;
    gap: 12px;
    font-size: var(--wp--preset--font-size--body-large);
    margin-bottom: 24px;
    line-height: 1.2;

    &::before {
      content: url(assets/images/icon-tan-shield.svg);
      display: inline-block;
    }
  }
}

.step-list {

  > div {
    counter-increment: item;
    padding: .5rem 0 4rem 4rem;
    margin: 0 !important;

    &:last-child {
      padding-bottom: 1rem !important;
    }

    @media screen and (max-width: 780px) {
      padding: .5rem 0 1rem 3rem;
    }

    &::before {
      content: counter(item);
      color: var(--theme-color-teal);
      background: var(--theme-color-white);
      font-size: 1.95rem;
      font-weight: 700;
      text-align:center;
      display: inline-block;
      height: 40px;
      width: 40px;
      border: 1px solid var(--theme-color-teal);
      border-radius: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10;

      @media screen and (max-width: 780px) {
        height: 30px;
        width: 30px;
        font-size: 1.5rem;
      }
    }

    &::after {
      content: '';
      position: absolute;
      width: 1px;
      height: 100%;
      top: 0;
      left: 22px;
      border-left: 1px dashed var(--theme-color-tan);

      @media screen and (max-width: 780px) {
        left: 17px;
      }
    }

  }
}


/* FOOTER */

footer {
  margin: 0;

  a:not(.wp-element-button) {
    &:hover {
      color: var(--theme-color-white) !important;
      text-decoration: underline;
    }
  }
}

.cstl_footer-row {
  @media (max-width: 1024px) {
    text-align: center;

    .wp-block-group, p {
      width: 100%;
      text-align: center;
    }

    .is-nowrap {
      flex-wrap: wrap !important;
    }
  }
}