/* PAGE-SPECIFIC STYLES FOR THE HOME PAGE */
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1191 {
    padding: var(--sectionPadding);
    box-sizing: border-box;
  }
  #services-1191 .cs-container {
    /* changes to 1440px at desktop */
    max-width: 58.75rem;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1191 .cs-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: left;
  }
  #services-1191 .cs-title {
    max-width: 25ch;
  }
  #services-1191 .cs-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #services-1191 .cs-image {
    width: 100%;
    max-width: 15.875rem;
    height: auto;
    display: block;
    position: relative;
  }
  #services-1191 .cs-image img {
    width: 100%;
    height: auto;
  }
  #services-1191 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    justify-content: center;
    row-gap: 1rem;
  }
  #services-1191 .cs-item {
    text-align: center;
    list-style: none;
    max-width: 23rem;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
  #services-1191 .cs-picture {
    width: 5rem;
    height: 5rem;
    box-sizing: border-box;
    /* prevents border from affecting height and width */
    background-color: #f7f7f7;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #services-1191 .cs-icon {
    width: 1.875rem;
    height: auto;
    display: block;
  }
  #services-1191 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 0.5rem;
    color: var(--headerColor);
    text-align: inherit;
  }
  #services-1191 .cs-item-text {
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    text-align: inherit;
  }
  #services-1191 .cs-item-text a {
    color: var(--primary);
    font-weight: bold;
  }
  #services-1191 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    font-weight: 700;
    min-width: 9.375rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    text-decoration: none;
    display: inline-block;
    position: relative;
    z-index: 1;
    text-align: center;
  }
  #services-1191 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #services-1191 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1191 .cs-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #services-1191 .cs-card-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  #services-1191 .cs-item {
    text-align: left;
    margin: 0;
    width: 32%;
    align-items: flex-start;
  }
  #services-1191 .cs-image {
    max-height: 28.125rem;
  }
  #services-1191 .cs-image img {
    width: 100%;
    height: auto;
    max-height: 24.125rem;
    object-fit: contain;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-1191 .cs-container {
    max-width: 90rem;
  }
  #services-1191 .cs-image {
    width: 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  #services-1191 .cs-image img {
    width: auto;
    height: auto;
  }
  #services-1191 .cs-card-group {
    align-items: flex-start;
    justify-content: center;
    /* 180px - 356px */
    column-gap: clamp(11.25rem, 21vw, 22.25rem);
    /* 40px - 88px */
    row-gap: clamp(2.5rem, 8vw, 5.5rem);
  }
  #services-1191 .cs-item {
    width: 32vw;
    max-width: 26.375rem;
    flex-direction: row;
    position: relative;
  }
  #services-1191 .cs-item:nth-of-type(odd) {
    text-align: right;
  }
  #services-1191 .cs-item:nth-of-type(odd) .cs-picture {
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #services-1191 .cs-item:nth-of-type(3) {
    /* 90px - 1280px */
    left: calc(clamp(4rem, 8vw, 4rem) * -1);
  }
  #services-1191 .cs-item:nth-of-type(4) {
    /* 90px - 1280px */
    right: calc(clamp(4rem, 8vw, 4rem) * -1);
  }
}
/*-- -------------------------- -->
<---           Banner           -->
<--- -------------------------- -*/
.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  background: var(--primary);
  color: white;
  padding: 10px 0;
  width: 100%;
}

.marquee__inner {
  display: inline-block;
  animation: bounceMarquee 250s linear infinite;
  font-size: 1.2rem;
  opacity: 0.8;
  word-spacing: 10px;
}

@keyframes bounceMarquee {
  0% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}
