@font-face {
  font-family: 'Nunito Sans';
  src: url('./public/fonts/nunito.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
}

@font-face {
  font-family: 'Nunito Sans';
  src: url('./public/fonts/nunito-italic.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
}

@font-face {
  font-family: 'Lato';
  src: url('./public/fonts/lato-black.ttf') format('truetype');
  font-weight: 1000;
}

:root {
  --color-darkblue: #1B365D;
  --color-mediumblue: #2B5EA7;
  --color-blue: #4179C8;
  --color-lightblue: #6AB3E7;
  --color-darkgreen: #002918;
  --color-green: #007041;
  --color-lightgreen: #00E083;
  --color-darkred: #4A050E;
  --color-mediumred: #862633;
  --color-red: #FF0023;
  --color-lightgray: #EEEEEE;
  --color-gray: #D9D9D9;
  --color-darkgray: #4A4848;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
} 

html {
  font-size: 16px;
  font-family: 'Nunito Sans', sans-serif;
  color: var(--color-darkblue);
  scroll-behavior: smooth;
}

#page {
  overflow: hidden;
}

h1 {
  font-weight: 800;
  font-size: 5.563rem;
  line-height: 5.625rem;
  margin: 0 0 25px;

  @media (max-width: 1024px) {
    font-size: 4rem;
    line-height: 4.063rem;
  }

  @media (max-width: 768px) {
    font-size: 2.5rem;
    line-height: 2.563rem;
  }
}

h2 {
  font-weight: 800;
  font-size: 2.813rem;
  line-height: 3.25rem;
  margin: 0 0 20px;

  @media (max-width: 1024px) {
    font-size: 2.188rem;
    line-height: 2.594rem;
  }

  @media (max-width: 768px) {
    font-size: 1.563rem;
    line-height: 1.938rem;
    margin-bottom: 20px;
  }
}

h3 {
  font-weight: 700;
  font-size: 1.563rem;
  line-height: 1.875rem;
  margin: 0 0 15px;

  @media (max-width: 1024px) {
    font-size: 1.313rem;
    line-height: 1.594rem;
  }

  @media (max-width: 768px) {
    font-size: 1.063rem;
    line-height: 1.313rem;
    margin-bottom: 10px;
  }
}

h4 {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.375rem;
  margin: 0 0 20px;

  @media (max-width: 1024px) {
    font-size: 1.031rem;
    line-height: 1.219rem;
  }

  @media (max-width: 768px) {
    font-size: 0.938rem;
    line-height: 1.063rem;
  }
}

h5 {
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.063rem;
  margin: 0 0 10px;

  &.text-link {
    color: white;
    white-space: nowrap;

    &:after {
      content: '';
      display: inline-block;
      width: 14px;
      height: 11px;
      margin-left: 10px;
      vertical-align: middle;
      background: url('public/svg/icon-arrow-right-white.svg') no-repeat center center;
      background-size: contain;
      transition: 0.4s;
      position: relative;
      left: 0;
      bottom: 1px;
      transition: 0.4s;
    }
  }
}

h6 {
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1rem;
  margin: 0 0 10px;
}

p {
  font-size: 0.875rem;
  line-height: 1.188rem;
  font-weight: 600;
  margin: 0 0 15px;

  &.text-link {
    color: white;
    white-space: nowrap;
    font-weight: 700;

    &:after {
      content: '';
      display: inline-block;
      width: 14px;
      height: 11px;
      vertical-align: middle;
      background: url('public/svg/icon-arrow-right-darkblue.svg') no-repeat center center;
      background-size: contain;
      transition: 0.4s;
      position: relative;
      left: 0;
      bottom: 0;
      transition: 0.4s;
    }

    &:hover {
      &:after {
        left: 5px;
      }
    }

    &.lightgreen {
      &:after {
        background: url('public/svg/icon-arrow-right-lightgreen.svg') no-repeat center center;
      }
    }

    &.lightblue {
      &:after {
        background: url('public/svg/icon-arrow-right-lightblue.svg') no-repeat center center;
      }
    }

    &.blue {
      &:after {
        background: url('public/svg/icon-arrow-right-blue.svg') no-repeat center center;
      }
    }

    &.white {
      color: white;
      &:after {
        background: url('public/svg/icon-arrow-right-white.svg') no-repeat center center;
      }
    }

    @media (max-width: 768px) {
      &:after {
        bottom: 0;
      }
    }
  }

  @media (max-width: 768px) {
    font-size: 0.813rem;
    line-height: 1.125rem;
    margin: 0 0 10px;
  }
}

a {
  font-size: 0.875rem;
  line-height: 1.188rem;
  margin: 0 0 7px;
  font-weight: 700;
  color: var(--color-darkblue);
  text-decoration: none;

  @media (max-width: 768px) {
    font-size: 0.813rem;
    line-height: 1.125rem;
  }

  &.text-link {
    color: white;
    white-space: nowrap;

    &:after {
      content: '';
      display: inline-block;
      width: 14px;
      height: 11px;
      margin-left: 10px;
      vertical-align: middle;
      background: url('public/svg/icon-arrow-right-darkblue.svg') no-repeat center center;
      background-size: contain;
      transition: 0.4s;
      position: relative;
      left: 0;
      bottom: 1px;
      transition: 0.4s;
    }

    &:hover {
      &:after {
        left: 5px;
      }
    }

    &.lightgreen {
      &:after {
        background: url('public/svg/icon-arrow-right-lightgreen.svg') no-repeat center center;
      }
    }

    &.lightblue {
      &:after {
        background: url('public/svg/icon-arrow-right-lightblue.svg') no-repeat center center;
      }
    }

    &.blue {
      &:after {
        background: url('public/svg/icon-arrow-right-blue.svg') no-repeat center center;
      }
    }

    &.white {
      color: white;
      &:after {
        background: url('public/svg/icon-arrow-right-white.svg') no-repeat center center;
      }
    }

    @media (max-width: 768px) {
      &:after {
        bottom: 0;
      }
    }
  }

}

a.btn {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: white;
  background-color: var(--color-darkblue);
  padding: 10px 20px;
  margin: 0;
  white-space: nowrap;
  &:after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 11px;
    margin-left: 10px;
    vertical-align: middle;
    background: url('public/svg/icon-arrow-right-blue.svg') no-repeat center center;
    background-size: contain;
    transition: 0.4s;
    position: relative;
    left: 0;
    bottom: 0.5px;
  }

  &:hover {
    &:after {
      position: relative;
      left: 5px;
    }
  }

  &.lightblue {
    background-color: var(--color-lightblue);
  }

  &.mediumblue, &.districtnavy {
    background-color: var(--color-blue);
    &:after {
      background: url('public/svg/icon-arrow-right-darkblue.svg') no-repeat center center;
    }
  }

  &.darkblue, &.districtmediumblue, &.northernblue {
    background-color: var(--color-darkblue);
    &:after {
      background: url('public/svg/icon-arrow-right-blue.svg') no-repeat center center;
    }
  }

  &.green {
    background-color: var(--color-green);
    &:after {
      background: url('public/svg/icon-arrow-right-darkgreen.svg') no-repeat center center;
    }
  }

  &.darkgreen, &.centralgreen {
    background-color: var(--color-darkgreen);
    &:after {
      background: url('public/svg/icon-arrow-right-lightgreen.svg') no-repeat center center;
    }
  }

  &.mediumred {
    background-color: var(--color-mediumred);
    &:after {
      background: url('public/svg/icon-arrow-right-red.svg') no-repeat center center;
    }
  }

  &.darkred, &.easternred {
    background-color: var(--color-darkred);
    &:after {
      background: url('public/svg/icon-arrow-right-red.svg') no-repeat center center;
    }
  }

  &.white {
    background-color: white;
    &.darkblue {
      color: var(--color-darkblue);
    }

    &.lightblue {
      color: var(--color-lightblue);
    }

    &.lightgreen {
      color: var(--color-lightgreen);
    }

    &.green {
      color: var(--color-green);
    }

    &.darkred {
      color: var(--color-darkred);
    }
  }

  &.district-light {
    background-color: var(--color-blue);

    &:after {
      background: url('public/svg/icon-arrow-right-darkblue.svg') no-repeat center center;
    }
  }
}

li {
  font-family: 'Nunito Sans', sans;
  font-size: 0.875rem;
  line-height: 1.188rem;
  font-weight: 600;

  @media (max-width: 768px) {
    font-size: 0.813rem;
    line-height: 1.125rem;
  }
}

ol, ul {
  margin: 0 0 15px 0;
  padding: 0 0 0 15px;
}

button {
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  background-color: transparent;
  border: solid 1px var(--color-darkblue);
  color: var(--color-darkblue);
  padding: 10px 25px;
}

button.video-popup-toggle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 175px;
  height: 65px;
  background-color: var(--color-darkblue);
  text-align: center;
  border: none;
  color: white;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0;
  cursor: pointer;

  img {
    width: 23px !important;
    height: 23px !important;
  }

  @media (max-width: 768px) {
    width: 145px;
    height: 45px;
  }
}

.page-template-page-flexible-template-district, .single-news-events, .post-type-archive-news-events, .post-type-archive-documents {
  .bg-color {
    background-color: var(--color-darkblue);
  }

  .btn-color {
    background-color: var(--color-blue);
    &:after {
      background-image: url('public/svg/icon-arrow-right-darkblue.svg')
    }
  }

  .btn-color-white {
    background-color: var(--color-blue);
  }

  .text-link {
    &:after {
      background: url('public/svg/icon-arrow-right-blue.svg') no-repeat center center;
    }
  }

  .text-color {
    color: var(--color-blue);
  }

  .overlay-color {
    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--color-darkblue);
      z-index: 1;
      opacity: 0.9;
    }

    &.district-light {
      &:before {
        background-color: var(--color-mediumblue);
      }
    }
  }
}

.page-template-page-flexible-template-district, .news-events-template-default, .error404 {
  .nav-wrapper {
    #menu-global-menu {
      li.district {
        display: none;
      }
    }
  }

  section.three-features {
    a.text-link {
      color: var(--color-darkblue);
    }
  }

  section.icon-list-repeater {
    a.text-link {
      color: var(--color-darkblue);
    }
  }

  section.three-column-box-repeater {
    .heading {
      a.text-link {
        color: var(--color-darkblue);
      }
    }
  }

  section.simple-four-column-repeater {
    .text-link-color {
      color: var(--color-darkblue);
    }
  }
}

.page-template-page-flexible-template-district {
  .nav-wrapper {
    #menu-global-menu {
      li {
        ul.sub-menu {
          li {
            a {
              &:hover {
                color: var(--color-darkgreen);
              }
            }
          }
        }
      }
    }
  }
}

/* Eastern Red */
.page-template-page-flexible-template-eastern {

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

  .btn-color {
    background-color: var(--color-darkred);
    &:after {
      background: url('public/svg/icon-arrow-right-red.svg') no-repeat center center;
    }
  }

  .text-link-color {
    color: var(--color-darkred);
    &:after {
      background: url('public/svg/icon-arrow-right-red.svg') no-repeat center center;
    }
  }

  .text-link-color-white {
    color: white;
    &:after {
      background: url('public/svg/icon-arrow-right-red.svg') no-repeat center center;
    }
  }

  .arrow-color {
    &:after {
      background: url('public/svg/icon-arrow-right-red.svg') no-repeat center center;
    }
  }

  .nav-wrapper {
    #menu-global-menu {
      li {
        &.schools {
          background-color: var(--color-mediumred);
          a {
            &:after {
              background: url('public/svg/icon-chevron-down-red.svg') no-repeat center center;
              transform: none;
            }
          }
        }

        &.district {
          background-color: var(--color-mediumred);
        }

        &.active {
          a {
            &:after {
              transform: scaleY(-1);
            }
          }
        }

        ul.sub-menu {
          background-color: var(--color-mediumred);
          box-shadow: 0 5px 10px rgba(0,0,0,.4);

          li {
            ul.sub-menu {
              border-top-color: var(--color-red);
            }

            a {
              &:hover {
                color: var(--color-red);
              }
            }
          }

          ul.sub-menu {
            box-shadow: none;
          }
        }
      }
    }

    #menu-eastern-menu {
      li {
        a {

        }

        

        &.active {
          background-color: var(--color-mediumred);
          &.menu-item-has-children {
            a {
              color: white;
              &:after {
                transform: scaleY(-1);
                filter: brightness(1) invert(1);
              }
            }
            ul.sub-menu {
              background-color: var(--color-mediumred);
            }
          }
        }
      }
    }
  }
}

/* Central Green */
.page-template-page-flexible-template-central {

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

  .btn-color {
    background-color: var(--color-green);
    &:after {
      background: url('public/svg/icon-arrow-right-darkgreen.svg') no-repeat center center;
    }
  }

  .btn-color-dark {
    background-color: var(--color-darkgreen);
    color: white;

    &:after {
      background: url('public/svg/icon-arrow-right-lightgreen.svg') no-repeat center center;
    }
  }

  .text-link-color {
    color: green;
    &:after {
      background: url('public/svg/icon-arrow-right-lightgreen.svg') no-repeat center center;
    }
  }

  .text-link-color-white {
    color: white;
  }

  .arrow-color {
    &:after {
      background: url('public/svg/icon-arrow-right-green.svg') no-repeat center center;
    }
  }

  .nav-wrapper {
    #menu-global-menu {
      li {

        &.schools {
          background-color: var(--color-green);
          a {
            &:after {
              background: url('public/svg/icon-chevron-down-green.svg') no-repeat center center;
              transform: none;
            }
          }
        }

        &.district {
          background-color: var(--color-green);
        }

        &.active {
          a {
            &:after {
              transform: scaleY(-1);
            }
          }
        }

        ul.sub-menu {
          background-color: var(--color-green);

          li {
            ul.sub-menu {
              border-top-color: var(--color-lightgreen);
            }

            a {
              &:hover {
                color: var(--color-lightgreen);
              }
            }
          }
        }
      }
    }

    #menu-central-menu {
      li {
        a {
          color: var(--color-darkgray);
        }

        &.menu-item-has-children {
          a {
            &:after {
              background: url('public/svg/icon-chevron-down-darkgray.svg') no-repeat center center;
              filter: none;
              transform: none;
            }
          }
        }

        &.active {
          background-color: var(--color-green);
          &.menu-item-has-children {
            a {
              color: white;
              &:after {
                transform: scaleY(-1);
                filter: brightness(1) invert(1);
              }
            }
            ul.sub-menu {
              background-color: var(--color-green);
            }
          }
        }
      }
    }
  }
}

