/* PAGE-SPECIFIC STYLES FOR THE PROJECTS PAGE */
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbs-252,
  #RPsbsr-252 {
    /* set padding top to 0 if the section above it is another white background section, same for padding bottom. We added the padding here in case this section gets placed above or below sections with full background colors.  Without this padding, the top of this sections color portion will be touching the neighboring section edge and it looks bad */
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    position: relative;
    z-index: 1;
  }
  #RPsbs-252 .cs-container,
  #RPsbsr-252 .cs-container {
    width: 100%;
    /* changes to 1280px on tablet */
    max-width: 34.375rem;
    background-image: linear-gradient(rgba(239, 239, 239, 0.74), rgba(239, 239, 239, 0.74)), url("/assets/images/background.webp");
    background-repeat: no-repeat;
    background-position: center center;
    padding: var(--sectionPadding);
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
  }
  #RPsbs-252 .cs-container:before,
  #RPsbsr-252 .cs-container:before {
    /* Bottom Line */
    content: "";
    width: 100%;
    height: 1px;
    background: #b4b2c7;
    background: linear-gradient(270deg, #b4b2c7 0%, rgba(250, 251, 252, 0.005) 0%, #b4b2c7 100%);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
    /* flips it horizontally */
    transform: scaleX(-1);
  }
  #RPsbs-252 .cs-container:after,
  #RPsbsr-252 .cs-container:after {
    /* Right Line */
    content: "";
    width: 1px;
    height: 100%;
    background: #b4b2c7;
    background: linear-gradient(180deg, #b4b2c7 0%, rgba(250, 251, 252, 0.005) 0%, #b4b2c7 100%);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    right: 0;
  }
  #RPsbs-252 .cs-content,
  #RPsbsr-252 .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;
  }
  #RPsbs-252 .cs-text,
  #RPsbsr-252 .cs-text {
    margin-bottom: 1rem;
  }
  #RPsbs-252 .cs-text:last-of-type,
  #RPsbsr-252 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #RPsbs-252 .cs-button-solid,
  #RPsbsr-252 .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;
  }
  #RPsbs-252 .cs-button-solid:before,
  #RPsbsr-252 .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;
  }
  #RPsbs-252 .cs-button-solid:hover:before,
  #RPsbsr-252 .cs-button-solid:hover:before {
    width: 100%;
  }
  #RPsbs-252 .cs-picture,
  #RPsbsr-252 .cs-picture {
    width: 100%;
    max-width: 32.625rem;
    margin: 0;
    border: 1px solid var(--primary);
    position: relative;
    display: block;
    /* width divided by height */
    aspect-ratio: 1/1;
    /* prevents border from adding to height and width */
    box-sizing: border-box;
  }
  #RPsbs-252 .cs-picture img,
  #RPsbsr-252 .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) {
  #RPsbs-252 .cs-container,
  #RPsbsr-252 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  #RPsbs-252 .cs-picture,
  #RPsbsr-252 .cs-picture {
    /* 415px - 522px */
    height: clamp(25.9375rem, 40.5vw, 32.625rem);
    width: 50%;
    flex: none;
  }
  #RPsbs-252 .cs-content,
  #RPsbsr-252 .cs-content {
    max-width: 33rem;
    margin: 0;
    width: 45%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #RPsbs-252 .cs-container,
  body.dark-mode #RPsbsr-252 .cs-container {
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(241, 241, 244, 0.1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(241, 241, 244, 0.1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(241, 241, 244, 0.1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  }
  body.dark-mode #RPsbs-252 .cs-topper,
  body.dark-mode #RPsbsr-252 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #RPsbs-252 .cs-title,
  body.dark-mode #RPsbsr-252 .cs-title,
  body.dark-mode #RPsbs-252 .cs-text,
  body.dark-mode #RPsbsr-252 .cs-text {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---   Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #RPsbsr-252 {
    padding: var(--sectionPadding);
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
  }
  #RPsbsr-252 .cs-container:before {
    background: #b4b2c7;
    background: linear-gradient(270deg, #b4b2c7 0%, rgba(250, 251, 252, 0.005) 0%, #b4b2c7 100%);
    transform: scaleX(1);
  }
  #RPsbsr-252 .cs-container:after {
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #RPsbsr-252 .cs-picture {
    margin: 0;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #RPsbsr-252 .cs-container {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(241, 241, 244, 0) 100%);
  }
}
/*-- -------------------------- -->
<---         CS-Content         -->
<--- -------------------------- -*/
/* you can place this CSS group in your global stylesheet that is loaded on every page of the site so all you need to do is copy and paste the HTML into any section and it will all work. Or piece it inside the media queries in whatever section you want to add it to. You can also remove the cs-topper, cs-title, and cs-text and if they aren't already in your global stylesheet you can paste them outside these media queries so all cs-topper, cs-title, and cs-text on your site will pull from 1 place. */
/* Mobile */
@media only screen and (min-width: 0rem) {
  #cs-content-1656 {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 80rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #cs-content-1656 .cs-title {
    max-width: 20ch;
    text-align: center;
  }
  #cs-content-1656 .cs-text {
    max-width: 40rem;
    position: relative;
    z-index: 1;
  }
  #cs-content-1656 .cs-text:after {
    /* divider line */
    content: "";
    width: 100%;
    height: 1px;
    margin-top: 1.5rem;
    background: var(--primary);
    opacity: 1;
    display: block;
    position: relative;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-content-1656 {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #cs-content-1656 .cs-flex {
    text-align: left;
    width: 40vw;
    max-width: 40rem;
    flex: none;
  }
  #cs-content-1656 .cs-title {
    margin: 0;
  }
  #cs-content-1656 .cs-text {
    padding: 0.75rem 0 0.75rem 1.5rem;
  }
  #cs-content-1656 .cs-text:after {
    width: 1px;
    height: 100%;
    margin: 0 1.5rem 0 0;
    order: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #cs-content-1656 .cs-title,
  body.dark-mode #cs-content-1656 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-content-1656 .cs-text {
    opacity: 0.8;
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews-62 {
    padding: var(--sectionPadding);
  }
  #reviews-62 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews-62 .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-62 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.25rem;
  }
  #reviews-62 .cs-item {
    list-style: none;
    width: 100%;
    max-width: 25.8125rem;
    margin: 0;
    padding: 0;
  }
  #reviews-62 .cs-img {
    width: 4.25rem;
    height: 4.25rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: block;
  }
  #reviews-62 .cs-name {
    font-size: 1.625rem;
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: block;
  }
  #reviews-62 .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: center;
    margin: 0 0 1rem;
    color: #7d799c;
    display: block;
  }
  #reviews-62 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2vw, 1rem);
    text-align: center;
    line-height: 1.5em;
    margin: auto;
    color: var(--bodyTextColor);
  }
  #reviews-62 .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;
  }
  #reviews-62 .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;
  }
  #reviews-62 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #reviews-62 .cs-card-group {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    row-gap: 2.5rem;
  }
  #reviews-62 .cs-item {
    /* we do this so it's stackable. You can add new any number of reviews you want and they will stack and center in the middle. We dont use grid because if you have an odd number of reviews, they don't stay centered.  They align with their grid lines. If you want 4 reviews in a row, lower the width under 23% to get the desired sizes fit 4 in a row and then stack when you add more*/
    width: clamp(31.5%, 30vw, 32.3%);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews-62 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #reviews-62 .cs-title,
  body.dark-mode #reviews-62 .cs-text,
  body.dark-mode #reviews-62 .cs-name,
  body.dark-mode #reviews-62 .cs-desc,
  body.dark-mode #reviews-62 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews-62 .cs-item-text,
  body.dark-mode #reviews-62 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #reviews-62 .cs-img {
    filter: brightness(0) invert(1);
  }
}
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-1315 {
    padding: var(--sectionPadding);
    /* clips the cs-floater and prevents it from causing overflow issues */
    overflow: hidden;
    background-color: #f7f7f7;
    position: relative;
    z-index: 1;
  }
  #pricing-1315 .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);
  }
  #pricing-1315 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #pricing-1315 .cs-title {
    max-width: 20ch;
  }
  #pricing-1315 .cs-text {
    margin-bottom: 1rem;
  }
  #pricing-1315 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #pricing-1315 .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: #fdfdfd;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 5px;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #pricing-1315 .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-1315 .cs-button-solid:hover {
    color: #fff;
  }
  #pricing-1315 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-1315 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
  }
  #pricing-1315 .cs-item {
    text-align: center;
    list-style: none;
    width: 100%;
    margin: 0;
    /* 32px - 40px top & bootm */
    /* 16px - 24px left & right */
    padding: clamp(2rem, 4.4vw, 2.5rem) clamp(1rem, 2.3vw, 1.5rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #pricing-1315 .cs-package {
    /* 13px - 16px */
    font-size: clamp(0.8125rem, 1.5vw, 1rem);
    line-height: 1.2em;
    text-align: inherit;
    text-transform: uppercase;
    font-weight: 700;
    /* 4px - 8px */
    margin: 0 0 clamp(0.25rem, 1vw, 0.5rem) 0;
  }
  #pricing-1315 .cs-desc {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #pricing-1315 .cs-price {
    /* 31px - 49px */
    font-size: clamp(1.9375rem, 4vw, 3.0625rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: inherit;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  #pricing-1315 .cs-duration {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 400;
    text-align: inherit;
    margin: 0;
    /* 4px - 8px */
    padding: clamp(0.25rem, 1vw, 0.5rem) 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #pricing-1315 .cs-ul {
    width: 100%;
    /* 16px - 24px */
    margin: clamp(1rem, 2vw, 1.25rem) 0 auto 0;
    padding: clamp(1rem, 2vw, 1.25rem) 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 8px - 12px */
    gap: clamp(0.5rem, 1.5vw, 0.75rem);
    position: relative;
  }
  #pricing-1315 .cs-ul:before {
    content: "";
    width: 100%;
    max-width: 15.625rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(232, 232, 232, 0.2) 0%, #e8e8e8 53.78%, rgba(232, 232, 232, 0.2) 100%);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  #pricing-1315 .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    line-height: 1.5em;
    font-weight: 400;
    text-align: inherit;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #pricing-1315 .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);
    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-1315 .cs-button-transparent:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #pricing-1315 .cs-button-transparent:hover {
    color: #fff;
    border-color: #000;
    background-color: #000;
  }
  #pricing-1315 .cs-button-transparent:hover:before {
    width: 100%;
  }
  #pricing-1315 .cs-button-transparent {
    /* this is the section specific override if you choose to pull out the cs-button-transparent and place it in a global stylesheet to resue acorss the entire site */
    /* 28px - 40px */
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
  }
  #pricing-1315 .cs-floater {
    width: 40.75rem;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-1315 .cs-container {
    max-width: 80rem;
  }
  #pricing-1315 .cs-container .cs-card-group {
    margin-bottom: 4.5rem;
    flex-direction: row;
    align-items: stretch;
  }
  #pricing-1315 .cs-container .cs-item:nth-of-type(2) {
    transform: translateY(4.5rem);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #pricing-1315 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #pricing-1315 .cs-content {
    text-align: left;
    align-items: flex-start;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #pricing-1315 .cs-card-group {
    width: 56.7%;
    /* prevents flexbox from squishing it */
    flex: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #pricing-1315 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #pricing-1315 .cs-title,
  body.dark-mode #pricing-1315 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-1315 .cs-text {
    opacity: 0.8;
  }
  body.dark-mode #pricing-1315 .cs-ul:before {
    opacity: 0.5;
  }
  body.dark-mode #pricing-1315 .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #pricing-1315 .cs-package {
    color: var(--primary);
  }
  body.dark-mode #pricing-1315 .cs-desc,
  body.dark-mode #pricing-1315 .cs-price,
  body.dark-mode #pricing-1315 .cs-duration,
  body.dark-mode #pricing-1315 .cs-li {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-1315 .cs-duration,
  body.dark-mode #pricing-1315 .cs-li,
  body.dark-mode #pricing-1315 .cs-desc {
    opacity: 0.8;
  }
  body.dark-mode #pricing-1315 .cs-floater {
    opacity: 0.3;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-326 {
    padding: var(--sectionPadding);
  }
  #faq-326 .cs-container {
    width: 100%;
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #faq-326 .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;
  }
  #faq-326 .cs-title {
    margin: 0;
  }
  #faq-326 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.75rem;
  }
  #faq-326 .cs-faq-item {
    list-style: none;
    width: 100%;
    background-color: #f7f7f7;
    /* clips all corners of the button that overlap the rounded border */
    overflow: hidden;
    border-radius: 0.75rem;
    transition: border-bottom 0.3s;
  }
  #faq-326 .cs-faq-item.active .cs-button {
    background-color: var(--primary);
    color: var(--bodyTextColorWhite);
  }
  #faq-326 .cs-faq-item.active .cs-button:before {
    background-color: var(--secondaryLight);
    transform: rotate(315deg);
  }
  #faq-326 .cs-faq-item.active .cs-button:after {
    background-color: var(--secondaryLight);
    transform: rotate(-315deg);
  }
  #faq-326 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px top & bottom */
    /* 16px - 24px left & right */
    padding: clamp(1.25rem, 1.3vw, 1.5rem) clamp(1rem, 2vw, 1.5rem);
    opacity: 1;
  }
  #faq-326 .cs-button {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 20px */
    padding: clamp(1rem, 1.3vw, 1.25rem);
    background-color: #f7f7f7;
    border: none;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-326 .cs-button:hover {
    cursor: pointer;
  }
  #faq-326 .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-326 .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-326 .cs-button-text {
    width: 80%;
    display: block;
  }
  #faq-326 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 90%;
    height: 0;
    margin: 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    opacity: 0;
    color: var(--bodyTextColor);
    /* clips the text so it doesn't show up */
    overflow: hidden;
    transition: opacity 0.3s, padding-bottom 0.3s;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-326 .cs-topper {
    color: var(--secondaryLight);
  }
  body.dark-mode #faq-326 .cs-title,
  body.dark-mode #faq-326 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-326 .cs-faq-item {
    background-color: var(--accent);
  }
  body.dark-mode #faq-326 .cs-faq-item.active .cs-button {
    background-color: var(--secondaryLight);
    color: var(--primary);
  }
  body.dark-mode #faq-326 .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq-326 .cs-faq-item.active .cs-button:after {
    background-color: var(--primary);
  }
  body.dark-mode #faq-326 .cs-button {
    background-color: var(--accent);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-326 .cs-button:before,
  body.dark-mode #faq-326 .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
}