/*-- -------------------------- -->
<---       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 {
    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: start;
  }
  #why-choose-1630 .cs-text {
    margin-bottom: 1rem;
  }
  #why-choose-1630 .button-container {
    margin: 1rem auto;
  }
  #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;
    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 {
    background-color: #f7f7f7;
  }
  #why-choose-1630 .cs-container {
    max-width: 80rem;
  }
  #why-choose-1630 .button-container {
    margin: 0;
  }
  #why-choose-1630 .cs-flex {
    flex-direction: row;
    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;
    align-items: flex-start;
  }
  #why-choose-1630 .cs-content a {
    margin-top: 1.5rem;
  }
  #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;
  }
  #why-choose-1630 .cs-content {
    text-align: left;
  }
}
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1260 {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
    /* clips svg graphic from overflowing the section */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #pricing-1260 .cs-button-12 {
    justify-content: space-between;
  }
  #pricing-1260 .cs-topper {
    color: var(--primary);
  }
  #pricing-1260 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px, changes to 20px at large desktop */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #pricing-1260 .cs-content {
    color: white;
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 40.1875rem;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #pricing-1260 .cs-text {
    margin-bottom: 1rem;
  }
  #pricing-1260 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #pricing-1260 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875em, 5.5vw, 3.5em);
    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);
    overflow: hidden;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #pricing-1260 .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;
  }
  #pricing-1260 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-1260 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #pricing-1260 .cs-item {
    text-align: left;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 1.5rem 1.5rem;
    background-color: #fff;
    border: 1px solid #dad9e3;
    border-radius: 1.5rem 0 0 0;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    z-index: 1;
  }
  #pricing-1260 .cs-item.cs-popular {
    background-color: #14142b;
    border-radius: 0 0 1.5rem 0;
    border: none;
  }
  #pricing-1260 .cs-item.cs-popular .cs-popular-tag {
    display: inline-flex;
  }
  #pricing-1260 .cs-item.cs-popular .cs-package,
  #pricing-1260 .cs-item.cs-popular .cs-price,
  #pricing-1260 .cs-item.cs-popular .cs-duration,
  #pricing-1260 .cs-item.cs-popular .cs-item-text,
  #pricing-1260 .cs-item.cs-popular .cs-li {
    color: var(--bodyTextColorWhite);
  }
  #pricing-1260 .cs-item.cs-popular .cs-item-text,
  #pricing-1260 .cs-item.cs-popular .cs-li {
    opacity: 0.8;
  }
  #pricing-1260 .cs-item.cs-popular .cs-icon {
    filter: none;
    opacity: 1;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent {
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
    border: none;
    transition: color 0.3s;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent:before {
    background-color: #fff;
  }
  #pricing-1260 .cs-item.cs-popular .cs-button-transparent:hover {
    color: var(--primary);
  }
  #pricing-1260 .cs-popular-tag {
    font-size: 0.875rem;
    line-height: 1.2em;
    text-align: center;
    width: auto;
    margin: 0;
    padding: 0.25rem 0.75rem;
    box-sizing: border-box;
    color: white;
    overflow: hidden;
    border-radius: 0.25rem;
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    /* same as cs-item padding top */
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1;
  }
  #pricing-1260 .cs-popular-tag:before {
    /* background color overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--green);
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #pricing-1260 .cs-picture {
    width: 4.75rem;
    height: 4.75rem;
    margin-bottom: 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  #pricing-1260 .cs-picture:before {
    /* background color */
    content: "";
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.2;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #pricing-1260 .cs-package {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: block;
  }
  #pricing-1260 .cs-price {
    font-size: 2.4375rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 900;
    margin: 0 0 0.75rem;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #pricing-1260 .cs-duration {
    font-size: 0.875rem;
    line-height: 1.5em;
    font-weight: 400;
    margin: 0;
    color: var(--headerColor);
  }
  #pricing-1260 .cs-item-text {
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 2rem;
    color: var(--bodyTextColor);
  }
  #pricing-1260 .cs-ul {
    margin: 0 0 2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  #pricing-1260 .cs-li {
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #pricing-1260 .cs-li.cs-disabled {
    opacity: 0.5;
  }
  #pricing-1260 .cs-li.cs-disabled .cs-icon {
    filter: grayscale(1) brightness(300%);
  }
  #pricing-1260 .cs-icon {
    width: 1.5rem;
    height: auto;
    display: block;
  }
  #pricing-1260 .button-solid {
    width: 100%;
  }
  #pricing-1260 .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: var(--primary);
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: transparent;
    border: 1px solid 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;
    transition: color 0.3s, border-color 0.3s, background-color 0.3s;
  }
  #pricing-1260 .cs-button-transparent: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;
  }
  #pricing-1260 .cs-button-transparent:hover {
    color: #fff;
    border-color: #000;
    background-color: #000;
  }
  #pricing-1260 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #pricing-1260 .cs-bubbles {
    display: none;
    /* this scales the children inside of it down. They're all in ems so they pull from the parent font size for their value of em, in this case, the value of em is tied to the viewwidth size and stops growing when the font size is equal to 1em, which it pulls from the nearst parent with a declred font size (which is the html tag, and that tag is 16px by default) */
    font-size: min(2vw, 0.5em);
    position: absolute;
    z-index: -2;
  }
  #pricing-1260 .cs-bubbles1 {
    width: 42.5em;
    height: 45.25em;
    /* changes to 172 at large desktop */
    top: 0;
    right: -3rem;
  }
  #pricing-1260 .cs-bubbles1:before {
    /* white border bubble */
    content: "";
    width: 38.875em;
    height: 38.875em;
    background: transparent;
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    animation-name: floatAnimation;
    animation-duration: 7s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  #pricing-1260 .cs-bubbles1:after {
    /* orange bubble */
    content: "";
    width: 34.125em;
    height: 34.125em;
    background: var(--primary);
    opacity: 0.8;
    border-radius: 50%;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  #pricing-1260 .cs-bubbles2 {
    width: 20.625rem;
    height: 29.75rem;
    /* removed at larger desktop */
    bottom: -2.5rem;
    /* changes to 160px at larger desktop */
    left: -3rem;
  }
  #pricing-1260 .cs-bubbles2:before {
    /* white border bubble */
    content: "";
    width: 20.625rem;
    height: 20.625rem;
    background: transparent;
    opacity: 1;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  #pricing-1260 .cs-bubbles2:after {
    /* orange bubble */
    content: "";
    width: 16.25rem;
    height: 16.25rem;
    background: var(--primary);
    opacity: 0.8;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 2.5rem;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1260 .cs-container {
    max-width: 80rem;
    /* remove the position so the svg waves wrapper can be positioned relative to the section container for tablet so it hugs the right edge of the screen. We set it back to relative at 1024px so it can then be positioned relative to the container again so it hugs the right edge of the container with the pricing cards */
    position: initial;
  }
  #pricing-1260 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: start;
    flex-wrap: nowrap;
  }
  #pricing-1260 .cs-item {
    width: 50%;
    border-radius: 1.5rem 0 0 1.5rem;
  }
  #pricing-1260 .cs-item.cs-popular {
    border-radius: 0 1.5rem 1.5rem 0;
  }
  #pricing-1260 .cs-item.cs-popular .cs-picture {
    color: var(--primaryLight);
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1260 .cs-container {
    max-width: 80rem;
    position: relative;
    z-index: 1;
  }
  #pricing-1260 .cs-bubbles {
    display: flex;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #pricing-1260 .cs-container {
    flex-direction: row;
    justify-content: space-between;
    gap: 1.25rem;
  }
  #pricing-1260 .cs-card-group {
    width: 62%;
    max-width: 46.25rem;
  }
  #pricing-1260 .cs-bubbles2 {
    display: none;
  }
}
/* 1800px */
@media only screen and (min-width: 112.5rem) {
  #pricing-1260 .cs-bubbles {
    display: flex;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-1458 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
  }
  #faq-1458 .cs-image-group {
    overflow: hidden;
  }
  #faq-1458 .cs-container {
    width: 100%;
    /* chnages to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq-1458 .cs-content {
    text-align: left;
    max-width: 39.375rem;
  }
  #faq-1458 .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
  }
  #faq-1458 .cs-faq-group {
    padding: 0 0 1rem 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-self: center;
  }
  #faq-1458 .cs-faq-item {
    list-style: none;
    width: 100%;
    padding: 1.25rem 0;
    box-sizing: border-box;
    transition: border-bottom 0.3s;
    border-bottom: 1px solid #e8e8e8;
  }
  #faq-1458 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #faq-1458 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-1458 .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #faq-1458 .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #faq-1458 .cs-faq-item.active .cs-item-p {
    height: auto;
    padding-top: 1rem;
    opacity: 1;
  }
  #faq-1458 .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-1458 .cs-button:hover {
    cursor: pointer;
  }
  #faq-1458 .cs-button:before {
    /* left line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.25rem;
    transform: rotate(45deg);
    /* animate the transform from the left side of the x axis, and the center of the y */
    transform-origin: left center;
    transition: transform 0.5s;
  }
  #faq-1458 .cs-button:after {
    /* right line */
    content: "";
    width: 0.5rem;
    height: 0.125rem;
    background-color: var(--headerColor);
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 45%;
    right: 0.0625rem;
    transform: rotate(-45deg);
    /* animate the transform from the right side of the x axis, and the center of the y */
    transform-origin: right center;
    transition: transform 0.5s;
  }
  #faq-1458 .cs-button-text {
    width: 90%;
    display: block;
  }
  #faq-1458 .cs-item-p {
    line-height: 1.5em;
    width: 90%;
    max-width: 33.8125rem;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
  #faq-1458 .cs-image-group {
    /* we use ems for everything in the container so they pull their value for em from the font size of this parent instead of the root element (html). This font size scales with the view width of the screen and stops when the font size equals the value of 1em (16px) and stops growing */
    font-size: min(2.43vw, 1em);
    width: 37.375em;
    height: 42.375em;
    display: block;
    position: relative;
  }
  #faq-1458 .cs-picture {
    width: 32.625em;
    height: 38.0625em;
    top: 0;
    left: 0;
  }
  #faq-1458 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-1458 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #faq-1458 .cs-content {
    width: 55%;
  }
  #faq-1458 .cs-image-group {
    font-size: min(1.4vw, 1em);
    height: auto;
    min-height: 42.375rem;
  }
  #faq-1458 .cs-picture {
    height: 90%;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-567 {
    padding: var(--sectionPadding);
  }
  #reviews-567 .cs-logo {
    width: auto;
    max-width: 9.375rem;
    max-height: 4.375rem;
    height: auto;
    margin: 0;
    display: block;
  }
  #reviews-567 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: 1rem;
  }
  #reviews-567 .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;
  }
  #reviews-567 .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);
  }
  #reviews-567 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 39.375rem;
    /* 32px - 60px top & bottom */
    /* 16px - 48px left & right */
    padding: clamp(2rem, 6.15vw, 3.75rem) clamp(1rem, 4.15vw, 3rem);
    background-color: rgba(247, 247, 247, 0.968627451);
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
  }
  #reviews-567 .cs-stars {
    /* 169px - 189px */
    width: clamp(10.5625rem, 20vw, 11.8125rem);
    height: auto;
    /* 20px - 24px */
    margin: clamp(1.25rem, 3vw, 1.5rem) 0;
    display: block;
  }
  #reviews-567 .cs-item-text {
    line-height: 1.5em;
    margin: 0;
    /* 40px - 64px */
    margin-bottom: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--bodyTextColor);
  }
  #reviews-567 .cs-flex-group {
    /* 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;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
  }
  #reviews-567 .cs-profile {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #reviews-567 .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-567 .cs-name {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.5em;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: block;
  }
  #reviews-567 .cs-job {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-567 .cs-container {
    max-width: 80rem;
  }
  #reviews-567 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
  }
  #reviews-567 .cs-item {
    width: clamp(48.5%, 46.5vw, 49.5%);
  }
  #reviews-567 .cs-item:last-of-type {
    width: 100%;
    max-width: 100%;
    align-items: center;
  }
  #reviews-567 .cs-item:last-of-type .cs-item-text {
    text-align: center;
    max-width: 34.375rem;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #reviews-567 .cs-card-group {
    flex-wrap: nowrap;
  }
  #reviews-567 .cs-item {
    width: 100%;
    align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type {
    align-items: flex-start;
  }
  #reviews-567 .cs-item:last-of-type .cs-item-text {
    text-align: left;
  }
}

/*# sourceMappingURL=local-4.css.map */