/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1618 {
    padding: var(--sectionPadding);
    /* 200px - 300px - leaving extra space for the navigation */
    padding-top: clamp(12.5rem, 31.95vw, 18.75rem);
    position: relative;
    z-index: 1;
    background: var(--body);

  }
  #hero-1618 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 60px - 180px */
    gap: clamp(3.75rem, 13vw, 11.25rem);
  }
  #hero-1618 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 48.75rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #hero-1618 .cs-topper {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    color: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    position: relative;
  }
  #hero-1618 .cs-chevron {
    --chevronColor: var(--secondary);
    width: 3rem;
    height: auto;
  }
  #hero-1618 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 100%;
    margin: 0 0 .5rem 0;
    color: #fff;
    position: relative;
  }

  .hero-sub {
  color: var(--bodyTextColorWhite);
  font-size: 1.2rem;
}
  #hero-1618 .cs-text {
    /* 16px - 20px */
    font-size: clamp(1rem, 1.95vw, 1.25rem);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0 0 2.5rem 0;
    color: #fff;
  }
  #hero-1618 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: #fff;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #hero-1618 .cs-button-solid:before {
    content: '';
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width .3s;
  }
  #hero-1618 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1618 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #hero-1618 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    margin: 0;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: var(--secondaryLight);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 1;
  }
  #hero-1618 .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.5rem 0;
  }
  #hero-1618 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #hero-1618 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
  #hero-1618 .cs-background {
    width: 100%;
    height: 55%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-1618 .cs-background:before {
    /* Overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: #111926;
    opacity: .8;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-1618 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* makes the top of the image start at the top of the parent */
    object-position: top;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-1618 {
    padding-bottom: 0;
  }
  #hero-1618 .cs-container {
    align-items: flex-start;
  }
  #hero-1618 .cs-content {
    text-align: left;
    margin-left: 0;
    align-items: flex-start;
  }
  #hero-1618 .cs-item {
    grid-column: span 4;
  }
  #hero-1618 .cs-background {
    height: 87%;
  }
  #hero-1618 .cs-background:before {
    background: linear-gradient(90deg, #111926 35.41%, rgba(17, 25, 38, 0.72) 60.98%, rgba(17, 25, 38, 0) 80.53%);
    opacity: 1;
  }
}
/* Large Desktop Parallax Effect - 100px */
@media only screen and (min-width: 100rem) {
  #hero-1618 .cs-background {
    background: url("../images/group.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* creates the parallax effect */
    background-attachment: fixed;
  }
  #hero-1618 .cs-background img {
    display: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero-1618 .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #hero-1618 .cs-h3,
  body.dark-mode #hero-1618 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #hero-1618 .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #hero-1618 .cs-text {
    opacity: .8;
  }
  body.dark-mode #hero-1618 .cs-background {
    background-color: #000;
  }
  body.dark-mode #hero-1618 .cs-background img {
    opacity: .5;
  }
}






