/************ MOBILE - 360PX *************/
/*****************************************/
@media only screen and (min-width: 0em) {
    /************** BANNER *******************/
    /*****************************************/
    #banner {
        /* 175px - 260px top */
        padding: clamp(10.9375rem, 20vw, 16.25rem) 1rem clamp(6.25rem, 14vw, 12vw);
        /* clips svg wave from causing overflow issues */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #banner .container {
        text-align: center;
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;
    }
    #banner .int-title {
        /* 39px - 61px */
        font-size: clamp(2.4375rem, 6.4vw, 3.8125rem);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        padding: 1.25rem;
        color: var(--textLight);
        position: relative;
    }
    #banner .background {
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #banner .background:before {
        /* background color overlay */
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 100%;
        background: var(--primaryDark);
        opacity: 1;
        top: 0;
        left: 0;
        z-index: 1;
    }
    #banner .wave {
        /* we're stretching the svg wider than the viewport so it's taller and has more of a presence */
        width: 48rem;
        height: auto;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translateX(-50%);
        z-index: -1;
    }
    /**************** INTRO ******************/
    /*****************************************/
    #intro {
        padding: var(--sectionPadding);
        background-color: #fff;
        /* clips the wave background from causing overflow issues when it goes off screen */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #intro .container {
        width: 100%;
        height: auto;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
        position: relative;
    }
    #intro .content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 46.125rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #intro .content img {
        width: 100%;
        height: auto;
        margin: 1rem 0;
        display: block;
    }
    #intro .title {
        font-size: var(--headerFontSize);
        font-weight: 900;
        line-height: 1.2em;
        text-align: inherit;
        width: 100%;
        max-width: 100%;
        margin: 0 0 0.5rem 0;
        color: var(--headerColor);
        position: relative;
    }
    #intro h2,
    #intro h3,
    #intro h4,
    #intro h5,
    #intro h6 {
        font-weight: 400;
        text-align: inherit;
        margin: 0 0 1rem 0;
        color: var(--headerColor);
    }
    #intro h2 {
        font-size: 1.5rem;
        margin-top: 1rem;
    }
    #intro h3 {
        font-size: 1.5rem;
        color: var(--primary);
    }
    #intro h4,
    #intro h5,
    #intro h6 {
        font-size: 1.25rem;
    }
    #intro .button-solid {
        margin-bottom: 2rem;
    }
    #intro .color {
        color: var(--primary);
    }
    #intro p {
        font-size: var(--bodyFontSize);
        line-height: 1.5em;
        text-align: inherit;
        width: 100%;
        margin: 0 0 1rem 0;
        color: var(--bodyTextColor);
    }
    #intro p:last-of-type {
        margin-bottom: 2rem;
    }
    #intro p a {
        font-size: inherit;
        line-height: inherit;
        text-decoration: underline;
        color: var(--primary);
    }
    #intro ol,
    #intro ul {
        padding-left: 1.5rem;
        margin: 0 0 2rem 0;
        color: var(--bodyTextColor);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    #intro ul li {
        list-style: none;
        color: inherit;
        position: relative;
    }
    #intro ul li:before {
        /* custom list bullet */
        content: "";
        width: 3px;
        height: 3px;
        background: currentColor;
        opacity: 1;
        border-radius: 50%;
        position: absolute;
        display: block;
        top: 0.625rem;
        left: -0.75rem;
    }
    #intro .image-group {
        /* scales the whole section down and ties the font size to the vw and stops at 70% of the vale of 1em, changes at desktop */
        font-size: min(1vw, 1em);
        /* everything inside this box is in ems so we can scale it all down proportionally with a font size */
        width: 34rem;
        height: 30rem;
        display: none;
        /* prevents flexbox from squishing it */
        flex: none;
        position: relative;
        /* flips it horizontally */
        transform: scaleX(-1);
    }
    #intro .picture {
        width: 33.875em;
        height: 40.4375em;
        border-radius: 17.8125em;
        border: 0.75em solid #ffffff;
        background-color: #f7f7f7;
        /* prevents border from affecting height and width */
        box-sizing: border-box;
    }
    #intro .picture img {
        width: 100%;
        height: 100%;
        border-radius: 10rem;
        /* makes it act like a background image */
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        /* flips the image to its original orientation */
        transform: scaleX(-1);
    }

    /************** PRICING ******************/
    /*****************************************/
    #pricing {
        padding: var(--sectionPadding);
        /* clips the floater and prevents it from causing overflow issues */
        overflow: hidden;
        background-color: var(--primaryDark);
        position: relative;
        z-index: 1;
    }
    #pricing .container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 3vw, 4rem);
        position: relative;
    }
    #pricing .content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }
    #pricing .topper {
        color: var(--textLight);
    }
    #pricing .title {
        max-width: 20ch;
        color: var(--textLight);
    }
    #pricing .text {
        margin-bottom: 1rem;
        color: var(--textLight);
    }
    #pricing .text:last-of-type {
        margin-bottom: 2rem;
    }
    #pricing .toggle-group {
        width: 100%;
        max-width: 25.875rem;
        margin: 0;
        padding: 0.75rem;
        /* prevents padding and border from affecting height and width */
        box-sizing: border-box;
        background-color: var(--primaryLight);
        border-radius: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #pricing .plan {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5em;
        margin: 0;
        padding: 0;
        color: var(--headerColor);
    }
    #pricing .plan:hover {
        cursor: pointer;
    }
    #pricing .toggle {
        width: 3.25rem;
        height: 2rem;
        border-radius: 2.5rem;
        background-color: var(--accentColor);
        margin: 0 1.5rem;
        position: relative;
        /* prevent flexbox from squishing it */
        flex: none;
    }
    #pricing .toggle:hover {
        cursor: pointer;
    }
    #pricing .toggle.active:before {
        opacity: 1;
    }
    #pricing .toggle.active .toggle-switch {
        left: 1.4375rem;
    }
    #pricing .toggle:before {
        /* top right box */
        content: "";
        width: 100%;
        height: 100%;
        background: #c65513;
        opacity: 0;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        border-radius: 2.5rem;
        transition: opacity 0.3s;
    }
    #pricing .toggle-switch {
        width: 1.625rem;
        height: 1.625rem;
        display: block;
        border-radius: 50%;
        filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.06))
            drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0.1875rem;
        transition: left 0.3s;
        background: white;
    }
    #pricing .card-group {
        width: 100%;
        max-width: 39.375rem;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 16px - 20px */
        gap: clamp(1rem, 2.3vw, 1.25rem);
    }
    #pricing .card-group.active.option1 {
        /* when the active class is on the card-group, run these styles */
        transform: scale(0);
        position: absolute;
        right: 0;
        bottom: 0;
        opacity: 0;
        visibility: hidden;
    }
    #pricing .card-group.active.option1 .item {
        /* when the active class is on the card-group, run these styles */
        opacity: 0;
        transform: translateY(1.25rem) rotateY(90deg);
        transition:
            opacity 0.3s,
            transform 0.6s;
    }
    #pricing .card-group.active.option2 {
        /* when the active class is on the card-group, run these styles */
        visibility: visible;
        pointer-events: all;
        opacity: 1;
        position: relative;
        right: auto;
        bottom: auto;
        transform: scale(1);
    }
    #pricing .card-group.active.option2 .item {
        /* when the active class is on the card-group, run these styles */
        opacity: 1;
        transform: translateY(0rem) rotateY(0deg);
    }
    #pricing .option1 {
        /* default styles when there is no active class on the card-group */
        opacity: 1;
        visibility: visible;
        right: 0;
        bottom: auto;
        transform: scale(1);
        transform-origin: top;
        transition:
            transform 0.6s,
            opacity 0.3s,
            visibility 0.3s;
    }
    #pricing .option1 .item {
        /* default styles when there is no active class on the card-group */
        opacity: 1;
        transform: translateY(0rem) rotateY(0deg);
        transition:
            opacity 0.3s,
            transform 0.6s;
    }
    #pricing .option1 .item:nth-of-type(2) {
        transition-delay: 0.2s;
    }
    #pricing .option1 .item:nth-of-type(3) {
        transition-delay: 0.4s;
    }
    #pricing .option2 {
        /* default styles when there is no active class on the card-group */
        visibility: hidden;
        pointer-events: none;
        opacity: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        transform: scale(0);
        transform-origin: top;
        transition:
            transform 0.6s,
            opacity 0.3s,
            visibility 0.3s;
    }
    #pricing .option2 .item {
        /* default styles when there is no active class on the card-group */
        opacity: 0;
        transform: translateY(1.25rem) rotateY(90deg);
        transition:
            opacity 0.3s,
            transform 0.6s;
    }
    #pricing .option2 .item:nth-of-type(2) {
        transition-delay: 0.2s;
    }
    #pricing .option2 .item:nth-of-type(3) {
        transition-delay: 0.4s;
    }
    #pricing .item {
        text-align: center;
        list-style: none;
        width: clamp(20rem, 25vh, 23.75rem);
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
    }
    #pricing .item.popular .flex {
        background-color: var(--accentColor);
    }
    #pricing .item.popular .tag {
        display: flex;
    }
    #pricing .item.popular .package,
    #pricing .item.popular .price,
    #pricing .item.popular .duration {
        color: var(--textLight);
    }
    #pricing .flex {
        /* 296px - 336px */
        width: clamp(18.5rem, 20vw, 21rem);
        height: clamp(18.5rem, 20vw, 21rem);
        margin-bottom: -6.25rem;
        border-radius: 50%;
        background-color: #c0bdbd;
        border: 6px solid white;
        color: var(--textBlack);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    #pricing .tag {
        font-size: 0.8125rem;
        color: var(--textBlack);
        text-transform: uppercase;
        /* keeps the text in one line, won't jump to two lines */
        white-space: nowrap;
        font-weight: 700;
        padding: 0.5rem;
        gap: 0.25rem;
        border-radius: 50px;
        background-color: #fff;
        /* clips the corners of the pseudo element */
        overflow: hidden;
        display: none;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 50%;
        bottom: 1.25rem;
        transform: translateX(-50%);
    }
    #pricing .tag:before {
        content: "";
        width: 100%;
        height: 100%;
        background: #FFF;
        opacity: 0.3;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #pricing .icon {
        width: 1.25rem;
        height: auto;
        display: flex;
    }
    #pricing .package {
        /* 20px - 25px */
        font-size: clamp(1.35rem, 2vw, 1.55rem);
        line-height: 1.2em;
        text-align: inherit;
        font-weight: 700;
        /* 4px - 8px */
        margin: 0 0 clamp(0.25rem, 1vw, 0.5rem) 0;
    }
    #pricing .price {
        /* 31px - 49px */
        font-size: clamp(1.9375rem, 4vw, 2.5500rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: inherit;
        margin: 0;
        padding: 0;
        color: var(--headerColor);
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    #pricing .duration {
        font-size: 1rem;
        line-height: 1.5em;
        font-weight: 400;
        text-align: inherit;
        margin-left: 0.25rem;
        /* 4px - 8px */
        padding: clamp(0.25rem, 1vw, 0.5rem) 0;
        color: var(--textBlack);
        display: block;
    }
    #pricing .info {
        width: 100%;
        padding: 5.375rem 1.5rem 2.5rem;
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #pricing .ul {
        width: 100%;
        margin: 2.5rem 0 2.5rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: left;
        gap: 0.75rem;
        position: relative;
    }
    #pricing .li {
        font-size: 1rem;
        list-style: none;
        line-height: 1.5em;
        font-weight: 400;
        text-align: inherit;
        margin: 0;
        padding: 0;
        color: var(--textBlack);
        display: flex;
        text-align: left;
        gap: 0.5rem;
    }
    #pricing .li img {
        justify-content: left;
    }
    #pricing .li.disabled {
        opacity: 0.5;
    }
    #pricing .disabled {
        opacity: 0.5;
    }
    #pricing .disabled .filter-red {
        filter: invert(16%) sepia(94%) saturate(7453%) hue-rotate(0deg) brightness(102%) contrast(112%);
    }
    #pricing .enabled .filter-green {
        filter: brightness(0) saturate(100%) invert(79%) sepia(43%) saturate(7069%) hue-rotate(77deg) brightness(106%) contrast(97%);
    }
    #pricing .button-transparent {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        overflow: hidden;
        margin: 0;
        background-color: var(--accentColor);
        color: var(--textLight);
        padding: 0 3rem;
        border-radius: 1.875rem;
        border: 1px solid var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }
    #pricing .button-transparent:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #1a1a1a;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #pricing .button-transparent:hover {
        border-color: #1a1a1a;
    }
    #pricing .button-transparent:hover:before {
        width: 100%;
    }
    #pricing .button-transparent {
        /* this is the section specific override if you choose to pull out the button-transparent and place it in a global stylesheet to resue acorss the entire site */
        margin-top: auto;
    }
}

