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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-1203 {
    /* 150px - 350px */
    padding: clamp(9rem, 25.95vw, 21.875rem) 1rem;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
    /* prevents overflow from the arrow graphic */
    overflow: hidden;
  }
  #hero-1203:before {
    /* black bar */
    content: "";
    width: 100%;
    /* 100px - 200px */
    height: clamp(6.25rem, 29vw, 12.5rem);
    background: #1a1a1a;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
  }
  #hero-1203 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #hero-1203 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #hero-1203 .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  #hero-1203 .cs-title {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    width: 100%;
    max-width: 17ch;
    margin: 0 0 1rem;
    color: var(--headerColor);
    position: relative;
  }
  #hero-1203 .cs-text {
    font-size: 1.25rem;
    line-height: 1.5em;
    width: 100%;
    max-width: 43.75rem;
    /* 28px - 40px */
    margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
    color: var(--bodyTextColor);
  }
  #hero-1203 .cs-button-solid {
    font-size: 1rem;
    text-align: center;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    width: 11.25rem;
    text-decoration: none;
    font-weight: 700;
    /* clips corners of the before element */
    overflow: hidden;
    margin: 0;
    color: #1a1a1a;
    padding: 0;
    background-color: var(--primary);
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #hero-1203 .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 0.3s;
  }
  #hero-1203 .cs-button-solid:hover {
    color: #fff;
  }
  #hero-1203 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-1203 .cs-picture {
    width: 100%;
    /* changes to 866px at desktop */
    max-width: 34.0625rem;
    height: auto;
    display: flex;
    align-items: flex-end;
    position: relative;
  }
  #hero-1203 .cs-picture img {
    width: 100%;
    height: auto;
  }
  #hero-1203 .cs-floater {
    /* changes to 1465px at desktop */
    width: 59.6875rem;
    height: auto;
    opacity: 0.08;
    display: block;
    position: absolute;
    right: 0;
    top: 40%;
    z-index: -1;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-1203:before {
    height: 16.125rem;
  }
  #hero-1203 .cs-picture {
    width: 70%;
    max-width: 54.125rem;
  }
  #hero-1203 .cs-floater {
    width: 91.5625rem;
    top: 30%;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #hero-1203 {
    padding-bottom: 12.5rem;
    padding-top: 250px;
  }
  #hero-1203:before {
    height: 100%;
    width: 40vw;
    margin-left: 20.8125rem;
    left: 50%;
  }
  #hero-1203 .cs-container {
    flex-direction: row;
    justify-content: flex-start;
    /* remove the positioning so the cs-picture is now absolutely positioned to the next parent with a declared position - the #hero section container. Now we can position it off the bottom edge of the parent container */
    position: initial;
  }
  #hero-1203 .cs-content {
    text-align: left;
    align-items: flex-start;
  }
  #hero-1203 .cs-picture {
    width: 54.125rem;
    height: 52.625rem;
    margin-left: 0.625rem;
    position: absolute;
    left: 50%;
    bottom: 0;
  }
  #hero-1203 .cs-picture img {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
  }
  #hero-1203 .cs-floater {
    margin-right: -20.8125rem;
    top: 8.75rem;
    right: 50%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero-1203:before {
    background-color: rgba(0, 0, 0, 0.6);
  }
  body.dark-mode #hero-1203 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #hero-1203 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #hero-1203 .cs-text {
    color: var(--bodyTextColorWhite);
    opacity: 0.9;
  }
}

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

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1734 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
    position: relative;
  }
  #services-1734 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1734 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #services-1734 .cs-title {
    max-width: 12ch;
    color: var(--headerColor);
  }
  #services-1734 .cs-text {
    color: var(--bodyTextColor);
  }
  #services-1734 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    column-gap: clamp(1rem, 2vw, 1.25rem);
    row-gap: 2rem;
  }
  #services-1734 .cs-item {
    list-style: none;
    width: 100%;
    grid-column: span 12;
  }
  #services-1734 .cs-item:hover .cs-picture img {
    opacity: 0.3;
    transform: scale(1.2);
  }
  #services-1734 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #services-1734 .cs-link {
    text-decoration: none;
    width: 100%;
    height: 100%;
    /* we use flexbox here to grow the link to fit the whole item, making it clickable everywhere, no matter the size */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* 12px - 20px */
    gap: clamp(0.75rem, 1.6vw, 1.25rem);
    position: relative;
    z-index: 1;
  }
  #services-1734 .cs-picture {
    width: 100%;
    /* 300px - 380px */
    height: clamp(20rem, 40vw, 30rem);
    background-color: #000;
    display: block;
    position: relative;
    z-index: -1;
    overflow: hidden;
  }
  #services-1734 .cs-picture img {
    width: 100%;
    height: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform ease-in-out 0.5s, opacity 0.3s;
  }
  #services-1734 .cs-flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #services-1734 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    margin: 0;
    color: var(--headerColor);
    transition: color 0.3s;
    font-family: var(--fontOswald);
  }
  #services-1734 .cs-arrow {
    width: 1.5rem;
    height: auto;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1734 .cs-container {
    max-width: 80rem;
  }
  #services-1734 .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
  }
  #services-1734 .cs-title {
    margin: 0;
  }
  #services-1734 .cs-text {
    width: 50%;
  }
  #services-1734 .cs-item {
    grid-column: span 3;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1734 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #services-1734 .cs-title,
  body.dark-mode #services-1734 .cs-text,
  body.dark-mode #services-1734 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-1734 .cs-picture {
    background-color: var(--primary);
  }
  body.dark-mode #services-1734 .cs-text {
    opacity: 0.8;
  }
}
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/

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

  #sbsr-522 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-522 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-522 .cs-ul {
    width: 80%;
    /* 32px - 36px */
    margin: 0 0 clamp(2rem, 4vw, 2.25rem) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 24px - 32px */
    row-gap: clamp(1.5rem, 4vw, 2rem);
  }
  #sbsr-522 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2rem;
    font-family: var(--fontOswald);
  }
  #sbsr-522 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbsr-522 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #sbsr-522 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbsr-522 .cs-image-group {
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    /* 40px - 48px */
    row-gap: clamp(2.5rem, 6vw, 3rem);
    /* sends it to the top in the first position */
    order: -1;
  }
  #sbsr-522 .cs-stat-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
  }
  #sbsr-522 .cs-stat {
    list-style: none;
    max-width: 14.375rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #sbsr-522 .cs-number {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    line-height: 1.2em;
    font-weight: 900;
    color: var(--headerColor);
    font-family: var(--fontOswald);
  }
  #sbsr-522 .cs-desc {
    font-size: clamp(0.875rem, 1rem, 1.25rem);
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbsr-522 .cs-picture {
    width: 100%;
    /* 244px - 339px, changes clamp at tablet */
    height: clamp(14rem, 62vw, 21.1875rem);
    display: block;
    position: relative;
  }
  #sbsr-522 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-522 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  #sbsr-522 .cs-content {
    width: 71%;
    max-width: 33.75rem;
  }
  #sbsr-522 .cs-image-group {
    width: 68%;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbsr-522 .cs-stat-group {
    justify-content: flex-start;
  }
  #sbsr-522 .cs-picture {
    /* 340px - 461px */
    height: clamp(21.25rem, 35vw, 28.8125rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-522 .cs-title,
  body.dark-mode #sbsr-522 .cs-text,
  body.dark-mode #sbsr-522 .cs-li,
  body.dark-mode #sbsr-522 .cs-desc {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-522 .cs-number,
  body.dark-mode #sbsr-522 .cs-topper {
    color: var(--secondary);
  }
  body.dark-mode #sbsr-522 .cs-button-solid {
    background-color: var(--secondary);
    color: #1a1a1a;
  }
  body.dark-mode #sbsr-522 .cs-button-solid:before {
    background-color: #fff;
  }
}
/*-- -------------------------- -->
<---        Side By Side        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1640 {
    padding: var(--sectionPadding);
    background-color: #111926;
    overflow: hidden;
  }
  #sbs-1640 .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-1640 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
    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-1640 .cs-title {
    margin: 0 0 2.5rem 0;
    color: var(--bodyTextColorWhite);
  }
  #sbs-1640 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #sbs-1640 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs-1640 .cs-picture {
    width: 100%;
    height: auto;
    min-height: 26.25rem;
    display: block;
    position: relative;
    z-index: 1;
  }
  #sbs-1640 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #sbs-1640 .cs-stats-group {
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
  }
  #sbs-1640 .cs-stats {
    width: 100%;
    max-width: 39.375rem;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 1.5rem;
    column-gap: 0.75rem;
  }
  #sbs-1640 .cs-stat {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    grid-column: span 4;
    flex-direction: column;
    align-self: stretch;
    align-content: space-between;
  }
  #sbs-1640 .cs-number {
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 5vw, 3.8125rem);
    line-height: 1.2em;
    font-weight: 900;
    text-align: left;
    color: var(--bodyTextColorWhite);
    display: block;
    margin: 0 0 0.25rem 0;
  }
  #sbs-1640 .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    text-align: left;
    /* auto margin top will push text to bottom if there's only one line */
    margin: 0;
    color: var(--primary);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-1640 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbs-1640 .cs-stats-group {
    /* 52px - 90px */
    margin-bottom: clamp(3.25rem, 7vw, 5.625rem);
    /* 60px - 120px */
    padding-top: clamp(3.75rem, 10vw, 7.5rem);
    /* 60px - 80px */
    padding-bottom: clamp(3.75rem, 8vw, 5rem);
    position: relative;
    z-index: 1;
  }
  #sbs-1640 .cs-stats-group:before {
    content: "";
    width: 200vw;
    height: 100%;
    background: #fff;
    opacity: 1;
    position: absolute;
    display: block;
    top: 100%;
    left: -100%;
    z-index: -1;
    transform: translateX(-50%);
  }
  #sbs-1640 .cs-picture {
    height: 100%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-1640 {
    background-color: rgba(0, 0, 0, 0.6);
  }
  body.dark-mode #sbs-1640 .cs-stats-group:before {
    background-color: var(--dark);
  }
}
/*-- -------------------------- -->
<---       Why Choose Us        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #why-choose-1630 {
    padding: var(--sectionPadding);
  }
  #why-choose-1630 .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, 7vw, 4rem);
  }
  #why-choose-1630 .cs-flex {
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #why-choose-1630 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 38rem;
    /* prevents padding from affecting width and height */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #why-choose-1630 .cs-text {
    margin-bottom: 1rem;
  }
  #why-choose-1630 .cs-text:last-of-type {
    margin-bottom: 0rem;
  }
  #why-choose-1630 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    max-width: 39.375rem;
    /* chnages to auto at tablet */
    height: 50vw;
    /* removed at tablet */
    max-height: 25rem;
    /* clips img tag corners */
    overflow: hidden;
    /* sends it to the 2nd posiiton in the bottom */
    order: 2;
  }
  #why-choose-1630 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #why-choose-1630 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
    /* 16px - 20px */
    column-gap: clamp(1rem, 2.5vw, 2rem);
    row-gap: 1.75rem;
  }
  #why-choose-1630 .cs-item {
    list-style: none;
    display: flex;
    grid-column: span 12;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #why-choose-1630 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    transition: color 0.3s;
  }
  #why-choose-1630 .cs-wrapper {
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #why-choose-1630 .cs-h3-icon {
    width: 1.5rem;
    height: auto;
    margin-top: 2px;
    display: block;
  }
  #why-choose-1630 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color 0.3s, opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #why-choose-1630 .cs-container {
    max-width: 80rem;
  }
  #why-choose-1630 .cs-flex {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: stretch;
  }
  #why-choose-1630 .cs-content {
    width: 50%;
    /* 32px - 56px top and bottom */
    padding: clamp(2rem, 4vw, 3.5rem) 0;
    /* sends it to the left in the 1st position */
    order: -1;
    align-self: center;
    flex: none;
  }
  #why-choose-1630 .cs-picture {
    width: 47vw;
    min-height: 25rem;
    max-height: 100%;
    height: auto;
    position: relative;
  }
  #why-choose-1630 .cs-item {
    grid-column: span 4;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #why-choose-1630 .cs-title,
  body.dark-mode #why-choose-1630 .cs-text,
  body.dark-mode #why-choose-1630 .cs-h3,
  body.dark-mode #why-choose-1630 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose-1630 .cs-text,
  body.dark-mode #why-choose-1630 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #why-choose-1630 .cs-picture:before {
    background-color: var(--accent);
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-1536 {
    padding: var(--sectionPadding);
  }
  #reviews-1536 .cs-container {
    width: 100%;
    max-width: 90rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-1536 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #reviews-1536 .cs-title {
    max-width: 23ch;
  }
  #reviews-1536 .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.15rem);
    row-gap: 1.5rem;
  }
  #reviews-1536 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 28.875rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
  }
  #reviews-1536 .cs-review {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 1.6vw, 1.25rem);
    line-height: 1.5em;
    margin: 0;
    /* 24px - 48px */
    padding: clamp(1.5rem, 6vw, 3rem);
    height: 100%;
    min-height: 10rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* 20px - 40px */
    margin-bottom: clamp(1.25rem, 4vw, 2.5rem);
    color: var(--bodyTextColor);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
  }
  #reviews-1536 .cs-svg {
    --svgBG: #f2faf8;
    --svgBorder: #e5f4f0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
  }
  #reviews-1536 .cs-flex-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
  }
  #reviews-1536 .cs-profile {
    width: 3.125rem;
    height: 3.125rem;
    border: 2px solid #bababa;
    background-color: #bababa;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #reviews-1536 .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-1536 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 3vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    /* in case one card has more text than the other, this pushes up against the review text so the name and title are always at the bottom. Only works if parent is a flexbox */
    margin-top: auto;
    color: var(--headerColor);
    display: block;
  }
  #reviews-1536 .cs-job {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 700;
    margin: 0;
    color: var(--secondary);
    display: block;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #reviews-1536 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #reviews-1536 .cs-item {
    width: 48.6%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-1536 .cs-title,
  body.dark-mode #reviews-1536 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-1536 .cs-svg {
    --svgBG: rgba(0, 0, 0, 0.4);
    --svgBorder: var(--accent);
  }
  body.dark-mode #reviews-1536 .cs-review,
  body.dark-mode #reviews-1536 .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-1536 .cs-review {
    opacity: 0.8;
  }
}
/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cta-1072 {
    padding: var(--sectionPadding);
    background-color: var(--primary);
    position: relative;
    z-index: 1;
  }
  #cta-1072 .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-1072 .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;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-1072 .cs-flex {
    max-width: 39.375rem;
  }

  #cta-1072 .cs-title {
    margin: 0;

    color: var(--bodyTextColorWhite);
  }
  #cta-1072 .cs-button-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
  #cta-1072 .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;
  }
  #cta-1072 .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;
  }
  #cta-1072 .cs-button-solid:hover:before {
    width: 100%;
  }
  #cta-1072 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: transparent;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #cta-1072 .cs-button-transparent:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #fff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #cta-1072 .cs-button-transparent:after {
    /* border */
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: transparent;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    border: 1px solid #fff;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
    pointer-events: none;
  }
  #cta-1072 .cs-button-transparent:hover {
    color: var(--primary);
  }
  #cta-1072 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #cta-1072 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-1072 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.88;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-1072 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
}