/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-284 {
    padding: var(--sectionPadding);
    background: var(--secondaryLight);
  }
  #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-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;
  }
  #steps-284 .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;
  }
  #steps-284 .cs-button-solid:hover:before {
    width: 100%;
  }
  #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 var(--secondaryLight);
    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 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #steps-284 .cs-item-text:after {
    border: 12px solid var(--dark);
  }
}










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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-2169 {
    padding: var(--sectionPadding);
    padding-top: 10rem;
    background: var(--body);
    position: relative;
    z-index: 1;
  }
  #sbsr-2169 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 10vw, 8rem);
  }
  #sbsr-2169 .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;
  }
  #sbsr-2169 .cs-text {
    /* Override.  cs-topper cs-title and first cs-text should be removed and put into your global css sheet so it can control every instance of them on your site and is consistent. This selector is a section specific override that stays inside this stitch */
    margin-bottom: 1rem;
  }
  #sbsr-2169 .cs-text:last-of-type {
    /* 32px - 80px */
    margin-bottom: clamp(2rem, 7vw, 5rem);
  }
  #sbsr-2169 .cs-picture {
    width: 100%;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbsr-2169 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbsr-2169 .cs-image-group {
    width: 100%;
    /* 520px - 740px */
    height: clamp(32.3125rem, 100vw, 46.25rem);
    flex: none;
    position: relative;
    z-index: 1;
    order: -1;
  }
  #sbsr-2169 .cs-picture1 {
    /* 220px - 400px */
    height: clamp(13.75rem, 30vw, 25rem);
    max-height: 25rem;
    border: clamp(4px, 2vw, 9px) solid #fff;
    box-sizing: border-box
  }
  #sbsr-2169 .cs-picture2 {
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    /* changes to a clamp at tablet */
    right: 2.5rem;
    left: 0;
    /* changes to clamp at tablet */
    bottom: 3.4375rem;
  }
  #sbsr-2169 .cs-floater {
    /* 80px - 170px */
    width: clamp(5rem, 15vw, 10.625rem);
    height: auto;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
  }
  #sbsr-2169 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbsr-2169 .cs-background img {
    width: 100%;
    height: 100%;
    opacity: 0.16;
    mix-blend-mode: darken;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-2169 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbsr-2169 .cs-content {
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbsr-2169 .cs-image-group {
    width: 45vw;
    max-width: 32.625rem;
    height: auto;
    margin-bottom: 3.125rem;
    order: 2;
  }
  #sbsr-2169 .cs-picture2 {
    /* 60px - 100px */
    right: clamp(3.75rem, 10vw, 6.5rem);
    /* 80px - 120px */
    bottom: clamp(5rem, 9vw, 7.5rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-2169 .cs-title,
  body.dark-mode #sbsr-2169 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-2169 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #sbsr-2169 .cs-picture1 {
    border-color: var(--accent);
  }
  body.dark-mode #sbsr-2169 .cs-background img {
    filter: brightness(50%);
  }
}








/*-- -------------------------- -->
<---        Why Choose Us       -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1822 {
    background-color: var(--body);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  #why-choose-1822 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #why-choose-1822 .cs-content {
    text-align: center;
    width: 100%;
    background-color: var(--primary);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    padding: 1rem;
    gap: 1rem;
  }
  #why-choose-1822 .cs-title {
    margin: 0 0;
    max-width: 15ch;
    color: var(--bodyTextColorWhite);
  }
  #why-choose-1822 .cs-picture {
    width: 100%;
    max-width: 36.625rem;
    height: auto;
    display: block;
  }
  #why-choose-1822 .cs-picture img {
    width: 100%;
    height: auto;
    display: block;
  }
  #why-choose-1822 .cs-card-group {
    width: 100%;
    max-width: 36.625rem;
    padding: var(--sectionPadding);
    /* 16px - 44px */
    padding-left: clamp(1rem, 4vw, 2.75rem);
    /* 16px - 64px */
    padding-right: clamp(1rem, 4vw, 4rem);
    box-sizing: border-box;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    /* 32px - 40px */
    gap: clamp(2rem, 0.5vw, 2.5rem);
  }
  #why-choose-1822 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 36.625rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #why-choose-1822 .cs-item-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #why-choose-1822 .cs-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #why-choose-1822 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--dark);
  }
  #why-choose-1822 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--dark);
    opacity: 0.8;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1822 .cs-container {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
  }
  #why-choose-1822 .cs-content {
    text-align: left;
    width: 100%;
    align-items: flex-start;
    background-color: transparent;
    
  }
  #why-choose-1822 .cs-content:before {
    /* background color, moves to the section parent at desktop */
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #why-choose-1822 .cs-picture {
    margin-left: auto;
    max-width: 100%;
  }
  #why-choose-1822 .cs-card-group {
    width: 65%;
    max-width: 100%;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #why-choose-1822 .cs-item {
    flex-direction: row;
  }
}
/* Desktop - 1400px */
@media only screen and (min-width: 87.5rem) {
  #why-choose-1822:before {
    /* background color */
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: absolute;
    left: auto;
    right: 50%;
    margin-right: 0.625rem;
    z-index: -1;
  }
  #why-choose-1822 .cs-content {
    width: 50%;
    padding-left: 0;
    padding-right: 0;
  }
  #why-choose-1822 .cs-content:before {
    left: auto;
    right: 50%;
    margin-right: 0.625rem;
  }
  #why-choose-1822 .cs-picture {
