/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

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

      #reviews-1537 .cs-container {
            width: 100%;
            max-width: 80rem;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
      }

      #reviews-1537 .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-1537 .cs-title {
            max-width: 23ch;
      }

      #reviews-1537 .cs-card-group {
            width: 100%;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            /* Allow items to wrap to the next row */
            gap: clamp(1rem, 2.5vw, 1.15rem);
            /* Maintain spacing */
      }

      #reviews-1537 .cs-item {
            list-style: none;
            flex: 0 1 100%;
            /* Full width for smaller screens */
            max-width: 100%;

            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;
            box-sizing: border-box;
            /* Ensure padding and borders don't affect width calculations */
      }

      #reviews-1537 .cs-review {
            /* 14px - 20px */
            font-size: clamp(0.875rem, 1.6vw, 1.25rem);
            line-height: 1.5em;
            margin: 0;
            /* 24px - 48px */
            padding: clamp(1.5rem, 6vw, 3rem);
            height: 100%;
            min-height: 10rem;
            /* prevents padding from affecting height and width */
            box-sizing: border-box;
            /* 20px - 40px */
            margin-bottom: clamp(1.25rem, 4vw, 2.5rem);
            color: var(--bodyTextColor);
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            z-index: 1;
      }

      #reviews-1537 .cs-svg {
            --svgBG: #F2FAF8;
            --svgBorder: #E5F4F0;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: -1;
      }

      #reviews-1537 .cs-flex-group {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 0.75rem;
      }

      #reviews-1537 .cs-profile {
            width: 3.125rem;
            height: 3.125rem;
            border: 2px solid #BABABA;
            background-color: #BABABA;
            border-radius: 50%;
            /* clips image corners to make circle */
            overflow: hidden;
            position: relative;
            display: block;
      }

      #reviews-1537 .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-1537 .cs-name {
            /* 20px - 25px */
            font-size: clamp(1.25rem, 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-1537 .cs-job {
            font-size: 1rem;
            line-height: 1.5em;
            font-weight: 700;
            margin: 0;
            color: var(--secondary);
            display: block;
      }
}

/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
      #reviews-1537 .cs-card-group {
            flex-direction: row;
            justify-content: center;
            align-items: stretch;
      }

      #reviews-1537 .cs-item {
            flex: 0 1 calc(50% - 1rem); /* Make each item take up 50% of the row minus the gap */
            max-width: calc(50% - 1rem); /* Prevent items from exceeding their intended width */
      }

      #reviews-1537 .cs-review {
            min-height: 15.625rem;
      }
}

