@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);
@import url(https://use.typekit.net/hso1vnj.css);

.form-control:focus,
.form-control:focus:not(:focus-visible),
.mainmenu_area li a:focus:not(:focus-visible),
:focus:not(:focus-visible),
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input,
input:focus,
input:focus:not(:focus-visible),
input:focus:not(:focus-visible)+label,
select:focus,
select:focus:not(:focus-visible) {
    outline: 0
}

.container,
.sr-only,
ul {
    padding: 0
}

.promo_band,
a:active,
a:focus,
a:hover,
a:visited {
    text-decoration: none
}

.add-text-btn:hover,
.get_coupon_details,
.text-btn:hover,
a.pink_text {
    text-decoration: underline
}

:root {
    --dark: #23292d;
    --white: #fff;
    --cyan: #9ac1d7;
    --canvas: #fff8eb;
    --canvas1: #fff9ed;
    --orange: #fd546a;
    --mist: #e0ecea;
    --dark_shade_gray: #353535;
    --standstone: #e3cbb4;
    --primary_accent: #ea7234;
    --inky_blue: #123456;
    --sky: #90c2d9;
    --charcoal: #123456;
    --default_font: "Inter", sans-serif;
    --body_font: "Inter", sans-serif;
    --heading1: "gelica", sans-serif;
    --gelica: "gelica", sans-serif;
    --heading2: "gelica", sans-serif
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

input::-ms-expand,
select::-ms-expand {
    display: none
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

ul {
    list-style: none;
    margin: 0
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important
}

button:focus,
input[type=checkbox]:focus+label,
input[type=radio]:focus+label {
    outline-offset: 3px;
    border-radius: 1px
}

.plan_left_text input:focus+label {
    border: 2px solid #123456
}

.tab_focus:focus,
a:focus {
    outline-offset: 2px;
    border-radius: 1px
}

a.cta_btn_white:focus-visible,
a.primary_cta:focus-visible {
    outline-offset: 3px
}

button:focus-visible {
    outline-offset: 3px;
    border-radius: 1px
}

.primary_btn.tab_focus:focus,
.tab_focus.primary_cta:focus,
button.tab_focus:focus {
    outline-offset: 3px
}

.form-control.tab_focus:focus {
    outline-offset: 3px;
    border-radius: 1px
}

.alignright {
    float: right
}

.alignleft {
    float: left
}

.aligncenter {
    float: none;
    text-align: center
}

.hidden,
.visible-xs {
    display: none
}

body,
html {
    min-height: 100%;
    height: auto
}

body {
    font-family: var(--body_font);
    font-size: clamp(16px, 2.5vw, 18px);
    font-weight: 300;
    overflow-x: hidden;
    position: relative;
    color: var(--charcoal);
    padding: 0 !important
}

img {
    max-width: 100%
}

.heading1,
h1 {
    margin: 0 0 15px;
    font-family: var(--heading1);
    font-weight: 600
}

.heading2,
.heading3,
.heading4,
.heading5,
.heading6,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-family: var(--gelica);
    font-weight: 600
}

.default_modal .gotit_close,
.inter,
.inter-medium,
.paragraph,
.primary_cta {
    font-family: var(--body_font)
}

a.disabled,
a[disabled],
button.disabled,
button[disabled],
input[disabled] {
    cursor: no-drop
}

.inter-medium {
    font-size: 18px;
    font-weight: 500
}

.gelicalight,
.gelicareg {
    font-family: var(--gelica)
}

.gelicalight {
    font-weight: 300
}

.gelicareg {
    font-weight: 400
}

.bold_text,
strong {
    font-weight: 700
}

.pink_text {
    color: #dc7844;
    -webkit-transition: .2s;
    transition: .2s
}

a.pink_text:focus,
a.pink_text:hover {
    color: #db4a5d
}

.paragraph {
    font-size: 16px;
    font-weight: 400;
    color: var(--charcoal)
}

.wow {
    visibility: hidden
}

.content_width {
    max-width: 1920px;
    padding: 0 5%;
    width: 100%;
    margin: 0 auto
}

.header_area {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    -webkit-box-shadow: 0 0 10px -2px #999;
    box-shadow: 0 0 10px -2px #999;
    background-color: #fff
}

.primary_cta,
.primary_cta.active,
.primary_cta:active,
.primary_cta:focus,
.primary_cta:hover,
.promo_band {
    background-color: #22602E;
    color: var(--white)
}

.promo_band {
    font-size: 16px;
    padding: 10px !important;
    width: 100%;
    z-index: 9;
    margin-top: 0 !important;
    font-weight: 700;
    cursor: pointer
}

.get_coupon_details {
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    margin: 0 0 0 5px;
    font-weight: 600
}

.default_modal .gotit_close,
.orange-border-btn,
.primary_cta,
.secondary_cta,
.white_btn {
    text-align: center;
    text-decoration: none;
    display: inline-block
}

.assessment_logo {
    padding: 20px 0
}

.primary_cta,
.secondary_cta {
    padding: 14px 35px;
    font-weight: 600;
    -webkit-transition: .2s;
    text-transform: none;
    margin: 0;
    cursor: pointer
}

.add-text-btn,
.white_btn {
    font-weight: 700;
    cursor: pointer
}

.primary_cta,
.secondary_cta {
    transition: .2s;
    font-size: 18px
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 20px
}

.primary_cta {
    
    border-radius: 30px !important;
    line-height: 1.5;
    border: none;
}

.primary_cta.round-btn,
.secondary_cta.round-btn {
    border-radius: 30px !important
}

.primary_cta:hover {
    border: 1px solid transparent
}

.secondary_cta,
.secondary_cta.active,
.secondary_cta:active,
.secondary_cta:focus,
.secondary_cta:hover {
    color: #22602E !important;
    background-color: var(--white)
}

.primary_cta.disabled,
.primary_cta.disabled:focus,
.primary_cta.disabled:hover,
.primary_cta[disabled],
.primary_cta[disabled]:focus,
.primary_cta[disabled]:hover,
.secondary_cta.disabled,
.secondary_cta.disabled:focus,
.secondary_cta.disabled:hover,
.secondary_cta[disabled],
.secondary_cta[disabled]:focus,
.secondary_cta[disabled]:hover {
    opacity: .5
}

.primary_cta[disabled]{
    background-color: #91AF96;
}

.secondary_cta {
    border: 1px solid #22602E !important;
    border-radius: 3px
}

.default_modal .gotit_close,
.white_btn {
    line-height: 1.5;
    -webkit-transition: .2s
}

.secondary_cta.black_btn {
    background-color: var(--dark);
    color: var(--white)
}

.white_btn {
    background-color: var(--white);
    color: #123456;
    padding: 16px 50px;
    border: 2px solid var(--white);
    border-radius: 3px;
    text-transform: uppercase;
    transition: .2s
}

.add-text-btn,
.text-btn {
    background-color: transparent;
    padding: 0
}

.white_btn:hover {
    background-color: #e5e4e4;
    border: 2px solid #e5e4e4;
    color: #123456
}

.white_btn.active,
.white_btn:active,
.white_btn:focus {
    background-color: var(--white);
    border: 2px solid var(--white);
    color: #123456
}

.white_btn.disabled,
.white_btn.disabled:focus,
.white_btn.disabled:hover,
.white_btn[disabled],
.white_btn[disabled]:focus,
.white_btn[disabled]:hover {
    background-color: #ddd;
    border: 2px solid #ddd;
    color: #555
}

.text-btn {
    margin: 0;
    border: 0;
    color: #5180de;
    cursor: pointer
}

.add-text-btn {
    color: #db4a5d;
    font-size: 18px;
    border: 0;
    margin: 0;
    position: relative;
    z-index: 1
}

.default_modal .gotit_close,
.orange-border-btn {
    font-weight: 600;
    margin: 0;
    cursor: pointer;
    text-transform: none
}

.add-text-btn.disabled,
.add-text-btn.disabled:focus,
.add-text-btn.disabled:hover,
.add-text-btn[disabled],
.add-text-btn[disabled]:focus,
.add-text-btn[disabled]:hover {
    color: #ccc
}

.modal-open {
    overflow-x: hidden !important;
    overflow-y: auto !important
}

.discount_modal .modal-body h2 {
    font-family: var(--body_font);
    font-size: clamp(16px, 2vw, 18px);
    margin: 5px 0 15px
}

.discount_modal .modal-body h2#get_coupon_mess {
    font-family: var(--heading1);
    font-size: 28px;
    margin: 0
}

.default_modal {
    padding: 0 !important
}

.default_modal .modal-dialog {
    max-width: 625px
}

.default_modal.pdp-modal .modal-dialog {
    max-width: 1170px;
    width: 100%
}

.default_modal .modal-content {
    border: 0;
    border-radius: 0;
    background-color: var(--white)
}

.default_modal .modal-body {
    min-height: 150px;
    padding: 50px 30px 30px;
    position: relative
}

.default_modal .modal-body h3.heading3 {
    font-size: 24px
}

.default_modal .modal-body p {
    font-size: clamp(16px, 2.5vw, 18px) !important
}

.default_modal .modal-body p a {
    color: var(--dark);
    text-decoration: underline;
    font-weight: 500
}

.default_modal .modal-body h3 {
    font-size: clamp(20px, 2.5vw, 25px)
}

.default_modal button.btn-close {
    height: 42px;
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
    font-size: 18px;
    opacity: 1
}

.default_modal .modal-footer {
    border: 0;
    padding: 0 30px 20px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 15px
}

.default_modal .gotit_close {
    background-color: var(--orange);
    color: var(--white);
    padding: 14px 35px;
    border: 1px solid transparent;
    border-radius: 30px;
    transition: .2s;
    font-size: 18px;
    min-width: 168px
}

#alert_message_model .alert_message {
    max-width: 430px;
    margin: 0 auto 15px
}