width: auto;
    height: 100%;
    display: flex;
    align-items: flex-end;
    position: absolute;
    bottom: 1rem;
  }
  #why-choose-1822 .cs-picture img {
    width: auto;
    height: 100%;
    max-height: 23.5rem;
    object-fit: contain;
  }
  #why-choose-1822 .cs-card-group {
    width: 50%;
  }
}
/* Dark Mode - Mobile */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-1822 {
    background-color: rgba(0, 0, 0, 0.6);
  }
  body.dark-mode #why-choose-1822 .cs-content {
    background-color: transparent;
  }
  body.dark-mode #why-choose-1822 .cs-content:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.4;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
}
/* Dark Mode Desktop 1400px */
@media only screen and (min-width: 87.5rem) {
  body.dark-mode #why-choose-1822:before {
    background: var(--primary);
    opacity: 0.4;
  }
  body.dark-mode #why-choose-1822 .cs-content {
    background-color: transparent;
  }
  body.dark-mode #why-choose-1822 .cs-content:before {
    display: none;
  }
}



.cs-heading {
  padding-top: 4rem;
  
}


@media only screen and (min-width: 87.5rem) {

.cs-heading {
  padding: 4rem;
}

}






/*-- -------------------------- -->
<---           Steps            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #steps-2548 {
    padding: var(--sectionPadding);
    /* a 5% tint of the section's secondary colour */
    background-color: var(--secondaryLight);
  }
  #steps-2548 .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);
  }
  #steps-2548 .cs-content {
    /* set text-align to center if content needs to be centered */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* left aligns content, set to center to center align */
    align-items: flex-start;
    /* 48px - 64px, only live once the group goes horizontal at tablet */
    column-gap: clamp(3rem, 6.25vw, 4rem);
    row-gap: 2rem;
  }
  #steps-2548 .cs-flex {
    width: 100%;
  }
  #steps-2548 .cs-title,
  #steps-2548 .cs-text {
    max-width: 46.125rem;
  }
  #steps-2548 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* the cards are one per row until tablet, so only the row gap is live */
    row-gap: 1rem;
  }
  #steps-2548 .cs-item {
    list-style: none;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3.12vw, 2rem);
    background-color: var(--body);
    grid-column: span 12;
    position: relative;
  }
  #steps-2548 .cs-number {
    font-size: 3.8125rem;
    font-weight: 900;
    line-height: 1.2em;
    margin: 0 0 1.5rem 0;
    /* fades the numeral out towards its baseline */
    background-image: linear-gradient(to bottom, var(--secondary) 9%, transparent 81%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block;
  }
  #steps-2548 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
  }
  #steps-2548 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #steps-2548 .cs-arrow {
    /* 40px - 48px */
    width: clamp(2.5rem, 4vw, 3rem);
    /* 40px - 48px */
    height: clamp(2.5rem, 4vw, 3rem);
    background-color: #fff;
    object-fit: contain;
    /* the ring of section colour is what cuts the bubble out of the cards */
    border: 0.5rem solid #f2f7f7;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: -1.75rem;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%) rotate(90deg);
  }
  #steps-2548 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    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;
    background-color: var(--primary);
    color: #fff;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #steps-2548 .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;
  }
  #steps-2548 .cs-button-solid:hover:before {
    width: 100%;
  }
  #steps-2548 .cs-button-solid {
    /* stops the button shrinking when the content group goes horizontal */
    flex: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #steps-2548 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #steps-2548 .cs-flex {
    width: auto;
    max-width: 46.125rem;
    flex: 1 1 auto;
  }
  #steps-2548 .cs-card-group {
    /* 16px - 20px */
    column-gap: clamp(1rem, 1.95vw, 1.25rem);
  }
  #steps-2548 .cs-item {
    grid-column: span 4;
  }
  #steps-2548 .cs-arrow {
    padding: 0.25rem;
    top: 50%;
    /* -28px - -34px */
    right: calc(clamp(1.75rem, 2vw, 2.125rem) * -1);
    bottom: auto;
    left: auto;
    transform: translateY(-50%);
  }
}



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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-2541 {
    padding: var(--sectionPadding);
    background-color: var(--secondaryLight);
  }
  #reviews-2541 .cs-container {
    width: 100%;
    /* changes to 1280px on desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    /* 64px - 128px */
    column-gap: clamp(4rem, 7vw, 8rem);
    /* 48px - 64px */
    row-gap: clamp(3rem, 4vw, 4rem);
  }
  #reviews-2541 .cs-content {
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #reviews-2541 .cs-text {
    margin: 0 0 1rem;
  }
  #reviews-2541 .cs-text:last-of-type {
    margin: 0 0 2rem;
  }
  #reviews-2541 .cs-video-wrapper {
    width: 100%;
    margin: 0 0 3rem 0;
    display: block;
    position: relative;
    z-index: 1;
    /* the video is 16:9 at every breakpoint, so the box is driven by its width */
    aspect-ratio: 16/9;
    /* added and removed by JS. Must come after the hover rule above, which has the same specificity */
  }

  #reviews-2541 .cs-video-wrapper:hover {
    cursor: pointer;
  }
  #reviews-2541 .cs-video-wrapper:hover .cs-play {
    transform: translate(-50%, -50%) scale(1.2);
  }
  #reviews-2541 .cs-video-wrapper.cs-playing {
    /* the button has pointer-events off, so it can never be clicked or click-focused. That makes this fire only for someone tabbing to it, which is the one case that still needs a way to pause */
  }
  #reviews-2541 .cs-video-wrapper.cs-playing:before {
    opacity: 0;
  }
  #reviews-2541 .cs-video-wrapper.cs-playing .cs-play {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
  }
  #reviews-2541 .cs-video-wrapper.cs-playing .cs-play:focus {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  #reviews-2541 .cs-video,
  #reviews-2541 .cs-picture {
    width: 100%;
    height: 100%;
    /* makes the video behave like a background image */
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  #reviews-2541 .cs-video img,
  #reviews-2541 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #reviews-2541 .cs-play {
    /* 72px - 80px */
    width: clamp(4.5rem, 10vw, 5rem);
    height: clamp(4.5rem, 10vw, 5rem);
    background-color: rgba(255, 255, 255, 0.2);
    /* clicks pass straight through to the wrapper, which owns the handler. Keyboard focus still reaches it */
    pointer-events: none;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    transition: transform 0.3s, opacity 0.3s;
    backdrop-filter: blur(8px);
  }
  #reviews-2541 .cs-icon {
    /* 20px - 24px */
    width: clamp(1.25rem, 2.5vw, 1.5rem);
    height: auto;
    display: block;
  }
  #reviews-2541 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  #reviews-2541 .cs-item {
    list-style: none;
    width: 100%;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    /* 24px - 48px top, 16px - 32px left & right, 24px - 32px bottom */
    padding: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 2rem) clamp(1.5rem, 2.5vw, 2rem);
    background-color: var(--body);
    display: flex;
    flex-direction: column;
    /* 16px - 64px, the space the design opens up under the divider */
    gap: clamp(1rem, 4vw, 1rem);
  }
  #reviews-2541 .cs-flex-group {
    width: 100%;
    /* 16px - 24px */
    padding-bottom: clamp(1rem, 3.2vw, 1.5rem);
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 8px - 16px. Just a floor, since space-between does the real spacing. Kept low at mobile so a two word name still sits on one line in a 328px card */
    gap: clamp(0.5rem, 2vw, 1rem);
  }
  #reviews-2541 .cs-info {
    display: flex;
    align-items: center;
    /* 8px - 16px */
    gap: clamp(0.5rem, 2.1vw, 1rem);
  }
  #reviews-2541 .cs-picture {
    /* 40px - 64px */
    width: clamp(2.5rem, 8.4vw, 4rem);
    height: clamp(2.5rem, 8.4vw, 4rem);
    /* clips the image corners to make the circle */
    overflow: hidden;
    border-radius: 50%;
    display: block;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #reviews-2541 .cs-profile {
    width: 100%;
    height: 100%;
    /* makes the image behave like a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #reviews-2541 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #reviews-2541 .cs-job {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 400;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #reviews-2541 .cs-item-stars {
    /* 96px - 117px */
    width: clamp(6rem, 15.3vw, 7.3125rem);
    height: auto;
    display: block;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #reviews-2541 .cs-review {
    /* the design holds this at 16px on all four frames */
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #reviews-2541 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    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;
    background-color: var(--primary);
    color: #fff;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #reviews-2541 .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;
  }
  #reviews-2541 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #reviews-2541 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: start;
  }
  #reviews-2541 .cs-content {
    max-width: 32.625rem;
  }
  #reviews-2541 .cs-card-group {
    /* causes the card group to grow or shrink to fill any remaining space the cs-content doesn't take */
    flex: 1 1 auto;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-1808 {
    padding: var(--sectionPadding);
    padding-bottom: clamp(6rem, 15vw, 8rem);
    background-color: #222222;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbsr-1808 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #sbsr-1808 .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-1808 .cs-title,
  #sbsr-1808 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  #sbsr-1808 .cs-text {
    margin-bottom: 1rem;
    opacity: 0.8;
  }
  #sbsr-1808 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-1808 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 12.5rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }
  #sbsr-1808 .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;
  }
  #sbsr-1808 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbsr-1808 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  #sbsr-1808 .cs-item {
    list-style: none;
    width: 100%;
    margin: 0;
    /* 24px - 40px left & right */
    padding: 1.5rem clamp(1.5rem, 3.5vw, 2.5rem);
    background-color: var(--primary);
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
  #sbsr-1808 .cs-stat {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #sbsr-1808 .cs-number {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColorWhite);
  }
  #sbsr-1808 .cs-person {
    width: 65%;
    height: auto;
    /* allows text align to move it left or right */
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
  }
  #sbsr-1808 .cs-person img {
    width: 100%;
    height: auto;
    margin: 0;
    display: block;
    object-fit: contain;
  }
  #sbsr-1808 .cs-graphic {
    width: 100%;
    min-width: 120rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 3;
    transform: translateX(-50%);
  }
  #sbsr-1808 .cs-dark {
    display: none;
  }
  #sbsr-1808 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #sbsr-1808 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.08;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-1808 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #sbsr-1808 .cs-content {
    width: 42%;
    max-width: 32.625rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #sbsr-1808 .cs-card-group {
    width: 46%;
    max-width: 28.8125rem;
  }
  #sbsr-1808 .cs-item {
    align-items: flex-end;
  }
  #sbsr-1808 .cs-person {
    /* this scales the full size down and ties the font size to the view width. So we use height an width in ems so the font size can scale it down smaller and grow proportionally with the screen size until it reaches its final dimensions */
    font-size: min(1.06vw, 1rem);
    width: 43.4375em;
    height: 46.0625em;
    right: auto;
    left: 50%;
    /* 150px - 228px */
    margin-left: calc(clamp(9.375rem, 18vw, 14.25rem)*-1);
  }
  #sbsr-1808 .cs-person img {
    /* ensure that whatever image we change this too will be 100% the height of the container. We do this change so that if you have a tall image you want to swap in, it won't overflow the container at the top. */
    height: 100%;
    width: auto;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-1808 {
    background-color: rgba(0, 0, 0, 0.6);
  }
  body.dark-mode #sbsr-1808 .cs-title,
  body.dark-mode #sbsr-1808 .cs-text,
  body.dark-mode #sbsr-1808 .cs-stat,
  body.dark-mode #sbsr-1808 .cs-number {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-1808 .cs-text,
  body.dark-mode #sbsr-1808 .cs-stat {
    opacity: 0.8;
  }
  body.dark-mode #sbsr-1808 .cs-item {
    background-color: var(--dark);
    position: relative;
    z-index: 1;
  }
  body.dark-mode #sbsr-1808 .cs-item:before {
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  body.dark-mode #sbsr-1808 .cs-light {
    display: none;
  }
  body.dark-mode #sbsr-1808 .cs-dark {
    display: block;
  }
}



