/** Shopify CDN: Minification failed

Line 3420:0 Unexpected ","

**/
@font-face {
    font-family: "PPMori";
    src: url("{{ 'PPMori-Extralight.woff' | asset_url }}") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "PPMori";
    src: url("{{ 'PPMori-Regular.woff' | asset_url }}") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "PPMori";
    src: url("{{ 'PPMori-SemiBold.woff' | asset_url }}") format("woff");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "PPMori";
    src: url("{{ 'PPMori-Extralight.woff' | asset_url }}") format("woff");
    font-weight: 600;
    font-style: normal;
}

:root {
    --color-dark-brown: #4c4139;
    --color-dark-border: #4c413940;
    --color-text-70opacity: #4c4139b2;
    --color-light-beige: #efede9;
    --color-blue: #4f92ee;
    --color-lime-yellow: #e9ff45;
    --radius-none: 0;
    --radius-btn: 30px;
    --radius-circle: 50%;
    --padding-btn-theme: 14px 30px;
    --section-padding: 80px 0px;
    --mobile-padding: 30px 0px;
    --mobile-section-padding: 50px 0px;
    --btn-style-4: #fff;
}

div {
    transition: all ease 0.5s;
}

body {
    font-family: "PPMori", sans-serif;
    width: 100%;
    height: 100%;
}

