/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1060 {
      padding: var(--sectionPadding);
      /* 200px - 300px - leaving extra space for the navigation */
      padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
      position: relative;
      z-index: 1;
      margin-top: 3.5rem;
      overflow: hidden;
  }

  #hero-1060 .cs-background {
      width: 100%;
      height: 55%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
  }

  #hero-1060 .cs-background:before {
      /* Overlay */
      content: "";
      width: 100%;
      height: 100%;
      background: #1a1a1a;
      opacity: 0.84;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      z-index: 1;
      /* prevents the cursor from interacting with it */
      pointer-events: none;
  }

  /* Slider Container */
  #hero-1060 .slider-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
  }

  /* Slider Wrapper (9 slides total) */
  #hero-1060 .slider-wrapper {
    display: flex;
    height: 100%;
    width: 900%; /* 9 slides × 100% */
    animation: slide 40s infinite; /* 9 slides × 4s each = 36s */
  }

  /* Each Slide */
  #hero-1060 .slide {
    width: 11.111%; /* 100 / 10 = 10% */
    height: 100%;
    position: relative;
  }

  #hero-1060 .slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
  }

  /* Slider Animation - Updated for 12 slides */
  @keyframes slide {
    0%   { transform: translateX(0); }
    11.111% { transform: translateX(-11.111%); }
    22.222% { transform: translateX(-22.222%); }
    33.333% { transform: translateX(-33.333%); }
    44.444% { transform: translateX(-44.444%); }
    55.555% { transform: translateX(-55.555%); }
    66.666% { transform: translateX(-66.666%); }
    77.777% { transform: translateX(-77.777%); }
    88.888% { transform: translateX(-88.888%); }
    100%  { transform: translateX(0); }
  }

  /* Slider Indicators */
  #hero-1060 .slider-indicators {
      position: absolute;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 0.5rem; /* Reduced gap for more indicators */
      z-index: 10;
      flex-wrap: wrap;
      justify-content: center;
      max-width: 90%;
  }

  #hero-1060 .indicator {
      width: 10px; /* Slightly smaller for 12 indicators */
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid transparent;
  }

  #hero-1060 .indicator.active {
      background: var(--primary);
      border-color: rgba(255, 255, 255, 0.8);
      transform: scale(1.2);
  }

  #hero-1060 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: clamp(6.25rem, 9vw, 7.5rem);
  }

  #hero-1060 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: center;
  }

  #hero-1060 .cs-title {
      margin: 0;
      color: var(--bodyTextColorWhite);
      font-size: clamp(2.5rem, 5vw, 5rem);
      font-weight: bold;
      line-height: 1.2;
      margin-bottom: 1.5rem;
  }

  #hero-1060 .cs-text {
      /* 16px - 20px */
      font-size: clamp(1rem, 1.95vw, 1.5rem);
      line-height: 1.5em;
      text-align: center;
      width: 100%;
      /* 464px - 622px */
      max-width: clamp(29rem, 60vw, 70rem);
      margin: 0 0 2.5rem 0;
      color: #fff;
  }

  #hero-1060 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      margin: 0;
      color: #fff;
      padding: 0 1.5rem;
      background-color: var(--primary);
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: all 0.3s ease;
  }

  #hero-1060 .cs-button-solid:before {
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 0%;
      background: #a01317;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
  }

  #hero-1060 .cs-button-solid:hover:before {
      width: 100%;
  }

  #hero-1060 .cs-card-group {
      margin: 0;
      padding: 0;
      width: 100%;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      row-gap: 1.875rem;
  }

  #hero-1060 .cs-item {
      width: 100%;
      text-align: left;
      list-style: none;
      margin: 0;
      /* 24px - 32px */
      padding: clamp(1.5rem, 3vw, 2rem);
      background-color: #fff;
      box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      grid-column: span 12;
      grid-row: span 1;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      position: relative;
      z-index: 1;
  }

  #hero-1060 .cs-icon-wrapper {
      width: 4.25rem;
      height: 4.25rem;
      margin: 0 0 1.5rem 0;
      background-color: var(--primary);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      transition: transform 0.3s ease;
      border-radius: 10px;
  }

  #hero-1060 .cs-item:hover .cs-icon-wrapper {
      transform: scale(1.1);
  }

  #hero-1060 .cs-icon {
      width: 2.7rem;
      height: auto;
      filter: brightness(0) invert(1);
  }

  #hero-1060 .cs-h2 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: bold;
      text-align: inherit;
      margin: 0 0 0.75rem 0;
      color: var(--headerColor);
  }

  #hero-1060 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      max-width: 28.125rem;
      margin: 0;
      padding: 0;
      color: var(--bodyTextColor);
  }
      
    /* Button Group */
    #hero-1060 .cs-button-group {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
      justify-content: center; /* center on mobile */
    }
    
    #hero-1060 .cs-button-group .cs-button-solid {
      font-size: 1rem;
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      padding: 0 1.5rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      transition: all 0.3s ease;
    }
    
    /* Job Seekers Button (Primary) */
    #hero-1060 .cs-button-group .seeker-btn {
      background-color: var(--primary);
      color: #fff;
    }
    #hero-1060 .cs-button-group .seeker-btn:hover {
      background-color: var(--primary);
    }
    
    /* Employers Button (Secondary) */
    #hero-1060 .cs-button-group .employer-btn {
      background-color: #fff;
      color: var(--primary);
    }
    #hero-1060 .cs-button-group .employer-btn:hover {
      color: #fff;
    }
      #hero-1060 .cs-header {
      display: flex;
      align-items: center;
      gap: 1rem; /* space between icon and text */
      margin-bottom: 1rem;
  }

  #hero-1060 .cs-icon-wrapper {
      margin: 0; /* remove bottom margin since it’s inline now */
  }

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1060 {
      padding-bottom: 0;
  }

  #hero-1060 .cs-container {
      align-items: center;
  }

  #hero-1060 .cs-content {
      text-align: left;
      margin-left: 0;
      align-items: center;
  }

  #hero-1060 .cs-card-group {
      column-gap: 1.875rem;
  }

  #hero-1060 .cs-item {
      grid-column: span 4;
  }

  #hero-1060 .cs-background {
      height: 90%;
  }

  #hero-1060 .cs-background:before {
      background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0.94) 0%,
          rgba(0, 0, 0, 0.94) 2%,
          rgba(0, 0, 0, 0) 100%
      );
      opacity: 1;
  }

  #hero-1060 .slider-indicators {
      gap: 0.75rem; /* Restore normal gap on larger screens */
  }

  #hero-1060 .indicator {
      width: 12px; /* Restore normal size on larger screens */
      height: 12px;
  }
}

