@charset "UTF-8";

#app #page-wrapper {
  position: relative;
}

#app #page-wrapper:has(.ts-left-sidebar-row table code):after,
#app #page-wrapper:has(.left-sidebar-row table code):after {
  content: "";
  inset: 0;
  position: absolute;
  background-color: #fff;
  z-index: 25;
}

#app #page-wrapper .ts-left-sidebar-row:has(.accordion-block) .ts-left-sidebar:first-child:has(table) .table-v2-block:not(:has(table tr:first-child td:first-child code)):before {
  content: "You should format the table cells as code from the CMS Page Options";
  display: block;
  margin-bottom: 0.5em;
  margin-top: 1em;
  color: #f00;
}

#app.custom-sections-loaded #page-wrapper:after {
  display: none;
}

.apptg-container {
  width: calc(85% - 40px);
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 767px) {
  .apptg-container {
    width: calc(100% - 40px);
  }
}

#app .pb-main-container .replaced-custom-section:has(.custom-full-width-section) {
  padding-left: 0;
  padding-right: 0;
  width: calc(100% + 30px);
  max-width: calc(100% + 30px);
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
}

#app .left-sidebar-row.replaced-custom-section:has(.custom-full-width-section),
#app .ts-left-sidebar-row.replaced-custom-section:has(.custom-full-width-section) {
  width: 100%;
  margin: 0 !important;
}

.replaced-custom-section .section-header {
  display: inline-flex;
  background-color: var(--primary-color);
  color: #fff;
  padding: 0.5em 0.75em;
  text-transform: uppercase;
}

.replaced-custom-section .page-button {
  display: inline-block;
  font-weight: 600;
  padding: 0.5em 1em;
  border: 1px solid var(--primary-color);
  text-decoration: none;
  transition: all 0.25s linear;
  border-radius: 4px;
  color: var(--primary-color) !important;
}

.replaced-custom-section .page-button:hover {
  background-color: var(--primary-color);
  color: #fff !important;
}

.block:has(.embed-block .select-section) {
  display: none;
}

/* ============= Filterable List START ============= */

#page-wrapper .filtered-list.replaced-custom-section {
  @media screen and (max-width: 480px) {
    width: calc(100% - 30px);
    max-width: calc(100% - 30px);
  }
}

.filterable-list {
  width: 100%;
  --border-radius: 12px;
  --side-padding: 20px;
  --card-width: 350px;

  @media screen and (max-width: 1400px) {
    --card-width: 300px;
    --side-padding: 15px;
  }



  .filterable-list__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    column-gap: 1.5%;
    margin-bottom: 1em;

    .quick-filter,
    .category-filter {
      border: 1px solid #818181;
      border-radius: var(--border-radius);
      padding: 8px 15px;
      font-size: 16px;
      margin-top: 5px;
      margin-bottom: 5px;
    }

    .clear-filters-button {
      cursor: pointer;
      border: 1px solid #939393;
      border-radius: var(--border-radius);
      transition: all .25s linear;
      padding: 8px 15px;
      margin-top: 5px;
      margin-bottom: 5px;

      &:hover {
        background-color: #8f8f8f;
        color: #fff;
      }
    }
  }

  .filterable-list__inner {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
    align-items: flex-start;
    column-gap: 1.5%;

  }

  &.is-filtering {
    .filterable-list__inner {
      grid-template-columns: repeat(auto-fit, minmax(0, var(--card-width)));

      @media screen and (max-width: 400px) {
        grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));

      }
    }
  }

  .card-item {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    margin-bottom: 12px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.15);


    .card-item__image {
      display: block;
      width: 100%;
      aspect-ratio: 2/1;

      .card-image {
        aspect-ratio: 2/1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;

        img {
          max-width: 100%;
          max-height: 100%;
        }
      }
    }

    .card-item__meta {
      padding: 15px var(--side-padding) 5px;
      display: flex;
      flex-wrap: wrap;
      column-gap: 8px;

      .card-category {
        font-size: 14px;
        background-color: #dadada;
        border-radius: 12px;
        padding: 5px 10px;
      }
    }

    .card-item__content {
      min-height: 190px;
      padding: 15px var(--side-padding);
    }

    .card-item__heading {
      margin-bottom: 0.5em;

      .card-heading {
        padding-top: 3px;
        padding-bottom: 3px;
      }
    }

    .card-item__desc {
      box-sizing: border-box;
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
      position: relative;
    }

    .card-item__desc.expanded {
      -webkit-line-clamp: unset;
      max-height: none;
    }

    .card-item__desc+.show-more-btn {
      margin-top: 0.5rem;
      cursor: pointer;
      color: var(--primary-color);
      font-weight: 700;
      background: none;
      border: none;
      padding: 0;
      font: inherit;
    }

    .card-item__button {
      flex-shrink: 0;
      margin-top: auto;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      .card-button {
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border: 2px solid var(--primary-color);
        background-color: var(--primary-color);
        color: #fff;
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        transition: all .25s linear;

        &:hover {
          background-color: #fff;
          color: var(--primary-color);
        }

        .card-button__title {
          color: inherit;
          font-size: 18px;
          font-weight: 700;
          padding: .75em;

        }
      }
    }
  }
}

/* ============= Filterable List END ============= */

/* ============= GRID START ============= */
.row.grid-list {
  padding-inline: 0;
  justify-content: center;
  margin-top: 40px;
  margin-bottom: 0;
}

.replaced-custom-section .grid {
  width: 100%;
  box-sizing: border-box;
  margin-top: 30px;
  margin-bottom: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  -moz-column-gap: 20px;
  column-gap: 20px;
}

@media only screen and (min-width: 1400px) {
  .replaced-custom-section .grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    -moz-column-gap: 25px;
    column-gap: 25px;
  }
}

@keyframes arrowSlide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(5px);
  }
}

.grid-element {
  color: #fff;
  height: 440px;
  position: relative;
  margin-bottom: 12px;
  margin-top: 12px;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

.grid-element:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.64) 37.5%);
}

.grid-element__image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.grid-element__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.grid-element__content {
  position: relative;
  z-index: 2;
  padding-top: auto;
  margin-top: auto;
  padding: 2em;
}

@media only screen and (max-width: 1200px) {
  .grid-element__content {
    padding: 1em;
  }
}

.grid-element__title {
  font-size: 2em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

@media only screen and (max-width: 1200px) {
  .grid-element__title {
    font-size: 1.5em;
  }
}

.grid-element__text {
  margin-top: 1em;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5;
}

.grid-element__buttons .custom-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  margin-top: 1em;
  padding-bottom: 0.75em;
  padding-top: 0.75em;
  border-bottom: 1px solid currentColor;
  transition: all 0.25s linear;
}

.grid-element__buttons .custom-button:after {
  content: "";
  display: block;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' %3E%3Cpath d='M7.60001 10.9494H4.29978L7.99437 7.28792H0.919556L0.919556 5.01077H7.99437L4.29978 1.34943L7.60001 1.34943L12.3667 6.14935L7.60001 10.9494Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' %3E%3Cpath d='M7.60001 10.9494H4.29978L7.99437 7.28792H0.919556L0.919556 5.01077H7.99437L4.29978 1.34943L7.60001 1.34943L12.3667 6.14935L7.60001 10.9494Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
  width: 0.85em;
  height: 0.85em;
}

.grid-element__buttons .custom-button:hover:after {
  animation: arrowSlide 0.6s ease infinite alternate;
}

.grid-element__buttons .custom-card {
  margin-top: 1em;
}

.grid-element__buttons .custom-card__headline {
  font-size: 1em;
}

.grid-element__buttons .custom-card__content a {
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  padding-bottom: 0.75em;
  padding-top: 0.75em;
  border-bottom: 1px solid currentColor;
  transition: all 0.25s linear;
}

.grid-element__buttons .custom-card__content a:after {
  content: "";
  display: block;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' %3E%3Cpath d='M7.60001 10.9494H4.29978L7.99437 7.28792H0.919556L0.919556 5.01077H7.99437L4.29978 1.34943L7.60001 1.34943L12.3667 6.14935L7.60001 10.9494Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' %3E%3Cpath d='M7.60001 10.9494H4.29978L7.99437 7.28792H0.919556L0.919556 5.01077H7.99437L4.29978 1.34943L7.60001 1.34943L12.3667 6.14935L7.60001 10.9494Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
  width: 0.85em;
  height: 0.85em;
}

.grid-element__buttons .custom-card__content a:hover:after {
  animation: arrowSlide 0.6s ease infinite alternate;
}

@media only screen and (max-width: 1400px) {
  #page .row.grid-list {
    padding-inline: clamp(1.25rem, -1.667rem + 4.762vw, 2.5rem);
    box-sizing: border-box;
    width: 100%;
  }
}

@media only screen and (max-width: 500px) {
  .replaced-custom-section .grid {
    display: block;
  }
}

/* ============= GRID END ============= */
/* ============= PREMIUM SPOTLIHGT START ============= */
.premium-spotlight {
  width: 100%;
  padding-top: 2em;
  padding-bottom: 2em;
  box-sizing: border-box;
  position: relative;
  --bottom-bar-height: 200px;
  --bottom-bar-bg-color: var(--primary-color);
  --bottom-bar-text-color: #fff;
}

.premium-spotlight * {
  box-sizing: border-box;
}

.premium-spotlight-title-row {
  width: 100%;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
  margin-bottom: 2em;
}

.premium-spotlight-list {
  z-index: 3;
}

.premium-spotlight-item-image {
  position: relative;
  transition: all 1s linear;
}

.premium-spotlight-item-image .image-wrapper {
  width: 100%;
  height: 585px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  cursor: pointer;
  position: relative;
  transition: all 1s linear;
  overflow: hidden;
}

@media only screen and (max-width: 600px) {
  .premium-spotlight-item-image .image-wrapper {
    height: 400px;
  }
}

.premium-spotlight-item-image .image-wrapper img {
  max-height: 200%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  transform: scale(0.75);
  transition: all 1s linear;
  display: block;
}

