Code of Stitch

w/ Toggles

<!-- ============================================ -->
<!--                   Pricing                    -->
<!-- ============================================ -->

<section id="pricing-603">
    <div class="cs-container">
        <div class="cs-content">
            <span class="cs-topper">Pricing</span>
            <h2 class="cs-title">House Painting Service Packages</h2>
            <p class="cs-text">
                Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.
            </p>
            <div class="cs-toggle-group">
                <span id="cs-option1-603" class="cs-plan">Option 1</span>
                <div class="cs-toggle" aria-label="click to switch plans pricing">
                    <span aria-hidden="true" class="cs-toggle-switch"></span>
                </div>
                <span id="cs-option2-603" class="cs-plan">Option 2</span>
            </div>
        </div>
        <ul class="cs-card-group cs-option1">
            <li class="cs-item">
                <div class="cs-price-box">
                    <span class="cs-package">Starter</span>
                    <span class="cs-price">$200</span>
                    <span class="cs-desc">Free Sign Up</span>
                </div>
                <p class="cs-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
                </p>
                <span class="cs-included">Whats Included?</span>
                <ul class="cs-ul">
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                </ul>
                <a href="" class="cs-button-solid cs-price-button">Get Started</a>
            </li>
            <li class="cs-item">
                <div class="cs-price-box">
                    <span class="cs-package">Starter</span>
                    <span class="cs-price">$200</span>
                    <span class="cs-desc">Free Sign Up</span>
                </div>
                <p class="cs-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
                </p>
                <span class="cs-included">Whats Included?</span>
                <ul class="cs-ul">
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                </ul>
                <a href="" class="cs-button-solid cs-price-button">Get Started</a>
            </li>
            <li class="cs-item">
                <div class="cs-price-box">
                    <span class="cs-package">Starter</span>
                    <span class="cs-price">$200</span>
                    <span class="cs-desc">Free Sign Up</span>
                </div>
                <p class="cs-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
                </p>
                <span class="cs-included">Whats Included?</span>
                <ul class="cs-ul">
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                </ul>
                <a href="" class="cs-button-solid cs-price-button">Get Started</a>
            </li>
        </ul>
        <ul class="cs-card-group cs-option2">
            <li class="cs-item">
                <div class="cs-price-box">
                    <span class="cs-package">Starter</span>
                    <span class="cs-price">$100</span>
                    <span class="cs-desc">Free Sign Up</span>
                </div>
                <p class="cs-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
                </p>
                <span class="cs-included">Whats Included?</span>
                <ul class="cs-ul">
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                </ul>
                <a href="" class="cs-button-solid cs-price-button">Get Started</a>
            </li>
            <li class="cs-item">
                <div class="cs-price-box">
                    <span class="cs-package">Starter</span>
                    <span class="cs-price">$100</span>
                    <span class="cs-desc">Free Sign Up</span>
                </div>
                <p class="cs-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
                </p>
                <span class="cs-included">Whats Included?</span>
                <ul class="cs-ul">
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                </ul>
                <a href="" class="cs-button-solid cs-price-button">Get Started</a>
            </li>
            <li class="cs-item">
                <div class="cs-price-box">
                    <span class="cs-package">Starter</span>
                    <span class="cs-price">$100</span>
                    <span class="cs-desc">Free Sign Up</span>
                </div>
                <p class="cs-item-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
                </p>
                <span class="cs-included">Whats Included?</span>
                <ul class="cs-ul">
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                    <li class="cs-li">
                        <img class="cs-icon" aria-hidden="true" loading="lazy" decoding="async" src="https://csimg.nyc3.cdn.digitaloceanspaces.com/Pricing/red-check.svg" alt="checkmark" width="15" height="15">
                        Lorem ipsum dolor sit amet!
                    </li>
                </ul>
                <a href="" class="cs-button-solid cs-price-button">Get Started</a>
            </li>
        </ul>
    </div>
