/* Slide transition styles */
.inner-section-wrapper {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    width: 100%;
    left: 0;
    opacity: 0;
    transform: translateX(100%);
}

.inner-section-wrapper.active {
    position: relative;
    opacity: 1;
    transform: translateX(0);
}

.inner-section-wrapper.slide-out-left {
    transform: translateX(-100%);
    opacity: 0;
}

.inner-section-wrapper.slide-in-right {
    transform: translateX(100%);
    opacity: 0;
}

/* Ensure layout-body can contain positioned children */
.skin-analysis .layout-body {
    position: relative;
    overflow: hidden;
    min-height: 75vh;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (max-width: 575.98px) {
    .skin-analysis .layout-body {
        height: auto !important;
        min-height: 84vh;
    }
}
/* Slide transition styles */

.web-br {
    display: none;
}
@media (min-width: 992px) {
    .web-br {
        display: block;
    }
}

.skin-analysis {
    display: flex;
    flex-direction: column;
}

@media (max-width: 575.98px) {
    .skin-analysis {
        height: auto !important;
        min-height: 100vh;
    }
}

.skin-analysis .layout-body {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.skin-analysis .skin-section-header .inner-wrapper {
    padding-top: 3.81dvh;
    padding-bottom: 3.76dvh;
}

@media (max-width: 575.98px) {
    .skin-analysis .skin-section-header .inner-wrapper {
        padding-top: 3.81dvh;
        padding-bottom: 3.76dvh;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

.sklz {
    max-width: 90.69vw !important;
    margin: 0 auto;
}
@media (min-width: 992px) {
    .sklz {
        max-width: 88.75vw !important;
    }
}

.skin-analysis .skin-section-header button.home-btn {
    background: linear-gradient(180deg, #f4e1c6 0%, #b78d70 100%);
}
.skin-analysis .skin-section-header button .icon svg path {
    stroke: #60483d !important;
}

.skin-analysis .left-arrow-g-btn {
    padding: 0.8vw 2.3vw;
    background: linear-gradient(180deg, #f4e1c6 0%, #b78d70 100%);
    color: #60483d;
}
.skin-analysis .left-arrow-g-btn:hover {
    background: linear-gradient(180deg, #f6debc 0%, #c49472 100%);
    color: #60483d !important;
}

.skin-analysis .left-arrow-g-btn .icon svg path {
    fill: #60483d !important;
    stroke: #60483d !important;
}
@media (max-width: 575.98px) {
    .skin-analysis .left-arrow-g-btn {
        padding: 2.8vw 4.3vw;
    }
}

.skin-analysis .analyzing-page-c-5 .section-header-section h6 {
    font-size: 2.17vw;
    font-weight: 400;
}

@media (max-width: 575.98px) {
    .skin-analysis .analyzing-page-c-5 .section-header-section h6 {
        font-size: 6.17vw;
    }
}

.skin-analysis .inner-section-wrapper {
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    /* height: 75vh; */
    /* margin-bottom: 6vw; */
    align-items: center;
    justify-content: center;
    /* text-align: center; */
}

.skin-analysis .inner-section-wrapper .inner-section h6 {
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #454545;
    font-size: 15px;
    line-height: 110%;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 2dvh;
}

.skin-analysis .inner-section-wrapper .inner-section .step-desc {
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #60483d;
    font-size: 25px;
    line-height: 110%;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 4vh;
}

.skin-analysis .inner-section .details-wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    width: 100%;
    /* max-width: 1120px; */
    margin: 0 auto;
    /* margin-bottom: 10vh; */
}
#step-1 .details-wrapper {
    margin-bottom: 10dvh !important;
    gap: 3.05vw;
}
@media (max-width: 575.98px) {
    #step-1 .details-wrapper {
        margin-bottom: 4dvh !important;
        gap: 3.05vw;
    }
}
#step-2 .details-wrapper {
    margin-bottom: 10vh !important;
}
@media (max-width: 991.98px) {
    #step-2 .details-wrapper {
        margin-bottom: 5vh !important;
    }
}
@media (max-width: 575.98px) {
    #step-2 .details-wrapper {
        margin-bottom: 6vh !important;
    }
}

#step-3 .details-wrapper {
    margin-top: 6dvh;
    margin-bottom: 6dvh;
}
@media (max-width: 575.98px) {
    #step-3 .details-wrapper {
        margin-top: 4dvh;
        margin-bottom: 4dvh;
    }
}

.skin-analysis .inner-section .details-wrapper .detail-item {
    background-color: #fff;
    border-radius: 1rem;
    border: 1px solid #d7bca6;
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    box-shadow: 0px 18px 45px rgba(47, 30, 4, 0.08);
}
.skin-analysis .inner-section .details-wrapper .detail-item h5 {
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-style: normal;
    color: #60483d;
    font-size: 20px;
    text-align: center;
    margin-bottom: 1.1rem;
}

/* toggle button */
.gender-toggle {
    display: flex;
    align-items: center;
    gap: 20px;
    font-family: Arial, sans-serif;
}

.gender-toggle .label {
    font-size: 14px;
    letter-spacing: 1px;
    color: #60483d;
}

.switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 35px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* Outer capsule */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f4e1c6;
    border-radius: 50px;
    transition: 0.28s ease;
    box-shadow: inset 2px 2px 2px 0px #00000040;
}

/* Inner circle */
.slider:before {
    content: "";
    position: absolute;
    height: 25px;
    width: 25px;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #60483d;
    border-radius: 50%;
    transition: 0.28s ease;
    box-shadow: 1px 1px 2px #00000066;
}

/* Move circle to right on select (MALE) */
input:checked + .slider:before {
    transform: translateY(-50%) translateX(38px);
}

/* toggle button */

.skin-analysis .detail-item.age-item {
    cursor: default;
}

.skin-type-options {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.skin-type-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-size: 1.04vw;
    /* letter-spacing: 0.12em; */
    text-transform: uppercase;
    color: #60483d;
    cursor: pointer;
    position: relative;
}
@media (max-width: 991.98px) {
    .skin-type-option {
        font-size: 14px;
    }
}
@media (max-width: 575.98px) {
    .skin-type-option {
        font-size: 3.5vw;
    }
}

.skin-type-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
}

.skin-type-option span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Outer circle is already good */
.skin-type-option span::before {
    content: "";
    width: 1.73vw;
    height: 1.73vw;
    border-radius: 50%;
    background: #f4e1c6;
    box-shadow: inset 2px 2px 2px 0px #00000040;
    position: relative;
    transition: all 0.25s ease;
}
@media (max-width: 575.98px) {
    .skin-type-option span::before {
        width: 5.84vw;
        height: 5.84vw;
    }
}

/* Default inner circle (invisible) */
.skin-type-option span::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    opacity: 0;

    /* Keep it centered inside */
    margin-left: 14px; /* center when size = 0 */

    transition: all 0.25s ease;
}

/* Inner circle (appears only when checked) */
.skin-type-option input:checked + span::after {
    width: 1.04vw;
    height: 1.04vw;
    opacity: 1;
    background: #60483d;
    box-shadow: 2px 2px 2px 0px #00000040;
    margin-left: 0.34vw; /* recenter when visible */
}
@media (max-width: 575.98px) {
    .skin-type-option input:checked + span::after {
        width: 3.5vw;
        height: 3.5vw;
        margin-left: 1.16vw;
    }
}

/* Color highlight on text */
.skin-type-option input:checked + span {
    color: #7c4c14;
    font-weight: 500;
    font-size: 1.04vw;
    vertical-align: bottom;
    text-transform: uppercase;
}
@media (max-width: 991.98px) {
    .skin-type-option input:checked + span {
        font-size: 14px;
    }
}
@media (max-width: 575.98px) {
    .skin-type-option input:checked + span {
        font-size: 3.5vw;
    }
}

.age-card {
    width: 100%;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    gap: 2.25rem;
}

.age-card button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    padding-bottom: 0.5vw;
    border: none;
    background: #60483d;
    box-shadow: 2px 2px 2px 0px #00000040;
    color: #fff;
    font-size: 2.4vw;
    font-weight: 100 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
@media (max-width: 576px) {
    .age-card button {
        font-size: 7.4vw;
        padding-bottom: 0.9vw;
    }
}

.age-card button:focus-visible {
    outline: 2px solid #8c6529;
    outline-offset: 4px;
}

.age-card button:active {
    transform: scale(0.94);
    box-shadow: 2px 2px 2px 0px #00000040;
}

.age-display {
    text-align: center;
    font-family: "Urbanist", sans-serif;
}

.age-number {
    font-family: "Urbanist", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 30px;
    line-height: 110%;
    letter-spacing: -0.02em;
    text-align: center;
    text-transform: capitalize;
    color: #60483d;
    background: transparent;
    border: none;
    outline: none;
    width: 60px;
    padding: 0;
    margin: 0;
    appearance: textfield;
    -moz-appearance: textfield;
}

.age-number::-webkit-outer-spin-button,
.age-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.age-number:focus {
    outline: none;
}

.age-unit {
    display: block;
    margin-top: 0.35rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 12px;
    line-height: 110%;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: center;
    color: #60483d;
}