.premium-spotlight-item-image .activeClickedHack {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  display: none;
  cursor: pointer;
}

.premium-spotlight-item-details {
  color: var(--bottom-bar-text-color);
  text-align: center;
  max-width: calc(100% - 90px);
  margin-left: auto;
  margin-right: auto;
  height: var(--bottom-bar-height);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  transition: all 1s linear;
}

.premium-spotlight-item-name {
  font-size: 2em;
  font-weight: 700;
  margin-top: 0.25em;
  margin-bottom: 0.5em;
}

@media only screen and (max-width: 960px) {
  .premium-spotlight-item-name {
    font-size: 1.5em;
  }
}

.premium-spotlight-item-more {
  font-size: 1.2em;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  margin-top: 0.5em;
  text-decoration: none;
  color: var(--bottom-bar-bg-color);
  background-color: var(--bottom-bar-text-color);
  border: 2px solid var(--bottom-bar-text-color);
  cursor: pointer;
  transition: all 1s linear;
}

.premium-spotlight-item-more:hover {
  color: var(--bottom-bar-text-color);
  background-color: var(--bottom-bar-bg-color);
}

@media only screen and (max-width: 960px) {
  .premium-spotlight-item-more {
    font-size: 1em;
  }
}

.premium-spotlight-item-role {
  font-size: 1.4em;
  font-weight: 500;
  margin-bottom: 0.5em;
}

.premium-spotlight-item-role h1,
.premium-spotlight-item-role h2,
.premium-spotlight-item-role h3,
.premium-spotlight-item-role h4,
.premium-spotlight-item-role h5,
.premium-spotlight-item-role h6 {
  font-size: inherit !important;
  font-weight: inherit;
}

@media only screen and (max-width: 960px) {
  .premium-spotlight-item-role {
    font-size: 1.1em;
  }
}

.premium-spotlight-item-desc {
  width: 95%;
  max-height: 100%;
  font-size: 1.1em;
  text-align: center;
  padding: 0 1em;
  overflow: auto;
}

.premium-spotlight-item-desc::-webkit-scrollbar {
  width: 4px;
}

.premium-spotlight-item-desc::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.premium-spotlight-item-desc::-webkit-scrollbar-thumb {
  background: #a0a0a0;
  border-radius: 3px;
}

.premium-spotlight-item-desc::-webkit-scrollbar-thumb:hover {
  background: #888;
}

.premium-spotlight-item-desc p {
  padding-bottom: 0.75em;
  text-align: center !important;
}

.premium-spotlight-item__hidden-left {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100px;
  bottom: var(--bottom-bar-height);
  right: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

@media only screen and (max-width: 960px) {
  .premium-spotlight-item__hidden-left {
    display: none;
  }
}

.premium-spotlight-item__hidden-right {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100px;
  bottom: var(--bottom-bar-height);
  left: 100%;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.premium-spotlight-item .closeExpanded {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.3;
  display: none;
  z-index: 3;
}

.premium-spotlight-item .closeExpanded:after,
.premium-spotlight-item .closeExpanded:before {
  content: close-quote;
  position: absolute;
  left: 15px;
  height: 33px;
  width: 2px;
  background-color: #333;
}

.premium-spotlight-item .closeExpanded:before {
  transform: rotate(45deg);
}

.premium-spotlight-item .closeExpanded:after {
  transform: rotate(-45deg);
}

.premium-spotlight .custom-swiper-controls {
  height: 0;
  bottom: 0;
  display: block;
  color: var(--bottom-bar-text-color);
  margin-top: 0;
}

.premium-spotlight .custom-swiper-controls .custom-swiper-navigation {
  margin-top: 0;
}

.premium-spotlight .custom-swiper-controls .custom-swiper-pagination {
  display: none;
}

.premium-spotlight .custom-swiper-controls .premium-spotlight-button-play-pause-0 {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 60px;
  bottom: calc(var(--bottom-bar-height) / 2 - 30px);
  background-color: transparent;
}

@media only screen and (max-width: 960px) {
  .premium-spotlight .custom-swiper-controls .premium-spotlight-button-play-pause-0 {
    display: none;
  }
}

.premium-spotlight .custom-swiper-controls .premium-spotlight-button-prev-0 {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 0;
  bottom: calc(var(--bottom-bar-height) / 2 - 30px);
}

@media only screen and (max-width: 960px) {
  .premium-spotlight .custom-swiper-controls .premium-spotlight-button-prev-0 {
    width: 40px;
    height: 40px;
    bottom: calc(var(--bottom-bar-height) / 2 - 20px);
  }
}

.premium-spotlight .custom-swiper-controls .premium-spotlight-button-next-0 {
  width: 60px;
  height: 60px;
  position: absolute;
  left: unset;
  right: 0;
  bottom: calc(var(--bottom-bar-height) / 2 - 30px);
}

@media only screen and (max-width: 960px) {
  .premium-spotlight .custom-swiper-controls .premium-spotlight-button-next-0 {
    width: 40px;
    height: 40px;
    bottom: calc(var(--bottom-bar-height) / 2 - 20px);
  }
}

.premium-spotlight-list-area {
  position: relative;
}

.premium-spotlight-list-area:after {
  content: close-quote;
  display: block;
  position: absolute;
  width: 100%;
  height: var(--bottom-bar-height);
  bottom: 0;
  left: 0;
  background-color: var(--bottom-bar-bg-color);
  z-index: 1;
}

.premium-spotlight-list-area:before {
  content: close-quote;
  display: block;
  position: absolute;
  width: 100%;
  height: var(--bottom-bar-height);
  bottom: 0;
  left: 0;
  background-image: url(https://cmsv2-shared-assets.apptegy.net/Schools/Socorro-ISD-3783/Images/bar-icons-pattern.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.15;
  z-index: 2;
}

.premium-spotlight-list-area .swiper-slide-active .premium-spotlight-item-image img {
  transform: scale(1);
}

.premium-spotlight-list-area .swiper-slide-active .premium-spotlight-item-image .activeClickedHack {
  display: block;
}

.premium-spotlight-list-area .swiper-slide-active .premium-spotlight-item-details {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

@media only screen and (min-width: 959px) {
  .premium-spotlight-list-area .swiper-slide-active.view-all-slide .premium-spotlight-item-image img {
    max-height: 100%;
  }
}

.premium-spotlight-list-area .swiper-slide-active.view-all-slide .premium-spotlight-item__hidden-left {
  opacity: 1;
  visibility: visible;
  height: calc(100% - var(--bottom-bar-height));
  transition: all 1s linear;
}

.premium-spotlight-list-area .swiper-slide-active.view-all-slide .premium-spotlight-item__hidden-left .premium-spotlight-item-more {
  color: var(--bottom-bar-text-color);
  background-color: var(--bottom-bar-bg-color);
  border-color: var(--bottom-bar-bg-color);
}

.premium-spotlight-list-area .swiper-slide-active.view-all-slide .premium-spotlight-item__hidden-left .premium-spotlight-item-more:hover {
  color: var(--bottom-bar-bg-color);
  background-color: var(--bottom-bar-text-color);
}

.premium-spotlight-list-area .swiper-slide-active.view-all-slide .premium-spotlight-item__hidden-right {
  opacity: 1;
  visibility: visible;
  height: calc(100% - var(--bottom-bar-height));
  transition: all 1s linear;
}

@media only screen and (max-width: 960px) {
  .premium-spotlight-list-area .swiper-slide-active.view-all-slide .premium-spotlight-item__hidden-right {
    height: 400px;
    background-color: #fff;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
  }

  .premium-spotlight-list-area .swiper-slide-active.view-all-slide .premium-spotlight-item__hidden-right .premium-spotlight-item-desc {
    width: 100%;
    max-height: 500px;
    font-size: 15px;
  }
}

.premium-spotlight-list-area .swiper-slide-active.view-all-slide .premium-spotlight-item .closeExpanded {
  display: block;
  cursor: pointer;
}

@media only screen and (min-width: 959px) {
  .premium-spotlight-list-area .swiper-slide-active.view-all-slide .premium-spotlight-item-details {
    opacity: 0;
    visibility: hidden;
  }
}

.premium-spotlight-list-area .premium-spotlight-list:has(.view-all-slide) .swiper-slide.view-all-slide {
  z-index: 5;
}

.premium-spotlight-list-area .premium-spotlight-list:has(.view-all-slide) .swiper-slide:not(.view-all-slide) {
  position: relative;
  z-index: 1;
}

.premium-spotlight-list-area .premium-spotlight-list:has(.view-all-slide) .swiper-slide:not(.view-all-slide) .premium-spotlight-item-image {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}

/* ============= PREMIUM SPOTLIHGT END ============= */
/* ============= RESOURCES START ============= */
.replaced-custom-section.resources {
  margin-top: 30px;
  margin-bottom: 30px;
  padding-inline: 0;
  overflow: hidden;
}

.replaced-custom-section .resources-container {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  -moz-column-gap: 3vw;
  column-gap: 3vw;
}

.resources__l {
  width: 48%;
}

.resources__l .section-image {
  display: block;
}

.resources__l img {
  width: 100%;
  max-height: 650px;
  -o-object-fit: cover;
  object-fit: cover;
}

.resources__r {
  width: 48%;
  position: relative;
  isolation: isolate;
}

.resources__r:after {
  content: "";
  display: block;
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  right: -10%;
  background-image: var(--watermark-url);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  opacity: 0.1;
}

.resources__list {
  padding: 1.5em;
  border: 1px solid #efefef;
}

.resources__more {
  margin-top: 15px;
}

.resource .accordion-panel a,
.resource .resource__button a {
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  padding-bottom: 0.75em;
  padding-top: 0.75em;
  border-bottom: 1px solid #efefef;
  box-sizing: border-box;
  transition: all 0.25s linear;
  font-family: var(--family-primary);
}

.resource .accordion-panel a:hover,
.resource .resource__button a:hover {
  color: var(--primary-color);
}

.resource .accordion-panel a:after,
.resource .resource__button a:after {
  content: "";
  display: block;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' %3E%3Cpath d='M7.60001 10.9494H4.29978L7.99437 7.28792H0.919556L0.919556 5.01077H7.99437L4.29978 1.34943L7.60001 1.34943L12.3667 6.14935L7.60001 10.9494Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' %3E%3Cpath d='M7.60001 10.9494H4.29978L7.99437 7.28792H0.919556L0.919556 5.01077H7.99437L4.29978 1.34943L7.60001 1.34943L12.3667 6.14935L7.60001 10.9494Z'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--primary-color);
  width: 0.85em;
  height: 0.85em;
}

.resource .accordion-panel a:hover:after,
.resource .resource__button a:hover:after {
  animation: arrowSlide 0.6s ease infinite alternate;
}

.resource .accordion-panel a {
  padding-left: 10px;
}

@media only screen and (max-width: 1400px) {
  #page .replaced-custom-section.resources {
    padding-inline: clamp(1.25rem, -1.667rem + 4.762vw, 2.5rem);
    box-sizing: border-box;
    width: 100%;
  }
}

@media only screen and (max-width: 760px) {
  .replaced-custom-section .resources-container {
    flex-direction: column;
    gap: 20px;
  }

  .replaced-custom-section .resources-container .resources__l,
  .replaced-custom-section .resources-container .resources__r {
    width: 100%;
  }
}

/* ============= RESOURCES END ============= */
/* ============= HERO IMAGE START ============= */
.row:has(.hero-section) .column {
  padding: 0;
}

.row:has(.hero-section) .block {
  margin-bottom: 0;
}

#page .row:has(.hero-section) .image-container+p {
  border: 0;
  padding: 0;
  margin: 0;
}

/* ============= HERO IMAGE END ============= */
/* ============= INTRO START ============= */
.row.top-intro {
  margin-bottom: 0;
}

.replaced-custom-section .intro-section {
  width: 100%;
}

.intro__header {
  margin-bottom: 25px;
}

.intro__header h4,
.intro__header h4 span {
  font-size: 20px;
  line-height: 1.1;
  font-family: var(--family-bold);
  color: var(--primary-color);
}

.intro__header h1,
.intro__header h1 span {
  font-size: clamp(2.375rem, -1.875rem + 5.313vw, 4.5rem);
  /* 40>72, 1280>1920 */
  line-height: 1.2;
  font-family: var(--family-bold);
}

.replaced-custom-section .intro__button {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.replaced-custom-section .intro__button a {
  background-color: var(--primary-color);
  color: #fff !important;
  width: -moz-fit-content !important;
  width: fit-content !important;
  align-items: center !important;
}

.replaced-custom-section .intro__button a::after {
  margin-bottom: 0 !important;
}

.replaced-custom-section .intro__button a span {
  font-family: var(--family-secondary);
}

.intro-title-button {
  margin-bottom: 25px;
}

.text-intro {
  max-width: 1175px;
  margin-inline: auto;
  margin-bottom: 25px;
}

.text-intro p span {
  font-size: clamp(1.125rem, 0rem + 1.875vw, 1.875rem) !important;
}

.intro__links {
  max-width: 1175px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.intro__links .links-column {
  flex-grow: 1;
  width: 100%;
}

.replaced-custom-section .btn-row-arrow {
  min-height: var(--button-height);
  text-decoration: none;
  align-items: center;
  vertical-align: text-bottom;
  font-size: var(--button-size);
  line-height: var(--button-size);
  display: flex;
  border-radius: 0px;
  border: none;
  border-bottom: solid 1px #ececec;
  padding: 16px 0px;
  gap: 16px;
  justify-content: space-between;
  width: 100%;
  font-family: var(--family-primary);
  color: var(--color-black) !important;
  font-weight: 500;
  position: relative;
  background-color: transparent;
}

.replaced-custom-section .btn-row-arrow::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: var(--primary-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.87498 12H4.7497L9.36793 7.42312L0.524415 7.42312L0.524414 4.57668L9.36793 4.57668L4.7497 8.59648e-07L8.87498 0L14.8333 5.9999L8.87498 12Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.87498 12H4.7497L9.36793 7.42312L0.524415 7.42312L0.524414 4.57668L9.36793 4.57668L4.7497 8.59648e-07L8.87498 0L14.8333 5.9999L8.87498 12Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat no-repeat;
  mask-repeat: no-repeat no-repeat;
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.2s ease;
}

.replaced-custom-section .btn-row-arrow:hover {
  color: var(--color-primary) !important;
  border-color: var(--color-primary);
}

.replaced-custom-section .btn-row-arrow:hover::after {
  transform: translatex(3px);
}

@media only screen and (min-width: 960px) {
  .intro-title-button {
    display: flex;
    justify-content: space-between;
    margin-bottom: 45px;
  }

  .intro-title-button .intro__header {
    width: 60%;
  }

  .intro-title-button .intro__button {
    width: 40%;
  }

  .intro__links {
    flex-direction: row;
    gap: calc(var(--column-gap) * 2);
  }

  .intro__links .links-column {
    width: calc(50% - var(--column-gap));
  }
}

@media screen and (min-width: 1280px) {
  .row.top-intro {
    margin-top: -80px;
    background-color: #fff;
    position: relative;
    padding-top: 70px;
  }

  .intro__header h4 {
    font-size: 22px;
  }

  .text-intro {
    margin-bottom: 45px;
  }
}

@media only screen and (max-width: 760px) {
  #page .row.top-intro {
    padding-inline: 25px;
  }
}

/* ============= INTRO END ============= */
/* ============= TEXT IMAGE START ============= */
.row:has(.banner-title) .block:first-child .heading-block>div>* {
  display: inline;
  padding: 8px 16px 6px;
  background-color: var(--color-primary);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: #fff;
  mix-blend-mode: multiply;
  text-transform: uppercase;
}

.row:has(.text-image-v1) .column {
  padding: 0;
}

@media only screen and (min-width: 1280px) {
  .row:has(.text-image-v1) .column:first-child {
    padding-left: 65px;
  }

  .row:has(.text-image-v1) .column:first-child .block {
    overflow: visible;
  }

  .row:has(.text-image-v1) .column:first-child .heading-block {
    margin-left: -65px;
  }
}

@media only screen and (min-width: 1400px) {
  .row:has(.text-image-v1) .column:first-child {
    padding-left: 90px;
  }

  .row:has(.text-image-v1) .column:first-child .heading-block {
    margin-left: -90px;
  }
}

@media only screen and (max-width: 860px) {
  #page .row:has(.text-image-v1) {
    padding-inline: 20px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 20px;
  }

  #page .row:has(.text-image-v1) .column {
    margin: 0;
    width: 100%;
  }
}

/* ============= TEXT IMAGE END ============= */
/* ============= SPOTLIGHT START ============= */
#page .spotlight.replaced-custom-section {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
}

