/* STYLES FOR ABOVE THE FOLD */
/*-- -------------------------- -->
<---            Hero            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #hero-408 {
    padding: var(--sectionPadding);
    /* 112px - 200px */
    padding-top: clamp(7rem, 15vw, 12.5rem);
    padding-right: 0;
  }
  #hero-408 .cs-container {
    width: 100%;
    height: 50em;
    /* changes to 100% at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 36px - 100px */
    gap: clamp(1.25rem, 10vw, 3.25rem);
  }
  #hero-408 .cs-content {
    max-width: 39.375rem;
    padding-right: 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }
  #hero-408 .cs-title {
    /* 31px - 61px */
    font-size: clamp(1.9375rem, 4.4vw, 2.8125rem);
    font-weight: 900;
    line-height: 1.2em;
    text-align: left;
    max-width: 43.75rem;
    /* 12px - 24px */
    margin: 0 0 clamp(0.75rem, 1.5vw, 1.5rem);
    color: var(--headerColor);
    position: relative;
  }
  #hero-408 .cs-color {
    color: #fff;
    display: block;
  }
  #hero-408 .cs-text {
    /* 16px - 25px */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
    font-size: clamp(1rem, 2vw, 1.5625rem);
    line-height: 1.5em;
    text-align: left;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    /* 24px - 40px */
    margin-bottom: clamp(1.5rem, 4.2vw, 3rem);
    color: var(--bodyTextColor);
  }
  #hero-408 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    margin-right: 1.5rem;
    color: #ffffff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid #fff;
    border-radius: 10px;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #hero-408 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000000;
    color: #ffffff;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 10px;
    transition: width 0.3s;
  }
  #hero-408 .cs-button-solid:hover:before {
    width: 100%;
  }
  #hero-408 .cs-button-transparent {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: var(--primary);
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: transparent;
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    transition:
            background-color 0.3s,
            color 0.3s;
  }
  #hero-408 .cs-button-transparent:hover {
    background-color: var(--primary);
    color: #fff;
  }
  #hero-408 .cs-header {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 1.5vw, 1.25rem);
    line-height: 1.5em;
    /* 40px - 100px */
    margin: clamp(2.5rem, 5vw, 6.25rem) 0 0.75rem 0;
    width: 100%;
    color: var(--bodyTextColor);
    display: block;
  }
  #hero-408 .cs-logo-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  #hero-408 .cs-logo {
    width: auto;
    /* 18px - 32px */
    height: clamp(1.125rem, 1.5vw, 2rem);
    filter: grayscale(1);
  }
  #hero-408 .cs-stat-group {
    width: 100%;
    border-radius: 1.25rem 0 0 1.25rem;
    aspect-ratio: 0.92696629;
    /* clips the corners around the border radius */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-wrap: nowrap;
    position: relative;
    z-index: 1;
  }
  #hero-408 .cs-stat-box {
    width: 50%;
    /* changes at tablet */
    height: 9.125rem;
    /* 24px - 48px */
    padding: clamp(1.5rem, 3vw, 3rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  #hero-408 .cs-stat-box:nth-of-type(1) {
    background-color: rgba(23, 99, 22, 0.96);
  }
  #hero-408 .cs-stat-box:nth-of-type(2) {
    background-color: rgba(34, 149, 33, 0.96);
  }
  #hero-408 .cs-stat {
    /* 25px - 61px */
    font-size: clamp(1.5625rem, 3.5vw, 3.8125rem);
    line-height: 1.2em;
    text-align: left;
    margin: 0;
    display: block;
  }
  #hero-408 .cs-desc {
    /* 14px - 20px */
    font-size: clamp(0.875rem, 1.6vw, 1.25rem);
    line-height: 1.2em;
    margin: 0.25rem 0 0 0;
    display: block;
  }
  #hero-408 .cs-background {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    z-index: -1;
  }
  #hero-408 .cs-background img {
    position: absolute;
    top: 7em;
    left: 0em;
    height: auto;
    width: 42rem;
    max-width: 99%;
    object-fit: fill;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #hero-408 {
    padding-right: 0;
  }
  #hero-408 .cs-container {
    max-width: 64%;
    flex-direction: row;
    justify-content: flex-end;
  }
  #hero-408 .cs-content {
    width: 45%;
    padding: 0;
  }
  #hero-408 .cs-stat-group {
    width: 45%;
    max-height: 63rem;
    aspect-ratio: 0.92647059;
    flex: auto;
  }
  #hero-408 .cs-stat-box {
    /* 126px - 221px */
    height: clamp(7.875rem, 18vw, 13.8125rem);
  }
}
/*-- -------------------------- -->
<---          Services          -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #services-2279 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #services-2279 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #services-2279 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 50rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
  }
  #services-2279 .cs-title {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
    max-width: 20ch;
    color: var(--bodyTextColorWhite);
    margin: 0;
  }
  #services-2279 .cs-text {
    opacity: 0.8;
  }
  #services-2279 .cs-card-group {
    margin: 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(0.5rem, 2vw, 1.25rem);
  }
  #services-2279 .cs-item {
    /* place this in a variable to reuse for the s-icon-wrapper placement */
    --itemPadding: clamp(1rem, 3.5vw, 3rem);
    width: 100%;
    text-align: left;
    list-style: none;
    margin: 0;
    /* 16px - 48px */
    padding: var(--itemPadding);
    background-color: rgba(255, 255, 255, 0.7); /* Translucent white */
    -webkit-backdrop-filter: blur(10px); /* For WebKit-based browsers */
    backdrop-filter: blur(10px); /* Standard property */
    border-radius: 15px;
    /* 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: center;
    position: relative;
    z-index: 1;
  }
  #services-2279 .cs-item:hover .cs-h3,
  #services-2279 .cs-item:hover .cs-link,
  #services-2279 .cs-item:hover .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  #services-2279 .cs-item:hover .cs-item-text {
    opacity: 0.9;
  }
  #services-2279 .cs-item:hover .cs-icon-wrapper {
    border-radius: 50%;
    transform: rotate(90deg);
  }
  #services-2279 .cs-item:hover .cs-icon {
    transform: rotate(-90deg);
  }
  #services-2279 .cs-item:hover .cs-arrow {
    filter: grayscale(1) brightness(10000%);
  }
  #services-2279 .cs-item:hover .cs-background {
    opacity: 1;
  }
  #services-2279 .cs-icon-wrapper {
    /* 48px - 100px */
    width: clamp(3rem, 7vw, 5.2rem);
    height: clamp(3rem, 7vw, 5.2rem);
    border-radius: 10px;
    margin: 0;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: var(--itemPadding);
    right: var(--itemPadding);
    z-index: 1;
    transition: transform 0.5s, border-radius 0.5s;
  }
  #services-2279 .cs-icon-wrapper:before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 0.1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-2279 .cs-icon {
    /* 24px - 48px */
    width: clamp(1.5rem, 4vw, 3rem);
    height: auto;
    transition: transform 0.5s;
  }
  #services-2279 .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: #000000;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
  }
  #services-2279 .cs-item-text {
    font-size: 1rem;
    line-height: 1.5em;
    max-width: 18.75rem;
    /* 56px - 108px */
    margin: 0 0 clamp(3.5rem, 8vw, 6.75rem) 0;
    padding: 0;
    color: #000000;
  }
  #services-2279 .cs-link {
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
    padding: 0 0 0.375rem 0;
    color: #000000;
    display: inline-flex;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
    transition: color 0.3s;
  }
  #services-2279 .cs-link:hover .cs-arrow {
    transform: rotate(45deg);
  }
  #services-2279 .cs-link:before {
    /* underline */
    content: "";
    width: 100%;
    height: 1px;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: 0rem;
    left: 0;
  }
  #services-2279 .cs-arrow {
    width: 1.25rem;
    height: auto;
    display: block;
    transition: transform 0.3s;
  }
  #services-2279 .cs-background {
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 0.3s;
  }
  #services-2279 .cs-background:before {
    /* background color overlay */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    border-radius: 10px;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #services-2279 .cs-background img {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
    height: 100%;
    width: 100%;
    /* Makes img tag act as a background image */
    object-fit: cover;
  }
  #services-2279 .cs-accent {
    width: 100%;
    height: 21.6875rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #services-2279 .cs-accent:before {
    content: '';
    width: 100%;
    height: 100%;
    background: #111418;
    opacity: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
  }
  #services-2279 .cs-accent img {
    width: 100%;
    height: 100%;
    opacity: 0.24;
    mix-blend-mode: soft-light;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #services-2279 .cs-container {
    max-width: 80rem;
  }
  #services-2279 .cs-item {
    grid-column: span 6;
    justify-content: flex-start;
  }
  #services-2279 .cs-link {
    margin-top: auto;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #services-2279 .cs-item {
    grid-column: span 4;
  }
  #services-2279 .cs-accent {
    /* 435px - 526px */
    height: clamp(27.1875rem, 41vw, 32.875rem);
  }
}

