/*-- -------------------------- -->
<---     Mobile Navigation      -->
<--- -------------------------- -*/
/* Mobile - 1023px */
@media only screen and (max-width: 63.9375rem) {
    body.cs-open {
      overflow: hidden;
    }
    #cs-navigation {
      width: 100%;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0.75rem 1rem;
      background-color: #fff;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
    }
    #cs-navigation:before {
      content: "";
      width: 100%;
      height: 0vh;
      background: rgba(0, 0, 0, 0.6);
      opacity: 0;
      display: block;
      position: absolute;
      top: 100%;
      right: 0;
      z-index: -1100;
      transition: height 0.5s, opacity 0.5s;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    #cs-navigation.cs-active:before {
      height: 150vh;
      opacity: 1;
    }
    #cs-navigation.cs-active .cs-ul-wrapper {
      opacity: 1;
      transform: scaleY(1);
      transition-delay: 0.15s;
    }
    #cs-navigation.cs-active .cs-li {
      opacity: 1;
      transform: translateY(0);
    }
    #cs-navigation .cs-container {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    #cs-navigation .cs-logo {
      width: 40%;
      max-width: 9.125rem;
      height: 100%;
      margin: 0 auto 0 0;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
    }
    #cs-navigation .cs-logo img {
      width: 100%;
      height: 100%;
      /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
      object-fit: contain;
    }
    #cs-navigation .cs-toggle {
      /* 44px - 48px */
      width: clamp(2.75rem, 6vw, 3rem);
      height: clamp(2.75rem, 6vw, 3rem);
      margin: 0 0 0 auto;
      background-color: transparent;
      border: none;
      border-radius: 0.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #cs-navigation .cs-active .cs-line1 {
      top: 50%;
      transform: translate(-50%, -50%) rotate(225deg);
    }
    #cs-navigation .cs-active .cs-line2 {
      top: 50%;
      transform: translate(-50%, -50%) translateY(0) rotate(-225deg);
      transform-origin: center;
    }
    #cs-navigation .cs-active .cs-line3 {
      opacity: 0;
      bottom: 100%;
    }
    #cs-navigation .cs-box {
      /* 24px - 28px */
      width: clamp(1.5rem, 2vw, 1.75rem);
      /* 14px - 16px */
      height: clamp(0.875rem, 1.5vw, 1rem);
      position: relative;
    }
    #cs-navigation .cs-line {
      width: 100%;
      height: 2px;
      background-color: #1a1a1a;
      border-radius: 2px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    #cs-navigation .cs-line1 {
      top: 0;
      transition: transform 0.5s, top 0.3s, left 0.3s;
      animation-duration: 0.7s;
      animation-timing-function: ease;
      animation-direction: normal;
      animation-fill-mode: forwards;
      transform-origin: center;
    }
    #cs-navigation .cs-line2 {
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      transition: top 0.3s, left 0.3s, transform 0.5s;
      animation-duration: 0.7s;
      animation-timing-function: ease;
      animation-direction: normal;
      animation-fill-mode: forwards;
    }
    #cs-navigation .cs-line3 {
      bottom: 0;
      transition: bottom 0.3s, opacity 0.3s;
    }
    #cs-navigation .cs-ul-wrapper {
      width: 100%;
      height: auto;
      padding-bottom: 2.4em;
      background-color: #fff;
      box-shadow: inset rgba(0, 0, 0, 0.2) 0px 8px 24px;
      opacity: 0;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: -1;
      overflow: hidden;
      transform: scaleY(0);
      transition: transform 0.4s, opacity 0.3s;
      transform-origin: top;
    }
    #cs-navigation .cs-ul {
      width: 100%;
      height: auto;
      max-height: 65vh;
      margin: 0;
      padding: 3rem 0 0 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 1.25rem;
      overflow: scroll;
    }
    #cs-navigation .cs-li {
      text-align: center;
      list-style: none;
      width: 100%;
      margin-right: 0;
      opacity: 0;
      /* transition from these values */
      transform: translateY(-4.375rem);
      transition: transform 0.6s, opacity 0.9s;
    }
    #cs-navigation .cs-li:nth-of-type(1) {
      transition-delay: 0.05s;
    }
    #cs-navigation .cs-li:nth-of-type(2) {
      transition-delay: 0.1s;
    }
    #cs-navigation .cs-li:nth-of-type(3) {
      transition-delay: 0.15s;
    }
    #cs-navigation .cs-li:nth-of-type(4) {
      transition-delay: 0.2s;
    }
    #cs-navigation .cs-li:nth-of-type(5) {
      transition-delay: 0.25s;
    }
    #cs-navigation .cs-li:nth-of-type(6) {
      transition-delay: 0.3s;
    }
    #cs-navigation .cs-li:nth-of-type(7) {
      transition-delay: 0.35s;
    }
    #cs-navigation .cs-li:nth-of-type(8) {
      transition-delay: 0.4s;
    }
    #cs-navigation .cs-li:nth-of-type(9) {
      transition-delay: 0.45s;
    }
    #cs-navigation .cs-li:nth-of-type(10) {
      transition-delay: 0.5s;
    }
    #cs-navigation .cs-li:nth-of-type(11) {
      transition-delay: 0.55s;
    }
    #cs-navigation .cs-li:nth-of-type(12) {
      transition-delay: 0.6s;
    }
    #cs-navigation .cs-li:nth-of-type(13) {
      transition-delay: 0.65s;
    }
    #cs-navigation .cs-li-link {
      /* 16px - 24px */
      font-size: clamp(1rem, 2.5vw, 1.5rem);
      line-height: 1.2em;
      text-decoration: none;
      margin: 0;
      color: var(--headerColor);
      display: inline-block;
      position: relative;
    }
    #cs-navigation .cs-li-link:before {
      /* active state underline */
      content: "";
      width: 100%;
      height: 1px;
      background: currentColor;
      opacity: 1;
      display: none;
      position: absolute;
      bottom: -0.125rem;
      left: 0;
    }
    #cs-navigation .cs-li-link.cs-active:before {
      display: block;
    }
    #cs-navigation .cs-button-solid {
      display: none;
    }
  }
  /*-- -------------------------- -->
  <---     Desktop Navigation     -->
  <--- -------------------------- -*/
  /* Small Desktop - 1024px */
  @media only screen and (min-width: 64rem) {
    #cs-navigation {
      width: 100%;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      padding: 0 1rem;
      background-color: #114e1f;
      box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
      position: fixed;
      z-index: 10000;
    }
    #cs-navigation .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 1.5rem;
    }
    #cs-navigation .cs-toggle {
      display: none;
    }
    #cs-navigation .cs-logo {
      width: 18.4%;
      max-width: 21.875rem;
      height: 4.0625rem;
      /* margin-right auto pushes everything away from it to the right */
      margin: 0 auto 0 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 100;
    }
    #cs-navigation .cs-logo img {
      width: 100%;
      height: 100%;
      /* ensures the image never overflows the container. It stays contained within it's width and height and expands to fill it then stops once it reaches an edge */
      object-fit: contain;
    }
    #cs-navigation .cs-ul {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      /* 20px - 36px */
      gap: clamp(1.25rem, 2.6vw, 2.25rem);
    }
    #cs-navigation .cs-li {
      list-style: none;
      padding: 2rem 0;
      /* prevent flexbox from squishing it */
      flex: none;
    }
    #cs-navigation .cs-li-link {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1vw, 1rem);
      line-height: 1.5em;
      text-decoration: none;
      margin: 0;
      color: var(--bodyTextColor);
      display: block;
      position: relative;
    }
    #cs-navigation .cs-li-link:hover:before {
      width: 100%;
    }
    #cs-navigation .cs-li-link.cs-active:before {
      width: 100%;
    }
    #cs-navigation .cs-li-link:before {
      /* active state underline */
      content: "";
      width: 0%;
      height: 2px;
      background: var(--primary);
      opacity: 1;
      display: block;
      position: absolute;
      bottom: 0rem;
      left: 0;
      transition: width 0.3s;
    }
    #cs-navigation .cs-button-solid {
      font-size: 1rem;
      font-weight: 700;
      /* 46px - 56px */
      line-height: clamp(2.875em, 5.5vw, 3.5em);
      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;
      color: #fff;
      background-color: var(--primary);
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
    }
    #cs-navigation .cs-button-solid:before {
      content: "";
      width: 0%;
      height: 100%;
      background: #000;
      opacity: 1;
      border-radius: 0.25rem;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      transition: width 0.3s;
    }
    #cs-navigation .cs-button-solid:hover:before {
      width: 100%;
    }
  }
                                  