/************ TABLET - 768PX *************/
/*****************************************/
@media only screen and (min-width: 48rem) {
    /*************** BANNER ******************/
    /*****************************************/
    #banner .wave {
        width: 100%;
        left: 0;
        transform: none;
    }
    /*************** INTRO *******************/
    /*****************************************/
    #intro .container {
        flex-direction: row;
        align-items: flex-start;
    }
    #intro .image-group {
        width: 25rem;
        display: block;
    }
    #intro .background {
        width: 100%;
        height: 100%;
        background-color: #f7f7f7;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        z-index: -1;
    }
    #intro .background img {
        width: 100%;
        height: 100%;
        opacity: 0.2;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    /*************** PRICING *****************/
    /*****************************************/
    #pricing .card-group {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    #pricing .item {
        width: 100%;
        /* ensures they stay the same height if you add more content */
        align-self: stretch;
    }
    #pricing .popular {
        /* send back to its original order */
        order: unset;
    }
    #pricing #option2:before {
        top: -0.625rem;
    }
    #pricing #option2:after {
        top: -2.1875rem;
        right: -6.25rem;
    }
    #pricing .container {
        max-width: 80rem;
    }
    #pricing .container .card-group {
        flex-direction: row;
        align-items: stretch;
    }
}

/******** SMALL DESKTOP - 1024PX *********/
/*****************************************/
@media only screen and (min-width: 64rem) {
    /************** BANNER *******************/
    /*****************************************/
    #banner .int-title{
        padding: clamp(2.75rem, 25vw ,3rem);
    }

    /*************** PRICING *****************/
    /*****************************************/
    #pricing .container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    #pricing .content {
        text-align: left;
        width: 47%;
        align-items: flex-start;
    }
    #pricing .info {
        min-height: 27rem;
    }
    #pricing .card-group {
        justify-content: space-around;
    }
}