/* Large Desktop - Enhanced Parallax Effect */
@media only screen and (min-width: 100rem) {
  #hero-1060 .slider-wrapper {
      animation: slideDesktop 45s infinite; /* ~5s per slide */
  }

  @keyframes slideDesktop {
      0%, 7%     { transform: translateX(0); }
      9%, 16%    { transform: translateX(-11.111%); }
      18%, 25%   { transform: translateX(-22.222%); }
      27%, 34%   { transform: translateX(-33.333%); }
      36%, 43%   { transform: translateX(-44.444%); }
      45%, 52%   { transform: translateX(-55.555%); }
      54%, 61%   { transform: translateX(-66.666%); }
      63%, 70%   { transform: translateX(-77.777%); }
      72%, 79%   { transform: translateX(-88.888%); }
      100%       { transform: translateX(0); }
  }
}


/* ============================================ */
        /*                Industries Section            */
        /* ============================================ */

        #industries-section {
          width: 100%;
          max-width: 90rem;
          padding: var(--sectionPadding);
          border-radius: 20px;
          margin: 20px auto;
      }

      #industries-section .cs-container {
          width: 100%;
          max-width: 80rem;
          margin: 0 auto;
      }

      #industries-section .cs-content {
          text-align: center;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 50px;
      }

      #industries-section .cs-topper {
          font-size: var(--topperFontSize);
          line-height: 1.2em;
          text-transform: uppercase;
          text-align: inherit;
          letter-spacing: .1em;
          font-weight: 700;
          color: var(--primary);
          margin-bottom: 0.25rem;
          display: block;
      }

      #industries-section .cs-title {
          font-size: clamp(1.9375rem, 3.9vw, 3.0625rem);
          font-weight: 700;
          line-height: 1.2em;
          text-align: inherit;
          max-width: 43.75rem;
          margin: 0 0 1rem 0;
          color: var(--headerColor);
          position: relative;
      }

      #industries-section .cs-subtitle {
          font-size: clamp(1rem, 2.5vw, 1.25rem);
          line-height: 1.5em;
          text-align: inherit;
          width: 100%;
          max-width: 60rem;
          margin: 0;
          color: var(--bodyTextColor);
      }

      /* Swiper Styles */
      #industries-section .industry-swiper {
          position: relative;
          overflow: hidden;
          border-radius: 15px;
          padding-bottom: 20px;
      }

      #industries-section .swiper-slide {
          height: 400px;
          position: relative;
          border-radius: 15px;
          overflow: hidden;
          cursor: pointer;
          transition: all 0.4s ease;
          background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
      }

      #industries-section .swiper-slide:hover {
          transform: translateY(-10px);
          box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
          border-radius: 15px;
      }

      #industries-section .cs-image {
          width: 100%;
          height: 100%;
          position: relative;
          background: linear-gradient(135deg, #34495e 0%, #2c3e50 100%);
          background-size: cover;
          background-position: center;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          color: white;
          transition: all 0.4s ease;
      }

      #industries-section .cs-background {
          position: absolute;
          top: 0; left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          overflow: hidden;
      }

      #industries-section .cs-background img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          filter: brightness(60%);
          transition: transform 0.4s ease;
      }

      #industries-section .swiper-slide:hover .cs-background img {
          transform: scale(1.05);
      }

      #industries-section .cs-image::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: var(--primary);
          opacity: 0;
          transition: opacity 0.4s ease;
          z-index: 2;
      }

      #industries-section .swiper-slide:hover .cs-image::before {
          opacity: 0.3;
      }

      #industries-section .cs-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          color: white;
          z-index: 2;
          padding: 20px;
      }

      #industries-section .cs-location-type {
          font-size: 1.5rem;
          font-weight: 600;
          margin-bottom: 10px;
          z-index: 2;
          position: relative;
      }

      #industries-section .cs-location-desc {
          font-size: 0.9rem;
          opacity: 0.9;
          z-index: 2;
          position: relative;
          max-width: 250px;
          line-height: 1.4;
          color: var(--bodyTextColorWhite);
      }

      /* Navigation Styles */
      #industries-section .navigation-buttons {
          position: relative;
          display: flex;
          justify-content: center;
          gap: 15px;
          margin-top: 30px;
      }

      /* Pagination Styles */
      #industries-section .swiper-pagination {
          position: static !important;
          margin-top: 25px;
          text-align: center;
      }

      #industries-section .swiper-pagination-bullet {
          width: 12px;
          height: 12px;
          background: #bdc3c7;
          opacity: 1;
          margin: 0 5px;
          transition: all 0.3s ease;
      }

      #industries-section .swiper-pagination-bullet-active {
          background: var(--primary);
          transform: scale(1.2);
      }

      #industries-section .swiper-button-prev,
      #industries-section .swiper-button-next {
          width: 50px;
          height: 50px;
          background: #ffffff;
          border: none;
          border-radius: 50%;
          color: var(--primary);
          font-size: 1.2rem;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
          position: static;
          margin: 0;
      }

      #industries-section .swiper-button-prev:after,
      #industries-section .swiper-button-next:after {
          font-size: 1.2rem;
          font-weight: 600;
      }

      #industries-section .swiper-button-prev:hover,
      #industries-section .swiper-button-next:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
          background-color: var(--primary);
          color: #ffffff;
      }

      /* Stats Section */
      #industries-section .stats-section {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 30px;
          margin-top: 50px;
          padding-top: 40px;
          border-top: 1px solid #ecf0f1;
      }

      #industries-section .stat-card {
          text-align: center;
          padding: 20px;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 10px;
          transition: transform 0.3s ease;
      }

      #industries-section .stat-card:hover {
          transform: translateY(-5px);
      }

      #industries-section .stat-number {
          font-size: 3.5rem;
          font-weight: 900;
          color: var(--headerColor);
          margin-bottom: 10px;
      }

      #industries-section .stat-number::after {
          content: "+";
          font-size: 3rem;
          margin-left: 0px;
      }

      #industries-section .stat-label {
          font-size: 1rem;
          color: var(--bodyTextColor);
          font-weight: 500;
      }

      /* ============================================ */
      /*                World Map Section             */
      /* ============================================ */

      #industries-section .world-map-container {
          border-radius: 20px;
          position: relative;
          overflow: hidden;
      }

      #industries-section .world-map-container::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
          pointer-events: none;
      }

      #industries-section .map-header {
          text-align: center;
          margin-bottom: 50px;
          position: relative;
          z-index: 1;
      }

      #industries-section .map-topper {
          font-size: var(--topperFontSize);
          line-height: 1.2em;
          text-transform: uppercase;
          letter-spacing: .1em;
          font-weight: 700;
          color: var(--primary);
          margin-bottom: 0.25rem;
          display: block;
      }

      #industries-section .map-title {
          font-size: clamp(1.9375rem, 3.9vw, 3.0625rem);
          font-weight: 700;
          line-height: 1.2em;
          margin: 0 0 1rem 0;
          color: var(--headerColor);
      }

      #industries-section .map-subtitle {
          font-size: 1rem;
          line-height: 1.5em;
          max-width: 600px;
          margin: 0 auto;
          color: var(--bodyTextColor);
      }

      #industries-section .world-map-image {
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
          z-index: 1;
      }

      #industries-section .world-map-image img {
          width: 100%;
          height: auto;
          max-width: 1000px;
          margin: 0 auto;
          display: block;
          filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
          border-radius: 10px;
      }

      /* Responsive Design */
      @media (max-width: 768px) {
          #industries-section .world-map-container {
              padding: 40px 15px;
              margin-top: 40px;
          }

          #industries-section .world-map-image img {
              max-width: 100%;
          }
      }