/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-447 {
      padding: var(--sectionPadding);
  }
  #services-447 .cs-container {
      width: 100%;
      /* changes to 1440px at tablet */
      max-width: 34.375em;
      margin: auto;
  }
  #services-447 .cs-container {
      width: 100%;
      /* changes to 1440px at tablet */
      max-width: 34.375em;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
  }
  #services-447 .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-447 .cs-card-group {
      width: 100%;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1.5rem;
  }
  #services-447 .cs-item {
      list-style: none;
      width: 100%;
      /* changes at desktop */
      padding-top: 9rem;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }
  #services-447 .cs-item:hover .cs-picture img {
      transform: scale(1.2);
      opacity: 0.4;
  }
  #services-447 .cs-item:hover .cs-box:before {
      opacity: 1;
  }
  #services-447 .cs-picture {
      width: 100%;
      /* changes at desktop */
      height: 15.625rem;
      border-radius: 0.5rem;
      background-color: var(--primary);
      /* clips the corners of the image */
      overflow: hidden;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
  }
  #services-447 .cs-picture img {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      /* makes it behave like a background image */
      object-fit: cover;
      /* positions top of image to the top of the container */
      object-position: top;
      transition:
          transform 0.9s,
          opacity 0.5s;
  }
  #services-447 .cs-box {
      text-align: center;
      width: 88%;
      padding: 0 1.5rem 1.5rem 1.5rem;
      /* prevents padding and border from affecting height and width */
      box-sizing: border-box;
      border: 1px solid #dad9e3;
      border-radius: 0.75rem;
      background-color: #fff;
      box-shadow: 0px 24px 54px rgba(87, 107, 147, 0.12);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
  }
  #services-447 .cs-box:before {
      /* hover border box */
      content: "";
      background: transparent;
      /* prevents the mouse from interacting with it */
      pointer-events: none;
      border: 4px solid var(--primary);
      border-radius: 0.75rem;
      /* prevents border from affecting height and width */
      box-sizing: border-box;
      opacity: 0;
      position: absolute;
      display: block;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      transition: opacity 0.5s;
  }
  #services-447 .cs-wrapper {
      /* 80px - 120px */
      width: clamp(5rem, 9.2vw, 7.5rem);
      height: clamp(5rem, 9.2vw, 7.5rem);
      /* 20px - 24px */
      margin: 0 0 clamp(1.25rem, 1.5vw, 1.5rem);
      /* we use the same clamp value for height & width, but multiple by -.5 so it will be a negative value, and be half of the height.  Negative margins pull things toward the element so they overlap them, in this case we want the .cs-wrapper to overlap .cs-box by half its height, so we use the same clamp for height and half it for the margin top value */
      margin-top: calc(clamp(5rem, 9.2vw, 7.5rem) * -0.5);
      border-radius: 50%;
      border: 4px solid var(--primary);
      background-color: #fff;
      /* prevents border from affecting height and width */
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 10;
  }
  #services-447 .cs-icon {
      /* 48px - 64px */
      width: clamp(3rem, 4.3vw, 4rem);
      height: auto;
      display: block;
  }
  #services-447 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 1.9vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: 700;
      margin: 0 0 0.5rem 0;
      color: var(--headerColor);
  }
  #services-447 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      font-weight: 400;
      /* 20px - 24px */
      margin: 0 0 clamp(1.25rem, 1.5vw, 1.5rem);
      color: var(--bodyTextColor);
  }
  #services-447 .cs-link {
      /* 16px - 20px */
      font-size: clamp(1rem, 1.5vw, 1.25rem);
      line-height: 1.5em;
      font-weight: 700;
      text-transform: uppercase;
      text-decoration: none;
      margin: 0;
      color: var(--primary);
      display: inline-block;
      position: relative;
  }
  #services-447 .cs-link:hover:before {
      width: 100%;
  }
  #services-447 .cs-link:before {
      /* animated underline */
      content: "";
      width: 0%;
      height: 3px;
      background: currentColor;
      opacity: 1;
      position: absolute;
      display: block;
      bottom: -0.125rem;
      left: 0;
      transition: width 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-447 .cs-container {
      max-width: 90rem;
  }
  #services-447 .cs-card-group {
      flex-wrap: wrap;
      flex-direction: row;
      /* 16px - 20px */
      column-gap: clamp(1rem, 1.5vw, 1.25rem);
      row-gap: 3.75rem;
  }
  #services-447 .cs-item {
      width: 47%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-447 .cs-card-group {
      flex-wrap: nowrap;
  }
  #services-447 .cs-item {
      width: 100%;
      /* 144px - 274px */
      padding-top: clamp(9rem, 17.5vw, 17.125rem);
  }
  #services-447 .cs-picture {
      /* 224px - 428px */
      height: clamp(14rem, 28vw, 26.75rem);
  }
}