#page .spotlight.replaced-custom-section .spotlight-container {
  max-width: 1920px;
  width: 85%;
  margin: 0 auto;
}

#page .spotlight.replaced-custom-section .block {
  overflow: visible;
}

#page .spotlight.replaced-custom-section .swiper {
  overflow: visible;
}

#page .spotlight.replaced-custom-section .spotlight-slide .spotlight-image {
  height: auto;
}

#page .spotlight.replaced-custom-section .spotlight-slide .spotlight-image img {
  margin-inline: auto;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top center;
  object-position: top center;
}

#page .spotlight.replaced-custom-section .spotlight-block cite p {
  margin: 6px 0;
}

#page .spotlight.replaced-custom-section .spotlight-block cite p:nth-child(1) {
  width: 100%;
}

#page .spotlight.replaced-custom-section .swiper-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 35px;
}

#page .spotlight.replaced-custom-section .swiper-nav .swiper-button-prev,
#page .spotlight.replaced-custom-section .swiper-nav .swiper-button-next {
  position: relative;
  inset: 0;
  background-color: var(--primary-color);
  margin: 0;
}

#page .spotlight.replaced-custom-section .swiper-nav .swiper-button-prev img,
#page .spotlight.replaced-custom-section .swiper-nav .swiper-button-next img {
  filter: invert(1);
}

#page .spotlight.replaced-custom-section .spotlight-slide {
  display: flex;
  flex-direction: column-reverse;
}

#page .spotlight.replaced-custom-section #spotlight-slider {
  padding-top: 30px;
}

#page .spotlight.replaced-custom-section #spotlight-slider .swiper {
  overflow: visible;
}

#page .spotlight.replaced-custom-section .spotlight-block {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  color: #333;
  height: auto;
  clear: both;
  padding: 24px 0px 0px;
  border-top: solid 6px var(--color-primary);
  flex-direction: column;
  justify-content: center;
  flex: 1;
  font-size: 14px;
  color: #333;
}

#page .spotlight.replaced-custom-section .spotlight-block p {
  font-size: clamp(1rem, 0.708rem + 0.476vw, 1.125rem);
  line-height: 1.3;
  font-weight: 400;
  white-space: pre-wrap;
}

#page .spotlight.replaced-custom-section .spotlight-block blockquote {
  margin-bottom: 16px;
  font-style: italic;
}

#page .spotlight.replaced-custom-section .spotlight-block cite {
  position: relative;
  padding-bottom: 5px !important;
  line-height: 1.1;
  padding-top: 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: auto;
}

#page .spotlight.replaced-custom-section .spotlight-block cite::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 40px;
  background: #ececec;
}

#page .spotlight.replaced-custom-section .spotlight-block cite p {
  font-family: var(--family-semibold);
  display: inline-block;
  font-size: 14px;
}

#page .spotlight.replaced-custom-section .spotlight-block cite .divider {
  width: 4px;
  height: 4px;
  border: 0;
  top: 0;
  background-color: var(--color-primary);
  margin: 0px 8px;
}

#page .spotlight.replaced-custom-section .spotlight-title,
#page .spotlight.replaced-custom-section .spotlight-text {
  min-width: 100%;
  box-sizing: border-box;
}

#page .spotlight.replaced-custom-section .spotlight-title {
  color: var(--primary-color);
  margin-bottom: 15px;
}