/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
#sbs-2277 {
  padding: var(--sectionPadding);
  position: relative;
  z-index: 0;

  background-image: url("/assets/images/interconnected.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#sbs-2277::before {
  content: "";
  position: absolute;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0 */
  background: rgba(255, 255, 255, 0.7);
  z-index: -1;
}
#sbs-2277 .cs-container {
  width: 100%;
  /* changes to 1280px at tablet */
  max-width: 36.5rem;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 48px - 64px */
  gap: clamp(3rem, 6vw, 4rem);
  position: relative;
  z-index: 1;
}
#sbs-2277 .cs-content {
  /* set text align to center if content needs to be centrally aligned */
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* aligns content to the left, set to center to centrally align */
  align-items: flex-start;
}
#sbs-2277 .cs-flex {
  /* 48px - 64px */
  margin-bottom: clamp(3rem, 6vw, 4rem);
}
#sbs-2277 .cs-wrapper {
  width: 100%;
}
#sbs-2277 .cs-title {
  max-width: 25ch;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--headerColor);
  line-height: 1.2;
  margin-bottom: 1rem;
}
#sbs-2277 .cs-topper {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.5rem;
}
#sbs-2277 .cs-text {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--bodyTextColor);
  margin-bottom: 1rem;
}
#sbs-2277 .cs-text:last-of-type {
  margin-bottom: 2rem;
}
#sbs-2277 .cs-ul {
  width: 100%;
  max-width: 39.375rem;
  margin: 2rem 0 2rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