/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-13 {
        padding: var(--sectionPadding);
    }
    #services-13 .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-13 .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-13 .cs-title {
        margin: 0;
        max-width: 16ch;
    }
    #services-13 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        flex-wrap: wrap;
        row-gap: 1rem;
    }
    #services-13 .cs-item {
        list-style: none;
        margin: 0;
        width: 48%;
        /* 28px - 40px */
        padding-bottom: clamp(1.75rem, 4.2vw, 2.5rem);
        background: #fffbeb;
        box-shadow: 0px 0px 0.5em rgba(26, 26, 26, 0.15);
    }
    #services-13 .cs-picture {
        display: block;
        position: relative;
        width: 100%;
        height: 14.5rem;
        /* 28px - 40px */
        margin-bottom: clamp(1.75rem, 4.2vw, 2.5rem);
    }
    #services-13 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* Turns image into background image */
        object-fit: cover;
    }
    #services-13 .cs-icon {
        width: 3.75rem;
        height: auto;
        margin: auto;
        margin-bottom: 1rem;
        display: block;
    }
    #services-13 .cs-h3 {
        /* 14px - 20px */
        font-size: clamp(0.875rem, 2vw, 1.25rem);
        line-height: 1.2em;
        font-weight: 700;
        margin: 0;
        margin: auto;
        color: var(--headerColor);
        display: block;
        text-align: center;
    }
    #services-13 .cs-bottom-group {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #services-13 .cs-left-group {
        /* breaks open the container, letting the children be part of the .cs-bottom-group flexbox */
        display: contents;
    }
    #services-13 .cs-lg-span {
        text-align: left;
        /* 20px - 25px */
        font-size: clamp(1.25rem, 3vw, 1.5625rem);
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 1.25rem;
        color: var(--primary);
        display: block;
    }
    #services-13 .cs-lg-link {
        font-size: 1rem;
        font-weight: 700;
        text-decoration: none;
        color: var(--headerColor);
        position: relative;
        display: inline-block;
        /* Sends it to the bottom of the flexbox */
        order: 3;
    }
    #services-13 .cs-lg-link:before {
        content: "";
        position: absolute;
        display: block;
        height: 0.1875rem;
        width: 100%;
        background: var(--primary);
        opacity: 1;
        bottom: -0.375rem;
        left: 0;
    }
    #services-13 .cs-bottom-ul {
        width: 100%;
        margin: 0;
        margin-bottom: 1.75rem;
        padding: 0;
        padding-left: 1rem;
        columns: 2;
        column-gap: 2.5rem;
    }
    #services-13 .cs-li {
        text-align: left;
        font-size: 0.8125rem;
        line-height: 1.5em;
        list-style: none;
        max-width: 9.375rem;
        margin-bottom: 0.5rem;
        display: block;
        color: var(--bodyTextColor);
        position: relative;
    }
    #services-13 .cs-li:before {
        /* List Bullet */
        content: "";
        position: absolute;
        display: block;
        height: 0.25rem;
        width: 0.25rem;
        border-radius: 50%;
        background: #1a1a1a;
        opacity: 1;
        top: 0.625rem;
        left: -0.9375rem;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-13 .cs-container {
        max-width: 80rem;
    }
    #services-13 .cs-card-group {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 1.25rem;
    }
    #services-13 .cs-item {
        margin: 0;
    }
    #services-13 .cs-item:last-of-type {
        margin: 0;
    }
    #services-13 .cs-bottom-group {
        margin: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        max-width: 43.125rem;
    }
    #services-13 .cs-left-group {
        text-align: left;
        min-width: 14rem;
        margin-right: 2.5rem;
        display: inline-block;
    }
    #services-13 .cs-lg-span {
        text-align: left;
    }
    #services-13 .cs-block {
        /* forces the second line */
        display: block;
    }
    #services-13 .cs-bottom-ul {
        width: auto;
        max-width: 48.5rem;
        display: inline-block;
    }
    #services-13 .cs-li {
        text-align: left;
        width: 8.125rem;
    }
}
/* Small Desktop - 1024px - Contains Hover States */
@media only screen and (min-width: 64rem) {
    #services-13 .cs-card-group {
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 1.25rem;
    }
    #services-13 .cs-item {
        max-width: 19.0625rem;
        transition: transform 0.3s;
    }
    #services-13 .cs-item:hover {
        transform: translateY(-1.25rem);
    }
    #services-13 .cs-item:hover .cs-picture:before {
        opacity: 0.7;
    }
    #services-13 .cs-item:hover .cs-picture img {
        transform: scale(1.1);
    }
    #services-13 .cs-picture {
        /* 320px - 420px */
        height: clamp(20rem, 33vw, 26.25rem);
        /* Prevents image from overflowing on hover */
        overflow: hidden;
    }
    #services-13 .cs-picture:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: var(--primary);
        opacity: 0;
        top: 0;
        left: 0;
        transition: opacity 0.4s;
        z-index: 10;
    }
    #services-13 .cs-picture img {
        transition: transform 0.7s;
    }
    #services-13 .cs-bottom-group {
        max-width: 69rem;
        align-items: flex-end;
    }
    #services-13 .cs-lg-span {
        font-size: 1.25rem;
    }
    #services-13 .cs-lg-link {
        font-size: 0.9375rem;
    }
    #services-13 .cs-bottom-ul {
        width: 48.5rem;
        margin: 0;
        columns: 3;
        column-gap: 5.625rem;
    }
    #services-13 .cs-li {
        font-size: 0.9375rem;
        width: 10rem;
    }
}

 
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #services-345 {
        /* centers the button */
        text-align: center;
        /* padding: var(--sectionPadding); */
    }
    #services-345 .cs-container {
        width: 100%;
        max-width: 90rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #services-345 .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-345 .cs-label {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5em;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        grid-column: span 12;
        gap: 0.5rem;
      }

    #services-345 .cs-card-group {
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;
        /* 16px - 20px */
        gap: clamp(1rem, 2vw, 1.25rem);
    }
    #services-345 .cs-item {
        list-style: none;
        width: 100%;
        max-width: 31.25rem;
        /* 16px - 32px */
        padding: clamp(1rem, 2vw, 2rem);
        background-color: #fffbeb;
        border-radius: 1rem;
        border: 1px solid #e8e8e8;
        box-sizing: border-box;
        transition:
            background-color 0.3s,
            transform 0.3s,
            box-shadow 0.3s;
    }
    #services-345 .cs-item:hover {
        background-color: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 50px;
        transform: translateY(-0.4375rem);
    }
    #services-345 .cs-item:hover .cs-picture:before {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    #services-345 .cs-link {
        text-decoration: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #services-345 .cs-picture {
        width: 5rem;
        height: 5rem;
        margin: 0;
        margin-bottom: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #fef3c7;
        position: relative;
        z-index: 1;
    }
    #services-345 .cs-icon {
        height: 2rem;
        width: auto;
    }
    #services-345 .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-345 .cs-item-text {
        font-size: 1rem;
        text-align: center;
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
        transition: color 0.3s;
    }
    #services-345 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: #ca8a04;
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #services-345 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #1a2e05;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #services-345 .cs-button-solid:hover:before {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #services-345 .cs-card-group {
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
    }
    #services-345 .cs-item {
        width: 48.9%;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #services-345 .cs-item {
        /* we do this so it's stackable. You can add any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of cards, they don't stay centered, they align with their grid lines. This way its more FLEX-ible*/
        width: clamp(23.47%, 22vw, 23.955%);
    }
}


