/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    :root {
      --primaryLight: #3F88F5;
      --secondary: #ffba43;
      --secondaryLight: #ffba43;
      --headerColor: #1a1a1a;
      --bodyTextColor: #4e4b66;
      --bodyTextColorWhite: #fafbfc;
      /* 13px - 16px */
      --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
      /* 31px - 49px */
      --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
      --bodyFontSize: 1rem;
      /* 60px - 100px top and bottom */
      --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
    }
    body,
    html {
      margin: 0;
      padding: 0;
      font-size: inherit;
    }
    *,
    *:before,
    *:after {
      /* prevents padding from affecting height and width */
      box-sizing: border-box;
    }
    .cs-topper {
      font-size: var(--topperFontSize);
      line-height: 1.2em;
      text-transform: uppercase;
      text-align: inherit;
      letter-spacing: .1em;
      font-weight: 700;
      color: var(--primaryLight);
      margin-bottom: 0.25rem;
      display: block;
    }
    .cs-title {
      font-size: var(--headerFontSize);
      font-weight: 900;
      line-height: 1.2em;
      text-align: inherit;
      max-width: 43.75rem;
      margin: 0 0 1rem 0;
      color: var(--headerColor);
      position: relative;
    }
    .cs-color {
      color: var(--primaryLight);
    }
    .cs-text {
      font-size: var(--bodyFontSize);
      line-height: 1.5em;
      text-align: inherit;
      width: 100%;
      max-width: 40.625rem;
      margin: 0;
      color: var(--bodyTextColor);
    }
    .button-blue {
      min-width: 12.5rem;
      line-height: 4rem;
      height: auto;
    }
    @keyframes floatAnimation {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-2em);
      }
      100% {
        transform: translateY(0);
      }
    }
    @keyframes floatAnimation2 {
      0% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-1em);
      }
      100% {
        transform: translateY(0);
      }
    }
  }
  /*-- -------------------------- -->
  <---            Hero            -->
  <--- -------------------------- -*/
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
    #hero-1115 {
      /* 200px - 300px top */
      padding: clamp(12.5rem, 16.82vw, 13.75rem) 1rem 6.25rem;
      background-color: #f7f7f7;
      /* clips the svg wave from overflowing */
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    #hero-1115:before {
      /* textured pattern */
      content: "";
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      /* changes to a desktop image at tablet */
      /* background: url("/images/landing-page/splatter-bg-m.png"); */
      background-size: auto;
      background-position: center;
      background-repeat: repeat;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      /* prevents the mouse from interacting with itand also in dev tool mode */
      pointer-events: none;
    }
    #hero-1115 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 3rem;
    }
    #hero-1115 .cs-content {
      max-width: 39.375rem;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    #hero-1115 .cs-topper {
      font-size: 1rem;
      line-height: 1.2em;
      text-transform: uppercase;
      text-align: inherit;
      letter-spacing: 0.1em;
      font-weight: 700;
      color: var(--primaryLight);
      margin-bottom: 0.25rem;
      display: block;
    }
    #hero-1115 .cs-title {
      /* 39px - 61px */
      font-size: clamp(2.4375rem, 5vw, 3.8125rem);
      font-weight: 900;
      line-height: 1.2em;
      text-align: center;
      /* 23 characters including spaces wide */
      max-width: 23ch;
      margin: 0 0 1rem 0;
      color: var(--headerColor);
      position: relative;
    }
    #hero-1115 .cs-text {
      /* 16px - 20px */
      font-size: clamp(1rem, 1.5vw, 1.25rem);
      line-height: 1.5em;
      text-align: center;
      width: 100%;
      max-width: 33.1875rem;
      /* 28px - 40px */
      margin: 0 0 clamp(1.75rem, 3.92vw, 2.5rem) 0;
      color: var(--bodyTextColor);
    }
    #hero-1115 .cs-image-group-wrapper {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 1.25rem;
      position: relative;
    }
    #hero-1115 .cs-image-group {
      /* we use ems for everything inside the cs-image-group so they pull their value for em from the cs-image-group container that we set.  This min-max property lets us tie the font size to the view width of the screen and grows proportionally with every pixel wide the screen gets until the value the view width units = .75em, resets at small desktop */
      font-size: min(2.2vw, .75em);
      width: 40.8125em;
      height: 38.625em;
      position: relative;
      z-index: 2;
    }
    #hero-1115 .cs-floater {
      /* 50px - 120px */
      width: clamp(3.125rem, 8vw, 5.5rem);
      height: clamp(3.125rem, 8vw, 5.5rem);
      background-color: var(--primary);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 8.125em;
      /* changes to -74px at large desktop */
      left: -1.5625em;
      transform: rotate(-15deg);
      animation-name: floatAnimation2;
      animation-duration: 6s;
      animation-timing-function: ease-in-out;
      animation-fill-mode: forwards;
      animation-iteration-count: infinite;
    }
    #hero-1115 .cs-floater-icon {
      width: 3em;
      height: auto;
    }
    #hero-1115 .cs-picture {
      width: 43.75em;
      height: 31.25em;
      display: flex;
      align-items: flex-end;
      position: absolute;
      left: 50%;
      top: 8.4375em;
      transform: translateX(-50%);
    }
    #hero-1115 .cs-picture img {
      width: 100%;
      height: auto;
      object-position: top;
    }
    #hero-1115 .cs-picture1 {
      /* we set a height on the top image to cut off the bottom of it and hide it with overflow:hidden where the curved bottom picture meets it. The top image is what overlaps the "curve" of the bottom image.  */
      height: 69.5%;
      transform: translateX(-50%);
    }
    #hero-1115 .cs-graphic {
      width: 36.625em;
      height: auto;
      position: absolute;
      z-index: -1;
    }
    #hero-1115 .cs-graphic1 {
      top: 0;
      right: 0;
    }
    #hero-1115 .cs-graphic2 {
      bottom: 0;
      left: 0;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #hero-1115 .cs-image-group {
      font-size: min(1.13vw, 1em);
      /* pushes down to create the space for the cs-volunteer to drop down 68px, since its positioned relative to the cs-image-group-wrapper div at bottom 0, the marign-bottom on the cs-image-group pushes down on the wrapper div, making the cs-volunteer drop down with it since it is positioned to the bottom of the wrapper div */
      margin-bottom: 4.25rem;
    }
  }
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #hero-1115 {
      text-align: left;
    }
    #hero-1115 .cs-container {
      flex-direction: row;
      justify-content: space-between;
    }
    #hero-1115 .cs-content {
      width: 40vw;
      /* prevents flex-box from squishing it */
      flex: none;
      align-items: flex-start;
    }
    #hero-1115 .cs-picture {
      left: 40%;
    }
    #hero-1115 .cs-title,
    #hero-1115 .cs-text {
      text-align: left;
    }
  }
  /* Large Desktop - 1400px */
  @media only screen and (min-width: 87.5rem) {
    #hero-1115 .cs-image-group-wrapper {
      /* 48px - 160px */
      right: calc(clamp(2rem, 3vw, 10rem)*-1);
    }
    #hero-1115 .cs-image-group {
      margin: 0;
      z-index: 10;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #hero-1115 {
      background-color: rgba(0, 0, 0, 0.2);
    }
    body.dark-mode #hero-1115:before {
      opacity: 0.2;
    }
    body.dark-mode #hero-1115 .cs-topper,
    body.dark-mode #hero-1115 .cs-title,
    body.dark-mode #hero-1115 .cs-text,
    body.dark-mode #hero-1115 .cs-header,
    body.dark-mode #hero-1115 .cs-percentage {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode #hero-1115 .cs-topper,
    body.dark-mode #hero-1115 .cs-text {
      opacity: 0.8;
    }
    body.dark-mode #hero-1115 .cs-volunteer,
    body.dark-mode #hero-1115 .cs-donations {
      background-color: var(--medium);
    }
    body.dark-mode #hero-1115 .cs-progress {
      background-color: var(--accent);
    }
    body.dark-mode #hero-1115 .cs-volunteer-img {
      border-color: var(--medium);
      background-color: var(--medium);
    }
    body.dark-mode #hero-1115 .cs-arrow {
      filter: grayscale(1) brightness(10000%);
    }
  }
  /*-- -------------------------- -->
  <---          Services          -->
  <--- -------------------------- -*/
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
    #services-690 {
      padding: var(--sectionPadding);
    }
    #services-690 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #services-690 .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;
    }
    #services-690 .cs-flex-group {
      /* prevents flexbox from squishing it */
      flex: none;
    }
    #services-690 .cs-text {
      max-width: 33.8125rem;
    }
    #services-690 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      flex-direction: column;
      row-gap: 1rem;
    }
    #services-690 .cs-item {
      list-style: none;
      width: 100%;
      /* 24px - 40px top & bottom */
      padding: clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
      background-color: #f7f8f8;
      box-sizing: border-box;
      border-radius: 1rem;
      transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    }
    #services-690 .cs-item:hover {
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 50px;
      transform: translateY(-0.4375rem);
    }
    #services-690 .cs-item:hover .cs-picture:before {
      width: 100%;
      height: 100%;
      opacity: 1;
    }
    #services-690 .cs-item:nth-of-type(2) {
      background: linear-gradient(145deg, #3f88f5 14.24%, #4611b8 79.49%);
    }
    #services-690 .cs-item:nth-of-type(2) .cs-h3,
    #services-690 .cs-item:nth-of-type(2) .cs-item-text {
      color: var(--bodyTextColorWhite);
    }
    #services-690 .cs-link {
      text-decoration: none;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    #services-690 .cs-picture {
      width: 4rem;
      height: 4rem;
      margin: 0;
      margin-bottom: 1.5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0px 12px 30px rgba(26, 26, 26, 0.04);
      position: relative;
      z-index: 1;
    }
    #services-690 .cs-icon {
      height: 2rem;
      width: auto;
    }
    #services-690 .cs-h3 {
      font-size: 1.25rem;
      font-weight: 900;
      text-align: center;
      line-height: 1.2em;
      margin: 0;
      margin-bottom: 0.75rem;
      color: var(--headerColor);
      transition: color 0.3s;
    }
    #services-690 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      text-align: center;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
      transition: color 0.3s;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #services-690 .cs-container {
      max-width: 80rem;
    }
    #services-690 .cs-content {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 3rem;
    }
    #services-690 .cs-flex-group {
      width: 50%;
    }
    #services-690 .cs-card-group {
      /* pushes down the same amount the 2nd cards are translated down to maintain the even spacing at the bottom of the cs-card-group */
      margin-bottom: 2.5rem;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      column-gap: 1.25rem;
    }
    #services-690 .cs-item {
      width: 30vw;
      max-width: 25.8125rem;
    }
    #services-690 .cs-item:nth-of-type(2) {
      transform: translateY(2.5rem);
    }
    #services-690 .cs-item:nth-of-type(2):hover {
      /* make these cards a separate hover translate amount, they're already translated 40px down, so to match the same hover animations as the other cards we just subtract their translate values from the 40px and they will move up by the same amount as the other cards */
      transform: translateY(2.0625rem);
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #services-690 .cs-topper {
      color: var(--primaryLight);
    }
    body.dark-mode #services-690 .cs-title,
    body.dark-mode #services-690 .cs-text,
    body.dark-mode #services-690 .cs-h3,
    body.dark-mode #services-690 .cs-item-text {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-690 .cs-text,
    body.dark-mode #services-690 .cs-item-text {
      opacity: 0.8;
    }
    body.dark-mode #services-690 .cs-item {
      background-color: var(--medium);
    }
  }
  /*-- -------------------------- -->
  <---       Side By Side         -->
  <--- -------------------------- -*/
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
    #sbs-1073 {
      padding: var(--sectionPadding);
      padding-top: 0;
    }
    #sbs-1073 .cs-container {
      width: 100%;
      /* changes to 1280px at desktop */
      max-width: 34.375rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #sbs-1073 .cs-content {
      /* set text align to left if content needs to be left aligned */
      text-align: left;
      width: 100%;
      /* changes to 433px at desktop */
      max-width: 33.875rem;
      display: flex;
      flex-direction: column;
      /* centers content horizontally, set to flex-start to left align */
      align-items: flex-start;
    }
    #sbs-1073 .cs-text {
      margin-bottom: 1rem;
    }
    #sbs-1073 .cs-text:last-of-type {
      margin-bottom: 2rem;
    }
    #sbs-1073 .cs-list {
      max-width: 39.375rem;
      margin: 0 0 2rem 0;
      padding: 0;
      /* clips the bullets to create the half circle */
      overflow: hidden;
    }
    #sbs-1073 .cs-li {
      font-size: 1rem;
      list-style: none;
      margin: 0 0 0.5rem 0;
      color: var(--bodyTextColor);
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 0.75rem;
      position: relative;
    }
    #sbs-1073 .cs-li:before {
      /* bullet */
      content: "";
      width: 1rem;
      height: 1rem;
      margin-top: 0.1875rem;
      /* make it overflow the parent by half it's width to make an eclipse */
      margin-left: -0.5rem;
      background: var(--primaryLight);
      border-radius: 50%;
      display: block;
      /* prevents flexbox from squishing it */
      flex: none;
    }
    #sbs-1073 .cs-link {
      text-decoration: none;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.75rem;
      position: relative;
    }
    #sbs-1073 .cs-link:hover .cs-wrapper {
      transform: scale(1.1);
    }
    #sbs-1073 .cs-wrapper {
      width: 3.5rem;
      height: 3.5rem;
      background-color: var(--primary);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* prevents flexbox from squishing it */
      flex: none;
      transition: transform 0.3s;
    }
    #sbs-1073 .cs-icon {
      width: 1.5rem;
      height: auto;
      display: block;
      transition: transform 0.3s;
    }
    #sbs-1073 .cs-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.25rem;
    }
    #sbs-1073 .cs-header {
      font-size: 0.875rem;
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
      display: block;
    }
    #sbs-1073 .cs-link-content {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 4vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: 700;
      margin: 0;
      color: var(--headerColor);
      display: block;
    }
    #sbs-1073 .cs-image-group {
      /* scales the whole group based on the view width size and stop when that vales equals .745em, resets at desktop */
      font-size: min(1.959vw, .745em);
      width: 46.125em;
      height: 41.375em;
      display: block;
      position: relative;
      z-index: 1;
    }
    #sbs-1073 .cs-image-group:before {
      content: '';
      width: 36.125em;
      height: 38em;
      background: linear-gradient(142deg, #3f88f5 20.84%, #4611b8 84.94%);
      border-radius: 6.25em 12.5em 6.25em 6.25em;
      box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.25);
      opacity: 1;
      position: absolute;
      display: block;
      top: 0;
      left: 7em;
      z-index: -1;
    }
    #sbs-1073 .cs-picture {
      position: absolute;
      overflow: hidden;
      box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
    }
    #sbs-1073 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
    #sbs-1073 .cs-picture1 {
      width: 13.6875em;
      height: 27.5em;
      border-radius: 1em 0 0 1em;
      top: 6.375em;
      left: 0;
      z-index: -1;
    }
    #sbs-1073 .cs-picture2 {
      width: 19.1875em;
      height: 37.5em;
      border-radius: 1em;
      bottom: 0;
      left: 13.5625em;
      z-index: 10;
    }
    #sbs-1073 .cs-picture3 {
      width: 13.625em;
      height: 27.5em;
      border-radius: 0 1em 1em 0;
      top: 11.375em;
      right: 0;
      z-index: -1;
    }
    #sbs-1073 .cs-stripes {
      width: 36.125em;
      height: auto;
      display: block;
      position: absolute;
      top: 0em;
      left: 4.5em;
      z-index: -2;
    }
  }
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #sbs-1073 .cs-container {
      max-width: 82.5rem;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    #sbs-1073 .cs-content {
      max-width: 32.4375rem;
    }
    #sbs-1073 .cs-image-group {
      font-size: min(1.2vw, 1rem);
      flex: none;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #sbs-1073 .cs-title,
    body.dark-mode #sbs-1073 .cs-text,
    body.dark-mode #sbs-1073 .cs-li,
    body.dark-mode #sbs-1073 .cs-link-content,
    body.dark-mode #sbs-1073 .cs-header {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode #sbs-1073 .cs-text,
    body.dark-mode #sbs-1073 .cs-li,
    body.dark-mode #sbs-1073 .cs-header {
      opacity: 0.8;
    }
    body.dark-mode #sbs-1073 .cs-stripes {
      opacity: 0.2;
    }
  }
  /*-- -------------------------- -->
  <---          Services          -->
  <--- -------------------------- -*/
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
    #services-1626 {
      padding: var(--sectionPadding);
      padding-top: 0;
      display: none;
    }
    #services-1626 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 34.375em;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #services-1626 .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;
    }
    #services-1626 .cs-title,
    #services-1626 .cs-text,
    #services-1626 .cs-topper {
      text-align: center;
    }
    #services-1626 .cs-chevron {
      --chevronColor: var(--primary);
      width: 3rem;
      height: auto;
    }
    #services-1626 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      column-gap: clamp(1rem, 2.5vw, 1.25rem);
      /* 28px - 40px */
      row-gap: clamp(1.75rem, 2.5vw, 2.5rem);
    }
    #services-1626 .cs-item {
      list-style: none;
      width: 100%;
      display: flex;
      grid-column: span 12;
      flex-direction: column;
      align-items: center;
    }
    #services-1626 .cs-item:hover .cs-picture img {
      opacity: .7;
      transform: scale(1.05);
    }
    #services-1626 .cs-link {
      text-decoration: none;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    #services-1626 .cs-picture {
      width: 100%;
      height: auto;
      margin-bottom: 1.5rem;
      display: block;
      position: relative;
    }
    #services-1626 .cs-picture img {
      height: auto;
      width: 100%;
      transition: transform .6s, opacity .3s;
    }
    #services-1626 .button-blue {
      font-size: 1rem;
    }
    #services-1626 .cs-h3 {
      font-size: 1.25rem;
      line-height: 1.2em;
      font-weight: 700;
      text-align: left;
      margin: 0 0 0.75rem 0;
      color: var(--headerColor);
    }
    #services-1626 .cs-item-text {
      font-size: 1rem;
      line-height: 1.5em;
      text-align: left;
      margin: 0 0 1.5rem 0;
      color: var(--bodyTextColor);
    }
    #services-1626 .cs-fake-link {
      font-size: 1rem;
      line-height: 1.2em;
      font-weight: 700;
      margin: 0;
      margin-top: auto;
      color: var(--primary);
      display: inline-flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.5rem;
    }
    #services-1626 .cs-fake-link:hover .cs-icon {
      transform: translateX(0.5rem);
    }
    #services-1626 .cs-icon {
      width: 1.25rem;
      height: auto;
      display: block;
      transition: transform .3s;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #services-1626 .cs-container {
      max-width: 80rem;
    }
    #services-1626 .cs-item {
      grid-column: span 4;
    }
  }
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #services-1626 {
      display: block;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #services-1626 .cs-title,
    body.dark-mode #services-1626 .cs-text,
    body.dark-mode #services-1626 .cs-h3,
    body.dark-mode #services-1626 .cs-item-text {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode #services-1626 .cs-text,
    body.dark-mode #services-1626 .cs-item-text {
      opacity: .8;
    }
  }
  /*-- -------------------------- -->
  <---           Videos           -->
  <--- -------------------------- -*/
  /* Mobile */
  @media only screen and (min-width: 0em) {
    #tools {
      padding: var(--sectionPadding);
      padding-top: 0;
    }
    #tools .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: clamp(1rem, 4vw, 1.25rem);
    }
    #tools .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;
      margin-bottom: clamp(3rem, 6.7vw, 4rem);
    }
    #tools .cs-title {
      margin: 0;
      max-width: 27ch;
    }
    #tools .iframe {
      width: 100%;
      height: 100vw;
      position: relative;
      z-index: 1;
    }
    #tools .iframe {
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      margin-bottom: 1em;
      height: 0px;
      overflow: hidden;
      padding-top: 56.25%;
      position: relative;
      width: 100%;
      border-radius: 0.4em;
    }
    #tools h3 {
      font-size: 1.25rem;
      margin: 0 0 1rem;
    }
    #tools .item {
      grid-column: span 12;
  }
  }
  /* In Beteween */
  @media only screen and (min-width: 768px) {
    #tools .item {
      grid-column: span 4;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0em) {
    body.dark-mode #tools .cs-title,
    body.dark-mode #tools .cs-text {
      color: var(--bodyTextColorWhite);
    }
  }
  /*-- -------------------------- -->
  <---          Reviews           -->
  <--- -------------------------- -*/
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
    #reviews-1455 {
      padding: var(--sectionPadding);
      background-color: #f7f7f7;
    }
    #reviews-1455 .cs-container {
      width: 100%;
      max-width: 90rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #reviews-1455 .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;
    }
    #reviews-1455 .cs-card-group {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      /* 16px - 20px */
      gap: clamp(1rem, 2.5vw, 1.25rem);
    }
    #reviews-1455 .cs-item {
      list-style: none;
      width: 100%;
      max-width: 39.375rem;
      /* 20px - 40px top & bottom */
      /* 20px - 40px left & right */
      padding: clamp(1.25rem, 3.15vw, 2.5rem) clamp(1.25rem, 3.15vw, 2.5rem);
      background-color: #fff;
      border-radius: 1rem;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      position: relative;
    }
    #reviews-1455 .cs-quote {
      /* 48px - 72px */
      width: clamp(3rem, 6vw, 4.5rem);
      height: auto;
      margin-bottom: 2rem;
    }
    #reviews-1455 .cs-review {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.6vw, 1rem);
      line-height: 1.5em;
      margin: 0;
      /* 20px - 40px */
      margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
      color: var(--bodyTextColor);
    }
    #reviews-1455 .cs-flex-group {
      /* this margin top auto will push everything up and force the cs-flex-group to the bottom of the container. This is to account for review cards with different heights because of more or less text and makes the cards more responsive to changing text */
      margin-top: auto;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.75rem;
    }
    #reviews-1455 .cs-profile {
      width: 3.125rem;
      height: auto;
      border-radius: 50%;
      /* clips image corners to make circle */
      overflow: hidden;
      position: relative;
      display: block;
    }
    #reviews-1455 .cs-profile img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes the image behave like a background image */
      object-fit: cover;
    }
    #reviews-1455 .cs-name {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.3vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: 700;
      margin: 0;
      /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
      margin-top: auto;
      color: var(--headerColor);
      display: block;
    }
    #reviews-1455 .cs-job {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.6vw, 1rem);
      line-height: 1.5em;
      font-weight: 400;
      margin: 0;
      color: var(--bodyTextColor);
      display: block;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #reviews-1455 .cs-card-group {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      align-items: stretch;
    }
    #reviews-1455 .cs-item {
      grid-column: span 6;
      max-width: 100%;
    }
    #reviews-1455 .cs-item:nth-of-type(3) {
      grid-column: span 12;
    }
  }
  /* Desktop - 1200px */
  @media only screen and (min-width: 75rem) {
    #reviews-1455 .cs-item {
      grid-column: span 4;
    }
    #reviews-1455 .cs-item:nth-of-type(3) {
      grid-column: span 4;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #reviews-1455 {
      background-color: rgba(0, 0, 0, 0.2);
    }
    body.dark-mode #reviews-1455 .cs-title,
    body.dark-mode #reviews-1455 .cs-text,
    body.dark-mode #reviews-1455 .cs-review,
    body.dark-mode #reviews-1455 .cs-name {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode #reviews-1455 .cs-text {
      opacity: .8;
    }
    body.dark-mode #reviews-1455 .cs-item {
      background-color: var(--accent);
    }
    body.dark-mode #reviews-1455 .cs-job {
      color: var(--bodyTextColorWhite);
      opacity: 0.8;
    }
  }
  /*-- -------------------------- -->
  <---           Video            -->
  <--- -------------------------- -*/
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
    #video-1683 {
      padding: var(--sectionPadding);
      padding-top: 0;
      background-color: #f7f7f7;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    #video-1683:before {
      content: '';
      width: 100%;
      height: 85%;
      background: linear-gradient(180deg, #4d94ff 0%, #236ddb 52.5%, #5d28d1 100%);
      opacity: 1;
      position: absolute;
      display: block;
      bottom: 0;
      left: 0;
      z-index: -1;
    }
    #video-1683 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #video-1683 .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;
    }
    #video-1683 .cs-title {
      margin: 0;
      max-width: 20ch;
    }
    #video-1683 .cs-big-link {
      width: 100%;
      /* 460px - 600px */
      height: clamp(14.75rem, 44vw, 37.5rem);
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 1;
      box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
    }
    #video-1683 .cs-background {
      width: 100%;
      height: 100%;
      display: block;
      border-radius: 1rem;
      position: relative;
      top: 0;
      left: 0;
      z-index: 1;
      /* clips the img from overflowing the container on hover */
      overflow: hidden;
    }
    #video-1683 .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: transform 0.7s;
    }
    #video-1683 .cs-card-group {
      width: 100%;
      margin: 0 auto;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      row-gap: 1.75rem;
    }
    #video-1683 .cs-item {
      list-style: none;
      width: 100%;
      max-width: 28.125rem;
      margin: 0 auto;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding-bottom: 1.75rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      grid-column: span 12;
      grid-row: span 1;
      position: relative;
      z-index: 1;
      transition: box-shadow 0.3s, border-color 0.3s;
    }
    #video-1683 .cs-item:last-of-type {
      padding-bottom: 0;
      border-bottom: none;
    }
    #video-1683 .cs-h3 {
      /* 20px - 31px */
      font-size: clamp(1.25rem, 2.6vw, 1.9375rem);
      font-weight: bold;
      line-height: 1.2em;
      text-align: inherit;
      margin: 0 0 1rem;
      color: var(--bodyTextColorWhite);
      transition: color 0.3s;
    }
    #video-1683 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      margin: 0 0 1.5rem 0;
      padding: 0;
      color: var(--bodyTextColorWhite);
    }
    #video-1683 .cs-link {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.2em;
      text-align: inherit;
      text-decoration: none;
      margin-top: auto;
      color: var(--bodyTextColorWhite);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.625rem;
      transition: color 0.3s;
    }
    #video-1683 .cs-link:hover .cs-arrow {
      transform: translateX(0.25rem);
    }
    #video-1683 .cs-link-text {
      width: fit-content;
    }
    #video-1683 .cs-arrow {
      width: 1.25rem;
      height: auto;
      display: block;
      transition: filter 0.3s, transform 0.3s;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #video-1683:before {
      height: 65%;
    }
    #video-1683 .cs-card-group {
      /* 20px - 32px */
      column-gap: clamp(1.25rem, 3vw, 2rem);
      /* 40px - 80px */
      row-gap: clamp(2.5rem, 5vw, 5rem);
    }
    #video-1683 .cs-item {
      padding: 0;
      /* 20px - 32px */
      padding-left: clamp(1.25rem, 3vw, 2rem);
      border: none;
      border-left: 1px solid rgba(255, 255, 255, 0.2);
      grid-column: span 4;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #video-1683 {
      background-color: rgba(0, 0, 0, 0.2);
    }
    body.dark-mode #video-1683 .cs-title,
    body.dark-mode #video-1683 .cs-h3,
    body.dark-mode #video-1683 .cs-item-text {
      color: var(--bodyTextColorWhite);
    }
    body.dark-mode #video-1683 .cs-item-text {
      opacity: 0.8;
    }
  }
  /*-- -------------------------- -->
  <---            CTA             -->
  <--- -------------------------- -*/
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
    #cta-697 {
      padding: var(--sectionPadding);
      background-color: #f7f7f7;
      position: relative;
      z-index: 1;
    }
    #cta-697 .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-697 .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;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #cta-697 .cs-title {
      max-width: 55.6875rem;
      margin: 0;
      text-transform: capitalize;
    }
    #cta-697 .button-blue {
      white-space: nowrap;
      flex: none;
    }
  }
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cta-697 .cs-content {
      text-align: left;
      flex-direction: row;
      justify-content: space-between;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #cta-697 {
      background-color: rgba(0, 0, 0, 0.2);
    }
  }