#sbs-2277 .cs-li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
#sbs-2277 .cs-h3 {
  font-size: 1.25rem;
  line-height: 1.2em;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--headerColor);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.75rem;
}
#sbs-2277 .cs-icon {
  width: 1.0625rem;
  height: auto;
  margin-top: 0.1875rem;
}
#sbs-2277 .cs-item-text {
  font-size: 1rem;
  line-height: 1.5em;
  color: var(--bodyTextColor);
  margin: 0;
}
#sbs-2277 .cs-item-text strong {
  color: var(--headerColor);
}
#sbs-2277 .cs-button-solid {
  font-size: 1rem;
  font-weight: 700;
  /* 46px - 56px */
  line-height: clamp(2.875rem, 5.5vw, 3.5rem);
  text-align: center;
  text-decoration: none;
  min-width: 9.375rem;
  margin: 0;
  /* prevents padding from adding to the width */
  box-sizing: border-box;
  padding: 0 1.5rem;
  background-color: var(--primary);
  color: #fff;
  display: inline-block;
  position: relative;
  z-index: 1;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
}
#sbs-2277 .cs-button-solid:before {
  content: "";
  width: 0%;
  height: 100%;
  background: #cd181f;
  opacity: 1;
  border-radius: 0.25rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: width 0.3s;
}
#sbs-2277 .cs-button-solid:hover:before {
  width: 100%;
}
#sbs-2277 .cs-image-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
}
#sbs-2277 .cs-card-group {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  /* 16px - 20px */
  column-gap: clamp(1rem, 2.3vw, 1.25rem);
}
#sbs-2277 .cs-item {
  list-style: none;
  width: 100%;
  /* 24px - 32px */
  padding: clamp(1.5rem, 4vw, 2rem);
  background-color: #cd181f;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