/********** LARGE DESKTOP 1300PX *********/
/*****************************************/
@media only screen and (min-width: 81.25rem) {
    /*************** INTRO *******************/
    /*****************************************/
    #intro .image-group {
        width: 35rem;
    }
    
    
    #intro .picture {
        max-width: 26rem;
        height: 30rem;
    }
    #intro .picture img {
        width: 100%;
        height: 100%;
        /* makes it act like a background image */
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        /* flips the image to its original orientation */
        transform: scaleX(-1);
    }
}

/****************** SEASONAL *************/
/*****************************************/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #seasonal {
        padding: var(--sectionPadding);
        /* clips the floater and prevents it from causing overflow issues */
        overflow: hidden;
        background-color: var(--primaryDark);
        position: relative;
        z-index: 1;
    }
    #seasonal .container {
        width: 100%;
        /* changes to 1280px at tablet */
        max-width: 36.5rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 3vw, 4rem);
    }
    #seasonal .content {
        /* set text align to left if content needs to be left aligned */
        text-align: center;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: center;
    }

    #seasonal .title {
        max-width: 20ch;
        color: var(--textLight);
    }
    #seasonal .text {
        margin: 0.5rem;
        color: var(--textLight);
    }
    #seasonal .card-group {
        width: 100%;
        max-width: 39.375rem;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* 16px - 20px */
        gap: clamp(1rem, 2.3vw, 1.25rem);
    }
    #seasonal .item {
        text-align: center;
        list-style: none;
        width: 100%;
        max-width: 22rem;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: center;
    }
    #seasonal .flex {
        /* 196px - 250px */
        width: clamp(18.5rem, 20vw, 21rem);
        height: clamp(18.5rem, 20vw, 21rem);
        margin-bottom: -6.25rem;
        border-radius: 50%;
        border: 6px solid #FFF;
        background-color: var(--accentColor);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
    }
    #seasonal .package {
        /* 20px - 25px */
        font-size: clamp(1.25rem, 2vw, 1.5625rem);
        color: var(--textLight);
        line-height: 1.2em;
        text-align: inherit;
        font-weight: 700;
        /* 4px - 8px */
        margin: 0 0 clamp(0.25rem, 1vw, 0.5rem) 0;
    }
    #seasonal .price {
        /* 31px - 49px */
        font-size: clamp(1.9375rem, 4vw, 3.0625rem);
        line-height: 1.2em;
        font-weight: 700;
        text-align: inherit;
        margin: 0;
        padding: 0;
        color: var(--textLight);
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    #seasonal .extra {
        color: var(--textLight);
    }
    #seasonal .duration {
        font-size: 1rem;
        line-height: 1.5em;
        font-weight: 400;
        text-align: inherit;
        margin: 0;
        /* 4px - 8px */
        padding: clamp(0.25rem, 1vw, 0.5rem) 0;
        color: var(--textLight);
        display: block;
    }
    #seasonal .info {
        width: 100%;
        padding: 5.375rem 2.5rem 2.5rem;
        /* prevents padding from affecting height and width */
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #seasonal .enabled .filter-green {
      filter: brightness(0) saturate(100%) invert(79%) sepia(43%) saturate(7069%) hue-rotate(77deg) brightness(106%) contrast(97%);
    }
    #seasonal .ul {
        width: 100%;
        margin: 2.5rem 0 2.5rem 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: left;
        gap: 0.75rem;
        position: relative;
    }
    #seasonal .li {
        font-size: 1rem;
        list-style: none;
        line-height: 1.5em;
        font-weight: 400;
        text-align: inherit;
        margin: 0;
        padding: 0;
        color: var(--textBlack);
        display: flex;
        text-align: left;
        gap: 0.5rem;
    }
    #seasonal .li.disabled {
        opacity: 0.5;
    }
    #seasonal .button-transparent {
        font-size: 1rem;
        line-height: 3.5rem;
        text-decoration: none;
        font-weight: 700;
        overflow: hidden;
        margin: 0;
        background-color: var(--accentColor);
        color: var(--textLight);
        padding: 0 3rem;
        border-radius: 1.875rem;
        border: 1px solid var(--primary);
        display: inline-block;
        position: relative;
        z-index: 1;
        transition: color 0.3s;
    }
    #seasonal .button-transparent:before {
        content: "";
        position: absolute;
        display: block;
        height: 100%;
        width: 0%;
        background: #1a1a1a;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        transition: width 0.3s;
    }
    #seasonal .button-transparent:hover {
        border-color: #1a1a1a;
    }
    #seasonal .button-transparent:hover:before {
        width: 100%;
    }
    #seasonal .button-transparent {
        /* this is the section specific override if you choose to pull out the button-transparent and place it in a global stylesheet to resue acorss the entire site */
        margin-top: auto;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #seasonal .container {
        max-width: 80rem;
    }
    #seasonal .container .card-group {
        flex-direction: row;
        align-items: stretch;
    }
}
/* Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #seasonal .container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    #seasonal .content {
        text-align: left;
        width: 47%;
        align-items: flex-start;
    }
    #seasonal .info {
        min-height: 27rem;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #seasonal {
        background-color: var(--dark);
    }
    body.dark-mode #seasonal .title,
    body.dark-mode #seasonal .text {
        color: var(--textLight);
    }
    body.dark-mode #seasonal .text {
        opacity: 0.9;
    }
    body.dark-mode #seasonal .info {
        background-color: var(--medium);
    }
    body.dark-mode #seasonal .flex {
        background-color: var(--dark);
        border-color: var(--accentColor);
    }
    body.dark-mode #seasonal .ul:before {
        opacity: 0.5;
    }
    body.dark-mode #seasonal .item.popular .button-transparent {
        background-color: #fff;
        color: var(--primary);
    }
    body.dark-mode #seasonal .item.popular .button-transparent:hover {
        background-color: #1a1a1a;
    }
    body.dark-mode #seasonal .package {
        color: var(--primary);
    }
    body.dark-mode #seasonal .price,
    body.dark-mode #seasonal .duration,
    body.dark-mode #seasonal .li {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #seasonal .duration {
        opacity: 0.8;
    }
    body.dark-mode #seasonal .button-transparent {
        background-color: #1a1a1a;
        color: #fff;
        border: none;
        transition:
            color 0.3s,
            background-color 0.3s;
    }
    body.dark-mode #seasonal .button-transparent:hover {
        background-color: #FFF;
    }
    body.dark-mode #seasonal .li-img {
        filter: brightness(0) invert(1);
    }

}

/*-- -------------------------- -->
<---   CHOOSE-PLAN     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #choose-plan,
    #choose-option {
        /* we use margin here instead of padding because we want to create the space OUTSIDE the section.  The overflow on the section clips the boxes we made to make the slanted designs, so we need to push from the outside of the section with margin to create space between it and the next section.  If the section above this Stitch has a white background, add margin-top: 0. If it has a white section below it, add marign-bottom: 0. This will allow more proper spacing and not have too much empty space.  If both sections above and below this Stitch have white backgrounds, you can just remove this margin all together */
        margin: var(--sectionPadding);
        margin-left: 0;
        margin-right: 0;
        padding: 0 1rem;
        /* prevents overflow from the slant shape */
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    #choose-plan:before,
    #choose-option:before {
        /* section background */
        content: "";
        width: 100%;
        height: 100%;
        background: var(--primaryLight);
        opacity: 1;
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        z-index: -1;
    }
    #choose-plan .container,
    #choose-option .container {
        width: 100%;
        max-width: 80em;
        margin: auto;
        /* 60px - 100px top and bottom */
        padding: clamp(3.75em, 6.82vw, 6.25em) 0;
        /* maintains proportional marign top as screen size grows */
        margin-top: 56vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        position: relative;
        /* places it on top of the background */
        z-index: 10;
    }
    #choose-plan .container:before,
    #choose-option .container:before {
        /* section slant on mobile */
        content: "";
        width: 72.5rem;
        height: 132rem;
        background: var(--primaryDark);
        /* prevents mouse from interacting with it */
        pointer-events: none;
        opacity: 1;
        position: absolute;
        z-index: -1;
        display: block;
        top: -28.75rem;
        /* these last two center it horizontally and rotate -65deg */
        left: 50%;
        transform: translateX(-50%) rotate(65deg);
    }
    #choose-plan .content,
    #choose-option .content {
        /* set text align to left if content needs to be left aligned */
        text-align: right;
        width: 100%;
        max-width: 32.625rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-end;
    }

    #choose-plan .topper,
    #choose-option .topper,
    #choose-plan .title,
    #choose-option .title {
        color: var(--bodyTextColorWhite);
    }
    #choose-plan .text,
    #choose-option .text {
        margin-bottom: 1rem;
        color: #FFF;
        opacity: 0.9;
    }
    #choose-plan .text:last-of-type,
    #choose-option .text:last-of-type {
        margin-bottom: 2rem;
    }
    #choose-plan .button-solid,
    #choose-option .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: var(--textLight);
        min-width: 9.375rem;
        padding: 0 1.5rem;
        background-color: var(--secondaryDark);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
        transition: color 0.3s;
    }
    #choose-plan .button-solid:before,
    #choose-option .button-solid:before {
        content: "";
        position: absolute;
        height: 100%;
        width: 0%;
        background: #FFF;
        opacity: 1;
        top: 0;
        left: 0;
        z-index: -1;
        border-radius: 0.25rem;
        transition: width 0.3s;
    }
    #choose-plan .button-solid:hover,
    #choose-option .button-solid:hover {
        color: #000;
    }
    #choose-plan .button-solid:hover:before,
    #choose-option .button-solid:hover:before {
        width: 100%;
    }
    #choose-plan .background,
    #choose-option .background {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    #choose-plan .background img,
    #choose-option .background img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #choose-plan:before,
    #choose-option:before {
        /* remove the pseudo for the section background */
        display: none;
    }
    #choose-plan .background,
    #choose-option .background {
        width: 60%;
        /* reset height to let top and bottom properties create the height */
        height: auto;
        aspect-ratio: initial;
        position: absolute;
        /* creates the gap between the image and the blue section */
        top: 3.75rem;
        bottom: 0;
    }
    #choose-plan .background img,
    #choose-option .background img {
        object-position: 80% top;
    }
    #choose-plan .container,
    #choose-option .container {
        margin-top: 0;
    }
    #choose-plan .container:before,
    #choose-option .container:before {
        /* make really tall so it always covers top to bottom, even when you add more list items */
        height: 250rem;
        /* make really really wide so it covers the left side at large scree sizes */
        width: 250rem;
        /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
        margin-left: -68.75rem;
        top: 45%;
        left: auto;
        /* pushes the left edge of the element to the center line of the parent */
        left: 40%;
        transform: rotate(35deg) translateY(-50%);
    }
    #choose-plan .content,
    #choose-option .content {
        width: 50%;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #choose-plan .container:before,
    body.dark-mode #choose-option .container:before {
        background-color: var(--medium);
    }
    body.dark-mode #choose-plan .button-solid {
        background-color: var(--accentColor);
    }
    body.dark-mode #choose-plan .button-solid:hover {
        color: var(--accentColor);
    }
    body.dark-mode #choose-plan .button-solid:before {
        background-color: var(--primaryLight);
    }
    body.dark-mode #choose-plan .image-group:before {
        background-color: var(--primaryLight);
        opacity: 0.3;
    }
    body.dark-mode #choose-plan .picture-small {
        border-color: var(--dark);
    }
}