.details-wrapper .founder-card {
    /* background: linear-gradient(219.4deg, #fff3d9 50.43%, #f0cd82 82.13%); */
    /* width: 100%; */
    background: linear-gradient(219.4deg, #f4e1c6 50.43%, #d7bca6 82.13%);
    max-width: 40vw;
    border: 1px solid #d7bca6;
    box-shadow: 0px 6px 16px 0px #00000040;
    border-radius: 1rem;
    display: flex;
    flex-direction: row;
    /* position: relative; */
}
@media (max-width: 991.98px) {
    .details-wrapper .founder-card {
        width: 50%;
        max-width: unset;
    }
}
@media (max-width: 576.98px) {
    .details-wrapper .founder-card {
        width: 100%;
    }
}
.details-wrapper .founder-card .founder-image {
    display: block;
    width: 18.36vw;
}
@media (max-width: 576.98px) {
    .details-wrapper .founder-card .founder-image {
        display: none;
    }
}
.details-wrapper .founder-card .founder-image-mobile {
    display: none;
}
@media (max-width: 576.98px) {
    .details-wrapper .founder-card .founder-image-mobile {
        display: block;
    }
}

.details-wrapper .founder-card .text-note {
    display: flex;
    flex-direction: column;
    gap: 0.35vw;
    padding-left: 0.2vw;
    padding-top: 5.4vw;
    padding-right: 2.2vw;
    padding-bottom: 4.65vw;
}
@media (max-width: 576.98px) {
    .details-wrapper .founder-card .text-note {
        gap: 1vw;
    }
}

.details-wrapper .founder-card .text-note .founder-text {
    display: flex;
    flex-direction: column;
    gap: 0.2vw;
    margin-top: 0.5vw;
    margin-left: 0.4vw;
}

.details-wrapper .founder-card .text-note p {
    font-family: "Urbanist", sans-serif !important;
    font-weight: 400 !important;
    font-style: Italic;
    color: #60483d;
    text-align: start;
    font-size: 1.66vw;
    line-height: 115.99999999999999%;
}
@media (max-width: 576.98px) {
    .details-wrapper .founder-card .text-note p {
        font-size: 4.43vw;
    }
}

.details-wrapper .founder-card .text-note .name {
    font-family: Urbanist;
    font-weight: 500;
    text-align: start !important;
    font-style: Italic;
    font-size: 0.97vw;
    line-height: 115.99999999999999%;
    /* letter-spacing: 0%; */
    color: #60483d;
}
@media (max-width: 576.98px) {
    .details-wrapper .founder-card .text-note .name {
        font-size: 3.27vw;
    }
}
.details-wrapper .founder-card .text-note .founder {
    font-family: Urbanist;
    font-weight: 500;
    text-align: start !important;
    font-style: Italic;
    font-size: 0.76vw;
    line-height: 115.99999999999999%;
    /* letter-spacing: 0%; */
    color: #60483d;
}
@media (max-width: 576.98px) {
    .details-wrapper .founder-card .text-note .founder {
        font-size: 2.57vw;
    }
}

.details-wrapper .consent-card {
    /* width: 100%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 40vw;
    max-width: 40vw;
    background-color: #ffffff;
    border: 1px solid #d7bca6;
    box-shadow: 0px 6px 16px 0px #00000040;
    border-radius: 1rem;
    padding-top: 3vw;
    padding-bottom: 2.5vw;
}
@media (max-width: 991.98px) {
    .details-wrapper .consent-card {
        width: 50%;
        max-width: unset;
        gap: 1vw;
    }
}
@media (max-width: 576.98px) {
    .details-wrapper .consent-card {
        width: 100%;
        gap: 3vw;
        padding-top: 5.7vw;
        padding-bottom: 7vw;
        padding-left: 5.6vw;
        padding-right: 5.6vw;
    }
}
.inner-section .details-wrapper .consent-card h4 {
    font-family: Urbanist;
    font-weight: 500;
    font-style: Medium;
    font-size: 1.45vw;
    letter-spacing: 0%;
    text-align: center;
    color: #60483d;
}
@media (max-width: 576.98px) {
    .inner-section .details-wrapper .consent-card h4 {
        font-size: 4.9vw;
    }
}

.details-wrapper .consent-card p {
    font-family: Urbanist;
    font-weight: 500;
    color: #454545;
    font-style: Medium;
    font-size: 1.04vw;
    line-height: 140%;
    letter-spacing: 0%;
    text-align: center;
}
@media (max-width: 576.98px) {
    .details-wrapper .consent-card p {
        font-size: 3.5vw;
    }
}
.img-check {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #60483d;
    outline: none;

    /* Default (unchecked) icon */
    background-color: #fff;
    background-size: 70%; /* shrink icon inside */
    background-repeat: no-repeat;
    background-position: center;

    /* Smooth fade */
    transition: background-image 0.25s ease, opacity 0.25s ease;
}

/* Checked state */
.img-check:checked {
    background-image: url("../../assets/img/white-tick.png");
    background-color: #60483d;
}

.details-wrapper .consent-card .terms-card p {
    font-family: Plus Jakarta Sans;
    font-weight: 500;
    font-style: Medium;
    font-size: 0.9vw;
    text-transform: capitalize;
    color: #60483d;
}
@media (max-width: 576.98px) {
    .details-wrapper .consent-card .terms-card p {
        font-size: 3.03vw;
    }
}

.face-scan .details-wrapper img {
    position: relative;
    z-index: 10;
    max-width: 100%;
    width: 19.4vw;
    height: auto;
}

.face-scan .details-wrapper {
    align-items: center !important;
    gap: 5.5vw !important;
}
.face-scan .details-wrapper .card-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2vw;
}

.face-scan .btn-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.1vw;
}
@media (max-width: 576.98px) {
    .face-scan .btn-wrap {
        gap: 2.6vw;
    }
}