/* Northern Light Blue */
.page-template-page-flexible-template-northern {

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

  .btn-color {
    background-color: var(--color-lightblue);
    &:after {
      background: url('public/svg/icon-arrow-right-darkblue.svg') no-repeat center center;
    }
  }

  .btn-color-dark {
    background-color: var(--color-darkblue);

    &:after {
      background: url('public/svg/icon-arrow-right-lightblue.svg') no-repeat center center;
    }
  }

  .text-link-color {
    color: var(--color-darkblue);
    &:after {
      background: url('public/svg/icon-arrow-right-lightblue.svg') no-repeat center center;
    }
  }

  .text-link-color-white {
    color: white;
    &:after {
      background: url('public/svg/icon-arrow-right-white.svg') no-repeat center center;
    }
  }

  .arrow-color {
    &:after {
      background: url('public/svg/icon-arrow-right-darkblue.svg') no-repeat center center;
    }
  }

  .nav-wrapper {
    #menu-global-menu {
      li {
        &.schools {
          background-color: var(--color-lightblue);
          a {
            &:after {
              background: url('public/svg/icon-chevron-down-darkblue.svg') no-repeat center center;
              transform: none;
            }
          }
        }

        &.district {
          background-color: var(--color-lightblue);
        }

        &.active {
          a {
            &:after {
              transform: scaleY(-1);
            }
          }
        }

        ul.sub-menu {
          background-color: var(--color-lightblue);

          li {
            ul.sub-menu {
              border-top-color: var(--color-darkblue);
            }

            a {
              &:hover {
                color: var(--color-darkblue);
              }
            }
          }
        }
      }
    }

    #menu-northern-menu {
      li {
        a {
          color: var(--color-darkgray);
        }

        &.menu-item-has-children {
          a {
            &:after {
              background: url('public/svg/icon-chevron-down-darkgray.svg') no-repeat center center;
              filter: none;
              transform: none;
            }
          }
        }

        &.active {
          background-color: var(--color-lightblue);
          &.menu-item-has-children {
            a {
              color: white;
              &:after {
                transform: scaleY(-1);
                filter: brightness(1) invert(1);
              }
            }
            ul.sub-menu {
              background-color: var(--color-lightblue);
            }
          }
        }
      }
    }
  }
}

header {
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  top: 0;
  z-index: 10;
  transition: 0.2s;

  .header-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;

    .site-branding {
      width: 285px;
      position: relative;
      top: 45px;
      z-index: 1;
      padding: 0 15px;

      a.custom-logo-link {  
        display: block;
        margin: 0;

        svg {
          display: block;
          width: 100%;
          height: auto;
          max-width: 265px;
          text {
            font-family: 'Nunito Sans', sans-serif !important;
            font-weight: 800 !important;
          }

          &.sticky {
            display: none;
          }
        }


      }
    }

    .mobile-menu-toggle {
      display: none;
    }
  }

  &.sticky {
    background-color: rgba(255,255,255,0.96);
    max-width: none;
    position: fixed;
    top: 0;
    width: 100%;

    .header-wrapper {
      box-shadow: 0 5px 5px rgba(0,0,0,0.15);
      .site-branding {
        top: 0;
        display: flex;
        align-items: center;

        a.custom-logo-link {
          svg {
            &.sticky {
              display: block;
            }

            &.normal {
              display: none;
            }
          }
        }
      }
    }

    .nav-wrapper {
      #menu-district-menu, #menu-eastern-menu {

        li.active {
          a {
            color: white;
            &:after {
              filter: brightness(0) invert(1);
            }
          }
        }

        a {
          color: var(--color-darkgray);

          &:after {
            filter: none;
          }
        }
        
      }
    }
  }

  @media (max-width: 1990px) {
    width: calc(100% - 70px);
  }

  @media (max-width: 1200px) {
    width: calc(100% - 40px);

    .header-wrapper {
      .site-branding {
        width: 225px;
        a.custom-logo-link {
          margin-left: 15px;

          svg {
            max-width: 200px;
          }
        }
      }
    }
  }

  @media (max-width: 1100px) {
    width: 100%;

    .header-wrapper {
      padding: 10px 15px;
      width: auto;
      display: flex;
      .site-branding {
        top: 0;
        a.custom-logo-link {
          margin-left: 0;
        }
      }

      .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 7px;
        border: none;
        background: transparent;
        width: 28px;
        align-items: center;
        justify-content: center;

        .bar {
          width: 28px;
          height: 2px;
          background-color: white;
        }
      }
    }

    &.sticky {
      .mobile-menu-toggle {
        .bar {
          background-color: var(--color-darkblue);
        }
      }
    }
  }

  /* Mobile Nav Base */
  .mobile-nav {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 1000;
    transition: left 0.3s ease-in-out;
    padding: 20px 0px;
    overflow-y: auto;

    /** active mobile nav  **/
    &.active { 
      left: 0; 
    }

    /** close mobile nav button **/
    .close-mobile-menu {
      background: none;
      border: none;
      font-size: 28px;
      cursor: pointer;
      padding: 0;
      position: absolute;
      top: 15px;
      right: 20px;
    }

    .mobile-nav-inner{
      
      .back-btn-container{ 
        margin: 25px 0 25px;
        .back-btn {
          color: var(--color-darkblue);
          border: none;
          padding: 12px 25px;
          width: 100%;
          text-align: left;
          font-size: 16px;
          cursor: pointer;
          border-radius: 4px;
          transition: background 0.3s ease;
          border-bottom: 1px solid;
          &:before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url("/wp-content/themes/tbx-core/public/svg/icon-arrow-left-blue.svg") no-repeat center / contain;
            margin-right: 7px;
            position: relative;
            top: 2px;
          }

          img.back-arrow {
            margin-right: 4px;
          }
        }
      }

      #menu-district-menu-1 {
        & > li {
          & > a {
            &::after {
              display: none;
            }
          }
        }
      }

      .mobile-menu { 
        list-style: none; 
        padding: 0; 
        margin: 0;
        padding: 0px 25px;

        .district {
          visibility: hidden;
        }

        & > li {
          & > a {
            display: inline-block;            
            color: #333;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 7px;
          }
        }

        & > li.menu-item-has-children {
          & > a {
            &::after {
              content: "";
              position: absolute;
              top: 14px;
              right: 25px;
              width: 14px;
              height: 10px;
              background: url('public/svg/icon-arrow-right-darkblue.svg') no-repeat center center;
              background-size: contain;
            }
          }
        }

        & > li.active-parent {
          & > a {
            color: #007cba;
            font-weight: bold;
          }
        }
        
        li {
          position: relative;
          list-style: none;
          display: block;
          transition: all 0.3s ease;
        }

        li.search-toggle {
          display: flex;
          align-items: center;
          width: 100%;
          margin: 0;
          position: relative;
          top: -4px;
          
          &:before {
            display: inline-block;
          }

          a {
            margin: 0;
          }
        }

        li.active-parent {
          & > .sub-menu {
            display: block !important;
          }
        }

        .menu-item-has-children.active-parent {
          & > a {
            display: none;
          }
        }

        .sub-menu {
          display: none;
          padding-left: 0;
          margin: 0;
          background: transparent;

          .sub-menu {
            display: none;
          }

          li{
            margin-bottom: 15px;
            a {
              display: block;
              color: #333;
              text-decoration: none;
              font-size: 16px;
            }

            .sub-menu {
              li {
                margin-bottom: 10px;

                a {
                  font-size: 14px;
                }
              }
            }
          }

          .menu-item-has-children {
            & > a {
              &::after {
                content: "";
                position: absolute;
                right: 15px;
                top: 70%;
                transform: translateY(-50%);
                width: 12px;
                height: 12px;
                background: url('public/svg/icon-chevron-down-darkgray.svg') no-repeat center center;
                background-size: contain;
                transition: transform 0.3s ease;
              }
            }
          }

          .submenu-open {
            & > a {
              &::after {
                transform: translateY(-50%) rotate(180deg); /* Rotate 180deg for upward arrow */
                top: 8%;
              }
            }
            & > .sub-menu {
              display: block;
            }
          }
        }

        .schools {
          margin-bottom: 14px;
          display: inline-block;

          & > a {
            padding: 10px 20px;
            color: white;
            background: #4179c8;
            width: 140px;

            &:after {

            }
          }
        }
      }

      .mobile-menu.second-menu {
        li {
          a {
            font-size: 16px;
            margin-bottom: 12px;
            font-weight: 600;
          }
        }
      }

      /** 1st menu on each page **/
      #menu-global-menu-1{
        border-bottom: 1px solid #1b365d; 
        margin-bottom: 26px;
        padding-bottom: 20px;
      }


    }


    &.submenu-active {
      .mobile-nav-inner {
        .mobile-menu {
          > li {
            display: none !important;

            &.active-parent {
              display: block !important;
            }
          }
        }
        #menu-global-menu-1 {
          border-bottom: none;
          margin-bottom: 0px;
          padding-bottom: 0px;
        }
      }
    }
  }

}

footer {
  background-color: var(--color-darkblue);

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 45px 35px 25px;

    .logo-wrapper {
      a.logo.mobile {
        display: none;
      }
    }

    a.logo {
      margin: 0;
    }

    .address {
      p {
        margin: 0;
      }

      a {
        margin: 0;
        font-weight: 700;
        font-size: 0.875rem;
        line-height: 1.063rem;
        color: white;
      }
    }

    .contact {
      a {
        color: white;
        margin: 0;
      }

      h5 {
        color: white;
        margin: 0;
        font-weight: 700;
      }
    }

    .social-links {
      display: flex;
      align-items: center;
      gap: 20px;

      a {
        margin: 0;
        img {
          max-width: 25px;
        }
      }
    }

    .additional-logo {
      a {
        margin: 0;
      }
    }

    .additional-logo-2 {

      a {
        margin: 0;
      }

      img {
        max-width: 110px;
      }
    }


  }

  .legal-wrapper {
    padding: 20px 35px;
    border-top: solid 1px var(--color-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    h5 {
      color: white;
      margin: 0;
    }

    a {
      margin: 0;
      img {
        width: 65px;
        position: relative;
        top: 1px;
      }
    }
  }

  @media (max-width: 1200px) {
    .content-wrapper {
      padding: 35px 25px 25px;
      .logo-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
      }
    }
  }

  @media (max-width: 1024px) {
    .content-wrapper {
      flex-direction: column;

      .logo-wrapper {
        a.logo.desktop {
          display: none;
        }

        a.logo.mobile {
          display: inline-block;
        }
      }

      .address {
        p {
          text-align: center;
        }

        a {
          text-align: center;
        }
      }

      .contact {
        margin-bottom: 25px;
        text-align: center;
      }
    }
  }

  @media (max-width: 768px) {
    .legal-wrapper {
      flex-direction: column;
      gap: 10px;
    }
  }
}

.container {
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  height: 100%;

  @media (max-width: 990px) {
    padding: 0;
  }
}

blockquote {
  margin: 45px 0;

  p {
    font-size: 45px;
    line-height: 52px;
    font-weight: 800;
    color: var(--color-darkblue);
    text-align: center;

    &:before {
      content: '';
      display: block;
      position: relative;
      left: calc(50% - 55px);
      width: 110px;
      height: 1px;
      background-color: var(--color-blue);
      margin-bottom: 25px;
    }

    &:after {
      content: '';
      display: block;
      position: relative;
      left: calc(50% - 55px);
      width: 110px;
      height: 1px;
      background-color: var(--color-blue);
      margin-top: 25px;
    }
  }

  @media (max-width: 768px) {
    margin: 35px 0;

    p {
      font-size: 25px;
      line-height: 30px;

      &:before {
        margin-bottom: 15px;
      }

      &:after {
        margin-top: 15px;
      }
    }
  }


}