#sbs-2277 .cs-item:hover {
  transform: translateY(-5px);
}
#sbs-2277 .cs-item:last-of-type {
  background-color: var(--primary);
}
#sbs-2277 .cs-item-icon {
  width: 3.5rem;
  height: auto;
  display: block;
}
#sbs-2277 .cs-number {
  /* 31px - 49px */
  font-size: clamp(1.9375rem, 4vw, 3.0625rem);
  line-height: 1.2em;
  font-weight: 700;
  margin: 0;
  color: var(--bodyTextColorWhite);
  display: block;
}
#sbs-2277 .cs-desc {
  font-size: 1.25rem;
  line-height: 1.2em;
  display: block;
}
#sbs-2277 .cs-picture {
  width: 100%;
  height: 90vw;
  max-height: 31.25rem;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 0.5rem;
  overflow: hidden;
}
#sbs-2277 .cs-picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
#sbs-2277 .cs-floater {
  width: auto;
  /* 50px - 160px */
  height: clamp(5rem, 10vw, 14rem);
  position: absolute;
  /* 18px - 60px */
  top: clamp(1.125rem, 6vw, 3.75rem);
  right: -3rem;
}
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
#sbs-2277 .cs-container {
  max-width: 80rem;
}
#sbs-2277 .cs-card-group {
  flex-direction: row;
  position: absolute;
  top: -40px;
  right: 2rem;
}
#sbs-2277 .cs-item {
  width: 12.5rem;
  flex-direction: column;
}
#sbs-2277 .cs-picture {
  height: 30rem;
  max-height: initial;
  /* 60px - 80px */
  margin-top: clamp(3.75rem, 7vw, 5rem);
  position: relative;
  z-index: -1;
}
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
#sbs-2277 .cs-content {
  /* 48px - 64px */
  gap: clamp(3rem, 6vw, 4rem);
}
#sbs-2277 .cs-title {
  margin: 0;
}
#sbs-2277 .cs-wrapper {
  display: flex;
  gap: 3rem;
}
#sbs-2277 .cs-flex {
  max-width: 26.25rem;
  margin: 0;
  /* 60px - 80px, same amount as the margin top on the cs-picture on tablet  */
  padding-top: clamp(3.75rem, 7vw, 5rem);
}
#sbs-2277 .cs-image-group {
  height: auto;
}
#sbs-2277 .cs-picture {
  height: 100%;
}
}

/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery-1446 {
      padding: var(--sectionPadding);
  }

  #gallery-1446 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(2.5rem, 4.5vw, 4rem);
  }

  #gallery-1446 .cs-content {
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  #gallery-1446 .cs-topper {
      font-size: var(--topperFontSize);
      line-height: 1.2em;
      text-transform: uppercase;
      text-align: inherit;
      letter-spacing: .1em;
      font-weight: 900;
      color: var(--primary);
      margin-bottom: 0.25rem;
      display: block;
  }

  #gallery-1446 .cs-title {
      font-size: clamp(1.9375rem, 3.9vw, 3.0625rem);
      font-weight: 700;
      line-height: 1.2em;
      text-align: inherit;
      max-width: 55rem;
      margin: 0 0 1rem 0;
      color: var(--headerColor);
      position: relative;
  }

  #gallery-1446 .cs-text {
      font-size: clamp(1rem, 2.5vw, 1.25rem);
      line-height: 1.5em;
      text-align: inherit;
      width: 100%;
      max-width: 65rem;
      margin: 0;
      color: var(--bodyTextColor);
  }

  #gallery-1446 .swiper {
      width: 100%;
  }

  #gallery-1446 .swiper-wrapper {
      align-items: stretch;
  }

  #gallery-1446 .swiper-slide {
      height: auto;
      display: flex;
  }

  #gallery-1446 .cs-image {
      width: 100%;
      height: 100%;
      min-height: clamp(16.25rem, 60vw, 25rem);
      border-radius: 1rem;
      overflow: hidden;
      display: block;
      position: relative;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  #gallery-1446 .cs-image:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  #gallery-1446 .cs-image img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
  }

  #gallery-1446 .cs-image:hover img {
      transform: scale(1.05);
  }

  /* Navigation Buttons Container */
  #gallery-1446 .navigation-buttons {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      z-index: 10;
  }

  /* Navigation Buttons */
  #gallery-1446 .swiper-button-next,
  #gallery-1446 .swiper-button-prev {
      width: 3rem;
      height: 3rem;
      margin-top: 0;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: static;
  }

  #gallery-1446 .swiper-button-next:after,
  #gallery-1446 .swiper-button-prev:after {
      font-size: 1rem;
      font-weight: 700;
      color: var(--primary);
  }

  #gallery-1446 .swiper-button-next:hover,
  #gallery-1446 .swiper-button-prev:hover {
      background: var(--primary);
      transform: scale(1.1);
  }

  #gallery-1446 .swiper-button-next:hover:after,
  #gallery-1446 .swiper-button-prev:hover:after {
      color: #fff;
  }

  #gallery-1446 .swiper-button-disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #gallery-1446 .swiper-slide {
        width: auto;
    }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #gallery-1446 .cs-image {
        min-height: clamp(20rem, 30vw, 28rem);
    }
}