#page .spotlight.replaced-custom-section .spotlight-title h3 {
  font-size: var(--heading-h4-size);
  margin-bottom: 5px;
}

#page .spotlight.replaced-custom-section .spotlight-title .subtitle>* {
  font-size: 16px;
  font-family: var(--family-bold);
}

#page .spotlight.replaced-custom-section .spotlight-title .subtitle>* span {
  font-family: var(--family-bold);
}

#page .spotlight.replaced-custom-section .spotlight-block:has(blockquote) {
  position: relative;
  isolation: isolate;
}

#page .spotlight.replaced-custom-section .spotlight-block:has(blockquote)::before,
#page .spotlight.replaced-custom-section .spotlight-block:has(blockquote)::after {
  box-sizing: border-box;
  position: absolute;
  top: -20px;
  left: -20px;
  width: 50px;
  height: 50px;
  display: block;
  content: "";
}

#page .spotlight.replaced-custom-section .spotlight-block:has(blockquote)::before {
  background-color: var(--primary-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.1685 0C6.96475 0 1.125 5.83978 1.125 13.0435V27.3918H3.7337H15.4728H18.0815V24.7831V13.0448V10.436H15.4728H6.78725C7.86125 7.39576 10.7605 5.21739 14.1685 5.21739V0ZM24.6032 24.7831V13.0435C24.6032 5.83978 30.4431 0 37.6468 0V5.21739C34.2388 5.21739 31.3394 7.39576 30.2654 10.436H38.9511H41.5597V13.0448V24.7831V27.3918H38.9511H27.212H24.6032V24.7831ZM35.038 45.6535V46.9565C35.038 54.1602 29.1982 60 21.9946 60V54.7826C25.4021 54.7826 28.3011 52.6048 29.3753 49.5652H20.6903H18.0815V46.9565V35.2179V32.6092H20.6903H32.4293H35.038V45.6535ZM58.5163 45.6522V46.9565C58.5163 54.1602 52.6765 60 45.4728 60V54.7826C48.8803 54.7826 51.7793 52.6048 52.8536 49.5652H44.1685H41.5597V46.9565V35.2179V32.6092H44.1685H55.9076H58.5163V45.6522Z' fill='%23582C82'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.1685 0C6.96475 0 1.125 5.83978 1.125 13.0435V27.3918H3.7337H15.4728H18.0815V24.7831V13.0448V10.436H15.4728H6.78725C7.86125 7.39576 10.7605 5.21739 14.1685 5.21739V0ZM24.6032 24.7831V13.0435C24.6032 5.83978 30.4431 0 37.6468 0V5.21739C34.2388 5.21739 31.3394 7.39576 30.2654 10.436H38.9511H41.5597V13.0448V24.7831V27.3918H38.9511H27.212H24.6032V24.7831ZM35.038 45.6535V46.9565C35.038 54.1602 29.1982 60 21.9946 60V54.7826C25.4021 54.7826 28.3011 52.6048 29.3753 49.5652H20.6903H18.0815V46.9565V35.2179V32.6092H20.6903H32.4293H35.038V45.6535ZM58.5163 45.6522V46.9565C58.5163 54.1602 52.6765 60 45.4728 60V54.7826C48.8803 54.7826 51.7793 52.6048 52.8536 49.5652H44.1685H41.5597V46.9565V35.2179V32.6092H44.1685H55.9076H58.5163V45.6522Z' fill='%23582C82'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat no-repeat;
  mask-repeat: no-repeat no-repeat;
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-size: calc(100% - 20px);
  mask-size: calc(100% - 20px);
  z-index: -1;
}

#page .spotlight.replaced-custom-section .spotlight-block:has(blockquote)::after {
  content: "";
  position: absolute;
  z-index: -2;
  background-color: #fff;
}

#page .spotlight.replaced-custom-section .view-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
}

@media screen and (min-width: 1401px) {
  #page .spotlight.replaced-custom-section .spotlight-slide {
    flex-direction: row;
  }

  #page .spotlight.replaced-custom-section .spotlight-slide .spotlight-image {
    height: auto;
    width: 300px;
    max-width: 40%;
  }

  #spotlight-slider .swiper-wrapper {
    align-items: stretch;
  }

  #page .spotlight.replaced-custom-section .spotlight-block {
    border-left: solid 6px var(--color-primary);
    border-top: solid 1px #ececec;
    padding: 45px;
  }

  #page .spotlight.replaced-custom-section .spotlight-block:has(.spotlight-title) {
    display: block;
  }

  #page .spotlight.replaced-custom-section .spotlight-block:has(blockquote)::before,
  #page .spotlight.replaced-custom-section .spotlight-block:has(blockquote)::after {
    top: -30px;
    left: -30px;
    width: 90px;
    height: 90px;
  }

  #page .spotlight.replaced-custom-section .spotlight-block:has(blockquote)::before {
    -webkit-mask-size: calc(100% - 30px);
    mask-size: calc(100% - 30px);
  }
}

@media only screen and (max-width: 1400px) {
  #page .spotlight.replaced-custom-section .spotlight-container {
    padding-inline: clamp(1.25rem, -1.667rem + 4.762vw, 2.5rem);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }
}

@media only screen and (max-width: 450px) {
  .replaced-custom-section .section-header h2 {
    font-size: 30px;
  }
}

/* ============= SPOTLIGHT END ============= */
/* ============= TESTIMONIALS START ============= */
.testimonials-area {
  width: 100%;
  position: relative;
  color: var(--text-color, #fff);
  background-color: var(--bg-color, var(--primary-color));
  isolation: isolate;
  --quote-font-size: 2em;
  --box-shadow-in-spread: 20px;
}

@media only screen and (max-width: 1500px) {
  .testimonials-area {
    --quote-font-size: 1.65em;
    --box-shadow-in-spread: 25px;
  }
}

@media only screen and (max-width: 1200px) {
  .testimonials-area {
    --quote-font-size: 1.4em;
    --box-shadow-in-spread: 20px;
  }
}

@media only screen and (max-width: 960px) {
  .testimonials-area {
    --quote-font-size: 1.2em;
    --box-shadow-in-spread: 10px;
  }
}

@media only screen and (max-width: 600px) {
  .testimonials-area {
    --box-shadow-in-spread: 6px;
  }
}

.testimonials-area .testimonials-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.testimonials-area .testimonials-background img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.testimonials-area .testimonials-list {
  margin-top: 30px;
}

.testimonials-area .testimonial-item {
  margin-top: 0.5em;
  margin-bottom: 2.5em;
}

.testimonials-area .testimonials-area-inner {
  padding-top: 75px;
  padding-bottom: 50px;
}

.testimonials-section-title {
  font-size: 1.5em;
}

.testimonials-area .testimonials-list-area:has(.testimonial-card--box-shadow) {
  width: calc(100% + var(--box-shadow-in-spread) * 2);
  margin-left: calc(-1 * var(--box-shadow-in-spread));
}

.testimonials-area .testimonials-list-area:has(.testimonial-card--box-shadow) .custom-swiper-controls {
  padding-left: var(--box-shadow-in-spread);
}

.testimonials-area .testimonial-card {
  background-color: #fff;
  color: var(--primary-color);
  display: flex;
  border-radius: 15px;
  overflow: hidden;
  max-width: calc(100% - var(--box-shadow-in-spread) * 2);
  margin-left: auto;
  margin-right: auto;
}

.testimonials-area .testimonial-card--box-shadow {
  margin-top: 1em;
  margin-bottom: 1em;
  box-shadow: 0px 0px var(--box-shadow-in-spread) 0px rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 960px) {
  .testimonials-area .testimonial-card {
    flex-wrap: wrap;
  }
}

.testimonials-area .testimonial-card__image {
  order: 1;
  width: 40%;
  height: 500px;
}

@media only screen and (max-width: 1500px) {
  .testimonials-area .testimonial-card__image {
    height: 450px;
  }
}

@media only screen and (max-width: 1200px) {
  .testimonials-area .testimonial-card__image {
    height: 400px;
  }
}

@media only screen and (max-width: 960px) {
  .testimonials-area .testimonial-card__image {
    width: 100%;
  }
}

@media only screen and (max-width: 767px) {
  .testimonials-area .testimonial-card__image {
    height: 320px;
  }
}

@media only screen and (max-width: 600px) {
  .testimonials-area .testimonial-card__image {
    height: 275px;
  }
}

.testimonials-area .testimonial-card__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.testimonials-area .testimonial-card__main {
  width: 60%;
  order: 0;
  padding: 1.5em 2em 1.5em calc(var(--quote-font-size) * 2.25);
  gap: 1.5em;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
}

@media only screen and (max-width: 960px) {
  .testimonials-area .testimonial-card__main {
    width: 100%;
    padding: 1em;
  }
}

.testimonials-area .testimonial-card__main:before {
  content: "";
  display: block;
  width: calc(var(--quote-font-size) * 1.25);
  height: calc(var(--quote-font-size) * 1.25);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21.301 4c.411 0 .699.313.699.663 0 .248-.145.515-.497.702-1.788.948-3.858 4.226-3.858 6.248 3.016-.092 4.326 2.582 4.326 4.258 0 2.007-1.738 4.129-4.308 4.129-3.24 0-4.83-2.547-4.83-5.307 0-5.98 6.834-10.693 8.468-10.693zm-10.833 0c.41 0 .699.313.699.663 0 .248-.145.515-.497.702-1.788.948-3.858 4.226-3.858 6.248 3.016-.092 4.326 2.582 4.326 4.258 0 2.007-1.739 4.129-4.308 4.129-3.241 0-4.83-2.547-4.83-5.307 0-5.98 6.833-10.693 8.468-10.693z' fill-rule='nonzero'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m21.301 4c.411 0 .699.313.699.663 0 .248-.145.515-.497.702-1.788.948-3.858 4.226-3.858 6.248 3.016-.092 4.326 2.582 4.326 4.258 0 2.007-1.738 4.129-4.308 4.129-3.24 0-4.83-2.547-4.83-5.307 0-5.98 6.834-10.693 8.468-10.693zm-10.833 0c.41 0 .699.313.699.663 0 .248-.145.515-.497.702-1.788.948-3.858 4.226-3.858 6.248 3.016-.092 4.326 2.582 4.326 4.258 0 2.007-1.739 4.129-4.308 4.129-3.241 0-4.83-2.547-4.83-5.307 0-5.98 6.833-10.693 8.468-10.693z' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-color: var(--primary-color);
  position: absolute;
  left: 15px;
  top: 30px;
}

@media only screen and (max-width: 960px) {
  .testimonials-area .testimonial-card__main:before {
    display: block;
    position: static;
  }
}

.testimonials-area .testimonial-card__headline {
  order: 2;
}

.testimonials-area .testimonial-card__content {
  order: 1;
  font-size: var(--quote-font-size);
  font-family: var(--secondary-font);
  font-weight: 300;
  font-style: italic;
  line-height: 1.5;
}

.testimonials-area .custom-swiper-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  -moz-column-gap: 30px;
  column-gap: 30px;
}