.face-scan .btn-wrap button {
    padding: 0.51vw 1.73vw !important;
    gap: 0.5vw !important;
}
@media (max-width: 991.98px) {
    .face-scan .btn-wrap button {
        padding: 1vw 2.73vw !important;
        gap: 1vw !important;
    }
}
@media (max-width: 576.98px) {
    .face-scan .btn-wrap button {
        padding: 2.1vw 5.73vw !important;
        gap: 2vw !important;
    }
}

.face-scan .btn-wrap .upload-trigger {
    font-family: Plus Jakarta Sans;
    /* font-weight: 600; */
    /* font-style: SemiBold; */
    font-size: 15px;
    color: #454545;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    text-transform: capitalize;
    text-decoration: underline;
}

.face-scan .btn-wrap .left-arrow-g-btn .icon {
    width: 1.66vw;
    height: 1.66vw;
    margin-left: 0 !important;
    margin-bottom: 0.14vw !important;
}
.face-scan .btn-wrap .left-arrow-g-btn .icon img {
    width: 1.66vw;
    height: 1.66vw;
}

@media (max-width: 991.98px) {
    .face-scan .btn-wrap .left-arrow-g-btn .icon {
        width: 2.6vw;
        height: 2.6vw;
    }
    .face-scan .btn-wrap .left-arrow-g-btn .icon img {
        width: 2.6vw;
        height: 2.6vw;
    }
}
@media (max-width: 576.98px) {
    .face-scan .btn-wrap .left-arrow-g-btn .icon {
        width: 5.6vw;
        height: 5.6vw;
    }
    .face-scan .btn-wrap .left-arrow-g-btn .icon img {
        width: 5.6vw;
        height: 5.6vw;
    }
}

.tip-card {
    display: flex;
    position: relative;
    align-items: center;
    background: #f8f3ea;
    border: 1px solid #60483d;
    border-radius: 12px;
    padding-top: 1.04vw;
    padding-bottom: 1.04vw;
    padding-right: 1.87vw;
    padding-left: 3.05vw;
    width: 18.75vw;
    gap: 16px;
    font-family: sans-serif;
    box-shadow: 0px 6px 16px 0px #00000040;
}
@media (max-width: 991.98px) {
    .tip-card {
        width: 18.75vw;
    }
}

@media (max-width: 576.98px) {
    .tip-card {
        width: 100%;
    }
}

/* Left Number Circle */
.tip-number {
    width: 32px;
    height: 32px;
    position: absolute;
    left: -15;
    background: #60483d;
    color: white;
    font-size: 1.04vw;
    font-weight: 400;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 576.98px) {
    .tip-number {
        width: 23px;
        height: 23px;
        font-size: 3.5vw;
        padding-top: 0.2vw;
    }
}

/* Empty placeholder for your icon */
.tip-icon {
    width: 33px;
    height: auto;
}

/* Text */
.tip-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tip-content p {
    margin: 0.3vw 0;
    font-size: 1.042vw;
    color: #454545;
}

.face-scanner-wrapper {
    margin: 0 !important;
}

#capture-btn {
    position: static !important;
    bottom: unset !important;
    left: unset !important;
    transform: none !important;
    cursor: pointer; /* you probably still want this */
}

@media (max-width: 575.98px) {
    .face-scan .details-wrapper {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* Face scanner appears first */
    .face-scan .face-scanner-wrapper {
        order: 1;
    }

    /* First card-wrapper (tips 1-2) appears second */
    .face-scan .details-wrapper .card-wrapper:first-of-type {
        order: 2;
    }

    /* Second card-wrapper (tips 3-4) appears third */
    .face-scan .details-wrapper .card-wrapper:last-of-type {
        order: 3;
    }

    /* Make cards display side-by-side within each card-wrapper */
    .face-scan .details-wrapper .card-wrapper {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 8vw;
        justify-content: center;
    }

    .tip-content p {
        margin: 0.3vw 0;
        font-size: 3.037vw;
        color: #454545;
    }
}

/* Skin Score Box Styles */

.result-section {
    justify-content: start !important;
    /* height: 50vh !important; */
}
@media (max-width: 576.98px) {
    .result-section {
        height: auto;
    }
}

.skin-score {
    width: 100%;
    /* max-width: 1200px; */
    max-width: 88.75vw;
    margin: 0 auto;
    padding: 2rem;
}

.skin-score-container {
    background: #fff;
    border-radius: 1.5rem;
    border: 1px solid #d7bca6;
    padding: 0.69vw;
    display: flex;
    gap: 2.7vw;
    box-shadow: 0px 18px 45px rgba(47, 30, 4, 0.08);
}

.skin-score-left {
    display: flex;
    flex-direction: row;
    gap: 2.29vw;
    flex: 0 0 auto;
    min-width: 300px;
}
.user-image-wrapper {
    width: 11.2vw !important;
    height: auto;
    border-radius: 1rem;
    overflow: hidden;
}
@media (max-width: 991.98px) {
    .user-image-wrapper {
        width: 24.2vw !important;
    }
}
@media (max-width: 576.98px) {
    .user-image-wrapper {
        width: 100% !important;
        height: auto;
        border-radius: 1rem;
        overflow: hidden;
        /* background: #fff;
    padding: 0.5rem; */
        /* box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.1); */
    }
}

.user-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
}