/*-- -------------------------- -->
<---           Quote            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #quote-2059 {
      padding: var(--sectionPadding);
      position: relative;
      z-index: 1;
    }
    #quote-2059 .cs-container {
      width: 100%;
      max-width: 80rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* 48px - 100px */
      gap: clamp(3rem, 10vw, 6.25rem);
      position: relative;
      z-index: 2;
    }
    #quote-2059 .cs-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      justify-self: center;
    }
    #quote-2059 .cs-topper {
      text-align: center;
      color: #fff;
    }
    #quote-2059 .cs-quote {
      /* 25px - 39px */
      font-size: clamp(1.5625rem, 2.8vw, 2.4375rem);
      font-weight: 700;
      line-height: 1.2em;
      text-align: center;
      /* 24px - 32px */
      margin: 12px 0 clamp(1.5rem, 3vw, 2rem);
      color: var(--headerColor);
    }
    #quote-2059 .cs-name {
      /* 16px - 25px */
      font-size: clamp(1rem, 3vw, 1.5625rem);
      font-weight: 700;
      line-height: 1.2em;
      text-align: center;
      color: #ca8a04;
      display: block;
    }
    #quote-2059 .cs-job {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      text-align: center;
      color: var(--bodyTextColor);
      display: block;
    }
    #quote-2059 .cs-picture-group {
      width: 100%;
      /* the exact height/widths are calculated in the JS. set maximums here */
      max-width: 52.875rem;
      /* 180px - 480px */
      max-height: clamp(11.25rem, 47vw, 30rem);
      margin: auto;
      overflow: hidden;
      border-radius: 0.375rem;
      position: relative;
    }
    #quote-2059 .cs-picture {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
    }
    #quote-2059 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
    #quote-2059 .cs-picture-before {
      width: 50%;
      z-index: 2;
    }
    #quote-2059 .cs-slider-wrapper {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      z-index: 10;
      transform: translateX(-50%);
    }
    #quote-2059 .cs-tags {
      display: flex;
      justify-content: center;
      gap: 0.75rem;
      position: absolute;
      /* 6px - 16px */
      top: clamp(0.375rem, 1.5vw, 1rem);
      left: 50%;
      transform: translateX(-56%);
    }
    #quote-2059 .cs-tag {
      /* 6px - 16px */
      font-size: clamp(0.375rem, 1.5vw, 1rem);
      font-weight: 700;
      line-height: 1.2em;
      color: var(--Main-White, #fff);
    }
    #quote-2059 .cs-line {
      width: 1px;
      height: 100%;
      background: #fff;
    }
    #quote-2059 .cs-arrows {
      display: flex;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    #quote-2059 .cs-arrow {
      /* 16px - 40px */
      width: clamp(1rem, 4vw, 2.5rem);
      height: auto;
    }
    #quote-2059 .cs-background {
      width: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      /* 180px - 330px */
      bottom: clamp(11.25rem, 25vw, 20.625rem);
      z-index: 1;
    }
    #quote-2059 .cs-background:before {
      /* actual background-color */
      content: '';
      width: 100%;
      height: 100%;
      background: var(--primary);
      opacity: 0.1;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
    }
    #quote-2059 .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-498 {
        /* we use margin here instead of padding because we want to create the space OUTSIDE the section.  The overflow on the section clips the boxes we made to make the slanted designs, so we need to push from the outside of the section with margin to create space between it and the next section.  If the section above this Stitch has a white background, add margin-top: 0. If it has a white section below it, add margin-bottom: 0. This will allow more proper spacing and not have too much empty space.  If both sections above and below this Stitch have white backgrounds, you can just remove this margin all together. Or remove the margin however you see fit. We add it in case you need it, if you dont then you can remove it */
        margin: var(--sectionPadding);
        margin-left: 0;
        margin-right: 0;
        padding: 0 1rem;
        /* prevents overflow from the slant shape */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #sbsr-498:before {
        /* section background */
        content: "";
        width: 100%;
        height: 100%;
        background: #ca8a04;
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #sbsr-498 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        /* 60px - 100px top and bottom */
        padding: clamp(3.75rem, 6.82vw, 6.25rem) 0;
        /* maintains proportional margin top as screen size grows */
        margin-top: 56vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        /* places it on top of the cs-background */
        z-index: 10;
    }
    #sbsr-498 .cs-container:before {
        /* section slant on mobile */
        content: "";
        width: 62.5rem;
        height: 125rem;
        background: #ca8a04;
        opacity: 1;
        position: absolute;
        z-index: -1;
        display: block;
        top: -28.75rem;
        /* these last two center it horizontally and rotate -65deg */
        left: 50%;
        transform: translateX(-50%) rotate(-65deg);
    }
    #sbsr-498 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-498 .cs-topper,
    #sbsr-498 .cs-title {
        color: #374151;
    }
    #sbsr-498 .cs-text {
        margin-bottom: 1rem;
        color: var(--bodyTextColorWhite);
        opacity: 0.8;
    }
    #sbsr-498 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-498 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: var(--primary);
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--bodyTextColorWhite);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbsr-498 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: var(--secondary);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbsr-498 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-498 .cs-background {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    #sbsr-498 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #sbsr-498 .cs-flex {
        width: 100%;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-498:before {
        /* remove the pseudo for the section background */
        display: none;
    }
    #sbsr-498 .cs-background {
        width: 60%;
        /* reset height to let top and bottom properties create the height */
        height: auto;
        aspect-ratio: initial;
        position: absolute;
        /* creates the gap between the image and the blue section */
        top: 3.75rem;
        bottom: 0;
        right: 0;
        left: auto;
    }
    #sbsr-498 .cs-background img {
        object-position: 80% top;
    }
    #sbsr-498 .cs-container {
        margin-top: 0;
    }
    #sbsr-498 .cs-container:before {
        /* make really tall so it always covers top to bottom, even when you add more list items */
        height: 250rem;
        /* make really really wide so it covers the left side at large scree sizes */
        width: 250rem;
        /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
        margin-right: -68.75rem;
        top: 50%;
        left: auto;
        /* pushes the right edge of the element to the center line of the parent */
        right: 50%;
        transform: rotate(-35deg) translateY(-50%);
    }
    #sbsr-498 .cs-content {
        width: 50%;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-419 {
        padding: var(--sectionPadding);
    }
    #sbsr-419 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #sbsr-419 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-419 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-419 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-419 .cs-button-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }
    #sbsr-419 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbsr-419 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbsr-419 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-419 .cs-button-transparent {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: var(--primary);
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: transparent;
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition:
            color 0.3s,
            border-color 0.3s,
            background-color 0.3s;
    }
    #sbsr-419 .cs-button-transparent:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbsr-419 .cs-button-transparent:hover {
        color: #fff;
        border-color: #000;
        background-color: #000;
    }
    #sbsr-419 .cs-button-transparent:hover:before {
        width: 100%;
    }
    #sbsr-419 .cs-image-group {
        font-size: min(2.5vw, 1em);
        width: 36.1875em;
        height: 33.875em;
        /* sends it to the top of the flexbox */
        order: -1;
        position: relative;
    }
    #sbsr-419 .cs-info {
        /* 12px - 20px */
        padding: clamp(0.75rem, 1.5vw, 1.25rem);
        /*260px - 360px */
        min-width: clamp(16.25rem, 30vw, 22.5rem);
        background-color: #fff;
        border: 1px solid #b4b2c7;
        border-radius: 0.75rem;
        box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        /* next two properties centers it horizontally */
        left: 50%;
        transform: translateX(-50%);
        bottom: 1.25rem;
    }
    #sbsr-419 .cs-icon {
        /* 32px - 48px */
        width: clamp(2rem, 4vw, 3rem);
        height: auto;
        margin-right: 0.75rem;
    }
    #sbsr-419 .cs-header {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 0.25rem;
        color: var(--headerColor);
        display: block;
    }
    #sbsr-419 .cs-desc {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.2em;
        color: var(--bodyTextColor);
    }
    #sbsr-419 .cs-picture {
        width: 85%;
        max-width: 34.875rem;
        margin-bottom: 2.5rem;
        border-radius: 0.75rem;
        /* removed at tablet */
        aspect-ratio: 1.01115242;
        /* clips img corners */
        overflow: hidden;
        display: block;
        position: relative;
    }
    #sbsr-419 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.6s;
    }
    #sbsr-419 .cs-picture1 {
        width: 12.75em;
        height: 19.625em;
        top: 0;
        left: 0;
    }
    #sbsr-419 .cs-picture2 {
        width: 21.75em;
        height: 19.625em;
        top: 0;
        right: 0;
    }
    #sbsr-419 .cs-picture3 {
        width: 36.1875em;
        height: 12.625em;
        bottom: 0;
        left: 0;
    }
    #sbsr-419 .cs-trapezoid {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
        /* flips it horizontally */
        transform: scaleX(-1);
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-419 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    #sbsr-419 .cs-content {
        width: 50%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    /*#sbsr-419 .cs-image-group {
        max-width: 41.1875rem;
        /* sends it to the right in the 2nd position */
        /*order: 2; */
    }
    #sbsr-419 .cs-picture {
        /* 269px - 496px changes at desktop */
        height: clamp(16.8125rem, 35vw, 31rem);
        aspect-ratio: none;
    }