/*-- -------------------------- -->
<---    Side By Side Reverse    -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbsr-1810 {
    padding: var(--sectionPadding);
    /* 100px - 200px */
    padding-bottom: clamp(6.25rem, 8vw, 12.5rem);
    /* clips anything overflowing */
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  #sbsr-1810 .cs-container {
    width: 100%;
    /* changes to 1280px at desktop */
    max-width: 34.375rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #sbsr-1810 .cs-content {
    /* set text align to left if content needs to be left aligned */
    text-align: center;
    width: 100%;
    max-width: 32.625rem;
    display: flex;
    flex-direction: column;
    /* centers content horizontally, set to flex-start to left align */
    align-items: center;
    position: relative;
    z-index: 3;
  }
  #sbsr-1810 .cs-text {
    margin-bottom: 1rem;
  }
  #sbsr-1810 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #sbsr-1810 .cs-button-solid {
    box-shadow: 0 7px 17px rgb(0 0 0 / 62%);
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    /*color: #000;*/
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbsr-1810 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #0030e7;
    box-shadow: 0 7px 17px rgb(144, 177, 255);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #sbsr-1810 .cs-button-solid:hover:before {
    width: 100%;
  }
  #sbsr-1810 .cs-image-group {
    /* scales the whole section down and ties the font size to the vw and stops at 75% of the vale of 1em, changes at desktop */
    font-size: min(1.7vw, .60rem);
    /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
    width: 43.6875em;
    height: 40.1875em;
    position: relative;
    z-index: 1;
  }
  #sbsr-1810 .cs-image-group:before {
    /* blur effect */
    content: '';
    width: 125rem;
    height: 125rem;
    margin-left: -18.75rem;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    position: absolute;
    display: none;
    top: -12.5em;
    left: 60%;
    transform: skew(-40deg);
    transform-origin: center;
    z-index: -1;
  }
  #sbsr-1810 .cs-picture {
    max-width: calc(100% - 2rem);
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
  }
  #sbsr-1810 .cs-picture img {
    margin-top: 14em;
    width: auto;
    height: 23em;
    object-fit: contain;
  }
  #sbsr-1810 .cs-splatter {
    width: 48.875em;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: -2.5em;
    left: 0em;
    z-index: -2;
  }
  #sbsr-1810 .cs-graphic {
    width: 100%;
    min-width: 75rem;
    height: auto;
    object-fit: cover;
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
  }
  #sbsr-1810 .cs-dark {
    display: none;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbsr-1810 .cs-container {
    margin-top: 5em;
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  #sbsr-1810 .cs-image-group {
    /* set to inherit at Large Desktop */
    font-size: min(1.2vw, 1rem);
    order: 2;
  }
  #sbsr-1810 .cs-image-group:before {
    display: block;
  }
  #sbsr-1810 .cs-content {
    width: 51%;
  }
  #sbsr-1810 .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;
    position: relative;
    z-index: 3;
  }
  #sbsr-1810 .cs-picture {
    max-width: calc(100% - 2rem);
    left: 50%;
    transform: translateX(-50%);
    position: static;
  }
}
@media only screen and (min-width: 64rem) {
  #sbsr-1810 .cs-picture {
    max-width: calc(100% - 2rem);
    left: 50%;
    transform: translateX(-50%);
    position: static;
  }
}
/*-- -------------------------- -->
<---        Side By Side        -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #sbs-1586 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
  }
  #sbs-1586 .cs-container {
    width: 100%;
    /* changes to 1280px at tablet */
    max-width: 36.5rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(2.5rem, 6vw, 4rem);
  }
  #sbs-1586 .cs-picture {
    width: 100%;
    height: clamp(25rem, 80vw, 47rem);
    display: block;
    position: relative;
    order: 2;
  }
  #sbs-1586 .cs-picture img {
    box-shadow: 0 7px 17px rgb(0 0 0 / 62%);
    border-radius: 15px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #sbs-1586 .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;
    justify-content: center;
  }
  #sbs-1586 .cs-title {
    /* 26 characters wide including spaces */
    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
    max-width: 26ch;
    margin: 0;
  }
  #sbs-1586 .cs-card-group {
    width: 100%;
    /* 550px - 630px */
    max-width: clamp(34.375rem, 50vw, 39.375rem);
    padding: 0;
    /* 24px - 40px */
    margin: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(1.75rem, 4vw, 2.5rem) 0;
    display: grid;
    align-items: center;
    gap: clamp(1rem, 4vw, 2.5rem);
  }
  #sbs-1586 .cs-item {
    list-style: none;
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  #sbs-1586 .wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.625rem;
  }
  #sbs-1586 .cs-item-number {
    font-size: 1.25rem;
    line-height: 1.2em;
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
  }
  #sbs-1586 .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-1586 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    margin: 0;
    color: var(--bodyTextColor);
  }
  #sbs-1586 .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-1586 .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-1586 .cs-button-solid {
    box-shadow: 0 7px 17px rgb(0 0 0 / 62%);
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    /*color: #000;*/
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #sbs-1586 .cs-button-solid:before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0%;
    background: #0030e7;
    box-shadow: 0 7px 17px rgb(144, 177, 255);
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #sbs-1586 .cs-button-solid:hover {
    color: var(--primary);
    box-shadow: 0 7px 17px rgb(144, 177, 255);
  }
  #sbs-1586 .cs-button-solid:hover:before {
    width: 100%;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #sbs-1586 .cs-container {
    max-width: 80rem;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #sbs-1586 .cs-content {
    width: 50%;
    max-width: 39.375rem;
    /* prevents flexbox from squishing it */
    flex: none;
  }
  #sbs-1586 .cs-card-group {
    grid-template-columns: repeat(12, 1fr);
  }
  #sbs-1586 .cs-item {
    grid-column: span 6;
  }
  #sbs-1586 .cs-picture {
    height: auto;
    min-height: 32.8125rem;
    order: -1;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #sbs-1586 .cs-content {
    padding: 5.25rem 0;
    align-self: center;
  }
}
/*-- -------------------------- -->
<---          Gallery           -->
<--- -------------------------- -*/