.testimonials-area .custom-swiper-navigation {
  position: relative;
  z-index: 11;
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
}

@media only screen and (max-width: 600px) {
  .testimonials-area .custom-swiper-navigation {
    width: 100%;
  }
}

.testimonials-area .custom-swiper-pagination {
  display: inline-flex;
  width: auto;
}

@media only screen and (max-width: 600px) {
  .testimonials-area .custom-swiper-pagination {
    display: flex;
    width: 100%;
  }
}

.testimonials-area.v2 {
  background-color: #fff;
  color: #000;
}

.testimonials-area.v2 .testimonials-background {
  display: none;
}

.testimonials-area .custom-swiper-play-pause-btn {
  --control-button-bg-color: transparent;
  /* --control-buttons-size: 46px; */
}

/* ============= TESTIMONIALS END ============= */
/* ============= FLIP CARDS START ============= */
#page {
  .flip-cards-area {
    width: 100%;
    background-color: var(--bg-color, #dadada);
    color: var(--text-color, #000);
    box-sizing: border-box;
    padding-top: 50px;
    padding-bottom: 20px;
  }

  .flip-cards-section-title {
    text-align: center;
    font-size: 1.5em;
  }

  .flip-cards-area .header-slot-container h2 {
    color: var(--primary-color);
  }

  .flip-cards-list {
    margin: 2em auto 1em;
  }

  .flip-cards-list.swiper-initialized {
    max-width: 1580px;
    width: 95%;
  }

  .flip-cards-list .swiper-slide {
    box-sizing: border-box;
    padding-inline: 15px;
  }

  .flip-cards-list:not(.swiper-initialized) .swiper-slide {
    width: auto;
    flex: 1;
    min-width: 220px;
  }

  .flip-cards-list:not(.swiper-initialized) .flip-cards-loop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    justify-content: center;
    -moz-column-gap: 3%;
    column-gap: 3%;
    margin-top: 3em;
  }

  .flip-card {
    background-color: transparent;
    width: 100%;
    max-width: 215px;
    height: 315px;
    /* border: 1px solid #f1f1f1; */
    perspective: 1000px;
    box-sizing: border-box;
    margin-inline: auto;
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }

  .flip-card {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
  }

  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }

  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 5px solid var(--secondary-color);
    box-sizing: border-box;
  }

  .flip-card-title {
    text-transform: uppercase;
    word-break: break-word;
  }

  .flip-card-front {
    background-color: var(--front-bg-color, var(--primary-color));
    border: 5px solid var(--front-border-color, var(--secondary-color));
    color: var(--front-text-color, #fff);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10% 15px;
  }

  .flip-card-icon svg {
    fill: #fff;
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    margin: auto;
  }

  .flip-card-icon .icon-wrap {
    margin: auto;
    display: block;
  }

  .flip-card-back {
    background-color: var(--secondary-color);
    color: #000;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 5px solid var(--primary-color);
  }

  .flip-cards-area .custom-swiper-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    -moz-column-gap: 30px;
    column-gap: 30px;
  }

  @media only screen and (max-width: 767px) {
    .flip-cards-area .custom-swiper-controls {
      justify-content: center;
    }
  }

  .flip-cards-area .custom-swiper-navigation {
    width: 100%;
    position: relative;
    z-index: 11;
    margin-top: 0;
    margin-bottom: 5px;
    display: flex;
    justify-content: center;
  }

  .flip-cards-area .custom-swiper-navigation:has(.swiper-button-disabled + .swiper-button-disabled) {
    display: none;
  }

  .flip-cards-area .custom-swiper-pagination {
    display: flex;
    width: auto;
  }

  .flip-cards-area.v2 .flip-card-front {
    background-color: var(--front-bg-color, var(--secondary-color));
    border: 5px solid var(--front-border-color, var(--primary-color));
    color: var(--front-text-color, var(--secondary-color-contrast));
  }

  .flip-cards-area.v2 .flip-card-icon svg {
    fill: var(--front-text-color, var(--secondary-color-contrast));
  }

  .flip-cards-area.v2 .flip-card-back {
    background-color: var(--back-bg-color, var(--primary-color));
    color: var(--back-text-color, #fff);
  }

  .flip-cards-area.v3 .flip-card-back {
    background-color: var(--back-bg-color, #fafafa);
    color: var(--back-text-color, #000);
    border-color: var(--back-border-color, var(--secondary-color));
  }
}


/* ============= FLIP CARDS END ============= */
/* ============= Call to Action (CTA) START ============= */
.cta-area {
  width: 100%;
  position: relative;
  isolation: isolate;
  color: var(--cta-text-color, #fff);
}

.cta-area:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: var(--cta-mask-color, #000);
  opacity: var(--mask-opacity, 0.65);
  z-index: -1;
}

.cta-area-inner {
  padding-top: 125px;
  padding-bottom: 125px;
  text-align: center;
}

@media only screen and (max-width: 960px) {
  .cta-area-inner {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

@media only screen and (max-width: 600px) {
  .cta-area-inner {
    padding-top: 75px;
    padding-bottom: 75px;
  }
}

.cta-title-row {
  padding-bottom: 1em;
}

.cta-text-area {
  padding-top: 1em;
  padding-bottom: 1em;
}

.cta-text {
  line-height: 1.4;
}

.cta-area .cta-buttons {
  padding-top: 1em;
  padding-bottom: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.cta-area .cta-buttons .cta-button {
  display: inline-block;
  color: inherit;
  border: 1px solid currentColor;
  padding: 0.75em 2em;
  text-decoration: none;
  border-radius: 2em;
  transition: all 0.25s linear;
}

.cta-area .cta-buttons .cta-button:hover {
  color: var(--cta-inverse-color, #000);
  background-color: var(--cta-text-color, #fff);
}

.cta-bg-image {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.cta-bg-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

/* ============= Call to Action (CTA) END ============= */
/* ============= Strategic Plan START ============= */
.row:nth-child(even):has(.diagram-container) {
  --section-bg-color: #f2f2f2;
  box-shadow: 0 0 0 100vmax var(--section-bg-color);
  background-color: var(--section-bg-color);
  -webkit-clip-path: inset(0 -100vmax);
  clip-path: inset(0 -100vmax);
}

.row:nth-child(even):has(.diagram-container) .diagram-container .center-circle-wrapper::after {
  background: rgba(242, 242, 242, 0.8);
}

#container #page:has(.diagram-container) {
  margin-bottom: 0;
}

#container #page:has(.diagram-container) .row .block:last-child {
  margin-bottom: 0;
}

.diagram-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  display: flex;
  margin: 0 auto;
  padding-block: 50px;
  box-sizing: border-box;
  --secondary-color-light: color-mix(in srgb, var(--secondary-color) 60%, transparent);
  --primary-color-light: color-mix(in srgb, var(--primary-color), #fff 25%);
  --big-circle-size: 290px;
  --small-circle-size: 125px;
}

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

.diagram-container .left-section {
  width: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.diagram-container .right-section {
  width: 65%;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-left: 30px;
}

.diagram-container .center-circle-wrapper {
  position: relative;
  isolation: isolate;
}

.diagram-container .center-circle-wrapper:after {
  position: absolute;
  width: 120%;
  aspect-ratio: 1/1;
  z-index: -1;
  border: 7px solid var(--secondary-color);
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50vw;
  background: rgba(255, 255, 255, 0.8);
}

.diagram-container .center-circle {
  width: var(--big-circle-size);
  aspect-ratio: 1/1;
  background-color: var(--primary-color);
  border-radius: 50%;
  border: 8px solid var(--primary-color-light);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  padding-inline: 8px;
  max-width: 100%;
}

.diagram-container .center-circle:hover,
.diagram-container .center-circle:focus-within {
  transform: scale(1.05);
  box-shadow: 0 0 25px var(--secondary-color-light);
}

.diagram-container .center-circle .center-circle__title>* {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

.diagram-container .center-circle .accordion-images-text {
  font-size: 1rem;
  margin-inline: auto;
  padding-inline: 10px;
}

.diagram-container .stakeholder-item {
  display: flex;
  flex-direction: column;
  position: relative;
}

.diagram-container .item-title>* {
  color: var(--primary-color);
  font-weight: bold;
  font-size: 1.2rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  padding-left: calc(var(--small-circle-size) + 20px);
  z-index: 6;
}

.diagram-container .content-wrapper {
  display: flex;
  position: relative;
}

.diagram-container .stakeholder-circle {
  flex-shrink: 0;
  width: var(--small-circle-size);
  height: var(--small-circle-size);
  background-color: var(--primary-color);
  border: 4px solid var(--primary-color-light);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--primary-color-contrast);
  font-weight: bold;
  font-size: 1.2rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 5;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
  margin-right: calc(-1 * var(--small-circle-size) / 2);
}

.diagram-container .stakeholder-item:hover .stakeholder-circle,
.diagram-container .stakeholder-item:focus-within .stakeholder-circle {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.diagram-container .content-box {
  flex-grow: 1;
  background-color: var(--secondary-color);
  border-radius: 8px;
  padding: 1rem 1rem 1rem calc(var(--small-circle-size) - 40px);
  z-index: 1;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.diagram-container .content-box .item-text li:last-child,
.diagram-container .content-box .item-text>p:last-child,
.diagram-container .content-box .item-text li:last-child p:last-child {
  margin-bottom: 0;
}

.diagram-container .content-box .item-button {
  color: var(--secondary-color-contrast);
  display: inline-block;
  display: flex;
  gap: 5px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-decoration: none;
}

.diagram-container .content-box .item-button::after {
  color: var(--program-read-more-color, var(--secondary-color-contrast-color));
  text-decoration: none;
  display: flex;
  gap: 5px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  content: "»";
  transition: 0.35s ease-in-out;
}

.diagram-container .content-box .item-button:hover::after,
.diagram-container .content-box .item-button:focus-within::after {
  transform: translateX(5px);
}

.diagram-container .content-box .item-button::before {
  position: absolute;
  inset: 0;
  z-index: 9;
  content: "";
}

.diagram-container .stakeholder-item:hover .content-box,
.diagram-container .stakeholder-item:focus-within .content-box {
  transform: translateX(5px);
  box-shadow: 0 0 20px var(--secondary-color-light);
  z-index: 4;
}

.diagram-container .content-box ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin: 0;
  padding: 0;
  padding-left: 20px;
  color: var(--secondary-color-contrast);
}

.diagram-container .content-box p {
  margin-bottom: 0.5rem;
  line-height: 1.4;
  font-size: 1rem;
  color: currentColor;
}

.diagram-container .content-box p a {
  color: currentColor;
}

.diagram-container .connector-svg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
}

.diagram-container .connector-svg line {
  stroke: var(--primary-color);
}

.diagram-container:not(.right) .right-section:has(.stakeholder-item:nth-child(3)) .stakeholder-item:nth-child(2) {
  margin-left: 60px;
}

.diagram-container:not(.right) .right-section:has(.stakeholder-item:nth-child(4)) .stakeholder-item:nth-child(2),
.diagram-container:not(.right) .right-section:has(.stakeholder-item:nth-child(4)) .stakeholder-item:nth-child(3) {
  margin-left: 60px;
}

.diagram-container:not(.right) .right-section:has(.stakeholder-item:nth-child(5)) .stakeholder-item:nth-child(2),
.diagram-container:not(.right) .right-section:has(.stakeholder-item:nth-child(5)) .stakeholder-item:nth-child(4) {
  margin-left: 60px;
}

.diagram-container:not(.right) .right-section:has(.stakeholder-item:nth-child(5)) .stakeholder-item:nth-child(3) {
  margin-left: 120px;
}

.diagram-container.right .right-section:has(.stakeholder-item:nth-child(3)) .stakeholder-item:nth-child(2) {
  margin-right: 60px;
}

.diagram-container.right .right-section:has(.stakeholder-item:nth-child(4)) .stakeholder-item:nth-child(2),
.diagram-container.right .right-section:has(.stakeholder-item:nth-child(4)) .stakeholder-item:nth-child(3) {
  margin-right: 60px;
}

.diagram-container.right .right-section:has(.stakeholder-item:nth-child(5)) .stakeholder-item:nth-child(2),
.diagram-container.right .right-section:has(.stakeholder-item:nth-child(5)) .stakeholder-item:nth-child(4) {
  margin-right: 60px;
}

.diagram-container.right .right-section:has(.stakeholder-item:nth-child(5)) .stakeholder-item:nth-child(3) {
  margin-right: 120px;
}

.diagram-container.big-text-small-circle .stakeholder-circle {
  font-size: 4rem;
  font-weight: 900;
}

.diagram-container.title-inside-right-container .right-section {
  gap: 40px;
}

.diagram-container.title-inside-right-container .stakeholder-item {
  background-color: var(--secondary-color);
  border-radius: 8px;
  padding: 1rem 1rem 1rem calc(var(--small-circle-size) - 40px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s, box-shadow 0.3s;
  min-height: var(--small-circle-size);
  margin-left: calc(var(--small-circle-size) / 2);
  z-index: 5;
}

.diagram-container.title-inside-right-container .stakeholder-item:hover,
.diagram-container.title-inside-right-container .stakeholder-item:focus-within {
  transform: translateX(5px);
  box-shadow: 0 0 20px var(--secondary-color-light);
}

.diagram-container.title-inside-right-container .item-title>* {
  padding-left: 0;
  color: var(--secondary-color-contrast);
}

.diagram-container.title-inside-right-container .stakeholder-circle {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.diagram-container.title-inside-right-container .stakeholder-item:hover .stakeholder-circle,
.diagram-container.title-inside-right-container .stakeholder-item:focus-within .stakeholder-circle {
  transform: translate(-50%, -50%) scale(1.1);
}

.diagram-container.title-inside-right-container .content-wrapper {
  position: static;
}

.diagram-container.title-inside-right-container .content-box {
  box-shadow: none !important;
  padding: 0 !important;
  position: static;
  transform: none !important;
}

.diagram-container.title-inside-right-container .right-section:has(.stakeholder-item:nth-child(3)) .stakeholder-item:nth-child(2) {
  margin-left: 120px;
}

.diagram-container.title-inside-right-container .right-section:has(.stakeholder-item:nth-child(4)) .stakeholder-item:nth-child(2),
.diagram-container.title-inside-right-container .right-section:has(.stakeholder-item:nth-child(4)) .stakeholder-item:nth-child(3) {
  margin-left: 120px;
}

.diagram-container.title-inside-right-container .right-section:has(.stakeholder-item:nth-child(5)) .stakeholder-item:nth-child(2),
.diagram-container.title-inside-right-container .right-section:has(.stakeholder-item:nth-child(5)) .stakeholder-item:nth-child(4) {
  margin-left: 120px;
}

.diagram-container.title-inside-right-container .right-section:has(.stakeholder-item:nth-child(5)) .stakeholder-item:nth-child(3) {
  margin-left: 180px;
}

.diagram-container.right .columns-wrapper {
  flex-direction: row-reverse;
}

.diagram-container.right .right-section {
  padding-left: 0;
  padding-right: 30px;
}

.diagram-container.right .content-wrapper {
  flex-direction: row-reverse;
}

.diagram-container.right .item-title>* {
  padding-left: 2rem;
  padding-right: calc(var(--small-circle-size) + 20px);
}

.diagram-container.right .stakeholder-circle {
  margin-right: 0;
  margin-left: calc(-1 * var(--small-circle-size) / 2);
}

.diagram-container.right .content-box {
  padding-left: 1rem;
  padding-right: calc(var(--small-circle-size) - 40px);
}

.diagram-container.has-image {
  flex-wrap: wrap;
  padding-bottom: 0;
}

.diagram-container.has-image .top-section-container {
  width: 100%;
  text-align: center;
  padding-bottom: 40px;
}

.diagram-container.has-image .top-section-container .center-circle__title>* {
  color: var(--primary-color);
}

.diagram-container.has-image .top-section-container p {
  color: #333;
  font-size: 18px;
  margin-top: 10px;
}

.diagram-container.has-image .columns-wrapper {
  display: flex;
  width: 100%;
}

.diagram-container.has-image .left-section {
  position: relative;
  margin-top: auto;
  height: 100%;
}

.diagram-container.has-image .strategic-plan-image img {
  height: auto;
  position: absolute;
  left: 0;
  bottom: 0;
  min-height: 90%;
  max-width: calc(100% + var(--small-circle-size));
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: left bottom;
  object-position: left bottom;
}

.diagram-container.has-image.right .strategic-plan-image img {
  left: auto;
  right: 0;
  -o-object-position: right bottom;
  object-position: right bottom;
}

.diagram-container.has-image .right-section {
  padding-bottom: 40px;
}

@media (max-width: 1024px) {
  #app .diagram-container {
    flex-direction: column;
    align-items: center;
    gap: calc(var(--small-circle-size) / 2 + 65px);
    text-align: center;
  }

  #app .diagram-container .center-circle-wrapper {
    max-width: calc(100% - 10px);
  }

  #app .diagram-container .center-circle-wrapper:after {
    width: 110%;
    border-width: 5px;
  }

  #app .diagram-container .left-section,
  #app .diagram-container .right-section {
    width: 100%;
  }

  #app .diagram-container .right-section {
    gap: 0;
    max-width: 700px;
    padding-left: 0;
  }

  #app .diagram-container .item-title>* {
    text-align: center;
    padding-left: 0;
  }

  #app .diagram-container .stakeholder-item {
    background-color: var(--secondary-color);
    border-radius: 8px;
    padding: calc(var(--small-circle-size) / 2 + 20px) 1rem 1rem 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
    min-height: var(--small-circle-size);
    margin-left: 0 !important;
    z-index: 5;
    margin-bottom: calc(var(--small-circle-size) / 2 + 30px);
  }

  #app .diagram-container .stakeholder-item:last-child {
    margin-bottom: 0;
  }

  #app .diagram-container .stakeholder-item:hover,
  #app .diagram-container .stakeholder-item:focus-within {
    transform: translateX(5px);
    box-shadow: 0 0 20px var(--secondary-color-light);
  }

  #app .diagram-container .item-title>* {
    padding-left: 0;
    color: var(--secondary-color-contrast);
  }

  #app .diagram-container .stakeholder-circle {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
  }

  #app .diagram-container .stakeholder-item:hover .stakeholder-circle,
  #app .diagram-container .stakeholder-item:focus-within .stakeholder-circle {
    transform: translate(-50%, -50%) scale(1.1);
  }

  #app .diagram-container .content-wrapper {
    position: static;
  }

  #app .diagram-container .content-box {
    box-shadow: none !important;
    padding: 0 !important;
    position: static;
    transform: none !important;
  }

  #app .diagram-container .content-box .item-text ul li {
    list-style-type: none;
    display: inline-flex;
    gap: 8px;
  }

  #app .diagram-container .content-box .item-text ul li::before {
    width: 5px;
    min-width: 5px;
    height: 5px;
    border-radius: 50vw;
    content: "";
    margin-top: 11px;
    background-color: currentColor;
  }

  #app .diagram-container .content-box .item-button {
    justify-content: center;
  }

  #app .diagram-container.has-image {
    gap: 0;
  }

  #app .diagram-container.has-image .columns-wrapper {
    flex-direction: column;
    align-items: center;
  }

  #app .diagram-container.has-image .strategic-plan-image img {
    position: relative;
    inset: 0;
    width: 360px;
    height: auto;
    min-height: inherit;
    max-width: 80%;
    margin-bottom: -20px;
  }

  #app .diagram-container.right .right-section {
    padding-right: 0;
  }

  #app .diagram-container.right .stakeholder-item {
    margin-right: 0 !important;
  }

  #app .diagram-container.right .item-title>* {
    padding-right: 0;
  }

  #app .diagram-container.right .stakeholder-circle {
    margin-left: 0;
  }

  #app #page .row:has(.diagram-container):first-child {
    margin-top: 0 !important;
  }
}

