/*-- -------------------------- -->
<---         Services           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #services {
    /* centers buttons */
    text-align: center;
    background-color: #f7f7f7;
    padding: var(--sectionPadding);
  }
  #services .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 49em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services .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 .cs-title {
    max-width: 39ch;
  }
  #services .cs-text {
    max-width: 66.5rem;
  }
  #services .cs-card-group {
    width: 100%;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
  #services .cs-item {
    text-align: center;
    list-style: none;
    max-width: 31.25rem;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #fff;
    grid-column: span 4;
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s, transform 0.3s;
  }
  #services .cs-item:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transform: translateY(-0.4375rem);
  }
  #services .cs-item:hover .cs-picture img {
    opacity: .3;
    transform: scale(1.1);
  }
  #services .cs-item:hover .cs-h3 {
    color: var(--primaryLight);
  }
  #services .cs-item:before {
    /* border, done in pseudo so it can sit under the picture */
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    border: 1px solid #E8E8E8;
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    background: transparent;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services .cs-link {
    text-decoration: none;
    padding: 0 0 1.25rem 0;
    display: block;
  }
  #services .cs-picture {
    width: 100%;
    height: 12.5rem;
    margin-bottom: 1.25rem;
    background-color: var(--primaryLight);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 10;
  }
  #services .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .6s, opacity .3s;
  }
  #services .cs-h3 {
    font-size: 1.25rem;
    text-align: inherit;
    line-height: 1.2em;
    font-weight: 700;
    color: var(--headerColor);
    margin: 0 0 0.75rem 0;
    /* 16px - 24px */
    padding: 0 clamp(1rem, 2vw, 1.5rem);
    transition: color .3s;
  }
  #services .cs-item-text {
    /* 14px - 16px  */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-align: inherit;
    line-height: 1.5em;
    color: var(--bodyTextColor);
    margin: 0;
    padding: 0 1.25rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
  #services .cs-item {
    grid-column: span 2;
    max-width: 28.875rem;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25em) {
  #services .cs-container {
    max-width: 80rem;
  }
  #services .cs-item {
    grid-column: span 1;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #services {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #services .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #services .cs-title,
  body.dark-mode #services .cs-text,
  body.dark-mode #services .cs-h3,
  body.dark-mode #services .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services .cs-text,
  body.dark-mode #services .cs-item-text {
    opacity: .8;
  }
  body.dark-mode #services .cs-item {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #services .cs-item:before {
    opacity: .3;
  }
}
/*-- -------------------------- -->
<---           About            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs {
    padding: var(--sectionPadding);
    position: relative;
  }
  #sbs .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 */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }
  #sbs .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs .cs-h3 {
    font-size: 1.25rem;
    color: var(--headerColor);
    margin-bottom: 1rem;
  }
  #sbs .cs-ul {
    margin: 0 0 2rem 0;
    padding: 0;
  }
  #sbs .cs-li {
    list-style: none;
    margin: 0 0 0.5rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
  }
  #sbs .cs-li:before {
    /* accent shape */
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background: #BABABA;
    border-radius: 0.25rem 0 0.25rem 0;
    display: block;
    flex: none;
  }
  #sbs .cs-image-group {
    width: 100%;
    max-width: 39.375rem;
    /* 400px - 775px */
    height: clamp(25rem, 69vw, 48.4375rem);
    /* 100px - 200px */
    border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0 clamp(6.25rem, 17vw, 12.5rem);
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.16);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    position: relative;
  }
  #sbs .cs-background {
    width: 100%;
    height: 100%;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
  }
  #sbs .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #sbs .cs-box {
    text-align: center;
    /* 40px - 67px top & bottom */
    /* 20px - 28px left & right */
    padding: clamp(2.5rem, 5vw, 4.1875rem) clamp(1.25rem, 2vw, 1.75rem);
    background-color: #fff;
    /* 48px - 80px */
    border-radius: 0 clamp(3rem, 4vw, 5rem) 0 clamp(3rem, 4vw, 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: absolute;
    /* 16px - 20px */
    right: clamp(1rem, 2vw, 1.25rem);
    /* 16px - 20px */
    bottom: clamp(1rem, 2vw, 1.25rem);
  }
  #sbs .cs-number {
    /* 31px - 39px */
    font-size: clamp(1.9375rem, 3vw, 2.4375rem);
    line-height: 1.2em;
    font-weight: 900;
    text-align: inherit;
    margin: 0;
    color: var(--primary);
  }
  #sbs .cs-desc {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 7.6875rem;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs .cs-floater {
    /* 231px - 351px */
    width: clamp(14.375rem, 27vw, 21.9375rem);
    height: auto;
    display: none;
    position: absolute;
    top: 0rem;
    right: 3.125rem;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 1500px) {
  #sbs .cs-floater {
    display: block;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #sbs .cs-title,
  body.dark-mode #sbs .cs-text,
  body.dark-mode #sbs .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs .cs-text {
    opacity: .8;
  }
  body.dark-mode #sbs .cs-floater {
    opacity: .5;
  }
}
/*-- -------------------------- -->
<---         Treatments         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-r {
    padding: var(--sectionPadding);
    background-color: #FEF7F4;
  }
  #sbs-r .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 */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #sbs-r .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;
  }
  #sbs-r .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
  }
  #sbs-r .cs-text {
    margin: 0 0 1rem 0;
  }
  #sbs-r .cs-text:last-of-type {
    margin-bottom: 1.5rem;
  }
  #sbs-r .cs-h3 {
    font-size: 1.25rem;
    color: var(--headerColor);
    margin-bottom: 1rem;
  }
  #sbs-r .cs-ul {
    margin: 0 0 2rem 0;
    padding: 0;
    columns: 2;
  }
  #sbs-r .cs-li {
    list-style: none;
    font-size: 1rem;
    margin: 0 0 0.5rem 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.75rem;
    position: relative;
  }
  #sbs-r .cs-li:before {
    /* accent shape */
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
    background: #BABABA;
    border-radius: 0.25rem 0 0.25rem 0;
    display: block;
  }
  #sbs-r .cs-image-group {
    /* using ems so we can scale the whole section using a font size min/max. Font size (.61em) max changes at desktop */
    font-size: min(1.61vw, .61em);
    width: 56.125em;
    height: 50.875em;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    /* slips it horizontally */
    transform: scaleX(-1);
  }
  #sbs-r .cs-image-group:before {
    /* accent shape */
    content: '';
    width: 18.6875em;
    height: 14.625em;
    background: #FBCEBD;
    border-radius: 6.25em 0 6.25em 0;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 8.75em;
  }
  #sbs-r .cs-left-img {
    width: 27.4375em;
    height: 35em;
    border-radius: 0 12.5em 0 12.5em;
    /* clips img corners */
    overflow: hidden;
    display: block;
  }
  #sbs-r .cs-left-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* flips it horizontally the opposite of the parent. This way images have the same orientation as the source image */
    transform: scaleX(-1);
  }
  #sbs-r .cs-right-img {
    width: 27.4375em;
    height: 35em;
    border-radius: 12.5em 0 12.5em 0;
    /* clips img corners */
    overflow: hidden;
    display: block;
    transform: translateY(6.25em);
  }
  #sbs-r .cs-right-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* flips it horizontally the opposite of the parent. This way images have the same orientation as the source image */
    transform: scaleX(-1);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-r .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
  }
  #sbs-r .cs-image-group {
    font-size: min(.85vw, 1em);
    /* prevents flexbox from squishing it */
    flex: none;
    order: 2;
  }
}
/* Large Desktop 1500px */
@media only screen and (min-width: 93.75rem) {
  #sbs-r .cs-container {
    justify-content: flex-end;
  }
  #sbs-r .cs-image-group {
    font-size: min(.8vw, 1em);
    /* The cs-image-group is actually REALLY big. It's so big, the design has it overlapping the normal 1280px container by 220px.  This is just a design choice that "breaks" the container and creates a more dynamic design and website. */
    transform: scaleX(-1) translateX(calc(clamp(4em, 8vw, 18.75em) *-1));
  }
  #sbs-r .cs-content {
    /* we absolutely position the cs-content so the cs-image-group can remain position relative and dictate the height of the section. Since the cs-content is smaller in height, if it remained relative then the height of the container would only be as tall as the .cs-content and the absolutely positioned cs-image-group would overlap into the top and bottom neiboring sections. */
    flex: none;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  #sbs-r .cs-ul {
    columns: 3;
  }
}
/* Large Desktop 3000px */
@media only screen and (min-width: 187.5rem) {
  #sbs-r .cs-image-group {
    width: 56.125rem;
    height: 50.875rem;
  }
  #sbs-r .cs-image-group:before {
    /* accent shape */
    content: '';
    width: 18.6875rem;
    height: 14.625rem;
    border-radius: 6.25rem 0 6.25rem 0;
    left: 8.75rem;
  }
  #sbs-r .cs-left-img {
    width: 27.4375rem;
    height: 35rem;
    border-radius: 0 12.5rem 0 12.5rem;
  }
  #sbs-r .cs-right-img {
    width: 27.4375rem;
    height: 35rem;
    border-radius: 12.5rem 0 12.5rem 0;
    transform: translateY(6.25rem);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-r {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #sbs-r .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #sbs-r .cs-title,
  body.dark-mode #sbs-r .cs-text,
  body.dark-mode #sbs-r .cs-li,
  body.dark-mode #sbs-r .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-r .cs-text,
  body.dark-mode #sbs-r .cs-li {
    opacity: .8;
  }
  body.dark-mode #sbs-r .cs-image-group:before {
    opacity: .3;
  }
}
/*-- -------------------------- -->
<---          Classes           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services2 {
    padding: var(--sectionPadding);
    /* clips floating arrow from overflowing */
    overflow: hidden;
  }
  #services2 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services2 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 25.8125rem;
    /* pushes away to the left side of the container */
    margin-right: auto;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #services2 .cs-floater {
    width: 21.9375rem;
    height: auto;
    display: none;
    position: absolute;
    top: -23.125rem;
    left: calc(50%);
    transform: rotate(-66deg);
  }
  #services2 .cs-card-group {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #services2 .cs-item {
    list-style: none;
    text-align: left;
    margin: 0;
    /* 24px - 32px left & right */
    padding: 2rem clamp(1.5rem, 2vw, 2rem);
    box-sizing: border-box;
    border-radius: 1rem;
    background-color: #F7F7F7;
    grid-column: span 4;
  }
  #services2 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #services2 .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 1.25rem 0;
    color: var(--bodyTextColor);
  }
  #services2 .cs-link {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: inherit;
    text-decoration: none;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
  }
  #services2 .cs-link:hover .cs-icon {
    transform: translateX(0.625rem);
  }
  #services2 .cs-icon {
    width: 1.5rem;
    height: auto;
    transition: transform .3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services2 .cs-container {
    max-width: 80rem;
  }
  #services2 .cs-card-group {
    /* pushes down the same amount the cs-items are translated from their position */
    margin-bottom: 5rem;
  }
  #services2 .cs-item {
    max-width: 24.4375rem;
    grid-column: span 2;
  }
  #services2 .cs-item:nth-of-type(2),
  #services2 .cs-item:nth-of-type(4) {
    transform: translateY(5rem);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services2 .cs-container {
    flex-direction: row;
    justify-content: space-between;
  }
  #services2 .cs-card-group {
    width: 60%;
    flex: none;
  }
  #services2 .cs-floater {
    display: block;
  }
  #services2 .cs-content {
    /* sends it to the right in the 2nd position */
    order: 2;
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services2 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #services2 .cs-title,
  body.dark-mode #services2 .cs-text,
  body.dark-mode #services2 .cs-h3,
  body.dark-mode #services2 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services2 .cs-floater {
    opacity: .4;
  }
  body.dark-mode #services2 .cs-text,
  body.dark-mode #services2 .cs-item-p {
    opacity: .8;
  }
  body.dark-mode #services2 .cs-item {
    background-color: rgba(0, 0, 0, 0.2);
  }
}
/*-- -------------------------- -->
<---         Equipment          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services3 {
    padding: var(--sectionPadding);
    /* clips the svg wave from overflowing */
    overflow: hidden;
    position: relative;
    background-color: #f7f7f7;
    z-index: 1;
  }
  #services3 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services3 .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;
  }
  #services3 .cs-title {
    margin: 0;
  }
  #services3 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
    position: relative;
    z-index: 1;
  }
  #services3 .cs-item {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    grid-column: span 4;
  }
  #services3 .cs-link {
    text-align: center;
    text-decoration: none;
    width: 100%;
    height: 26.25rem;
    padding: 1.25rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    border-radius: 1rem;
    /* clips img corners around the border */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.75rem;
    position: relative;
  }
  #services3 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #services3 .cs-item-p {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #services3 .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    object-fit: cover;
  }
  #services3 .cs-background:before {
    /* gradient overlay */
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #000000 10.13%, rgba(0, 0, 0, 0) 40.71%);
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    transition: height .3s;
  }
  #services3 .cs-background img {
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    position: relative;
    z-index: -1;
    transition: transform .6s;
  }
  #services3 .cs-wave {
    /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
    width: 320%;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: -1;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services3 .cs-container {
    max-width: 80rem;
  }
  #services3 .cs-item {
    grid-column: span 2;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services3 {
    /* the padding grows with the screen width so as the svg gets taller it doesn't overlap the section */
    padding-bottom: 14vw;
  }
  #services3 .cs-item {
    grid-column: span 1;
  }
  #services3 .cs-link:hover .cs-h3,
  #services3 .cs-link:focus-within .cs-h3 {
    color: var(--primary);
    transform: translateY(0);
  }
  #services3 .cs-link:hover .cs-item-p,
  #services3 .cs-link:focus-within .cs-item-p {
    height: auto;
    opacity: 1;
    transform: translateY(0);
  }
  #services3 .cs-link:hover .cs-background:before,
  #services3 .cs-link:focus-within .cs-background:before {
    height: 180%;
  }
  #services3 .cs-link:hover .cs-background img,
  #services3 .cs-link:focus-within .cs-background img {
    transform: scale(1.1);
  }
  #services3 .cs-h3 {
    /* transform down the same amount as the flex gap */
    transform: translateY(0.75rem);
    transition: transform .3s, color .3s;
  }
  #services3 .cs-item-p {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(3.125rem);
    transition: height .3s, opacity .3s, transform .3s;
  }
  #services3 .cs-wave {
    width: 100%;
    left: 0;
    transform: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services3 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #services3 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #services3 .cs-title,
  body.dark-mode #services3 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services3 .cs-text {
    opacity: .8;
  }
  body.dark-mode #services3 .cs-wave path {
    fill: var(--dark);
  }
}
/*-- -------------------------- -->
<---           Stats            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #stats {
    padding: var(--sectionPadding);
  }
  #stats .cs-container {
    width: 100%;
    /* chnages to 1280px at desktop */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #stats .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;
  }
  #stats .cs-text {
    margin: 0 0 1rem 0;
  }
  #stats .cs-text:last-of-type {
    margin-bottom: 2.5rem;
  }
  #stats .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #stats .cs-item {
    text-align: center;
    list-style: none;
    /*chages at small desktop then again at large desktop */
    width: 100%;
    /* 44px - 60px */
    padding: clamp(2.75rem, 5vw, 3.75rem) 2rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    /* clips cs-icon overflowing */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-column: span 2;
    position: relative;
  }
  #stats .cs-item:nth-of-type(1) {
    background-color: #FEF7F4;
    border-radius: 0 5rem 0 5rem;
  }
  #stats .cs-item:nth-of-type(2) {
    background-color: #E8E8E8;
    border-radius: 5rem 0 5rem 0;
  }
  #stats .cs-item:nth-of-type(3) {
    background-color: #FBCEBD;
    border-radius: 5rem 0 5rem 0;
  }
  #stats .cs-item:nth-of-type(4) {
    background-color: #F7F7F7;
    border-radius: 0 5rem 0 5rem;
  }
  #stats .cs-number {
    /* 39px - 49px */
    font-size: clamp(2.4375rem, 6vw, 3.0625rem);
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 900;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
  }
  #stats .cs-desc {
    /* 16px -20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    font-weight: 700;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
}
/* Tablet - 650px */
@media only screen and (min-width: 40.625rem) {
  #stats .cs-item {
    grid-column: span 1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #stats .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #stats .cs-topper,
  body.dark-mode #stats .cs-color,
  body.dark-mode #stats .cs-number {
    color: var(--primaryLight);
  }
  body.dark-mode #stats .cs-title,
  body.dark-mode #stats .cs-text,
  body.dark-mode #stats .cs-desc {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #stats .cs-text,
  body.dark-mode #stats .cs-item-p {
    opacity: .8;
  }
  body.dark-mode #stats .cs-item:nth-of-type(1) {
    background-color: rgba(254, 247, 244, 0.2);
  }
  body.dark-mode #stats .cs-item:nth-of-type(2) {
    background-color: rgba(232, 232, 232, 0.2);
  }
  body.dark-mode #stats .cs-item:nth-of-type(3) {
    background-color: rgba(251, 206, 189, 0.2);
  }
  body.dark-mode #stats .cs-item:nth-of-type(4) {
    background-color: rgba(247, 247, 247, 0.2);
  }
}
/*-- -------------------------- -->
<---           Logos            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #logos {
    padding: var(--sectionPadding);
    background-color: #f7f7f7;
  }
  #logos .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 50rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #logos .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;
  }
  #logos .cs-title {
    margin: 0;
  }
  #logos .cs-logo-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
  }
  #logos .cs-logo {
    width: 40%;
    max-width: 7.5rem;
    height: auto;
    margin: 0;
    display: block;
  }
}
/* Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #logos .cs-container {
    max-width: 80rem;
  }
  #logos .cs-logo-group {
    flex-wrap: nowrap;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #logos {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #logos .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #logos .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #logos .cs-logo {
    filter: grayscale(100) brightness(2000%);
  }
}
/*-- -------------------------- -->
<---    Occupational Therapy    -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-r2 {
    padding: var(--sectionPadding);
  }
  #sbs-r2 .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 */
    gap: clamp(3rem, 7vw, 4rem);
  }
  #sbs-r2 .cs-content {
    /* set text aling to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    /* 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;
  }
  #sbs-r2 .cs-text {
    margin: 0 0 1rem 0;
  }
  #sbs-r2 .cs-text:last-of-type {
    /* makes last paragraph have a larger margin bottom to create more space between the text and button */
    margin-bottom: 2rem;
  }
  #sbs-r2 .cs-picture {
    display: block;
    position: relative;
    width: 100%;
    max-width: 39.375rem;
    /* 400px - 775px */
    height: clamp(25rem, 70vw, 48.4375rem);
    box-shadow: 0px 2.80579px 42.0868px rgba(0, 0, 0, 0.16);
    /* 100px - 200px */
    border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0 clamp(6.25rem, 17vw, 12.5rem);
    /* clips img tag corners */
    overflow: hidden;
  }
  #sbs-r2 .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) {
  #sbs-r2 {
    padding: var(--sectionPadding);
  }
  #sbs-r2 .cs-container {
    flex-direction: row;
    max-width: 80rem;
    justify-content: space-between;
  }
  #sbs-r2 .cs-content {
    width: 53%;
    /* reset the padding, add the section padding back to the section container */
    padding: 0;
    /* sends it to the left in the 1st position */
    order: -1;
  }
  #sbs-r2 .cs-picture {
    width: 47vw;
    position: relative;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-r2 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #sbs-r2 .cs-title,
  body.dark-mode #sbs-r2 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-r2 .cs-text {
    opacity: .8;
  }
  body.dark-mode #sbs-r2 .cs-picture:before {
    background-color: var(--accent);
  }
}
/*-- -------------------------- -->
<---         Why Choose         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #why-choose {
    /* Centers Button */
    text-align: center;
    padding: var(--sectionPadding);
    /* prevents the arrow from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #why-choose:before {
    /* background color, done in a pseudo so it pulls from the variable color */
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: .03;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #why-choose .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #why-choose .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;
  }
  #why-choose .cs-card-group {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #why-choose .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    /* 20px - 32px */
    padding: clamp(1.25rem, 2.3vw, 2rem);
    background-color: #fff;
    border-radius: 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    grid-column: span 2;
    position: relative;
    z-index: 1;
  }
  #why-choose .cs-icon {
    width: 3rem;
    height: auto;
    margin: 0 0 1.25rem 0;
    display: block;
  }
  #why-choose .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.5em;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    transition: color .3s;
  }
  #why-choose .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
    transition: color .3s;
  }
  #why-choose .cs-floater {
    width: 21.9375rem;
    height: auto;
    display: none;
    position: absolute;
    top: -13.75rem;
    right: -3.75rem;
    transform: rotate(-66deg);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
  #why-choose .cs-container {
    max-width: 80rem;
  }
  #why-choose .cs-item {
    grid-column: span 1;
  }
  #why-choose .cs-floater {
    display: block;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #why-choose:before {
    opacity: .2;
    background-color: #000;
  }
  body.dark-mode #why-choose .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #why-choose .cs-title,
  body.dark-mode #why-choose .cs-text,
  body.dark-mode #why-choose .cs-heading3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose .cs-item {
    background-color: var(--accent);
  }
  body.dark-mode #why-choose .cs-h3,
  body.dark-mode #why-choose .cs-item-text,
  body.dark-mode #why-choose .cs-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #why-choose .cs-floater {
    opacity: .5;
  }
}
/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing {
    padding: var(--sectionPadding);
  }
  #pricing .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 31.25em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #pricing .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;
  }
  #pricing .cs-toggle-group {
    width: auto;
    margin: 2rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #pricing .cs-plan {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
  }
  #pricing .cs-plan:hover {
    cursor: pointer;
  }
  #pricing .cs-toggle {
    width: 3.875rem;
    height: 2.25rem;
    border-radius: 2.5rem;
    background-color: var(--primaryLight);
    margin: 0 0.75rem;
    border: none;
    position: relative;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #pricing .cs-toggle:hover {
    cursor: pointer;
  }
  #pricing .cs-toggle.active:before {
    opacity: 1;
  }
  #pricing .cs-toggle.active .cs-toggle-switch {
    left: 2rem;
  }
  #pricing .cs-toggle:before {
    /* top right box */
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ffba43 -24.69%, #e12213 126.23%);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    border-radius: 2.5rem;
    transition: opacity .3s;
  }
  #pricing .cs-toggle-switch {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.375rem;
    transition: left .3s;
    background: #fff;
  }
  #pricing .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 1.8vw, 1.25rem);
    perspective: 700px;
    transform-style: preserve-3d;
  }
  #pricing .cs-card-group.active.cs-option1 {
    /* when the active class is on the cs-card-group, run these styles */
    transform: scale(0);
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
  }
  #pricing .cs-card-group.active.cs-option1 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity .3s, transform .6s;
  }
  #pricing .cs-card-group.active.cs-option2 {
    /* when the active class is on the cs-card-group, run these styles */
    visibility: visible;
    pointer-events: all;
    opacity: 1;
    position: relative;
    left: auto;
    bottom: 0;
    transform: scale(1);
  }
  #pricing .cs-card-group.active.cs-option2 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
  }
  #pricing .cs-option1 {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    visibility: visible;
    left: left;
    bottom: auto;
    transform: scale(1);
    transform-origin: left top;
    transition: transform .6s, opacity .3s, visibility .3s;
  }
  #pricing .cs-option1 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
    transition: opacity .3s, transform .6s;
  }
  #pricing .cs-option1 .cs-item:nth-of-type(2) {
    transition-delay: .2s;
  }
  #pricing .cs-option1 .cs-item:nth-of-type(3) {
    transition-delay: .4s;
  }
  #pricing .cs-option2 {
    /* default styles when there is no active class on the cs-card-group */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    left: 0;
    bottom: -30em;
    transform: scale(0);
    transform-origin: left top;
    transition: transform .6s, opacity .3s, visibility .3s;
  }
  #pricing .cs-option2 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity .3s, transform .6s;
  }
  #pricing .cs-option2 .cs-item:nth-of-type(2) {
    transition-delay: .2s;
  }
  #pricing .cs-option2 .cs-item:nth-of-type(3) {
    transition-delay: .4s;
  }
  #pricing .cs-item {
    list-style: none;
    width: 100%;
    margin: 0;
    /* 20px - 32px left & right */
    /* 20px - 32px bottom */
    padding: 0 clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2rem);
    /* prevent padding from affecting height and width */
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #F4F4F4;
    /* clips corners */
    overflow: hidden;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-column: span 12;
  }
  #pricing .cs-item.cs-popular .cs-background {
    background-color: #1A1A1A;
  }
  #pricing .cs-item.cs-popular .cs-background img {
    opacity: 1;
  }
  #pricing .cs-item.cs-popular .cs-package {
    color: var(--primary);
  }
  #pricing .cs-item.cs-popular .cs-price,
  #pricing .cs-item.cs-popular .cs-desc {
    color: var(--bodyTextColorWhite);
  }
  #pricing .cs-item.cs-popular .cs-desc {
    opacity: .8;
  }
  #pricing .cs-top {
    padding: 2.5rem 0;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    z-index: 1;
  }
  #pricing .cs-background {
    background-color: #FEF7F4;
    position: absolute;
    top: 0;
    bottom: 0;
    /* same as cs-item padding left and right */
    left: -2rem;
    right: -2rem;
    z-index: -1;
  }
  #pricing .cs-background img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 0;
  }
  #pricing .cs-package {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: center;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: #767676;
    display: block;
  }
  #pricing .cs-price {
    /* 39px - 49px */
    font-size: clamp(2.4375rem, 5vw, 3.0625rem);
    line-height: 1.2em;
    text-align: center;
    font-weight: 900;
    margin: 0;
    color: var(--headerColor);
    display: block;
    /* so it's even with the bottom of the cs-desc */
    transform: translateY(0.5625rem);
  }
  #pricing .cs-desc {
    font-size: 1rem;
    line-height: 1.2em;
    text-align: center;
    margin: 0 0 0 0.5rem;
    color: var(--bodyTextColor);
    opacity: .8;
    display: block;
  }
  #pricing .cs-ul {
    margin: 0 0 2rem 0;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #pricing .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    width: 100%;
    /* 24px - 40px */
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1.5rem, 4vw, 2.5rem) 0;
    padding: 0;
    color: var(--bodyTextColor);
  }
  #pricing .cs-item-text.cs-disabled {
    opacity: .4;
    filter: grayscale(1);
  }
  #pricing .cs-li {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    list-style: none;
    line-height: 1.2em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: space-between;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 1rem;
  }
  #pricing .cs-li.cs-disabled {
    opacity: .4;
    filter: grayscale(1);
  }
  #pricing .cs-icon {
    width: 1.125rem;
    height: auto;
    display: block;
  }
  #pricing .cs-price-button {
    /* pushes up against the cs-ul so if there's loess li's in the list, the button always pushes itself to the bottom */
    margin-top: auto;
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing .cs-container {
    max-width: 80rem;
  }
  #pricing .cs-item {
    grid-column: span 6;
  }
  #pricing .cs-item.cs-popular {
    grid-column: span 12;
    order: -1;
  }
  #pricing .cs-option1 .cs-item.cs-popular {
    grid-column: span 6;
  }
}
/* Desktop - 900px */
@media only screen and (min-width: 59.375rem) {
  #pricing .cs-item {
    grid-column: span 4;
  }
  #pricing .cs-item.cs-popular {
    grid-column: span 4;
    order: initial;
  }
  #pricing .cs-option1 .cs-item {
    grid-column: 3 / span 4;
  }
  #pricing .cs-option1 .cs-item.cs-popular {
    grid-column: span 4;
  }
  #pricing .cs-option2 {
    bottom: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #pricing {
    background-color: var(--dark);
  }
  body.dark-mode #pricing .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #pricing .cs-title,
  body.dark-mode #pricing .cs-text,
  body.dark-mode #pricing .cs-item-p,
  body.dark-mode #pricing .cs-package,
  body.dark-mode #pricing .cs-li,
  body.dark-mode #pricing .cs-price,
  body.dark-mode #pricing .cs-desc,
  body.dark-mode #pricing .cs-plan,
  body.dark-mode #pricing .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing .cs-text,
  body.dark-mode #pricing .cs-item-text {
    opacity: .8;
  }
  body.dark-mode #pricing .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #pricing .cs-item.cs-popular {
    background-color: var(--primary);
  }
  body.dark-mode #pricing .cs-background {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #pricing .cs-icon {
    /* makes icon white (if it wasnt black to start) */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #pricing .cs-price-button {
    background-color: var(--bodyTextColorWhite);
    color: #1a1a1a;
    transition: color .3s;
  }
  body.dark-mode #pricing .cs-price-button:hover {
    color: #fff;
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #gallery {
    padding: var(--sectionPadding);
    /* the padding grows with the screen width so as the svg gets taller it doesn't overlap the section */
    padding-bottom: 14vw;
    position: relative;
    overflow: hidden;
    background-color: #f7f7f7;
    z-index: 1;
  }
  #gallery .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #gallery .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;
  }
  #gallery .cs-title {
    margin: 0;
  }
  #gallery .cs-text {
    max-width: 40.625rem;
  }
  #gallery .cs-gallery {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    /* 16px - 20px */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  #gallery .cs-image {
    border-radius: 1.25rem;
    width: 46%;
    /* 150px - 300px */
    height: clamp(9.375rem, 39vw, 18.75rem);
    max-width: 21.875rem;
    /* clips the image corners */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #gallery .cs-image img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    /* pushes the image so the top of the image is at the top of the parent */
    object-position: top;
  }
  #gallery .cs-wave {
    /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
    width: 320%;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: -1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #gallery .cs-image {
    width: 23.8%;
    /* 300px - 400px */
    height: clamp(18.75rem, 30vw, 25rem);
    aspect-ratio: 1;
  }
  #gallery .cs-wave {
    width: 100%;
    left: 0;
    transform: none;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #gallery {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #gallery .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #gallery .cs-title,
  body.dark-mode #gallery .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #gallery .cs-wave path {
    fill: var(--dark);
  }
}
/*-- -------------------------- -->
<---       Meet The Team        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #meet-team {
    padding: var(--sectionPadding);
    overflow: hidden;
  }
  #meet-team .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #meet-team .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;
  }
  #meet-team .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.3vw, 1.25rem);
    position: relative;
  }
  #meet-team .cs-item {
    list-style: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
  }
  #meet-team .cs-item:hover .cs-picture:before,
  #meet-team .cs-item:hover .cs-picture:after {
    opacity: 1;
  }
  #meet-team .cs-item:hover .cs-picture img {
    transform: scale(1.1);
  }
  #meet-team .cs-item:hover .cs-info {
    background-color: var(--primary);
  }
  #meet-team .cs-item:hover .cs-name,
  #meet-team .cs-item:hover .cs-job {
    color: var(--bodyTextColorWhite);
  }
  #meet-team .cs-picture {
    width: 100%;
    height: auto;
    margin: 0 0 0.5rem 0;
    /* removed at tablet */
    aspect-ratio: 0.80589681;
    border-radius: 1rem;
    /* clips the img corners */
    /* clips img tag from overflowing it on hover */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #meet-team .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* makes sure the top of the image is at the top of the parent, heads won't get cut off this way */
    object-position: top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: transform .7s;
  }
  #meet-team .cs-info {
    width: 100%;
    padding: 1rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #F7F7F7;
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: background-color 0.3s;
  }
  #meet-team .cs-name {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--headerColor);
    display: block;
    transition: color .3s;
  }
  #meet-team .cs-job {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin-right: 0;
    color: var(--bodyTextColor);
    display: block;
    transition: color .3s;
  }
}
/* Tablet - 550px */
@media only screen and (min-width: 34.375rem) {
  #meet-team .cs-content {
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  #meet-team .cs-title {
    margin: 0;
  }
  #meet-team .cs-card-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: stretch;
  }
  #meet-team .cs-item {
    width: 48.3%;
  }
  #meet-team .cs-picture {
    height: 25.4375rem;
    /* remove the aspect ratio so the height can be squished */
    aspect-ratio: initial;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #meet-team .cs-card-group {
    justify-content: center;
  }
  #meet-team .cs-item {
    width: 22.7vw;
    max-width: 19.0625rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #meet-team .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #meet-team .cs-title,
  body.dark-mode #meet-team .cs-name,
  body.dark-mode #meet-team .cs-job {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #meet-team .cs-job {
    opacity: .8;
  }
  body.dark-mode #meet-team .cs-info {
    background-color: rgba(0, 0, 0, 0.2);
  }
}
/*-- -------------------------- -->
<---          Reviews           -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #reviews {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #reviews:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: .03;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #reviews .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #reviews .cs-content {
    /* set text aling to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 56.25rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #reviews .cs-title {
    /* 20 characters including spaces */
    max-width: 24ch;
    margin: 0;
  }
  #reviews .cs-card-group {
    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 .cs-item {
    list-style: none;
    max-width: 39.375rem;
    /* 20px - 32px */
    padding: clamp(1.25rem, 4vw, 2rem);
    background-color: #fff;
    border-radius: 0 1.5rem 0 1.5rem;
    /* 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 .cs-flex-group {
    width: 100%;
    margin: auto 0 1.25rem 0;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #FBCEBD;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1.25rem;
  }
  #reviews .cs-profile {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    /* clips image corners to make circle */
    overflow: hidden;
    position: relative;
    display: block;
  }
  #reviews .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 .cs-name {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2vw, 1.5625rem);
    line-height: 1.5em;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--headerColor);
    display: block;
  }
  #reviews .cs-job {
    font-size: 0.875rem;
    line-height: 1.2em;
    font-weight: 400;
    margin: 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #reviews .cs-review {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    margin-bottom: 1.25rem;
    color: var(--bodyTextColor);
  }
  #reviews .cs-stars {
    width: 6.75rem;
    height: auto;
    margin: 0 0 0.5rem 0;
    display: block;
  }
  #reviews .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    text-align: inherit;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #reviews .cs-quote1,
  #reviews .cs-quote2 {
    display: none;
    width: 12.125rem;
    height: auto;
    display: block;
    position: absolute;
    z-index: -1;
  }
  #reviews .cs-quote1 {
    top: 0;
    left: 0;
  }
  #reviews .cs-quote2 {
    bottom: 0;
    right: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48em) {
  #reviews .cs-container {
    max-width: 80rem;
  }
  #reviews .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #reviews .cs-quote1,
  #reviews .cs-quote2 {
    display: block;
  }
  #reviews .cs-item {
    display: flex;
    flex-direction: column;
  }
  #reviews .cs-flex-group {
    margin-top: 0;
  }
  #reviews .cs-stars {
    margin-top: auto;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #reviews {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #reviews .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #reviews .cs-title,
  body.dark-mode #reviews .cs-text,
  body.dark-mode #reviews .cs-review,
  body.dark-mode #reviews .cs-name,
  body.dark-mode #reviews .cs-job,
  body.dark-mode #reviews .cs-desc {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #reviews .cs-text,
  body.dark-mode #reviews .cs-desc {
    opacity: .8;
  }
  body.dark-mode #reviews .cs-item {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #reviews .cs-flex-group {
    border-color: var(--accent);
  }
  body.dark-mode #reviews .cs-quote1,
  body.dark-mode #reviews .cs-quote2 {
    opacity: .2;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #faq {
    padding: var(--sectionPadding);
    position: relative;
  }
  #faq .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 40px - 48px */
    gap: clamp(2.5rem, 5vw, 3rem);
  }
  #faq .cs-picture {
    width: 100%;
    max-width: 39.375rem;
    /* 400px - 775px */
    height: clamp(25rem, 95vw, 48.4375rem);
    /* 100px - 200px */
    border-radius: 0 clamp(6.25rem, 17vw, 12.5rem) 0 clamp(6.25rem, 17vw, 12.5rem);
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.16);
    /* clips the img tag corners */
    overflow: hidden;
    display: block;
    position: relative;
    z-index: 1;
  }
  #faq .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #faq .cs-content {
    text-align: left;
    max-width: 33.875rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
  }
  #faq .cs-faq-item {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #E8E8E8;
    transition: border-bottom 0.3s;
  }
  #faq .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  #faq .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq .cs-faq-item.active .cs-button:before {
    background-color: var(--primaryLight);
    transform: rotate(315deg);
  }
  #faq .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
    transform: rotate(-315deg);
  }
  #faq .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    padding: 0 0 clamp(1rem, 2vw, 1.5rem) 0;
    opacity: 1;
  }
  #faq .cs-button {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: bold;
    /* 16px - 24px */
    padding: clamp(1rem, 2.3vw, 1.5rem) 0;
    border: none;
    background: transparent;
    color: var(--headerColor);
    display: block;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq .cs-button:hover {
    cursor: pointer;
  }
  #faq .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 .5s;
  }
  #faq .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 .5s;
  }
  #faq .cs-button-text {
    width: 90%;
    display: block;
  }
  #faq .cs-item-p {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    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 .cs-item-p a {
    color: var(--primary);
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64em) {
  #faq .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #faq .cs-picture {
    width: 50%;
    /* 500px - 750px */
    height: clamp(31.25rem, 68vw, 46.875rem);
  }
  #faq .cs-content {
    width: 55%;
    padding: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #faq .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #faq .cs-title,
  body.dark-mode #faq .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq .cs-faq-item {
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #faq .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  body.dark-mode #faq .cs-faq-item.active .cs-button {
    color: var(--primaryLight);
  }
  body.dark-mode #faq .cs-faq-item.active .cs-button:before,
  body.dark-mode #faq .cs-faq-item.active .cs-button:after {
    background-color: var(--primaryLight);
  }
  body.dark-mode #faq .cs-item-p a {
    color: var(--primaryLight);
  }
  body.dark-mode #faq .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq .cs-button:before,
  body.dark-mode #faq .cs-button:after {
    background-color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---           Blog             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #blog {
    padding: var(--sectionPadding);
    padding-bottom: 14vw;
    background-color: #f7f7f7;
  }
  #blog .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #blog .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;
  }
  #blog .cs-title {
    margin: 0;
  }
  #blog .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #blog .cs-item {
    list-style: none;
    width: 100%;
    border-radius: 1.5rem 0 1.5rem 0;
    /* clips the img corners */
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0px 4px 60px rgba(0, 0, 0, 0.04);
    grid-column: span 12;
    position: relative;
    z-index: 1;
  }
  #blog .cs-item:hover .cs-picture img {
    transform: scale(1.1);
  }
  #blog .cs-featured {
    min-height: 31.25rem;
    display: flex;
    align-items: flex-end;
  }
  #blog .cs-featured .cs-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: -1;
  }
  #blog .cs-featured .cs-picture:before {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #000000 19.38%, rgba(0, 0, 0, 0) 53.45%);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #blog .cs-featured .cs-h3,
  #blog .cs-featured .cs-item-text,
  #blog .cs-featured .cs-date {
    color: var(--bodyTextColorWhite);
  }
  #blog .cs-picture {
    width: 100%;
    /* 180px - 290px */
    height: clamp(11.25rem, 10vw, 18.125rem);
    /* prevents image from overflowing parent when it scales on hover */
    overflow: hidden;
    display: block;
    position: relative;
  }
  #blog .cs-picture img {
    width: 100%;
    height: 100%;
    /* makes it act like a background image */
    object-fit: cover;
    display: block;
    transition: transform .6s;
  }
  #blog .cs-item-content {
    /* 24px - 40px top and bottom */
    /* 20px - 24px left & right */
    padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1rem, 3vw, 1.25rem);
    position: relative;
    z-index: 10;
  }
  #blog .cs-date {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 1.25rem 0;
    color: #767676;
    display: block;
  }
  #blog .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
    color: var(--headerColor);
    display: block;
  }
  #blog .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0 0 1.25rem 0;
    color: var(--bodyTextColor);
    display: block;
  }
  #blog .cs-link {
    font-size: 1rem;
    line-height: 1.2em;
    font-weight: bold;
    text-decoration: none;
    margin: 0;
    color: var(--primary);
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }
  #blog .cs-link:hover .cs-icon {
    transform: translateX(0.625rem);
  }
  #blog .cs-icon {
    width: 1.25rem;
    height: auto;
    display: block;
    transition: transform .3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #blog .cs-container {
    max-width: 80rem;
  }
  #blog .cs-item {
    display: flex;
    justify-content: center;
    align-items: stretch;
  }
  #blog .cs-featured {
    align-items: flex-end;
  }
  #blog .cs-featured .cs-picture {
    max-width: 100%;
  }
  #blog .cs-picture {
    width: 50%;
    height: 100%;
    max-width: 23.125rem;
    flex: none;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #blog .cs-item {
    grid-column: 1 / span 6;
  }
  #blog .cs-featured {
    grid-column: 7 / 13;
    grid-row: 1 / 3;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #blog {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #blog .cs-topper,
  body.dark-mode #blog .cs-link {
    color: var(--primaryLight);
  }
  body.dark-mode #blog .cs-title,
  body.dark-mode #blog .cs-text,
  body.dark-mode #blog .cs-date,
  body.dark-mode #blog .cs-h3,
  body.dark-mode #blog .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #blog .cs-text,
  body.dark-mode #blog .cs-item-text {
    opacity: .8;
  }
  body.dark-mode #blog .cs-item {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #blog .cs-icon {
    filter: brightness(135%);
  }
}