p {
    margin-bottom: 0px;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

ul {
    padding: 0;
    margin: 0;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-internal-autofill-previewed {
    -webkit-text-fill-color: #000;
    /* your desired text color */
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    /* background override */
    transition: background-color 5000s ease-in-out 0s;
    /* trick to delay autofill color */
}

:focus-visible {
    outline: -webkit-focus-ring-color auto 0px;
}

body,
.header-container,
header:before,
header {
    background: #f5f4f1;
}


.step-wrapper {
    max-width: 100%;
    background: #efede9;
    background: #f5f4f1;
    position: relative;
    min-height: 100vh;
    overflow: auto;
    padding-top: 30px;
    margin-top: 9.5vw;
}

.intro-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-in-out;
    opacity: 1;
    position: absolute;
    background-color: #efede9;
    width: 100%;
    z-index: 9;
    top: 50%;
    transform: translateY(-59%);
    overflow: hidden;
    height: 100%;
}

.intro-screen.hide {
    opacity: 0;
    pointer-events: none;
}


.intro-screen h1 {
    color: #4C4139;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 61px;
    margin-bottom: 40px;
    max-width: 82%;
    margin-left: auto;
    margin-right: auto;
}

.intro-screen p {
    margin-bottom: 47px;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.intro-screen button {
    padding: 24px 40px;
    color: #FFF;
    border-radius: 18px;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    height: max-content;
    min-width: max-content;
    background: #4c4139;
    outline: none;
    border: 0;
}

.intro-screen .center {
    width: 975px;
    margin: auto;
    text-align: center;
}

.btn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-header .btn-theme {
    padding: 10px 17px;
    font-size: 14px;
    color: white;
    background-color: #4c4139;
}


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

    .intro-screen {
        height: 100%;
    }

    .intro-screen h1 {
        font-size: 6.3vw;
        line-height: 120%;
        margin-bottom: 5.25vw;
        font-weight: bold;
    }

    .intro-screen p {
        font-size: 4.2vw;
        line-height: 140%;
        text-align: center;
        margin-bottom: 0;
    }

    .intro-screen button {
        margin-top: 0;
        font-size: 4.2vw;
        width: 100%;
        padding: 3.8vw 0;
    }

    .intro-screen .center {
        padding: 8vw 6.3vw 6.3vw;
        width: 100%;
    }
    .btn-header .btn-theme {
        padding: 2.13vw 8.66px;
        font-size: 3.2vw;
    }
}


.user-step-contet {
    height: calc(100vh - 120px);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 55px;
    gap: 30px;
}

.user-test-step .story-info:before {
    opacity: 0.25;
    background: var(--Dark, #4c4139);
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 20px;
    height: 1px;
    width: 96%;
    opacity: 0.25;
    background: var(--Dark, #4c4139);
}

.user-test-step {
    display: none;
    position: relative;
}

.user-test-step.active {
    display: block;
}

.button-top-head .logo {
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}

.button-top-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.user-test-step .content-box-step h2 {
    color: #4c4139;
    text-align: center;
    font-family: PP Mori;
    font-size: 42px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.72px;
    margin-bottom: 0px;
}

.user-test-step .content-box-step p {
    margin: 32px 0 40px;
    color: var(--Dark, #4c4139);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity: 0.8;
}

.video-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: #fff;
    border-radius: 20px;
    padding: 6px 12px;
    width: 446px;
    margin: 30px auto 0;
    cursor: pointer;
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1));
}

.video-button img {
    border-radius: 30px;
    width: 75px;
    height: 46px;
    object-fit: cover;
}

.video-button span {
    color: var(--Dark, #4c4139);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: inline-block;
    margin-left: 10px;
}

.video-button .play {
    color: #fff;
    font-weight: bold;
    border-radius: 30px;
    background: var(--Blue, #4f92ee);
    display: flex;
    width: 75px;
    height: 46px;
    padding: 20px 24px 19px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.video-button .play img {
    width: auto;
    height: auto;
    filter: brightness(0) invert(1);
    border-radius: 0px;
}

.close-btn {
    cursor: pointer;
    font-size: 18px;
    z-index: 999;
}

.content-box-step .pair-btn,
.content-box-step .filter-results {
    justify-content: center;
}

.video-container {
    padding: 15px;
    position: relative;
}

.video-container video {
    width: 100%;
    border-radius: 10px;
}

.close-video {
    position: absolute;
    right: 10px;
    top: 10px;
    background: #ccc;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 16px;
    cursor: pointer;
}

.bottom-sheet {
    position: fixed;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    width: 784px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    transition: bottom 0.4s ease;
    z-index: 1000;
}

.bottom-sheet.active {
    bottom: 0; /* ✅ Slide into view */
}

.sheet-content {
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;
}

body.modal-open .step-wrapper {
    background: rgba(224, 220, 213, 0.4);
    filter: blur(10px);
    transition: filter 0.3s ease;
}

.content-box-step {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.step-wrapper .form-group,
.save-results .form-group {
    background: var(--White, #fff);
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.1));
    border-radius: 30px;
    padding: 6px 30px;
    height: 58px;
}

.step-wrapper .form-group .input-box,
.save-results .form-group .input-box {
    margin: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.step-wrapper .form-group .btn-input,
.save-results .form-group .btn-input {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 30px;
    background: var(--Blue, #4f92ee);
    border: none;
    display: flex;
    width: 75px;
    height: 46px;
    padding: 20px 24px 19px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.step-wrapper .btn-input img,
.save-results .btn-input img {
    filter: brightness(0) invert(1);
}

.zone-radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.zone-type-readio {
    display: none;
}

.zone-type-readio + label {
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    display: flex;
    padding: 13px 32px 11px 32px;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    color: var(--Dark, #4c4139);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    border-radius: 25.5px;
    background: #fff;
    box-shadow: 0 0px 6px 0 rgb(75 65 58 / 9%);
}

.zone-type-readio:checked + label {
    background: var(--Dark, #4c4139);
    color: #fff;
}

.user-prolm-video {
    width: 680px;
    height: 356px;
    margin: 0 auto;
    position: relative;
}

.video-next-bnt {
    position: absolute;
    bottom: 10px;
    border: none;
    right: 10px;
}

.user-prolm-video video {
    width: 680px;
    height: 356px;
    position: relative;
}

.video-thumbnail {
    position: relative;
    cursor: pointer;
}

.video-thumbnail img {
    display: block;
    width: 100%;
    border-radius: 10px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    padding: 12px 20px;
    font-size: 24px;
    font-weight: bold;
    border-radius: 30px;
    background: var(--Blue, #4f92ee);
}

.play-button img {
    border-radius: 0px;
    filter: brightness(0) invert(1);
}

.button-top-head span {
    cursor: pointer;
}

.content-box-step span {
    color: var(--Dark, #4c4139);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    opacity: 0.8;
}

.factors-box-card {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px;
}

.factors-box-card {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* MAIN BOX STYLE */
.factors-checkbox {
    position: relative;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    align-items: center;
    background: #f8f8f8;
    border-radius: 8px;
    padding: 40px 50px;
    transition: 0.3s ease;
    flex-direction: column;
    color: var(--Dark, #4c4139);
    border: 2px solid var(--Blue, #f8f8f8);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    gap: 40px;
    flex: 1;
}

.animate-box:before,
.animate-box:after,
.btn-theme {
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    text-align: center;
    background-color: var(--color-light-beige);
    color: var(--color-dark-brown);
    border-radius: var(--radius-btn);
    padding: var(--padding-btn-theme);
    border: 0;
    transition: background-color 0.1s ease-in;
}

.results-page-main.blue .btn-theme,
button.blue,
.blue-btns .pair-btn .btn-theme,
.blue-btns.pair-btn .btn-theme,
.blue-btns .filter-results .btn-theme,
.blue-btns.filter-results .btn-theme,
.bluish .animate-box:before,
.bluish .animate-box:after,
.bluish .animate-box span,
.bluish .btn-theme {
    background-color: #4f92ee !important;
}

.pair-btn {
    position: relative;
}

.pair-btn * {
    cursor: pointer;
}

.results-page-main {
    padding-bottom: 30px;
}

.results-page-main .pair-btn {
    margin-top: 20px;
}

.animate-box {
    -webkit-filter: url("#fancy-goo");
    filter: url("#fancy-goo");
    position: absolute;
    height: 100%;
    width: 400px;
    top: calc(50%);
    /*top: 0;*/
    left: 50%;
    overflow: visible;
    transform: translate(-50%, -50%);

}

#svg {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
}


.animate-box:before,
.animate-box:after {
    content: '';
    display: block;
    position: absolute !important;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #4c4139;
    color: white;
    height: 48px;
    transition: transform 1s ease-in-out, background-color 1s ease-in-out 0.7s;
}


.pair-btn .btn-theme {
    transition: background-color 1s ease-in-out 0.7s;

}


.animate-box:before {
    min-width: 257px;
    transform: translate(calc(-50% - 40px), -50%);

}

.safari .animate-box:before {
    left: 7.8%;
}

.animate-box:after {
    min-width: 67px;
    transform: translate(calc(-50% + 133px), -50%);
}


.animate-box span {
    position: absolute;
    margin: 0;
    background-color: #4b413a;
    width: 52px;
    height: 50px;
    right: 14%;
    top: 50%;
    will-change: height;
    transform: translateY(-50%) scale(0);
    border-radius: 9999px;
}

.animate-box span:before {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    top: -100%;
    content: '';
    display: block;
}

.b-footer .animate-box span {
    right: 20%;
}


.pair-btn .btn-theme .i-logo {
    left: 57%;
    transition: scale 0.7s ease-in-out 0.2s, background-color 0.7s ease-in-out 0.7s !important;
    scale: 0;

    opacity: 1 !important;
}

.pair-btn .btn-theme span {
    line-height: 0 !important;
    color: white;
    opacity: 1;
    display: inline-block !important;
    transition: transform 0.7s ease-in-out 0.5s, background-color 0.7s ease-in-out 0.7s !important;
}

.pair-btn .i-check.rotated {
    transform: translateX(0) rotate(180deg) scale(1);
    transition: transform 0.7s ease-in-out 0.5s, background-color 0.7s ease-in-out 0.7s;
}

.pair-btn .i-check {
    display: block;
    margin: 0;
    transform: translateX(0) scale(1);
    transition: transform 0.7s ease-in-out 0.5s, background-color 0.7s ease-in-out 0.7s;
}

.safari .animate-box:before,
.safari .animate-box:after {
    transform: translateY(-50%);
    transition: left 1s ease-in-out, right 1s ease-in-out, background-color 1s ease-in-out 0.7s;
}

.safari .animate-box:after {
    left: 74.9%;
}

.safari .animate-box span {
    height: 0;
    right: 20% !important;
    transform: translateY(-50%) scale(1.2);
}


.is-merging,
.is-merging * {
    pointer-events: none !important;
    cursor: default;
}

.is-merging .animate-box:before {
    transform: translate(calc(-50% - 13px), -50%);
    background-color: #4F92EE;
}

.is-merging .animate-box:after {
    transform: translate(calc(-50% + 114px), -50%);
    background-color: #4F92EE;
}

.is-merging .animate-box span {
    animation: pop 1.5s ease-in-out;
    transition: background-color 0.7s ease-in-out 0.7s !important;
    background-color: #4F92EE;
}

.is-merging .btn-theme span {
    transform: translateX(41px) scale(0);
    transition: transform 0.7s ease-in-out 0.2s, background-color 0.7s ease-in-out 0.7s !important;
}

.is-merging .btn-theme .i-logo {
    scale: 1;
    transition: scale 0.7s ease-in-out 0.5s;
}

.is-merging .i-check.rotated {
    transform: translateX(-131px) rotate(180deg) scale(0);
    transition: transform 0.7s ease-in-out 0.2s;
}

.is-merging .i-check {
    transform: translateX(-131px) scale(0);
    transition: transform 0.7s ease-in-out 0.2s;
}

.is-merging .btn-theme {
    background-color: #4F92EE !important;
}

.is-merging .animate-box {
    background-color: transparent !important;
}


.safari.is-merging .animate-box:before {
    left: 14.6%;
    transform: translateY(-50%);
}

.safari.is-merging .animate-box:after {
    left: 68.94%;
    transform: translateY(-50%);
}

.safari.is-merging .animate-box span {
    animation: popHeight 1.5s ease-in-out;
}


@keyframes pop {
    0% {
        transform: translateY(-50%) scale(0);
    }
    50% {
        transform: translateY(-50%) scale(1.2);
    }
    100% {
        transform: translateY(-50%) scale(0);
    }
}

@keyframes pop2 {
    0% {
        transform: translateY(-50%) scale3d(0, 0, 0);
    }
    50% {
        transform: translateY(-50%) scale3d(1.2, 1.2, 1.2);
    }
    100% {
        transform: translateY(-50%) scale3d(1.2, 1.2, 1.2);
    }
}

@keyframes popHeight {
    0% {
        height: 0;
    }
    50% {
        height: 50px;
    }
    100% {
        height: 0
    }
}

.pair-btn .btn-theme {
    background-color: #4c4139;
    color: white;
}


.btn-wrapper-theme {
    display: inline-flex;
    align-items: center;
}

.btn-arrow {
    font-size: 16px;
    font-weight: 500;
    line-height: 100%;
    background-color: var(--color-light-beige);
    color: var(--color-dark-brown);
    border-radius: var(--radius-btn);
    padding: var(--padding-btn-theme);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.arrow-btn {
    background-color: var(--color-light-beige);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    padding: 13px 27px;
    border-radius: 30px;
    cursor: pointer;
}

.btn-wrapper-theme:hover .btn-arrow {
    background-color: var(--color-lime-yellow);
    transform: translateX(2px);
}

.btn-wrapper-theme:hover .arrow-btn {
    background-color: var(--color-lime-yellow);
    color: #4c4139;
}

.icon-text-box {
    border-top: 1px solid var(--color-dark-border);
    padding: 30px 0px;
}

.icon-text-box p {
    font-size: 16px;
    font-weight: 400;
    margin-top: 20px;
    color: var(--color-dark-brown);
}

.btn-style-3 {
    background: var(--color-dark-brown);
    color: #fff;
}

.pair-btn,
.filter-results {
    justify-content: center;
    display: flex;
    align-items: center;
}


/*.filter-results button {*/
/*    transition: background-color 1s ease-in, border-radius 0.7s ease-in;*/
/*    position: relative;*/

/*}*/

/*.b-sheet-container .filter-results .icon-btn {*/
/*    padding: 3.76vw 7.34vw 3.6vw !important;*/
/*}*/

/*.filter-results .icon-btn:before {*/
/*    content: '';*/
/*    display: block;*/
/*    position: absolute;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    background-color: inherit;*/
/*    !*transition: all 0.3s cubic-bezier(.68, -0.55, .27, 1.55);*!*/
/*    !* background-color: #4b413a; *!*/
/*    margin-left: -75px;*/
/*    height: 0px;*/
/*    margin-top: -14px;*/
/*    width: 80px;*/
/*    z-index: 0;*/
/*    border-radius: 129%;*/
/*    !*background-color: white;*!*/
/*    !*opacity: 0;*!*/
/*    top: 50%;*/
/*    transform: translateY(-31%);*/
/*}*/

.an .icon-btn:before {
    animation: gooey 0.8s linear;
}

.an button:not(.icon-btn) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.an .icon-btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

@keyframes gooey {
    0% {
        height: 0px;
    }
    50% {
        height: 100px;
    }
    100% {
        height: 0px;
    }
}


.btn-style-3 img {
    filter: brightness(0) invert(1);
}

.selected-probl {
    margin-top: 30px;
}

.step-progress {
    width: 100%;
    padding: 12px 24px;
    max-width: 550px;
    margin: 0 auto;
    /* text-align: center; */
}

.main-container {
    padding-top: 140px;
}

.step-line {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.step-line span {
    flex: 1;
    height: 2px;
    background: #bbb7ba;
    background-color: #4f92ee3b;
    border-radius: 2px;
    transition: background .3s ease;
    max-width: 30px;
    /* margin: auto; */
}

.step-line span.active {
    background: #4C4139;
    background-color: #4f92ee;
}

.semi-progress-wrapper {
    position: relative;
    width: 220px;
    margin: 30px auto;
}

.semi-progress {
    width: 100%;
    display: block;
}

.progress-card {
    width: 260px;
    margin: 0px auto 60px auto;
    text-align: center;
    position: relative;
}

.progress-text {
    position: absolute;
    top: 65px;
    width: 100%;
}

.user-test-step .content-box-step .progress-text p {
    margin-top: 6px !important;
    color: #4c4139;
    text-align: center;
    font-family: PP Mori;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -0.32px;
}

.progress-results-box .progress-card {
    width: 100%;
    margin: 0 !important;
    text-align: center;
    position: relative;
}

.progress-results-box .progress-text {
    top: auto;
    bottom: 10%;
}

.progress-results-box .progress-text h2 {
    color: #4c4139;
    text-align: center;
    font-family: PP Mori;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 56px;
    margin-bottom: 0px;
}

.progress-results-box .progress-text p {
    color: #4c4139;
    text-align: center;
    font-family: PP Mori;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: -0.32px;
}

.increase_dice {
    background: #efede9;
    padding: 16px 23px;
    border-radius: 4px;
    border: 1px solid rgba(76, 65, 57, 0.15);
    border-left: 3px solid #4f92ee;
    color: var(--Dark, #4c4139);
    font-family: PP Mori;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 27px */
}

.status-wrapper {
    display: flex;
    gap: 18px;
    align-items: center;
}

/* Common dot */
.status-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #4b4036;
    position: relative;
    overflow: hidden;
}

/* Half filled */
.status-dot.half::before {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    background: #4b4036;
    left: 0;
    top: 0;
    border-radius: 50% 0 0 50%;
}

/* Full filled */
.status-dot.full {
    background: #4b4036;
}

/* Empty */
.status-dot.empty {
    background: transparent;
}

.results_status {
    border-radius: 4px;
    background: #fff;
    min-width: 343px;
    padding: 20px;
    margin-bottom: 16px;
}

.results_status h5 {
    color: #4c4139;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
    margin-bottom: 26px;
    text-align: left;
}

.results_status .positive {
    display: inline-block;
    border-radius: 20px;
    border: 2px solid #ff7e83;
    background: #ff7e83;
    padding: 5px 16px;
    color: var(--Dark, #4c4139);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
}

.results_status .negative {
    color: var(--Dark, #4c4139);
    padding: 0;
    font-size: 12px;
    border: 2px solid white;
    display: block;
    border-radius: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 166.667% */
    text-transform: uppercase;
}

.your-situation {
    background: #4c4139;
    padding: 20px;
    margin-top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.results_status:last-child {
    margin-bottom: 0px;
}

.your-situation h6 {
    color: var(--White, #fff);
    font-family: PP Mori;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    text-transform: uppercase;
}

span.zone-category {
    font-size: 22px;
}

.your-situation p {
    color: var(--White, #fff);
    font-family: PP Mori;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; /* 30px */
}

.results-page-main {
    max-width: 858px;
    margin: 0 auto;

}

.progress-results-box.flex {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex: 1;
}

.head-top-text {
    color: var(--Dark, #4C4139);
    text-align: center;
    font-family: PP Mori;
    font-size: 29px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    flex: 1;
    padding-right: 30px;
}

.results-page-inner {
    display: flex;
    gap: 60px;
    height: 100%;
}

.progress-results-right {
    min-height: 100%;
    flex: 1;
}

.treatment-box {
    display: flex;
    gap: 20px;
    flex-direction: row-reverse;
    /* align-items: self-start; */
}

.your-results-right {
    background: #fff;
    padding: 20px 20px 47px;
}

.your-results-right span {
    color: var(--Dark, #4C4139);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 166.667% */
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 24px;
}

.your-results-right p {
    color: var(--Dark, #4C4139);
    font-family: 'PP Mori';
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
}

.your-protocol h4 {
    color: #4C4139;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 28.8px */
}

.your-protocol {
    margin-top: 30px;
}

.your-protocol p {
    border-radius: 4px;
    border: 1px solid rgba(76, 65, 57, 0.15);
    background: #FFF;
    border-left: 3px solid #4F92EE;
    padding: 16px;
    color: var(--Dark, #4C4139);
    font-family: PP Mori;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 150%; /* 24px */
}

.img-contet {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    text-align: center;
    border-radius: 4px;
    background: rgba(76, 65, 57, 0.30);
    backdrop-filter: blur(25px);
    padding: 30px;
}

.treatment-img {
    position: relative;
    min-height: 100%;
}

.treatment-img img {
    height: 100%;
    object-fit: cover;
}

.img-contet span {
    color: var(--White, #FFF);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 166.667% */
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 18px;
}

.img-contet h6 {
    color: #FFF;
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 28.8px */
}

.section {
    margin-bottom: 30px;
}

/* Product List */
.product-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-item {
    display: flex;
    gap: 26px;
}

.product-left {
    display: flex;
    align-items: center;
}

.product-left img {
    width: 140px;
    height: 140px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 8px;
}

.product-info {
    display: flex;
    flex-direction: column;
    padding-right: 105px;
}


.prod-img-left {
    position: relative;
}

.prod-img-left .must-badge {
    padding: 7px 10px 5px;
    display: inline-block;
    border-radius: 30px;
    background: var(--Lime, #E9FF45);
    color: var(--Dark, #4C4139);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1;
    text-transform: uppercase;
    width: max-content;
    position: absolute;
    top: 8px;
    left: 8px;
}

.product-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
}

.product-btn3 {
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
}

.added-btn {
    border-radius: 20px;
    background: #EFEDE9 !important;
    display: inline-flex;
    height: 40px;
    padding: 20px 20px 20px 16px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: var(--Dark, #4C4139);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
}

.added-btn3 {
    border-radius: 20px;
    background: #EFEDE9;
    display: inline-flex;
    height: 40px;
    padding: 20px 20px 20px 16px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: var(--Dark, #4C4139);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
}

.product-btn2 {
    padding: 6px 14px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
}

.added-btn2 {
    border-radius: 20px;
    background: #EFEDE9;
    display: inline-flex;
    height: 40px;
    padding: 20px 20px 20px 16px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    color: var(--Dark, #4C4139);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
}

.product-item .info-icon-list {
    align-self: flex-start; /* last div ko top align */
}

.getting-started .stepper {
    position: relative;
    padding-left: 30px;
}

.getting-started .stepper::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 1px;
    border: 1px dashed;
    border-color: rgba(76, 65, 57, 0.20);
}

.getting-started .step {
    position: relative;
    padding: 20px 24px;
    margin-bottom: 20px;
    cursor: pointer;
    border-radius: 4px;
    background: #FFF;
}

.getting-started .step:last-child {
    margin-bottom: 0;
}

.getting-started .step-marker {
    position: absolute;
    left: -3%;
    top: 0;
    width: 14px;
    height: 14px;
    background: #4c413a;
    border: 4px solid #fff;
    border-radius: 50%;
    z-index: 1;
}

.getting-started .step-header {
    color: var(--Dark, #4C4139);
    font-family: PP Mori;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.getting-started .step-description {
    margin-top: 10px;
    color: var(--Dark, #4C4139);
    font-family: PP Mori;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-transform: uppercase;
    display: none;
}

.getting-started .step.active .step-description {
    display: block;
}

.getting-started .step.active .step-marker {
    background: #4c413a;
}

.getting-started .step::before {
    content: "";
    position: absolute;
    left: -18px; /* dashed line ke upar align */
    top: 0;
    height: 122%;
    width: 2px;
    background: transparent;
}

/* jab step active ho */
.getting-started .step.active::before {
    background: #4c413a; /* active color */
}

.getting-started .step::before {
    transition: background 0.3s ease;
}

.product-info strong {
    overflow: hidden;
    color: var(--Dark, #4C4139);
    text-overflow: ellipsis;
    font-family: PP Mori;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%; /* 24px */
    margin-bottom: 8px;
}

.product-info span {
    color: var(--Dark, #4C4139);
    font-family: PP Mori;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}


.product-info p {
    font-size: 15px;
    margin-top: 5px;
    margin-bottom: 10px;
    opacity: 0.6;
}

.product-btn.add-btn {
    border-radius: 20px;
    background: var(--Blue, #4F92EE);
    color: var(--White, #FFF);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
    position: relative;
    padding: 9px 22px;
}


.product-btn2.add-btn2 {
    border-radius: 20px;
    background: var(--Blue, #4F92EE);
    color: var(--White, #FFF);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
    position: relative;
    padding: 10px 25px 8px;
}

.product-btn3.add-btn3 {
    border-radius: 20px;
    background: var(--Blue, #4F92EE);
    color: var(--White, #FFF);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
    position: relative;
    padding: 10px 25px 8px;
}

.product-btn2.add-btn2.add-all-btn span {
    color: #fff;
}

.product-btn2.add-btn2.add-all-btn {
    color: #fff !important;
    background: var(--Blue, #4F92EE);
    border: 0;
    padding: 9px 14px;
    font-size: 17px;
    border-radius: 10px;
}

.product-btn3.add-btn3.add-all-btn3 {
    color: #fff !important;
    background: var(--Blue, #4F92EE);
    border: 0;
    padding: 9px 14px;
    font-size: 17px;
    border-radius: 10px;
}

button.add-all-btn3 {
    color: #fff !important;
}

.product-btn3.add-btn3.add-all-btn3 span {
    color: #fff;
}

.section.getting-started h2 {
    color: #4C4139;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    margin-bottom: 20px;
}

.content-box-step .filter-results span {
    opacity: 1;
}

#step-content input {
    border-radius: 8px;
    border: 1px solid #DAD1C2;
    background: #fff;
    padding: 10px 18px;
    color: #4c4139;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    margin-top: 20px;
}

#step-content {
    position: absolute;
    max-width: 600px;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    top: 45%;
}

#step-content .next-btn-cms {
    background: var(--color-dark-brown);
    color: #fff;
    padding: 11px 20px;
    border: none;
    border-radius: 12px;
}

.analyzing-data {
    display: flex;
    justify-content: center;
    flex-direction: column;

}

.analyzing-data img {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.analyzing-data h4 {
    color: var(--Dark, #4c4139);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 135%;
    text-transform: uppercase;
    margin-top: 10px;
}


.intro-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-in-out;
    background: #f5f4f1;
    opacity: 1;
    position: absolute;
    width: 100%;
    z-index: 9;
    top: 50%;
    transform: translateY(-59%);
    overflow: hidden;
}

.intro-screen.hide {
    opacity: 0;
    pointer-events: none;
}


.intro-screen h1 {
    color: #4C4139;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 61px;
    margin-bottom: 40px;
    max-width: 82%;
    margin-left: auto;
    margin-right: auto;
}

.intro-screen p {
    margin-bottom: 47px;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.intro-screen button {
    padding: 24px 40px;
    color: #FFF;
    border-radius: 18px;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    height: max-content;
    min-width: max-content;
    background: #4c4139;
    outline: none;
    border: 0;
    transition: background-color 0.1s ease-in;
}

.intro-screen .center {
    width: 975px;
    margin: auto;
    text-align: center;
}

.your-situation {
    position: relative;
    overflow: hidden;
}

.your-situation * {
    position: relative;
    z-index: 1;
    font-family: PP Mori !important;
    line-height: 150% !important;
}


.your-situation h6 {
    font-size: 12px;
    font-weight: 500;
    line-height: 20px !important;
}

.your-situation:before {
    border-radius: 277px;
    background: #A18A79;
    filter: blur(107px);
    width: 277px;
    height: 277px;
    content: '';
    position: absolute;
    z-index: 0;
    display: block;
    top: -20%;
    left: -20%;
}

.results-page-inner {
    flex-wrap: wrap;
}

.results_status {
    padding: 24px 20px 20px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: #dcd7cf;
}

.results_status h5 {
    color: #4c4139;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-bottom: 12px !important;
    text-align: left;
}

.results_status span.zone-category {
    color: #4C4139;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 135%;
}

.results_status .negative,
.results_status .positive {
    padding: 4.5px 14.248px 1.5px;
    min-width: 92px;
}

.results_status .negative {
    background-color: white;
    border-color: white;
}

.results-page-inner {
    gap: 16px;
}

.accuracy-box {
    width: 100%;

}

.stats-chart {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 64px;
}

#results-bar {
    --pl: -90;
    --pr: 13;
}


#results-bar path {
    /* reveal --p% */
    stroke-dasharray: 100 100;
    vector-effect: none;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.5s cubic-bezier(.68, -0.55, .27, 1.55);
    /*opacity: clamp(0, var(--p), 1);*/
}

#results-bar #progress-path {
    /*stroke-dashoffset: calc(calc(100 - var(--p)) * -1);*/
    stroke-dashoffset: var(--pl);
    opacity: clamp(0, var(--p), 1);
}

#results-bar #bg-path {
    /*stroke-dashoffset: calc(var(--p) + clamp(0, var(--p), 2.8));*/
    stroke-dashoffset: var(--pr);
    opacity: clamp(0, calc(100 - var(--p)), 1);
}

.stats-chart h2 {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 52px */
    margin-bottom: 12px;
}

.stats-chart p {
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 166.667% */
    text-transform: uppercase;
    opacity: 0.6;
}

.stats-chart .progress-text {
    position: initial;
    margin-top: -28px;
    width: max-content;
    text-align: center;
}

.increase_dice {
    padding: 20px 23px;
    background: #ffffff;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    font-family: PP Mori;
}


.sticky-bottom {
    margin-bottom: 100px;
}

.arrowed .i-check,
.zoned .i-check,
.close-icon-q,
.back-arrow {
    display: block;
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNGM0MTM5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMy4yNDUgMTBoMTQuMjVtLTguMzI4IDYuNjY0TDIuNSA5Ljk5NyA5LjE2NyAzLjMzIi8+PC9zdmc+);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMTYuNzUgMTBIMi41bTguMzI4IDYuNjY0bDYuNjY3LTYuNjY3LTYuNjY3LTYuNjY3Ii8+PC9zdmc+);
    mask-size: 100%;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: currentColor;
}

.back-arrow {
    transform: rotate(-180deg);
}

.close-icon-q {
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNiIgaGVpZ2h0PSIyNiIgZmlsbD0ibm9uZSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48cGF0aCBkPSJNMS44NjUgMjQuMTM1YS44MS44MSAwIDAgMCAuNTc1LjIzOC44MS44MSAwIDAgMCAuNTc1LS4yMzhMMTMgMTQuMTVsOS45OSA5Ljk4NmMuMTUyLjE1Mi4zNTkuMjM4LjU3NS4yMzhzLjQyMi0uMDg2LjU3NS0uMjM4LjIzOC0uMzU5LjIzOC0uNTc1LS4wODYtLjQyMi0uMjM4LS41NzVMMTQuMTUgMTNsOS45ODYtOS45OWMuMTUyLS4xNTIuMjM4LS4zNTkuMjM4LS41NzVzLS4wODYtLjQyMi0uMjM4LS41NzUtLjM1OS0uMjM4LS41NzUtLjIzOC0uNDIyLjA4Ni0uNTc1LjIzOEwxMyAxMS44NSAzLjAxIDEuODY1YS44MS44MSAwIDAgMC0uNTYtLjE5NWMtLjIwNC4wMDgtLjM5OC4wOTMtLjU0My4yMzdzLS4yMjkuMzM5LS4yMzcuNTQzYS44MS44MSAwIDAgMCAuMTk1LjU2TDExLjg1IDEzbC05Ljk4NiA5Ljk5YS44MS44MSAwIDAgMCAwIDEuMTQ2eiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
}

.info-icon {
    width: 16px;
    height: 16px;
    display: none;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC4zIiBjbGlwLXBhdGg9InVybCgjY2xpcDBfNTc0OV8xMTUzNikiPgo8cGF0aCBkPSJNNy45OTk4IDE1LjIwMDhDOS45MDkzNiAxNS4yMDA4IDExLjc0MDcgMTQuNDQyMiAxMy4wOTEgMTMuMDkxOUMxNC40NDEyIDExLjc0MTcgMTUuMTk5OCA5LjkxMDM0IDE1LjE5OTggOC4wMDA3OEMxNS4xOTk4IDYuMDkxMjIgMTQuNDQxMiA0LjI1OTg3IDEzLjA5MSAyLjkwOTYxQzExLjc0MDcgMS41NTkzNSA5LjkwOTM2IDAuODAwNzgxIDcuOTk5OCAwLjgwMDc4MUM2LjA5MDI1IDAuODAwNzgxIDQuMjU4OSAxLjU1OTM1IDIuOTA4NjQgMi45MDk2MUMxLjU1ODM3IDQuMjU5ODcgMC43OTk4MDUgNi4wOTEyMiAwLjc5OTgwNSA4LjAwMDc4QzAuNzk5ODA1IDkuOTEwMzQgMS41NTgzNyAxMS43NDE3IDIuOTA4NjQgMTMuMDkxOUM0LjI1ODkgMTQuNDQyMiA2LjA5MDI1IDE1LjIwMDggNy45OTk4IDE1LjIwMDhaIiBzdHJva2U9IiM0QzQxMzkiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTggMTIuMDAwOFY4LjgwMDc4IiBzdHJva2U9IiM0QzQxMzkiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuOTk5NjEgNS42NDc2NkM3Ljg5MzUyIDUuNjQ3NjYgNy43OTE3OCA1LjYwNTUxIDcuNzE2NzcgNS41MzA1QzcuNjQxNzUgNS40NTU0OCA3LjU5OTYxIDUuMzUzNzQgNy41OTk2MSA1LjI0NzY2QzcuNTk5NjEgNS4xNDE1NyA3LjY0MTc1IDUuMDM5ODMgNy43MTY3NyA0Ljk2NDgxQzcuNzkxNzggNC44ODk4IDcuODkzNTIgNC44NDc2NiA3Ljk5OTYxIDQuODQ3NjYiIHN0cm9rZT0iIzRDNDEzOSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOCA1LjY0NzY2QzguMTA2MDkgNS42NDc2NiA4LjIwNzgzIDUuNjA1NTEgOC4yODI4NCA1LjUzMDVDOC4zNTc4NiA1LjQ1NTQ4IDguNCA1LjM1Mzc0IDguNCA1LjI0NzY2QzguNCA1LjE0MTU3IDguMzU3ODYgNS4wMzk4MyA4LjI4Mjg0IDQuOTY0ODFDOC4yMDc4MyA0Ljg4OTggOC4xMDYwOSA0Ljg0NzY2IDggNC44NDc2NiIgc3Ryb2tlPSIjNEM0MTM5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfNTc0OV8xMTUzNiI+CjxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K);
}


.b-sheet .pair-btn,
.b-sheet .filter-results,
.b-sheet {
    background-color: #efede9 !important;
}

.d-arrow {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgZmlsbD0ibm9uZSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48ZyBjbGlwLXBhdGg9InVybCgjQSkiPjxwYXRoIGQ9Ik05LjEyNSAyLjkzNkw1LjMyNSA2LjkyNEEuNDYuNDYgMCAwIDEgNSA3LjA1OWEuNDYuNDYgMCAwIDEtLjMyNC0uMTM1bC0zLjgtMy45ODciIHN0cm9rZT0iIzRjNDEzOSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiLz48L2c+PGRlZnM+PGNsaXBQYXRoIGlkPSJBIj48cGF0aCBmaWxsPSIjZmZmIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgLTEgMTAgMTApIiBkPSJNMCAwaDEwdjEwSDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+);
    display: block;
    background-color: rgb(239 237 233);
    background-position: center;
    background-repeat: no-repeat;
}

.i-check,
.added-btn span:before {
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48ZyBjbGlwLXBhdGg9InVybCgjQSkiPjxwYXRoIGQ9Ik01LjQ0OSA4LjFsMy41IDMuNSA1LjYtNS42IiBzdHJva2U9IiM0YzQxMzkiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iQSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgyMHYyMEgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==);
    mask-size: 100%;
    content: '';
    width: 20px;
    height: 20px;
    display: inline-block;
    margin-right: 6px;
    background-color: currentColor;
}

.i-check {
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0ibm9uZSIgeG1sbnM6dj0iaHR0cHM6Ly92ZWN0YS5pby9uYW5vIj48ZyBjbGlwLXBhdGg9InVybCgjQSkiPjxwYXRoIGQ9Ik0zLjQ0OSA5LjFsNC41IDQuNSA4LjYtOC42IiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMS41Ii8+PC9nPjxkZWZzPjxjbGlwUGF0aCBpZD0iQSI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAgMGgyMHYyMEgweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==);
}

.b-sheet-container.zoned .b-header p,
#topDesContent {
    display: none !important;
}

.b-sheet-container.zoned .b-header {
    display: contents;
}


.intro-bottom {
    display: flex;
    flex-direction: column;
    width: 470px;
    margin: auto;

}


.age-label,
.intro-bottom label {
    font-size: 25px;
}

#step-content .age-box .age-input,
.intro-bottom input {
    font-size: 20px;
    padding: 10px;
    margin: 6px 0 20px;
    background-color: transparent;
    outline: none;
    text-align: center;
    border: 1px solid #4b413a1c;
    border-radius: 14px;
    transition: border 0.3s ease-in-out;
    color: #4b413ab0;
}

.age-input,
.intro-bottom input:focus-within,
.intro-bottom input:target,
.intro-bottom input:active {
    border: 1.5px solid #4b413a;
}

.age-input::placeholder {
    opacity: 0.6;
}

#age-error,
#email-error {
    color: #e00000;
    position: relative;
    height: 8px;
    top: -20px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.errored #age-error,
.errored #email-error {
    opacity: 1;
}

#age-error {
    position: absolute;
    width: 100%;
    left: 0;
    top: 47%;
}


#b-btn {
    position: relative;
}

#b-btn span {
    color: white;
    margin: 0;
    font-size: inherit !important;
    opacity: 1;
    transition: opacity 0.3s ease-in;
}

#b-btn .i-logo {
    height: 30px;
    width: 30px;
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

#b-btn:disabled span {
    opacity: 0;
}

#b-btn:disabled .i-logo {
    opacity: 1;
}

.success-msg {
    position: fixed;
    background-color: #006FCE;
    bottom: 20px;
    color: white;
    padding: 14px 30px;
    border-radius: 10px;
    box-shadow: 0 0 3px #006FCE;
    left: 50%;
    z-index: 999999;
    transform: translate(-50%, 300%);
    transition: transform 0.5s ease-in-out;
}

.success-msg.show {
    transform: translate(-50%, 0);
}


.zoned .b-sheet span {
    display: block;
    font-size: 24px;
    margin-bottom: 10px;
}

.product-btn3.add-btn3.added-btn .hover-msg,
.product-btn3.add-btn3 .hover-msg {
    opacity: 0 !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: red;
    width: 100%;
    height: 100%;
    border-radius: 83px;
    color: white !important;
    transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
    line-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


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

    #PBarNextFrameWrapper,
    #_hjSafeContext_99027180 {
        display: none !important;
    }

    .intro-screen {
        height: 100%;
        left: 0;
    }

    .intro-screen h1 {
        font-size: 6.3vw;
        line-height: 120%;
        margin-bottom: 4.25vw;
        font-weight: bold;
    }

    .intro-screen p {
        font-size: 4.2vw;
        line-height: 150%;
        text-align: center;
        margin-bottom: 0;
    }

    .intro-screen button {
        margin-top: 0;
        font-size: 4.2vw;
        width: 100%;
        padding: 3.8vw 0;
    }

    .intro-screen {
        transform: translateY(-50%);
    }

    .intro-screen .center {
        padding: 4vw 6.3vw 6.3vw;
        width: 100%;
        overflow: auto;
        max-height: 100%;
    }

    .results-page-main {
        padding-top: 10.666vw;
        position: relative;
        padding-bottom: 17vw;
        display: flex;
        flex-direction: column;
    }

    .progress-results-box.flex {
        justify-content: flex-start;
        align-items: flex-start;
    }

    .results-page-main:before {
        content: '';
        position: absolute;
        height: 0.266vw;
        background: rgb(76 65 57 / 13%);
        width: calc(100% + 8vw);
        left: -4.266vw;
        top: 5.333vw;
    }

    .results-page-inner {
        gap: 4.266vw;
    }


    #results-bar {
        width: 67.466vw;
        height: 32vw;
    }

    .stats-chart .progress-text {
        margin-top: -7.466vw;
    }

    .stats-chart {
        margin-bottom: 17.066vw;
        margin-top: 13.333vw;
    }

    .stats-chart h2 {
        font-size: 10.666vw;
        font-weight: 400;
        line-height: 130%;
        margin-bottom: 3.2vw;
    }

    .stats-chart p {
        font-size: 3.2vw;
        line-height: 5.333vw;
        opacity: 0.6;
    }

    .increase_dice {
        padding: 5.333vw 6.133vw;
        font-size: 4vw;
        background-color: transparent;
        border: 0.266vw solid rgba(76, 65, 57, 0.15);
        border-left: 0.8vw solid #4f92ee;
        padding-right: 19.466vw;
    }

    .results_status .d-flex {
        flex-direction: row;
    }

    .progress-results-right {
        order: 5;
    }

    .results_status {
        padding: 6.400vw 5.333vw 5.333vw;
        margin-bottom: 4.266vw;
        border-radius: 1.066vw;
        background: #dcd7cf;
    }

    .results_status h5 {
        color: #4c4139;
        font-size: 4.266vw;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        margin-bottom: 3.2vw !important;
        text-align: left;
    }

    .results_status span.zone-category {
        color: #4C4139;
        font-size: 6.400vw;
        font-style: normal;
        font-weight: 400;
        line-height: 135%;
    }

    .results_status .negative, .results_status .positive {
        padding: 1.2vw 3.799vw 0.4vw;
        border-radius: 5.333vw;
        border-width: 0.533vw;
        font-size: 3.2vw;
        line-height: 5.333vw;
        width: 24.237vw;
    }

    .your-situation {
        padding: 5.333vw;
    }


    .your-situation:before {
        border-radius: 73.866vw;
        filter: blur(28.533vw);
        width: 73.866vw;
        height: 73.866vw;
    }

    .your-situation h6 {
        font-size: 3.2vw;
        font-weight: 500;
        margin-bottom: 21.333vw;
        line-height: 5.333vw !important;
    }

    .your-situation p {
        font-family: PP Mori;
        font-size: 5.333vw;
        font-style: normal;
        font-weight: 400;
        line-height: 170%;
    }


    .pair-btn .btn-theme,
    .filter-results .btn-theme {
        font-size: 4.266vw;
        font-weight: 500;
        line-height: 100%;
        text-align: center;
        border-radius: 8vw;
        padding: 4.267vw 8vw;
        position: initial;
        min-width: 71.466vw;
    }

    .zoned .i-check.rotated,
    .btn-theme .back-arrow {
        color: inherit;
        transform: rotate(180deg);
    }

    .pair-btn .icon-btn,
    .filter-results .icon-btn {
        padding: 3.76vw 7.34vw 3.76vw;
        min-width: initial;
        pointer-events: all;
    }

    .animate-box:after {
        min-width: 18.846vw;
        transform: translate(calc(-50% + 36.046vw), -50%);
    }

    .animate-box:before {
        min-width: 70vw;
        transform: translate(calc(-50% - 10.697vw), -50%);
    }

    .animate-box:before, .animate-box:after {
        height: 12.797vw;
    }

    .animate-box span {
        width: 13.953vw;
        height: 13.255vw;
        right: 16.55% !important;
        top: 50%;
        border-radius: 100%;
        margin-bottom: 0 !important;
    }


    .safari .animate-box:before,
    .safari .animate-box:after {
        transform: translateY(-50%);
    }

    .safari .animate-box:before {
        left: 4.35%;
    }

    .safari .animate-box:after {
        left: 77%;
    }

    .safari .animate-box span {
        height: 0;
        right: 17% !important;
        transform: translateY(-50%) scale(1.2);
    }


    .is-merging .animate-box:before {
        transform: translate(calc(-50% - 5.116vw), -50%);
    }

    .is-merging .animate-box:after {
        transform: translate(calc(-50% + 31.162vw), -50%);
    }

    .safari.is-merging .animate-box:before {
        left: 9.9%;
        transform: translateY(-50%);
    }

    .safari.is-merging .animate-box:after {
        left: 71.8%;
        transform: translateY(-50%);
    }

    .safari.is-merging .animate-box span {
        animation: popHeightMB 1.5s ease-in-out;
    }

    .animate-box {
        width: 100vw;
    }

    @keyframes popHeightMB {
        0% {
            height: 0;
        }
        50% {
            height: 13.255vw;
        }
        100% {
            height: 0;
        }
    }


    .b-footer {
        padding-top: 3.488vw;
        padding-bottom: 6.976vw;
        border-top: 0.232vw solid rgb(76 65 57 / 10%);
        margin-top: 3.488vw;
    }

    .pair-btn .btn-theme {
        position: relative;
    }

    .results-page-main .pair-btn {
        margin-top: 0;
    }

    .sticky-bottom {
        margin-top: 13.866vw !important;
        padding-top: 4.266vw;
        border-top: 0.266vw solid rgb(76 65 57 / 21%);
        position: fixed;
        bottom: 0;
        background-color: #efede9;
        width: 100%;
        margin-bottom: 0 !important;
        left: 0;
        padding-bottom: 6.933vw;
        z-index: 999999999;
        text-align: center;
    }


    .sticky-bottom.hidden {
        bottom: -40vw;
    }

    /*  PIXELS */
    /*  PIXELS */
    /*  PIXELS */
    /*  PIXELS */
    .button-top-head {
        padding: 0 3.733vw;
    }

    .pair-btn .i-check,
    .arrowed .i-check,
    .zoned .i-check,
    .back-arrow {
        width: 5.333vw;
        height: 5.333vw;
        vector-effect: none;
    }

    .close-icon-q {
        width: 4.47vw;
        height: 4.47vw;
        margin-right: 3.733vw;
        margin-top: -0.266vw;
        position: absolute;
        right: 2vw;
        top: 8vw;
    }

    .zoned .close-icon-q {
        color: white;
        top: 4vw;
    }


    .step-wrapper {
        margin-top: 31vw;
        padding: 04.266vw;
        box-sizing: border-box;
        min-height: calc(100dvh - 31.5vw);
        overflow: hidden;
        height: auto;
        transition: none;
        padding-top: 5.333vw;
    }

    .main-container {
        min-height: calc(100dvh - 48vw);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transition: none;
        padding-top: 0 !important;
    }

    .user-test-step {
        display: flex !important;
        padding-top: 22.333vw;
        flex: 1;
        transition: none;
        flex-direction: column;
    }

    .user-step-contet {
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 0;
        gap: 10.666vw;
        flex: 1;
    }

    #step-content {
        position: fixed;
        /*bottom: 30vw;*/
        top: 75dvh;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 8.532vw);
    }

    #zone-complete #step-content {
        position: initial;
        transform: none;
        width: 100%;
        top: auto;
        left: auto;
    }

    .user-test-step .content-box-step h2 {

        color: #4c4139;
        text-align: center;
        font-family: PP Mori;
        font-style: normal;
        margin-bottom: 0;
        font-size: 6.4vw;
        font-style: normal;
        font-weight: 400;
        line-height: 135%;
        letter-spacing: 0;
        padding: 0 5.333vw;
    }

    #q0 .user-test-step .content-box-step h2 {
        padding: 0 16vw;
    }

    #q1 .user-test-step .content-box-step h2 {
        padding: 0 17.333vw;
    }

    #q7 .user-test-step .content-box-step h2 {
        padding: 0 8vw;
    }

    #q9 .user-test-step .content-box-step h2 {
        padding: 0 4vw;
    }

    #q14 .user-test-step .content-box-step h2 {
        padding: 0 6.4vw;
    }


    .zone-radio-group {
        gap: 2.133vw;
        column-gap: 0.266vw;
        justify-content: center;
    }

    .zone-type-readio + label {
        cursor: pointer;
        transition: all 0.3s ease;
        user-select: none;
        display: flex;
        padding: 3.2vw 7.466vw;
        justify-content: center;
        align-items: center;
        flex: 1 0 0;
        color: #4c4139;
        text-align: center;
        border-radius: 6.8vw;
        background: #fff;
        font-size: 4.266vw;
        font-style: normal;
        font-weight: 500;
        width: 100%;
        max-width: 100%;
        line-height: 150%;
        box-shadow: 0 0 1.6vw 0 rgb(75 65 58 / 9%);

    }

    .zone-radio-group > div {
        min-width: 100%;
    }

    #q0 .zone-type-readio > div {
        min-width: 37.333vw;
    }

    #q0 .zone-radio-group > div {
        padding-left: 1vw;
        padding-right: 1vw;
    }

    #q0 .zone-radio-group > div,
    #q0 .zone-type-readio + label {
        min-width: 37.333vw;

    }

    #q1 .zone-type-readio + label {
        font-size: 3.633vw;
    }

    .content-box-step {
        max-width: 100%;
    }

    .selected-probl {
        margin-top: 0;
    }

    .content-box-step {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10.666vw;
        flex: 1;
    }

    #q16 .content-box-step,
    #q0 .content-box-step {
        justify-content: flex-start;
    }

    #zone-complete #step-title,
    #zone-complete #topDesContent {
        display: none;
    }

    #zone-complete .user-test-step {
        padding-top: 25.333vw;
    }

    #zone-complete .user-test-step .content-box-step .progress-text h2 {
        font-style: normal;
        font-size: 10.666vw;
        font-style: normal;
        font-weight: 400;
        line-height: 130%;
    }

    #zone-complete .progress-text {
        position: initial;
        margin-top: -7.466vw;
        width: 100%;
    }

    #zone-complete .user-test-step .content-box-step .progress-text p {
        margin-top: 3.2vw !important;
        color: #4c4139;
        text-align: center;
        font-family: 'PP Mori';
        letter-spacing: 0;
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 500;
        line-height: 5.333vw;
        opacity: 0.6;
        text-transform: uppercase;
        margin-bottom: 0;
    }

    #zone-complete .progress-card {
        width: 100%;
        /*margin: 0 auto 19.466vw auto !important;*/
        text-align: center;
        position: relative;
    }

    .user-test-step .content-box-step .ckpro {
        margin: 5.333vw 0 0;
        text-align: center;
        font-size: 4.266vw;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        opacity: 0.8;
        padding: 0 6.933vw;
    }


    #zone-complete .pair-btn,
    #zone-complete .filter-results {
        margin-top: 3.6266vw !important;
    }

    .treatment-box {
        display: flex;
        gap: 4.266vw;
        flex-direction: column;
        display: contents;
    }

    .treatment-img {
        border-radius: 1.066vw;
        overflow: hidden;
        order: -4;
    }

    .od-3 {
        order: -3;
    }

    .od-2 {
        order: -2;
    }

    .od-1 {
        order: -1;
    }

    .your-results-right {
        border-radius: 1.066vw;
        padding: 5.333vw 4.8vw 5.333vw 5.333vw;
        background-color: #dcd7cf;
    }

    .your-results-right span {
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 500;
        line-height: 5.333vw;
        text-transform: uppercase;
        display: block;
        margin-bottom: 21.333vw;
    }

    .your-results-right p {
        font-family: 'PP Mori';
        font-size: 5.333vw;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .your-protocol {
        margin-top: 13.333vw;
        margin-bottom: 5.333vw !important;
    }

    .getting-started h4,
    .your-protocol h4 {
        color: #4C4139;
        font-size: 6.4vw;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        margin-bottom: 5.333vw;
    }

    .your-protocol p {
        border-radius: 1.066vw;
        border: 0.266vw solid rgba(76, 65, 57, 0.15);
        background: #FFF;
        border-left: 0.8vw solid #4F92EE;
        padding: 4.266vw;
        color: var(--Dark, #4C4139);
        font-family: PP Mori;
        font-size: 4.266vw;
        font-style: normal;
        font-weight: 300;
        line-height: 150%;
    }

    .your-protocol p {
        border-radius: 1.066vw;
        border: 0.266vw solid rgba(76, 65, 57, 0.15);
        background: #FFF;
        border-left: 0.8vw solid #4F92EE;
        padding: 5.333vw;
        color: var(--Dark, #4C4139);
        font-family: PP Mori;
        font-size: 4vw;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        padding-right: 16vw;
        letter-spacing: 0;
    }

    .section {
        margin-top: 0 !important;
    }

    .product-item {
        display: flex;
        padding: 0;
        box-shadow: none;
        justify-content: space-between;
        background: transparent;
        gap: 5.333vw;
        align-items: stretch;
    }

    .product-item .price {
        position: absolute;
        bottom: 1.333vw;
        font-size: 3.2vw;
        font-weight: bold;
        opacity: 0.7;
    }


    .prod-img-left {

        background-color: white;
        width: 29.333vw;
        min-width: 29.333vw;
        border-radius: 1.066vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .prod-img-left img {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        max-width: 80%;
        margin: auto;
        max-height: 80%;
    }

    .prod-details {
        flex: 1;
        padding-top: 2.66vw;
    }

    .product-info strong {
        overflow: hidden;
        text-overflow: ellipsis;
        width: 50.666vw;
        font-family: PP Mori;
        font-size: 4.266vw;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        margin-bottom: 2.133vw;
        white-space: nowrap;
    }

    .product-info {
        display: flex;
        flex-direction: column;
        padding-right: 0;
    }

    .product-info span {
        color: #4C4139;
        font-family: PP Mori;
        font-size: 3.2vw;
        opacity: 0.6;
        font-style: normal;
        font-weight: 500;
        line-height: 4.8vw; /* 150% */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 5.866vw;
        max-width: 51.2vw;

    }

    .prod-img-left .must-badge {
        padding: 0.8vw 2.8vw 0.266vw;
        display: inline-block;
        border-radius: 8vw;
        background: var(--Lime, #E9FF45);
        color: var(--Dark, #4C4139);
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 500;
        line-height: 5.333vw;
        text-transform: uppercase;
        width: max-content;
        position: absolute;
        top: 2.133vw;
        left: 2.133vw;
    }

    .product-btn2.add-btn2.add-all-btn *,
    .product-btn3.add-btn3.add-all-btn3 *,
    .product-btn.add-btn *,
    .product-btn3.add-btn3 * {
        pointer-events: none;
    }


    .product-btn2.add-btn2.add-all-btn .i-logo,
    .product-btn3.add-btn3.add-all-btn3 .i-logo,
    .product-btn.add-btn .i-logo,
    .product-btn3.add-btn3 .i-logo {
        width: 5vw;
        height: 5vw;
        display: block;
        top: 2.5vw;
        left: 37%;
        transition: opacity 0.3s ease-in-out;
        opacity: 0;
    }

    .product-btn2.add-btn2.add-all-btn .i-logo,
    .product-btn3.add-btn3.add-all-btn3 .i-logo {
        width: 6.5vw;
        height: 6.5vw;
        top: 2.8vw;
        left: 46%;
    }


    .product-btn2.add-btn2.add-all-btn.adding.i-logo,
    .product-btn3.add-btn3.add-all-btn3.adding .i-logo,
    .product-btn.add-btn.adding .i-logo,
    .product-btn3.add-btn3.adding .i-logo {
        opacity: 1;
    }


    .product-btn.add-btn,
    .product-btn3.add-btn3 {
        border-radius: 5.333vw;
        background: #4F92EE;
        padding: 2.66vw 5.466vw;
        position: relative;
        text-transform: uppercase;
        transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
    }

    .product-btn.add-btn span,
    .product-btn3.add-btn3 span {
        color: #FFF;
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 500;
        line-height: 5.333vw;
        transition: opacity 0.3s ease-in-out;
    }


    .product-btn2.add-btn2.add-all-btn.adding span,
    .product-btn3.add-btn3.add-all-btn3.adding span,
    .product-btn.add-btn.adding span,
    .product-btn3.add-btn3.adding span {
        opacity: 0;
    }

    .product-btn2.add-btn2.add-all-btn,
    .product-btn3.add-btn3.add-all-btn3 {
        border: 0;
        padding: 3.733vw 10.933vw 3.2vw;
        border-radius: 6.933vw;
        width: 100%;
        margin-bottom: 0;
        position: relative;
        transition: width 0.3s ease-in-out, padding 0.3s ease-in-out;
    }


    .product-btn2.add-btn2.add-all-btn span,
    .product-btn3.add-btn3.add-all-btn3 span {
        font-size: 4.533vw;
        line-height: inherit;
        font-weight: inherit;
        color: #fff !important;
    }

    .added-btn {
        background: #d6d1c5 !important;
        padding: 2.66vw 5.333vw 2.66vw 4.266vw !important;
    }

    .added-btn .i-logo {
        opacity: 0 !important;
    }


    .added-btn span:before {
        width: 5.333vw;
        height: 5.333vw;
        display: inline-block;
        margin-right: 1.6vw;
        background-color: currentColor;
    }

    .added-btn.product-btn2.add-btn2.add-all-btn span:before,
    .added-btn.product-btn3.add-btn3.add-all-btn3 span:before {
        width: 6.6vw;
        height: 6.6vw;
    }

    .added-btn.product-btn2.add-btn2.add-all-btn span,
    .added-btn.product-btn3.add-btn3.add-all-btn3 span,
    .added-btn span {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        color: #4C4139 !important;
    }


    .product-btn3.add-btn3.added-btn.removing .i-logo,
    .product-btn3.add-btn3.added-btn.removing .hover-msg,
    .product-btn3.add-btn3.added-btn.added-btn.remove .hover-msg {
        opacity: 1 !important;
    }

    .product-btn3.add-btn3.added-btn.removing .hover-msg {
        color: transparent !important;
    }

    .added-btn .hover-msg:before {
        content: none;
        display: none;
    }

    .product-btn3.add-btn3.removing .i-logo {
        left: 44%;
    }

    .product-btn3.add-btn3 .i-logo {
        z-index: 999;
    }


    .ti-overlay {
        border-radius: 1.066vw;
        background: rgba(76, 65, 57, 0.30);
        backdrop-filter: blur(6.666vw);
        padding: 8vw;
        position: absolute;
        bottom: 2.133vw;
        left: 2.133vw;
        text-align: center;
        max-width: 87.2vw;
    }

    .ti-overlay span {
        color: #FFF;
        font-family: "PP Mori";
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 500;
        line-height: 5.333vw; /* 166.667% */
        text-transform: uppercase;
        display: block;
        margin-bottom: 4.8vw;
        opacity: 0.6;
    }

    .ti-overlay p {
        color: #FFF;
        text-align: center;
        font-family: "PP Mori";
        font-size: 6.4vw;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }


    .mb-progress {
        flex: 1;
        width: 100%;
        height: 1.333vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mb-pb {
        width: 26.666vw;
        height: 0.533vw;
        position: relative;
        background-color: rgba(76, 65, 57, 0.2);
        background-color: #4f92ee3b;
    }

    .mb-pb:before {
        content: '';
        position: absolute;
        height: 100%;
        width: var(--pb);
        left: 0;
        top: 0;
        background: #4F92EE;
        transition: width 0.3s ease;
    }

    .head-top-text {
        font-family: PP Mori;
        font-size: 4.266vw;
        font-style: normal;
        font-weight: 500;
        line-height: 150%;
        text-align: center;
        flex: 1;
        padding-right: 0;
    }

    .info-icon {
        display: block;
        position: absolute;
        right: 0;
    }

    .b-sheet-container {
        display: block;
    }

    .b-sheet-container * {
        pointer-events: none;
    }

    .b-sheet {
        display: block;
        position: fixed;
        z-index: 99999999999999999999999;
        bottom: 0;
        transform: translateY(110%);
        background-color: white;
        border-radius: 2.666vw;
        overflow: hidden;
        border-bottom-radius: 0;
        max-width: 100%;
        padding: 8vw 4.266vw 20.666vw;
        transition: transform 0.8s cubic-bezier(.68, -0.55, .27, 1.55);
    }

    .zoned .b-sheet {
        overflow: hidden;
        padding: 0 0 20.666vw;
        box-shadow: 0 0 16vw #4b413a8c;
    }

    .zoned .b-sheet {

    }

    .zoned .b-sheet img {
        border-radius: 0;
        min-height: 63.8vw;
    }

    .zoned .b-sheet span {
        display: block;
        font-size: 7vw;
        margin-bottom: 4vw;
    }

    .zoned .b-sheet strong,
    .zoned .b-sheet p {
        margin-top: 6vw;
        text-align: center;
        padding: 0 2.8vw;
        font-size: 4.8vw;
    }

    .b-underlay {
        background: rgba(76, 65, 57, 0.50);
        opacity: 0;
        position: fixed;
        width: 100vw;
        height: 100dvh;
        top: 0;
        left: 0;
        z-index: 99999999999999;
        transition: opacity 0.3s ease-in;
    }

    .b-sheet-container.active .b-underlay {
        opacity: 1;
    }

    .b-sheet-container.active .b-sheet {
        transform: translateY(20.666vw);
    }

    .b-sheet-container.active * {
        pointer-events: all;
    }

    body {
        /*background-image: linear-gradient(180deg, white 50%, #efede9 50%);*/
    }


    .b-sheet-container .sticky-bottom {
        position: initial;
        background-color: white;
        margin-left: -4.266vw;
        margin-right: -4.266vw;
        width: calc(100% + 8vw);
        margin-top: 8vw !important;
    }

    .b-sheet-container .pair-btn .icon-btn,
    .b-sheet-container .filter-results .icon-btn {
        padding: 3.74vw 7.34vw;
    }

    .b-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8vw;
    }

    .b-header p {
        color: #4C4139;
        font-family: "PP Mori";
        font-size: 3.2vw;
        font-style: normal;
        font-weight: 500;
        line-height: 5.333vw; /* 166.667% */
        text-transform: uppercase;
        opacity: 0.6;
        width: 79.466vw;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .b-content {
        max-height: 65dvh;
        overflow: auto;
    }

    .b-content *,
    .b-content {
        color: #4C4139;
        font-family: "PP Mori";
        font-size: 4vw;
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
    }

    .b-content li {
        list-style: disc;
    }

    .b-content p {
        margin-bottom: 2.666vw;
    }

    .b-content ul {
        padding-left: 6.6vw;
        margin-bottom: 5.333vw;
    }

    .b-content strong {
        font-weight: bold !important;
    }

    .getting-started {
        width: 100%;
        order: 10;
        margin-top: 9.066vw;
    }

    #web-pixels-manager-sandbox-container,
    #hubspot-messages-iframe-container,
    #oak-chat-widget-container,
    footer {
        display: none !important;
    }

    body,
    html {
        overflow: hidden;
        overflow-y: auto;
        max-width: 100vw;
    }

    .i-check {
        margin-right: 0;
        display: block;
    }

    .intro-bottom {
        width: 100%;
    }


    .email-input {
        font-size: 5vw;
        margin-top: 10vw;

    }


    .intro-bottom input {
        font-size: 4vw;
        padding: 3vw;
        margin: 1.5vw 0 3vw;
        border: 0.2666vw solid #4b413a1c;
        border-radius: 3.5vw;
        transition: border 0.3s ease-in-out;
        color: #4b413ab0;
    }


    .intro-bottom label {
        font-size: 5vw;
        margin-top: 5vw;
    }

,
#email-error {
    height: 2.7vw;
    top: -3vw;
    font-size: 3vw;
}

    #age-error {
        opacity: 0 !important;
        display: none !important;
    }

    .swiper {
        width: 100%;
    }

    .age-item {
        display: block;
        will-change: transform, opacity;
        transition-property: transform, opacity;
        transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
        transition-duration: 0ms;
        height: 13.333vw;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
    }

    .swiper:before {
        content: '';
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        position: absolute;
        display: block;
        pointer-events: none;
        z-index: 2;
        background-image: linear-gradient(45deg, #f5f4f191, transparent 58%, transparent 35%, #f5f4f194 100%);
    }

    .years {
        opacity: 0.6;
        margin-bottom: 5vw;
        font-size: 4.3vw;
        position: relative;
    }

    .years:before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 0.533vw;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        background-image: linear-gradient(90deg, transparent 5%, #4b413a 43%, transparent 43%, transparent 57.5%, #4b413a 58.5%, transparent 95%)
    }

    .age-label,
    .age-input {
        display: none;
    }

    .age-box {
        display: contents;
    }

    #b-btn .i-logo {
        height: 8vw;
        width: 8vw;
    }

    .success-msg {
        font-size: 3.8vw;
        width: max-content;
        padding: 4vw 6vw;
        letter-spacing: 0.2vw;
    }

}


.acc-container {
    padding-left: 10.666vw;
    position: relative;
}

.acc-container:before {
    content: '';
    position: absolute;
    left: 3.2vw;
    top: 7.733vw;
    bottom: 0;
    width: 0;
    height: calc(100% - 24vw);
    border-left: 0.266vw dashed rgba(76, 65, 57, 0.15);
}

.acc {
    position: relative;
    border-radius: 1.066vw;
    background: rgba(239, 237, 233, 0.50);
    padding: 5.333vw 5.333vw 5.866vw 5.333vw;
    background-color: white;
    margin-bottom: 2.666vw;
}

.acc:before {
    content: '';
    position: absolute;
    left: -9.173vw;
    top: 7.733vw;
    width: 1.6vw;
    height: 1.6vw;
    border: 1.066vw solid #f5f4f1;;
    border-radius: 50%;
    background: #4C4139;
    display: block;
    box-sizing: content-box;
}

.acc:after {
    content: '';
    position: absolute;
    left: -7.466vw;
    top: 11.466vw;
    width: 0.266vw;
    height: 100%;
    background: #4C4139;
    display: block;
    box-sizing: content-box;
    height: calc(0% - 1.173vw);
    transition: height 1s ease-in 0.4s;
}


.acc.half-done:after {
    transition: height 0.6s ease-in;
    height: calc(50% - 1.173vw);
}

.acc.done:after {
    transition: height 1s ease-in 0.4s;
    height: calc(100% - 1.173vw);
}

.acc:last-child:after {
    display: none;
}


.acc h5 {
    font-family: "PP Mori";
    font-size: 4.266vw;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.666vw;
}

.acc .acc-header p {
    font-family: "PP Mori";
    font-size: 3.2vw;
    font-style: normal;
    font-weight: 500;
    line-height: 5.333vw; /* 166.667% */
    text-transform: uppercase;
    opacity: 0.6;
}

.d-arrow {
    background-size: 2.666vw;
    width: 10.666vw;
    height: 8vw;
    border-radius: 8vw;

}


@media screen and (min-width: 1692px) {
    .step-wrapper {
        margin-top: 170px;
    }
}

@media screen and (min-width: 768px) {
    .zone-type-readio + label {
        min-width: 256px;
    }

    .btn-theme {
        position: relative;
    }

    .pair-btn .back-arrow,
    .filter-results .back-arrow {
        color: white;
        transform: rotate(180deg);
    }


    .pair-btn .btn-theme,
    .filter-results .btn-theme {
        padding: 16px 27px;
        pointer-events: all !important;
        min-width: 264px;
    }

    .pair-btn .icon-btn,
    .filter-results .icon-btn {
        padding: 14px 27px;
        min-width: initial;
    }

    .getting-started h4 {
        font-size: 26px;
    }

    .getting-started {
        margin-top: 30px;
    }

    .acc-container {
        padding-left: 40px;
    }

    .acc-container:before {
        left: 12px;
        top: 29px;
        height: calc(100% - 90px);
        border-left: 1px dashed rgba(76, 65, 57, 0.15);
    }

    .acc {
        border-radius: 4px;
        padding: 20px 20px 22px 20px;
        margin-bottom: 10px;
    }

    .acc:before {
        left: -34.4px;
        top: 29px;
        width: 6px;
        height: 6px;
        border: 4px solid #f5f4f1;;
    }

    .acc:after {
        left: -28px;
        top: 43px;
        width: 1px;
        height: calc(0% - 4.4px);
    }


    .acc.half-done:after {
        height: calc(50% - 4.4px);
    }

    .acc.done:after {
        height: calc(100% - 4.4px);
    }

    .acc:last-child:after {
        display: block;
        height: 100%;
        background-color: #f5f4f1;
        top: 42px;
    }

    .stats-chart p {
        font-size: 14px;
    }


    .acc h5 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .acc .acc-header p {
        font-size: 12px;
        line-height: 20px;
        opacity: 0.6;
    }

    .acc.active .acc-content {
        height: auto;
        max-height: 600px;
        padding-top: 30px;
    }

    .d-arrow {
        cursor: pointer;
        background-size: 10px;
        width: 40px;
        height: 30px;
        border-radius: 30px;

    }

    .acc-content *,
    .acc-content {
        color: #4C4139;
        font-family: "PP Mori";
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 22.5px */
    }

    .acc-content {
        padding-left: 20px;
        transition: max-height 0.5s ease-in, padding-top 0.5s ease-in;
        height: auto !important;
    }

    .acc-content li {
        list-style: disc;
    }

    .acc.active .d-arrow {
        transform: rotate(180deg);
    }

    .acc-content p {
        margin-bottom: 10px;
    }

    .acc-content ul {
        padding-left: 25px;
        margin-bottom: 20px;
    }

    .acc-content strong {
        font-weight: bold !important;
    }


    .treatment-box {
        align-items: stretch;
    }

    .your-results-right {

        display: contents;
    }

    .treatment-details {
        background: #fff;
        padding: 20px 20px 47px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .treatment-box > div {
        flex: 0 0 calc(50% - 10px);
        border-radius: 4px;
        overflow: hidden;
    }

    .ti-overlay {
        border-radius: 4px;
        background: rgba(76, 65, 57, 0.30);
        backdrop-filter: blur(18px);
        padding: 16px;
        padding-top: 34px;
        position: absolute;
        bottom: 10px;
        left: 10px;
        text-align: center;
        max-width: calc(100% - 20px);
    }

    .ti-overlay span {
        color: #FFF;
        font-family: "PP Mori";
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 1;
        text-transform: uppercase;
        display: block;
        margin-bottom: 56px;
        opacity: 0.6;
    }

    .ti-overlay p {
        color: #FFF;
        text-align: center;
        font-family: "PP Mori";
        font-size: 35px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
    }

    .section,
    .your-protocol {
        margin-top: 20px !important;
    }


    .prod-img-left img {
        max-width: 66%;
        max-height: 74%;
    }

    .prod-img-left {
        position: relative;
        background-color: white;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 190px;
        min-width: 190px;
        min-height: 190px;
    }

    .product-info {
        flex: 1;
    }

    .prod-details {
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
    }

    .prod-details button {
        position: absolute !important;
        right: 12px;
        top: 14px;
    }


    .product-btn3.add-btn3.added-btn.removing .i-logo,
    .product-btn.add-btn.adding .i-logo,
    .product-btn3.add-btn3.adding .i-logo,
    .product-btn2.add-btn2.adding .i-logo,
    .product-btn.add-btn span,
    .product-btn3.add-btn3 span,
    .product-btn2.add-btn2 span {
        color: white;
        opacity: 1;
        transition: opacity 0.3s ease-in;
    }


    .product-btn.add-btn.adding span,
    .product-btn3.add-btn3.adding span,
    .product-btn2.add-btn2.adding span,
    .product-btn.add-btn .i-logo,
    .product-btn3.add-btn3 .i-logo,
    .product-btn2.add-btn2 .i-logo {
        opacity: 0;
        transition: opacity 0.3s ease-in;
    }


    .product-btn.add-btn.added-btn,
    .product-btn3.add-btn3.added-btn,
    .product-btn2.add-btn2.added-btn {
        background: #d6d1c5 !important;
        padding: 9px 25px 9px 18px;
    }

    .product-btn.add-btn.added-btn .i-logo,
    .product-btn3.add-btn3.added-btn .i-logo,
    .product-btn2.add-btn2.added-btn .i-logo,
    .product-btn.add-btn .i-logo,
    .product-btn3.add-btn3 .i-logo,
    .product-btn2.add-btn2 .i-logo {
        width: 20px;
        height: 20px;
        left: 37%;
        top: 23%;
        opacity: 0;
        transition: opacity 0.3s ease-in;
    }


    .product-btn3.add-btn3.added-btn.removing .hover-msg,
    .product-btn3.add-btn3.added-btn.remove-btn:hover .hover-msg,
    .product-btn3.add-btn3.added-btn:hover .hover-msg {
        opacity: 1 !important;
    }

    .product-btn3.add-btn3.added-btn.removing .hover-msg {
        color: transparent !important;
    }

    .added-btn .hover-msg:before {
        content: none;
        display: none;
    }

    .product-btn.add-btn.added-btn span,
    .product-btn3.add-btn3.added-btn span,
    .product-btn2.add-btn2.added-btn span {
        opacity: 1;

    }

    .product-btn3.add-btn3.removing .i-logo {
        left: 44%;
    }

    .product-btn3.add-btn3 .i-logo {
        z-index: 999;
    }

    .add-all-btn3 .i-logo,
    .add-all-btn .i-logo {
        left: 46% !important;
        top: 27% !important;
    }

    .product-btn2 {
        margin-bottom: 50px;
    }


    .added-btn span:before {
        width: 20px;
        height: 20px;
        display: inline-block;
        margin-right: 6px;
        background-color: currentColor;
    }

    .added-btn.product-btn2.add-btn2.add-all-btn span:before,
    .added-btn.product-btn3.add-btn3.add-all-btn3 span:before {
        width: 25px;
        height: 25px;
    }

    .added-btn.product-btn2.add-btn2.add-all-btn span,
    .added-btn.product-btn3.add-btn3.add-all-btn3 span,
    .added-btn span {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1 !important;
        color: #4C4139 !important;
    }


    .product-btn2.add-btn2.add-all-btn,
    .product-btn3.add-btn3.add-all-btn3 {
        color: #fff !important;
        background: #4b413a;
        border: 0;
        padding: 11px 14px;
        font-size: 17px;
        border-radius: 35px;
        min-width: 221px;
        margin-left: auto;
    }

    .treatment-img.rp {
        display: flex;
        flex-direction: row-reverse;
        border-radius: 4px;
        overflow: hidden;
        min-width: 100%;
    }

    .rp .ti-overlay {
        border-radius: 4px;
        background-color: #ffffff !important;
        backdrop-filter: none;
        padding: 16px;
        padding-top: 34px;
        text-align: center;
        position: initial;
        max-width: initial;
        flex: 0 0 38%;
        display: flex;
        flex-direction: column;
    }

    .rp .ti-overlay span {
        color: #4b413a;
        font-family: "PP Mori";
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 1;
        text-transform: uppercase;
        display: block;
        opacity: 0.6;
        flex: 1;
        text-align: left;
        padding-left: 10px;
        margin-bottom: 30px;
    }

    .rp .ti-overlay button {
        background-color: #4f92ee;
    }

    .rp .ti-overlay p {
        color: #4b413a;
        text-align: center;
        font-family: "PP Mori";
        font-size: 26px;
        font-style: normal;
        font-weight: 400;
        line-height: 120%;
        text-align: left;
        padding-left: 10px;
        margin-bottom: 16px;
    }

    .product-item .price {
        position: absolute;
        bottom: 5px;
        font-size: 13px;
        font-weight: bold;
        opacity: 0.6;
    }


    .product-btn3.add-btn3.add-all-btn3,
    .product-btn2.add-btn2.add-all-btn {
        color: #fff !important;
        background: #4F92EE !important;
    }

    .product-btn2.add-btn2.add-all-btn.added-btn,
    .product-btn3.add-btn3.add-all-btn3.added-btn {
        background: #d6d1c5 !important;
    }

    .pair-btn.bluish,
    .filter-results.bluish {
        opacity: 1;
        pointer-events: all;
        transition: opacity 0.3s ease-in;
    }

    .pair-btn.hidden.bluish,
    .sticky-bottom.hidden.bluish {
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease-in;
    }


    #zone-complete #step-content {
        position: initial;

    }

    .b-sheet-container .pair-btn .btn-theme,
    .b-sheet-container .filter-results .btn-theme,
    .b-sheet-container * {
        pointer-events: none !important;
    }

    .zone-xl.b-sheet-container {
        display: block;
        pointer-events: all;
    }


    .b-underlay {
        background: rgba(76, 65, 57, 0.50);
        opacity: 0;
        position: fixed;
        width: 100vw;
        height: 100dvh;
        top: 0;
        left: 0;
        z-index: 99999999999999;
        transition: opacity 0.3s ease-in;
    }


    .b-sheet {
        display: block;
        position: fixed;
        z-index: 99999999999999999999999;
        bottom: 0;
        transform: translate(-50%, 50%);
        border-radius: 10px;
        border-bottom-radius: 0;
        max-width: 100%;
        transition: transform 0.4s ease-in, opacity 0.2s ease-in;
        opacity: 0;
        max-height: max-content;
        max-width: 400px;
        height: fit-content;
        top: 50%;
        overflow: hidden;
        left: 50%;
    }

    .b-sheet .close-icon-q {
        position: absolute;
        right: 15px;
        top: 15px;
    }


    .zoned .b-sheet {
        padding: 0 0 16px;
    }

    .arrowed .i-check,
    .zoned .i-check {
        margin: 0 !important;
    }

    .zoned .b-footer,
    .zoned .sticky-bottom {
        margin-bottom: 0;
        margin-top: 20px;
        border-top: 1px solid #a09b957d;
        width: 100%;
        padding-top: 16px;
    }

    .zoned .sticky-bottom button {
        /*background-color: #4f92ee;*/
    }

    .zoned .b-sheet img {
        border-radius: 0;
        min-height: 245px;
    }

    .zoned .b-sheet strong, .zoned .b-sheet p {
        margin-top: 16px;
        text-align: center;
        font-size: 20px;
        padding-left: 16px;
        padding-right: 16px;
    }


    .b-sheet-container.active .b-underlay {
        opacity: 1;
    }

    .b-sheet-container.active .b-sheet {
        transform: translate(-50%, -50%);
        opacity: 1;

    }

    .b-sheet-container.active .pair-btn .btn-theme,
    .b-sheet-container.active .filter-results .btn-theme,
    .b-sheet-container.active * {
        pointer-events: all !important;
    }


    .years,
    .swiper {
        display: none;
    }

    .age-box {
        position: absolute;
        top: 36%;
    }

    .age-box .i-check {
        margin: 0 !important;
        display: block;
    }

    .age-box label {
        position: absolute;
        right: 31px;
        background-color: #f5f4f1;
        top: 9px;
        padding-right: 10px;
        border-radius: 10px;
        font-size: 20px;
        display: flex;
        height: 44px;
        line-height: 0;
        align-items: center;
        color: #4b413a8a;
    }

    .age-step#step-content {
        display: contents;
    }


    .mb-progress {
        flex: 1;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mb-pb {
        width: 700px;
        height: 4px;
        position: relative;
        background-color: #4f92ee3b;
        border-radius: 9px;
        overflow: hidden;
    }

    .mb-pb:before {
        content: '';
        position: absolute;
        height: 100%;
        width: var(--pb);
        left: 0;
        top: 0;
        background: #4F92EE;
        transition: width 0.3s ease;
    }


}


/* Responsive */

.step-wrapper.pageLoader .analyzing-data img {
    filter: brightness(0) invert(1);

}

.step-wrapper.pageLoader .analyzing-data h4 {
    color: var(--Dark, #fff);
}