/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1720 {
    padding: var(--sectionPadding);
    position: relative;
    background-color: var(--body);
  }
  #faq-1720 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
  }
  #faq-1720 .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;
  }
  #faq-1720 .cs-title {
    margin: 0;
  }
  #faq-1720 .cs-flex-group {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
    position: relative;
  }
  #faq-1720 .cs-wrapper {
    width: 100%;
    position: relative;
  }
  #faq-1720 .cs-button-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #faq-1720 .cs-flex {
    width: 100%;
    /* 24px - 32px */
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: var(--secondaryLight);
    display: flex;
    flex-direction: column;
    order: 3;
    gap: 1.25rem;
  }
  #faq-1720 .cs-option {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    font-weight: 700;
    padding: 0;
    color: var(--bodyTextColor);
    background-color: transparent;
    border: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
    transition: color .3s;
  }
  #faq-1720 .cs-option:hover {
    color: var(--primary);
    cursor: pointer;
  }
  #faq-1720 .cs-option.cs-active {
    color: var(--primary);
  }
  #faq-1720 .cs-picture {
    width: 100%;
    /* 328px - 450px */
    height: clamp(20.5rem, 30vw, 28.125rem);
    /* 16px - 20px */
    margin: 0 0 clamp(1rem, 2.4vw, 1.25rem);
    order: 2;
    position: relative;
    z-index: 1;
  }
  #faq-1720 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #faq-1720 .cs-faq-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    order: 3;
    gap: 0.5rem;
    transition: transform 0.7s,
                opacity 0.3s,
                visibility 0.5s,
                top 0.3s,
                left 0.3s;
    /* makes the transfrom scaling orgin the top left corner, dictates the direction by which the scale transforms animate towards */
    transform-origin: top;
    transform-style: preserve-3d;
    perspective: 900px;
  }
  #faq-1720 .cs-faq-group.cs-hidden {
    /* by using visibility:hidden instead of display:none, we can see the animations from the opacity and transforms, display:none won't render animations. */
    visibility: hidden;
    /* prevents the mouse from interacting with it */
    pointer-events: none;
    /* hidden galleries have a 0 opacity, and we animate the opacity to 1 when they become active */
    opacity: 0;
    /* this top and left value help control the animation, by setting it to position absolute and left 0, the FAQ won't fly off screen to the left, it will stop its position to be at the left edge of the .cs-flex-group (left: 0). Same for the bottom:0 value, the FAQ won't go past that position when it animates */
    top: 0;
    left: 0;
    position: absolute;
    /* prevents the hidden galleries from overflowing the section, and makes a nice animations to transition to and from */
    transform: scaleY(0);
  }
  #faq-1720 .cs-faq-group.cs-hidden .cs-faq-item {
    transform: rotateX(270deg);
    opacity: 0;
  }
  #faq-1720 .cs-faq-item {
    list-style: none;
    width: 100%;
    /* clips all corners of the button that overlap the rounded border */
    overflow: hidden;
    opacity: 1;
    top: 0;
    transform: rotateX(0deg);
    transition: transform 0.6s,
                opacity 0.3s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(3) {
    transition-delay: 0.2s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(4) {
    transition-delay: 0.3s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(5) {
    transition-delay: 0.4s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(6) {
    transition-delay: 0.5s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(7) {
    transition-delay: 0.6s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(8) {
    transition-delay: 0.7s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(9) {
    transition-delay: 0.8s;
  }
  #faq-1720 .cs-faq-item:nth-of-type(10) {
    transition-delay: 0.9s;
  }
  #faq-1720 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1720 .cs-faq-item.active .cs-button:before {
    background-color: var(--primary);
    transform: rotate(315deg);
  }
  #faq-1720 .cs-faq-item.active .cs-button:after {
    background-color: var(--primary);
    transform: rotate(-315deg);
  }
  #faq-1720 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    /* 16px - 24px left & right */
    padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 1.3vw, 1.5rem);
    opacity: 1;
  }
  #faq-1720 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 24px top & bottom */
    /* 16px - 20px left & right */
    padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.25rem);
    background-color: var(--secondaryLight);
    border: none;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1720 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1720 .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: 50%;
    right: 1.5rem;
    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-1720 .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: 50%;
    right: 1.3125rem;
    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-1720 .cs-button-text {
    width: 80%;
    display: block;
  }
  #faq-1720 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 100%;
    height: 0;
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    opacity: 0;
    background-color: var(--body);
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
}
/* Inbetween - 600px */
@media only screen and (min-width: 37.5rem) {
  #faq-1720 .cs-button-group {
    width: 80%;
    max-width: 22.0625rem;
    flex-direction: row;
    align-items: stretch;
    flex: none;
  }
  #faq-1720 .cs-content {
    width: 100%;
  }
  #faq-1720 .cs-picture {
    /* 300px - 493px */
    min-height: clamp(18.75rem, 30vw, 30.8125rem);
    margin: 0;
    height: 100%;
    flex: none;
    order: 3;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 48rem) {
  #faq-1720 .cs-flex-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    /* 20px - 80px */
    column-gap: clamp(1.25rem, 3vw, 5rem);
  }
  #faq-1720 .cs-button-group {
    flex-direction: column;
    flex: auto;
  }
  #faq-1720 .cs-picture {
    max-height: 31.25rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-1720 .cs-title,
  body.dark-mode #faq-1720 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1720 .cs-flex {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #faq-1720 .cs-option {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1720 .cs-option.cs-active {
    color: var(--primary);
  }
  body.dark-mode #faq-1720 .cs-faq-item:nth-of-type(2) {
    transition-delay: 0.1s;
  }
  body.dark-mode #faq-1720 .cs-faq-item:nth-of-type(3) {
    transition-delay: 0.2s;
  }
  body.dark-mode #faq-1720 .cs-faq-item:nth-of-type(4) {
    transition-delay: 0.3s;
  }
  body.dark-mode #faq-1720 .cs-faq-item:nth-of-type(5) {
    transition-delay: 0.4s;
  }
  body.dark-mode #faq-1720 .cs-faq-item:nth-of-type(6) {
    transition-delay: 0.5s;
  }
  body.dark-mode #faq-1720 .cs-faq-item:nth-of-type(7) {
    transition-delay: 0.6s;
  }
  body.dark-mode #faq-1720 .cs-faq-item:nth-of-type(8) {
    transition-delay: 0.7s;
  }
  body.dark-mode #faq-1720 .cs-faq-item:nth-of-type(9) {
    transition-delay: 0.8s;
  }
  body.dark-mode #faq-1720 .cs-faq-item:nth-of-type(10) {
    transition-delay: 0.9s;
  }
  body.dark-mode #faq-1720 .cs-faq-item:hover {
    border-color: var(--secondary);
    transition: border-color 0.3s;
  }
  body.dark-mode #faq-1720 .cs-button {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1720 .cs-button:before,
  body.dark-mode #faq-1720 .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-1720 .cs-item-p {
    background-color: rgba(0, 0, 0, 0.2);
    color: var(--bodyTextColorWhite);
    opacity: .8;
  }
}