/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
      #banner-1535 {
            padding: var(--sectionPadding);
            /* 190px - 268px */
            padding-top: clamp(11.875rem, 25vw, 16.75rem);
            /* 100px - 150px */
            padding-bottom: clamp(6.25rem, 12vw, 9.375rem);
            /* clips the line from causing overflow issues for going off screen */
            overflow: hidden;
            position: relative;
            z-index: 1;
      }

      #banner-1535 .cs-container {
            text-align: center;
            width: 100%;
            max-width: 80rem;
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            /* 8px - 12px */
            gap: clamp(0.5rem, 1vw, 0.75rem);
      }

      #banner-1535 .cs-int-title {
            /* 39px - 61px */
            font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
            font-weight: 900;
            line-height: 1.2em;
            text-align: inherit;
            margin: 0;
            color: var(--headerColor);
            position: relative;
      }

      #banner-1535 .cs-breadcrumbs {
            display: flex;
            justify-content: center;
            align-items: center;
      }

      #banner-1535 .cs-link {
            font-size: 1rem;
            line-height: 1.2em;
            text-decoration: none;
            color: var(--bodyTextColor);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
      }

      #banner-1535 .cs-link:last-of-type {
            /* remove the chevron on the last list item */
      }

      #banner-1535 .cs-link:last-of-type::after {
            display: none;
      }

      #banner-1535 .cs-link:after {
            /* chevron */
            content: '';
            width: 0.4375rem;
            height: 0.75rem;
            margin: 0 1rem;
            background: url("https://csimg.nyc3.cdn.digitaloceanspaces.com/Images/Icons/grey-chevron.svg");
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            display: block;
      }

      #banner-1535 .cs-link.cs-active {
            color: var(--primary);
      }

      #banner-1535 .cs-background {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
      }

      #banner-1535 .cs-background:before {
            /* gradient overlay */
            content: '';
            width: 100%;
            height: 100%;
            background: #FFF3EC;
            opacity: .8;
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            z-index: 1;
      }

      #banner-1535 .cs-background img {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            /* Makes img tag act as a background image */
            object-fit: cover;
      }

      #banner-1535 .cs-mask {
            --maskBG: #ffffff;
            width: 100%;
            height: auto;
            display: block;
            position: absolute;
            bottom: -1px;
            left: 0;
            z-index: 100;
      }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
      #banner-1535 .cs-background:before {
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255, 243, 236, 0.9) 23.05%, rgba(255, 243, 236, 0) 80.08%);
            opacity: 1;
      }
}

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
      #reviews-1529 {
            padding: var(--sectionPadding);
            overflow: hidden;
            position: relative;
            z-index: 1;
      }

      #reviews-1529 .cs-container {
            /* changes to 1280px at tablet */
            max-width: 34.375rem;
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6.3vw, 4rem);
      }

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

      #reviews-1529 .cs-review {
            width: 100%;
            /* 32px - 80px top & bottom, 24px to 110px sides*/
            padding: clamp(2rem, 7vw, 5rem) clamp(1.5rem, 7vw, 6.875rem);
            box-sizing: border-box;
            border: 1px solid var(--secondary);
            /* 32px - 100px */
            border-radius: clamp(2rem, 5vw, 6.25rem);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            position: relative;
            z-index: 1;
      }

      #reviews-1529 .cs-review:before {
            /* background-color */
            content: "";
            width: 100%;
            height: 100%;
            background-color: var(--secondary);
            /* 32px - 100px */
            border-radius: clamp(2rem, 5vw, 6.25rem);
            opacity: 0.1;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
      }

      #reviews-1529 .cs-image-group {
            width: 100%;
            height: auto;
            margin: 0;
            position: relative;
            z-index: 1;
            aspect-ratio: 1.15966387;
      }

      #reviews-1529 .cs-picture {
            width: 100%;
            height: 100%;
            display: block;
            position: relative;
            overflow: hidden;
      }

      #reviews-1529 .cs-picture img {
            width: 100%;
            height: auto;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
      }

      #reviews-1529 .cs-flex {
            max-width: 76rem;
      }

      #reviews-1529 .cs-quote {
            /* 14px - 20px */
            font-size: clamp(0.875rem, 2vw, 1.25rem);
            line-height: 1.5em;
            font-weight: 400;
            margin: 0 0 1.5rem;
            color: #4e4b66;
      }

      #reviews-1529 .cs-name {
            font-size: 1.25rem;
            font-weight: 700;
            line-height: 1.2em;
            margin-bottom: 0.25rem;
            color: #1a1a1a;
            display: block;
      }

      #reviews-1529 .cs-job {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.2em;
            color: #ff6d41;
            display: block;
      }

      #reviews-1529 .cs-mask {
            /* SVG Colors */
            --maskBorder: #ffffff;
            --maskBG: #fff0ec;
            width: 101%;
            height: 101%;
            position: absolute;
            top: -1px;
            right: -1px;
            bottom: -1px;
            left: -1px;
      }

      #reviews-1529 .cs-mask path {
            transition: stroke 0.3s;
      }

      #reviews-1529 .cs-blob-wrapper {
            width: 100%;
            height: 100%;
            /* 32px - 100px */
            border-radius: clamp(2rem, 5vw, 6.25rem);
            overflow: hidden;
            /* prevents the mouse from interacting with it */
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
      }

      #reviews-1529 .cs-blob {
            --blobColor: var(--secondary);
      }

      #reviews-1529 .cs-blob1 {
            width: 6.25rem;
            height: auto;
            opacity: 0.25;
            position: absolute;
            top: -0.3125rem;
            left: -1.875rem;
      }

      #reviews-1529 .cs-blob2 {
            /* 239px - 461px */
            width: clamp(14.9375rem, 40vw, 28.8125rem);
            height: auto;
            opacity: 0.25;
            position: absolute;
            right: -3.125rem;
            bottom: -0.9375rem;
      }

      #reviews-1529 .cs-graphic {
            position: absolute;
            z-index: 1;
      }

      #reviews-1529 .cs-graphic-one {
            /* 48px - 138px */
            width: clamp(3rem, 10vw, 8.625rem);
            height: auto;
            top: -1.25rem;
            right: -1.25rem;
            transform: rotate(104deg);
      }

      #reviews-1529 .cs-graphic-two {
            /* 88px - 197px */
            width: clamp(5.5rem, 15vw, 12.3125rem);
            height: auto;
            bottom: -1.25rem;
            left: -2rem;
      }
}

/* Tablet - 500px */
@media only screen and (min-width: 31.25rem) {
      #reviews-1529 .cs-container {
            max-width: 80rem;
      }

      #reviews-1529 .cs-review {
            max-width: none;
            flex-direction: row;
      }

      #reviews-1529 .cs-image-group,
      #reviews-1529 .cs-flex {
            flex: 1 0 0;
      }

      #reviews-1529 .cs-image-group {
            max-width: 16.25rem;
      }
      #reviews-1529 .cs-title {
            min-width: 58.75rem;
      }
}

/* Larger Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
      #reviews-1529 .cs-picture {
            font-size: inherit;
      }

      #reviews-1529 .cs-blob1 {
            width: 10rem;
            left: 0;
            top: 0;
      }
}