/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-419 .cs-container {
        align-items: center;
    }
    #sbsr-419 .cs-image-group {
        font-size: min(1.15vw, 1em);
        flex: none;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
    #sbsr-419 .cs-picture {
        /* 421px - 496px changes at desktop */
        height: clamp(26.3125rem, 40vw, 31rem);
    }
    #sbsr-419 .cs-info {
        left: 1.125rem;
        transform: none;
    }
    #sbsr-419 .cs-trapezoid {
        height: 80%;
        bottom: 0;
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-413 {
        padding: var(--sectionPadding);
        /* clips svg as the screen grows so it doesn't overflow */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #sbsr-413 .cs-container {
        width: 100%;
        /* changes to 1280 at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 108px */
        gap: clamp(3rem, 7.1vw, 6.75rem);
    }
    #sbsr-413 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }



    #sbsr-413 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-413 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-413 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    
    #sbsr-413 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbsr-413 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-413 .cs-image-group {
        font-size: min(2.5vw, 1em);
        width: 36.1875em;
        height: 33.875em;
        /* sends it to the top of the flexbox */
        order: -1;
        position: relative;
    }
    #sbsr-413 .cs-picture {
        border-radius: 1.25em;
        /* clips the img tag corners */
        overflow: hidden;
        position: absolute;
        display: block;
    }
    #sbsr-413 .cs-picture:hover:before {
        opacity: 0.6;
    }
    #sbsr-413 .cs-picture:hover img {
        transform: scale(1.1);
    }
    #sbsr-413 .cs-picture:before {
        /* Hover Box */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 0;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 10;
        transition: opacity 0.3s;
    }
    #sbsr-413 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.6s;
    }
    #sbsr-413 .cs-picture1 {
        width: 12.75em;
        height: 19.625em;
        top: 0;
        left: 0;
    }
    #sbsr-413 .cs-picture2 {
        width: 21.75em;
        height: 19.625em;
        top: 0;
        right: 0;
    }
    #sbsr-413 .cs-picture3 {
        width: 36.1875em;
        height: 12.625em;
        bottom: 0;
        left: 0;
    }
    #sbsr-413 .cs-picture4 {
        width: 12.75em;
        height: 19.625em;
        top: 0;
        right: 0;
    }
    #sbsr-413 .cs-picture5 {
        width: 21.75em;
        height: 19.625em;
        top: 0;
        left: 0;
    }


}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-413 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    #sbsr-413 .cs-content {
        width: 48%;
    }
    #sbsr-413 .cs-image-group {
        font-size: min(1.15vw, 1em);
        flex: none;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
}

                                

                                                               
/* 
Experiment CSS for form

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-413 {
        padding: var(--sectionPadding);
        /* clips svg as the screen grows so it doesn't overflow */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #sbsr-413 .cs-container {
        width: 100%;
        /* changes to 1280 at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 108px */
        gap: clamp(3rem, 7.1vw, 6.75rem);
    }
    #sbsr-413 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbsr-413 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-413 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-413 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbsr-413 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbsr-413 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-413 .cs-image-group {
        font-size: min(2.5vw, 1em);
        width: 36.1875em;
        height: 33.875em;
        /* sends it to the top of the flexbox */
        order: -1;
        position: relative;
    }
    #sbsr-413 .cs-picture {
        border-radius: 1.25em;
        /* clips the img tag corners */
        overflow: hidden;
        position: absolute;
        display: block;
    }
    #sbsr-413 .cs-picture:hover:before {
        opacity: 0.6;
    }
    #sbsr-413 .cs-picture:hover img {
        transform: scale(1.1);
    }
    #sbsr-413 .cs-picture:before {
        /* Hover Box */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 0;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 10;
        transition: opacity 0.3s;
    }
    #sbsr-413 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.6s;
    }
    #sbsr-413 .cs-picture1 {
        width: 12.75em;
        height: 19.625em;
        top: 0;
        left: 0;
    }
    #sbsr-413 .cs-picture2 {
        width: 21.75em;
        height: 19.625em;
        top: 0;
        right: 0;
    }
    #sbsr-413 .cs-picture3 {
        width: 36.1875em;
        height: 12.625em;
        bottom: 0;
        left: 0;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-413 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    #sbsr-413 .cs-content {
        width: 48%;
    }
    #sbsr-413 .cs-image-group {
        font-size: min(1.15vw, 1em);
        flex: none;
        /* sends it to the right in the 2nd position */
        order: 2;
    }
}



