/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1206 {
    padding: var(--sectionPadding);
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbs-1206 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
  #sbs-1206 .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;
    position: relative;
    z-index: 10;
  }
  #sbs-1206 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-1206 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1206 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1rem;
    color: var(--headerColor);
  }
  #sbs-1206 .cs-content-flair {
    width: 100%;
    margin: 0 0 2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    row-gap: 2rem;
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
  }
  #sbs-1206 .cs-ul {
    width: 100%;
    margin: 0;
    padding-left: 1.25rem;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #sbs-1206 .cs-li {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    list-style: none;
    text-align: left;
    width: 100%;
    max-width: 25rem;
    margin: 0;
    color: var(--bodyTextColor);
    position: relative;
  }
  #sbs-1206 .cs-li:before {
    /* bullet */
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.9375rem;
  }
  #sbs-1206 .cs-video-link {
    width: 100%;
    /* changes to 160px at desktop */
    height: 12.5rem;
    background-color: #000;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #sbs-1206 .cs-video-link:hover .cs-video-bg {
    transform: scale(1.2);
    opacity: 0.5;
  }
  #sbs-1206 .cs-video-link:hover .cs-wrapper {
    transform: scale(1.2);
  }
  #sbs-1206 .cs-video-bg {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform 0.6s, opacity 0.3s;
  }
  #sbs-1206 .cs-wrapper {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    border: 2px solid #e8e8e8;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.75s;
  }
  #sbs-1206 .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: 12.5rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #sbs-1206 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-1206 .cs-button-solid:hover {
    color: #fff;
  }
  #sbs-1206 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-1206 .cs-image-group {
    width: 100%;
    max-width: 49.5625rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 1;
  }
  #sbs-1206 .cs-picture {
    /* width 100% so we can match the border radius with the circle graphic easier */
    width: 100%;
    max-width: 28.75rem;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  #sbs-1206 .cs-picture img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  #sbs-1206 .cs-graphic {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
  #sbs-1206 .cs-box {
    /* 16px - 32px top & bottom */
    /* 16px - 24px */
    padding: clamp(1rem, 2.9vw, 2rem) clamp(1rem, 2.7vw, 1.5rem);
    background-color: #fff;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    /* 85px - 200px */
    top: clamp(5.3125rem, 12vw, 12.5rem);
    right: 0;
  }
  #sbs-1206 .cs-box-icon {
    /* 24px - 40px */
    width: clamp(1.5rem, 4vw, 2.5rem);
    height: auto;
    margin: 0 0 0.75rem;
    display: block;
  }
  #sbs-1206 .cs-box-header {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 3vw, 1.25rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.75rem;
    color: var(--primary);
  }
  #sbs-1206 .cs-box-ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }
  #sbs-1206 .cs-box-li {
    list-style: none;
    /* 12px - 14px */
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1206 .cs-stat {
    /* 20px - 32px top & bottom */
    /* 12px - 24px */
    padding: clamp(1.25rem, 3vw, 2rem) clamp(0.75rem, 3vw, 1.5rem);
    background-color: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 0;
    /* 40px - 120px */
    bottom: clamp(2.5rem, 7vw, 6.25rem);
  }
  #sbs-1206 .cs-ring-wrapper {
    /* 80px - 100px */
    width: clamp(5rem, 10vw, 6.25rem);
    position: relative;
    /* 20px - 24px */
    margin: 0 0 clamp(1.25rem, 2vw, 1.5rem) 0;
  }
  #sbs-1206 .cs-number {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    font-weight: 900;
    /* prevents mouse from interacting with it */
    pointer-events: none;
    line-height: 1.2em;
    color: var(--bodyTextColorWhite);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
  }
  #sbs-1206 .cs-header {
    /* 16px - 20px */
    font-size: clamp(1rem, 2.1vw, 1.25rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--bodyTextColorWhite);
  }
  #sbs-1206 .cs-desc {
    /* 12px - 14px */
    font-size: clamp(0.75rem, 1.4vw, 0.875rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #sbs-1206 .cs-ring {
    --ring-width: 3px;
    width: calc(100% - var(--ring-width));
    aspect-ratio: 1;
    overflow: visible;
    pointer-events: none;
    rotate: -90deg;
    scale: 1 -1;
  }
  #sbs-1206 .cs-ring circle {
    fill: none;
    stroke: #f7f7f7;
    stroke-width: var(--ring-width);
  }
  #sbs-1206 .cs-ring circle {
    stroke: var(--secondaryLight);
    stroke-linecap: round;
    stroke-dasharray: calc(var(--ratio) * 314%) 314%;
    transition: stroke-dasharray 1s;
  }
  #sbs-1206 .cs-stat:hover .cs-ring {
    --ratio: 0 !important;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1206 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  #sbs-1206 .cs-content {
    width: 45%;
  }
  #sbs-1206 .cs-ul {
    width: 45%;
    max-width: 15.125rem;
  }
  #sbs-1206 .cs-video-link {
    width: 50%;
    max-width: 17.5rem;
    height: 10rem;
  }
  #sbs-1206 .cs-image-group {
    width: 50%;
    margin-top: auto;
    /* same exact clamp as the sectionPadding variable */
    margin-bottom: calc(clamp(3.75rem, 7.82vw, 6.25rem) * -1);
    left: 0;
  }
  #sbs-1206 .cs-picture {
    /* changes to 719px at large desktop */
    width: 90%;
    max-width: 32.625rem;
  }
}
/* Large Desktop - 1500px */
@media only screen and (min-width: 93.75rem) {
  #sbs-1206 .cs-image-group {
    width: 44.9375rem;
    left: -5.625rem;
  }
  #sbs-1206 .cs-picture {
    width: 44.9375rem;
    height: 49.5625rem;
  }
  #sbs-1206 .cs-picture img {
    width: 100%;
    height: auto;
    max-height: 49.5625rem;
    position: absolute;
    bottom: 0;
    left: 0;
  }
  #sbs-1206 .cs-graphic {
    width: 59.375rem;
    top: -6.25rem;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs-1310,
  #RPsbsr-1310 {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #RPsbs-1310 .cs-container,
  #RPsbsr-1310 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(3rem, 4vw, 4rem);
  }
  #RPsbs-1310 .cs-content,
  #RPsbsr-1310 .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;
    position: relative;
    z-index: 10;
  }
  #RPsbs-1310 .cs-text,
  #RPsbsr-1310 .cs-text {
    margin-bottom: 1rem;
  }
  #RPsbs-1310 .cs-text:last-of-type,
  #RPsbsr-1310 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #RPsbs-1310 .cs-button-solid,
  #RPsbsr-1310 .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);
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #RPsbs-1310 .cs-button-solid:before,
  #RPsbsr-1310 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #RPsbs-1310 .cs-button-solid:hover,
  #RPsbsr-1310 .cs-button-solid:hover {
    color: #fff;
  }
  #RPsbs-1310 .cs-button-solid:hover:before,
  #RPsbsr-1310 .cs-button-solid:hover:before {
    width: 100%;
  }
  #RPsbs-1310 .cs-ul,
  #RPsbsr-1310 .cs-ul {
    width: 100%;
    padding: 0;
    /* 32px - 48px */
    margin: clamp(2rem, 5vw, 3rem) 0 0 0;
    /* 32px - 48px */
    padding: clamp(2rem, 5vw, 3rem) 0 0 0;
    border-top: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    -moz-column-gap: 0.75rem;
         column-gap: 0.75rem;
  }
  #RPsbs-1310 .cs-item,
  #RPsbsr-1310 .cs-item {
    list-style: none;
    width: 32%;
    /* making flex so we can align a heading with 1 line to the bottom */
    display: flex;
    flex-direction: column;
    align-self: stretch;
    align-content: space-between;
  }
  #RPsbs-1310 .cs-number,
  #RPsbsr-1310 .cs-number {
    font-size: 1.5625rem;
    line-height: 1.2em;
    font-weight: 700;
    text-align: left;
    color: var(--primary);
    display: block;
    margin: 0 0 0.5rem 0;
  }
  #RPsbs-1310 .cs-h3,
  #RPsbsr-1310 .cs-h3 {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    text-align: left;
    /* auto margin top will push text to bottom if there's only one line */
    margin: 0;
    color: var(--bodyTextColor);
  }
  #RPsbs-1310 .cs-image-group,
  #RPsbsr-1310 .cs-image-group {
    width: 100%;
    max-width: 41.875rem;
    height: 100vw;
    max-height: 39.375rem;
    position: relative;
    display: block;
    z-index: 1;
  }
  #RPsbs-1310 .cs-picture,
  #RPsbsr-1310 .cs-picture {
    /* big background image */
    width: 93%;
    height: 93%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
  }
  #RPsbs-1310 .cs-picture img,
  #RPsbsr-1310 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  #RPsbs-1310 .cs-box,
  #RPsbsr-1310 .cs-box {
    text-align: left;
    width: 70%;
    max-width: 19rem;
    /* 20px - 40px */
    padding: clamp(1.25rem, 4vw, 2.5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #1a1a1a;
    display: inline-flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
  }
  #RPsbs-1310 .cs-desc,
  #RPsbsr-1310 .cs-desc {
    /* 16px - 31px */
    font-size: clamp(1rem, 2.5vw, 1.9375rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: inherit;
    width: 100%;
    color: var(--bodyTextColorWhite);
    position: relative;
    z-index: 10;
  }
  #RPsbs-1310 .cs-graphic,
  #RPsbsr-1310 .cs-graphic {
    width: 150%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbs-1310 .cs-container,
  #RPsbsr-1310 .cs-container {
    max-width: 80rem;
    /* set to horizontal arrangement */
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #RPsbs-1310 .cs-content,
  #RPsbsr-1310 .cs-content {
    width: 48%;
    padding: 3rem 0;
    align-self: center;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #RPsbs-1310 .cs-image-group,
  #RPsbsr-1310 .cs-image-group {
    width: 55%;
    max-width: 41.875rem;
    min-height: 41.875rem;
    max-height: 100%;
    height: auto;
    margin: 0;
  }
  #RPsbs-1310 .cs-picture,
  #RPsbsr-1310 .cs-picture {
    width: 93%;
    height: 94%;
  }
  #RPsbs-1310 .cs-box,
  #RPsbsr-1310 .cs-box {
    bottom: 0;
  }
  #RPsbs-1310 .cs-graphic,
  #RPsbsr-1310 .cs-graphic {
    max-width: 44.6875rem;
    left: auto;
    right: 8.125rem;
    transform: translateY(-50%);
  }
}
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbsr-1310 {
    background-color: #f7f7f7;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #RPsbsr-1310 .cs-image-group {
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #RPsbsr-1310 .cs-picture {
    left: auto;
    right: 0;
  }
  #RPsbsr-1310 .cs-box {
    left: 0;
    right: auto;
  }
}
/*-- -------------------------- -->
<---        Why Choose          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-289 {
    text-align: center;
    padding: var(--sectionPadding);
  }
  #why-choose-289 .cs-container {
    width: 100%;
    /* changes to 1280px on tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #why-choose-289 .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;
  }
  #why-choose-289 .cs-text {
    max-width: 32.625rem;
  }
  #why-choose-289 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
  }
  #why-choose-289 .cs-item {
    list-style: none;
    text-align: left;
    width: 100%;
    padding: 2rem;
    background-color: #f7f7f7;
    border-radius: 1rem;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    transition: background-color 0.3s;
  }
  #why-choose-289 .cs-item:hover {
    background-color: var(--primary);
    cursor: pointer;
  }
  #why-choose-289 .cs-item:hover .cs-icon {
    filter: grayscale(1) brightness(200%);
  }
  #why-choose-289 .cs-item:hover .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  #why-choose-289 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #why-choose-289 .cs-icon {
    width: auto;
    height: 3rem;
    margin-bottom: 1.5rem;
    display: block;
    transition: filter 0.3s;
  }
  #why-choose-289 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    margin: 0;
    margin-bottom: 1rem;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #why-choose-289 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-289 .cs-container {
    max-width: 80rem;
  }
  #why-choose-289 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 4rem;
  }
  #why-choose-289 .cs-flex {
    width: 50%;
  }
  #why-choose-289 .cs-title {
    margin: 0;
  }
  #why-choose-289 .cs-card-group {
    justify-content: space-between;
    /* makes sure every box "stretches" to be the same height as the tallest box */
    align-items: stretch;
    flex-direction: row;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #why-choose-289 .cs-item {
    width: auto;
    /* 16px - 32px */
    padding: 2rem clamp(1rem, 2.1vw, 2rem);
  }
}
/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-1376 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
    /* clips the waves and lines from cause overflow issues */
    overflow: hidden;
    /* setting the row groups to display: contents causes the child cs-items to "appear" as direct children of the parent .cs-card-group */
    /* therefore, we can set the order of the .cs-items between rows, changing it between mobile and desktop */
  }
  #steps-1376 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #steps-1376 .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;
  }
  #steps-1376 .cs-topper {
    color: #767676;
  }
  #steps-1376 .cs-title {
    max-width: 25ch;
    margin: 0;
  }
  #steps-1376 .cs-group1,
  #steps-1376 .cs-group2 {
    /* the contents of this div are no longer its children. This div acts as if it doesn't exist and their content is now children of the next level parent, in this case, the cs-card-group. That way they can all be arranged together as children under 1 parent div instead of children in two different parent divs */
    display: contents;
  }
  #steps-1376 .cs-card-group {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
    position: relative;
  }
  #steps-1376 .cs-group1 {
    display: contents;
  }
  #steps-1376 .cs-group1 .cs-item:nth-of-type(1) {
    order: 1;
  }
  #steps-1376 .cs-group1 .cs-item:nth-of-type(2) {
    order: 3;
  }
  #steps-1376 .cs-group1 .cs-item:nth-of-type(3) {
    order: 5;
  }
  #steps-1376 .cs-group2 {
    display: contents;
  }
  #steps-1376 .cs-group2 .cs-item:nth-of-type(1) {
    order: 2;
  }
  #steps-1376 .cs-group2 .cs-item:nth-of-type(2) {
    order: 4;
  }
  #steps-1376 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    max-width: 15rem;
    height: 15rem;
    margin: 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    padding: 1.5rem;
    background-color: #f4f4f4;
    /* clips the :before element from being clickable when it's outside the item and triggering the hover animation */
    overflow: hidden;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s, border-color 0.3s;
  }
  #steps-1376 .cs-item:before {
    content: "";
    width: 9.25rem;
    height: 9.25rem;
    background: #fff;
    opacity: 0;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: -7.25rem;
    transform: translateY(6.25rem);
    transition: left 0.3s, transform 0.3s, opacity 0.3s;
  }
  #steps-1376 .cs-item:hover {
    background-color: var(--primary);
    border-color: var(--primary);
  }
  #steps-1376 .cs-item:hover:before {
    opacity: 0.2;
    left: -1rem;
    transform: translateY(0);
  }
  #steps-1376 .cs-item:hover .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  #steps-1376 .cs-item:hover .cs-h3,
  #steps-1376 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #steps-1376 .cs-item:hover .cs-text {
    opacity: 0.8;
  }
  #steps-1376 .cs-picture {
    width: 6.25rem;
    height: auto;
    margin: 0 0 0.5rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #steps-1376 .cs-icon {
    width: 2rem;
    height: auto;
  }
  #steps-1376 .cs-h3 {
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    transition: color 0.3s;
    transition: color 0.3s;
  }
  #steps-1376 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s, opacity 0.3s;
  }
  #steps-1376 .cs-waves {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-1376 .cs-card-group {
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
  }
  #steps-1376 .cs-group1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #steps-1376 .cs-group2 {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 3rem;
  }
  #steps-1376 .cs-item {
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #steps-1376 .cs-waves {
    width: 4.4375rem;
    height: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #steps-1376 .cs-waves img {
    width: 100%;
    height: auto;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #steps-1376 .cs-card-group {
    flex-direction: column;
  }
  #steps-1376 .cs-group1 {
    width: 100%;
    /* -8px to -30px, we put the clamp in a calc function to turn it into a negative number and pull down to cause the overlapping effect */
    margin-bottom: calc(clamp(0.5rem, 2vw, 1.875rem) * -1);
    flex-direction: row;
  }
  #steps-1376 .cs-group2 {
    width: 100%;
    /* -8px to -30px */
    margin-top: calc(clamp(0.5rem, 2vw, 1.875rem) * -1);
    flex-direction: row;
  }
  #steps-1376 .cs-waves {
    width: 110vw;
    max-width: 120rem;
    height: auto;
  }
  #steps-1376 .cs-waves:before {
    /* left continuation line */
    content: "";
    width: 50vw;
    height: 4px;
    background: #e8e8e8;
    opacity: 1;
    display: block;
    position: absolute;
    top: 5.25rem;
    right: 100%;
  }
  #steps-1376 .cs-waves:after {
    /* Right continuation line */
    content: "";
    width: 50vw;
    height: 4px;
    background: #e8e8e8;
    opacity: 1;
    display: block;
    position: absolute;
    top: 5.25rem;
    left: 100%;
  }
}
/*-- -------------------------- -->
<---      Call To Action        -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0rem) {
  #cta-2353 {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }
  #cta-2353 .cs-container {
    width: 100%;
    max-width: 112.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
  }
  #cta-2353 .cs-content {
    width: 100%;
    max-width: 52.125rem;
    padding: var(--sectionPadding);
  }
  #cta-2353 .cs-title {
    max-width: 100%;
    margin-bottom: 1.5rem;
  }
  #cta-2353 .cs-button-box {
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
    row-gap: 1rem;
  }
  #cta-2353 .cs-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    /* 12px - 24px */
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
  }
  #cta-2353 .cs-icon-wrapper {
    /* 48px - 60px */
    width: clamp(3rem, 5vw, 3.75rem);
    height: clamp(3rem, 5vw, 3.75rem);
    border: 1px solid var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #cta-2353 .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #cta-2353 .cs-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  #cta-2353 .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    display: block;
  }
  #cta-2353 .cs-contact {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--bodyTextColor);
    display: block;
  }
  #cta-2353 .cs-button-solid {
    font-size: 1rem;
    text-decoration: none;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 3vw, 3.5rem);
    font-weight: 700;
    text-align: center;
    margin: 0;
    padding: 0 3rem;
    background-color: var(--primary);
    color: #fff;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #cta-2353 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-2353 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #1a1a1a;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cta-2353 .cs-picture {
    width: 100%;
    height: 31.875rem;
    display: block;
    position: relative;
    z-index: 1;
    order: -1;
  }
  #cta-2353 .cs-picture img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cta-2353 {
    padding: var(--sectionPadding);
    padding-top: 0;
    padding-bottom: 0;
  }
  #cta-2353 .cs-container {
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
    align-items: flex-start;
  }
  #cta-2353 .cs-content {
    width: 47.5%;
    padding: 0;
  }
  #cta-2353 .cs-picture {
    width: 50vw;
    height: 100%;
    /* 40px - 60px */
    margin-left: clamp(2.5rem, 5vw, 3.75rem);
    position: absolute;
    top: 0;
    left: 50%;
  }
}
/*# sourceMappingURL=about.css.map */