@media (max-width: 600px) {
  .diagram-container .stakeholder-circle {
    font-size: 1.1rem;
  }

  .diagram-container .center-circle .center-circle__title>* {
    font-size: 1.2rem;
  }
}

/* ============= Strategic Plan END ============= */

/* Tabcordions */
#page {

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

  .tabcordion .tabs-section-title {
    color: var(--primary-color);
    margin-bottom: 35px;
    max-width: 900px;
  }

  .tabcordion.has-tabs .tabcordion--tabs {
    opacity: 1;
    height: auto;
    visibility: visible;
  }

  .tabcordion.has-tabs .tabcordion--entry {
    min-height: 0;
  }

  .tabcordion.has-tabs .tabcordion--entry::before {
    display: none;
  }

  .tabcordion.has-tabs .tabcordion--entry.is-active .tabcordion--entry-content {
    opacity: 1;
    transition: opacity 400ms ease-in-out;
  }

  .tabcordion.has-tabs .tabcordion--entry .tabcordion--entry-content {
    opacity: 0;
    transition: opacity 400ms ease-in-out;
  }

  .tabcordion-container {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #F3F4F6;
    box-shadow: 0px 20px 24px -4px rgba(0, 0, 0, 0.04), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);
  }

  .tabcordion--tabs {
    opacity: 0;
    height: 0;
    visibility: hidden;
    display: flex;
    flex-flow: wrap;
    margin: 0;
    list-style: none;
    padding: 0;
    background: color-mix(in srgb, var(--primary-color) 1%, transparent);
  }

  .tabcordion--tabs .tab {
    display: block;
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
    color: var(--primary-color);
    padding: 20px 20px;
    font-size: 16px;
    font-weight: 400;
    border: 0;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
  }

  .tabcordion--tabs .tab:hover,
  .tabcordion--tabs .tab:focus {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    outline: none;
  }

  .tabcordion--tabs .tab.is-active {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    font-weight: 700;
  }

  .tabcordion--tabs .tab.is-active:hover,
  .tabcordion--tabs .tab.is-active:focus {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
  }

  .has-tabs .tabcordion--panels {
    border-top: 1px solid #E5E7EB;
    margin-top: -1px;
  }

  .tabcordion--entry {
    overflow: hidden;
    position: relative;
  }

  .tabcordion:not(.has-tabs) .tabcordion--entry:not(:first-child) {
    border-top: 1px solid #ddd;
  }

  .tabcordion--entry::before {
    position: relative;
    content: attr(data-title);
    z-index: 1;
    display: block;
  }

  .tabcordion:not(.has-tabs) .tabcordion--entry::before {
    background: color-mix(in srgb, var(--primary-color) 3%, transparent);
    color: var(--primary-color);
    padding: 10px 20px;
    cursor: pointer;
  }

  .tabcordion:not(.has-tabs) .tabcordion:not(.has-tabs) .tabcordion--entry:not(.is-active):before {
    padding-right: 35px;
  }

  .tabcordion:not(.has-tabs) .tabcordion--entry:hover,
  .tabcordion:not(.has-tabs) .tabcordion--entry:focus {
    outline: none;
  }

  .tabcordion:not(.has-tabs) .tabcordion--entry:hover::before,
  .tabcordion:not(.has-tabs) .tabcordion--entry:focus::before {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  }

  .tabcordion:not(.has-tabs) .tabcordion--entry:not(.is-active):after {
    content: '';
    position: absolute;
    right: 15px;
    top: 15px;
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    mask-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6H8V0H6V6H0V8H6V14H8V8H14V6Z' fill='%23002F6C'/%3E%3C/svg%3E%0A");
    mask-repeat: no-repeat no-repeat;
    mask-position: center center;
    mask-size: contain;
  }

  .tabcordion--entry.is-active .tabcordion--entry-content {
    margin-top: 0;
    height: auto;
    opacity: 1;
    transition: margin 400ms ease-out -100ms;
  }

  .tabcordion:not(.has-tabs) .tabcordion--entry.is-active::before {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    font-weight: 700;
  }

  .tabcordion:not(.has-tabs) .tabcordion--entry.is-active:hover::before,
  .tabcordion:not(.has-tabs) .tabcordion--entry.is-active:focus::before {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
  }

  .tabcordion--entry-container {
    overflow: hidden;
  }

  .tabcordion--entry-content {
    position: relative;
    margin-top: -100%;
    height: 0;
    opacity: 0;
    transition: margin 500ms ease-in;
    padding: 15px 20px;

    @media only screen and (min-width: 1280px) {
      padding: 25px 30px;
    }
  }

  .tabcordion--entry-content {
    display: flex;
    flex-direction: column;
    gap: 20px;

    p:not(:last-child) {
      margin-bottom: 20px;
    }

    .panel-content-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
      padding-top: 15px;

      .panel-content-button {
        min-height: 40px;
        text-decoration: none;
        display: flex;
        align-items: center;
        position: relative;
        border: var(--primary-color) solid 1px;
        margin: 0;
        transition: background .35s ease-in-out;
        border-radius: 50vw;
        padding: 10px 20px;
        box-sizing: border-box;
        justify-content: flex-start;

        &:hover {
          background-color: var(--primary-color);

          * {
            color: var(--primary-color-contrast);
          }
        }
      }

      .panel-content-button__title {
        color: var(--primary-color);
        position: relative;
        display: flex;
        align-items: center;
        gap: 5px;
        margin: 0;
        font-weight: 700;

        &::after {
          background-color: currentColor;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.52867 11.5286L8.47133 12.4712L12.9427 7.9999L8.47133 3.52856L7.52867 4.47123L10.3907 7.33323H4V8.66656H10.3907L7.52867 11.5286Z' fill='%239CA3AF'/%3E%3C/svg%3E");
          mask-repeat: no-repeat no-repeat;
          mask-position: left center;
          mask-size: contain;
          content: '';
          min-width: 20px;
          min-height: 20px;
          display: block;
        }
      }
    }

    .panel-content-image {

      img {
        display: block;
        max-width: 100%;
        height: auto;
        object-fit: contain;
      }
    }
  }

  .tabcordion.has-tabs.left,
  .tabcordion.has-tabs.right {
    .tabcordion-container {
      display: flex;
    }

    .tabcordion--tabs {
      flex-direction: column;
      align-items: flex-start;
      width: 300px;
      opacity: 1;
      visibility: visible;
      height: auto;

      .tab {
        width: 100%;
        text-align: left;

        &:last-child {
          border-bottom: 0;
        }
      }
    }

    .tabcordion--panels {
      width: calc(100% - 300px);
    }

    .tabcordion--entry-content {
      padding: 0;
    }

    .tabcordion--entry.is-active {
      padding: 15px 20px;
      overflow: visible;

      .tabcordion--entry-container {
        overflow: visible;
      }

      @media only screen and (min-width: 1280px) {
        padding: 25px 30px;
      }
    }

    .tabcordion--entry.is-active::before {
      display: block;
      font-weight: 700;
      color: var(--primary-color);
      font-size: clamp(1.313rem, 0.226rem + 1.774vw, 2rem);
      line-height: 1.1;
      margin-bottom: 20px;
    }
  }

  .tabcordion.has-tabs.right {
    .tabcordion--tabs {
      .tab {
        border-right: 0;
        border-left: 1px solid rgb(221, 221, 221);
      }
    }

    .tabcordion--panels {
      order: -1;
    }
  }
}