/*-- -------------------------- -->
<---   CHOOSE-OPTION     -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #choose-option .container:before {
        transform: translateX(-50%) rotate(-65deg);
    }
    #choose-option .content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
    #choose-option:before {
        /* remove the pseudo for the section background */
        display: none;
    }
    #choose-option .background {
        right: 0;
        left: auto;
    }
    #choose-option .container {
        margin-top: 0;
        align-items: flex-start;
    }
    #choose-option .container:before {
        /* push X amount from the center line to the right.  If after you added content and the slant is not covering everything, make this negative number even more negative to pull it more to the right */
        margin-right: -68.75rem;
        left: auto;
        /* pushes the right edge of the element to the center line of the parent */
        right: 50%;
        transform: rotate(-35deg) translateY(-50%);
    }
    #choose-option .content {
        width: 50%;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #choose-option .container:before {
        background-color: var(--medium);
    }
    body.dark-mode #choose-option .button-solid {
        background-color: var(--accentColor);
    }
    body.dark-mode #choose-option .button-solid:hover {
        color: var(--accentColor);
    }
    body.dark-mode #choose-option .button-solid:before {
        background-color: var(--primaryLight);
    }
    body.dark-mode #choose-option .image-group:before {
        background-color: var(--primaryLight);
        opacity: 0.3;
    }
    body.dark-mode #choose-option .picture-small {
        border-color: var(--dark);
    }
}