</section>

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-603 {
    padding: var(--sectionPadding);
  }
  #pricing-603 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #pricing-603 .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-603 .cs-toggle-group {
    width: auto;
    margin: 2rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #pricing-603 .cs-plan {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
  }
  #pricing-603 .cs-plan:hover {
    cursor: pointer;
  }
  #pricing-603 .cs-toggle {
    width: 3.875rem;
    height: 2.25rem;
    border-radius: 2.5rem;
    background-color: var(--primaryLight);
    margin: 0 0.75rem;
    position: relative;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #pricing-603 .cs-toggle:hover {
    cursor: pointer;
  }
  #pricing-603 .cs-toggle.active:before {
    opacity: 1;
  }
  #pricing-603 .cs-toggle.active .cs-toggle-switch {
    left: 2rem;
  }
  #pricing-603 .cs-toggle:before {
    /* top right box */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ffba43 -24.69%, #e12213 126.23%);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    border-radius: 2.5rem;
    transition: opacity 0.3s;
  }
  #pricing-603 .cs-toggle-switch {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.375rem;
    transition: left 0.3s;
    background: #fff;
  }
  #pricing-603 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 1.8vw, 1.25rem);
    row-gap: 2.5rem;
    perspective: 700px;
    transform-style: preserve-3d;
  }
  #pricing-603 .cs-card-group.active.cs-option1 {
    /* when the active class is on the cs-card-group, run these styles */
    transform: scale(0);
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
  }
  #pricing-603 .cs-card-group.active.cs-option1 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity 0.3s,
                            transform 0.6s;
  }
  #pricing-603 .cs-card-group.active.cs-option2 {
    /* when the active class is on the cs-card-group, run these styles */
    visibility: visible;
    pointer-events: all;
    opacity: 1;
    position: relative;
    left: auto;
    top: auto;
    transform: scale(1);
  }
  #pricing-603 .cs-card-group.active.cs-option2 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
  }
  #pricing-603 .cs-option1 {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    visibility: visible;
    left: left;
    bottom: auto;
    transform: scale(1);
    transform-origin: left top;
    transition: transform 0.6s,
                opacity 0.3s,
                visibility 0.3s;
  }
  #pricing-603 .cs-option1 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
    transition: opacity 0.3s,
                    transform 0.6s;
  }
  #pricing-603 .cs-option1 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #pricing-603 .cs-option1 .cs-item:nth-of-type(3) {
    transition-delay: 0.4s;
  }
  #pricing-603 .cs-option2 {
    /* default styles when there is no active class on the cs-card-group */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    left: 0;
    /* reset on tablet */
    top: 62.5rem;
    transform: scale(0);
    transform-origin: left top;
    transition: transform 0.6s,
                opacity 0.3s,
                visibility 0.3s,
                bottom 0.6s;
  }
  #pricing-603 .cs-option2 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity 0.3s,
                    transform 0.6s;
  }
  #pricing-603 .cs-option2 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #pricing-603 .cs-option2 .cs-item:nth-of-type(3) {
    transition-delay: 0.4s;
  }
  #pricing-603 .cs-item {
    list-style: none;
    width: 100%;
    /* matches the -88px the cs-price-box's margin top to offset it */
    margin: 5.5rem 0 0 0;
    /* 80px - 100px top *
            /* 16px - 56px left & right */
    /* 16px - 48px bottom */
    padding: clamp(5rem, 9vw, 6.25rem) clamp(1rem, 2.3vw, 3.5rem) clamp(1rem, 5vw, 3rem);
    box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.17);
    background-color: #fff;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #pricing-603 .cs-price-box {
    width: 100%;
    /* 32px - 48px margin-bottom */
    margin: -10.5rem 0 clamp(2rem, 5vw, 3rem) 0;
    /* 24px - 32px top & bottom */
    /* 24px - 48px left and right */
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 3vw, 3rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #12192d;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  #pricing-603 .cs-package {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #pricing-603 .cs-price {
    /* 24px - 32px */
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #pricing-603 .cs-desc {
    font-size: 0.75rem;
    line-height: 1.2em;
    text-align: center;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #pricing-603 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-align: left;
    font-weight: 400;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    color: var(--bodyTextColor);
  }
  #pricing-603 .cs-included {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: 700;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    color: var(--headerColor);
  }
  #pricing-603 .cs-ul {
    /* 32px - 48px */
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
  }
  #pricing-603 .cs-li {
    font-size: 0.875rem;
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 1rem;
  }
  #pricing-603 .cs-icon {
    width: 0.9375rem;
    height: auto;
    /* push icon a little from the top so it looks centered */
    margin-top: 0.1875rem;
    display: block;
  }
  #pricing-603 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #pricing-603 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #pricing-603 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-603 .cs-price-button {
    /* 14px - 18px */
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    /* 36px - 50px */
    line-height: clamp(2.25rem, 4.5vw, 3.125rem);
    font-weight: 400;
    text-transform: uppercase;
    width: 100%;
    height: clamp(2.25rem, 4.5vw, 3.125rem);
    /* pushes button to the bottom of the cs-item */
    margin-top: auto;
    border-radius: 0.25rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-603 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #pricing-603 .cs-option2 {
    top: auto;
    bottom: 0;
  }
}

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #pricing-603 {
    padding: var(--sectionPadding);
  }
  #pricing-603 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
    position: relative;
  }
  #pricing-603 .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-603 .cs-toggle-group {
    width: auto;
    margin: 2rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #pricing-603 .cs-plan {
    font-size: 1rem;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    color: var(--headerColor);
  }
  #pricing-603 .cs-plan:hover {
    cursor: pointer;
  }
  #pricing-603 .cs-toggle {
    width: 3.875rem;
    height: 2.25rem;
    border-radius: 2.5rem;
    background-color: var(--primaryLight);
    margin: 0 0.75rem;
    position: relative;
    /* prevent flexbox from squishing it */
    flex: none;
  }
  #pricing-603 .cs-toggle:hover {
    cursor: pointer;
  }
  #pricing-603 .cs-toggle.active:before {
    opacity: 1;
  }
  #pricing-603 .cs-toggle.active .cs-toggle-switch {
    left: 2rem;
  }
  #pricing-603 .cs-toggle:before {
    /* top right box */
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #ffba43 -24.69%, #e12213 126.23%);
    opacity: 0;
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    border-radius: 2.5rem;
    transition: opacity 0.3s;
  }
  #pricing-603 .cs-toggle-switch {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0.375rem;
    transition: left 0.3s;
    background: #fff;
  }
  #pricing-603 .cs-card-group {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 16px - 20px */
    gap: clamp(1rem, 1.8vw, 1.25rem);
    row-gap: 2.5rem;
    perspective: 700px;
    transform-style: preserve-3d;
  }
  #pricing-603 .cs-card-group.active.cs-option1 {
    /* when the active class is on the cs-card-group, run these styles */
    transform: scale(0);
    position: absolute;
    left: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
  }
  #pricing-603 .cs-card-group.active.cs-option1 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity 0.3s,
                            transform 0.6s;
  }
  #pricing-603 .cs-card-group.active.cs-option2 {
    /* when the active class is on the cs-card-group, run these styles */
    visibility: visible;
    pointer-events: all;
    opacity: 1;
    position: relative;
    left: auto;
    top: auto;
    transform: scale(1);
  }
  #pricing-603 .cs-card-group.active.cs-option2 .cs-item {
    /* when the active class is on the cs-card-group, run these styles */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
  }
  #pricing-603 .cs-option1 {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    visibility: visible;
    left: left;
    bottom: auto;
    transform: scale(1);
    transform-origin: left top;
    transition: transform 0.6s,
                opacity 0.3s,
                visibility 0.3s;
  }
  #pricing-603 .cs-option1 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 1;
    transform: translateY(0rem) rotateY(0deg);
    transition: opacity 0.3s,
                    transform 0.6s;
  }
  #pricing-603 .cs-option1 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #pricing-603 .cs-option1 .cs-item:nth-of-type(3) {
    transition-delay: 0.4s;
  }
  #pricing-603 .cs-option2 {
    /* default styles when there is no active class on the cs-card-group */
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    position: absolute;
    left: 0;
    /* reset on tablet */
    top: 62.5rem;
    transform: scale(0);
    transform-origin: left top;
    transition: transform 0.6s,
                opacity 0.3s,
                visibility 0.3s,
                bottom 0.6s;
  }
  #pricing-603 .cs-option2 .cs-item {
    /* default styles when there is no active class on the cs-card-group */
    opacity: 0;
    transform: translateY(1.25rem) rotateY(90deg);
    transition: opacity 0.3s,
                    transform 0.6s;
  }
  #pricing-603 .cs-option2 .cs-item:nth-of-type(2) {
    transition-delay: 0.2s;
  }
  #pricing-603 .cs-option2 .cs-item:nth-of-type(3) {
    transition-delay: 0.4s;
  }
  #pricing-603 .cs-item {
    list-style: none;
    width: 100%;
    /* matches the -88px the cs-price-box's margin top to offset it */
    margin: 5.5rem 0 0 0;
    /* 80px - 100px top *
            /* 16px - 56px left & right */
    /* 16px - 48px bottom */
    padding: clamp(5rem, 9vw, 6.25rem) clamp(1rem, 2.3vw, 3.5rem) clamp(1rem, 5vw, 3rem);
    box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.17);
    background-color: #fff;
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #pricing-603 .cs-price-box {
    width: 100%;
    /* 32px - 48px margin-bottom */
    margin: -10.5rem 0 clamp(2rem, 5vw, 3rem) 0;
    /* 24px - 32px top & bottom */
    /* 24px - 48px left and right */
    padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 3vw, 3rem);
    /* prevents padding and border from affecting height and width */
    box-sizing: border-box;
    background-color: #12192d;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  #pricing-603 .cs-package {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #pricing-603 .cs-price {
    /* 24px - 32px */
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    line-height: 1.2em;
    text-align: center;
    font-weight: 700;
    margin: 0;
    color: var(--bodyTextColorWhite);
  }
  #pricing-603 .cs-desc {
    font-size: 0.75rem;
    line-height: 1.2em;
    text-align: center;
    margin: 0;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #pricing-603 .cs-item-text {
    font-size: 0.875rem;
    line-height: 1.5em;
    text-align: left;
    font-weight: 400;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    color: var(--bodyTextColor);
  }
  #pricing-603 .cs-included {
    /* 16px - 20px */
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.2em;
    text-align: left;
    font-weight: 700;
    /* 16px - 24px */
    margin: 0 0 clamp(1rem, 2vw, 1.5rem);
    color: var(--headerColor);
  }
  #pricing-603 .cs-ul {
    /* 32px - 48px */
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1rem;
  }
  #pricing-603 .cs-li {
    font-size: 0.875rem;
    list-style: none;
    line-height: 1.5em;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--bodyTextColor);
    display: flex;
    justify-content: flex-start;
    /* push everything to the top so if the li goes to two lines the icon stays at the top */
    align-items: flex-start;
    gap: 1rem;
  }
  #pricing-603 .cs-icon {
    width: 0.9375rem;
    height: auto;
    /* push icon a little from the top so it looks centered */
    margin-top: 0.1875rem;
    display: block;
  }
  #pricing-603 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    /* prevents padding from adding to the width */
    box-sizing: border-box;
  }
  #pricing-603 .cs-button-solid:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 0%;
    background: #000;
    opacity: 1;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 0.25rem;
    transition: width 0.3s;
  }
  #pricing-603 .cs-button-solid:hover:before {
    width: 100%;
  }
  #pricing-603 .cs-price-button {
    /* 14px - 18px */
    font-size: clamp(0.875rem, 1.5vw, 1.125rem);
    /* 36px - 50px */
    line-height: clamp(2.25rem, 4.5vw, 3.125rem);
    font-weight: 400;
    text-transform: uppercase;
    width: 100%;
    height: clamp(2.25rem, 4.5vw, 3.125rem);
    /* pushes button to the bottom of the cs-item */
    margin-top: auto;
    border-radius: 0.25rem;
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #pricing-603 .cs-card-group {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
  }
  #pricing-603 .cs-option2 {
    top: auto;
    bottom: 0;
  }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
  body.dark-mode #pricing-603 .cs-topper {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-603 .cs-title,
  body.dark-mode #pricing-603 .cs-text,
  body.dark-mode #pricing-603 .cs-item-text {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-603 .cs-text,
  body.dark-mode #pricing-603 .cs-item-text {
    opacity: 0.8;
  }
  body.dark-mode #pricing-603 .cs-plan {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-603 .cs-item {
    background-color: var(--medium);
  }
  body.dark-mode #pricing-603 .cs-price-box {
    background-color: var(--accent);
  }
  body.dark-mode #pricing-603 .cs-item-p,
  body.dark-mode #pricing-603 .cs-included,
  body.dark-mode #pricing-603 .cs-li {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #pricing-603 .cs-icon {
    /* makes icon white (if it wasnt black to start) */
    filter: grayscale(1) brightness(1000%);
  }
}

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #pricing-603 {
        padding: var(--sectionPadding);

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

        .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;
        }

        .cs-toggle-group {
            width: auto;
            margin: (32/16rem) auto 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cs-plan {
            font-size: (16/16rem);
            line-height: 1.5em;
            margin: 0;
            padding: 0;
            color: var(--headerColor);
            &:hover {
                cursor: pointer;
            }
        }

        .cs-toggle {
            width: (62/16rem);
            height: (36/16rem);
            border-radius: (40/16rem);
            background-color: var(--primaryLight);
            margin: 0 (12/16rem);
            position: relative;
            /* prevent flexbox from squishing it */
            flex: none;

            &:hover {
                cursor: pointer;
            }

            &.active {
                &:before {
                    opacity: 1;
                }
                .cs-toggle-switch {
                    left: (32/16rem);
                }
            }

            &:before {
                /* top right box */
                content: "";
                width: 100%;
                height: 100%;
                background: linear-gradient(
                    90deg,
                    #ffba43 -24.69%,
                    #e12213 126.23%
                );
                opacity: 0;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
                border-radius: (40/16rem);
                transition: opacity 0.3s;
            }
        }

        .cs-toggle-switch {
            width: (24/16rem);
            height: (24/16rem);
            display: block;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: (6/16rem);
            transition: left 0.3s;
            background: #fff;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 16px - 20px */
            gap: clamp(1rem, 1.8vw, 1.25rem);
            row-gap: (40/16rem);
            perspective: 700px;
            transform-style: preserve-3d;

            &.active {
                &.cs-option1 {
                    /* when the active class is on the cs-card-group, run these styles */
                    transform: scale(0);
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    opacity: 0;
                    visibility: hidden;

                    .cs-item {
                        /* when the active class is on the cs-card-group, run these styles */
                        opacity: 0;
                        transform: translateY(1.25rem) rotateY(90deg);
                        transition:
                            opacity 0.3s,
                            transform 0.6s;
                    }
                }

                &.cs-option2 {
                    /* when the active class is on the cs-card-group, run these styles */
                    visibility: visible;
                    pointer-events: all;
                    opacity: 1;
                    position: relative;
                    left: auto;
                    top: auto;
                    transform: scale(1);

                    .cs-item {
                        /* when the active class is on the cs-card-group, run these styles */
                        opacity: 1;
                        transform: translateY(0rem) rotateY(0deg);
                    }
                }
            }
        }

        .cs-option1 {
            /* default styles when there is no active class on the cs-card-group */
            opacity: 1;
            visibility: visible;
            left: left;
            bottom: auto;
            transform: scale(1);
            transform-origin: left top;
            transition:
                transform 0.6s,
                opacity 0.3s,
                visibility 0.3s;

            .cs-item {
                /* default styles when there is no active class on the cs-card-group */
                opacity: 1;
                transform: translateY(0rem) rotateY(0deg);
                transition:
                    opacity 0.3s,
                    transform 0.6s;
                &:nth-of-type(2) {
                    transition-delay: 0.2s;
                }
                &:nth-of-type(3) {
                    transition-delay: 0.4s;
                }
            }
        }

        .cs-option2 {
            /* default styles when there is no active class on the cs-card-group */
            visibility: hidden;
            pointer-events: none;
            opacity: 0;
            position: absolute;
            left: 0;
            /* reset on tablet */
            top: (1000/16rem);
            transform: scale(0);
            transform-origin: left top;
            transition:
                transform 0.6s,
                opacity 0.3s,
                visibility 0.3s,
                bottom 0.6s;

            .cs-item {
                /* default styles when there is no active class on the cs-card-group */
                opacity: 0;
                transform: translateY(1.25rem) rotateY(90deg);
                transition:
                    opacity 0.3s,
                    transform 0.6s;
                &:nth-of-type(2) {
                    transition-delay: 0.2s;
                }
                &:nth-of-type(3) {
                    transition-delay: 0.4s;
                }
            }
        }

        .cs-item {
            list-style: none;
            width: 100%;
            /* matches the -88px the cs-price-box's margin top to offset it */
            margin: (88/16rem) 0 0 0;
            /* 80px - 100px top *
            /* 16px - 56px left & right */
            /* 16px - 48px bottom */
            padding: clamp(5rem, 9vw, 6.25rem) clamp(1rem, 2.3vw, 3.5rem)
                clamp(1rem, 5vw, 3rem);
            box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.17);
            background-color: #fff;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            border-radius: (8/16rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .cs-price-box {
            width: 100%;
            /* 32px - 48px margin-bottom */
            margin: (-168/16rem) 0 clamp(2rem, 5vw, 3rem) 0;
            /* 24px - 32px top & bottom */
            /* 24px - 48px left and right */
            padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 3vw, 3rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            background-color: #12192d;
            border-radius: (8/16rem);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: (12/16rem);
        }

        .cs-package {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.25rem);
            line-height: 1.2em;
            text-align: center;
            font-weight: 700;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-price {
            /* 24px - 32px */
            font-size: clamp(1.5rem, 2.5vw, 2rem);
            line-height: 1.2em;
            text-align: center;
            font-weight: 700;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-desc {
            font-size: (12/16rem);
            line-height: 1.2em;
            text-align: center;
            margin: 0;
            color: var(--bodyTextColorWhite);
            opacity: 0.8;
        }

        .cs-item-text {
            font-size: (14/16rem);
            line-height: 1.5em;
            text-align: left;
            font-weight: 400;
            /* 16px - 24px */
            margin: 0 0 clamp(1rem, 2vw, 1.5rem);
            color: var(--bodyTextColor);
        }

        .cs-included {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.25rem);
            line-height: 1.2em;
            text-align: left;
            font-weight: 700;
            /* 16px - 24px */
            margin: 0 0 clamp(1rem, 2vw, 1.5rem);
            color: var(--headerColor);
        }

        .cs-ul {
            /* 32px - 48px */
            margin: 0 0 clamp(2rem, 5vw, 3rem);
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: (16/16rem);
        }

        .cs-li {
            font-size: (14/16rem);
            list-style: none;
            line-height: 1.5em;
            width: 100%;
            margin: 0;
            padding: 0;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            /* push everything to the top so if the li goes to two lines the icon stays at the top */
            align-items: flex-start;
            gap: (16/16rem);
        }

        .cs-icon {
            width: (15/16rem);
            height: auto;
            /* push icon a little from the top so it looks centered */
            margin-top: (3/16rem);
            display: block;
        }

        .cs-button-solid {
            font-size: (16/16rem);
            /* 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: (150/16rem);
            padding: 0 (24/16rem);
            background-color: var(--primary);
            border-radius: (4/16rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: (4/16rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-price-button {
            /* 14px - 18px */
            font-size: clamp(0.875rem, 1.5vw, 1.125rem);
            /* 36px - 50px */
            line-height: clamp(2.25rem, 4.5vw, 3.125rem);
            font-weight: 400;
            text-transform: uppercase;
            width: 100%;
            height: clamp(2.25rem, 4.5vw, 3.125rem);
            /* pushes button to the bottom of the cs-item */
            margin-top: auto;
            border-radius: (4/16rem);
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #pricing-603 {
        .cs-card-group {
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
        }

        .cs-option2 {
            top: auto;
            bottom: 0;
        }
    }
}

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #pricing-603 {
        padding: var(--sectionPadding);

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

        .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;
        }

        .cs-toggle-group {
            width: auto;
            margin: (32/16rem) auto 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cs-plan {
            font-size: (16/16rem);
            line-height: 1.5em;
            margin: 0;
            padding: 0;
            color: var(--headerColor);
            &:hover {
                cursor: pointer;
            }
        }

        .cs-toggle {
            width: (62/16rem);
            height: (36/16rem);
            border-radius: (40/16rem);
            background-color: var(--primaryLight);
            margin: 0 (12/16rem);
            position: relative;
            /* prevent flexbox from squishing it */
            flex: none;

            &:hover {
                cursor: pointer;
            }

            &.active {
                &:before {
                    opacity: 1;
                }
                .cs-toggle-switch {
                    left: (32/16rem);
                }
            }

            &:before {
                /* top right box */
                content: "";
                width: 100%;
                height: 100%;
                background: linear-gradient(
                    90deg,
                    #ffba43 -24.69%,
                    #e12213 126.23%
                );
                opacity: 0;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
                border-radius: (40/16rem);
                transition: opacity 0.3s;
            }
        }

        .cs-toggle-switch {
            width: (24/16rem);
            height: (24/16rem);
            display: block;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: (6/16rem);
            transition: left 0.3s;
            background: #fff;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 16px - 20px */
            gap: clamp(1rem, 1.8vw, 1.25rem);
            row-gap: (40/16rem);
            perspective: 700px;
            transform-style: preserve-3d;

            &.active {
                &.cs-option1 {
                    /* when the active class is on the cs-card-group, run these styles */
                    transform: scale(0);
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    opacity: 0;
                    visibility: hidden;

                    .cs-item {
                        /* when the active class is on the cs-card-group, run these styles */
                        opacity: 0;
                        transform: translateY(1.25rem) rotateY(90deg);
                        transition:
                            opacity 0.3s,
                            transform 0.6s;
                    }
                }

                &.cs-option2 {
                    /* when the active class is on the cs-card-group, run these styles */
                    visibility: visible;
                    pointer-events: all;
                    opacity: 1;
                    position: relative;
                    left: auto;
                    top: auto;
                    transform: scale(1);

                    .cs-item {
                        /* when the active class is on the cs-card-group, run these styles */
                        opacity: 1;
                        transform: translateY(0rem) rotateY(0deg);
                    }
                }
            }
        }

        .cs-option1 {
            /* default styles when there is no active class on the cs-card-group */
            opacity: 1;
            visibility: visible;
            left: left;
            bottom: auto;
            transform: scale(1);
            transform-origin: left top;
            transition:
                transform 0.6s,
                opacity 0.3s,
                visibility 0.3s;

            .cs-item {
                /* default styles when there is no active class on the cs-card-group */
                opacity: 1;
                transform: translateY(0rem) rotateY(0deg);
                transition:
                    opacity 0.3s,
                    transform 0.6s;
                &:nth-of-type(2) {
                    transition-delay: 0.2s;
                }
                &:nth-of-type(3) {
                    transition-delay: 0.4s;
                }
            }
        }

        .cs-option2 {
            /* default styles when there is no active class on the cs-card-group */
            visibility: hidden;
            pointer-events: none;
            opacity: 0;
            position: absolute;
            left: 0;
            /* reset on tablet */
            top: (1000/16rem);
            transform: scale(0);
            transform-origin: left top;
            transition:
                transform 0.6s,
                opacity 0.3s,
                visibility 0.3s,
                bottom 0.6s;

            .cs-item {
                /* default styles when there is no active class on the cs-card-group */
                opacity: 0;
                transform: translateY(1.25rem) rotateY(90deg);
                transition:
                    opacity 0.3s,
                    transform 0.6s;
                &:nth-of-type(2) {
                    transition-delay: 0.2s;
                }
                &:nth-of-type(3) {
                    transition-delay: 0.4s;
                }
            }
        }

        .cs-item {
            list-style: none;
            width: 100%;
            /* matches the -88px the cs-price-box's margin top to offset it */
            margin: (88/16rem) 0 0 0;
            /* 80px - 100px top *
            /* 16px - 56px left & right */
            /* 16px - 48px bottom */
            padding: clamp(5rem, 9vw, 6.25rem) clamp(1rem, 2.3vw, 3.5rem)
                clamp(1rem, 5vw, 3rem);
            box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.17);
            background-color: #fff;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            border-radius: (8/16rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .cs-price-box {
            width: 100%;
            /* 32px - 48px margin-bottom */
            margin: (-168/16rem) 0 clamp(2rem, 5vw, 3rem) 0;
            /* 24px - 32px top & bottom */
            /* 24px - 48px left and right */
            padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 3vw, 3rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            background-color: #12192d;
            border-radius: (8/16rem);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: (12/16rem);
        }

        .cs-package {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.25rem);
            line-height: 1.2em;
            text-align: center;
            font-weight: 700;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-price {
            /* 24px - 32px */
            font-size: clamp(1.5rem, 2.5vw, 2rem);
            line-height: 1.2em;
            text-align: center;
            font-weight: 700;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-desc {
            font-size: (12/16rem);
            line-height: 1.2em;
            text-align: center;
            margin: 0;
            color: var(--bodyTextColorWhite);
            opacity: 0.8;
        }

        .cs-item-text {
            font-size: (14/16rem);
            line-height: 1.5em;
            text-align: left;
            font-weight: 400;
            /* 16px - 24px */
            margin: 0 0 clamp(1rem, 2vw, 1.5rem);
            color: var(--bodyTextColor);
        }

        .cs-included {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.25rem);
            line-height: 1.2em;
            text-align: left;
            font-weight: 700;
            /* 16px - 24px */
            margin: 0 0 clamp(1rem, 2vw, 1.5rem);
            color: var(--headerColor);
        }

        .cs-ul {
            /* 32px - 48px */
            margin: 0 0 clamp(2rem, 5vw, 3rem);
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: (16/16rem);
        }

        .cs-li {
            font-size: (14/16rem);
            list-style: none;
            line-height: 1.5em;
            width: 100%;
            margin: 0;
            padding: 0;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            /* push everything to the top so if the li goes to two lines the icon stays at the top */
            align-items: flex-start;
            gap: (16/16rem);
        }

        .cs-icon {
            width: (15/16rem);
            height: auto;
            /* push icon a little from the top so it looks centered */
            margin-top: (3/16rem);
            display: block;
        }

        .cs-button-solid {
            font-size: (16/16rem);
            /* 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: (150/16rem);
            padding: 0 (24/16rem);
            background-color: var(--primary);
            border-radius: (4/16rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: (4/16rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-price-button {
            /* 14px - 18px */
            font-size: clamp(0.875rem, 1.5vw, 1.125rem);
            /* 36px - 50px */
            line-height: clamp(2.25rem, 4.5vw, 3.125rem);
            font-weight: 400;
            text-transform: uppercase;
            width: 100%;
            height: clamp(2.25rem, 4.5vw, 3.125rem);
            /* pushes button to the bottom of the cs-item */
            margin-top: auto;
            border-radius: (4/16rem);
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #pricing-603 {
        .cs-card-group {
            flex-direction: row;
            justify-content: space-between;
            align-items: stretch;
        }

        .cs-option2 {
            top: auto;
            bottom: 0;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #pricing-603 {
            .cs-topper {
                color: var(--bodyTextColorWhite);
            }
            .cs-title,
            .cs-text, .cs-item-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-text, .cs-item-text {
                opacity: 0.8;
            }

            .cs-plan {
                color: var(--bodyTextColorWhite);
            }

            .cs-item {
                background-color: var(--medium);
            }

            .cs-price-box {
                background-color: var(--accent);
            }

            .cs-item-p,
            .cs-included,
            .cs-li {
                color: var(--bodyTextColorWhite);
            }

            .cs-icon {
                /* makes icon white (if it wasnt black to start) */
                filter: grayscale(1) brightness(1000%);
            }
        }
    }
}

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #pricing-603 {
        padding: var(--sectionPadding);

        .cs-container {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .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;
        }

        .cs-toggle-group {
            width: auto;
            margin: calc(32 / 16 * 1rem) auto 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cs-plan {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            margin: 0;
            padding: 0;
            color: var(--headerColor);
            &:hover {
                cursor: pointer;
            }
        }

        .cs-toggle {
            width: calc(62 / 16 * 1rem);
            height: calc(36 / 16 * 1rem);
            border-radius: calc(40 / 16 * 1rem);
            background-color: var(--primaryLight);
            margin: 0 calc(12 / 16 * 1rem);
            position: relative;
            /* prevent flexbox from squishing it */
            flex: none;

            &:hover {
                cursor: pointer;
            }

            &.active {
                &:before {
                    opacity: 1;
                }
                .cs-toggle-switch {
                    left: calc(32 / 16 * 1rem);
                }
            }

            &:before {
                /* top right box */
                content: "";
                width: 100%;
                height: 100%;
                background: linear-gradient(
                    90deg,
                    #ffba43 -24.69%,
                    #e12213 126.23%
                );
                opacity: 0;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
                border-radius: calc(40 / 16 * 1rem);
                transition: opacity 0.3s;
            }
        }

        .cs-toggle-switch {
            width: calc(24 / 16 * 1rem);
            height: calc(24 / 16 * 1rem);
            display: block;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: calc(6 / 16 * 1rem);
            transition: left 0.3s;
            background: #fff;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 16px - 20px */
            gap: clamp(1rem, 1.8vw, 1.25rem);
            row-gap: calc(40 / 16 * 1rem);
            perspective: 700px;
            transform-style: preserve-3d;

            &.active {
                &.cs-option1 {
                    /* when the active class is on the cs-card-group, run these styles */
                    transform: scale(0);
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    opacity: 0;
                    visibility: hidden;

                    .cs-item {
                        /* when the active class is on the cs-card-group, run these styles */
                        opacity: 0;
                        transform: translateY(1.25rem) rotateY(90deg);
                        transition:
                            opacity 0.3s,
                            transform 0.6s;
                    }
                }

                &.cs-option2 {
                    /* when the active class is on the cs-card-group, run these styles */
                    visibility: visible;
                    pointer-events: all;
                    opacity: 1;
                    position: relative;
                    left: auto;
                    top: auto;
                    transform: scale(1);

                    .cs-item {
                        /* when the active class is on the cs-card-group, run these styles */
                        opacity: 1;
                        transform: translateY(0rem) rotateY(0deg);
                    }
                }
            }
        }

        .cs-option1 {
            /* default styles when there is no active class on the cs-card-group */
            opacity: 1;
            visibility: visible;
            left: left;
            bottom: auto;
            transform: scale(1);
            transform-origin: left top;
            transition:
                transform 0.6s,
                opacity 0.3s,
                visibility 0.3s;

            .cs-item {
                /* default styles when there is no active class on the cs-card-group */
                opacity: 1;
                transform: translateY(0rem) rotateY(0deg);
                transition:
                    opacity 0.3s,
                    transform 0.6s;
                &:nth-of-type(2) {
                    transition-delay: 0.2s;
                }
                &:nth-of-type(3) {
                    transition-delay: 0.4s;
                }
            }
        }

        .cs-option2 {
            /* default styles when there is no active class on the cs-card-group */
            visibility: hidden;
            pointer-events: none;
            opacity: 0;
            position: absolute;
            left: 0;
            /* reset on tablet */
            top: calc(1000 / 16 * 1rem);
            transform: scale(0);
            transform-origin: left top;
            transition:
                transform 0.6s,
                opacity 0.3s,
                visibility 0.3s,
                bottom 0.6s;

            .cs-item {
                /* default styles when there is no active class on the cs-card-group */
                opacity: 0;
                transform: translateY(1.25rem) rotateY(90deg);
                transition:
                    opacity 0.3s,
                    transform 0.6s;
                &:nth-of-type(2) {
                    transition-delay: 0.2s;
                }
                &:nth-of-type(3) {
                    transition-delay: 0.4s;
                }
            }
        }

        .cs-item {
            list-style: none;
            width: 100%;
            /* matches the -88px the cs-price-box's margin top to offset it */
            margin: calc(88 / 16 * 1rem) 0 0 0;
            /* 80px - 100px top *
            /* 16px - 56px left & right */
            /* 16px - 48px bottom */
            padding: clamp(5rem, 9vw, 6.25rem) clamp(1rem, 2.3vw, 3.5rem)
                clamp(1rem, 5vw, 3rem);
            box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.17);
            background-color: #fff;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            border-radius: calc(8 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .cs-price-box {
            width: 100%;
            /* 32px - 48px margin-bottom */
            margin: calc(-168 / 16 * 1rem) 0 clamp(2rem, 5vw, 3rem) 0;
            /* 24px - 32px top & bottom */
            /* 24px - 48px left and right */
            padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 3vw, 3rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            background-color: #12192d;
            border-radius: calc(8 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(12 / 16 * 1rem);
        }

        .cs-package {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.25rem);
            line-height: 1.2em;
            text-align: center;
            font-weight: 700;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-price {
            /* 24px - 32px */
            font-size: clamp(1.5rem, 2.5vw, 2rem);
            line-height: 1.2em;
            text-align: center;
            font-weight: 700;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-desc {
            font-size: calc(12 / 16 * 1rem);
            line-height: 1.2em;
            text-align: center;
            margin: 0;
            color: var(--bodyTextColorWhite);
            opacity: 0.8;
        }

        .cs-item-text {
            font-size: calc(14 / 16 * 1rem);
            line-height: 1.5em;
            text-align: left;
            font-weight: 400;
            /* 16px - 24px */
            margin: 0 0 clamp(1rem, 2vw, 1.5rem);
            color: var(--bodyTextColor);
        }

        .cs-included {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.25rem);
            line-height: 1.2em;
            text-align: left;
            font-weight: 700;
            /* 16px - 24px */
            margin: 0 0 clamp(1rem, 2vw, 1.5rem);
            color: var(--headerColor);
        }

        .cs-ul {
            /* 32px - 48px */
            margin: 0 0 clamp(2rem, 5vw, 3rem);
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: calc(16 / 16 * 1rem);
        }

        .cs-li {
            font-size: calc(14 / 16 * 1rem);
            list-style: none;
            line-height: 1.5em;
            width: 100%;
            margin: 0;
            padding: 0;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            /* push everything to the top so if the li goes to two lines the icon stays at the top */
            align-items: flex-start;
            gap: calc(16 / 16 * 1rem);
        }

        .cs-icon {
            width: calc(15 / 16 * 1rem);
            height: auto;
            /* push icon a little from the top so it looks centered */
            margin-top: calc(3 / 16 * 1rem);
            display: block;
        }

        .cs-button-solid {
            font-size: calc(16 / 16 * 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: calc(150 / 16 * 1rem);
            padding: 0 calc(24 / 16 * 1rem);
            background-color: var(--primary);
            border-radius: calc(4 / 16 * 1rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: calc(4 / 16 * 1rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-price-button {
            /* 14px - 18px */
            font-size: clamp(0.875rem, 1.5vw, 1.125rem);
            /* 36px - 50px */
            line-height: clamp(2.25rem, 4.5vw, 3.125rem);
            font-weight: 400;
            text-transform: uppercase;
            width: 100%;
            height: clamp(2.25rem, 4.5vw, 3.125rem);
            /* pushes button to the bottom of the cs-item */
            margin-top: auto;
            border-radius: calc(4 / 16 * 1rem);
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #pricing-603 {
        .cs-card-group {
            flex-direction: row;
            justify-content: space-between;

            &.cs-active {
                bottom: 0;
                top: auto;
            }
        }

        .cs-option2 {
            top: auto;
            bottom: 0;
        }
    }
}

/*-- -------------------------- -->
<---          Pricing           -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #pricing-603 {
        padding: var(--sectionPadding);

        .cs-container {
            width: 100%;
            max-width: calc(1280 / 16 * 1rem);
            margin: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 48px - 64px */
            gap: clamp(3rem, 6vw, 4rem);
        }

        .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;
        }

        .cs-toggle-group {
            width: auto;
            margin: calc(32 / 16 * 1rem) auto 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .cs-plan {
            font-size: calc(16 / 16 * 1rem);
            line-height: 1.5em;
            margin: 0;
            padding: 0;
            color: var(--headerColor);
            &:hover {
                cursor: pointer;
            }
        }

        .cs-toggle {
            width: calc(62 / 16 * 1rem);
            height: calc(36 / 16 * 1rem);
            border-radius: calc(40 / 16 * 1rem);
            background-color: var(--primaryLight);
            margin: 0 calc(12 / 16 * 1rem);
            position: relative;
            /* prevent flexbox from squishing it */
            flex: none;

            &:hover {
                cursor: pointer;
            }

            &.active {
                &:before {
                    opacity: 1;
                }
                .cs-toggle-switch {
                    left: calc(32 / 16 * 1rem);
                }
            }

            &:before {
                /* top right box */
                content: "";
                width: 100%;
                height: 100%;
                background: linear-gradient(
                    90deg,
                    #ffba43 -24.69%,
                    #e12213 126.23%
                );
                opacity: 0;
                position: absolute;
                display: block;
                top: 0;
                left: 0;
                border-radius: calc(40 / 16 * 1rem);
                transition: opacity 0.3s;
            }
        }

        .cs-toggle-switch {
            width: calc(24 / 16 * 1rem);
            height: calc(24 / 16 * 1rem);
            display: block;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: calc(6 / 16 * 1rem);
            transition: left 0.3s;
            background: #fff;
        }

        .cs-card-group {
            width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            /* 16px - 20px */
            gap: clamp(1rem, 1.8vw, 1.25rem);
            row-gap: calc(40 / 16 * 1rem);
            perspective: 700px;
            transform-style: preserve-3d;

            &.active {
                &.cs-option1 {
                    /* when the active class is on the cs-card-group, run these styles */
                    transform: scale(0);
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    opacity: 0;
                    visibility: hidden;

                    .cs-item {
                        /* when the active class is on the cs-card-group, run these styles */
                        opacity: 0;
                        transform: translateY(1.25rem) rotateY(90deg);
                        transition:
                            opacity 0.3s,
                            transform 0.6s;
                    }
                }

                &.cs-option2 {
                    /* when the active class is on the cs-card-group, run these styles */
                    visibility: visible;
                    pointer-events: all;
                    opacity: 1;
                    position: relative;
                    left: auto;
                    top: auto;
                    transform: scale(1);

                    .cs-item {
                        /* when the active class is on the cs-card-group, run these styles */
                        opacity: 1;
                        transform: translateY(0rem) rotateY(0deg);
                    }
                }
            }
        }

        .cs-option1 {
            /* default styles when there is no active class on the cs-card-group */
            opacity: 1;
            visibility: visible;
            left: left;
            bottom: auto;
            transform: scale(1);
            transform-origin: left top;
            transition:
                transform 0.6s,
                opacity 0.3s,
                visibility 0.3s;

            .cs-item {
                /* default styles when there is no active class on the cs-card-group */
                opacity: 1;
                transform: translateY(0rem) rotateY(0deg);
                transition:
                    opacity 0.3s,
                    transform 0.6s;
                &:nth-of-type(2) {
                    transition-delay: 0.2s;
                }
                &:nth-of-type(3) {
                    transition-delay: 0.4s;
                }
            }
        }

        .cs-option2 {
            /* default styles when there is no active class on the cs-card-group */
            visibility: hidden;
            pointer-events: none;
            opacity: 0;
            position: absolute;
            left: 0;
            /* reset on tablet */
            top: calc(1000 / 16 * 1rem);
            transform: scale(0);
            transform-origin: left top;
            transition:
                transform 0.6s,
                opacity 0.3s,
                visibility 0.3s,
                bottom 0.6s;

            .cs-item {
                /* default styles when there is no active class on the cs-card-group */
                opacity: 0;
                transform: translateY(1.25rem) rotateY(90deg);
                transition:
                    opacity 0.3s,
                    transform 0.6s;
                &:nth-of-type(2) {
                    transition-delay: 0.2s;
                }
                &:nth-of-type(3) {
                    transition-delay: 0.4s;
                }
            }
        }

        .cs-item {
            list-style: none;
            width: 100%;
            /* matches the -88px the cs-price-box's margin top to offset it */
            margin: calc(88 / 16 * 1rem) 0 0 0;
            /* 80px - 100px top *
            /* 16px - 56px left & right */
            /* 16px - 48px bottom */
            padding: clamp(5rem, 9vw, 6.25rem) clamp(1rem, 2.3vw, 3.5rem)
                clamp(1rem, 5vw, 3rem);
            box-shadow: 10px 10px 60px rgba(0, 0, 0, 0.17);
            background-color: #fff;
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            border-radius: calc(8 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .cs-price-box {
            width: 100%;
            /* 32px - 48px margin-bottom */
            margin: calc(-168 / 16 * 1rem) 0 clamp(2rem, 5vw, 3rem) 0;
            /* 24px - 32px top & bottom */
            /* 24px - 48px left and right */
            padding: clamp(1.5rem, 4vw, 2rem) clamp(1.5rem, 3vw, 3rem);
            /* prevents padding and border from affecting height and width */
            box-sizing: border-box;
            background-color: #12192d;
            border-radius: calc(8 / 16 * 1rem);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: calc(12 / 16 * 1rem);
        }

        .cs-package {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.25rem);
            line-height: 1.2em;
            text-align: center;
            font-weight: 700;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-price {
            /* 24px - 32px */
            font-size: clamp(1.5rem, 2.5vw, 2rem);
            line-height: 1.2em;
            text-align: center;
            font-weight: 700;
            margin: 0;
            color: var(--bodyTextColorWhite);
        }

        .cs-desc {
            font-size: calc(12 / 16 * 1rem);
            line-height: 1.2em;
            text-align: center;
            margin: 0;
            color: var(--bodyTextColorWhite);
            opacity: 0.8;
        }

        .cs-item-text {
            font-size: calc(14 / 16 * 1rem);
            line-height: 1.5em;
            text-align: left;
            font-weight: 400;
            /* 16px - 24px */
            margin: 0 0 clamp(1rem, 2vw, 1.5rem);
            color: var(--bodyTextColor);
        }

        .cs-included {
            /* 16px - 20px */
            font-size: clamp(1rem, 2vw, 1.25rem);
            line-height: 1.2em;
            text-align: left;
            font-weight: 700;
            /* 16px - 24px */
            margin: 0 0 clamp(1rem, 2vw, 1.5rem);
            color: var(--headerColor);
        }

        .cs-ul {
            /* 32px - 48px */
            margin: 0 0 clamp(2rem, 5vw, 3rem);
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: calc(16 / 16 * 1rem);
        }

        .cs-li {
            font-size: calc(14 / 16 * 1rem);
            list-style: none;
            line-height: 1.5em;
            width: 100%;
            margin: 0;
            padding: 0;
            color: var(--bodyTextColor);
            display: flex;
            justify-content: flex-start;
            /* push everything to the top so if the li goes to two lines the icon stays at the top */
            align-items: flex-start;
            gap: calc(16 / 16 * 1rem);
        }

        .cs-icon {
            width: calc(15 / 16 * 1rem);
            height: auto;
            /* push icon a little from the top so it looks centered */
            margin-top: calc(3 / 16 * 1rem);
            display: block;
        }

        .cs-button-solid {
            font-size: calc(16 / 16 * 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: calc(150 / 16 * 1rem);
            padding: 0 calc(24 / 16 * 1rem);
            background-color: var(--primary);
            border-radius: calc(4 / 16 * 1rem);
            display: inline-block;
            position: relative;
            z-index: 1;
            /* prevents padding from adding to the width */
            box-sizing: border-box;

            &:before {
                content: "";
                position: absolute;
                height: 100%;
                width: 0%;
                background: #000;
                opacity: 1;
                top: 0;
                left: 0;
                z-index: -1;
                border-radius: calc(4 / 16 * 1rem);
                transition: width 0.3s;
            }

            &:hover {
                &:before {
                    width: 100%;
                }
            }
        }

        .cs-price-button {
            /* 14px - 18px */
            font-size: clamp(0.875rem, 1.5vw, 1.125rem);
            /* 36px - 50px */
            line-height: clamp(2.25rem, 4.5vw, 3.125rem);
            font-weight: 400;
            text-transform: uppercase;
            width: 100%;
            height: clamp(2.25rem, 4.5vw, 3.125rem);
            /* pushes button to the bottom of the cs-item */
            margin-top: auto;
            border-radius: calc(4 / 16 * 1rem);
        }
    }
}

/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #pricing-603 {
        .cs-card-group {
            flex-direction: row;
            justify-content: space-between;

            &.cs-active {
                bottom: 0;
                top: auto;
            }
        }

        .cs-option2 {
            top: auto;
            bottom: 0;
        }
    }
}

/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode {
        #pricing-603 {
            .cs-topper {
                color: var(--bodyTextColorWhite);
            }
            .cs-title,
            .cs-text, .cs-item-text {
                color: var(--bodyTextColorWhite);
            }

            .cs-text, .cs-item-text {
                opacity: 0.8;
            }

            .cs-plan {
                color: var(--bodyTextColorWhite);
            }

            .cs-item {
                background-color: var(--medium);
            }

            .cs-price-box {
                background-color: var(--accent);
            }

            .cs-item-p,
            .cs-included,
            .cs-li {
                color: var(--bodyTextColorWhite);
            }

            .cs-icon {
                /* makes icon white (if it wasnt black to start) */
                filter: grayscale(1) brightness(1000%);
            }
        }
    }
}

