﻿:root {
    --plan-border-bolor: #BA8E87;
    --novela-color-text-pink: #EB008B;
    --plan-background-color: #FCE9DF;
    --plan-body-background: #FFFFFF;
    --plan-footer-background: #EDE6DE;
    --plan-footer-free-background: #E1BAB3;
    --font-color: #462D23;
}

.landing-container{
    margin-top: 0;
}

img {
    user-select: none;
    -webkit-user-drag: none;
}

.carousel-container.banner-section {
    position: relative;
}

.landing-content-step{
    display: flex;
    flex-direction: column;
    margin-top: 35px;
    gap: 56px;
}

.landing-title-image {
    background-image: url('/website/assets/images/landing/text-1.svg');
    max-width: 1197px;
    margin: auto;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 78px;
}

.join-step-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.landing-join-image{
    max-width: 504px;
    max-height: 207px;
    width: 100%;
}


.landing-section {
    margin: 85px 0 47px 0;
}

.product-member-bundle-header {
    background-image: url('/website/assets/images/landing/text-2.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 360px;
    width: 100%;
}

.recommended-products .card-body .recommend-product-list {
    gap: 12px;
}

.color-pink{
    background-color: var(--novela-color-text-pink) !important;
}

.product-control-prev.product-carousel, .product-control-next.product-carousel,
.product-control-prev:hover .product-carousel, .product-control-next:hover .product-carousel {
    background: unset;
}

.product-control-next.product-carousel{
    right:10px;
}

.product-control-prev.product-carousel{
    left: 10px;
}

.product-control-prev.product-carousel .feather, .product-control-next.product-carousel .feather {
    font-size: 60px !important;
}


.product-member-bundle-container {
    display: flex;
    flex-direction: column;
}

.membership-plans-wrapper {
    justify-content: space-between;
}


.landing-member-plan {
    padding: 20px 19px 215px;
    border: 8px solid var(--plan-border-bolor);
    display: inline-block;
    max-width: 477px;
    min-width: 477px;
    margin: 40px 0;
    border-radius: 38px;
    height: 1020px;
    position: relative;
    user-select: none;
    -webkit-user-drag: none;
    background: var(--plan-body-background);
}

.member-btn {
    top: unset !important;
    bottom: -35px !important;
    border-radius: 50px !important;
    text-wrap-mode: nowrap;
    font-size: 50px !important;
    padding: 6px 35px !important;
    line-height: 50px !important;
    height: 61px !important;
}

.member-btn:hover{
    color: black;
}

.member-btn.default-color, .member-btn.member-current-btn {
    background-color: var(--plan-border-bolor);
}

.member-current-btn {
    pointer-events: none;
}

#membership-section {
    scroll-margin-top: -150px;
}

.recommend-product-list .product-list-item img {
    width: 373.58px;
    height: auto;
    aspect-ratio: 373.58/528.33;
    object-fit: contain;
}

.landing_end_text {
    display: flex;
    justify-content: center;
    margin: 0;
    font-weight: 300;
    color: var(--font-color);
    font-size: 16px;
    margin-bottom: -20px;
}


@media (max-width: 1536px) {
}

@media (max-width: 1279.98px) {
    .landing-content-step, .landing-container .recommended-products,
    #membership-section {
        padding: 0 16px;
    }

    .product-member-bundle-header {
        background-image: url('/website/assets/images/landing/text-2_small.svg');
    }
}

@media (max-width: 991.98px) {
    .carousel-container.banner-section {
        top: 80px;
    }

    .landing-content-step {
        margin: 0;
        gap: 24px;
    }

    .landing-container .recommended-products {
        margin-top: 48px;
    }

    .recommend-product-list .product-list-item img {
        width: 300px;
    }

    .header-item:not(.user-section) {
        display: none;
    }
}


@media (max-width: 767.98px) {

    .recommend-product-list .product-list-item img {
        width: 200px;
    }

    .landing-title-image {
        background-image: url('/website/assets/images/landing/text-1_small.svg');
        background-position: center;
    }

    .product-member-bundle-header {
        height: 260px;
    }

    .membership-plans-section, .cost-savings-wrapper {
        margin-top: 0 !important;
    }

    .membership-plans-wrapper{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (max-width: 550px) {
    .landing-container .recommended-products {
        margin-top: 24px;
        margin-bottom: 24px;
        margin-left: 5px;
        padding: 0;
    }

    .landing-title-image {
        padding: 0 16px;
        height: 60px;
    }

    .landing-content-step {
        padding: 0;
    }


    .product-member-bundle-header {
        height: 200px;
    }

    .recommend-product-list .product-list-item img {
        width: 144px;
    }

}



@media (max-width: 530px) {
    .member-btn {
        bottom: -30px !important;
        border-radius: 30px !important;
        text-wrap-mode: nowrap;
        font-size: 35px !important;
        padding: 2px 20px !important;
        height: fit-content !important;
        line-height: 40px !important;
    }

    .membership-plans-section{
        max-width: 100% !important;
    }
}

@media (max-width: 440px) {
    .product-member-bundle-header {
        height: 155px;
    }

    .landing-member-plan {
        margin-top: 20px;
    }

    .product-member-bundle-container{
        padding: 0 !important;
    }

    .member-btn {
        bottom: -18px !important;
        text-wrap-mode: nowrap;
        font-size: 12px !important;
        padding: 2px 11px !important;
        line-height: 20px !important;
    }

    .membership-plans-section{
        margin-bottom: 20px !important;
    }
}