/* 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);
    }
  }
  #gallery-1374 {
    padding: var(--sectionPadding);
    position: relative;
    z-index: 1;
    /* Prevents overflow from the image going off screen */
    overflow: hidden;
  }

  #gallery-1374 .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-1374 .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-1374 .cs-topper {
    color: #FFD700;
  }

  #gallery-1374 .cs-image-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr;
    /* 16px - 60px */
    gap: clamp(1rem, 4.3vw, 3.75rem);
  }

  #gallery-1374 .cs-link {
    text-decoration: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #gallery-1374 .cs-item {
    list-style: none;
    width: 100%;
    height: 100%;
    margin: 0;
    grid-column: span 12;
  }

  #gallery-1374 .cs-item:hover .cs-h3,
  #gallery-1374 .cs-item:hover .cs-desc {
    color: #fff;
  }

  #gallery-1374 .cs-item:hover .cs-item-text {
    background-color: #000b42;
  }

  #gallery-1374 .cs-item:hover .cs-icon-wrapper {
    border-color: #fff;
  }

  #gallery-1374 .cs-item:hover .cs-icon {
    filter: brightness(1000%) grayscale(1);
  }

  #gallery-1374 .cs-picture {
    width: 100%;
    /* 344px - 420px */
    height: clamp(21.5rem, 30vw, 26.25rem);
    margin: auto;
    border-radius: 1.5rem;
    display: block;
    position: relative;
    overflow: hidden;
    box-shadow: 0 7px 17px rgb(0 0 0 / 62%);
  }

  #gallery-1374 .cs-picture img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    position: absolute;
    top: 0;
    left: 0;
  }

  #gallery-1374 .cs-item-text {
    /* 16px - 20px top & bottom, 16px - 40px left & right */
    padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2.8vw, 2.5rem);
    background-color: #f7f7f7;
    border-radius: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* makes the item text the element that grows to fill the container */
    flex-grow: 1;
    gap: 1rem;
    transition: background-color 0.3s;
    box-shadow: 0 7px 17px rgb(0 0 0 / 62%);
  }

  #gallery-1374 .cs-flex {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  #gallery-1374 .cs-h3 {
    /* 20px - 25px */
    font-size: clamp(1.25rem, 1.8vw, 1.5625rem);
    line-height: 1.2em;
    text-align: left;
    margin: 0;
    color: #1a1a1a;
    transition: color 0.3s;
  }

  #gallery-1374 .cs-desc {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 1.2vw, 1rem);
    line-height: 1.5em;
    color: #1a1a1a;
    transition: color 0.3s;
  }

  #gallery-1374 .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;
  }

  #gallery-1374 .cs-icon {
    width: auto;
    height: 0.75rem;
    transition: filter 0.3s;
  }

  #gallery-1374 .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;
    margin: 0;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 1.5rem;
    color: #fff;
    background-color: var(--primary);
    border-radius: 3rem;
    display: inline-block;
    position: relative;
    z-index: 1;
  }

  #gallery-1374 .cs-button-solid:before {
    content: "";
    width: 0%;
    height: 100%;
    background: #000;
    opacity: 1;
    border-radius: 0.25rem;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: width 0.3s;
  }

  #gallery-1374 .cs-button-solid:hover:before {
    width: 100%;
  }

  /* In Between - 600px */
  @media only screen and (min-width: 37.5rem) {
    #gallery-1374 .cs-item {
      grid-column: span 6;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #gallery-1374 .cs-title,
    body.dark-mode #gallery-1374 .cs-text,
    body.dark-mode #gallery-1374 .cs-h3 {
      color: var(--bodyTextColorWhite);
    }

    body.dark-mode #gallery-1374 .cs-text {
      opacity: 0.8;
    }
  }
  /*-- -------------------------- -->
  <---          Timeline          -->
  <--- -------------------------- -*/
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
    #timeline-971 {
      box-shadow: 0 0 43px 27px #00000054;
      padding: var(--sectionPadding);
      background-color: rgba(0, 0, 0, 0.3);
      /* clips the white line through the bullets */
      overflow: hidden;
    }

    #timeline-971 .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-971 .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-971 .cs-title {
      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
      max-width: 18ch;
    }

    #timeline-971 .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-971 .cs-card-group:before {
      /* white line through the bullets */
      content: "";
      width: 1px;
      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-971 .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-971 .cs-icon {
      width: 3.75rem;
      height: auto;
      /* 32px - 40px */
      margin: 0 0 clamp(2rem, 3vw, 2.5rem);
    }

    #timeline-971 .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(--headerColor);
      position: relative;
    }

    #timeline-971 .cs-item-text {
      /* 14px - 16px */
      font-size: clamp(0.875rem, 1.5vw, 1rem);
      line-height: 1.5em;
      margin: 0;
      color: var(--bodyTextColor);
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #timeline-971 .cs-container {
      max-width: 90rem;
    }

    #timeline-971 .cs-card-group {
      flex-direction: row;
    }

    #timeline-971 .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-971 .cs-item {
      padding: 0 0 4.125rem 0;
      z-index: 1;
    }

    #timeline-971 .cs-item::before {
      top: auto;
      bottom: 0rem;
    }

    #timeline-971 .cs-h3 {
      width: 100%;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #timeline-971 {
      background-color: rgba(0, 0, 0, 0.2);
    }

    body.dark-mode #timeline-971 .cs-title,
    body.dark-mode #timeline-971 .cs-text,
    body.dark-mode #timeline-971 .cs-h3,
    body.dark-mode #timeline-971 .cs-item-text {
      color: var(--bodyTextColorWhite);
    }

    body.dark-mode #timeline-971 .cs-card-group::before {
      opacity: 0.3;
    }

    body.dark-mode #timeline-971 .cs-text,
    body.dark-mode #timeline-971 .cs-item-text {
      opacity: 0.8;
    }
  }
  /*-- -------------------------- -->
  <---          Pricing           -->
  <--- -------------------------- -*/
  /* Mobile - 360px */
  @media only screen and (min-width: 0rem) {
    #pricing-861 {
      padding: var(--sectionPadding);
    }

    #pricing-861 .cs-container {
      width: 100%;
      /* changes to 1280px at tablet */
      max-width: 31.25rem;
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* 48px - 64px */
      gap: clamp(3rem, 6vw, 4rem);
      position: relative;
    }

    #pricing-861 .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-861 .cs-title {
      max-width: 25ch;
    }

    #pricing-861 .cs-text {
      max-width: 56.25rem;
    }

    #pricing-861 .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);
    }

    #pricing-861 .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-861 .cs-item.cs-popular {
      border: 3px solid #FFD700;
    }

    #pricing-861 .cs-item.cs-popular .cs-background {
      background-color: #000000;
    }

    #pricing-861 .cs-item .cs-background img {
      opacity: 1;
    }

    #pricing-861 .cs-item.cs-popular .cs-package {
      color: #FFD700;
    }

    #pricing-861 .cs-item.cs-popular .cs-price,
    #pricing-861 .cs-item.cs-popular .cs-desc {
      color: var(--bodyTextColorWhite);
    }

    #pricing-861 .cs-item.cs-popular .cs-desc {
      opacity: 0.8;
    }

    #pricing-861 .cs-top {
      padding: 2.5rem 0;
      /* prevents padding and border 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-861 .cs-background {
      background-color: #000b2b;
      position: absolute;
      top: 0;
      bottom: 0;
      /* same as cs-item padding left and right */
      left: -2rem;
      right: -2rem;
      z-index: -1;
    }

    #pricing-861 .cs-background img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      opacity: 0;
    }

    #pricing-861 .cs-package {
      font-size: 1rem;
      line-height: 1.2em;
      text-align: center;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      font-weight: 700;
      width: 100%;
      margin: 0;
      color: #dadada;
      display: block;
    }

    #pricing-861 .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-861 .cs-desc {
      font-size: 1rem;
      line-height: 1.2em;
      text-align: center;
      margin: 0 0 0 0.5rem;
      color: var(--bodyTextColor);
      opacity: 0.8;
      display: block;
    }

    #pricing-861 .cs-ul {
      /* 24px - 40px */
      margin: clamp(1.5rem, 4vw, 2.5rem) 0 2rem 0;
      padding: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }

    #pricing-861 .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: #000000;
      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-861 .cs-li.cs-disabled {
      opacity: 0.4;
      filter: grayscale(1);
    }

    #pricing-861 .cs-icon {
      width: 1.125rem;
      height: auto;
      display: block;
    }

    #pricing-861 .cs-button-solid {
      font-size: 1rem;
      /* 46px - 56px */
      line-height: clamp(2.875rem, 5.5vw, 3.5rem);
      text-decoration: none;
      font-weight: 700;
      text-align: center;
      margin: 0;
      color: #fff;
      min-width: 9.375rem;
      padding: 0 1.5rem;
      background-color: #0058d8;
      border-radius: 0.25rem;
      display: inline-block;
      position: relative;
      z-index: 1;
      /* prevents padding from adding to the width */
      box-sizing: border-box;
    }

    #pricing-861 .cs-button-solid:before {
      content: "";
      position: absolute;
      height: 100%;
      width: 0%;
      background: #000b42;
      opacity: 1;
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 0.25rem;
      transition: width 0.3s;
    }

    #pricing-861 .cs-button-solid:hover:before {
      width: 100%;
    }

    #pricing-861 .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%;
      border-radius: 10px;
    }

    #pricing-861 .cs-price-button:before {
      border-radius: 10px;
    }
  }
  /* Tablet - 768px */
  @media only screen and (min-width: 48rem) {
    #pricing-861 .cs-container {
      max-width: 80rem;
    }

    #pricing-861 .cs-item {
      grid-column: span 6;
    }

    #pricing-861 .cs-item.cs-popular {
      grid-column: span 12;
      order: -1;
    }
  }
  /* Tablet - 900px */
  @media only screen and (min-width: 59.375rem) {
    #pricing-861 .cs-item {
      grid-column: span 4;
    }

    #pricing-861 .cs-item.cs-popular {
      grid-column: span 4;
      order: initial;
    }
  }
  /* Dark Mode */
  @media only screen and (min-width: 0rem) {
    body.dark-mode #pricing-861 {
      background-color: var(--dark);
    }

    body.dark-mode #pricing-861 .cs-topper {
      color: var(--primaryLight);
    }

    body.dark-mode #pricing-861 .cs-title,
    body.dark-mode #pricing-861 .cs-text,
    body.dark-mode #pricing-861 .cs-item-p,
    body.dark-mode #pricing-861 .cs-package,
    body.dark-mode #pricing-861 .cs-li,
    body.dark-mode #pricing-861 .cs-price,
    body.dark-mode #pricing-861 .cs-desc,
    body.dark-mode #pricing-861 .cs-plan {
      color: var(--bodyTextColorWhite);
    }

    body.dark-mode #pricing-861 .cs-text {
      opacity: 0.8;
    }

    body.dark-mode #pricing-861 .cs-item {
      background-color: var(--medium);
    }

    body.dark-mode #pricing-861 .cs-item.cs-popular {
      background-color: var(--primary);
    }

    body.dark-mode #pricing-861 .cs-background {
      background-color: rgba(0, 0, 0, 0.2);
    }

    body.dark-mode #pricing-861 .cs-icon {
      /* makes icon white (if it wasn't black to start) */
      filter: grayscale(1) brightness(1000%);
    }

    body.dark-mode #pricing-861 .cs-price-button {
      background-color: var(--bodyTextColorWhite);
      color: #1a1a1a;
      transition: color 0.3s;
    }

    body.dark-mode #pricing-861 .cs-price-button:hover {
      color: #fff;
    }
  }
}