/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-403 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #cta-403 .cs-background {
    width: 100%;
    height: 100%;
    background-blend-mode: multiply;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-403 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-403 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    /* positions the image inside the parent */
    object-position: 0% 30%;
  }
  #cta-403 .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-403 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 32.3125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #cta-403 .cs-title,
  #cta-403 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #cta-403 .cs-text {
    opacity: 0.8;
    margin-bottom: 1rem;
  }
  #cta-403 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-403 .cs-svg-left {
    width: 10rem;
    height: auto;
    position: absolute;
    bottom: -5%;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-403 .cs-background {
    /* clips the black slant so it doesnt overflow */
    overflow: hidden;
  }
  #cta-403 .cs-background:before {
    width: 40%;
    opacity: 1;
  }
  #cta-403 .cs-background:after {
    /* black slant */
    content: "";
    width: 31.25rem;
    height: 93.75rem;
    margin-right: -3.125rem;
    background: -moz-linear-gradient(left, #1a1a1a 0%, #1a1a1a 57%, rgba(26, 26, 26, 0) 100%);
    background: -webkit-linear-gradient(left, #1a1a1a 0%, #1a1a1a 57%, rgba(26, 26, 26, 0) 100%);
    background: linear-gradient(to right, #1a1a1a 0%, #1a1a1a 57%, rgba(26, 26, 26, 0) 100%);
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    right: 50%;
    transform: rotate(10deg) translateY(-50%);
  }
  #cta-403 .cs-background img {
    width: 60%;
    object-position: right;
    left: auto;
    right: 0;
  }
  #cta-403 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #cta-403 .cs-content {
    text-align: left;
    align-items: flex-start;
    width: 45%;
  }
  #cta-403 .cs-text,
  #cta-403 .cs-title {
    margin-left: 0;
  }
  #cta-403 .cs-svg-left {
    width: 20rem;
    bottom: -10%;
  }
}
/*-- -------------------------- -->
<!--        Side by Side        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1901 {
    padding: var(--sectionPadding);
    /* 128px - 192px */
    padding-bottom: clamp(8rem, 14vw, 12rem);
    overflow-x: clip;
    position: relative;
  }
  #sbs-1901 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-1901 .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;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-1901 .cs-picture {
    width: 100%;
    height: 100vw;
    /* 360px - 720px */
    max-height: clamp(22.5rem, 70vw, 45rem);
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbs-1901 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-1901 .cs-li {
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #sbs-1901 .cs-li strong {
    margin-right: 0.25rem;
    display: inline;
  }
  #sbs-1901 .cs-icon {
    flex-shrink: 0;
  }
  #sbs-1901 .cs-svg {
    width: 10rem;
    height: auto;
    position: absolute;
    bottom: -5%;
    right: 0;
  }
  #sbs-1901 .cs-button-solid {
    margin-top: 2rem;
  }
  #sbs-1901 .cs-ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-1901 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbs-1901 .cs-content {
    justify-content: stretch;
  }
  #sbs-1901 .cs-picture {
    /* 540px - 740px */
    min-height: clamp(33.75rem, 40vw, 46.25rem);
    height: 100%;
    max-height: 100%;
  }
  #sbs-1901 .cs-picture2 {
    order: 2;
    height: 100%;
    min-height: 33.75rem;
    max-height: 100%;
  }
  #sbs-1901 .cs-wrapper1 {
    padding-bottom: 4rem;
  }
  #sbs-1901 .cs-wrapper2 {
    padding-top: 6.25rem;
  }
  #sbs-1901 .cs-svg {
    width: 20rem;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-1670 {
    padding: var(--sectionPadding);
  }
  #reviews-1670 .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-1670 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #reviews-1670 .cs-title {
    margin: 0rem;
  }
  #reviews-1670 .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-1670 .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: #FAF8F4;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    grid-column: span 12;
    justify-content: space-between;
    /* Change from center to space-between */
    align-items: stretch;
    /* Change from flex-start to stretch */
    flex-direction: column;
    position: relative;
    /* 24px - 48px */
    gap: clamp(1.5rem, 4vw, 3rem);
    height: 100%;
    /* Ensure all cards have the same height */
  }
  #reviews-1670 .wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    /* Allow this to take available space */
  }
  #reviews-1670 .cs-item-stars {
    width: 6.75rem;
    height: auto;
  }
  #reviews-1670 .cs-review {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 3rem;
    color: var(--bodyTextColor);
    z-index: 1;
  }
  #reviews-1670 .cs-flex-group {
    /* this margin-top auto will push everything up and force the cs-flex-group to the bottom */
    margin-top: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #reviews-1670 .cs-profile {
    width: 3.25rem;
    height: auto;
    border-radius: 50%;
    position: relative;
    display: block;
  }
  #reviews-1670 .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-1670 .cs-name {
    /* 20px - 25px */
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #reviews-1670 .cs-job {
    /* 14px - 16px */
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #reviews-1670 .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-1670 .cs-item {
    grid-column: span 4;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-1670 .cs-title,
  body.dark-mode #reviews-1670 .cs-review,
  body.dark-mode #reviews-1670 .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-1670 .cs-item {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #reviews-1670 .cs-job {
    color: var(--bodyTextColorWhite);
    opacity: 0.7;
  }
  body.dark-mode #reviews-1670 .cs-quote {
    opacity: 0.2;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->cs-picture
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1458 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
    background-color: #FAF8F4;
  }
  #faq-1458 .cs-container {
    width: 100%;
    /* chnages to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq-1458 .cs-content {
    text-align: left;
    max-width: 39.375rem;
  }
  #faq-1458 .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
  }
  #faq-1458 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: center;
  }
  #faq-1458 .cs-faq-item {
    list-style: none;
    width: 100%;
    padding: 1.25rem;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
    border-bottom: 1px solid #e8e8e8;
  }
  #faq-1458 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #faq-1458 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1458 .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #faq-1458 .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #faq-1458 .cs-faq-item.active .cs-item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
  }
  #faq-1458 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1458 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1458 .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.25rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq-1458 .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.0625rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq-1458 .cs-button-text {
    width: 90%;
    display: block;
  }
  #faq-1458 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #faq-1458 .cs-image-group {
    /* we use ems for everything in the container so they pull their value for em from the font size of this parent instead of the root element (html). This font size scales with the view width of the screen and stops when the font size equals the value of 1em (16px) and stops growing */
    font-size: min(2.43vw, 1em);
    width: 37.375em;
    height: 42.375em;
    display: block;
    position: relative;
  }
  #faq-1458 .cs-picture {
    width: 32.625em;
    height: 38.0625em;
    top: 0;
    left: 0;
  }
  #faq-1458 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-1458 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #faq-1458 .cs-content {
    width: 55%;
  }
  #faq-1458 .cs-image-group {
    font-size: min(1.4vw, 1em);
    height: auto;
    min-height: 42.375rem;
  }
  #faq-1458 .cs-picture {
    height: 90%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-1458 {
    background-color: var(--medium);
  }
  body.dark-mode #faq-1458 .cs-title,
  body.dark-mode #faq-1458 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1458 .cs-item-p {
    opacity: 0.8;
  }
  body.dark-mode #faq-1458 .cs-faq-item {
    border-bottom: rgba(255, 255, 255, 0.1);
  }
  body.dark-mode #faq-1458 .cs-faq-item.active {
    border-color: #fff;
  }
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button {
    color: var(--secondary);
  }
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-1458 .cs-faq-item.active .cs-button:after {
    background-color: var(--secondary);
  }
  body.dark-mode #faq-1458 .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1458 .cs-button:before,
  body.dark-mode #faq-1458 .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---      Call To Action        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-2293 {
    padding: var(--sectionPadding);
    background-color: #111418;
    border-bottom: 1px solid #2D2F2E;
    position: relative;
    z-index: 1;
  }
  #cta-2293 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: initial;
  }
  #cta-2293 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    display: contents;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #cta-2293 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #cta-2293 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #cta-2293 .cs-button-solid {
    order: 3;
  }
  #cta-2293 .cs-card-group {
    width: 100%;
    margin: 0 0 -1rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 32px - 48px */
    row-gap: clamp(2rem, 5vw, 3rem);
  }
  #cta-2293 .cs-topper {
    color: var(--primary);
  }
  #cta-2293 .cs-item {
    list-style: none;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  #cta-2293 .cs-wrapper {
    width: 4.5rem;
    height: 4.5rem;
    border: 1px solid #2D2F2E;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #cta-2293 .cs-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #cta-2293 .cs-header {
    font-size: 1.25rem;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--bodyTextColorWhite);
  }
  #cta-2293 .cs-link {
    font-size: 1rem;
    line-height: 1.5em;
    text-decoration: none;
    margin: 0;
    color: #E7E7E8;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    transition: color 0.3s;
  }
  #cta-2293 .cs-link:hover {
    color: var(--primary);
  }
  #cta-2293 .cs-social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.25rem;
    row-gap: 0.5rem;
  }
  #cta-2293 .cs-background {
    width: 43.125rem;
    height: auto;
    mix-blend-mode: color-dodge;
    display: block;
    position: absolute;
    bottom: 0;
    right: 5rem;
    z-index: -1;
  }
  #cta-2293 .cs-background img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: top;
  }
  #cta-2293 .cs-svg {
    width: 6rem;
    height: auto;
    position: absolute;
    bottom: -5%;
    right: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 550px) {
  #cta-2293 .cs-card-group {
    /* 20px - 32px */
    column-gap: clamp(1.25rem, 4vw, 2rem);
  }
  #cta-2293 .cs-item {
    grid-column: span 6;
  }
  #cta-2293 .cs-social-links {
    flex-direction: column;
    align-items: flex-start;
  }
  #cta-2293 .cs-background {
    margin-right: -10rem;
    right: 50%;
  }
  #cta-2293 .cs-svg {
    width: 14rem;
    bottom: 0;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cta-2293 .cs-container {
    flex-direction: row;
  }
  #cta-2293 .cs-content {
    width: 63%;
    max-width: 26.875rem;
    display: flex;
  }
  #cta-2293 .cs-background {
    margin-right: -5rem;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #cta-2293 .cs-container {
    position: relative;
    z-index: 1;
  }
  #cta-2293 .cs-item {
    flex-direction: row;
  }
  #cta-2293 .cs-background {
    margin-right: 0;
    margin-left: -3.125rem;
    right: auto;
    left: 50%;
  }
  #cta-2293 .cs-background img {
    /* flips the image horizontally */
    transform: scaleX(-1);
  }
  #cta-2293 .cs-svg {
    width: 18rem;
    bottom: 0;
  }
}
/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-284 {
    padding: var(--sectionPadding);
  }
  #steps-284 .cs-container {
    width: 100%;
    /* changes to 1104px on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-284 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 27.125rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #steps-284 .cs-text {
    margin-bottom: 1rem;
  }
  #steps-284 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #steps-284 .cs-process-list {
    width: 100%;
    margin: 1.5rem 0 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #steps-284 .cs-process-item {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  #steps-284 .cs-process-number {
    font-size: 1.25rem;
    font-weight: 700;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    color: #fff;
    border-radius: 50%;
    flex-shrink: 0;
  }
  #steps-284 .cs-h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
  }
  #steps-284 .cs-right-section {
    margin: 0;
    padding: 0;
    max-width: 35.125rem;
  }
  #steps-284 .cs-item {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #steps-284 .cs-item:nth-of-type(1) .cs-item-text:before {
    height: 50%;
    top: auto;
    bottom: -1px;
  }
  #steps-284 .cs-item:nth-of-type(2),
  #steps-284 .cs-item:nth-of-type(4) {
    justify-content: flex-end;
    text-align: right;
  }
  #steps-284 .cs-item:nth-of-type(2) .cs-number,
  #steps-284 .cs-item:nth-of-type(4) .cs-number {
    /* Send number to the right */
    order: 2;
    margin: 0;
    /* 15px - 24px */
    margin-left: clamp(0.9375rem, 3vw, 1.5rem);
  }
  #steps-284 .cs-item:nth-of-type(2) .cs-item-text,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text {
    /* reverse padding */
    padding-left: 0;
    /* 15px - 24px */
    padding-right: clamp(0.9375rem, 3vw, 1.5rem);
    /* reset the border on the :before */
  }
  #steps-284 .cs-item:nth-of-type(2) .cs-item-text:before,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
    border-top: 1px solid var(--primary);
    border-left: none;
    border-right: 1px solid var(--primary);
    left: auto;
    right: 0;
    bottom: 0;
    border-radius: 0 0.5rem 0.5rem 0;
  }
  #steps-284 .cs-item:nth-of-type(2) .cs-item-text:after,
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:after {
    /* move dot to the right now */
    left: auto;
    right: -0.9375rem;
  }
  #steps-284 .cs-item:nth-of-type(3) .cs-item-text:before {
    height: auto;
    border-top: 1px solid var(--primary);
    border-radius: 0.5rem 0 0 0.5rem;
    top: 1px;
    bottom: 0px;
  }
  #steps-284 .cs-item:nth-of-type(4) .cs-item-text:before {
    height: 50%;
    border-radius: 0 0.5rem 0 0;
    border-bottom: none;
    top: -1px;
  }
  #steps-284 .cs-number {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 700;
    /* 15px - 24px */
    margin-right: clamp(0.9375rem, 3vw, 1.5rem);
    /* 40px - 52px */
    width: clamp(2.5rem, 5.1vw, 3.25rem);
    height: clamp(2.5rem, 5.1vw, 3.25rem);
    border-radius: 50%;
    border: 2px solid var(--primary);
    color: var(--headerColor);
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
    position: relative;
  }
  #steps-284 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.6vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    max-width: 18.75rem;
    /* 22px - 32px */
    padding: clamp(1.375rem, 3vw, 2rem) 0;
    box-sizing: content-box;
    /* 15px - 24px */
    padding-left: clamp(0.9375rem, 3vw, 1.5rem);
    position: relative;
  }
  #steps-284 .cs-item-text:before {
    /* Green line */
    content: "";
    width: 70%;
    height: 100%;
    border-radius: 0 0 0 0.5rem;
    border-left: 1px solid var(--primary);
    border-bottom: 1px solid var(--primary);
    box-sizing: content-box;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #steps-284 .cs-item-text:after {
    /* list circle */
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    background: var(--primary);
    border-radius: 50%;
    border: 12px solid #fff;
    box-sizing: content-box;
    opacity: 1;
    position: absolute;
    display: block;
    top: 50%;
    left: -0.9375rem;
    transform: translateY(-50%);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-284 .cs-container {
    max-width: 69rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    column-gap: 2.75rem;
  }
  #steps-284 .cs-content {
    width: 50%;
    /* reset margin to play nice with flexbox */
    margin: 0;
  }
  #steps-284 .cs-right-section {
    width: 57%;
    /* 20px - 25px - this pulls the section up so it's flush with the top of the left section, the padding top on the .cs-item-text is creating a gap at the top of the section. Wrapped in a calc() function to turn clamp() value into a negative number */
    margin-top: calc(clamp(1.25rem, 2vw, 1.5625rem) * -1);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #steps-284 .cs-title,
  body.dark-mode #steps-284 .cs-text,
  body.dark-mode #steps-284 .cs-number,
  body.dark-mode #steps-284 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-284 .cs-process-number {
    background: var(--primaryLight);
    color: var(--dark);
  }
  body.dark-mode #steps-284 .cs-item-text:after {
    border: 12px solid var(--dark);
  }
}