/*-- -------------------------- -->
<---           Logos            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #logos-857 {
      padding: var(--sectionPadding);
    background-color: #f7f7f7;
      
  }
  #logos-857 .cs-container {
      width: 100%;
      max-width: 50rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(3rem, 6vw, 4rem);
  }
  #logos-857 .cs-content {
      text-align: center;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  #logos-857 .cs-topper {
      font-size: var(--topperFontSize);
      line-height: 1.2em;
      text-transform: uppercase;
      text-align: inherit;
      letter-spacing: .1em;
      font-weight: 900;
      color: var(--primary);
      margin-bottom: 0.25rem;
      display: block;
  }

  #logos-857 .cs-title {
      font-size: var(--headerFontSize);
      font-weight: 700;
      line-height: 1.2em;
      text-align: inherit;
      max-width: 43.75rem;
      margin: 0 0 1rem 0;
      color: var(--headerColor);
      position: relative;
  }

  /* Swiper specific styles */
  #logos-857 .swiper {
      width: 100%;
      overflow: visible;
    }

  #logos-857 .swiper-wrapper {
      display: flex;
      align-items: center;
  }

  #logos-857 .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      padding: 0.5rem;
  }

  #logos-857 .cs-logo {
      width: auto;
      max-width: 9rem;
      height: 4rem;
      object-fit: contain;
      margin: 0;
      display: block;
      transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
      
  }

  #logos-857 .cs-logo:hover {
    transform: translateY(-5px);

}
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #logos-857 .cs-logo {
      max-width: 10rem;
      height: 5rem;
  }
}

/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #logos-857 .cs-container {
      max-width: 80rem;
  }
  
  #logos-857 .cs-logo {
      max-width: 12rem;
      height: 6rem;
      width: auto;
  }
}

/* Custom styles for smooth infinite scroll */
.swiper-wrapper {
  transition-timing-function: linear !important;
}
                                
