/* STYLES FOR ABOVE THE FOLD */
/*-- -------------------------- -->
<---           Hero             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-custom {
    /* 200px - 350px top - leaving extra space for the navigation */
    /* 100px - 200px bottom */
    padding: clamp(10rem, 7vw, 15rem) 1rem clamp(6.25rem, 7vw, 12.5rem);
    /* prevents the topper line from causing an overflow */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #hero-custom .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 64rem;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
  }
  #hero-custom .cs-content {
    text-align: center;
    align-items: center;
    width: 100%;
    max-width: 35.625rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
  }
  #hero-custom .cs-title,
  #hero-custom .cs-text {
    text-align: center;
  }
  #hero-custom .cs-title {
    /* 39px - 49px */
    font-size: clamp(2.4375rem, 6.4vw, 3.0625rem);
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
    max-width: 51.8125rem;
    color: #fff;
    position: relative;
    z-index: 1;
    margin: 0 0 1rem 0;
    padding: 0;
  }
  #hero-custom .cs-title span {
    color: #fff;
    display: inline;
  }
  #hero-custom .cs-text {
    /* 16px - 18px */
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.5em;
    text-align: center;
    width: 100%;
    /* 464px - 622px */
    max-width: clamp(29rem, 60vw, 38.785rem);
    margin: 0;
    margin-bottom: 1.5rem;
    color: #fff;
  }
  #hero-custom .cs-badges {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    justify-content: center;
  }
  #hero-custom .cs-badge {
    display: flex;
    align-items: center;
  }
  #hero-custom .cs-badge-img {
    width: auto;
    height: 35px;
    object-fit: contain;
  }
  #hero-custom .cs-service-list {
    display: flex;
    margin: 1.5rem 0 0 0;
    padding: 0;
    list-style: none;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  #hero-custom .cs-service-item {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 0.875rem;
    background-color: var(--primary);
    padding: 8px 18px;
    border-radius: 50px;
    white-space: nowrap;
    font-weight: 500;
  }
  #hero-custom .cs-check-icon {
    width: 13px;
    height: 13px;
    margin-right: 0.375rem;
    fill: #fff;
    flex-shrink: 0;
  }
  #hero-custom .cs-reviews,
  #hero-custom .cs-reviews-flex,
  #hero-custom .cs-stars,
  #hero-custom .cs-desc {
    display: none;
  }
  #hero-custom .cs-rating-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0.25rem;
  }
  #hero-custom .cs-ratings {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.75rem;
  }
  #hero-custom .cs-rating-icon {
    width: 1.125rem;
    height: 1.125rem;
    margin-bottom: 0.25rem;
  }
  #hero-custom .cs-rating-score,
  #hero-custom .cs-rating-trusted {
    font-size: 0.5625rem;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
  }
  #hero-custom .cs-reviews-img {
    width: calc(48 / 16 * 1rem);
    height: auto;
    border-radius: 50%;
    border: 5px solid #fff;
    background-color: #fff;
  }
  #hero-custom .cs-reviews-number {
    font-size: 1rem;
    font-weight: 700;
    width: 3rem;
    height: 3rem;
    background-color: var(--secondary);
    color: var(--bodyTextColorWhite);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #hero-custom .cs-right {
    text-align: center;
    width: 100%;
    max-width: 25rem;
    /* increase padding all around */
    padding: clamp(2rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
    box-sizing: border-box;
    border-radius: 0.75rem;
    background-color: #fff;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  }
  #hero-custom .cs-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.75rem;
    padding: 0 2rem 0 1.75rem;
    overflow: hidden;
    color: var(--bodyTextColorWhite);
    border-radius: 2.5rem;
    display: inline-block;
    position: absolute;
    top: 0.5rem;
    right: 0;
    z-index: 1;
    transform: rotate(14deg);
    transform-origin: right;
  }
  #hero-custom .cs-tag:before {
    /* background color */
    content: '';
    height: 100%;
    background: var(--secondary);
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 20px;
    z-index: -1;
  }
  #hero-custom .cs-tag:after {
    /* triangle */
    content: '';
    width: 1.5625rem;
    height: 1.5625rem;
    background-color: var(--secondary);
    opacity: 1;
    overflow: hidden;
    position: absolute;
    display: block;
    top: 50%;
    right: 0.375rem;
    z-index: -1;
    transform: translateY(-50%) rotate(45deg);
  }
  #hero-custom .cs-dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    right: 0.9375rem;
    top: 50%;
    transform: translateY(-50%);
  }
  #hero-custom .cs-h3 {
    /* 20px - 22px */
    font-size: clamp(1.25rem, 2vw, 1.375rem);
    font-weight: 700;
    text-align: inherit;
    max-width: 100%;
    margin: 0;
    color: #242424;
    line-height: 1.2;
  }
  #hero-custom .cs-expires {
    font-size: 1rem;
    line-height: 1.5em;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--secondary);
    display: block;
  }
  #hero-custom .cs-form-text {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 0.75rem 0;
    color: #242424;
  }
  #hero-custom .cs-form {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }
  #hero-custom .cs-label {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  #hero-custom .cs-input,
  #hero-custom select {
    font-size: 0.875rem;
    width: 100%;
    height: 2.625rem;
    padding: 0 0.75rem;
    color: var(--bodyTextColor);
    background-color: #f5f5f5;
    border: none;
    border-radius: 0.25rem;
    /* prevents padding from adding to height and width */
    box-sizing: border-box;
    transition: border-color 0.3s;
  }
  #hero-custom .cs-input:hover,
  #hero-custom select:hover {
    border-color: var(--secondary);
  }
  #hero-custom .cs-input:focus,
  #hero-custom select:focus {
    outline: 1px solid #007bff;
  }
  #hero-custom .cs-input::placeholder,
  #hero-custom select::placeholder {
    color: #777;
    opacity: 0.9;
  }
  #hero-custom .cs-textarea {
    min-height: 5.9375rem;
    padding-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-family: inherit;
  }
  #hero-custom .cs-submit {
    grid-column: span 12;
    margin: 0;
    border: none;
    text-transform: capitalize;
    font-weight: 700;
    line-height: 2.75rem;
    font-size: 0.875rem;
    background-color: #007bff;
    border-radius: 0.25rem;
    color: #fff;
    transition: background-color 0.3s;
    margin-top: 0.125rem;
    letter-spacing: 0.5px;
  }
  #hero-custom .cs-submit:hover {
    cursor: pointer;
    background-color: #0056b3;
  }
  #hero-custom .cs-disclaimer {
    font-size: 0.625rem;
    text-align: center;
    line-height: 1.4em;
    margin: 0.75rem 0 0 0;
    color: #666;
    width: 100%;
  }
  #hero-custom .cs-disclaimer-icon {
    width: 1.25rem;
    height: auto;
  }
  #hero-custom .cs-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #hero-custom .cs-background:before {
    /* Overlay */
    content: "";
    width: 100%;
    height: 100%;
    background: #1a1a1a;
    opacity: 0.75;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 1;
    /* prevents the cursor from interacting with it */
    pointer-events: none;
  }
  #hero-custom .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #hero-custom .cs-button-solid {
    background-color: #007bff;
    transition: background-color 0.3s;
  }
  #hero-custom .cs-button-solid:hover {
    background-color: #0056b3;
  }
  #hero-custom .cs-google-review {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
  }
  #hero-custom .cs-google-icon {
    width: 24px;
    height: 24px;
    margin-right: 4px;
  }
  #hero-custom .cs-star-row {
    display: flex;
    align-items: center;
    margin: 0 4px;
  }
  #hero-custom .cs-star {
    width: 13px;
    height: 13px;
    margin-right: 1px;
  }
  #hero-custom .cs-review-text {
    font-size: 13px;
    color: #333;
    white-space: nowrap;
  }
  #hero-custom .cs-badges {
    justify-content: center;
  }
}
@media only screen and (min-width: 0rem) and only screen and (max-width: 360px) {
  #hero-custom .cs-google-review {
    flex-direction: column;
    gap: 4px;
  }
  #hero-custom .cs-google-icon {
    margin-right: 0;
  }
  #hero-custom .cs-star-row {
    margin-right: 0;
  }
  #hero-custom .cs-badge-img {
    height: 30px;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-custom {
    padding: clamp(12rem, 7vw, 15rem) 1rem clamp(6.25rem, 7vw, 12.5rem);
  }
  #hero-custom .cs-content {
    text-align: left;
    align-items: flex-start;
    justify-content: flex-start;
  }
  #hero-custom .cs-title,
  #hero-custom .cs-text {
    text-align: left;
  }
  #hero-custom .cs-badges {
    justify-content: flex-start;
  }
  #hero-custom .cs-service-list {
    justify-content: flex-start;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #hero-custom .cs-container {
    max-width: 73.75rem;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 5rem;
  }
  #hero-custom .cs-content {
    max-width: 40.625rem;
    padding-left: 1.25rem;
  }
  #hero-custom .cs-title {
    font-size: clamp(2.8rem, 3.5vw, 3.5rem);
    line-height: 1.1;
  }
  #hero-custom .cs-text {
    font-size: clamp(1rem, 1.2vw, 1.125rem);
    max-width: 34.375rem;
  }
  #hero-custom .cs-right {
    max-width: 25rem;
    margin-right: 1.25rem;
  }
  #hero-custom .cs-service-list {
    margin-top: 1.25rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #hero-custom .cs-right {
    background-color: var(--medium);
  }
  body.dark-mode #hero-custom .cs-h3,
  body.dark-mode #hero-custom .cs-form-text,
  body.dark-mode #hero-custom .cs-label,
  body.dark-mode #hero-custom .cs-disclaimer {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #hero-custom .cs-review-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #hero-custom .cs-disclaimer-icon {
    /* turns it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #hero-custom .cs-input,
  body.dark-mode #hero-custom select {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #hero-custom select {
    background-color: #1a1a1a !important;
  }
  body.dark-mode #hero-custom .cs-form-text {
    opacity: 0.8;
  }
}
/*-- -------------------------- -->
<---          Banner            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #banner-712 {
    z-index: 1;
    position: relative;
    /* 175px - 200px top */
    padding: clamp(10.9375rem, 15vw, 15.5rem) 1rem clamp(3rem, 5vw, 6.5rem);
  }
  #banner-712 .cs-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    text-align: center;
    gap: 1rem;
  }
  #banner-712 .cs-int-title {
    position: relative;
    margin: 0;
    font-family: Outfit;
    /* 39px - 61px */
    font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
    line-height: 1.2em;
    font-weight: 900;
    color: var(--bodyTextColorWhite);
    text-align: inherit;
  }
  #banner-712 .cs-background {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    height: 100%;
    width: 100%;
  }
  #banner-712 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
  #banner-712 .cs-background:before {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    /* background color overlay */
    content: "";
    opacity: 0.75;
    display: block;
    background: #000;
    height: 100%;
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #banner-712 .cs-background:before {
    opacity: 1;
    background: linear-gradient(90.01deg, rgba(0, 0, 0, 0.9) 16.86%, rgba(0, 0, 0, 0) 100%);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1188 .cs-card-group {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  #services-1188 .cs-item {
    margin: 0;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #services-1188 .cs-card-group {
    max-width: 80rem;
  }
  #services-1188 .cs-item {
    max-width: none;
    padding: 2rem 1.5rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1188 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #services-1188 .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #services-1188 .cs-text,
  body.dark-mode #services-1188 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #services-1188 .cs-picture {
    background-color: var(--accent);
  }
  body.dark-mode #services-1188 .cs-icon {
    /* turns it white */
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #services-1188 .cs-title,
  body.dark-mode #services-1188 .cs-text,
  body.dark-mode #services-1188 .cs-h3,
  body.dark-mode #services-1188 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---         Timetable          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #timetable-1731 {
    padding: var(--sectionPadding);
    position: relative;
    /* remove the font family so the Stitch inherits the fonts from your global stylesheet */
  }
  #timetable-1731 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #timetable-1731 .cs-content {
    /* set text align to center if content needs to be centrally aligned */
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* aligns content to the left, set to center to centrally align */
    align-items: flex-start;
  }
  #timetable-1731 .cs-button-solid {
    font-size: 1rem;
    font-weight: 700;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-align: center;
    text-decoration: none;
    min-width: 9.375rem;
    max-height: 2.875rem;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    color: #fff;
    background-color: #e8e8e8;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
  }
  #timetable-1731 .cs-button-solid span {
    height: 100%;
    padding: 0 1.5rem;
    background-color: var(--primary);
    display: block;
  }
  #timetable-1731 .cs-button-solid img {
    box-sizing: content-box;
    padding: 0.75rem;
    transition: filter 0.3s, transform 0.3s 0.15s;
  }
  #timetable-1731 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background-color: var(--primary);
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.5s;
  }
  #timetable-1731 .cs-button-solid:hover img {
    transform: translateX(0.25rem) translateY(-0.25rem);
    filter: brightness(0) invert(1);
  }
  #timetable-1731 .cs-button-solid:hover:before {
    width: 100%;
  }
  #timetable-1731 .cs-table-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 3vw, 1.25rem);
  }
  #timetable-1731 .cs-table {
    text-align: left;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #timetable-1731 .cs-table thead {
    padding: 1.25rem;
    background-color: #e8e8e8;
    transition: background-color 0.3s;
  }
  #timetable-1731 .cs-table thead th {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 4vw, 1.5625rem);
    font-weight: 700;
    line-height: 1.2em;
    color: var(--headerColor);
    transition: color 0.3s;
  }
  #timetable-1731 .cs-table tbody {
    padding: 1.25rem;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #timetable-1731 .cs-table tbody tr {
    display: flex;
    justify-content: space-between;
  }
  #timetable-1731 .cs-table tbody th,
  #timetable-1731 .cs-table tbody td {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--bodyTextColor);
  }
  #timetable-1731 .cs-table:hover thead {
    background-color: var(--primary);
  }
  #timetable-1731 .cs-table:hover thead th {
    color: #fff;
  }
  #timetable-1731 .cs-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #timetable-1731 .cs-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #timetable-1731 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #timetable-1731 .cs-table-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #timetable-1731 .cs-table-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #timetable-1731 {
    background-color: rgba(0, 0, 0, 0.2);
  }
  body.dark-mode #timetable-1731 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #timetable-1731 .cs-table thead {
    background-color: rgba(0, 0, 0, 0.6);
  }
  body.dark-mode #timetable-1731 .cs-table thead th {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #timetable-1731 .cs-table tbody {
    background-color: rgba(0, 0, 0, 0.3);
  }
  body.dark-mode #timetable-1731 .cs-table tbody th,
  body.dark-mode #timetable-1731 .cs-table tbody td {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #timetable-1731 .cs-table:hover thead {
    background-color: var(--primary);
  }
  body.dark-mode #timetable-1731 .cs-table:hover thead th {
    color: #fff;
  }
  body.dark-mode #timetable-1731 .cs-background {
    display: none;
  }
}
/*-- -------------------------- -->
<---           Table            -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #table-1669 {
    padding: var(--sectionPadding);
  }
  #table-1669 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #table-1669 .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;
  }
  #table-1669 .cs-table {
    width: 100%;
    border-collapse: collapse;
  }
  #table-1669 .cs-th {
    padding: 0.75rem 1rem;
    box-sizing: border-box;
  }
  #table-1669 .cs-td {
    padding: 0.5rem 1rem;
    box-sizing: border-box;
  }
  #table-1669 .cs-th,
  #table-1669 .cs-td {
    border: 1px solid #ddd;
    text-align: center;
  }
  #table-1669 .cs-color .cs-th:first-child {
    color: #fff;
    background-color: var(--primary);
  }
  #table-1669 .cs-th:first-child,
  #table-1669 .cs-td:first-child {
    position: sticky;
    left: 0;
    z-index: 100;
    /* Make sure it sits above the other cells */
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    text-align: left;
  }
  #table-1669 .cs-th {
    background-color: #f2f2f2;
  }
  #table-1669 .cs-tr {
    color: var(--bodyTextColor);
  }
  #table-1669 .cs-icon {
    height: 1rem;
    width: auto;
  }
}
/* Tablet - 600px */
@media screen and (max-width: 37.5rem) {
  #table-1669 .cs-table {
    display: block;
    overflow-x: auto;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #table-1669 .cs-th {
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #table-1669 .cs-th:first-child,
  body.dark-mode #table-1669 .cs-td:first-child {
    background-color: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #table-1669 .cs-th,
  body.dark-mode #table-1669 .cs-td {
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #table-1669 .cs-color .cs-th:first-child {
    color: #fff;
    background-color: var(--secondary);
  }
  body.dark-mode #table-1669 .cs-tr {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #table-1669 .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
}
/*-- -------------------------- -->
<---        Content Page        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  #content-page-1399 {
    padding: var(--sectionPadding);
    background-color: #fff;
    /* clips the wave background from causing overflow issues when it goes off screen */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #content-page-1399 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 40px - 64px */
    gap: clamp(2.5rem, 4vw, 4rem);
    position: relative;
  }
  #content-page-1399 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #content-page-1399 h2,
  #content-page-1399 h3,
  #content-page-1399 h4,
  #content-page-1399 h5,
  #content-page-1399 h6 {
    font-weight: 700;
    text-align: inherit;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
  }
  #content-page-1399 h2 {
    font-size: 2rem;
    margin-top: 2rem;
  }
  #content-page-1399 h3 {
    font-size: 1.5rem;
    color: var(--primary);
  }
  #content-page-1399 h4,
  #content-page-1399 h5,
  #content-page-1399 h6 {
    font-size: 1.25rem;
  }
  #content-page-1399 .cs-button-solid {
    margin-bottom: 2rem;
  }
  #content-page-1399 .cs-no-margin {
    margin: 0;
  }
  #content-page-1399 .cs-color {
    color: var(--primary);
  }
  #content-page-1399 p {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColor);
  }
  #content-page-1399 p:last-of-type {
    margin-bottom: 2rem;
  }
  #content-page-1399 p a {
    font-size: inherit;
    line-height: inherit;
    text-decoration: underline;
    color: var(--primary);
    filter: brightness(120%);
  }
  #content-page-1399 ol,
  #content-page-1399 ul {
    padding-left: 1.5rem;
    margin: 0 0 2rem 0;
    color: var(--bodyTextColor);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  #content-page-1399 ul li {
    list-style: none;
    color: inherit;
    position: relative;
  }
  #content-page-1399 ul li:before {
    /* custom list bullet */
    content: "";
    width: 3px;
    height: 3px;
    background: currentColor;
    opacity: 1;
    border-radius: 50%;
    position: absolute;
    display: block;
    top: 0.625rem;
    left: -0.75rem;
  }
  #content-page-1399 img {
    width: 100%;
    height: auto;
    display: block;
  }
  #content-page-1399 .cs-image-group {
    width: 100%;
    display: none;
    flex-direction: column;
    /* 16px - 20px */
    gap: clamp(1rem, 2.6vw, 1.25rem);
    position: relative;
  }
  #content-page-1399 .cs-flex {
    position: relative;
  }
  #content-page-1399 .cs-background {
    width: 100%;
    height: 100%;
    /* 32px - 48px */
    border-radius: clamp(2rem, 4vw, 3rem);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
  }
  #content-page-1399 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #content-page-1399 .cs-box {
    text-align: left;
    width: 100%;
    max-width: 12.5rem;
    padding: 2rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: var(--primary);
    /* 48px - 80px */
    border-radius: 2rem;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    position: absolute;
    /* 12px - 20px */
    right: clamp(0.75rem, 1.9vw, 1.5rem);
    /* 12px - 20px */
    bottom: clamp(0.75rem, 1.9vw, 1.5rem);
  }
  #content-page-1399 .cs-box-icon {
    width: 3.75rem;
    height: auto;
    display: block;
  }
  #content-page-1399 .cs-desc {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #content-page-1399 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.265rem, 1fr));
    align-items: center;
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #content-page-1399 .cs-item {
    list-style: none;
    /* 16px - 24px */
    padding: clamp(1rem, 3vw, 1.5rem);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #f7f7f7;
    border-radius: 1rem;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #content-page-1399 .cs-item:before {
    display: none;
  }
  #content-page-1399 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #content-page-1399 .cs-h3-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #content-page-1399 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #content-page-1399 .cs-item-text:last-of-type {
    margin: 0;
  }
  #content-page-1399 .cs-ul {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #content-page-1399 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push icon top the top so if the list item goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #content-page-1399 .cs-icon {
    width: 1.5rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 1px;
    display: block;
  }
  #content-page-1399 .cs-content-group {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 1rem;
    margin: 1.5rem 0;
  }
  #content-page-1399 .cs-wrapper {
    border-radius: 1rem;
    overflow: hidden;
    z-index: 1;
    position: relative;
    display: block;
    height: clamp(12.5rem, 40vw, 35rem);
    width: 100%;
  }
  #content-page-1399 .cs-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #content-page-1399 .cs-bubbles {
    font-size: min(2.5vw, .7em);
    width: 36.375em;
    height: 34.8125em;
    display: none;
    position: absolute;
    /* changes to auto at larger desktop */
    right: -16.25em;
    /* changes to -220px at large desktop */
    bottom: -3.125em;
    z-index: -1;
  }
  #content-page-1399 .cs-bubbles:before {
    /* white border bubble */
    content: "";
    width: 29em;
    height: 29em;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #content-page-1399 .cs-bubbles:after {
    /* orange bubble */
    content: "";
    width: 22.875em;
    height: 22.875em;
    background: var(--primary);
    opacity: 0.15;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #content-page-1399 .cs-container {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
  #content-page-1399 .cs-content {
    width: 100%;
    max-width: 100%;
    /* prevents flexbox from squishing it */
    flex: none;
  }
}
/* Desktop - 1200px */
@media only screen and (min-width: 75rem) {
  #content-page-1399 .cs-content {
    width: 100%;
  }
  #content-page-1399 .cs-box {
    display: flex;
  }
  #content-page-1399 .cs-bubbles {
    font-size: 1em;
    margin-left: 37.5rem;
    display: block;
    right: auto;
    left: 50%;
    bottom: -13.75rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #content-page-1399 {
    background-color: var(--dark);
  }
  body.dark-mode #content-page-1399 .cs-title,
  body.dark-mode #content-page-1399 .cs-text,
  body.dark-mode #content-page-1399 h2,
  body.dark-mode #content-page-1399 h3,
  body.dark-mode #content-page-1399 h4,
  body.dark-mode #content-page-1399 h5,
  body.dark-mode #content-page-1399 h6,
  body.dark-mode #content-page-1399 li,
  body.dark-mode #content-page-1399 p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #content-page-1399 .cs-color,
  body.dark-mode #content-page-1399 a {
    color: var(--primaryLight);
  }
  body.dark-mode #content-page-1399 p,
  body.dark-mode #content-page-1399 li {
    color: #ebebeb;
  }
  body.dark-mode #content-page-1399 .cs-item {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #content-page-1399 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #content-page-1399 .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #content-page-1399 .cs-picture {
    border-color: var(--dark);
    background-color: var(--dark);
  }
  body.dark-mode #content-page-1399 .cs-bubbles:before {
    border-color: rgba(255, 255, 255, 0.2);
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0em) {
  #sbs {
    padding: var(--sectionPadding);
  }
  #sbs .cs-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    margin: auto;
    max-width: 80rem;
    width: 100%;
    row-gap: 2.5rem;
  }
  #sbs .cs-left {
    position: relative;
    border-radius: 0.5rem;
    height: 39.75em;
    /* using ems so we can use font size to scale the whole section */
    width: 39.4375em;
    /* scaling the font size with the view width */
    font-size: min(2.31vw, 0.7em);
  }
  #sbs .cs-picture {
    position: absolute;
    display: block;
    border-radius: 0.5rem;
    /* clips img tag corners */
    overflow: hidden;
  }
  #sbs .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0.5rem;
    height: 100%;
    width: 100%;
    /* makes image act like a background image */
    object-fit: cover;
  }
  #sbs .cs-picture1 {
    top: 0;
    left: 0;
    border-radius: 0.5rem;
    height: 36.3125em;
    width: 32.625em;
  }
  #sbs .cs-picture2 {
    bottom: 0;
    right: 0;
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid #fff;
    border-radius: 0.5rem;
    background-color: #fff;
    height: 25em;
    width: 25.875em;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
  }
  #sbs .cs-right {
    border-radius: 0.5rem;
    margin: auto;
    max-width: 33.875rem;
  }
  #sbs .cs-topper {
    margin-bottom: 0.25rem;
    text-align: left;
  }
  #sbs .cs-title {
    max-width: 50rem;
    text-align: left;
  }
  #sbs .cs-text {
    margin-bottom: 1rem;
    max-width: 46.875rem;
    text-align: left;
  }
  #sbs .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbs .cs-flex-group {
    position: relative;
    border-radius: 0.5rem;
    background-color: #f7f7f7;
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
  }
  #sbs .cs-flex-p {
    margin: 0 0 1rem;
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    color: #353535;
  }
  #sbs .cs-name {
    display: block;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
    font-size: 1rem;
    line-height: 1.2em;
    font-family: "Outfit";
    font-weight: 700;
    color: var(--headerColor);
  }
  #sbs .cs-job {
    display: block;
    font-size: 0.875rem;
    line-height: 1.5em;
    color: #353535;
  }
  #sbs .cs-quote-icon {
    position: absolute;
    bottom: 0rem;
    /* 16px - 32px */
    right: clamp(1rem, 4vw, 2rem);
    border-radius: 0.5rem;
    height: auto;
    /* 60px - 136px */
    width: clamp(3.75rem, 10vw, 8.5rem);
    color: #1a1a1a;
  }
  #sbs .cs-button-solid {
    margin-top: 2rem;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64em) {
  #sbs .cs-container {
    flex-flow: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #sbs .cs-left {
    font-size: min(1.2vw, 1em);
    flex: none;
  }
  #sbs .cs-right {
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0em) {
  body.dark-mode #sbs .cs-left:before,
  body.dark-mode #sbs .cs-left:after {
    background: var(--accent);
  }
  body.dark-mode #sbs .cs-picture2 {
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid var(--dark);
    background-color: var(--dark);
  }
  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,
  body.dark-mode #sbs .cs-flex-p,
  body.dark-mode #sbs .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs .cs-flex-group {
    background-color: var(--accent);
  }
  body.dark-mode #sbs .cs-job {
    opacity: 0.8;
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs .cs-quote-icon {
    opacity: 0.2;
  }
}
/*-- -------------------------- -->
<---       Side By Side         -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  @keyframes floatAnimation {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-2rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes floatAnimation2 {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3rem);
    }
    100% {
      transform: translateY(0);
    }
  }
  #sbs-1362 {
    padding: var(--sectionPadding);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  #sbs-1362 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbs-1362 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 39.375rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbs-1362 .cs-topper {
    color: #767676;
  }
  #sbs-1362 .cs-title {
    /* 23 characters wide including spaces */
    max-width: 26ch;
  }
  #sbs-1362 .cs-text {
    margin-bottom: 1rem;
  }
  #sbs-1362 .cs-text:last-of-type {
    margin-bottom: 1.5rem;
  }
  #sbs-1362 .cs-card-group {
    width: 100%;
    max-width: 39.375rem;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
    align-items: center;
    gap: clamp(1rem, 2vw, 1.25rem);
  }
  #sbs-1362 .cs-item {
    list-style: none;
    /* 16px - 24px */
    padding: clamp(1rem, 3vw, 1.5rem);
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: #f7f7f7;
    border-radius: 1rem;
    border: 1px solid #e8e8e8;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #sbs-1362 .cs-h3 {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--headerColor);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #sbs-1362 .cs-h3-icon {
    width: 2rem;
    height: auto;
    display: block;
  }
  #sbs-1362 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1362 .cs-ul {
    width: 100%;
    margin: 0 0 1.5rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #sbs-1362 .cs-li {
    font-size: var(--bodyFontSize);
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push icon top the top so if the list item goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 0.5rem;
  }
  #sbs-1362 .cs-icon {
    width: 1.5rem;
    height: auto;
    /* adds extra space between the icon and top of parent so it's more centered */
    margin-top: 1px;
    display: block;
  }
  #sbs-1362 .cs-button-solid {
    font-size: 1rem;
    line-height: 3.5rem;
    text-decoration: none;
    font-weight: 700;
    overflow: hidden;
    margin: 0;
    color: #fff;
    padding: 0 3rem;
    border-radius: 1.875rem;
    background-color: var(--primary);
    text-transform: capitalize;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: color 0.3s;
  }
  #sbs-1362 .cs-button-solid:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 0%;
    background: #1a1a1a;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }
  #sbs-1362 .cs-button-solid:hover {
    color: var(--primary);
  }
  #sbs-1362 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbs-1362 .cs-image-group {
    width: 100%;
    max-width: 36.625rem;
    /* Changes to auto at desktop */
    height: 32.5rem;
    /* 32px - 48px */
    border-radius: clamp(2rem, 4vw, 3rem);
    /* clips the corners of the children around the border radius */
    overflow: hidden;
    position: relative;
  }
  #sbs-1362 .cs-background {
    width: 100%;
    height: 100%;
    /* makes it cover the parent dimensions */
    object-fit: cover;
    display: block;
  }
  #sbs-1362 .cs-background img {
    width: 100%;
    height: 100%;
    /* makes it cover the parent like a backgorund image */
    object-fit: cover;
    display: block;
  }
  #sbs-1362 .cs-box {
    text-align: left;
    width: 100%;
    max-width: 19rem;
    padding: 2rem;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    background-color: var(--primary);
    /* 48px - 80px */
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    position: absolute;
    /* 12px - 20px */
    right: clamp(0.75rem, 1.9vw, 1.5rem);
    /* 12px - 20px */
    bottom: clamp(0.75rem, 1.9vw, 1.5rem);
  }
  #sbs-1362 .cs-box-icon {
    width: 3.75rem;
    height: auto;
    display: block;
  }
  #sbs-1362 .cs-desc {
    font-size: 1.25rem;
    line-height: 1.2em;
    text-align: inherit;
    font-weight: 700;
    width: 100%;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #sbs-1362 .cs-bubbles {
    font-size: min(2.5vw, .7em);
    width: 26.1875em;
    height: 26.6875em;
    position: absolute;
    /* changes to 160px at larger desktop */
    right: -16.25em;
    /* changes to 30px at large desktop */
    bottom: -3.125em;
    z-index: -1;
  }
  #sbs-1362 .cs-bubbles:before {
    /* white border bubble */
    content: "";
    width: 20.625em;
    height: 20.625em;
    background: transparent;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
  #sbs-1362 .cs-bubbles:after {
    /* orange bubble */
    content: "";
    width: 16.25em;
    height: 16.25em;
    background: var(--primary);
    opacity: 0.15;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    animation-name: floatAnimation2;
    animation-duration: 14s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1362 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbs-1362 .cs-image-group {
    height: auto;
  }
  #sbs-1362 .cs-bubbles {
    font-size: min(2.5vw, 1em);
  }
}
/* Large Desktop 1600px */
@media only screen and (min-width: 100rem) {
  #sbs-1362 .cs-bubbles {
    margin-left: 40.625rem;
    right: auto;
    left: 50%;
    bottom: 1.875rem;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbs-1362 .cs-topper {
    color: var(--primary);
  }
  body.dark-mode #sbs-1362 .cs-title,
  body.dark-mode #sbs-1362 .cs-text,
  body.dark-mode #sbs-1362 .cs-li,
  body.dark-mode #sbs-1362 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-1362 .cs-text,
  body.dark-mode #sbs-1362 .cs-li,
  body.dark-mode #sbs-1362 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #sbs-1362 .cs-item {
    background-color: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #sbs-1362 .cs-h3 {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbs-1362 .cs-icon {
    filter: grayscale(1) brightness(1000%);
  }
  body.dark-mode #sbs-1362 .cs-bubbles:before {
    border-color: rgba(255, 255, 255, 0.2);
  }
}
/*-- -------------------------- -->
<---        Recent Posts        -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #blog-1347 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #blog-1347 .cs-container {
    width: 100%;
    /* changes to 1280px on desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #blog-1347 .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-1347 .cs-title {
    max-width: 20ch;
  }
  #blog-1347 .cs-topper {
    color: var(#007ecb);
  }
  #blog-1347 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1rem;
  }
  #blog-1347 .cs-item {
    list-style: none;
    display: flex;
    flex-direction: column;
    grid-column: span 12;
  }
  #blog-1347 .cs-item:hover .cs-h3,
  #blog-1347 .cs-item:hover .cs-date,
  #blog-1347 .cs-item:hover .cs-category {
    color: #fff;
  }
  #blog-1347 .cs-item:hover .cs-item-text {
    background-color: var(--primary);
  }
  #blog-1347 .cs-item:hover .cs-icon-wrapper {
    border-color: #fff;
  }
  #blog-1347 .cs-item:hover .cs-icon,
  #blog-1347 .cs-item:hover .cs-date-icon {
    filter: brightness(1000%) grayscale(1);
  }
  #blog-1347 .cs-item:hover .cs-icon {
    transform: rotate(45deg);
  }
  #blog-1347 .cs-item:hover .cs-category::before {
    background-color: #fff;
    opacity: 0.2;
  }
  #blog-1347 .cs-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    /* if one card has more content then the others, the card will stretch to fill the parent container */
    flex-grow: 1;
    gap: 1rem;
  }
  #blog-1347 .cs-picture {
    width: 100%;
    height: 20rem;
    margin: 0;
    border-radius: 1.5rem;
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  #blog-1347 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #blog-1347 .cs-item-text {
    padding: 1.25rem;
    background-color: #f7f7f7;
    border-radius: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* makes the item text the element that grows to fill the container */
    flex-grow: 1;
    transition: background-color 0.3s;
  }
  #blog-1347 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
    line-height: 1.2em;
    text-align: left;
    margin: 0;
    color: #1a1a1a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color 0.3s;
  }
  #blog-1347 .cs-icon-wrapper {
    width: 3rem;
    height: 3rem;
    border: 1px solid #bababa;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* prevents the parent flexbox from shrinking the icon */
    flex-shrink: 0;
    transition: border-color 0.3s;
  }
  #blog-1347 .cs-icon {
    width: auto;
    height: 0.75rem;
    transition: filter 0.3s, transform 0.3s;
  }
  #blog-1347 .cs-info {
    margin: 1rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #blog-1347 .cs-date {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-align: left;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s;
  }
  #blog-1347 .cs-date-icon {
    width: auto;
    height: 1.5rem;
    transition: filter 0.3s;
  }
  #blog-1347 .cs-category {
    font-size: 0.875rem;
    /* centers the text if the category bullet has to span multiple lines */
    text-align: center;
    padding: 0.25rem 1rem;
    color: #1a1a1a;
    border-radius: 5rem;
    position: relative;
    z-index: 0;
    overflow: hidden;
  }
  #blog-1347 .cs-category::before {
    content: "";
    width: 100%;
    height: 100%;
    background: #e8e8e8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #blog-1347 .cs-bubbles {
    width: 20.0625rem;
    height: 26.4375rem;
    display: none;
    position: absolute;
    top: 66.4375rem;
    right: -8.75rem;
    z-index: -1;
  }
  #blog-1347 .cs-bubbles:before {
    /* white border bubble */
    content: "";
    width: 16.5rem;
    height: 16.5rem;
    background: transparent;
    opacity: 1;
    border: 1px solid #1a1a1a;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    animation-name: floatAnimation;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
  }
  #blog-1347 .cs-bubbles:after {
    /* orange bubble */
    content: "";
    width: 16.5rem;
    height: 16.5rem;
    background: var(--primary);
    opacity: 0.1;
    border-radius: 50%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    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) {
  #blog-1347 .cs-bubbles {
    display: block;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #blog-1347 .cs-container {
    max-width: 80rem;
  }
  #blog-1347 .cs-item {
    grid-column: span 4;
  }
  #blog-1347 .cs-bubbles {
    top: 17.5625rem;
  }
}
/* Large Desktop - 1300px */
@media only screen and (min-width: 81.25rem) {
  #blog-1347 .cs-bubbles {
    margin-right: -61.875rem;
    right: 50%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #blog-1347 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #blog-1347 .cs-title,
  body.dark-mode #blog-1347 .cs-text,
  body.dark-mode #blog-1347 .cs-h3,
  body.dark-mode #blog-1347 .cs-date,
  body.dark-mode #blog-1347 .cs-category {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #blog-1347 .cs-text,
  body.dark-mode #blog-1347 .cs-date,
  body.dark-mode #blog-1347 .cs-category {
    opacity: 0.8;
  }
  body.dark-mode #blog-1347 .cs-item-text {
    background-color: var(--medium);
  }
  body.dark-mode #blog-1347 .cs-category::before {
    background-color: var(--accent);
  }
}
/*-- -------------------------- -->
<---    Side By Side Reverse     -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-312 {
    padding: var(--sectionPadding);
  }
  #sbsr-312 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-312 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: left;
    width: 100%;
    max-width: 33.875rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: flex-start;
  }
  #sbsr-312 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-312 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-312 .cs-quote {
    margin: 0 0 2rem 0;
    /* 16px - 32px */
    padding: clamp(1rem, 3vw, 2rem);
    background-color: #f7f7f7;
    border-radius: 1rem;
    position: relative;
  }
  #sbsr-312 .cs-quote-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0 0 1rem;
    color: #767676;
    display: block;
  }
  #sbsr-312 .cs-name {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0 0 0.25rem;
    color: var(--headerColor);
    display: block;
  }
  #sbsr-312 .cs-job {
    font-size: 0.875rem;
    line-height: 1.5em;
    color: #767676;
    display: block;
  }
  #sbsr-312 .cs-quote-icon {
    /* 60px - 136px */
    width: clamp(3.75rem, 10vw, 8.5rem);
    height: auto;
    position: absolute;
    bottom: 0rem;
    /* 16px - 32px */
    right: clamp(1rem, 4vw, 2rem);
  }
  #sbsr-312 .cs-image-group {
    /* scaling the font size with the view width */
    font-size: min(2.31vw, .7em);
    /* using ems so we can use font size to scale the whole section */
    width: 39.4375em;
    height: 39.75em;
    position: relative;
  }
  #sbsr-312 .cs-picture {
    border-radius: 1.5em;
    /* clips img tag corners */
    overflow: hidden;
    position: absolute;
    display: block;
  }
  #sbsr-312 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* makes image act like a background image */
    object-fit: cover;
  }
  #sbsr-312 .cs-picture1 {
    width: 32.625em;
    height: 36.3125em;
    right: 0;
    top: 0;
  }
  #sbsr-312 .cs-picture2 {
    width: 25.875em;
    height: 25em;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 40px;
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid #fff;
    left: 0;
    bottom: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbsr-312 .cs-container {
    flex-flow: row;
    justify-content: space-between;
    gap: 3.25rem;
  }
  #sbsr-312 .cs-image-group {
    font-size: min(1.2vw, 1em);
    flex: none;
    /* sends it to the right in the 2nd position */
    order: 2;
  }
  #sbsr-312 .cs-content {
    margin: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #sbsr-312 .cs-image-group:before,
  body.dark-mode #sbsr-312 .cs-image-group:after {
    background: var(--accent);
  }
  body.dark-mode #sbsr-312 .cs-picture2 {
    background-color: var(--dark);
    /* 6px - 12px */
    border: clamp(0.375em, 1.5vw, 0.75em) solid var(--dark);
  }
  body.dark-mode #sbsr-312 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #sbsr-312 .cs-title,
  body.dark-mode #sbsr-312 .cs-text,
  body.dark-mode #sbsr-312 .cs-h3,
  body.dark-mode #sbsr-312 .cs-quote-text,
  body.dark-mode #sbsr-312 .cs-name {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #sbsr-312 .cs-quote {
    background-color: var(--accent);
  }
  body.dark-mode #sbsr-312 .cs-job {
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  body.dark-mode #sbsr-312 .cs-quote-icon {
    opacity: 0.2;
  }
}
/*-- -------------------------- -->
<---          Timeline          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #timeline-970 {
    padding: var(--sectionPadding);
    background-color: #007ecb;
    /* clips the white line through the bullets */
    overflow: hidden;
  }
  #timeline-970 .cs-container {
    width: 100%;
    /* changes to 1440px at tablet */
    max-width: 34.375em;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #timeline-970 .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;
  }
  #timeline-970 .cs-title {
    max-width: 18ch;
    color: var(--bodyTextColorWhite);
  }
  #timeline-970 .cs-text {
    max-width: 32.625rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #timeline-970 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* 40px - 80px */
    gap: clamp(2.5rem, 6vw, 5rem);
    position: relative;
  }
  #timeline-970 .cs-card-group:before {
    /* white line through the bullets */
    content: "";
    width: 1px;
    background: #d5d5d5;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    /* send it way down to reach the bottom of the section, and have some overlap so if you add content and the ul gets longer, it will still be at the bottom */
    bottom: -18.75rem;
    /* half the width of the bullet */
    left: 0.375rem;
  }
  #timeline-970 .cs-item {
    width: 100%;
    max-width: 25rem;
    list-style: none;
    padding: 0 0 0 3.25rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    position: relative;
  }
  #timeline-970 .cs-item:before {
    /* bullet circle */
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    background: #FFF;
    border-radius: 50%;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
  }
  #timeline-970 .cs-icon {
    width: 3.75rem;
    height: auto;
    /* 32px - 40px */
    margin: 0 0 clamp(2rem, 3vw, 2.5rem);
  }
  #timeline-970 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: 700;
    /* changes to 100% at tablet */
    width: 80%;
    margin: 0 0 1rem 0;
    color: var(--bodyTextColorWhite);
    position: relative;
  }
  #timeline-970 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #timeline-970 .cs-container {
    max-width: 90rem;
  }
  #timeline-970 .cs-card-group {
    flex-direction: row;
  }
  #timeline-970 .cs-card-group:before {
    width: 100%;
    height: 1px;
    top: auto;
    bottom: 0.375rem;
    /* these next two properties center the line in the UL */
    left: 50%;
    transform: translateX(-50%);
  }
  #timeline-970 .cs-item {
    padding: 0 0 4.125rem 0;
    z-index: 1;
  }
  #timeline-970 .cs-item::before {
    top: auto;
    bottom: 0rem;
  }
  #timeline-970 .cs-h3 {
    width: 100%;
  }
}
/*-- -------------------------- -->
<---            FAQ             -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #faq-2286 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #faq-2286 .cs-container {
    width: 100%;
    /* changes 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-2286 .cs-content {
    text-align: left;
    max-width: 33.875rem;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
  }
  #faq-2286 .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;
  }
  #faq-2286 .cs-title {
    /* 20 characters wide including spaces */
    max-width: 20ch;
    margin: 0 auto 2rem 0;
  }
  #faq-2286 .cs-faq-group {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  #faq-2286 .cs-faq-item {
    list-style: none;
    width: 100%;
    border-bottom: 1px solid #e8e8e8;
    transition: border-bottom 0.3s;
  }
  #faq-2286 .cs-faq-item.active {
    border-bottom: 4px solid var(--primary);
  }
  #faq-2286 .cs-faq-item.active .cs-button {
    color: var(--primary);
  }
  #faq-2286 .cs-faq-item.active .cs-button .cs-indicator:before {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  #faq-2286 .cs-faq-item.active .cs-button .cs-indicator:after {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  #faq-2286 .cs-faq-item.active .cs-item-p {
    height: auto;
    /* 20px - 24px bottom */
    padding: 0 0 clamp(1rem, 2vw, 1.5rem) 0;
    opacity: 1;
  }
  #faq-2286 .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: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    transition: background-color 0.3s, color 0.3s;
  }
  #faq-2286 .cs-button:hover {
    cursor: pointer;
  }
  #faq-2286 .cs-button .cs-indicator {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
    z-index: 1;
  }
  #faq-2286 .cs-button .cs-indicator:before {
    /* left line */
    content: '';
    width: 0.75rem;
    height: 0.125rem;
    background-color: #585B5D;
    opacity: 1;
    border-radius: 2px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.5s;
  }
  #faq-2286 .cs-button .cs-indicator:after {
    /* right line */
    content: '';
    width: 0.75rem;
    height: 0.125rem;
    background-color: #585B5D;
    opacity: 1;
    border-radius: 2px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 0.5s;
  }
  #faq-2286 .cs-button-text {
    width: 90%;
    display: block;
  }
  #faq-2286 .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-2286 .cs-image-group {
    /* everything inside the image group is in ems so the font size will scale them down.  Font size minimum is tied to view width size, and grows until it reaches 86% of the value on em */
    font-size: min(2.3vw, .86rem);
    width: 39.375em;
    height: 37.8125em;
    position: relative;
    z-index: 1;
  }
  #faq-2286 .cs-picture {
    overflow: hidden;
    display: block;
    position: absolute;
    border-radius: 0.75rem;
  }
  #faq-2286 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
  #faq-2286 .cs-picture1 {
    width: 19.0625em;
    height: 25.3125em;
    top: 0;
    left: 0;
  }
  #faq-2286 .cs-picture2 {
    width: 19.0625em;
    height: 11.25em;
    top: 0;
    right: 0;
  }
  #faq-2286 .cs-picture3 {
    width: 19.0625em;
    height: 11.25em;
    bottom: 0;
    left: 0;
  }
  #faq-2286 .cs-picture4 {
    width: 19.0625em;
    height: 25.3125em;
    bottom: 0;
    right: 0;
  }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #faq-2286 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.25rem;
  }
  #faq-2286 .cs-content {
    width: 55%;
    max-width: 33.125rem;
    padding: 0;
  }
  #faq-2286 .cs-image-group {
    font-size: inherit;
    width: 45vw;
    max-width: 39.375rem;
    min-height: 28.875rem;
    order: 2;
    flex: none;
  }
  #faq-2286 .cs-picture1 {
    width: auto;
    margin-right: 0.625em;
    right: 50%;
  }
  #faq-2286 .cs-picture2 {
    width: auto;
    margin-left: 0.625em;
    left: 50%;
  }
  #faq-2286 .cs-picture3 {
    width: auto;
    margin-right: 0.625em;
    right: 50%;
  }
  #faq-2286 .cs-picture4 {
    width: auto;
    margin-left: 0.625em;
    left: 50%;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #faq-2286 .cs-topper {
    color: var(--primaryLight);
  }
  body.dark-mode #faq-2286 .cs-title,
  body.dark-mode #faq-2286 .cs-item-p {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-2286 .cs-faq-item {
    border-color: rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #faq-2286 .cs-faq-item.active {
    border-color: var(--primaryLight);
  }
  body.dark-mode #faq-2286 .cs-faq-item.active .cs-button {
    color: var(--primaryLight);
  }
  body.dark-mode #faq-2286 .cs-faq-item.active .cs-button .cs-indicator:before,
  body.dark-mode #faq-2286 .cs-faq-item.active .cs-button .cs-indicator:after {
    background-color: var(--primaryLight);
  }
  body.dark-mode #faq-2286 .cs-button {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #faq-2286 .cs-button .cs-indicator:before,
  body.dark-mode #faq-2286 .cs-button .cs-indicator:after {
    background-color: var(--bodyTextColorWhite);
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-1253 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 10;
  }
  #services-1253 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-1253 .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;
  }
  #services-1253 .cs-title {
    max-width: 20ch;
  }
  #services-1253 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* 16px - 20px */
    gap: clamp(1rem, 2.5vw, 1.25rem);
  }
  #services-1253 .cs-item {
    width: 100%;
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #000;
    border-radius: 0.75rem;
    /* clips background image corners */
    overflow: hidden;
    box-shadow: 0px 12px 80px 0px rgba(26, 26, 26, 0.08);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    grid-column: span 12;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
  }
  #services-1253 .cs-item:hover .cs-item-background img {
    opacity: 0.4;
    transform: scale(1.3);
  }
  #services-1253 .cs-item:hover .cs-h3 {
    color: var(--primary);
  }
  #services-1253 .cs-item:before {
    content: "";
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    /* prevents border from affecting height and width */
    box-sizing: border-box;
    border-radius: 0.5rem;
    /* prevents the mouse from interacting with it so when you hover hover the other elements inside the card it doesn't block your mouse from hovering over them */
    pointer-events: none;
    opacity: 1;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 10;
  }
  #services-1253 .cs-link {
    text-decoration: none;
    /* 125px - 236px */
    /* padding goes on the link, not the cs-item as is normal. We do this because we want the whole card to be hoverable. So we add the padding to the link tag to create the space inside the card. By adding the space inside the cs-link tag we can make the whole card hoverable since the padding is now contributing to the height and widht of the link */
    padding: clamp(7.8125rem, 19vw, 14.75rem) 1.5rem 1.5rem;
  }
  #services-1253 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 2.5vw, 1.5625rem);
    line-height: 1.2em;
    font-weight: bold;
    text-align: inherit;
    margin: 0 0 0.75rem 0;
    color: var(--bodyTextColorWhite);
    transition: color 0.3s;
  }
  #services-1253 .cs-item-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    line-height: 1.5em;
    max-width: 28.125rem;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColorWhite);
  }
  #services-1253 .cs-item-background {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-1253 .cs-item-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #1a1a1a;
    opacity: 0.24;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #services-1253 .cs-item-background:after {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%);
    opacity: 0.4;
    bottom: 0;
    left: 0;
    z-index: 2;
  }
  #services-1253 .cs-item-background img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
    transition: transform 0.6s, opacity 0.3s;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-1253 .cs-content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
  }
  #services-1253 .cs-title {
    margin: 0;
  }
  #services-1253 .cs-flex-group {
    width: 50%;
  }
  #services-1253 .cs-item {
    grid-column: span 4;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #services-1253 .cs-title,
  body.dark-mode #services-1253 .cs-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #services-1253 .cs-text {
    opacity: 0.8;
  }
}