.user-profile-image {
    display: block;
}
@media (max-width: 576.98px) {
    .user-profile-image {
        display: none;
    }
}
.user-profile-image-mobile {
    display: none;
}
@media (max-width: 576.98px) {
    .user-profile-image-mobile {
        display: block;
    }
}

.skin-score-intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.skin-score-title {
    font-family: "Urbanist", sans-serif;
    font-weight: 600;
    font-size: 1.73vw;
    white-space: nowrap;
    line-height: 1.2;
    color: #60483d;
    margin: 0;
}

.skin-score-description {
    /* font-family: "Plus Jakarta Sans", sans-serif; */
    font-family: "Urbanist", sans-serif;
    font-weight: 400 !important;
    font-size: 1.04vw;
    white-space: nowrap;
    line-height: 1.5;
    color: #454545;
    margin: 0;
}

.skin-score-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.3vw;
}

.skin-attributes-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.27vw;
}
.skin-attribute-box {
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.3vw 1.2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4vw;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid;
}

.skin-attribute-box:hover {
    transform: translateY(-2px);
    box-shadow: 0px 6px 16px rgba(0, 0, 0, 0.15);
}

.skin-attribute-box.good {
    background-color: #60483d;
    border: none;
    color: white !important;
}

/* ensure inner text uses white */
.skin-attribute-box.good .attribute-name,
.skin-attribute-box.good .attribute-score {
    color: #ffffff !important;
}

.skin-attribute-box.need-work {
    background-color: #b78d70;
    border: none;
    color: white !important;
}

/* ensure inner text uses white */
.skin-attribute-box.need-work .attribute-name,
.skin-attribute-box.need-work .attribute-score {
    color: #ffffff !important;
}

.skin-attribute-box.take-action {
    background-color: #f4e1c6;
    border: none;
}

/* ensure inner text uses #454545 */
.skin-attribute-box.take-action .attribute-name,
.skin-attribute-box.take-action .attribute-score {
    color: #454545 !important;
}

.attribute-name {
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-size: 0.902vw;
    white-space: nowrap;
    color: #454545;
    text-align: center;
    line-height: 1.3;
}

.attribute-score {
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-size: 1.38vw;
    color: #454545;
    text-align: center;
}