/* END Tabcordions */

/*
=================================================================
Utility Classes for CMS Pages - Background Color & Border Radius
=================================================================

Key Features:
- Applies primary, secondary, light gray, and dark gray background colors.
- Ensures text contrast based on background color.
- Adds border-radius and full-width background utilities.
*/

#app .row:has(.row-secondary-background-color),
#app .column:has(.column-secondary-background-color) {
  --background-color: var(--secondary-color);
  --text-color: var(--secondary-color-contrast);
  --background-color-light: color-mix(in srgb, var(--background-color), #fff 80%);
  --heading-color: currentColor;
  --links-color: currentColor;
  background-color: var(--background-color);
}

#app .row:has(.row-secondary-background-color) p a,
#app .row:has(.row-secondary-background-color) .quote-block,
#app .row:has(.row-secondary-background-color) .quote-block.design-3 blockquote,
#app .row:has(.row-secondary-background-color) .quote-block cite,
#app .row:has(.row-secondary-background-color) .button .title,
#app .column:has(.column-secondary-background-color) p a,
#app .column:has(.column-secondary-background-color) .quote-block,
#app .column:has(.column-secondary-background-color) .quote-block.design-3 blockquote,
#app .column:has(.column-secondary-background-color) .quote-block cite,
#app .column:has(.column-secondary-background-color) .button .title {
  color: currentColor;
}

#app .row:has(.row-secondary-background-color) .button.light:not(.link),
#app .column:has(.column-secondary-background-color) .button.light:not(.link) {
  background-color: var(--background-color-light);
  color: #000;
}