/*-- -------------------------- -->
<---      ADD-ON         -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #add-on {
        padding: var(--sectionPadding);
    }
    @keyframes floatAnimation {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-0.6em);
        }
        100% {
            transform: translateY(0);
        }
    }
    @keyframes floatAnimation2 {
        0% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-1em);
        }
        100% {
            transform: translateY(0);
        }
    }
    #add-on .container {
        width: 100%;
        /* changes to 1280px at desktop */
        max-width: 34.375em;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #add-on .content {
        /* set text align to left if content needs to be left aligned */
        text-align: left;
        width: 100%;
        max-width: 33.875rem;
        display: flex;
        flex-direction: column;
        /* centers content horizontally, set to flex-start to left align */
        align-items: flex-start;
    }
    #add-on .title {
        margin-bottom: 1rem;
    }
    #add-on .color {
        color: var(--secondary);
    }
    #add-on .text {
        margin-bottom: 1rem;
    }
    #add-on .text:last-of-type {
        margin-bottom: 2rem;
    }
    #add-on .ul {
        margin-bottom: 1rem;
    }
    #add-on .image-group {
        /* this is how we can scale entire groups using ems.  Font size is tied to the view width, so as the screen gets bigger, so does the font size, and this scales up and down the elements with em values.  Then it stops growing once the font size reaches the defined value of 1em (16px which is default on the html element). Font size changes at desktop */
        font-size: min(2.35vw, 0.8em);
        /* all values are done in ems, not rems, so we can scale the group with a font size min/max equation */
        width: 35.4375em;
        height: 37.75em;
        /* pushes up by the same value the blue box is absolutely positioned up.  This makes sure the space above the section is consistent and matches all other surrounding sections spacing top and bottom */
        margin-top: 3.875em;
        position: relative;
        /* pushes it to the top in the first position */
        order: -1;
        /* pushed half the distance that the blue box is positioned left (-62px).  This is so it can be centered in the container and align with the content below it. */
        transform: translateX(1.9375em);
    }
    #add-on .image-group:before {
        /* blue box */
        content: "";
        width: 11.625em;
        height: 10.0625em;
        background: var(--primary);
        opacity: 1;
        position: absolute;
        display: block;
        top: -3.875em;
        left: -3.875em;
        animation-name: floatAnimation;
        animation-duration: 6s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
    #add-on .picture {
        display: block;
        position: absolute;
    }
    #add-on .picture img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        /* makes it act like a background image */
        object-fit: cover;
        border-radius: 1rem;
    }
    #add-on .picture-large {
        width: 29.75em;
        height: 33.875em;
        top: 0;
        left: 0;
        border-radius: 1rem;
    }
    #add-on .picture-small {
        width: 16.25em;
        height: 14.0625em;
        border: 0.625em solid var(--primaryDark);
        border-radius: 1rem;
        background-color: var(--primaryDark);
        bottom: 0;
        right: 0;
        animation-name: floatAnimation2;
        animation-duration: 10s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
    }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
    #add-on .container {
        max-width: 80rem;
        flex-direction: row;
        justify-content: space-between;
    }
    #add-on .content {
        width: 51%;
    }
    #add-on .image-group {
        font-size: min(1.1vw, 1em);
        margin-left: 3.875em;
    }
}
/* Dark Mode */
@media only screen and (min-width: 0rem) {
    body.dark-mode #add-on .title,
    body.dark-mode #add-on .text {
        color: var(--bodyTextColorWhite);
    }
    body.dark-mode #add-on .topper {
        color: var(--secondary);
    }
    body.dark-mode #add-on .text {
        opacity: 0.8;
    }
    body.dark-mode #add-on .button-solid {
        background-color: var(--accentColor);
        color: var(--primaryLight);
        transition: color 0.3s;
    }
    body.dark-mode #add-on .button-solid:hover {
        color: var(--accentColor);
    }
    body.dark-mode #add-on .button-solid:before {
        background-color: var(--primaryLight);
    }
    body.dark-mode #add-on .image-group:before {
        opacity: 0.3;
    }
    body.dark-mode #add-on .picture-small {
        border-color: var(--accentColor);
        background-color: var(--accentColor);
    }
}