/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #stats-534 {
        padding: var(--sectionPadding);
        background-color: var(--body);
    }
    #stats-534 .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);
    }
    #stats-534 .cs-content {
        text-align: left;
        /* changes to 41% at tablet */
        width: 100%;
        max-width: 32.625rem;
    }

    #stats-534 .cs-color {
        color: var(--secondary);
    }
    #stats-534 .cs-topper {
        color: var(--bodyTextColor);
    }
    #stats-534 .cs-title {
        max-width: 17ch;
        color: var(--bodyTextColor);
    }
    #stats-534 .cs-text {
        color: var(--bodyTextColor);
        opacity: 0.8;
    }
    #stats-534 .cs-card-group {
        /* changes to 43% at tablet */
        width: 90%;
        max-width: 32.625rem;
        margin: 0 auto 0 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        /* 16px - 52px */
        row-gap: clamp(1rem, 5vw, 3.25rem);
    }
    #stats-534 .cs-item {
        width: 40%;
        max-width: 12.5rem;
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    #stats-534 .cs-number {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        margin: 0 0 0.5rem 0;
        color: var(--bodyTextColor);
        display: block;
    }
    #stats-534 .cs-desc {
        /* 16px - 20px */
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.5em;
        margin: 0;
        color: var(--bodyTextColor);
    }
    #stats-534 .cs-big-link {
        width: 100%;
        /* changes to a clamp at tablet */
        height: 20rem;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    #stats-534 .cs-big-link:hover .cs-background img {
        transform: scale(1.1);
    }
    #stats-534 .cs-background {
        width: 100%;
        height: 100%;
        /* clips the img from overflowing the container on hover */
        overflow: hidden;
        display: block;
        position: relative;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #stats-534 .cs-background:before {
        /* color overlay */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primary);
        opacity: 0.72;
        background-blend-mode: multiply;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: 10;
    }
    #stats-534 .cs-background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        z-index: -1;
        transition: transform 0.7s;
    }
    #stats-534 .cs-link-icon {
        /* 80px - 110px */
        width: clamp(5rem, 11vw, 6.875rem);
        height: clamp(5rem, 11vw, 6.875rem);
        border-radius: 50%;
        position: absolute;
        z-index: 10;
        transition:
            transform 0.3s,
            box-shadow 0.3s;
    }
    #stats-534 .cs-link-icon:hover {
        transform: scale(1.1);
        box-shadow: rgba(0, 0, 0, 0.5) 0px 7px 29px 0px;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #stats-534 .cs-container {
        flex-direction: row; 
        /* flex-wrap: wrap; */
        align-items: flex-start;
    }
    #stats-534 .cs-content {
        width: 41%;
    }
    #stats-534 .cs-card-group {
        width: 43%;
    }
    #stats-534 .cs-big-link {
        /* 280px - 580px */
        height: clamp(20rem, 44vw, 36.25rem);
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #stats-534 {
        background-color: var(--dark);
    }
}
#stats-534 .cs-video-wrapper {
position: relative;
  width: 100%;
  aspect-ratio: 1520 / 1980;
  overflow: hidden;
  border-radius: 1rem;
}