#app .row:has(.row-secondary-background-color) .button.light:not(.link):hover,
#app .column:has(.column-secondary-background-color) .button.light:not(.link):hover {
  background-color: #fff;
}

#app .row:has(.row-secondary-background-color) .button.dark:not(.link),
#app .column:has(.column-secondary-background-color) .button.dark:not(.link) {
  color: var(--primary-color-contrast);
}

#app .row:has(.row-secondary-background-color) .button.outline:not(.link):hover,
#app .column:has(.column-secondary-background-color) .button.outline:not(.link):hover {
  color: var(--primary-color-contrast);
}

#app .row:has(.row-secondary-background-color) .button.link,
#app .column:has(.column-secondary-background-color) .button.link {
  box-sizing: border-box;
  padding-right: 20px;
  color: var(--text-color);
}

#app .row:has(.row-secondary-background-color) .button.link svg,
#app .column:has(.column-secondary-background-color) .button.link svg {
  fill: currentColor;
}

#app .row:has(.row-secondary-background-color) .button.link:hover,
#app .column:has(.column-secondary-background-color) .button.link:hover {
  text-decoration: none;
  background-color: var(--primary-color);
  color: var(--primary-color-contrast);
}

#app .row:has(.row-secondary-background-color) .collapsible-section.light .section-header,
#app .column:has(.column-secondary-background-color) .collapsible-section.light .section-header {
  background: var(--background-color-light);
}

#app .row:has(.row-light-gray-background-color),
#app .column:has(.column-light-gray-background-color) {
  --background-color: #e0e0e0;
  --text-color: #000;
  background-color: var(--background-color);
}

#app .row:has(.row-primary-background-color),
#app .column:has(.column-primary-background-color) {
  --background-color: var(--primary-color);
  --text-color: var(--primary-color-contrast);
  --background-color-light: color-mix(in srgb, var(--background-color), #fff 88%);
  --background-color-dark: color-mix(in srgb, var(--background-color), #000 50%);
  --heading-color: currentColor;
  --links-color: currentColor;
  --button-dark-color: var(--background-color-dark);
}

#app .row:has(.row-dark-gray-background-color),
#app .column:has(.column-dark-gray-background-color) {
  --background-color: #333;
  --text-color: #fff;
  --background-color-light: color-mix(in srgb, var(--background-color), #fff 88%);
  --heading-color: currentColor;
  --links-color: currentColor;
  --button-dark-color: var(--primary-color);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color),
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) {
  background-color: var(--background-color);
  color: var(--text-color);
  /* buttons */
  /* end buttons */
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) p a,
#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .quote-block,
#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .quote-block.design-3 blockquote,
#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .quote-block cite,
#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button .title,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) p a,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .quote-block,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .quote-block.design-3 blockquote,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .quote-block cite,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button .title {
  color: currentColor;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .quote-block .divider,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .quote-block .divider {
  border-left-color: currentColor;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.outline:not(.link),
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.outline:not(.link) {
  color: currentColor;
  border-color: currentColor;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.outline:not(.link):hover,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.outline:not(.link):hover {
  background-color: var(--text-color);
  color: var(--background-color);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.outline:not(.link):hover .title,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.outline:not(.link):hover .title {
  color: currentColor;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.outline:not(.link) .bar,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.outline:not(.link) .bar {
  fill: var(--text-color);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.dark:not(.link),
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.dark:not(.link) {
  background: var(--button-dark-color);
  color: var(--text-color);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.dark:not(.link):hover,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.dark:not(.link):hover {
  background: var(--background-color-light);
  color: var(--background-color);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.light:not(.link),
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.light:not(.link) {
  background: var(--background-color-light);
  color: var(--background-color);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.light:not(.link):hover,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.light:not(.link):hover {
  background: var(--text-color);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.square:hover svg,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.square:hover svg {
  fill: currentColor !important;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.square svg,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.square svg {
  fill: currentColor;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.square.dark .bar,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.square.dark .bar {
  fill: var(--background-color-light);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.square.dark .arrow-button circle,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.square.dark .arrow-button circle {
  stroke: var(--background-color);
  fill: var(--background-color-light);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.link,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.link {
  box-sizing: border-box;
  padding-right: 20px;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.link svg,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.link svg {
  fill: currentColor;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .button.link:hover,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .button.link:hover {
  text-decoration: none;
  background-color: var(--text-color);
  color: var(--background-color);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .table-v2-block,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .table-v2-block {
  color: #333;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .collapsible-section .header-text,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .collapsible-section .header-text {
  color: currentColor;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .collapsible-section .section-header svg,
#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .collapsible-section .section-header path,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .collapsible-section .section-header svg,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .collapsible-section .section-header path {
  fill: currentColor;
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .collapsible-section.dark .section-header,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .collapsible-section.dark .section-header {
  background-color: var(--background-color-light);
  color: var(--background-color);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .collapsible-section.light .section-header,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .collapsible-section.light .section-header {
  background-color: var(--text-color);
  color: var(--background-color);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .collapsible-section.light .content-section-dropzone,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .collapsible-section.light .content-section-dropzone {
  border-color: var(--text-color);
}

#app .row:has(.row-primary-background-color, .row-dark-gray-background-color) .collapsible-section.default .section-header,
#app .column:has(.column-primary-background-color, .column-dark-gray-background-color) .collapsible-section.default .section-header {
  background-color: transparent;
  color: var(--text-color);
}

#app .row:has(div[class*=row][class*=background-color]),
#app .column:has(div[class*=column][class*=background-color]) {
  box-sizing: border-box;
  padding-block: 25px;
}

#app .row:has(div[class*=row][class*=background-color]) .block:last-child,
#app .row:has(div[class*=row][class*=background-color]):has(.block:last-child div[class*=background-color]) .block:nth-last-child(2),
#app .column:has(div[class*=column][class*=background-color]) .block:last-child,
#app .column:has(div[class*=column][class*=background-color]):has(.block:last-child div[class*=background-color]) .block:nth-last-child(2) {
  margin-bottom: 0;
}

#app .row:has(div[class*=background-color]):not(:has(.full-width-background)):not(.ts-full-width-row) {
  padding-inline: 15px;
}

@media only screen and (min-width: 760px) {
  #app .row:has(div[class*=background-color]):not(:has(.full-width-background)):not(.ts-full-width-row) {
    padding-inline: 25px;
    width: min(85% + 50px, 100%);
  }
}

@media only screen and (min-width: 1400px) {
  #app .row:has(div[class*=background-color]):not(:has(.full-width-background)):not(.ts-full-width-row) {
    padding-inline: 40px;
    width: min(85% + 80px, 100%);
  }
}

#app .column:has(div[class*=column][class*=background-color]) {
  padding-inline: 25px;
}

#app .row:has(div[class*=row][class*=background-color])+.row:not(:has(div[class*=background-color])),
#app .row:has(div[class*=column][class*=background-color])+.row:not(:has(div[class*=column][class*=background-color])),
#app .row:has(div[class*=background-color][class*=border-radius]):not(:first-child) {
  margin-top: 30px;
}

#app .row:has(.border-radius-10),
#app .column:has(.border-radius-10) {
  border-radius: 10px;
}

#app .row:has(.border-radius-20),
#app .column:has(.border-radius-20) {
  border-radius: 20px;
}

#app .row:has(.border-radius-30),
#app .column:has(.border-radius-30) {
  border-radius: 30px;
}

#app .row:has(.full-width-background),
#app .column:has(.full-width-background) {
  box-shadow: 0 0 0 100vmax var(--background-color);
  -webkit-clip-path: inset(0 -100vmax);
  clip-path: inset(0 -100vmax);
}

/* small icons in cards component */
#page {
  .row:has(.cards-image-sm-size) {
    .card-block {
      --image-size: 75px;
      --gap: 15px;
      display: flex;
      flex-direction: row;
      gap: var(--gap);
      flex-wrap: wrap;
      padding: 20px;

      @media only screen and (min-width: 1400px) {
        --gap: 25px;
      }

      .card-left {
        width: auto;

        img {
          width: var(--image-size);
          height: auto;
        }
      }

      .card-text {
        width: calc(100% - var(--image-size) - var(--gap));
        box-sizing: border-box;
        flex: 1;
        min-width: 180px;
        padding: 0;
        padding-bottom: 4px;

        &>* {
          padding-left: 0;
          margin-left: 0;
        }
      }
    }

    .block:has(.cards-image-sm-size) {
      display: none;
    }

    /* make the cards the same height */
    .column.ts-two-column:has(.block:first-child .card-block):has(.block:last-child .card-block),
    .column.ts-two-column:has(.block:first-child + .block:last-child .cards-image-sm-size),
    .column.ts-three-column:has(.block:first-child .card-block):has(.block:last-child .card-block),
    .column.ts-three-column:has(.block:first-child + .block:last-child .cards-image-sm-size),
    .column.ts-four-column:has(.block:first-child .card-block):has(.block:last-child .card-block),
    .column.ts-four-column:has(.block:first-child + .block:last-child .cards-image-sm-size) {
      display: inline-flex;
      flex-direction: column;
      margin-bottom: 20px;
      gap: 20px;

      .block:not(:has(.cards-image-sm-size)) {
        height: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
        overflow: visible;

        .card-block {
          flex: 1;
        }
      }
    }
  }

  /* Code for New CMS Builder */
  .pb-card.image-sm-size {
    --image-size: 75px;
    --gap: 15px;

    .card-container {
      display: flex;
      flex-direction: row;
      gap: var(--gap);
      flex-wrap: wrap;
    }

    .card-image-container {
      --image-dimensions: var(--image-size);
    }

    .card-content-container {
      width: calc(100% - var(--image-size) - var(--gap));
      box-sizing: border-box;
      flex: 1;
      min-width: 170px;

      .card-heading {
        margin-bottom: 10px;
      }
    }
  }

  /* end Code for New CMS Builder */
}

/* end small icons in cards component */
/* 
=================================================================
END Utility Classes for CMS Pages - Background Color & Border Radius
=================================================================
*/
/*# sourceMappingURL=custom-cms-pages.css.map */