/************** QUESTIONS  ***************/
/*****************************************/
/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
    #questions {
        padding: var(--sectionPadding);
        position: relative;
        background-color: #FFF;
    }
    #questions .container {
        width: 100%;
        max-width: 80rem;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 48px - 64px */
        gap: clamp(3rem, 6vw, 4rem);
    }
    #questions .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;
    }

    #questions .title {
        color: var(--textBlack);
    }
    #questions .text {
        margin-bottom: 1rem;
        color: var(--textBlack);
        opacity: 0.9;
    }
    #questions .text:last-of-type {
        margin-bottom: 2rem;
    }
    #button-box-838 {
    width: 100%;
    max-width: calc(39.375rem);
    margin-bottom: calc(2rem);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: calc(1.5rem);
}
    #button-box-838 .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(--accentColor);
        border-radius: 0.25rem;
        display: inline-block;
        position: relative;
        z-index: 1;
        /* prevents padding from adding to the width */
        box-sizing: border-box;
    }
    #button-box-838 .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;
    }
    #button-box-838 .cs-button-solid:hover:before {
        width: 100%;
    }
    #button-box-838 .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;
    }
    #button-box-838 .cs-button-transparent:hover {
        background-color: var(--primary);
        color: #fff;
    }
    /* Dark Mode */
    body.dark-mode #button-box-838 .cs-button-transparent {
        color: var(--textBlack);
    }
    body.dark-mode #questions .title,
    body.dark-mode #questions .text {
        color: var(--textLight);
    }
}