/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #steps-1290 {
      padding: var(--sectionPadding);
      position: relative;
    }
    #steps-1290 .cs-container {
      /* changes to 1440px at tablet */
      max-width: 34.375rem;
      width: 75%;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
    }
    #steps-1290 .cs-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      /* set text align to center if content needs to be centrally aligned */
      text-align: left;
    }
    #steps-1290 .cs-text {
      font-size: var(--bodyFontSize);
      line-height: 1.5em;
      max-width: 21.875rem;
      width: 100%;
      margin: 0;
      color: var(--bodyTextColorUpdated);
      text-align: inherit;
    }
    #steps-1290 .cs-text {
      max-width: 39.375rem;
    }
    #steps-1290 .cs-card-group {
      width: 100%;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      /* 16px - 20px */
      gap: clamp(1rem, 2vw, 1.25rem);
    }
    #steps-1290 .cs-item {
      list-style: none;
      background-color: #fff;
      grid-column: span 12;
      position: relative;
      z-index: 1;
      transition: box-shadow 0.3s, transform 0.3s;
    }
    #steps-1290 .cs-item:hover {
      transform: translateY(-0.4375rem);
    }
    #steps-1290 .cs-item:hover .cs-picture img {
      opacity: 0.75;
      transform: scale(1.1);
    }
    #steps-1290 .cs-item:hover .cs-h3 {
      color: var(--primaryLight);
    }
    #steps-1290 .cs-item::after {
      content: "";
      width: 1.25rem;
      height: 5rem;
      margin: 1rem auto;
      background-image: url(https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/arrow-orange.svg);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      opacity: 1;
      display: block;
      position: relative;
      z-index: 10;
    }
    #steps-1290 .cs-item:nth-of-type(2)::after {
      transform: scaleX(-1);
    }
    #steps-1290 .cs-item:last-of-type::after {
      display: none;
    }
    #steps-1290 .cs-link {
      text-decoration: none;
      display: block;
    }
    #steps-1290 .cs-picture {
      width: 100%;
      height: 9.375rem;
      margin: 0 0 0.75rem 0;
      /* background-color: var(--primaryLight); */
      border-radius: 0.625rem;
      display: block;
      position: relative;
      z-index: 10;
      /* clips the img tag corners */
      overflow: hidden;
    }
    #steps-1290 .cs-picture img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      transition: transform 0.6s, opacity 0.3s;
    }
    #steps-1290 .cs-number {
      font-size: 1.25rem;
      font-weight: bold;
      width: 2.25rem;
      height: 2.25rem;
      margin: 0;
      padding: 0;
      color: #fff;
      background-color: var(--primary);
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      /* prevents flexbox from squishing it */
      flex: none;
    }
    #steps-1290 .cs-h3 {
      /* 20px - 25px */
      font-size: clamp(1.25rem, 2.2vw, 1.5625rem);
      line-height: 1.2em;
      font-weight: 700;
      word-break: break-all;
      margin: 24px 0 0.75rem 0;
      color: var(--headerColor);
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 0.75rem;
      transition: color 0.3s;
    }
    #steps-1290 .cs-item-text {
      /* 14px - 16px  */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
    }
    #steps-1290 .cs-background {
      z-index: -1;
      position: absolute;
      top: 0;
      right: 0;
      height: 25%;
      width: 100%;
      opacity: 0.5;
    }
    #steps-1290 .cs-background img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #steps-1290 .cs-container {
      max-width: 90rem;
      gap: 6.25rem;
    }
    #steps-1290 .cs-content {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
    }
    #steps-1290 .cs-item {
      grid-column: span 3;
    }
    #steps-1290 .cs-item::after {
      width: 7.5rem;
      height: 1.75rem;
      margin: 0;
      background-image: url(https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Graphics/arrow-orange-large.svg);
      position: absolute;
      bottom: -2.5rem;
      left: clamp(8.5rem, 18vw, 18.5rem);
    }
    #steps-1290 .cs-item:nth-of-type(2)::after {
      top: -3.75rem;
      transform: rotateX(180deg);
    }
    #steps-1290 .cs-background {
      top: 0;
      left: auto;
      right: 50%;
      /* 90px - 225px */
      margin-right: clamp(5.625rem, 15vw, 14.0625rem);
      height: 50%;
      width: 50vw;
    }
  }
  
  


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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbsr-457 {
        padding: var(--sectionPadding);
    }
    #sbsr-457 .cs-container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: stretch;
        align-items: center;
    }
    #sbsr-457 .cs-content {
        text-align: left;
        width: auto;
        max-width: 40.625rem;
        margin: 0 1rem;
        margin-top: -18.75rem;
        /* 40px - 60px top and bottom */
        /* 20px - 60px left and right */
        padding: clamp(2.5rem, 7vw, 3.75rem) clamp(1.25rem, 5.5vw, 3.75rem);
        background-color: #fafbfc;
        /* prevents padding from affecting width and height */
        box-sizing: border-box;
        border-radius: 0.75rem;
        /* clips the pseudo element */
        overflow: hidden;
        box-shadow: 0px 24px 54px rgba(87, 107, 147, 0.12);
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
        position: relative;
        z-index: 10;
    }
    #sbsr-457 .cs-content:before {
        /* green border top */
        content: "";
        width: 100%;
        height: 0.5rem;
        background: var(--primary);
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
    }

    #sbsr-457 .cs-text {
        margin-bottom: 1rem;
    }
    #sbsr-457 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbsr-457 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbsr-457 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbsr-457 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbsr-457 .cs-picture {
        width: 100%;
        height: auto;
        height: 27.6875rem;
        /* clips the img corners */
        overflow: hidden;
        border-radius: 1.5rem;
        display: block;
        /* sends it to the top */
        order: -1;
        position: relative;
    }
    #sbsr-457 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbsr-457 .cs-container {
        padding: 3.75rem 0;
        position: relative;
        align-items: flex-start;
        justify-content: center;
    }
    #sbsr-457 .cs-content {
        width: 65%;
        margin: 0;
    }
    #sbsr-457 .cs-picture {
        /* 465px - 617px */
        width: clamp(29.0625rem, 53vw, 38.5625rem);
        position: absolute;
        right: 0;
        height: 100%;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbsr-457 .cs-content {
        /* 90px - 108px */
        margin-left: clamp(5rem, 8.5vw, 6.75rem);
    }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #sbs-418 {
        padding: var(--sectionPadding);
    }
    #sbs-418 .cs-container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 34.375rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /* 48px - 76px */
        gap: clamp(3rem, 9vw, 4.75rem);
    }
    #sbs-418 .cs-content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 32.625rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }

    #sbs-418 .cs-text {
        margin-bottom: 1rem;
    }
    #sbs-418 .cs-text:last-of-type {
        margin-bottom: 2rem;
    }
    #sbs-418 .cs-button-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem;
    }
    #sbs-418 .cs-button-solid {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: #fff;
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--primary);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #sbs-418 .cs-button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbs-418 .cs-button-solid:hover:before {
        width: 100%;
    }
    #sbs-418 .cs-button-transparent {
        font-size: 1rem;
        /* 46px - 56px */
        line-height: clamp(2.875rem, 5.5vw, 3.5rem);
        text-decoration: none;
        font-weight: 700;
        text-align: center;
        margin: 0;
        color: var(--primary);
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: transparent;
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition:
            color 0.3s,
            border-color 0.3s,
            background-color 0.3s;
    }
    #sbs-418 .cs-button-transparent:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #000;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #sbs-418 .cs-button-transparent:hover {
        color: #fff;
        border-color: #000;
        background-color: #000;
    }
    #sbs-418 .cs-button-transparent:hover:before {
        width: 100%;
    }
    #sbs-418 .cs-image-group {
        width: 100%;
        /* changes to 650px at desktop */
        max-width: 34.375rem;
        height: auto;
        /* removed at desktop */
        padding-top: 1.875rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 1;
        order: -1;
    }
    #sbs-418 .cs-info {
        /* 12px - 20px */
        padding: clamp(0.75rem, 1.5vw, 1.25rem);
        /*260px - 360px */
        min-width: clamp(16.25rem, 30vw, 22.5rem);
        background-color: #fff;
        border: 1px solid #b4b2c7;
        border-radius: 0.75rem;
        box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: absolute;
        /* next two properties centers it horizontally */
        left: 50%;
        transform: translateX(-50%);
        bottom: 1.25rem;
    }
    #sbs-418 .cs-icon {
        /* 32px - 48px */
        width: clamp(2rem, 4vw, 3rem);
        height: auto;
        margin-right: 0.75rem;
    }
    #sbs-418 .cs-header {
        /* 16px - 20px */
        font-size: clamp(1rem, 1.5vw, 1.25rem);
        font-weight: 700;
        line-height: 1.2em;
        margin-bottom: 0.25rem;
        color: var(--headerColor);
        display: block;
    }
    #sbs-418 .cs-desc {
        /* 14px - 16px */
        font-size: clamp(0.875rem, 1.5vw, 1rem);
        line-height: 1.2em;
        color: var(--bodyTextColor);
    }
    #sbs-418 .cs-picture {
        width: 85%;
        max-width: 34.875rem;
        margin-bottom: 2.5rem;
        border-radius: 0.75rem;
        /* removed at tablet */
        aspect-ratio: 1.01115242;
        /* clips img corners */
        overflow: hidden;
        display: block;
        position: relative;
    }
    #sbs-418 .cs-picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
    }
    #sbs-418 .cs-trapezoid {
        width: 100%;
        height: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: -1;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #sbs-418 .cs-container {
        max-width: 80rem;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    #sbs-418 .cs-content {
        width: 50%;
        /* prevents flexbox from squishing it */
        flex: none;
    }
    #sbs-418 .cs-image-group {
        max-width: 41.1875rem;
    }
    #sbs-418 .cs-picture {
        /* 269px - 496px changes at desktop */
        height: clamp(16.8125rem, 35vw, 31rem);
        aspect-ratio: none;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #sbs-418 .cs-container {
        align-items: center;
    }
    #sbs-418 .cs-image-group {
        max-width: 40.625rem;
        padding: 0;
    }
    #sbs-418 .cs-picture {
        /* 421px - 496px changes at desktop */
        height: clamp(26.3125rem, 40vw, 31rem);
    }
    #sbs-418 .cs-info {
        left: auto;
        right: 1.125rem;
        transform: none;
    }
    #sbs-418 .cs-trapezoid {
        height: 80%;
        bottom: 0;
    }
}