.byop_action_cta .cart_link {
    color: #5180de;
    text-decoration: underline
}

.orange-border-btn {
    border-color: 1px solid var(--orange);
    color: var(--orange);
    padding: 15px 35px;
    background: var(--canvas);
    font-size: 16px;
    border-radius: 3px;
    -webkit-transition: .2s;
    transition: .2s;
    background-color: var(--white)
}

.orange-border-btn:hover {
    background-color: var(--white);
    color: var(--orange)
}

.orange-border-btn.round-btn {
    border-radius: 30px !important;
    padding: 12px 50px !important
}

#discountModal .cta-sec {
    gap: 20px
}

@media screen and (max-width:1680px) {

    .content_width,
    .header_area .container-fluid {
        padding: 0 5%
    }
}

@media only screen and (min-width:1201px) and (max-width:1680px) {
    .container {
        padding: 0 15px
    }
}

@media only screen and (min-width:992px) and (max-width:1200px) {
    .container {
        padding: 0 15px
    }
}

@media only screen and (min-width:768px) and (max-width:991px) {

    .container,
    .content_width,
    .header_area .container-fluid {
        padding: 0 15px
    }
}

@media only screen and (max-width:767px) {
    .promo_band {
        font-size: 14px
    }

    .header_area {
        height: 65px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

    .container,
    .content_width,
    .header_area .container-fluid {
        padding: 0 15px
    }

    .header_area .container-fluid {
        grid-template-columns: 40px auto 40px
    }

    .hidden-xs,
    .rwd-line {
        display: none
    }

    .visible-xs {
        display: block
    }

    .primary_cta {
        padding: 15px 28px;
        min-width: 100px
    }

    .secondary_cta {
        padding: 14px 25px;
        min-width: 100px
    }

    .assessment_logo {
        padding: 15px 0
    }

    .assessment_logo .vitamin-packs-logo img {
        max-width: 150px;
        height: 33px
    }

    .secondary_cta.round-btn {
        padding: 11px 40px
    }

    .primary_cta.round-btn {
        padding: 12px 40px
    }

    .add-text-btn {
        font-size: 15px
    }

    .default_modal button.btn-close {
        font-size: 14px !important
    }

    #discountModal .cta-sec {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        max-width: 270px;
        margin: 0 auto
    }

    .secondary_cta.black_btn {
        padding: 13px 40px;
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
        display: block
    }
}