.post-type-archive-news-events {
  .main-wrapper {
    padding: 85px 35px;

    .content-wrapper {
      max-width: 1300px;
      margin: 0 auto;

      .heading {
        max-width: 700px;
        margin-bottom: 85px;

        h4 {
          margin-bottom: 5px;
        }

        .text {
          margin-bottom: 35px;
        }
      }

      .filters {
        background-color: var(--color-darkblue);
        width: 100%;
        height: 64px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 45px;
        padding: 25px 10px 25px 25px;

        .filters-wrap {
          display: flex;
          gap: 20px;

          .search-filter-field {
            .search-filter-component-combobox-base {
              background-color: white;
              border: none;
              box-shadow: none;
              padding: 0;
              width: 200px;
              border-radius: 0;

              .search-filter-component-combobox__actions {
                padding-left: 10px;
              }

              .search-filter-component-combobox__listbox-toggle:before {
                display: none;
              }

              .search-filter-component-combobox__selection {
                color: var(--color-darkblue);
                font-family: 'Nunito Sans', sans-serif;
                font-size: 14px;
                font-weight: 800;
                padding: 10px;
                
              }

              .search-filter-component-combobox__actions-input::placeholder {
                color: var(--color-darkblue);
                opacity: 1;
                font-family: 'Nunito Sans', sans-serif;
                font-size: 14px;
                font-weight: 800;
              }
            }

            .search-filter-input-text {
              width: 0;              
            }

            .search-filter-input-text--focused {
              display: none !important;
              border: solid 4px red;
            }
          }

          .search-filter-input-text--focused {
            display: none !important;
            border: solid 4px red;
          }
        }

        .search-filter-input-text {
          width: 42px;
          transition: 0.4s;
          cursor: pointer;
          svg.search-filter-icon__svg {
            fill: white;
          }
        }

        .search-filter-input-text--focused {
          width: 250px;
        }

        .search-filter-input-text__clear-button {
          display: none;
        }

        .clear-search {
          display: flex;
          gap: 20px;
          align-items: center;

          a.text-link {
            margin: 0;
          }
        }
      }

      .active-filters {
        margin-top: 15px;

        button.search-filter-input-button {
          text-transform: capitalize;
          font-size: 15px;
          font-weight: 600;
        }
      }
      
      .post-grid {
        margin-top: 25px;
      }

      .grid {
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
        gap: 20px;
        margin-top: 25px;

        a.grid-item {
          background-size: cover;
          background-position: center;
          aspect-ratio: 0.9;
          display: flex;
          align-items: flex-end;
          position: relative;
          margin: 0;
          padding: 45px;

          &:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            z-index: 0;
          }

          .content {
            position: relative;
            z-index: 1;

            h5 {
              color: white;
            }

            h4 {
              color: white;
            }

            p.text-link {
              color: white;
              font-weight: 700;
              margin: 0;

              &:after {
                display: none;
              }

              img {
                margin-left: 7px;
                transition: 0.4s;
              }

              &:hover {
                img {
                  margin-left: 10px;
                }
              }
            }
          }
        }
      }

      nav.pagination {
        margin-top: 35px;
        display: flex;
        justify-content: center;

        .nav-links {
          display: flex;
          gap: 15px;
          a {
            font-size: 16px;
          }

          span.current {
            font-family: 'Nunito Sans', sans-serif;
            line-height: 20px;
            font-weight: 700;
          }
        }
      }
    }



  }

  .nav-wrapper {
    border-bottom: solid 1px #D9D9D9;

    #menu-district-menu {
      li {
        a {
          color: var(--color-darkgray);

          &:after {
            background: url('public/svg/icon-chevron-down-gray.svg') no-repeat center center;
            filter: none;
            transform: none;
          }
        }

        &.active {
          a {
            color: white;
            &:after {
              filter: brightness(0) invert(1);
              transform: scaleY(-1);
            }
          }
        }
      }
    }
  }

  @media (max-width: 1400px) {
    .main-wrapper {
      .content-wrapper {
        .grid {
          a.grid-item {
            padding: 25px;
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {

    .main-wrapper {
      padding: 65px 35px;
      .content-wrapper {
        .filters {
          height: 100%;
          align-items: flex-end;

          .filters-wrap {
            flex-direction: column;
          }

          .clear-search {
            position: relative;
            bottom: -5px;
          }
        }

        .grid {
          grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        }
      }
    }
  }

  @media (max-width: 768px) {
    .main-wrapper {
      padding: 45px 25px;
      .content-wrapper {
        .grid {
          gap: 10px;
        }
      }
    }
  }

  @media (max-width: 600px) {
    .main-wrapper {
      .content-wrapper {
        .filters {
          flex-direction: column;
          align-items: flex-start;
          padding: 25px;
          margin-bottom: 25px;

          .filters-wrap {
            width: 100%;
            .search-filter-field {
              .search-filter-component-combobox-base {
                width: 100%;
              }
            }
          }

          .clear-search {
            bottom: 0;
            width: 100%;
            justify-content: space-between;
          }
        }
        .grid {
          grid-template-columns: minmax(0,1fr);
        }
      }
    }
  }
}

.post-type-archive-documents {
  .main-wrapper {
    padding: 85px 35px;

    .content-wrapper {
      max-width: 1300px;
      margin: 0 auto;
      .heading {
        max-width: 700px;
        margin-bottom: 85px;

        h4 {
          margin-bottom: 5px;
        }

        .text {
          margin-bottom: 35px;
        }
      }

      .letter-buttons {
        display: flex;
        gap: 25px;

        button {
          border: none;
          padding: 0;
          cursor: pointer;
          font-size: 14px;
        }
      }

      .documents-by-letter {
        margin-top: 45px;
      }

      .letter-group {
        padding: 45px 0;
        h2 {
          text-align: center;
          margin-bottom: 45px;
        }

        .grid {
          display: grid;
          grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
          gap: 45px;

          .grid-item {
            display: flex;
            gap: 15px;

            img {
              width: 55px;
              height: 55px; 
            }

            .content {
              a {
                text-transform: uppercase;
                font-size: 14px;
              }
              a.text-link {
                color: var(--color-darkblue);
                font-weight: 700;
                font-size: 12px;
              }

              p {
                margin-bottom: 10px;
              }
            }
          }
        }
      }
    }
  }

  .nav-wrapper {
    border-bottom: solid 1px #D9D9D9;

    #menu-district-menu {
      li {
        a {
          color: var(--color-darkgray);

          &:after {
            background: url('public/svg/icon-chevron-down-gray.svg') no-repeat center center;
            filter: none;
            transform: none;
          }
        }

        &.active {
          a {
            color: white;
            &:after {
              filter: brightness(0) invert(1);
              transform: scaleY(-1);
            }
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {

    .main-wrapper {
      padding: 65px 35px;

      .content-wrapper {
        .heading {
          margin-bottom: 65px;
        }

        .letter-buttons {
          flex-wrap: wrap;
          gap: 15px;
        }

        .letter-group {
          padding: 25px 0;
          .grid {
            grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
            gap: 35px 25px;
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    .main-wrapper {
      padding: 45px 25px;

      .content-wrapper {
        .letter-buttons {
          gap: 10px;
        }

        .letter-group {
          padding: 25px 0;
          .grid {
            grid-template-columns: minmax(0,1fr) minmax(0,1fr);
          }
        }

        .documents-by-letter {
          margin-top: 25px;
        }
      }


    }
  }

  @media (max-width: 500px) {
    .main-wrapper {
      .content-wrapper {
        .letter-group {
          h2 {
            margin-bottom: 25px;
          }
          .grid {
            grid-template-columns: minmax(0,1fr);

          }
        }
      }
    }
  }
}

.single-staff {
  header {
    display: none !important;
  }
}

.error404 {
  header {
    .header-wrapper {
      .site-branding {
        a.custom-logo-link {
          svg {
            filter: brightness(0) invert(1);
          }
        }
      }
    }

    &.sticky {
      .header-wrapper {
        .site-branding {
          a.custom-logo-link {
            svg {
              filter: none;
              display: block;
            }
          }
        }
      }
    }
  }
}

.error-404 {
  margin-top: -40px;
  padding: 0 25px 25px;

  .content-wrapper {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
      z-index: 1;
    }

    img.background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;

      &.mobile {
        display: none;
      }
    }

    .content {
      position: relative;
      z-index: 2;
      padding: 0 65px;

      h1 {
        color: white;
        padding-bottom: 45px;

        &:after {
          content: '';
          display: block;
          position: relative;
          width: 270px;
          height: 1px;
          background-color: var(--color-mediumblue);
          top: 25px;
        }
      }
    }
  }

  @media (max-width: 1100px) {
    margin-top: -62px;
    padding: 0;

    .content-wrapper {
      .content {
        padding: 0 45px;
      }
    }
  }

  @media (max-width: 768px) {

    .content-wrapper {
      img.background-image {
        &.desktop {
          display: none;
        }

        &.mobile {
          display: block;
        }
      }
    }
  }
}

li.search-toggle {
  width: 25px;
  height: 32px;
  margin-left: 15px;
  cursor: pointer;

  &:before {
    content: '';
    display: block;
    width: 25px;
    height: 32px;
    background: url('public/svg/icon-search-gray.svg') no-repeat center center;

  }

  a {
    font-size: 0;
  }
}

.search-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  opacity: 0;
  transform: translateY(-100%);
  transition: 0.2s;

  .close-button {
    position: absolute;
    top: 25px;
    right: 25px;
    z-index: 2;
    cursor: pointer;

    img {
      filter: brightness(0) invert(1);
    }
  }

  .search-drawer-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: cover;
    background-position: center;
    position: relative;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: var(--color-darkblue);
      opacity: 0.8;
      z-index: 1;
    }

    .search-wrapper {
      position: relative;
      z-index: 2;

      .search-filter-field {
        width: 550px;
        border-bottom: solid 1px white;

        .search-filter-input-text {
          padding: 0;

          .search-filter-icon {
            padding: 0;
            margin-right: 10px;

            #sf-svg-search {
              fill: var(--color-lightblue);
            }
          }

          .search-filter-input-text__input::placeholder {
            text-transform: normal;
          }
        }
      }

    }

  }

  &.active {
    transform: none;
    opacity: 1;
  }

  @media (max-width: 768px) {
    .search-drawer-wrapper {
      .search-wrapper {
        .search-filter-field {
          width: 300px;
        }
      }
    }
  }
}

.search-header {
  .search-filter-input-text {
    padding: 0;
  }
}

.popup{
  position: fixed;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  background: rgba(27,54,93,0.97);
  width: 90%;
  max-width: 1100px;

  .popup-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 52px;
    background-color: rgba(180,180, 180, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    img {
      filter: brightness(0) invert(1);
      width: 20px;
      height: 20px;
    }
  }

  .content-wrapper {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 125px 65px;

    h2 {
      text-align: center;
      max-width: 750px;
    }

    .text {
      text-align: center;
      max-width: 700px;
      margin-bottom: 25px;
    }
  }

  @media (max-width: 1024px) {
    .popup-close {
      height: 35px;
      width: 35px;

      img {
        width: 15px;
        height: 25px;
      }
    }
    .content-wrapper {
      padding: 65px 45px;
    }
  }

  @media (max-width: 768px) {
    top: 130px;
    .content-wrapper {
      padding: 55px 25px 45px;
    }
  }
}

section.home-hero {
  display: block;
  height: 800px;
  margin-top: -40px;
  overflow: hidden;
  padding: 0 25px 25px;

  .hero-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
      z-index: 1;
    }

    picture {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }

    video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .content {
      position: relative;
      z-index: 1;
      width: 100%;
      padding: 0 200px 0 10%;

      h1 {
        font-weight: 900;
        margin-bottom: 35px;
        letter-spacing: 1px;
        span.top {
          font-family: 'Lato', sans-serif;
          color: transparent;
          -webkit-text-stroke: 2px white;
          text-stroke: 2px white;
        }

        span.bottom {
          color: white;
        }

        &:after {
          content: '';
          display: block;
          position: relative; 
          width: 245px;
          height: 2px;
          background-color: var(--color-blue);
          margin-top: 25px;
        }
      }

      h3 {
        color: white;
        max-width: 400px;
        margin-bottom: 35px;
      }
    }



    .flyout {
      position: absolute;
      right: -15px;
      top: 225px;
      background-color: white;
      padding: 25px;
      z-index: 1;

      &.hidden {
        display: none;
      }

      img.close-button {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 10px;
        height: 10px;
        cursor: pointer;
      }

      .image-wrapper {
        display: flex;
        flex-direction: column;
        gap: 15px;

        a {
          width: 85px;
          margin: 0;

          img {
            width: 100%;
            height: auto;
          }
        }


      }
    }
  } 

  .announcement-box {
    position: absolute;
    bottom: 25px;
    right: 60px;
    padding: 20px;
    background-color: var(--color-blue);
    max-width: 400px;
    z-index: 1;
    .content-wrapper {
      display: flex;
      align-items: center;
      gap: 20px;

      .image {
        aspect-ratio: 1;


        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }
      }

      .announcement-content {
        h4 {
          color: white;
          margin-bottom: 5px;
        }

        a {
          margin: 0;
          &:after {
            background: url('public/svg/icon-arrow-right-darkblue.svg') no-repeat center center;
          }
        }
      }
    }
  }

  @media (max-width: 1200px) {
    .hero-wrapper {
      .content {
        left: 45px;
      }
    }

    .announcement-box {
      right: 45px;
    }
  }

  @media (max-width: 1100px) {
    margin-top: -62px;
    position: relative;
    padding: 0;
    .hero-wrapper {
      .flyout {
        right: 0;
      }
    }

    .announcement-box {
      right: 25px;
    }
  }

  @media (max-width: 768px) {
    height: 100%;

    .hero-wrapper {
      height: 575px;
      justify-content: center;

      .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        left: 0;
        padding: 0 20px;

        h1 {
          text-align: center;
          margin-bottom: 25px;

          span.top {
            -webkit-text-stroke: 1px white;
            text-stroke: 1px white;
          }

          &:after {
            display: none;
          }
        }

        h3 {
          text-align: center;
          margin-bottom: 30px;
          max-width: 275px;
        }

      }

      .flyout {
        top: unset;
        bottom: 25px;
        padding: 20px 15px 15px;

        img.close-button {
          top: 7px;
          right: 7px;
        }

        .image-wrapper {
          gap: 10px;

          a {
            width: 50px;
          }
        }
      }
    }

    .announcement-box {
      position: relative;
      bottom: 0;
      right: 0;
      width: auto;
      max-width: none;

      .content-wrapper {
        max-width: 550px;
        margin: 0 auto;
      }
    }
  }
}

section.simple-hero-overview {
  padding: 175px 35px 75px;
  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    h4 {
      margin-bottom: 15px;
    }

    h2 {
      margin-bottom: 25px;
    }

    .text {
      max-width: 750px;
      margin-bottom: 45px;
    }

    .link-wrapper {
      display: flex;
      gap: 20px;
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px 45px;
    .content-wrapper {
      .text {
        margin-bottom: 35px;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      .link-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
    }
  }
}

section.school-homepage-hero {
  height: 800px;
  margin: -40px auto 0;
  padding: 0 25px 25px;

  .content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
      z-index: 1;
    }

    .content {
      position: relative;
      z-index: 2;
      border: solid 3px white;
      border-bottom-right-radius: 350px;
      border-top-left-radius: 150px;
      padding: 85px 120px 85px 200px;

      img.logo {
        position: absolute;
        left: -200px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 350px;
        height: auto;
        width: 100%;
      }

      h2 {
        color: white;
        max-width: 500px;
      }
    }

    picture, img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      z-index: 0;
    }
  }

  @media (max-width: 1400px) {
    .content-wrapper {
      .content {
        padding: 85px 85px 65px 85px;
        img.logo {
          left: -150px;
          max-width: 250px;
          left: 50%;
          top: -70px;
          transform: translateX(-50%);
        }
      }
    }
  }

  @media (max-width: 1200px) {
  }

  @media (max-width: 1100px) {
    padding: 0;
    margin-top: -65px;
  }

  @media (max-width: 768px) {
    height: 600px;
    padding: 0;
    margin-top: -65px;

    .content-wrapper {
      .content {
        border: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        h2 {
          text-align: center;
          max-width: 400px;
        }

        img.logo {
          position: relative;
          left: unset;
          margin-bottom: 25px;
          top: 0;
          transform: none;
          max-width: 150px;
        }
      }
    }
  }


}

section.simple-overview {
  background-color: var(--color-darkblue);
  padding: 95px 35px;
  position: relative;
  overflow: hidden;
  .content-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    img.graphic {
      position: absolute;
      z-index: 0;
      top: 0;
      left: -25px;
    }

    .content {
      max-width: 850px;
      position: relative;
      z-index: 1;
      text-align: center;
      color: white;

      h2 {
        color: white;
        text-align: center;
      }

      p {
        color: white;
        text-align: center;
      }

      a {
        color: white;
        font-weight: 1000;
      }

      a.btn {
        font-weight: 700;
      }

      ul, ol {
        text-align: left;
      }

      .link-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 35px;
        gap: 20px;
      }
    }
  }

  @media (max-width: 1200px) {
    padding: 65px 35px;
    .content-wrapper {
      img.graphic {
        display: none;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      .content {
        h2 {
          margin-bottom: 15px;
          text-align: left;
        }
        
        .link-wrapper {
          flex-direction: column;
          align-items: center; 
          gap: 10px;
        }
      }      
    }
  }
}