/*************** DARK MODE ***************/
/*****************************************/
@media only screen and (min-width: 0em) {
    body.dark-mode #intro,
    body.dark-mode #pricing,
    body.dark-mode #questions {
        background-color: var(--dark);
    }
    body.dark-mode #intro .title, 
    body.dark-mode #intro .text,
    body.dark-mode #intro .h2{
        color: var(--primaryLight);
    }
    body.dark-mode #intro .picture {
        background-color: var(--dark);
        border: none;
    }
    body.dark-mode #pricing .topper,
    body.dark-mode #choose-plan .topper,
    body.dark-mode #choose-option .topper,
    body.dark-mode #add-on .topper {
        color: var(--darkModeAccent);
        font-weight: 900
        
    }
    body.dark-mode #pricing .toggle-group,
    body.dark-mode #pricing .info {
        background-color: var(--medium);
    }
    body.dark-mode #option1,
    body.dark-mode #option2 {
        color: var(--primaryLight);
    }
    body.dark-mode #pricing .item .flex {
        background-color: var(--dark);
        border-color: var(--accentColor);
    }
    body.dark-mode #pricing .flex .package,
    body.dark-mode #pricing .flex .price,
    body.dark-mode #pricing .flex .duration,
    body.dark-mode #pricing .ul .li,
    body.dark-mode #pricing .ul .li:first-child {
        color: var(--primaryLight);
    }
    body.dark-mode #pricing .li-img {
        filter: brightness(0) invert(1);
    }

    
    
}