const toggle = document.querySelector("#pricing-603 .cs-toggle");
        const cardGroup = Array.from(document.querySelectorAll('.cs-card-group'))

        toggle.addEventListener('click', (e) => { 
            for (const item of cardGroup) {
                item.classList.toggle("active");
            }
            toggle.classList.toggle("active");
        });

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: (4/16rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: (700/16rem);
    margin: 0 0 (16/16rem) 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: (650/16rem);
    margin: 0;
    color: var(--bodyTextColor);
}

:root {
    /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
    --primary: #ff6a3e;
    --primaryLight: #ffba43;
    --secondary: #ffba43;
    --secondaryLight: #ffba43;
    --headerColor: #1a1a1a;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    /* 13px - 16px */
    --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
    /* 31px - 49px */
    --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
    --bodyFontSize: 1rem;
    /* 60px - 100px top and bottom */
    --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    /* prevents padding from affecting height and width */
    box-sizing: border-box;
}
.cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: calc(4 / 16 * 1rem);
    display: block;
}

.cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: calc(700 / 16 * 1rem);
    margin: 0 0 calc(16 / 16 * 1rem) 0;
    color: var(--headerColor);
    position: relative;
}

.cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: calc(650 / 16 * 1rem);
    margin: 0;
    color: var(--bodyTextColor);
}