#stats-534 .cs-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@media only screen and (min-width: 48rem) {
#stats-534 .cs-video-wrapper {
  width: 40%;
}

}











/*-- -------------------------- -->
<---           Logos            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #logos-1896 {
    /* 60px - 120px top & bottom */
    /* 16px - 40px left & right */
    padding: clamp(3.75rem, 8vw, 7.5rem) clamp(1rem, 2vw, 2.5rem);
  }

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

  #logos-1896 .cs-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  #logos-1896 .cs-title {
    font-size: 1.5625rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }

  /* Two centered paragraphs */
  #logos-1896 .cs-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #4a4a4a;
    margin: 0;
  }

  #logos-1896 .cs-logo-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-self: stretch;
  }

  #logos-1896 .cs-logo {
    width: 45%;
    max-width: 12.5rem;
    height: auto;
    margin: 0;
    mix-blend-mode: darken;
    display: block;
  }

  /* ---------- Testimonial cards ---------- */
  #logos-1896 .cs-card-group {
    width: 100%;
    align-self: stretch;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #logos-1896 .cs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--secondaryLight);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    text-align: center;
  }

  #logos-1896 .cs-rating {
    font-size: 1rem;
    letter-spacing: 0.15em;
    color: #E8A33D;
    line-height: 1;
  }

  #logos-1896 .cs-quote {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
    font-style: italic;
  }

  #logos-1896 .cs-author {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: auto;
  }

  #logos-1896 .cs-role {
    font-size: 0.8125rem;
    color: #7a7a7a;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #logos-1896 .cs-logo {
    width: 15%;
    /* the max width becomes whatever the actual width of the image is */
    max-width: max-content;
  }

  #logos-1896 .cs-text {
    font-size: 1.0625rem;
  }

  /* 3 equal columns, matching the logo row width */
  #logos-1896 .cs-card-group {
    grid-template-columns: repeat(3, 1fr);
  }

  #logos-1896 .cs-item {
    padding: 2.5rem 1.75rem;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #logos-1896 .cs-logo-wrapper {
    justify-content: space-between;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #logos-1896 .cs-title {
    color: var(--headerColor);
  }
}