/*-- -------------------------- -->
        <---          Services          -->
        <--- -------------------------- -*/
        /* Mobile - 360px */
        @media only screen and (min-width: 0rem) {
          #services-1169 {
              background-color: #fff;
              padding: var(--sectionPadding);
          }
          #services-1169 .cs-container {
              display: flex;
              flex-direction: column;
              align-items: center;
              margin: auto;
              /* changes to 1440px at large desktop */
              max-width: 51.5rem;
              width: 100%;
              /* 48px - 64px */
              gap: clamp(3rem, 6vw, 4rem);
          }
          #services-1169 .cs-content {
              display: flex;
              flex-direction: column;
              /* centers content horizontally, set to flex-start to left align */
              align-items: center;
              width: 100%;
              /* set text align to left if content needs to be left aligned */
              text-align: center;
          }

          #services-1169 .cs-topper {
              font-size: var(--topperFontSize);
              line-height: 1.2em;
              text-transform: uppercase;
              text-align: inherit;
              letter-spacing: .1em;
              font-weight: 900;
              color: var(--primary);
              margin-bottom: 0.25rem;
              display: block;
          }

          #services-1169 .cs-title {
              font-size: clamp(1.9375rem, 3.9vw, 3.0625rem);
              font-weight: 700;
              line-height: 1.2em;
              text-align: inherit;
              max-width: 65rem;
              margin: 0 0 1rem 0;
              color: var(--headerColor);
              position: relative;
          }

          #services-1169 .cs-text {
              font-size: clamp(1rem, 2.5vw, 1.25rem);
              line-height: 1.5em;
              text-align: inherit;
              width: 100%;
              max-width: 73rem;
              margin: 0;
              color: var(--bodyTextColor);
          }

          #services-1169 .cs-card-group {
              display: grid;
              align-items: stretch;
              grid-template-columns: repeat(12, 1fr);
              margin: 0;
              width: 100%;
              padding: 0;
              /* 16px - 20px */
              gap: clamp(1rem, 2vw, 1.25rem);
          }
          #services-1169 .cs-item {
              z-index: 1;
              position: relative;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              background-color: #f7f7f7;
              width: 100%;
              list-style: none;
              text-align: left;
              grid-column: span 12;
              max-width: 25rem;
              margin: 0 auto;
          }
          #services-1169 .cs-item:hover .cs-picture img {
              transform: scale(1.2);
          }
          #services-1169 .cs-item:hover .cs-h3,
          #services-1169 .cs-item:hover .cs-link {
              color: var(--primary);
          }
          #services-1169 .cs-item:hover .cs-arrow {
              filter: initial;
          }
          #services-1169 .cs-picture {
              position: relative;
              display: block;
              /* 180px - 240px */
              height: clamp(11.25rem, 24vw, 15rem);
              width: 100%;
              /* clips the image from overflowing parent on hover */
              overflow: hidden;
          }
          #services-1169 .cs-picture img {
              z-index: -1;
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              object-fit: cover;
              transition: transform 0.65s;
          }
          #services-1169 .cs-info {
              display: flex;
              flex-direction: column;
              padding: 1.5rem;
          }
          #services-1169 .cs-h3 {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              width: 100%;
              /* prevents padding and border from affecting height and width */
              box-sizing: border-box;
              /* 20px - 25px */
              font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
              line-height: 1.5em;
              font-weight: 700;
              color: var(--headerColor);
              transition: background-color 0.3s;
              text-align: inherit;
              margin: 0 0 0.75rem 0;
              transition: color 0.3s;
          }
          #services-1169 .cs-item-text {
              width: 100%;
              /* prevents padding and border from affecting height and width */
              box-sizing: border-box;
              font-size: clamp(0.875rem, 1.5vw, 1rem);
              line-height: 1.5em;
              color: var(--bodyTextColor);
              text-align: inherit;
              margin: 0;
          }
          #services-1169 .cs-link {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              text-decoration: none;
              font-size: 1rem;
              line-height: 1.2em;
              font-weight: 700;
              color: var(--headerColor);
              text-align: inherit;
              margin-top: 1.25rem;
              transition: color 0.3s;
          }
          #services-1169 .cs-link:hover .cs-arrow {
              transform: translateX(0.25rem);
          }
          #services-1169 .cs-arrow {
              filter: grayscale(1) brightness(0);
              display: block;
              height: auto;
              width: 1.25rem;
              margin-left: 0.5rem;
              transition:
                  filter 0.3s,
                  transform 0.3s;
          }
        }
        /* Tablet - 768px */
        @media only screen and (min-width: 48rem) {
          #services-1169 .cs-container {
              max-width: 59rem;
          }
          #services-1169 .cs-item {
              grid-column: span 4;
              max-width: initial;
          }
          
          /* Bottom 2 cards centered */
          #services-1169 .cs-item:nth-child(4) {
              grid-column: 3 / span 4;
          }
          #services-1169 .cs-item:nth-child(5) {
              grid-column: 7 / span 4;
          }
        }
        /* Large Desktop - 1300px */
        @media only screen and (min-width: 81.25rem) {
          #services-1169 .cs-container {
              max-width: 90rem;
          }
        }

                                                     
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-2283 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-2283 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-2283 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-2283 .cs-content-images {
    display: none;
  }
  #sbs-2283 .cs-text {
    max-width: 100%;
    margin-bottom: 1rem;
  }
  #sbs-2283 .cs-text:last-of-type {
    margin: 0;
  }
  #sbs-2283 .cs-card-group {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    order: 3;
  }
  #sbs-2283 .cs-item {
    list-style: none;
    /* 24px - 32px */
    padding: clamp(1.5rem, 5vw, 2rem);
    border-left: 4px solid var(--primary);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
  }
  #sbs-2283 .cs-item:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.05;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbs-2283 .cs-item-picture {
    display: none;
  }
  #sbs-2283 .cs-h3 {
    font-size: 1.4rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
  }
  #sbs-2283 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-2283 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #sbs-2283 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-2283 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-2283 .cs-image-group {
    /* scales the whole group based on the view width size and stop when that vales equals .74em, resets at desktop */
    font-size: min(2.48vw, 1rem);
    width: 36.5em;
    height: 38.6875em;
    display: block;
    position: relative;
    z-index: 1;
    order: 2;
  }
  #sbs-2283 .cs-picture {
    display: block;
    position: absolute;
  }
  #sbs-2283 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-2283 .cs-picture1 {
    width: 23.8125em;
    height: 23.8125em;
    border-right: 0.875em solid var(--primary);
    border-bottom: 0.875em solid var(--primary);
    top: 0;
    bottom: 17.5625em;
    left: 0;
    position: absolute;
  }
  #sbs-2283 .cs-picture2 {
    width: 23.875em;
    height: 20.375em;
    right: 0;
    bottom: 0;
    z-index: 3;
    border-right: 0.875em solid var(--secondary);
    border-bottom: 0.875em solid var(--secondary);
    position: absolute;
  }
  #sbs-2283 .cs-picture3 {
    width: clamp(12em, 10vw, 13.4375em);
    height: clamp(8rem, 10vw, 13rem);
    bottom: 10em;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-2283 .cs-container {
    max-width: 80rem;
    gap: 2rem;
  }
  #sbs-2283 .cs-content {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 2.75rem;
    position: relative;
    z-index: 10;
  }
  #sbs-2283 .cs-flex {
    width: 100%;
    max-width: 46.125rem;
  }
  #sbs-2283 .cs-content-images {
    width: 45vw;
    max-width: 25.75rem;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
    order: -1;
  }
  #sbs-2283 .cs-li {
    align-items: center;
  }
  #sbs-2283 .cs-image-group {
    display: none;
  }
  #sbs-2283 .cs-picture1 {
    width: 100%;
    /* -133px to -165px */
    height: calc(100% + clamp(8.3125rem, 13vw, 10.3125rem));
    top: 0;
  }
  #sbs-2283 .cs-picture3 {
    width: 56%;
    min-height: 100px;
    max-width: 14.5625rem;
    left: 50%;
    top: calc(100% + 5rem);
    transform: translateX(-50%);
  }
  #sbs-2283 .cs-picture3 img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    top: auto;
    left: -7rem;
    object-fit: initial;
  }
  #sbs-2283 .cs-card-group {
    width: 50%;
    max-width: 32.5625rem;
    margin-left: auto;
    position: relative;
    z-index: 11;
  }
  #sbs-2283 .cs-item-picture {
    width: 30vw;
    max-width: 25.8125rem;
    border: none;
    display: block;
    position: absolute;
    /* 72px - 130px */
    right: calc(100% + clamp(4.5rem, 8.5vw, 8.125rem));
    top: 2.25rem;
    bottom: 0;
  }
  #sbs-2283 .cs-item-picture:before {
    display: none;
  }
  #sbs-2283 .cs-picture2 {
    width: 100%;
    height: 100%;
  }
}
                                
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-1672 {
      padding: var(--sectionPadding);
  }

  #reviews-1672 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(2.5rem, 4.5vw, 4rem);
  }

  #reviews-1672 .cs-content {
      text-align: left;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
  }

  #reviews-1672 .cs-topper {
      font-size: 1rem;
      color: var(--primary);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 0.5rem;
  }

  #reviews-1672 .cs-title {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      color: var(--headerColor);
      margin: 0;
  }

  #reviews-1672 .swiper {
      width: 100%;
  }

  #reviews-1672 .swiper-wrapper {
      align-items: stretch;
  }

  #reviews-1672 .swiper-slide {
      height: auto;
      display: flex;
  }

  #reviews-1672 .cs-item {
      list-style: none;
      width: 100%;
      height: 100%;
      padding: clamp(1.25rem, 3.15vw, 2.5rem);
      background-color: #f7f7f7;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      position: relative;
      gap: clamp(1.5rem, 4vw, 3rem);
      border-radius: 1rem;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  #reviews-1672 .cs-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  #reviews-1672 .cs-flex-group {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
  }

  #reviews-1672 .cs-picture {
      width: 3.25rem;
      height: 3.25rem;
      border-radius: 50%;
      overflow: hidden;
      position: relative;
  }

  #reviews-1672 .cs-profile {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  #reviews-1672 .cs-name {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      margin: 0;
      margin-top: auto;
      color: var(--headerColor);
      display: block;
  }

  #reviews-1672 .cs-job {
      font-size: 1rem;
      line-height: 1.5em;
      font-weight: 400;
      margin: 0;
      color: var(--bodyTextColor);
      display: block;
  }

  #reviews-1672 .wrapper {
      display: flex;
      flex-direction: column;
      gap: 1rem;
  }

  #reviews-1672 .cs-item-stars {
      width: 6.75rem;
      height: auto;
  }

  #reviews-1672 .cs-review {
      font-size: clamp(0.875rem, 1.6vw, 1.25rem);
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
      z-index: 1;
  }

  #reviews-1672 .cs-quote {
      width: 5.375rem;
      height: auto;
      position: absolute;
      right: 1rem;
      bottom: 1rem;
      z-index: 0;
      opacity: 0.3;
  }

  /* Navigation Buttons Container */
  #reviews-1672 .navigation-buttons {
      display: flex;
      justify-content: center;
      gap: 1.5rem;
      z-index: 10;
  }

  /* Navigation Buttons */
  #reviews-1672 .swiper-button-next,
  #reviews-1672 .swiper-button-prev {
      width: 3rem;
      height: 3rem;
      margin-top: 0;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: static;
  }

  #reviews-1672 .swiper-button-next:after,
  #reviews-1672 .swiper-button-prev:after {
      font-size: 1rem;
      font-weight: 700;
      color: var(--primary);
  }

  #reviews-1672 .swiper-button-next:hover,
  #reviews-1672 .swiper-button-prev:hover {
      background: var(--primary);
      transform: scale(1.1);
  }

  #reviews-1672 .swiper-button-next:hover:after,
  #reviews-1672 .swiper-button-prev:hover:after {
      color: #fff;
  }

  #reviews-1672 .swiper-button-disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-1672 .swiper-slide {
      width: auto;
  }
}
                                
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-51 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #cta-51 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-51 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #cta-51 .cs-topper {
    color: var(--secondary);
  }
  #cta-51 .cs-title,
  #cta-51 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #cta-51 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
    opacity: .8;
  }
  #cta-51 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-51 .cs-picture {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-51 .cs-picture:before {
    /* black color overlay */
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: .8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-51 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}