section.icon-list-repeater {
  padding: 85px 35px;
  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    h2 {
      text-align: center;
      margin-bottom: 45px;
    }

    .icon-grid {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
      gap: 35px 45px;

      .grid-item {
        display: flex;
        gap: 20px;

        .media {         

          img {
            width: 55px;
            height: 55px;
          }
        }

        .content {

          h5 {
            margin-bottom: 5px;
          }

          p {
            margin-bottom: 15px;
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      .icon-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      h2 {
        margin-bottom: 35px;
      }
      .icon-grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        .grid-item {
          gap: 10px;

          a.media {
            width: 45px;
            height: 45px;
          }

          .content {
            p {
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }

  @media (max-width: 500px) {
    .content-wrapper {
      .icon-grid {
        grid-template-columns: minmax(0,1fr);
        max-width: 250px;
        margin: 0 auto;

        .grid-item {
          justify-content: flex-start;
        }
      }
    }
  }
}

section.overview-call-to-action {
  background-color: var(--color-darkblue);
  position: relative;
  padding: 85px 35px;
  overflow: hidden;

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    .heading {
      display: flex;
      margin-bottom: 45px;
      position: relative; 
      z-index: 1;

      h2 {
        color: white;
        width: 65%;
        padding-right: 45px;
      }

      .content {
        width: 35%;
        padding-left: 45px;
        border-left: solid 1px white;
        color: white;
        p {
          color: white;
          margin-bottom: 15px;
        }
      }

      


    }

    .cta-wrapper {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 500px;

      &:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 1;
        border-top-left-radius: 120px;
        border-bottom-right-radius: 120px;
      }

      img.cta-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        border-top-left-radius: 120px;
        border-bottom-right-radius: 120px;
      }

      .content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        h2 {
          color: white;
          text-align: center;
          max-width: 700px;
        }

        .link-wrapper {
          display: flex;
          gap: 20px;
        }
      }
    }

    img.graphic-left {
      position: absolute;
      top: 0;
      left: -25px;
      z-index: 0;
    }

    img.graphic-right {
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 0;
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      img.graphic-left {
        display: none;
      }

      img.graphic-right {
        display: none;
      }

      .heading {
        flex-direction: column;
        max-width: 750px;
        margin: 0 auto 35px;

        h2 {
          width: 100%;
          padding-right: 0;
        }

        .content {
          width: 100%;
          padding-left: 0;
          border-left: none;
        }
      }

      .cta-wrapper {
        max-width: 700px;
        margin: 0 auto;
        height: 100%;
        padding: 65px 35px;

        .content {
          .link-wrapper {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
          }
        }

        &:before {
          border-top-left-radius: 80px;
          border-bottom-right-radius: 80px;
        }

        img.cta-image {
          border-top-left-radius: 80px;
          border-bottom-right-radius: 80px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
  }
}

section.overview-staff-contact {
  background-color: var(--color-darkblue);
  position: relative;
  overflow: hidden;
  padding: 85px 35px;


  img.graphic {
    position: absolute;
    top: 0;
    left: -25px;
    z-index: 0;
  }

  .content-wrapper {
    display: flex;
    max-width: 1300px;
    margin: 0 auto;
    .content {
      width: 50%;
      padding-right: 45px;
      h2 {
        color: white;        
      }

      .text {
        margin-bottom: 45px;
        p {
          color: white;
        }
      }

      .link-wrapper {
        display: flex;
        gap: 20px;
      }
    }

    .staff {
      width: 50%;
      padding-left: 45px; 
      position: relative;
      &:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 200px;
        background-color: white;
      }

      h4 {
        color: white;
      }

      .staff-grid {
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 15px 25px;

        .grid-item {
          display: flex;
          align-items: center;
          gap: 15px;
          .headshot {
            img {
              border-radius: 50%;
              width: 95px;
              height: 95px;
            }
          }

          .details {
            h5 {
              color: white;
              margin-bottom: 2px;
            }

            p {
              color: white;
            }
          }
        }
      }
    } 
  }

  @media (max-width: 1400px) {
    .content-wrapper {
      .content {
        width: 40%;
        .link-wrapper {
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
        }
      }

      .staff {
        width: 60%;
        .staff-grid {
          gap: 25px 15px;
          .grid-item {
            .headshot {
              img {
                width: 65px;
                height: 65px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;

    img.graphic {
      display: none;
    }

    .content-wrapper {
      flex-direction: column;
      gap: 55px;

      .content {
        width: 100%;
        max-width: 750px;
        padding-right: 0;
        margin: 0 auto;

        .text {
          margin-bottom: 0;
        }

        .link-wrapper {
          margin-top: 35px;
        }
      }

      .staff {
        width: 100%;
        padding-left: 0;
        max-width: 750px;
        margin: 0 auto;

        &:before {
          display: none;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      gap: 0;
      .staff {
        margin-top: 45px;

        h4 {
          margin-bottom: 25px;
        }

        .staff-grid {
          grid-template-columns: minmax(0,1fr);
        }
      }
    }
  }
}

section.overview-contact-info {
  background-color: var(--color-darkblue);
  position: relative;
  overflow: hidden;
  padding: 85px 35px;


  img.graphic {
    position: absolute;
    top: 0;
    left: -25px;
    z-index: 0;
  }

  .content-wrapper {
    display: flex;
    max-width: 1300px;
    margin: 0 auto;
    .content {
      width: 50%;
      padding-right: 45px;
      h2 {
        color: white;        
      }

      .text {
        color: white;
        p {
          color: white;
        }
      }

      .link-wrapper {
        display: flex;
        gap: 20px;
        margin-top: 35px;
      }
    }

    .contact-info {
      width: 50%;
      padding-left: 45px; 
      position: relative;
      &:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 200px;
        background-color: white;
      }

      h4 {
        color: white;
      }

      .contact-details {
        .contact-single {
          display: flex;
          align-items: center;
          gap: 20px;
          margin-bottom: 20px;

          img.icon {
            max-width: 25px;
          }

          a {
            color: white;
            margin: 0;
          }

          p {
            color: white;
            margin: 0;
            font-weight: 800;
          }
        }
      }
    } 
  }

  @media (max-width: 1400px) {
    .content-wrapper {
      .content {
        width: 40%;
        .link-wrapper {
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
        }
      }

      .contact-info {
        width: 60%;

      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;

    img.graphic {
      display: none;
    }

    .content-wrapper {
      flex-direction: column;
      gap: 65px;

      .content {
        width: 100%;
        max-width: 750px;
        padding-right: 0;
        margin: 0 auto;
      }

      .contact-info {
        width: 100%;
        padding-left: 0;
        max-width: 750px;
        margin: 0 auto;

        &:before {
          display: none;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;

    .content-wrapper {
      gap: 35px;
    }
  }
}

section.three-features {

  background-image: linear-gradient(to right, #D9D9D9, white);
  padding: 85px 35px;

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    .heading {
      display: flex;
      margin-bottom: 65px;
      .left {
        width: 60%;
        padding-right: 45px;
      }

      .right {
        width: 40%;
        padding-left: 45px;
        border-left: solid 1px var(--color-darkblue);
      }
    }

    .features-wrapper {
      display: flex;
      gap: 65px;
      .images {
        width: 50%;
        position: relative;
        img.main {
          width: 80%;
        }

        img.offset {
          position: absolute;
          right: 0;
          top: 175px;
          border-top-left-radius: 50px;
          border-bottom-right-radius: 50px;
          width: 40%;
          max-width: 250px;
          height: auto;
        }

        .spinning-image-wrapper {
          position: absolute;
          left: -40px;
          top: 300px;
          width: 170px;
          height: 170px;
          display: flex;
          justify-content: center;
          align-items: center;

          img.static {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
          }

          img.spinning {
            position: absolute; 
            animation: spin 10s linear infinite; 
          }
        }
      }

      .feature-list {
        width: 50%;
        padding-top: 85px;

        .feature {
          border-bottom: solid 1px var(--color-darkblue);
          padding-bottom: 25px;
          margin-bottom: 25px;
          h3 {
            margin-bottom: 5px;
            img.chevron {
              display: none;
            }
          }

          .description {
            opacity: 0;
            visibility: hidden;
            max-height: 0;
            transition: 0.4s;
          }

          &:hover {
            .description {
              opacity: 1;
              visibility: visible;
              max-height: 200px;
              margin-bottom: 15px;
            }
          }
        }
      }
    }
  }

  @media (max-width: 1200px) {
    .content-wrapper {
      .features-wrapper {
        .images {
          .spinning-image-wrapper {
            top: 225px;
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    background-image: linear-gradient(to bottom, #D9D9D9, white);

    .content-wrapper {
      .heading {
        flex-direction: column;
        max-width: 750px;
        margin: 0 auto 45px;

        .left {
          padding-right: 0;
          width: 100%;
        }

        .right {
          padding-left: 0;
          width: 100%;
          border-left: none;
        }
      }

      .features-wrapper {
        flex-direction: column;
        .images {
          width: 100%;
          max-width: 600px;
          margin: 0 auto;
        }

        .feature-list {
          padding-top: 0;
          width: 100%;
          max-width: 550px;
          margin: 0 auto;
        }


      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      .heading {
        margin-bottom: 35px;        
      }

      .features-wrapper {
        gap: 50px;

        .images {
          width: 425px;
          img.main {
            position: relative;
            left: 15px;
            width: 350px;
          }

          img.offset {
            width: 150px;
            top: 150px;
          }

          .spinning-image-wrapper {
            width: 90px;
            height: 90px; 
            left: -30px; 

            img.static {
              width: 33px;
              height: 35px;
            }

            img.spinning {
              width: 90px;
              height: 90px;
            }
          }
        }

        .feature-list {
          .feature {
            padding-bottom: 15px;
            h3 {
              display: flex;
              justify-content: space-between;
              transition: 0.2s;

              img.chevron {
                display: block;
                transition: 0.2s;
              }
            }

            .description {
              display: none;
              opacity: 1;
              visibility: visible;
              max-height: 100%;
            }

            a.text-link {
              display: none;
            }

            &.active {
              h3 {
                color: var(--color-blue);
                img.chevron {
                  transform: scaleY(-1);
                }
              }
              .description {
                display: block;
                margin: 10px 0 15px;
              }

              a.text-link {
                display: block;
              }
            }

          }
        }
      }
    }
  }

  @media (max-width: 500px) {
    .content-wrapper {
      .features-wrapper {
        .images {
          width: 290px;

          img.main {
            width: 230px;
            left: 0;
          }

          img.offset {
            width: 130px;
            top: 70px;
          }

          .spinning-image-wrapper {
            top: 115px;
            left: -25px; 
          }
        }
      }
    }
  }
}

section.three-column-box-repeater {
  background-size: 40%;
  background-position: bottom left;
  background-repeat: no-repeat;
  padding: 85px 35px;

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

     .heading {
      display: flex;
      margin-bottom: 65px;
      .left {
        width: 60%;
        padding-right: 45px;
      }

      .right {
        width: 40%;
        padding-left: 45px;
        border-left: solid 1px var(--color-darkblue);
      }
    }

    .grid {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
      gap: 25px;

      .grid-item {
        aspect-ratio: 1.15;
        background-size: cover;
        background-position: center;
        margin: 0;
        display: flex;
        align-items: flex-end;
        
        .content {
          width: 100%;
          height: 40%;
          background-image: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
          padding: 0 35px 35px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          transition: 0.4s;

          h3 {
            color: white;
            margin-bottom: 15px;
          }

          h5.lightgreen {
            color: white;
            font-weight: 700;

            &:after {
              content: '';
              display: inline-block;
              width: 14px;
              height: 11px;
              margin-left: 10px;
              vertical-align: middle;
              background-size: contain;
              transition: 0.4s;
              position: relative;
              left: 0;
              bottom: 1px;
              transition: 0.4s;
              background: url('public/svg/icon-arrow-right-lightgreen.svg') no-repeat center center;
            }

            &:hover {
              &:after {
                left: 5px;
              }
            }
          }
        }

        &:hover {
          .content {
            height: 50%;
          }
        }
      }
      
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;

    .content-wrapper {
      .heading {
        flex-direction: column;
        max-width: 750px;
        margin: 0 auto 45px;

        .left {
          padding-right: 0;
          width: 100%;
        }

        .right {
          padding-left: 0;
          width: 100%;
          border-left: none;
        }
      }

      .grid {
        gap: 20px;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr); 

        .grid-item {
          .content {
            padding: 0 20px 20px 20px;
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px; 
  }

  @media (max-width: 500px) {
    .content-wrapper {
      .grid {
        grid-template-columns: minmax(0,1fr);
      }
    }
  }
}

section.tall-image-slider {
  padding: 85px 35px;
  background-size: 40%;
  background-position: bottom left;
  background-repeat: no-repeat;
  overflow: hidden;

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;


    h2 {
      margin-bottom: 45px;
    }

    .slide-wrapper {
      a, .slide-no-link {
        aspect-ratio: 0.70;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: flex-end;

        .content {
          width: 100%;
          height: 40%;
          background-image: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
          padding: 0 35px 35px;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          transition: 0.4s;

          h3 {
            color: white;
            margin-bottom: 15px;
          }

          h5.text-link {
            color: white;
            font-weight: 700;

            &:after {
              content: '';
              display: inline-block;
              width: 14px;
              height: 11px;
              margin-left: 10px;
              vertical-align: middle;
              background-size: contain;
              transition: 0.4s;
              position: relative;
              left: 0;
              bottom: 1px;
              transition: 0.4s;
            }

            &:hover {
              &:after {
                left: 5px;
              }
            }
          }
        }
      }



      &:hover {
        .content {
          height: 50%;
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
  }

  @media (max-width: 768px) {
    padding: 45px 25px;

    .content-wrapper {
      h2 {
        margin-bottom: 35px;
      }
    }
  }
}

section.solid-bg-three-col-repeater {
  padding: 85px 35px;
  background-size: 60%;
  background-position: bottom left;
  background-repeat: no-repeat;
  overflow: hidden;

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    .heading {
      max-width: 800px;
      margin: 0 auto 35px;
    }

    h2 {
      text-align: center;
    }

    p.subheading {
      text-align: center;
      margin-bottom: 25px;
    }

    .grid-wrapper {
      position: relative;

      .background-box {
        width: calc(100% - 65px);
        height: calc(100% - 85px);
        position: absolute;
        z-index: 0;
        border-top-right-radius: 100px;
        border-bottom-left-radius: 100px;
      }

      h5.sideways-text {
        position: absolute;
        top: 45px;
        left: 25px;
        transform: rotate(-90deg) translate(-100%, 0);
        transform-origin: top left;
        margin: 0;
        color: white;
        z-index: 1;
      }

      .swiper-container.grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 25px;
        width: calc(100% - 65px);
        margin-left: 65px;
        padding-top: 45px;
        position: relative;
        z-index: 1;

        .swiper-wrapper {
          display: contents; // let grid handle layout on desktop
        }

        .swiper-slide.grid-item {
          aspect-ratio: 1;
          background-size: cover;
          background-position: center;
          display: flex;
          align-items: flex-end;

          .content {
            height: 40%;
            width: 100%;
            background-image: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
            padding: 0 35px 35px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;

            h3, h4, h6, a.text-link {
              color: white;
              margin-bottom: 5px;
            }
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;

    .content-wrapper {
      .grid-wrapper {
        .swiper-container.grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 20px;

          .swiper-slide.grid-item {
            .content {
              padding: 0 25px 25px;
            }
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px 125px;
    .content-wrapper {
      .grid-wrapper {

        .background-box {
          border-top-right-radius: 80px;
          border-bottom-left-radius: 80px;
          height: calc(100% + 75px);
          width: 85%;
        }

        h5.sideways-text {
          left: 15px;
          top: 35px;
        }

        .swiper-container.grid {
          display: block;
          width: calc(100% - 45px);
          margin-left: 45px;
          padding-top: 35px;

          .swiper-wrapper {
            display: flex; 
          }

          .swiper-slide.grid-item {
            width: 80%;
            aspect-ratio: 0.8;
          }
        }

        .swiper-pagination {
          bottom: -45px;
          .swiper-pagination-bullet {
            width: 10px;
            height: 10px;
            background: transparent;
            border: solid 1px white;
            opacity: 1;
            margin: 0 4px;

            &.swiper-pagination-bullet-active {
              background-color: white;
            }
          }
        }
      }
    }    
  }
}

section.double-cta {
  background-size: cover;
  background-position: center;
  padding: 85px 35px;
  .content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    .left {
      width: 60%;
      position: relative;
      padding: 85px 65px;
      background-size: cover;
      background-position: center;
      &:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 1;
      }

      .content {
        border: solid 1px white;
        padding: 85px 65px;
        position: relative;
        z-index: 2;
        border-bottom-left-radius: 100px;
        border-top-right-radius: 100px;

        h2 {
          color: white;
        }
      }
    }

    .right {
      width: 40%;
      background-color: var(--color-darkblue);
      padding: 0 45px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .right-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      h2 {
        color: white;
        text-align: center;
      }
    }
  }

  @media (max-width: 1200px) {
    .content-wrapper {
      .left {
        padding: 65px 45px;
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;

    .content-wrapper {
      flex-direction: column;
      .left {
        width: 100%;
      }

      .right {
        width: 100%;
        padding: 85px 65px;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 0;
    .content-wrapper {
      .left {
        padding: 45px 35px;

        .content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 65px 25px;
          border-bottom-left-radius: 80px;
          border-top-right-radius: 80px;

          h2 {
            text-align: center;
          }
        }

      }
    }
  }
}

section.single-cta {
  padding: 85px 35px;
  background-color: var(--color-darkblue);
  position: relative;
  img.graphic {
    position: absolute;
    bottom: 0;
    right: 0;
  }
  .content-wrapper {
    background-size: cover;
    background-position: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 85px 45px;
    border-top-left-radius: 120px;
    border-bottom-right-radius: 120px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
      z-index: 1;
      border-top-left-radius: 120px;
      border-bottom-right-radius: 120px;
    }

    .content {
      position: relative;
      z-index: 2;

      h2 {
        color: white;
        text-align: center;
      }

      .link-wrapper {
        display: flex;
        justify-content: center;
        gap: 20px; 
      }
    }


  }

  @media (max-width: 1024px) {
    padding: 65px 35px;

    img.graphic {
      display: none;
    }

    .content-wrapper {
      min-height: 400px;
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;

    .content-wrapper {
      min-height: 0;
      border-top-left-radius: 80px;
      border-bottom-right-radius: 80px;

      &:before {
        border-top-left-radius: 80px;
        border-bottom-right-radius: 80px;
      }

      .content {
        .link-wrapper {
          flex-direction: column;
          gap: 10px;
          justify-content: center;
          align-items: center;
        }
      }
    }

  }
}

section.fifty-fifty-text-image {
  padding: 85px 35px;
  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 65px;

    &.right {
      flex-direction: row-reverse;
    }

    .text-wrapper {
      width: 50%;
      .link-wrapper {
        margin-top: 25px;
        display: flex;
        gap: 20px;
      }
    }

    .image-wrapper {
      width: 50%;
      position: relative;
      aspect-ratio: 1.3;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .slide-wrapper {
        aspect-ratio: 1.3;
      }

      .swiper-controls {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 50px;
        width: 70%;
        margin: 0 auto;

        .swiper-scrollbar {
          top: 25px;
          bottom: unset;
          height: 15px;
          background-color: #D9D9D9;
          border-radius: 0;

          .swiper-scrollbar-drag {
            background-color: #959595;
            border-radius: 0;
          }
        }

        .swiper-button-prev {
          position: relative;
          position: absolute;
          top: 33px;
          left: -40px;
          img {
            width: 23px;
            height: 18px;
            transform: rotate(180deg);
          }

          &:after {
            display: none;
          }
        }

        .swiper-button-next {
          position: relative;
          position: absolute;
          top: 33px;
          right: -40px;
          img {
            width: 23px;
            height: 18px; 
          }

          &:after {
            display: none;
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      gap: 45px;
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;

    .content-wrapper {
      flex-direction: column-reverse;
      gap: 35px;

      &.right {
        flex-direction: column-reverse;
      }

      .text-wrapper {
        width: 100%;
      }

      .image-wrapper {
        width: 100%;

        .swiper-controls {
          height: 40px;

          .swiper-scrollbar {
            height: 8px;
            top: 18px;
          }

          .swiper-button-prev {
            top: 22px;
            left: -35px;

            img {
              width: 18px;
              height: 13px;
            }
          }

          .swiper-button-next {
            top: 22px;
            right: -35px;
            
            img {
              width: 18px;
              height: 13px;
            }
          }
        }
      }
    }

    &.slider {
      .content-wrapper {
        gap: 65px;
      }
    }
  }

  @media (max-width: 500px) {
    .content-wrapper {
      .text-wrapper {
        .link-wrapper {
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
        }
      }
    }
  }
}

section.large-call-out {
  background-color: var(--color-darkblue);
  position: relative;

  .content-wrapper {    
    display: flex;

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;

      .text-wrapper {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: -200px;
        h5 {
          color: white;
          margin-bottom: 25px;
        }

        h2 {
          color: white;
          max-width: 900px;
          margin: 0;
        } 
      } 

    }

    .image {
      background-size: cover;
      width: 600px; 
      height: 600px;
      position: relative;

      .line-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 500px;
        height: 500px;
        border: solid 1px white;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
      }
    }

   
  }

  &.districtmediumblue {
    background-color: var(--color-mediumblue);
  }

  &.northernblue {
    background-color: var(--color-lightblue);
  }

  &.centralgreen {
    background-color: var(--color-green);
  }

  &.easternred {
    background-color: var(--color-mediumred);
  }

  @media (max-width: 1800px) {
    .content-wrapper {
      .content {
        .text-wrapper {
          margin-left: -300px;
          h2 {
            max-width: 700px;
            font-size: 38px;
            line-height: 42px;
          }
        }
      }

      .image {
        width: 550px;
        height: 550px;
      }
    }
  }

  @media (max-width: 1370px) {
    .content-wrapper {
      .content {
        .text-wrapper {
          position: relative;
          left: 0;
          transform: none;
          margin-left: 0;
          padding: 0 35px;
        }
      }
    }
  }

  @media (max-width: 1200px) {
    .content-wrapper {
      .content {
        .text-wrapper {
          h2 {
            font-size: 28px;
            line-height: 32px;
          }
        }
      }

      .image {
        width: 350px;
        height: 350px;

        .line-overlay {
          width: 300px;
          height: 300px;
        }
      }
    }
  }

  @media (max-width: 900px) {
    .content-wrapper {
      flex-direction: column-reverse;
      .content {
        width: 100%;
        .text-wrapper {
          padding: 65px 35px;
          h2 {
            text-align: center;
            max-width: none;
          }

          h5 {
            text-align: center;
          }
        }
      }

      .image {
        width: 100%;
        height: 100%;
        aspect-ratio: 1;

        .line-overlay {
          width: 85%;
          height: 85%;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .content-wrapper {
      .content {
        .text-wrapper {
          padding: 65px 25px;
        }
      }
    }
  }



  

}

section.center-align-box {
  padding: 145px 35px;
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;

  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 1;
  }
  .content-wrapper {
     max-width: 1300px;
     margin: 0 auto;
     padding: 115px 205px 115px 115px;
     position: relative;
     z-index: 2;

     .text-wrapper {
      max-width: 900px; 
      color: white;     
     }

     img.graphic {
      position: absolute;
      top: -60px;
      right: -135px;
     }

     h2 {
      color: white;
     }

     p, li {
      color: white;
     }

     .text {
      margin-bottom: 25px;
     }

     .link-wrapper {
      display: flex;
      gap: 20px;      
     }
  }

  @media (max-width: 1024px) {
    padding: 85px 35px;

    .content-wrapper {
      padding: 65px 205px 65px 65px;
      img.graphic {
        width: 250px;
        right: -75px;
        top: -40px;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 65px 25px;
    .content-wrapper {
      padding: 45px 35px;
      img.graphic {
        display: none;
      }

      .link-wrapper {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
      }
    }
  }
}

section.photo-slider {
  padding: 85px 35px;
  overflow: hidden;
  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    .slide-wrapper {
      aspect-ratio: 1.3;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .swiper-container {
      position: relative;
    }

    .swiper-controls {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      height: 50px;
      width: calc(100% - 70px);
      max-width: 1300px;
      margin: 0 auto;

      .swiper-scrollbar {
        top: 25px;
        bottom: unset;
        height: 15px;
        background-color: #D9D9D9;
        border-radius: 0;

        .swiper-scrollbar-drag {
          background-color: #959595;
          border-radius: 0;
        }
      }

      .swiper-button-prev {
        position: relative;
        position: absolute;
        top: 33px;
        left: -40px;
        img {
          width: 23px;
          height: 18px;
          transform: rotate(180deg);
        }

        &:after {
          display: none;
        }
      }

      .swiper-button-next {
        position: relative;
        position: absolute;
        top: 33px;
        right: -40px;
        img {
          width: 23px;
          height: 18px; 
        }

        &:after {
          display: none;
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
  }

  @media (max-width: 768px) {
    padding: 35px 25px 55px;
    .content-wrapper {
      .swiper-controls {
          height: 40px;

        .swiper-scrollbar {
          height: 8px;
          top: 18px;
        }

        .swiper-button-prev {
          top: 22px;
          left: -35px;

          img {
            width: 18px;
            height: 13px;
          }
        }

        .swiper-button-next {
          top: 22px;
          right: -35px;
          
          img {
            width: 18px;
            height: 13px;
          }
        }
      }
    }
  }
}

section.expander {
  padding: 85px 35px;
  background-color: var(--color-darkblue);
  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    h2 {
      text-align: center;
      color: white;
      margin-bottom: 45px;
    }

    .expander-group{
      margin-bottom: 85px;

      h4 {
        border-bottom: solid 1px white;
        color: white;
        padding-bottom: 25px;
        font-weight: 700;
      }

      .dropdown-single {
        border-bottom: solid 1px white;
        margin-bottom: 25px;


        .dropdown-toggle {
          display: flex;
          justify-content: space-between;
          cursor: pointer;
          padding-bottom: 25px;
          gap: 25px;

          h3 {
            color: white;
            margin: 0;
          }

          .toggle-indicator {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-right: 15px;
            
            p.toggle-text {
              color: white;
              margin: 0;
            }

            .toggle-icon {
              width: 15px;
              height: 15px;
              position: relative;


              .bar {
                width: 14px;
                height: 1px;
                background-color: white;
                position: absolute;
                top: 7px;
                transition: 0.2s;

                &:nth-child(2) {
                  transform: rotate(90deg);
                }
              }
            }
          }

          &.active {
            .toggle-indicator {
              .toggle-icon {
                .bar:nth-child(2) {
                  transform: none;
                }
              }
            }
          }
        }

        .dropdown-content {
          padding-right: 115px;
          p {
            color: white;
            max-width: 900px;
          }

          a {
            color: white;
          }

          li {
            color: white;
          }

          &.active {
            padding-bottom: 25px;
          }
        }
      }
    }

    .link-wrapper {
      display: flex;
      gap: 30px;
      justify-content: center;
      margin-top: -35px;
    }
  }

  &.light {
    background-color: white;

    .content-wrapper {
      h2 {
        color: var(--color-darkblue);
      }

      .expander-group {
        h4 {
          color: var(--color-darkblue);
          border-bottom-color: var(--color-darkblue);
        }

        .dropdown-single {
          border-bottom-color: var(--color-darkblue);

          .dropdown-toggle {
            h3 {
              color: var(--color-darkblue);
            }

            .toggle-indicator {
              p.toggle-text {
                color: var(--color-darkblue);
              }

              .toggle-icon {
                .bar {
                  background-color: var(--color-darkblue);
                }
              }
            }
          }

          .dropdown-content {
            p, a, li {
              color: var(--color-darkblue);
            }
          }
        }
      }

      .link-wrapper {
        a.btn {
          color: white;
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      h2 {
        margin-bottom: 35px;
      }
      .expander-group {
        margin-bottom: 45px;

        h4 {
          padding-bottom: 15px;
          margin-bottom: 15px;
        }

        .dropdown-single {
          margin-bottom: 15px;
          .dropdown-toggle {
            padding-bottom: 15px;
            .toggle-indicator {
              p.toggle-text {
                display: none;
              }
            }
          }

          .dropdown-content {
            padding-right: 35px;
            &.active {
              padding-bottom: 15px;
            }
          }
        }
      }

      .link-wrapper {
        gap: 15px;
        flex-wrap: wrap;
        margin-top: 0;
      }
    }
  }
}

section.link-list {
  padding: 85px 35px;
  background-color: var(--color-darkblue);
  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    h2 {
      text-align: center;
      color: white;
      margin-bottom: 45px;
    }

    .link-group{
      margin-bottom: 85px;

      h4 {
        border-bottom: solid 1px white;
        color: white;
        padding-bottom: 25px;
        font-weight: 700;
      }

      a.link-single {
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: solid 1px white;
        h3 {
          margin: 0;
          color: white;
        }

        p.text-link {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          margin: 0;
          padding-right: 15px;    

          img {
            position: relative;
            transition: 0.4s;
            left: 0;
          }
          
          &:hover {
            img {
              left: 5px;
            }
          }
        }
      }

    }

    .link-wrapper {
      display: flex;
      gap: 30px;
      justify-content: center;
      margin-top: -35px;
    }
  }

  &.light {
    background-color: white;

    .content-wrapper {
      h2 {
        color: var(--color-darkblue);
      }

      .link-group {
        h4 {
          color: var(--color-darkblue);
          border-bottom-color: var(--color-darkblue);
        }

        a.link-single {
          border-bottom-color: var(--color-darkblue);
          h3 {
            color: var(--color-darkblue);
          }
        }
      }
    }
  }

  &.dark {
    .text-link-color {
      color: white;
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      h2 {
        margin-bottom: 35px;
      }
      .link-group {
        margin-bottom: 45px;

        h4 {
          padding-bottom: 15px;
          margin-bottom: 15px;
        }

        a.link-single {
          padding-bottom: 15px;
          margin-bottom: 15px;
          p.text-link {
            font-size: 0;
          }
        }


      }

      .link-wrapper {
        gap: 15px;
        flex-wrap: wrap;
        margin-top: 0;
      }
    }
  }
}

section.four-column-box-repeater {
  padding: 85px 25px;
  .content-wrapper {
    max-width: 1400px;
    margin: 0 auto;

    h2 {
      margin-bottom: 45px;
      text-align: center;
    }

    .grid {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
      gap: 20px;

      .grid-item {
        padding: 35px 25px;
        color: white;

        h4 {
          color: white;
          margin-bottom: 15px;
        }

        p {
          color: white;
          margin-bottom: 15px;
        }


        
      }
    }
  }

  &.districtnavy {
    .grid {
      .grid-item {
        background-color: var(--color-darkblue);
      }
    }
  }

  &.districtmediumblue{
    .grid {
      .grid-item {
        background-color: var(--color-mediumblue);
      }
    }
  }

  &.northernblue{
    .grid {
      .grid-item {
        background-color: var(--color-lightblue);
      }
    }
  }

  &.centralgreen {
    .grid {
      .grid-item {
        background-color: var(--color-green);
      }
    }
  }
  &.easternred {
    .grid {
      .grid-item {
        background-color: var(--color-mediumred);
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      .grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 15px;
        .grid-item {
          min-height: 195px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      h2 {
        margin-bottom: 35px;
      }

      .grid {
        grid-template-columns: minmax(0,1fr);
        .grid-item {
          min-height: 165px;
        }
      }
    }
  }
}

section.three-column-box-grid {
  padding: 85px 25px;

  .content-wrapper {
    max-width: 1400px;
    margin: 0 auto;

    h2 {
      margin-bottom: 45px;
      text-align: center;
    }

    .grid {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
      gap: 20px;

      .grid-item {
        padding: 35px 25px;
        color: white;
        min-height: 250px;

        h4 {
          color: white;
          margin-bottom: 15px;
        }

        p {
          color: white;
          margin-bottom: 15px;
        }


        
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      .grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        gap: 15px;
        .grid-item {
          min-height: 195px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      h2 {
        margin-bottom: 35px;
      }

      .grid {
        grid-template-columns: minmax(0,1fr);
        .grid-item {
          min-height: 165px;
        }
      }
    }
  }
}

section.embed {
  padding: 105px 35px 85px;
  position: relative;
  overflow: hidden;

  img.graphic {
    position: absolute;
    top: 0;
    left: -10px;
    z-index: 0;
  }

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;

    h2 {
      text-align: center;
      margin-bottom: 45px;
    }

    .embed-wrapper {
      max-width: 1200px;
      margin: 0 auto;

      iframe {
        width: 100%;
        height: 100%;
        min-height: 750px;
      }
    }

    .embeds-wrapper {
      .embed-tabs {
        display: flex;
        justify-content: center;
        margin-bottom: 45px;
        button {
          border-radius: 0;
          border: solid 1px var(--color-darkblue);
          background-color: transparent;
          color: var(--color-darkblue);
          cursor: pointer;
          border-left: none;

          &:first-of-type {
            border-left: solid 1px var(--color-darkblue);
          }

          

          &.active {
            color: white;
            background-color: var(--color-darkblue);
          }
        }
      }

      .embeds {
        .embed {
          display: none;
          width: 100%;
          height: 100%;

          &.active {
            display: block;
          }

          iframe {
              width: 100%;
              height: 100%;
              min-height: 750px;
              aspect-ratio: 16/9;
              border: 0;
          }
        }
      }

      .embed-select {
        display: none;
      }


    }
  }
  
  @media (max-width: 1400px) {
    img.graphic {
      width: 300px;
    }
  }

  @media (max-width: 1024px) {
    padding: 85px 35px 65px;
    img.graphic {
      display: none;
    }

    .content-wrapper {
      h2 {
        margin-bottom: 35px;
      }

      .embeds-wrapper {
        .embed-tabs {
          margin-bottom: 35px;
          button.embed-tab {
            padding: 10px 15px;
          }
        }
      }
    }


  }

  @media (max-width: 768px) {
    padding: 45px 25px;

    .content-wrapper {
      h2 {
        margin-bottom: 25px;
      }
      .embeds-wrapper {
        .embed-tabs {
          display: none;
        }

        .embed-select {
          display: flex;
          justify-content: center;
          margin-bottom: 25px;

          .embed-select-wrapper {
            .select-container {
              position: relative;
              &:after {
                content: '';
                display: block;
                position: absolute;
                right: 15px;
                top: 19px;
                background: url('public/svg/icon-chevron-down-darkblue.svg') no-repeat center center;
                width: 14px;
                height: 11px;
              }

              select {
                border: solid 1px var(--color-darkblue);
                border-radius: 0;
                background-color: transparent;
                font-size: 14px;
                font-weight: 700;
                color: var(--color-darkblue);
                padding: 15px 35px 15px 10px;
                width: 300px;
                appearance: none;
                -webkit-appearance: none;
                position: relative;           
              }


            }
          }




        }

        
      }
    }
  }
}

section.bullet-point-list {
  padding: 85px 35px;

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    .row {
      display: flex;
      gap: 85px;

      .column {
        width: 50%;

        h2 {
          margin-bottom: 15px;
        }

        .text {
          margin-bottom: 35px;
        }

      }
    }

    .additional-content{
      background-color: var(--color-darkblue);
      padding: 25px 35px;
      text-align: center;
      width: 100%;
      margin-top: 45px;

      p {
        color: white;
        margin: 0;
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      .row {
        gap: 45px;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;

    .content-wrapper {
      .row {
        flex-direction: column;

        .column {
          width: 100%;

          .text {
            margin-bottom: 25px;
          }
        }
      }

      .additional-content {
        margin-top: 25px;
        padding: 20px;
      }
    }
  }
}

section.tabbed-fifty-fifty {
  padding: 85px 35px;
  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 65px;


    .content {
      width: 45%;

      .tabs {
        display: flex;
        gap: 75px;
        padding: 25px 0 45px;

        .tab {
          color: #B5B5B5;
          font-size: 12px;
          font-weight: 800;
          cursor: pointer;
          &.active {
            color: var(--color-darkblue);
          }
        }        
      }

      .tab-content-wrapper {
        .tab-content {
          display: none;

          &.active {
            display: block;
          }

          .link-wrapper {
            display: flex;
            gap: 20px;
            margin-top: 35px;
          }
        }
      }
    }

    .image {
      width: 55%;
      position: relative;
      aspect-ratio: 1.25;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
    }
  }   

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      flex-direction: column-reverse;
      gap: 45px;
      .content {
        width: 100%;
        .tabs {
          padding: 0 0 35px;
          justify-content: center;
          gap: 35px;

        }
      }

      .image {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;

    .content-wrapper {
      gap: 35px;
      .content {
        .tabs {
          flex-wrap: wrap;
          gap: 15px;
          .tab {
            white-space: nowrap;
          }
        }

        .tab-content-wrapper {
          .tab-content {
            .link-wrapper {
              flex-direction: column;
              gap: 10px;
              margin-top: 25px;
              align-items: flex-start;
            }
          }
        }
      }
    }
  }
}

section.fast-facts {
  padding: 85px 35px;
  .content-wrapper {
    max-width: 1300px;
    background-size: cover;
    background-position: center;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 65px;

    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #2B5EA7; 
      z-index: 0;
      opacity: 0.9;
    }

    .counters {
      max-width: 1000px;
      display: flex;
      justify-content: center;
      gap: 65px;
      
      .counter-single {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .counter-value {
          display: flex;
          font-family: 'Nanito Sans', sans-serif;
          font-size: 90px;
          font-weight: 700;
          color: white;
          margin-bottom: 5px;
        } 

        h5.title {
          color: white;
          text-align: center;
          max-width: 250px;
        }
      }
    }
  }

  &.districtnavy {
    .content-wrapper {
      &:before {
        background-color: var(--color-darkblue);
      }
    }
  }

  &.districtmediumblue {
    .content-wrapper {
      &:before {
        background-color: var(--color-mediumblue);
      }
    }
  }

  &.northernblue {
    .content-wrapper {
      &:before {
        background-color: var(--color-lightblue);
      }
    }
  }

  &.centralgreen {
    .content-wrapper {
      &:before {
        background-color: var(--color-green);
      }
    }
  }
  &.easternred {
    .content-wrapper {
      &:before {
        background-color: var(--color-mediumred);
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      padding: 45px;
      .counters {
        .counter-single {
          .counter-value {
            font-size: 60px;

          }
        }
      }
    }

  }

  @media (max-width: 768px) {
    padding: 25px;
    .content-wrapper {
      .counters {
        gap: 25px;
        flex-direction: column;
        .counter-single {
          .counter-value {
            font-size: 40px;
          }

          h5.title {
            max-width: 200px;
          }
        }
      }
    }
  }
  
}

section.vertical-tab {
  padding: 85px 35px;

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    .heading {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: 65px;

      h2 {
        text-align: center;
        max-width: 850px;
      }

      .text {
        text-align: center;
        max-width: 850px;
        margin-bottom: 25px;
      }
    }

    .tabs-wrapper {
      display: flex;
      gap: 65px;

      .tabs {
        width: 40%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .tab {
          border-bottom: solid 1px var(--color-darkgray);
          width: 100%;
          margin-bottom: 15px;
          cursor: pointer;

          h4 {
            margin-bottom: 15px;
          }

          &.active {
            h4 {
              &:after {
                content: '';
                display: inline-block;
                width: 14px;
                height: 11px;
                margin-left: 10px;
                vertical-align: middle;
                background: url('public/svg/icon-arrow-right-darkblue.svg') no-repeat center center;
                background-size: contain;
                transition: 0.4s;
                position: relative;
                left: 0;
                bottom: 0.5px;
              }
            }
          }
        }
        

      }

      .tabs-select {
        display: none;
      }

      .tab-content-wrapper {
        width: 60%;

        .tab-content {
          display: none;
          padding: 45px;
          color: white;

          a {
            color: white;
          }

          .main-content {
            margin-bottom: 25px;
          }

          .expanders {
            border-top: solid 1px white;
            .dropdown-single {
              border-bottom: solid 1px white;
              padding: 15px 0;
              cursor: pointer;
              .dropdown-toggle {
                display: flex;
                justify-content: space-between;

                h4 {
                  margin-bottom: 0;
                }

                .toggle-indicator {
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  margin-right: 15px;  

                  .toggle-icon {
                    width: 15px;
                    height: 15px;
                    position: relative;


                    .bar {
                      width: 14px;
                      height: 1px;
                      background-color: white;
                      position: absolute;
                      top: 7px;
                      transition: 0.2s;

                      &:nth-child(2) {
                        transform: rotate(90deg);
                      }
                    }
                  }
                }

                &.active {
                  .toggle-indicator {
                    .toggle-icon {
                      .bar:nth-child(2) {
                        transform: none;
                      }
                    }
                  }
                }

              }

              .dropdown-content {
                &.active {
                  padding-top: 15px;
                }
              }
            }
          }


          .image-wrapper {
            position: relative;
            margin-top: 35px;
            img {
              width: 100%;
              display: block;
            }
          }

          a.text-link {
            display: inline-block;
            margin-top: 25px;
          }

          


          &.active {
            display: block;
          }
        }
      }
    }    
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      .tabs-wrapper {
        gap: 35px;

        .tab-content-wrapper {
          .tab-content {
            padding: 25px;
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      .heading {
        margin-bottom: 45px;
        padding: 0 25px;
      }
      .tabs-wrapper {
        flex-direction: column;
        gap: 25px;
        .tabs {
          display: none;
        }

        .tabs-select {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0 25px;

          .select-container {
            position: relative;
            &:after {
              content: '';
              display: block;
              position: absolute;
              right: 15px;
              top: 19px;
              background: url('public/svg/icon-chevron-down-darkblue.svg') no-repeat center center;
              width: 14px;
              height: 11px;
            }

            select {
              border: solid 1px var(--color-darkblue);
              border-radius: 0;
              background-color: transparent;
              font-size: 14px;
              font-weight: 700;
              color: var(--color-darkblue);
              padding: 15px 35px 15px 10px;
              width: 300px;
              appearance: none;
              -webkit-appearance: none;
              position: relative;      
              
              &:focus, &:active, &:hover, &:focus-within {
                box-shadow: none;
                outline: none;
              }
            }
          }
        }

        .tab-content-wrapper {
          width: 100%;

          .tab-content {
            padding: 45px 25px;
          }
        }
      }
    }
  }
}

section.social-media-callout {
  padding: 85px 35px;

  .content-wrapper {
    display: flex;
    max-width: 1300px;
    margin: 0 auto;

    .image {
      width: 45%;
      aspect-ratio: 1;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .line-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 80%;
        height: 80%;
        border: solid 1px white;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
      }
    }

    .content {
      width: 55%;
      background-color: var(--color-darkblue);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 0 25px;

      h2 {
        text-align: center;
        span {
          display: block;
          font-size: 80px;
          line-height: 80px;
          font-weight: 900;
          color: var(--color-lightblue);
        }
        span.outline {
          font-family: 'Lato', sans-serif;
          color: transparent;
          -webkit-text-stroke: 2px white;
          text-stroke: 2px white;
        }
      }

      .social-links {
        display: flex;
        gap: 20px;
        align-items: center;

      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      .content {
        h2 {
          span {
            font-size: 50px;
            line-height: 56px;
            letter-spacing: 1px;

            &.outline {
              -webkit-text-stroke: 1.5px white;
              text-stroke: 1.5px white;
            }
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 0;
    .content-wrapper {
      flex-direction: column;

      .image {
        width: 100%;

        .line-overlay {
          border-bottom-right-radius: 80px;
          border-top-left-radius: 80px;
        }
      }

      .content {
        width: 100%;
        padding: 65px 25px;

        h2 {
          span {
            font-size: 40px;
            line-height: 46px;

            &.outline {
              -webkit-text-stroke: 1px white;
              text-stroke: 1px white;
            }
          }
        }
      }
    }
  }
}

section.wysiwyg {
  padding: 85px 35px;

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    h1, h2, h3, h4, h5, h6, p, a, li, blockquote {
      max-width: 1000px;
    }

    .link-wrapper {
      margin-top: 45px;
      display: flex;
      gap: 20px;
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      .link-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
    }
  }
}

section.single-image {
  padding: 85px 35px;

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    .image {
      width: 100%;
      aspect-ratio: 16/9;
      margin-bottom: 15px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

    }

    h5 {
      color: #4A4848;
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
  }
}

section.event-details {
  padding: 45px 35px;

  .content-wrapper {
    display: flex;
    gap: 20px;
    max-width: 1300px;
    margin: 0 auto;

    .image {
      width: 66.66%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }

    .details {
      width: 33.33%;
      color: white;
      padding: 45px;

      .detail {
        margin-bottom: 25px;

        h6.title {
          border-bottom: solid 1px white;
          padding-bottom: 3px;
          margin-bottom: 6px;
        }

        a {
          color: white;
        }
      }

      
      .link-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
      }

      
    }
  }

  @media (max-width: 1400px) {
    .content-wrapper {
      gap: 15px;
      .details {
        padding: 25px;
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 45px 35px;
    .content-wrapper {
      flex-direction: column;
      gap: 10px;

      .image {
        width: 100%;
        aspect-ratio: 16/9;
      }

      .details {
        width: 100%;
        padding: 45px;

        .inner-wrapper {
          max-width: 550px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 25px 0;
    .content-wrapper {
      gap: 0;

      .details {
        padding: 25px;
      }
    }
  }
}

section.three-school-feature {
  padding: 85px 35px;
  background-size: cover;
  overflow: hidden;

  .content-wrapper {
    max-width: 1500px;
    margin: 0 auto;

    .heading {
      display: flex;
      margin-bottom: 65px;
      max-width: 1300px;
      margin: 0 auto 65px;

      .left {
        width: 60%;
        padding-right: 45px;
      }

      .right {
        width: 40%;
        padding-left: 45px;
        border-left: solid 1px var(--color-darkblue);

        a.text-link {
          color: var(--color-darkblue);
        }
      }
    }

    .schools-wrapper {
      display: flex;
      justify-content: center;
      gap: 65px;

      .school {
        position: relative;
        height: 500px;
        width: 450px;

        .background-graphic {
          width: 385px;
          height: 480px;
          border-top-right-radius: 100px;
          border-bottom-left-radius: 100px;
        }

        h4.vertical-text {
          position: absolute;
          top: 45px;
          left: 25px;
          transform: rotate(-90deg) translate(-100%, 0);
          transform-origin: top left;
          margin: 0;
          color: white;
          z-index: 1;
        }

        .main-wrapper {
          display: flex;
          flex-direction: column;
          position: absolute;
          top: 45px;
          left: 65px;
          width: 385px;
          height: 480px;
          border-top-right-radius: 100px;
          border-bottom-left-radius: 100px;
        
          &:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3);
            z-index: 0;
            border-top-right-radius: 100px;
            border-bottom-left-radius: 100px;
          }

          h3 {
            position: absolute;
            top: 50px;
            left: 45px;
            color: white;
          }

          img.logo {
            max-width: 265px;
            position: absolute;
            top: 170px;
            left: -90px;
          }

          a.text-link {
            position: absolute;
            left: 65px;
            bottom: 45px;
          }
        }

        &.central {
          .main-wrapper {
            img.logo {
              top: 190px;
            }
          }
        }

        &.northern {
          .main-wrapper {
            img.logo {
              max-width: 230px;
            }
          }
        }
      }
    }
  }

  @media (max-width: 1600px) {
    .content-wrapper {
      .schools-wrapper {

        .school {
          width: 390px;
          height: 475px;

          .background-graphic {
            width: 325px;
            height: 430px;
          }

          .main-wrapper {
            width: 325px;
            height: 430px;

            h3 {
              top: 35px;
              left: 35px;
            }

            img.logo {
              max-width: 225px;
            }

            a.text-link {
              left: 45px;
            }
          }

          &.northern {
            .main-wrapper {
              img.logo {
                max-width: 180px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 1400px) {
    .content-wrapper {
      .schools-wrapper {

        .school {
          height: 415px;
          width: 320px;

          .background-graphic {
            width: 285px;
            height: 390px;
          }

          h4.vertical-text {
            font-size: 14px;
            top: 25px;
            left: 7px;
          }

          .main-wrapper {
            width: 285px;
            height: 390px;
            top: 25px;
            left: 35px;

            h3 {
              font-size: 20px;
              top: 25px;
              left: 25px;
              padding-right: 45px;
            }

            img.logo {
              max-width: 165px;
              top: 150px;
              left: -55px;
            }

            a.text-link {
              left: 35px;
            }
          }

          &.central {
            .main-wrapper {
              img.logo {
                top: 155px;
              }
            }
          }

          &.northern {
            .main-wrapper {
              img.logo {
                max-width: 150px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;

    .content-wrapper {
      .heading {
        flex-direction: column;
        max-width: 750px;
        margin: 0 auto 45px;

        .left {
          padding-right: 0;
          width: 100%;
        }

        .right {
          padding-left: 0;
          width: 100%;
          border-left: none;
        }
      }
      .schools-wrapper{
        flex-direction: column;
        align-items: center;
        .school {
          .background-graphic {
            border-top-right-radius: 60px;
            border-bottom-left-radius: 60px;
          }

          h4.vertical-text {
            left: 10px;
          }

          .main-wrapper {
            border-top-right-radius: 60px;
            border-bottom-left-radius: 60px;

            &:before {
              border-top-right-radius: 60px;
              border-bottom-left-radius: 60px;
            }
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;

    .content-wrapper {
      .schools-wrapper {
        gap: 25px;
      }
    }
  }
}

section.testimonial-stat-slider {
  padding-bottom: 14px;
  overflow: hidden;
  
  .content-wrapper {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
  }

  .swiper-container {
    overflow-y: visible;

    .swiper-scrollbar {
      width: 100%;
      height: 15px;   
      bottom: -14px;
      left: 0;
      border-radius: 0;
      background-color: #D9D9D9;
      z-index: 1;
      
      .swiper-scrollbar-drag {
        border-radius: 0;
        background-color: #959595;
      }
    }
  }

  .slide-wrapper {
    display: flex;
    height: 600px;

    .image {
      width: 33.33%;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .line-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 80%;
        height: 80%;
        border: solid 1px white;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
      }

      h4.image-caption {
        position: absolute;
        color: white;
        margin: 0;
        max-width: 200px;
        bottom: calc(10% + 25px);
        left: calc(10% + 25px);
      }

    }

    .content {
      width: 66.66%;
      background-size: cover;
      background-position: center;
      position: relative;
      color: white;
      display: flex;
      align-items: center;
      gap: 65px;

      .quote-wrapper {
        position: relative;
        width: 50%;
        z-index: 2;
        padding: 0 0 0 85px;

        h3 {
          line-height: 37px;
          max-width: 450px;
        }

        h4.quote-source {
          margin: 35px 0 0;
        }
      }

      .stats-wrapper {
        position: relative;
        width: 50%;
        z-index: 2;

        .stat-single {
          display: flex;
          align-items: center;
          gap: 25px;
          padding: 30px 0;
          border-bottom: solid 1px white;

          .stat-wrapper {
            font-size: 45px;
            font-weight: 800;
            width: 115px;
            text-align: right;
            margin: 0;
          }

          .stat-text {
            max-width: 350px;
            padding-right: 35px;
            flex: 1;
            h4 {
              margin: 0;
            }
          }

          &:last-of-type {
            border-bottom: none;
          }

        }

      }

      &:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0.9;
      }
    }
  }

  @media (max-width: 1400px) {
    .slide-wrapper {
      height: 550px;
      .content {
        gap: 55px;

        .quote-wrapper {
          padding-left: 35px;

          .quote {
            h3 {
              font-size: 20px;
              line-height: 32px;
            }
          }
        }

        .stats-wrapper {
          .stat-single {
            padding: 20px 0;

            .stat-wrapper {
              font-size: 35px;
              width: 95px;
            }

            .stat-text {
              h4 {
                font-size: 16px;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    .slide-wrapper {
      flex-direction: column;
      height: 100%;

      .image {
        width: 100%;
        height: 350px;
      }
      .content {
        flex-direction: column;
        width: 100%;
        gap: 0;

        .quote-wrapper {
          width: 100%;
          padding: 35px 35px;
          .quote {
            text-align: center;
            h3 {
              margin: 0 auto;
              max-width: 550px;
            }
          }
          
          h4.quote-source {
            text-align: center;
            margin-top: 25px;
          }
        }

        .stats-wrapper {
          padding-bottom: 35px;
          width: 100%;
          padding: 0 35px 45px;
          max-width: 500px;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .slide-wrapper {
      .image {
        height: 100%;
        aspect-ratio: 1;
      }

      .content {
        .quote-wrapper {
          padding: 35px 25px;
          .quote {
            h3 {
              font-size: 17px;
              font-weight: 700;
              line-height: 21px;
            }
          }

          .quote-source {
            font-size: 15px;
            font-weight: 700;
            margin-top: 15px;
          }
        }
        .stats-wrapper {
          .stat-single {
            flex-direction: column;
            border: none;
            gap: 10px;

            .stat-wrapper {
              width: auto;
              font-size: 25px;
            }

            .stat-text {
              text-align: center;
              padding-right: 0;

              h4 {
                font-size: 14px;
              }
            }
          }

        }
      }
    }
  }


}

section.single-expander {
  .dropdown-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    font-size: 14px;
    font-weight: 800;
    color: white;
    background-color: var(--color-mediumblue);
    padding: 15px 35px;
    cursor: pointer;

    button {
      background-color: var(--color-darkblue);
      color: white;
      padding-right: 15px;
      white-space: nowrap;
      img {
        margin-left: 5px; 
      }
    }

    &.active {
      button {
        img {
          transform: rotate(-180deg);
        }
      }
    }
  }

  .dropdown-content {
    background-color: var(--color-mediumblue);
    .content-wrapper {
      max-width: 1300px;
      margin: 0 auto;
      color: white; 
      padding: 65px 35px;

      .link-wrapper {
        display: flex;
        gap: 20px;
        margin-top: 25px;

        a.btn {
          background-color: var(--color-darkblue);
          &:after {
            background: url('public/svg/icon-arrow-right-blue.svg') no-repeat center center;
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    .dropdown-content {
      .content-wrapper {
        padding: 45px 35px;
      }
    }
  }

  @media (max-width: 768px) {
    .dropdown-toggle {
      padding: 15px 25px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 15px;
      text-align: center;
    }
    .dropdown-content {
      .content-wrapper {
        padding: 45px 15px; 

        .link-wrapper {
          flex-direction: column;
          gap: 10px;
          align-items: flex-start;
        }
      }  
    }    
  }
}

section.links-bar {
  background-color: var(--color-mediumblue);
  padding: 15px 35px;
  .content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px 45px;

    .link-wrapper {
      display: flex;
      align-items: center;
      gap: 15px;
      h5 {
        color: white;
        margin: 0;
      }

      a {
        margin: 0;
        white-space: nowrap;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 15px 25px;
  }
}

section.simple-four-column-repeater {
  padding: 85px 35px;
  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    h2 {
      text-align: center;
      margin-bottom: 65px;
    }

    .grid {
      display: grid;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
      gap: 45px;

      .grid-item {

        h4 {
          margin-bottom: 15px;
        }

        .text {
          margin-bottom: 15px;
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      .grid {
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
      }
    }
    
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      h2 {
        margin-bottom: 45px;
      }

      .grid {
        grid-template-columns: minmax(0,1fr);
      }
    }
  }
  
}

section.logo-carousel {
  padding: 85px 35px;
  .content-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    overflow: hidden;

    h2 {
      text-align: center;
      margin-bottom: 15px;
    }

    .slide-wrapper {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      a {
        width: 100%;
        text-align: center;
      }

      img {
        width: auto;
        max-width: 80%;
        max-height: 165px;
      }
    }

    .swiper-controls {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 25px;
      max-width: 1200px;
      width: 90%;
      margin: 25px auto;

      .swiper-scrollbar {
        position: relative;
        width: calc(100% - 130px);
        height: 15px;
        background-color: #D9D9D9;
        border-radius: 0;
        top: 0;
        left: 0;

        .swiper-scrollbar-drag {
          height: 15px;
          background-color: #959595;
          border-radius: 0;
        }
      }

      .swiper-btn-prev {
        position: absolute;
        top: -2px;
        left: 0;
        img {
          transform: rotate(180deg);
        }
      }

      .swiper-btn-next {
        position: absolute;
        top: -2px;
        right: 0;

      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
  }

  @media (max-width: 768px) {
    padding: 45px 0;

    .content-wrapper {
      .swiper-controls {
        width: 100%;
        padding: 0 25px;
        margin: 15px 0 0;
        .swiper-btn-prev {
          display: none;
        }

        .swiper-btn-next {
          display: none;
        }

        .swiper-scrollbar {
          width: 100%;
        }
      }
    }
  }
}

section.link-list-image {
  padding: 85px 35px;

  &.right {
    .content-wrapper {
      flex-direction: row-reverse;
    }
  }

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    .image {
      width: 45%;
      aspect-ratio: 1;
      position: relative;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .line-overlay {
        position: absolute;
        width: 80%;
        height: 80%;
        border: solid 1px white;
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    }

    .content {
      width: 55%;
      padding: 45px 65px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      h2 {
        color: white;
      }

      .link-list {
        .link-single {
          border-bottom: solid 1px #EEEEEE;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 20px;
          padding: 15px 0;

          h4 {
            color: white;
            margin: 0;
            line-height: 18px;
          }
          
        }
      }
    }


  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
    .content-wrapper {
      flex-direction: column !important;
      max-width: 650px;

      .content {
        width: 100%;
        padding: 35px;
      }

      .image {
        width: 100%;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 0;

    .content-wrapper {
      .content {
        padding: 35px 25px;
        h2 {
          text-align: center;
        }
      }
    }
  }
}

section.contact {
  padding: 85px 35px;

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    .row {
      display: flex;

      .image {
        width: 50%;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

      }

      .content {
        width: 50%;
        padding: 65px;

        h4 {
          color: white;
          margin-bottom: 35px;
        }

        .link-list {
          .link-wrapper {
            display: flex;
            gap: 15px;
            align-items: center;
            margin-bottom: 25px;

            .image {
              width: 23px;
              display: flex;
              justify-content: center;
              align-items: center;

              img {
                height: 23px;
                width: auto;
              }
            }

            a {
              color: white;
              margin: 0;
            }

            h5 {
              color: white;
              margin: 0;
            }
          }
        }


      }
    }

    .bottom-link {
      background-color: #EEEEEE;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 35px 65px;

      h3 {
        margin: 0;
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;

    .content-wrapper {
      .row {
        .content {
          padding: 45px 25px;

        }
      }

      .bottom-link {
        padding: 25px 25px;
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 0 0;

    .content-wrapper {
      max-width: 650px;

      .row {
        flex-direction: column;

        .image {
          width: 100%;
        }

        .content {
          width: 100%;

          h4 {
            margin-bottom: 25px;
          }

          .link-list {
            .link-wrapper:last-of-type {
              margin-bottom: 0;
            }
          }
        }
      }

      .bottom-link {
        flex-direction: column;
        gap: 15px;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

section.three-column-box-tabbed {
  position: relative;
  padding: 85px 35px;
  background-size: cover;
  background-position: center;

  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.9;
  }

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;

    h2 {
      color: white;
      text-align: center;
      margin-bottom: 25px;
    }

    .text {
      color: white;
      text-align: center;
      max-width: 850px;
      margin: 0 auto 35px;
    }

    .link-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 35px;
    }

    select {
      border: solid 1px white;
      border-radius: 0;
      background-color: transparent;
      font-size: 14px;
      font-weight: 700;
      color: white;
      padding: 15px 25px 15px 10px;
      width: 300px;
      margin: 0 auto 35px;
      display: none;

      option {
        background: white;
        color: var(--color-darkblue);
      }
    }

    .tabs {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 55px;

      .tab {
        border: solid 1px white;
        border-right: none;
        padding: 10px 25px;
        cursor: pointer;

        &:last-of-type {
          border-right: solid 1px white;
        }
        
        h5 {
          color: white;
          margin: 0;
        }

        &.active {
          background-color: white;
          h5 {
            color: var(--color-darkgray);
          }
        }
      }
    }

    .tab-content {
      display: none;
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
      gap: 25px;

      &.no-tabs {
        display: grid;
      }

      &.active {
        display: grid;
      }

      .column {
        position: relative;
        padding: 45px 25px 70px;
        background-size: cover;
        background-position: center;
        min-height: 475px;

        &:before {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.4);
          z-index: 1;
        }

        .content {
          position: relative;
          z-index: 1;
          height: 100%;

          h3 {
            color: white;
          }

          p {
            color: white;
          }

          a.text-link {
            position: absolute;
            bottom: -35px;
            left: 0;
          }
        }
      }


    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;

    .content-wrapper {
      h2 {
        margin-bottom: 25px;
      }

      .tabs {
        margin-bottom: 45px;
      }
      .tab-content {
        grid-template-columns: minmax(0,1fr);
        gap: 25px;

        .column {
          padding: 25px 25px 70px;
          width: 100%;
          max-width: 400px;
          margin: 0 auto;
          aspect-ratio: initial;
          min-height: 0;
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      .tabs {
        display: none;
      }

      select {
        display: block;
      }
    }
  }
}

section.flexible-horizontal-tab {
  padding: 85px 35px;
  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    .heading {
      margin-bottom: 55px;

      h2 {
        text-align: center;
      }

      .tabs {
        display: flex;
        justify-content: center;
        gap: 45px;

        .tab {
          cursor: pointer;
          font-size: 12px;
          font-weight: 800;
          color: #B5B5B5;
          &.active {
            color: var(--color-darkblue);
          }
        }
      }

      .horizontal-select {
        display: none;
        justify-content: center;

        .select-container {
          position: relative;

          &:after {
            content: '';
            display: block;
            position: absolute;
            right: 15px;
            top: 19px;
            background: url('public/svg/icon-chevron-down-darkblue.svg') no-repeat center center;
            width: 14px;
            height: 11px;
          }

          select {
            border: solid 1px var(--color-darkblue);
            border-radius: 0;
            background-color: transparent;
            font-size: 14px;
            font-weight: 700;
            color: var(--color-darkblue);
            padding: 15px 35px 15px 10px;
            width: 300px;
            appearance: none;
            -webkit-appearance: none;
            position: relative;           
          }
        }
      }




    }

    .tab-content {
      display: none;

      &.active {
        display: block;
      }
    }

    .tab-image-content {
      display: flex;
      align-items: center;
      gap: 45px;
      .image {
        position: relative;
        width: 50%;
        aspect-ratio: 1.2;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        button {
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }

      .content {
        width: 50%;    
      }
    }

    .tab-wysiwyg {
      p {
        max-width: 1000px;
      }
    }

    .tab-expanders {
      .dropdown-single {
        border-bottom: solid 1px #707070;
        margin-bottom: 25px;


        .dropdown-toggle {
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          padding-bottom: 25px;
          gap: 25px;

          h3 {
            margin: 0;
          }

          .toggle-indicator {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-right: 15px;
            
            p.toggle-text {
              color: white;
              margin: 0;
            }

            .toggle-icon {
              width: 15px;
              height: 15px;
              position: relative;


              .bar {
                width: 14px;
                height: 1px;
                background-color: var(--color-blue);
                position: absolute;
                top: 7px;
                transition: 0.2s;

                &:nth-child(2) {
                  transform: rotate(90deg);
                }
              }
            }
          }

          &.active {
            .toggle-indicator {
              .toggle-icon {
                .bar:nth-child(2) {
                  transform: none;
                }
              }
            }
          }
        }

        .dropdown-content {
          padding-right: 115px;
          p {
            max-width: 900px;
          }

          &.active {
            padding-bottom: 25px;
          }
        }
      }
    }

    .link-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 25px;
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;

    .content-wrapper {
      .heading {
        margin-bottom: 45px;
      }

      .tab-image-content {
        gap: 35px;

        .content {
          .link-wrapper {
            gap: 10px;
            margin-top: 25px;
          }
        }


      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 25px;

    .content-wrapper {
      .heading {

        .tabs {
          display: none;
        }

        .horizontal-select {
          display: flex; 
        }
      }

      .tab-image-content {
        flex-direction: column;
        max-width: 550px;
        margin: 0 auto;
        gap: 25px;

        .image {
          width: 100%;
        }

        .content {
          width: 100%;
        }
      }

      .tab-wysiwyg {

      }

      .tab-expanders {
        .dropdown-single {
          .dropdown-toggle {
            span {
              display: none;
            }
          }
          .dropdown-content {
            padding-right: 0;
          }
        }
      }
    }
  }
}

section.staff-bios {
  padding: 20px 20px 20px 20px;  
  max-width: 1920px;
  margin: 0 auto;
  
  .inner-wrapper {
    display: flex;
    .left {
      width: 55%;
      display: flex;
      justify-content: flex-end;

      .left-content-wrapper {
        max-width: 820px;
        padding-right: 225px;
        padding: 45px 20% 125px 35px;

        a.back-link {
          color: white;
          display: inline-block;
          margin-bottom: 45px;
          position: relative;
          left: 22px;

          img {
            transform: rotate(-180deg);
            position: absolute;
            left: -22px;
            top: 4px;
            transition: 0.4s;
          }

          &:hover {
            img {
              left: -27px;
            }
          }

          
        }

        .mobile-image-wrapper {
          display: none;
        }

        h4 {
          color: white;
        }

        h1 {
          color: white;
          margin-bottom: 15px;
        }

        .contact-wrapper {
          display: flex;
          gap: 60px;
          a {
            color: white;
            position: relative;
            img {
              position: absolute;
              right: -22px;
              top: 4px;
              transition: 0.4s;
            }

            &:hover {
              img {
                right: -27px;
              }
            }
          }
        }

        .text {
          color: white;
          margin-top: 25px;
        }
      }
    }

    .right {
      width: 45%;
      background-size: cover;
      background-position: center;
      position: relative;

      .image-wrapper {
        aspect-ratio: 1.25;
        max-width: 600px;
        top: 65px;
        left: -75px;
        position: relative;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center;
          border-top-left-radius: 100px;
          border-bottom-right-radius: 100px;
        }
      }


    }
  }

  @media (max-width: 1200px) {
    .inner-wrapper {
      .right {
        .image-wrapper {
          left: -35px;
        }
      }
    }
  }

  @media (max-width: 1024px) {
    margin-top: 0;
    padding: 0;
    .inner-wrapper {
      flex-direction: column;

      .left {
        width: 100%;
        justify-content: flex-start;

        .left-content-wrapper {
          padding: 25px 35px 65px;
          position: relative;
          width: 100%;
          max-width: none;

          .mobile-image-wrapper {
            display: block;
            margin-bottom: 25px;
            img {
              width: 100%;
              height: 100%;
              border-top-left-radius: 80px;
              border-bottom-right-radius: 80px;
              object-fit: cover;
              object-position: center;
            }
          }

          a.back-link {
            margin-bottom: 25px;
          }
        }
      }

      .right {
        display: none;
      }
    }
  }

  @media (max-width: 768px) {
    .inner-wrapper {
      gap: 0;
      .left {
        .left-content-wrapper {
          padding: 25px 25px 45px;
        }
      }

    }
  }
}

section.news-events-posts {
  padding: 85px 35px;
  position: relative;
  overflow: hidden;

  img.graphic-left {
    position: absolute;
    top: -10px;
    left: -10px;
    opacity: 0.2 !important;
    z-index: 0;
  }

  img.graphic-right {
    position: absolute;
    right: -45px;
    bottom: 45px;
    opacity: 0.2 !important;
    width: 345px;
    z-index: 0;
  }

  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;

    .heading {
      h2 {
        color: white;
        text-align: center;
        margin-bottom: 35px;
      }

      .tabs-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 35px;

        .tabs {
          display: flex;
          gap: 0;

          button {
            border: solid 1px white;
            color: white;
            width: 140px;
            cursor: pointer;

            &.active {
              background-color: white;
              color: var(--color-darkblue);
            }
          }
        }

        a.text-link {
          margin: 0;
        }
      }
    }

    .posts-wrapper {


      .tab-content {
        display: flex;
        gap: 45px;
        margin-top: 45px;
      }

      .featured-post {
        width: 50%;
        background-size: cover;
        background-position: center;
        position: relative;
        padding: 45px;
        display: flex;
        align-items: flex-end;
        margin: 0;

        &:before {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.3);
          z-index: 0;
        }

        .content {
          position: relative;
          z-index: 1;

          h3 {
            color: white;
          }

          p.text-link {
            margin: 0;
            &:after {
              margin-left: 10px;
            }
          }
        }
      }

      .post-list {
        width: 50%;
        .post-item {
          display: flex;
          gap: 45px;
          border-bottom: solid 1px white;
          padding-bottom: 15px;
          margin-bottom: 25px;

          .text {
            width: 75%;
            h4 {
              color: white;
            }
            
            p.text-link {
              margin: 0;
              &:after {
                margin-left: 10px;
              }
            }
          }

          .image {
            width: 25%;
            aspect-ratio: 1.5;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }
    }
  } 

  @media (max-width: 1024px) {
    padding: 65px 35px;

    img.graphic-left {
      display: none;
    }

    img.graphic-right {
      display: none;
    }

    .content-wrapper {
      .posts-wrapper {
        .featured-post {
          padding: 25px;
        }

        .tab-content {
          gap: 25px;          
        }

        .post-list {
          .post-item {
            .text {
              width: 100%;
            }

            .image {
              display: none;
            }
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    padding: 45px 0;

    .content-wrapper {
      .heading {
        padding: 0 25px;
        h2 {
          margin-bottom: 25px;
        }
        .tabs-wrapper {
          flex-direction: column;
          gap: 25px;
        }
      }
      .posts-wrapper {
        .tab-content {
          flex-direction: column;
          gap: 45px;
          .featured-post {
            width: 100%;
            min-height: 400px;
          }

          .post-list {
            width: 100%;
            padding: 0 25px;
            max-width: 450px;
            margin: 0 auto;
          }
        }
      }
    }
  }
}

section.hero-with-overview {
  padding: 20px;
  margin-top: -60px;

  .content-wrapper {
    display: flex;
    max-width: 1920px;
    margin: 0 auto;
    min-height: 800px;
    .left {
      width: 55%;
      display: flex;
      justify-content: flex-end;
      padding-left: 35px;

      .mobile-image {
        display: none;
      }

      .mobile-floating-card {
        display: none;
      }

      .content {
        max-width: 800px;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        z-index: 1;
        padding: 85px 0 65px;

        h1 {
          width: 125%;
        }

        .text {
          margin-bottom: 25px;
          padding-right: 250px;


        }
      }
    }

    .right {
      width: 45%;
      position: relative;
      background-size: cover;
      background-position: center;
      position: relative;

      &:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.95);
        z-index: 0;
      }

      .main-image {
        max-width: 750px;
        position: relative;
        width: 95%;
        top: 50%;
        transform: translateY(-50%);
        left: -10%;
      }

      img {
        border-top-left-radius: 100px;
        border-bottom-right-radius: 100px;
        z-index: 0;
        width: 100%;
      }


    }

    .floating-card {
      position: absolute;
      bottom: 0;
      right: 0;
      padding: 15px 20px;
      background-color: var(--color-darkblue);
      min-width: 400px;
      .content-wrapper {
        displaY: flex;
        gap: 20px;
        min-height: 0;
        align-items: center;

        .image {
          img {
            border-radius: 50%;
            width: 90px;
            height: 90px;
          }
        }

        .content {
          width: 66.66%;
          display: flex;
          flex-direction: column;
          justify-content: center;

          h5 {
            color: white;
            margin-bottom: 5px;
          }

          p {
            color: white;
          }

          a {
            margin: 0;
          }
        }
      }
    }
  }

  @media (max-width: 1200px) {
    .content-wrapper {
      .left {

        h4 {
          margin-bottom: 15px;
        }

        h1 {
          font-size: 42px;
          line-height: 48px;
          margin-bottom: 15px;
        }

        .content {
          .text {
            padding-right: 100px;
          }
        }


      }

      .right {
        .main-image {
          left: -5%;
        }
      }
    }
  }

  @media (max-width: 1100px) {
    padding: 0;
    margin-top: -65px;
    .content-wrapper {
      min-height: 0;
      .right {
        display: none;
      }

      .left {
        width: 100%;
        padding: 0 35px;
        justify-content: center;

        .content {
          max-width: 750px;
          padding: 85px 0 45px;

          h1 {
            width: 100%;
          }
          .mobile-image {
            display: block;
            max-width: 750px;
            margin: 0 auto 25px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: center;
              border-top-left-radius: 80px;
              border-bottom-right-radius: 80px;
            }
          }

          .mobile-floating-card {
            display: flex;
            position: relative;
            min-width: 0;
            margin: 25px 0;
            width: 100%;
            max-width: 350px;

            .content-wrapper {
              width: 100%;
              .image {
                width: 33.33%;
              }
              .content {
                padding: 0;
                width: 66.66%;
              }
            }
          }
        }
      }
    }
  }

  @media (max-width: 990px) {
    padding: 0;
    margin-top: -75px;
  }

  @media (max-width: 768px) {
    .content-wrapper {
      .left {
        padding: 0 25px;

        .content {
          .text {
            padding-right: 0;
          }
        }
      }
    }
  }
}

section.chart {
  padding: 85px 35px;
  .content-wrapper {
    max-width: 1300px;
    margin: 0 auto;

    .grid {
      border: solid 1px #707070;
      .grid-row {
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
        border-bottom: solid 1px #707070;

        &:last-of-type {
          border-bottom: none;
        }

        .grid-item {
          border-right: solid 1px #707070;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 15px 20px;
          font-size: 12px;
          font-weight: 800;
          color: #4A4848;
          text-align: center;

          &:nth-of-type(3) {
            border-right: none;
          }
        }
      }
    }
  }

  @media (max-width: 1024px) {
    padding: 65px 35px;
  }

  @media (max-width: 768px) {
    padding: 45px 25px;
    .content-wrapper {
      .grid {
        .grid-row {
          .grid-item {
            font-size: 10px;
            padding: 10px;
          }
        }
      }
    }
  }
}

section.alternate-hero {
  position: relative;
  padding: 125px 0 85px;
  margin-top: -40px;
  max-width: 1920px;
  margin: -40px auto 0;
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 800px);
    height: 100%;
    z-index: 0;
  }
  .content-wrapper {
    max-width: 1600px;
    margin: 0 auto;
    background-size: cover;
    position: relative;
    &:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.4);
      z-index: 0;
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative; 
      z-index: 1;
      min-height: 550px;
      padding: 85px 45px;


      h1 {
        color: white;
        text-align: center;
        margin-bottom: 20px;
      }

      h4 {
        color: white;
        text-align: center;
      }

      .text {
        color: white;
        max-width: 600px;
        text-align: center;
        margin-bottom: 15px;
      }
    }
  }

  @media (max-width: 1100px) {
    margin-top: 0;
    padding: 0;

    .content-wrapper {
      .content {
        margin-top: -65px;

        .text {
          margin-bottom: 0;
        }

        .text-link {
          margin: 45px 0 0;
        }
      }
    }



    &:before {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .content-wrapper {
      .content {
        padding: 95px 45px 45px; 

        .text-link {
          margin: 25px 0 0;
        }
      }
    }
  }
}