/*-- -------------------------- */
  /*       Side By Side          */
  /*-- -------------------------- */
  
  #sbs-598 {
  margin-top: 50px;
  margin-bottom: 100px
  }
  
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
      #sbs-598 {
          position: relative;
      }
      #sbs-598 .cs-container {
          width: 100%;
          max-width: 80rem;
          margin: auto;
          display: flex;
          flex-direction: column;
          align-items: center;
          /* 48px - 64px */
          gap: clamp(3rem, 6vw, 4rem);
      }
      #sbs-598 .cs-content {
          /* set text align to left if content needs to be left aligned */
          text-align: left;
          width: 100%;
          max-width: 32.625rem;
          /* moved section padding to cs-content so the cs-background can be full width */
          padding: var(--sectionPadding);
          /* prevents padding and border from affecting height and width */
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          /* centers content horizontally, set to flex-start to left align */
          align-items: flex-start;
      }
  
      #sbs-598 .cs-text {
          margin-bottom: 1rem;
      }
      #sbs-598 .cs-text:last-of-type {
          margin-bottom: 2rem;
      }
  
      #sbs-598 .cs-background {
          display: block;
          position: relative;
          width: 100%;
          height: 16rem;
          z-index: 1;
      }
      #sbs-598 .cs-background img {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          object-fit: cover;
  
          border-top-left-radius: 15px;  /* Adjust the radius as needed */
          border-bottom-left-radius: 15px;
      }
  }
  
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
      #sbs-598 {
          /* 90px - 150px */
          /* returned section padding to the section container, this Stitch has 1.5X padding top and bottom than the normal Stitch */
          padding: clamp(5.625rem, 9vw, 9.375rem) 1rem;
      }
      #sbs-598 .cs-container {
          flex-direction: row;
          justify-content: flex-end;
      }
      #sbs-598 .cs-background {
          width: 50%;
          height: auto;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 50%;
      }
      #sbs-598 .cs-content {
          width: 45%;
          padding: 0;
      }
  }
  
  /* Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
      #sbs-598 .cs-container {
          flex-direction: row;
          justify-content: flex-start; /* Switches text and image position */
      }
      #sbs-598 .cs-background {
          width: 50%;
          height: auto;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 50%; /* Moves image to the right */
          right: auto; /* Reset right */
      }
      #sbs-598 .cs-content {
          width: 45%;
          padding: 0;
          order: -1; /* Moves text to the left */
      }
  }
  
  /*-- -------------------------- -->
  <---          Reviews           -->
  <--- -------------------------- -*/
  
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
    #reviews-1672 {
      padding: var(--sectionPadding);
      background-color: #eaeaea;
    }
    #reviews-1672 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 40px - 64px */
      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-title {
      margin: 0rem;
    }
    #reviews-1672 .cs-card-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 2.5vw, 1.25rem);
    }
    #reviews-1672 .cs-item {
      list-style: none;
      width: 100%;
      /* 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: #fcfdff;
      /* prevents padding from adding to height and width */
      box-sizing: border-box;
      display: flex;
      grid-column: span 12;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      position: relative;
      /* 24px - 48px */
      gap: clamp(1.5rem, 4vw, 3rem);
      border-radius: 15px
    }
    #reviews-1672 .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;
      align-items: flex-start;
      gap: 0.75rem;
    }
    #reviews-1672 .cs-profile {
      width: 3.25rem;
      height: auto;
      border-radius: 50%;
      position: relative;
      display: block;
    }
    #reviews-1672 .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-1672 .cs-name {
      /* 20px - 25px */
      font-size: 1.25rem;
      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-1672 .cs-job {
      /* 14px - 16px */
      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 {
      /* 14px - 16px */
      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: 0rem;
      bottom: 0rem;
      z-index: 0;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #reviews-1672 .cs-item {
      grid-column: span 4;
    }
  }



  /* Button */

  #sbs-598 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    padding: 0 2rem;
    background-color: #252a34;
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color .3s;
    border-radius: 500px;
  }
  #sbs-598 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: var(--primary);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #sbs-598 .cs-button-solid:hover {
      color: #fff;

  }
  #sbs-598 .cs-button-solid:hover:before {
      width: 100%;
  }