.skin-score-legend {
    display: flex;
    /* justify-content: center; */
    gap: 2rem;
    /* padding-top: 1rem;
    border-top: 1px solid #e6c78b; */
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.legend-dot.good {
    background-color: #60483d;
}

.legend-dot.need-work {
    background-color: #b78d70;
}

.legend-dot.take-action {
    background-color: #f4e1c6;
}

.legend-text {
    font-family: "Urbanist", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #454545;
}

/* products recommendation */
@media (max-width: 991.98px) {
    .result-products {
        padding-top: 5vw;
    }
}
@media (max-width: 575.98px) {
    .result-products {
        padding-top: 16vw;
    }
}
.result-products .title {
    width: auto !important;
}
.result-products .title h5 {
    color: #60483d !important;
    font-size: 3.125vw !important;
}
@media (max-width: 991.98px) {
    .result-products .title h5 {
        font-size: 5.5vw !important;
    }
}
@media (max-width: 575.98px) {
    .result-products .title h5 {
        font-size: 9.34vw !important;
    }
}

.result-products .recommendation-wrapper .recc-products {
    border: 1px solid #d7bca6;
    width: 27.38vw !important;
}
@media (max-width: 991.98px) {
    .result-products .recommendation-wrapper .recc-products {
        width: calc(50% - 1.66vw) !important;
    }
}
@media (max-width: 575.98px) {
    .result-products .recommendation-wrapper .recc-products {
        width: auto !important;
    }
}
@media (max-width: 575.98px) {
    .result-products
        .recommendation-wrapper
        .recc-products
        .buy-now-btn
        .button {
        font-size: 2.73vw !important;
    }
}
.recoment-products
    .recomented-ptoducts-wrapper
    > li
    .bottom-section
    .bottom-inner-wrapper
    .aiz-megabox
    .aiz-megabox-elem {
    padding: 0.1vw 0.9vw;
}
@media (max-width: 575.98px) {
    .recoment-products
        .recomented-ptoducts-wrapper
        > li
        .bottom-section
        .bottom-inner-wrapper
        .aiz-megabox
        .aiz-megabox-elem {
        padding: 0.7vw 1.8vw;
    }
}

.recc-products .bottom-section .bottom-inner-wrapper .wrapper {
    margin-bottom: 0 !important;
}

@media (max-width: 575.98px) {
    .recoment-products
        .recomented-ptoducts-wrapper
        > li
        .bottom-section
        .bottom-inner-wrapper
        .user-action-wrapper
        .buy-now-btn
        button {
        font-size: 3.5vw !important;
    }
}
@media (max-width: 575.98px) {
    .recoment-products .title .qgen {
        display: flex !important;
        margin-top: 4.6vw;
    }
}
@media (max-width: 575.98px) {
    .recoment-products .title .qgen h6 {
        font-size: 1.93vw !important;
    }
}
@media (max-width: 575.98px) {
    .recoment-products .title .qgen img {
        width: 16.35vw !important;
    }
}

.result-products
    .recommendation-wrapper
    .recc-products
    .bottom-section
    .bottom-inner-wrapper
    .user-action-wrapper
    .buy-now-btn
    button {
    background: linear-gradient(180deg, #f4e1c6 0%, #b78d70 100%) !important;
    border: 1px solid #f4e1c6 !important;
    color: #60483d !important;
}
@media (max-width: 575.98px) {
    .result-products
        .recommendation-wrapper
        .recc-products
        .bottom-section
        .bottom-inner-wrapper
        .user-action-wrapper
        .buy-now-btn
        button {
        padding: 2.92vw 2.77vw !important;
    }
}
.result-products
    .recommendation-wrapper
    .recc-products
    .bottom-section
    .bottom-inner-wrapper
    .user-action-wrapper
    .buy-now-btn
    button:hover {
    background: linear-gradient(180deg, #f6debc 0%, #c49472 100%) !important;
}

.result-products
    .recommendation-wrapper
    .recc-products
    .bottom-section
    .bottom-inner-wrapper
    .aiz-megabox
    .aiz-megabox-elem {
    border: 1px solid #d7bca6 !important;
}
.result-products .recommendation-wrapper .recc-products .wrapper-oz-sub {
    margin-bottom: 1.69vw !important;
}
/* @media (max-width: 575.98px) {
    .result-products .recommendation-wrapper .recc-products .wrapper-oz-sub {
        margin-bottom: 0 !important;
    }
} */
.result-products .recommendation-wrapper .recc-products .wrapper-oz-sub form {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.result-products .recommendation-wrapper {
    display: flex;
    justify-content: space-between !important;
}
/* @media (max-width: 991.98px) {
    .result-products .recommendation-wrapper {
        flex-direction: column;
    }
} */
@media (max-width: 575.98px) {
    .result-products .recommendation-wrapper {
        flex-direction: column;
    }
}
@media (max-width: 575.98px) {
    .recoment-products
        .recomented-ptoducts-wrapper
        > .recc-products
        .wish-list-btn.skin-analysis-wishlist {
        top: 3.803vw !important;
        left: 32.802vw !important;
    }
}

@media (max-width: 575.98px) {
    .recoment-products
        .recomented-ptoducts-wrapper
        > .recc-products
        .bottom-section
        .bottom-inner-wrapper
        .wrapper.skin-price-wrapper {
        margin-bottom: 0 !important;
    }
}
@media (max-width: 575.98px) {
    .recoment-products
        .recomented-ptoducts-wrapper
        > .recc-products
        .bottom-section
        .bottom-inner-wrapper
        .wrapper.skin-price-wrapper
        .price
        .label {
        font-size: 3.73vw !important;
    }
}
@media (max-width: 575.98px) {
    .product-items > li .wrapper .price {
        margin-bottom: 0 !important;
    }
}

/* products recommendation */

/* blog recommendation */
/* .result-blogs {
    padding-bottom: 10vw;
} */
/* .result-blogs .blog-oz {
    overflow-x: unset !important;
}
@media (max-width: 991.98px) {
    .result-blogs .blog-oz {
        overflow-x: scroll !important;
    }
} */
.result-blogs .blog-oz ul {
    /* justify-self: center; */
    margin-bottom: 2vw !important;
    padding: 0 !important;
    margin-left: 5.68vw !important;
    margin-right: 5.68vw !important;
    /* overflow: scroll; */
}
@media (max-width: 575.98px) {
    .result-blogs .blog-oz ul {
        justify-self: auto !important;
        margin-left: 2.68vw !important;
    }
}
.result-blogs .blog-oz ul li {
    width: 27.38vw !important;
    /* min-width: auto !important; */
}
@media (max-width: 991.98px) {
    .result-blogs .blog-oz ul li {
        width: auto !important;
        /* min-width: unset !important; */
    }
}
@media (max-width: 575.98px) {
    .result-blogs .blog-oz ul li {
        width: 72.42vw !important;
        min-width: 75vw !important;
    }
}
.result-blogs .title h6 {
    color: #60483d !important;
    font-size: 3.125vw !important;
}
@media (max-width: 991.98px) {
    .result-blogs .title h6 {
        font-size: 4.25vw !important;
    }
}
@media (max-width: 575.98px) {
    .result-blogs .title h6 {
        font-size: 5.84vw !important;
    }
}
.result-blogs.blog-section-r ul li a {
    background: linear-gradient(180deg, #f4e1c6 0%, #b78d70 100%) !important;
    color: #60483d !important;
}
.result-blogs.blog-section-r ul li a:hover {
    background: linear-gradient(180deg, #f6debc 0%, #c49472 100%) !important;
}
/* blog recommendation */

/* result cta */

.result-cta {
    width: 100%;
    max-width: 88.75vw;
    margin: 0 auto;
    /* padding-bottom: 10vw; */
}
.result-cta h6 {
    color: #f4e1c6 !important;
    font-size: 1.73vw !important;
    white-space: no-wrap;
}

@media (max-width: 991.98px) {
    .result-cta h6 {
        font-size: 4.25vw !important;
    }
}
@media (max-width: 575.98px) {
    .result-cta h6 {
        font-size: 5.84vw !important;
    }
}

.result-cta .bundle {
    background-color: #60483d !important;
}
.result-cta .bundle .left-arrow-g-btn {
    font-size: 1vw;
    padding: 0.5vw 1.73vw;
}

@media (max-width: 991.98px) {
    .result-cta .bundle .left-arrow-g-btn {
        font-size: 2.8vw;
        padding: 1.5vw 3.73vw;
    }
}
@media (max-width: 575.98px) {
    .result-cta .bundle .left-arrow-g-btn {
        font-size: 3.73vw;
        padding: 1.5vw 4.73vw;
    }
}

/* result cta */

/* faq skin  */

.sknl-faq
    .inner-wrapper
    .accordion-wrapper
    .accordion-item
    .accordion-header
    button {
    font-size: 1.73vw !important;
    padding: 2vw 0 !important;
}
@media (max-width: 575.98px) {
    .sknl-faq
        .inner-wrapper
        .accordion-wrapper
        .accordion-item
        .accordion-header
        button {
        font-size: 4.67vw !important;
        padding: 4.67vw 0 !important;
    }
}

.sknl-faq .inner-wrapper .title h6 {
    color: #60483d !important;
    font-size: 3.125vw !important;
}
@media (max-width: 575.98px) {
    .sknl-faq .inner-wrapper .title h6 {
        font-size: 9.34vw !important;
    }
}

/* faq skin  */

/* camera animation */
.step-2-page-c-4 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    margin: 0 auto;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 {
        height: auto;
        margin-bottom: 0;
    }
}
.step-2-page-c-4 .logo {
    margin-bottom: 4.73dvh;
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 .logo {
        margin-bottom: 3dvh;
    }
}
.step-2-page-c-4 .section-header-section {
    text-align: center;
    margin-bottom: 4dvh;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .section-header-section {
        margin-bottom: 3dvh;
    }
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 .section-header-section {
        margin-bottom: 3dvh;
    }
}
.step-2-page-c-4 .section-header-section h5 {
    color: #fff;
    font-family: "ARMOUR Ex";
    font-size: 0.93vw;
    font-style: normal;
    font-weight: 400;
    letter-spacing: -0.037vw;
    width: 2.18vw;
    height: 2.18vw;
    background: #454545;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 50%;
    margin-bottom: 1.17dvh;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .section-header-section h5 {
        font-size: 1.7vw;
        letter-spacing: -0.3vw;
        height: 4.5vw;
        width: 4.5vw;
        margin-bottom: 1.43dvh;
    }
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 .section-header-section h5 {
        font-size: 2.7vw;
        letter-spacing: -0.3vw;
        height: 5.5vw;
        width: 5.5vw;
        margin-bottom: 1.43dvh;
    }
}
.step-2-page-c-4 .section-header-section h6 {
    color: #454545;
    text-align: center;
    font-family: Urbanist;
    font-size: 2.08vw;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .section-header-section h6 {
        font-size: 3.6vw;
        line-height: 4.4vw;
        letter-spacing: -0.204vw;
    }
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 .section-header-section h6 {
        font-size: 4.6vw;
        line-height: 5.4vw;
        letter-spacing: -0.204vw;
    }
}
.step-2-page-c-4 .camera-wrapper {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 4.67dvh;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .camera-wrapper {
        padding: 3.41vw 4.906vw;
        border-radius: 5.976vw;
    }
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 .camera-wrapper {
        width: 100%;
        padding: 4.41vw 5.906vw;
        border-radius: 6.976vw;
    }
}
.step-2-page-c-4 .camera-wrapper .camera-module {
    margin-bottom: 2.5dvh;
    position: relative;
    height: 32dvh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.step-2-page-c-4 .camera-wrapper .camera-module::after {
    background: url(../images/know-skin-ai/camera-frame.png);
    background-repeat: no-repeat;
    background-size: contain !important;
    background-position: center;
    left: 50%;
    transform: translateX(-50%);
    width: 150%;
}
.step-2-page-c-4 .camera-wrapper .camera-module video {
    height: 31dvh;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0 auto;
    display: block;
    width: 30dvh;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .camera-wrapper .camera-module video {
        -o-object-fit: cover;
        object-fit: cover;
        width: 31dvh;
    }
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 .camera-wrapper .camera-module video {
        height: 30dvh;
        width: 29dvh;
    }
}
.step-2-page-c-4 .camera-wrapper .camera {
    margin-bottom: 4.5dvh;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .camera-wrapper .camera {
        margin-bottom: 3.5dvh;
    }
}
.step-2-page-c-4 .camera-wrapper .camera img {
    height: 34dvh;
    -o-object-fit: contain;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
.step-2-page-c-4 .camera-wrapper #results-section #capturedPic {
    height: 38dvh;
    border-radius: 5.2vw;
    -o-object-fit: cover;
    object-fit: cover;
    width: 13.43vw;
    -o-object-position: center;
    object-position: center;
    margin: 0 auto;
    display: block;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .camera-wrapper #results-section #capturedPic {
        margin: 0 auto;
        display: block;
        height: 36dvh;
        border-radius: 140px;
        width: 40vw;
    }
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 .camera-wrapper #results-section #capturedPic {
        margin: 0 auto;
        display: block;
        height: 36dvh;
        border-radius: 85px;
        width: 60vw;
    }
}
.step-2-page-c-4 .camera-wrapper p {
    color: #5d5b5b;
    text-align: center;
    font-family: Urbanist;
    font-size: 0.93vw;
    font-style: normal;
    font-weight: 400;
    line-height: 0.93vw;
    letter-spacing: 0.01vw;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .camera-wrapper p {
        font-size: 3.186vw;
        line-height: 3.186vw;
    }
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 .camera-wrapper p {
        font-size: 4.186vw;
        line-height: 4.186vw;
    }
}
.step-2-page-c-4 .upload-btn {
    color: #000;
    text-align: center;
    font-family: Urbanist;
    font-size: 1.04vw;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.14vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 0.26vw;
    background: #d2ae6a;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding-top: 0.72vw;
    padding-bottom: 0.72vw;
    padding-left: 1.3vw;
    padding-right: 1.3vw;
    margin: 0 auto;
    cursor: pointer;
    outline: 0;
    border: 0;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .upload-btn {
        font-size: 2.018vw;
        line-height: normal;
        letter-spacing: 0.28vw;
        padding-top: 1.41vw;
        padding-bottom: 1.41vw;
        padding-left: 3.73vw;
        padding-right: 3.73vw;
        border-radius: 0.504vw;
    }
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 .upload-btn {
        font-size: 4.35vw;
        letter-spacing: 0.55vw;
        padding-top: 3.255vw;
        padding-bottom: 3.255vw;
        padding-left: 8.3vw;
        padding-right: 8.3vw;
        border-radius: 1.16vw;
    }
}
.step-2-page-c-4 .upload-btn .icon {
    margin-right: 0.52vw;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .upload-btn .icon {
        margin-right: 1.009vw;
    }
}
@media (max-width: 575.98px) {
    .step-2-page-c-4 .upload-btn .icon {
        margin-left: 2vw;
    }
}
.step-2-page-c-4 .upload-btn .icon svg {
    width: 1.25vw;
    height: 1.25vw;
}
@media (max-width: 991.98px) {
    .step-2-page-c-4 .upload-btn .icon svg {
        width: 2.42vw;
        height: 2.42vw;
    }
}
@media (max-width: 576.98px) {
    .step-2-page-c-4 .upload-btn .icon svg {
        width: 5.58vw;
        height: 5.58vw;
    }
}
.step-2-page-c-4 .upload-btn-wrapper input {
    display: none;
}

/* camera animation */

@media (max-width: 991px) {
    .skin-analysis .inner-section-wrapper {
        height: auto;
        padding: 0 1.5rem 2rem;
    }

    .skin-analysis .inner-section .details-wrapper {
        /* flex-direction: row; */
        /* margin-bottom: 5vh; */
    }

    .skin-score {
        padding: 0;
    }

    .skin-score-container {
        flex-direction: column;
        padding: 3.4vw;
        gap: 2rem;
    }

    .skin-score-left {
        min-width: auto;
        /* align-items: center; */
        /* text-align: center; */
    }

    .user-image-wrapper {
        width: 150px;
        height: 180px;
    }

    .skin-score-title {
        font-size: 30px;
    }

    .skin-score-description {
        font-size: 14px;
    }

    .skin-attributes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.4vw;
    }

    .skin-attribute-box {
        padding: 2.33vw;
    }

    .attribute-name {
        font-size: 3.7vw;
    }

    .attribute-score {
        font-size: 4.6vw;
    }

    .skin-score-legend {
        flex-wrap: wrap;
        gap: 1rem;
    }
}
@media (max-width: 576px) {
    .skin-analysis .inner-section-wrapper {
        height: auto;
        width: 100%;
        padding: 0 25px;
        margin-bottom: 0;
    }

    .skin-analysis .inner-section .details-wrapper {
        flex-direction: column;
        /* margin-bottom: 4vh; */
    }
    .skin-score-title {
        font-size: 22px;
    }
    .skin-score-legend {
        justify-content: center;
    }
    /* 
    .skin-score {
        padding: 1rem;
    }

    .skin-score-container {
        flex-direction: column;
        padding: 1rem;
        gap: 2rem;
    }


    .user-image-wrapper {
        width: 150px;
        height: 180px;
    }

    .skin-score-title {
        font-size: 22px;
    }

    .skin-score-description {
        font-size: 14px;
    }

    .skin-attributes-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .skin-attribute-box {
        padding: 1rem 0.75rem;
    }

    .attribute-name {
        font-size: 12px;
    }

    .attribute-score {
        font-size: 18px;
    }

    .skin-score-legend {
        flex-wrap: wrap;
        gap: 1rem;
    } */
}