@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Rubik:wght@300..900&display=swap');

:root {
    --bg-primary: #FFF;
    --bg-secondary-light: #F1F1F1;
    --bg-secondary: #F5F5F5;
    --text-primary: #231F20;
    --primary-black: #231F20;
    --primary-dark: #000;
    --secondary-black: #232323;
    --text-gray: #6B6B6B;
    --secondary-blue: #1738BE;
    --RA-primary-cta: #384AD7;
    --text-field-outline: #E0E1E0;
    --text-field-outline-2: #CECCCC;
    --primary-green: #348F79;
    --bg-light-gray: #F9F8F4;
    --bg-light-yellow: #FFF8D6;
    --text-gray-60: #6B6B6B99;
    --bg-gray-f3: #f3f3f3;
}

:root {
    --range-accent: rgba(0, 240, 160, .4);
    --range-track-bg: rgba(242, 244, 245, .6);
    --range-track-height: 4px;
    --range-thumb-size: 16px;
    --range-thumb-border: 1px;
}



@-webkit-keyframes drawer-bottom-slide-in {
    0% {
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
        /* opacity: 0 */
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1 */
    }
}

@keyframes drawer-bottom-slide-in {
    0% {
        -webkit-transform: translateY(500px);
        transform: translateY(500px);
        /* opacity: 0 */
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        /* opacity: 1 */
    }
}

.range-input-wrapper {
    position: relative;

    .range-tooltip {
        font-size: 13px;
        font-weight: 500;
        line-height: 16px;
        color: #fff;
        background: #231f20;
        padding: 8px;
        border-radius: 6px;
        position: absolute;
        bottom: calc(100% + 8px);
        left: -24px;
        transform: translateX(-50%);
        display: none;
        white-space: normal;
        justify-content: center;
        box-shadow: 0 0 12px 2px rgba(0, 0, 0, 0.1618);
        width: 52px;

        &::before {
            content: '';
            position: absolute;
            left: 16px;
            bottom: -4px;
            width: 8px;
            height: 8px;
            transform: rotate(45deg);
            background: #231f20;
        }

        &.right-of-center {
            &::before {
                left: unset;
                right: 12px;
            }
        }
    }

    &:hover {
        .range-tooltip {
            display: flex;
        }
    }
}

.range-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    margin-block: 8px !important;
    height: var(--range-track-height) !important;
    border-radius: 4px !important;
    padding: 0 !important;
    outline: none;
}

/* WebKit thumb */
.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: pointer;
    appearance: none;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    border-radius: 50%;
    border: var(--range-thumb-border) solid #000;
    background: radial-gradient(circle at center, #000 0 28%, #fff 29% 100%);
    margin-top: -3px;
}

/* Firefox thumb */
.range-input::-moz-range-thumb {
    cursor: pointer;
    width: var(--range-thumb-size);
    height: var(--range-thumb-size);
    border-radius: 50%;
    border: var(--range-thumb-border) solid #000;
    background: radial-gradient(circle at center, #000 0 28%, #fff 29% 100%);
    margin-top: -3px;
}

.primaryBtn {
    padding: 0.75rem 1.5rem;
    background: var(--brandYellow);
    border: none;
    border-radius: 28px;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.375rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--primary-black);
    transition: all 0.35s ease-in-out;
}

.primaryBtn.cta:hover {
    background: var(--primary-dark);
    color: var(--white);
}

.outlinedBtn {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    outline: 1px solid var(--primary-black);
    border-radius: 28px;
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.375rem;
    text-align: center;
    text-transform: uppercase;
    color: var(--primary-black);
    transition: all 0.35s ease-in-out;
}

.outlinedBtn:focus,
.outlinedBtn:focus-within,
.outlinedBtn:focus-visible {
    outline: 1px solid var(--primary-black);
    border: none;
}

.ghostBtn {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    border: none;
    font-family: Montserrat;
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1;
    text-transform: uppercase;
    background: transparent;
}

.money-input {
    position: relative !important;
}

.money-input input {
    padding-left: 2.25rem !important;
    padding-right: 5.25rem !important;
}

.money-input::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.625rem;
    height: 0.9375rem;
    background-image: url('/images/talent/rupee.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    display: block;
}

.money-input::after {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    content: "lacs per annum";
    color: var(--rgb-dark-gray-60);
    font-size: 0.875rem;
}

.stock-options-input .money-input::after {
    content: "lacs";
}


.primaryBtn:disabled {
    background: var(--rgb-gray-20) !important;
    color: var(--rgb-overlay-dark-20) !important;
    pointer-events: none;
}

.primaryBtn:focus-visible {
    box-shadow: 0px 0px 0px 2px var(--primary-black);
}

button.whatsapp-btn {
    border: none;
    padding: 0;
    background: transparent;
}

textarea {
    all: unset;
    background: transparent;
    outline: 1px solid var(--text-field-outline-2);
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    overflow: auto;
    resize: vertical;
    display: block;
    width: 100%;
    color: var(--primary-black);
}

textarea::placeholder,
input::placeholder {
    color: var(--gray-A6) !important;
}

textarea:focus {
    outline: 2px solid var(--brandYellow);
}

input {
    all: unset;
    background: transparent;
    outline: 1px solid var(--text-field-outline-2);
    border-radius: 8px;
    padding: 1rem;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.0625rem;
    display: block;
    width: 100%;
    color: var(--primary-black);
}

input.error {
    outline: 1px solid var(--failureRed);
    margin: 0
}

input.err {
    outline: 1px solid var(--failureRed);
    margin: 0
}

textarea.err {
    outline: 1px solid var(--failureRed);
    margin: 0
}

.public-wrapper {
    display: block;
    overflow-y: hidden;
    width: 100%;
    height: 100%
}

.public-wrapper .navbar {
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 3.375rem;
    background: var(--bg-light-gray-f2);
    box-shadow: 0 1px 5px 0 var(--rgb-dark-24);
    z-index: 13;
    position: fixed;
    width: 100%;
}

.public-wrapper .navbar .logo {
    height: 2rem;
    width: auto
}

.public-wrapper .navbar .logo img {
    height: 100%;
    width: auto
}

.public-wrapper>.navbar .iconBtn {
    border: none;
    display: none;
    background: 0 0
}

.public-wrapper .pageContent {
    height: calc(100vh - 4.5rem);
    overflow-y: auto;
    padding: 3.375rem 3.375rem 1.5rem;
    overflow-x: hidden;
    margin-top: 4.5rem;
}

.public-wrapper .pageContent .heightoverflow {
    height: 87.5rem
}

/* @media(max-width:1023px) {
    .public-wrapper .pageContent {
        padding: 40px
    }

    .public-wrapper .navbar {
        padding-inline: 40px
    }
} */

@media(max-width:767px) {
    .public-wrapper .pageContent {
        padding: 40px 24px
    }

    .public-wrapper>.navbar {
        padding-inline: 24px
    }
}

@media(max-width:575px) {
    .public-wrapper>.navbar .loginBtn {
        display: none
    }

    .public-wrapper>.navbar .iconBtn {
        display: block
    }

    .public-wrapper .pageContent {
        padding: 32px 24px
    }

    .public-wrapper .singleOpportunity .oppHeadContainer .aboutVideoHead .playIcon .playIconHover {
        display: none
    }

    .ctc-breakdown-section {
        width: 100% !important;
        /* right: 0;
        top: 68px;
        gap: 8px;
        padding: 12px 16px;

        .breakdown-item {
            flex-direction: column !important;
            justify-content: normal !important;
            align-items: normal !important;
            gap: 8px;

            .breakdown-label {
                line-height: normal !important;

                h6 {
                    font-size: 12px !important;
                    line-height: 14px !important;
                }

                span {
                    font-size: 10px !important;
                    line-height: 12px !important;
                }
            }
        }

        hr {
            border: 1px solid var(--bg-light-gray-e0) !important;
            margin-top: 6px !important;
            margin-bottom: 6px !important;
        }

        .form-input {
            width: 100% !important;

            input {
                height: 40px !important;
            }
        } */
    }

    /* .ctc-breakdown-section.touchpoint-ctc-breakdown {
        top: 100px !important;
    }

    .ctc-breakdown-section.preferences-ctc-breakdown {
        top: 70px !important;
    } */
}

/* @media screen and (max-width: 1500px) {
    .ctc-breakdown-section.joinus-ctc-breakdown {
        top: 90px;
    }
} */

@media(max-width:425px) {
    .public-wrapper .pageContent {
        padding: 32px 16px
    }

    .public-wrapper>.navbar {
        padding-inline: 16px
    }
}

.public-wrapper.whiteNavbar .navbar {
    background: var(--white);
    margin-inline: 8px;
    box-shadow: none;
    height: 96px;
}

.public-wrapper.whiteNavbar>.content {
    height: calc(100vh - 96px);
}


.Toastify__toast {
    padding: 0 !important;
}

.Toastify__toast-body {
    padding: 0 !important;
}

.Toastify__toast-container {
    width: unset !important;
}

@media only screen and (max-width: 480px) {
    .Toastify__toast-container {
        width: 100vw !important;
    }
}


/* success modal notfiy END*/

.commonModal .success-modal-dialog {
    width: 716px;
    max-width: calc(100% - 30px);
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
    margin-top: 140px;
}

.commonModal .success-modal-dialog:has(.modal-body.center-content) {
    width: 568px;
}

.commonModal .successModal {
    outline: none;
    border-radius: 8px;
}

.commonModal .successModal .modalCloseBtn {
    top: 24px;
    right: 24px;
    width: 32px;
    height: 32px;
}

.commonModal .successModal .modalCloseBtn svg {
    width: 100%;
    height: 100%;
}

.commonModal .successModal .modal-body {
    font-size: 14px;
    padding: 40px;
    color: var(--primary-black);
    text-align: left;

    &.center-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
        text-align: center;

        .checked-icon {
            margin-bottom: 12px;
        }

        .head h5 {
            font-weight: 700;
            text-align: center;
        }

        .body p {
            color: #6b6b6b;
        }

        .thankYouBtn {
            width: 100%;
            background: #231F20;
            color: #fff;
            margin-top: 32px;
            font-size: 14px;
            line-height: 17px;
            font-weight: 700;
        }
    }
}

.commonModal .successModal .modal-body .head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 24px;
}

.commonModal .successModal .modal-body .head svg {
    width: 40px;
    height: 40px;
    min-width: 40px;
}

.commonModal .successModal .modal-body .head h5 {
    font-size: 22px;
    font-weight: 600;
    line-height: 27px;
    color: var(--primary-black);
    margin-bottom: 0;
}

@media(max-width: 768px) {
    .commonModal .successModal .modal-body {
        padding: 40px 24px 24px;
    }
}

@media(max-width: 576px) {
    .commonModal .successModal .modalCloseBtn {
        width: 24px;
        height: 24px;
    }

    .commonModal .successModal .modal-body .head h5 {
        font-size: 18px;
    }
}

@media(max-width: 480px) {
    .commonModal .successModal .modal-body {
        padding: 40px 16px 16px;
    }

    .commonModal .successModal .modal-body .head {
        padding-right: 0;
    }

    .commonModal .successModal .modal-body .head h5 {
        font-size: 14px;
    }

    .commonModal .successModal .modal-body .head svg {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .commonModal .successModal .modalCloseBtn {
        top: 16px;
        right: 16px;
    }
}

/* success modal notfiy END*/

/* Error boundry styling START*/
.error-boundry {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 16px;
    border: 1px solid var(--errorRed);
    border-radius: 8px;
    margin: 32px 16px;
    background: var(--white);
    flex-wrap: wrap;
}

.error-boundry .left {
    width: 124px;
    height: 124px;
    min-width: 124px;
}

.error-boundry .left img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.error-boundry .right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    margin: 12px 0;
}

.error-boundry .right h6 {
    font-size: 18px;
    font-weight: 600;
}

.error-boundry .right .msg {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 12px;
    line-height: 14.63px;
    color: var(--text-gray);
    font-weight: 500;
}

.error-boundry .right .msg a {
    color: var(--primary-blue);
}

.error-boundry .right .msg a:hover {
    text-decoration: underline;
}

.error-boundry .right details {
    font-size: 12px;
    line-height: 17px;
}

@media(max-width: 680px) {
    .error-boundry {
        flex-direction: column;
        align-items: flex-start;
        padding: 4px 16px 16px;
    }
}

/* Error boundry styling END*/


.ql-snow * {
    line-height: 1.5 !important;
    font-size: 14px;
}

/* Support chat start */
#fc_frame {
    bottom: 50px !important;
}

#freshworks-container #launcher-frame {
    bottom: 72px !important;
    z-index: 99 !important;
}

#freshworks-container #freshworks-frame-wrapper {
    bottom: 130px !important;
}

/* Support chat end */

/* Common Job Slider Start */
.commonSlider {
    position: relative;
    width: 100%;

    .slick-slider {
        margin-left: -8px;
    }

    .slick-list .slick-track {
        display: flex;
    }

    .slick-track .slick-slide {
        height: inherit;
        background: var(--white);
        border-radius: 16px;
        overflow: hidden;
        margin: 0 8px;
    }

    .slick-track .slick-slide>div {
        height: 100%;
    }

    .slick-dots {
        bottom: -30px;

        li {
            width: auto;
            height: auto;
        }

        li.slick-active button {
            background: var(--primary-dark);
            opacity: 1;
        }

        li button {
            background: var(--light-gray-D9);
            opacity: 1;
            height: 10px;
            width: 10px;
            margin: auto;
        }

        li button:before {
            display: none;
        }

    }

    .slick-arrow.slick-disabled {
        display: none !important;
    }

    .slick-next {
        background: var(--white) !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
    }

    .slick-prev {
        background: var(--white) !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
    }
}

.commonSlider .job-box {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    background: var(--white);
    border-radius: 16px;
    padding: 24px 16px 16px;
    border: 1px solid var(--text-field-outline-2);
    height: 100%;



    .earlyApplicant {
        position: absolute;
        top: 0;
        padding: 4px 8px;
        font-weight: 500;
        line-height: 1;
        border-radius: 0 0 4px 4px;
        background: linear-gradient(99.92deg, #D8EFF8 0%, #E4E4E4 93.25%);
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--primary-black);
        left: 20px;
        right: unset;
        white-space: nowrap;
        font-size: 11px;
        opacity: 0.75;
    }

    .earlyApplicant span:last-child {
        padding-left: 12px;
        position: relative;

        &::before {
            content: '';
            width: 4px;
            height: 4px;
            background: #B4C0C5;
            border-radius: 2px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
        }
    }

    .earlyApplicant span:only-child {
        padding-left: 0;

        &::before {
            all: unset;
            display: none;
        }
    }

    .job-save {
        position: absolute;
        top: 0;
        right: 0;
        border: none;
        background: transparent;
        padding: 12px;
        border-radius: 16px;

        &:hover {
            svg {
                fill: var(--primary-black);
            }
        }
    }

    .job-save.saved {
        svg {
            fill: var(--primary-black);
        }
    }


    .job-box-top {
        display: flex;
        align-items: flex-start;
        gap: 16px;
        width: 100%;

        .logo {
            background: var(--bg-light-gray);
            border-radius: 8px;
            padding: 6px;
            width: 42px;
            min-width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .company_intialBg .company_intial h6 {
                font-size: 16px;
            }
        }

        .top-right {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            margin-top: 4px;
            width: calc(100% - 58px);

            h6 {
                font-weight: 500;
                font-size: 18px;
                line-height: 1;
                color: var(--primary-black);
                width: 100%;

                span {
                    font-weight: inherit;
                    font-size: inherit;
                    line-height: inherit;
                    color: var(--primary-black);
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: inline-block;
                    white-space: nowrap;
                    max-width: calc(100% - 26px);
                }

                .uplersPartnerBadge {
                    margin-left: 4px;
                    position: relative;
                    display: inline;

                    .partenerIcon {
                        position: absolute;
                        top: -2px;
                        left: 0;
                    }
                }
            }

            span {
                font-weight: 500;
                font-size: 12px;
                line-height: 1;
                color: var(--text-gray);
            }
        }
    }

    .job-box-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;

        .job-payout {
            padding: 4px 8px;
            font-size: 10px;
            font-weight: 500;
            line-height: 12.19px;
            border-radius: 27px;
            background: linear-gradient(90deg, var(--rgb-peach-gredient-50) 0%, var(--rgb-gray-gredient-50) 100%);
        }

        .job-attribs {
            display: flex;
            align-items: center;
            gap: 8px 16px;
            flex-wrap: wrap;

            li {
                font-size: 10px;
                line-height: 1;
                font-weight: 600;
                display: flex;
                gap: 8px;
                background: var(--bg-light-gray);
                padding: 6px 8px;
                border-radius: 8px;
            }
        }
    }
}

/* Common Job Slider End */

/* Floating Info Tooltip Start */

.floatingInfoTooltip {
    padding: 0 4px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: default;

    img {
        position: relative !important;
        left: unset !important;
        top: unset !important;
        min-width: 14px;
    }

    .floatingInfoTooltipMessage {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: 260px;
        background: var(--primary-black);
        color: var(--white);
        border-radius: 8px;
        padding: 8px;
        font-size: 12px;
        line-height: 16px;
        font-weight: 500;
        z-index: 1000;
        white-space: normal;
        text-align: left;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.35s ease 0s;
        transition: all 0.35s ease 0s;

        &::before {
            content: '';
            width: 9px;
            height: 7px;
            display: inline-block;
            position: absolute;
            top: -6px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 0 4px 7px;
            border-color: var(--secondary-black) transparent;
            border-style: solid;
        }
    }

    &:hover .floatingInfoTooltipMessage {
        opacity: 1;
        visibility: visible;
    }

    &.left-edge .floatingInfoTooltipMessage {
        transform: translateX(0);
        left: -16px;

        &::before {
            left: 22px;
            transform: unset;
        }
    }

    &.right-edge .floatingInfoTooltipMessage {
        left: unset;
        transform: translateX(0);
        right: -16px;

        &::before {
            left: unset;
            right: 22px;
            transform: unset;
        }
    }

}


/* Mobile first style start */

.single-opp-mobile {
    .breadcrumb {
        width: 100%;
        background: var(--white);
        padding: 0 0 4px;
        margin: -12px 0 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

        a {
            display: flex;
            gap: 4px;
            justify-content: center;
            align-items: center;
            color: var(--primary-black);
            font-size: 11px;
            font-weight: 500;
            line-height: 14px;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: none;
            text-decoration-thickness: auto;
            text-underline-offset: auto;

            svg {
                width: 14px;
                height: 14px;
                transform: rotate(-180deg);
            }

            &:hover {
                text-decoration: none;
            }
        }

        .bookmarkIconBtn {
            border-radius: 6px;
            padding: 0.5rem 0.75rem;
            outline: 1px solid var(--rgb-dark-gray-60) !important;
            border: none;
            background: transparent;

            svg {
                width: 1rem;
                height: 1rem;
            }

            &.saved {
                svg path {
                    fill: var(--primary-black);
                }
            }
        }
    }

    .oppHead {
        position: relative;
        padding: 4px 0 24px 0;
        background: var(--white);

        .top-nudges {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;

            .nudge {
                padding-left: 12px;
                position: relative;
                display: flex;

                .earlyApplicant {
                    all: unset;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    color: var(--RA-primary-cta);
                    font-size: 10px;
                    font-weight: 600;
                    line-height: 1;
                }

                .partenerIcon {
                    gap: 4px;
                    color: #186644;
                    font-size: 11px;
                    font-weight: 500;
                    line-height: 13px;
                    text-transform: capitalize;
                    align-items: center;

                    .tooltiptext {
                        left: -12px !important;
                        z-index: 11 !important;
                        transform: none !important;

                        &::before {
                            left: 16px !important;
                            transform: rotate(45deg) !important;
                        }
                    }
                }

                &::before {
                    content: '';
                    width: 4px;
                    height: 4px;
                    border-radius: 2px;
                    background: var(--text-field-outline);
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translateY(-50%);
                }

                &:first-child {
                    padding: 0;

                    &::before {
                        display: none;
                    }
                }
            }


        }

        .top-nudges.appliedStatus {
            justify-content: space-between;

            .oppHeadActionTag {
                font-size: 10px;
                font-weight: 700;
                line-height: 12px;
                padding-left: 10px;
                position: relative;

                .dot {
                    width: 6px;
                    height: 6px;
                    border-radius: 6px;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 0;
                }
            }

            .appliedDate {
                color: var(--rgb-dark-gray-60);
                font-size: 9px;
                font-weight: 500;
                line-height: 11px;

                &::before {
                    display: none;
                }
            }
        }

        .jobTitle {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 16px;

            .logo {
                position: relative;
                width: 60px;
                min-width: 60px;
                height: 60px;
                border-radius: 8px;
                background: var(--white);
                align-items: center;
                justify-content: center;
                display: flex;
                padding: 2px;
                position: relative;
                outline: 1px solid var(--light-gray-D9);

                img {
                    max-width: 100%;
                    max-height: 100%;
                    vertical-align: middle;
                    border-radius: 6px;
                    /* aspect-ratio: 1;
                    object-fit: cover; */
                }

                .company_intialBg {
                    background: linear-gradient(136.64deg, #9600FF -11.53%, #AEBAF8 119.33%);
                    width: 100%;
                    height: 100%;
                    position: relative;
                    border-radius: 6px;

                    .company_intial h6 {
                        font-size: 20px;
                        line-height: 24px;
                    }
                }
            }

            .logo:has(.company_intialBg) {
                padding: 0;
                border: none;
            }

            .content {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;

                h6 {
                    color: var(--primary-black);
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 19px;
                }

                .companyName {
                    color: var(--text-gray);
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 15px;
                }
            }
        }

        .opportunitiesJobNote {
            color: var(--primary-black);
            font-size: 10px;
            font-weight: 500;
            line-height: 16px;
            padding: 4px 8px;
            border-radius: 4px;
            margin-bottom: 16px;
        }

        .jobAttribs {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            ul.attribs {
                margin-right: 56px;
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 7px;

                >span {
                    color: var(--primary-black);
                    font-size: 11px;
                    font-weight: 500;
                    line-height: 14px;
                    padding-left: 18px;
                    position: relative;
                    display: flex;
                    align-items: center;

                    img {
                        width: 14px;
                        height: 14px;
                        position: absolute;
                        left: 0;
                        top: 0;
                        opacity: 1;
                    }

                    .dpInfoTag {
                        padding: 0 0.25rem;
                        display: inline-block;
                        vertical-align: middle;
                        cursor: default;
                        position: relative;

                        img {
                            position: relative !important;
                            left: unset !important;
                            top: unset !important;
                        }

                        .dpInfoTagHover {
                            display: inline-block;
                            width: 12.5rem;
                            position: absolute;
                            text-align: left;
                            color: var(--white);
                            font-size: 0.75rem;
                            line-height: 1rem;
                            font-weight: 500;
                            background: var(--secondary-black);
                            border-radius: 8px;
                            top: 100%;
                            margin-top: 0.875rem;
                            padding: 0.75rem;
                            z-index: 1;
                            left: -3.0625rem;
                            opacity: 0;
                            visibility: hidden;
                            -webkit-transition: all 0.35s ease 0s;
                            transition: all 0.35s ease 0s;
                            pointer-events: none;
                            white-space: normal;

                            &::before {
                                content: '';
                                width: 9px;
                                height: 7px;
                                display: inline-block;
                                position: absolute;
                                top: -6px;
                                left: 32px;
                                border-width: 0 4px 7px;
                                border-color: var(--secondary-black) transparent;
                                border-style: solid;
                            }
                        }

                        &:hover .dpInfoTagHover {
                            opacity: 1;
                            visibility: visible;
                        }

                    }
                }

                >span.pricingModel {
                    flex-wrap: wrap;
                }
            }



            .notInterested .ghostBtn.outline {
                border: 1px solid var(--text-field-outline);
                padding: 10px;
                border-radius: 20px;
                position: absolute;
                top: 0;
                right: 0;

                svg {
                    width: 20px;
                    height: 20px;
                }
            }

            .notInterested .ghostBtn.outline.blue {
                border-color: var(--RA-primary-cta);
            }

            .notInterested {
                position: relative;

                .reasonsPopover {
                    position: absolute;
                    top: calc(100% + 32px);
                    right: 0;
                    width: 265px;
                    background: var(--white);
                    box-shadow: 1px 0px 6px 0px var(--rgb-dark-gray-12);
                    border-radius: 12px;
                    z-index: 10;
                    left: unset;
                    transform: unset;

                    .colorfullbg {
                        position: relative;
                        padding: 1px;

                        &::before {
                            position: absolute;
                            top: 0;
                            left: 0;
                            content: '';
                            width: 100%;
                            height: 100%;
                            z-index: -1;
                            border-radius: 12px;
                            background: linear-gradient(99.92deg, #9AA4F4 0%, var(--rgb-gray-gredient-20) 93.25%)
                        }

                        .reasons {
                            padding: 16px 12px;
                            border-radius: 12px;
                            display: flex;
                            flex-direction: column;
                            gap: 20px;
                            background: var(--white);
                            position: relative;

                            .head {
                                display: block;
                                position: relative;

                                .iconBtn {
                                    border: none;
                                    background: transparent;
                                    position: absolute;
                                    top: -2px;
                                    right: 0;
                                    transform: rotate(-180deg);

                                    svg {
                                        width: 20px;
                                        height: 20px;

                                        path {
                                            stroke: var(--text-gray);
                                        }
                                    }
                                }

                                h6 {
                                    font-weight: 600;
                                    font-size: 14px;
                                    line-height: 17px;
                                    margin-bottom: 4px;
                                }

                                span {
                                    font-weight: 400;
                                    font-size: 12px;
                                    line-height: 16px;
                                    color: var(--text-gray);
                                }
                            }

                            .reasonList li {
                                padding: 8px 0;
                                border-bottom: 1px solid var(--rgb-gray-20);

                                .checkboxInput {
                                    font-weight: 500;
                                    line-height: 16px;
                                    min-height: 16px;

                                    .checkbox,
                                    .checkmark {
                                        width: 16px;
                                        height: 16px;
                                    }
                                }
                            }

                            .reasonList li:first-child {
                                padding-top: 0;
                            }

                            .reasonList li:last-child {
                                border-bottom: none;
                                padding-bottom: 0;
                            }

                            .bottom {
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                gap: 8px;

                                .primaryBtn {
                                    font-size: 14px;
                                    line-height: 17px;
                                    display: flex;
                                    width: 100%;
                                    justify-content: center;
                                }

                                span {
                                    font-weight: 400;
                                    font-size: 11px;
                                    line-height: 1;
                                    text-align: center;
                                    color: var(--text-gray);
                                }
                            }
                        }
                    }
                }

                .undo {
                    flex-direction: column;
                    font-size: 8px;
                    gap: 6px;

                    .ghostBtn {
                        font-size: 10px;
                    }
                }
            }
        }

        .repostedTag {
            background: #afdbfb;
            color: #144454;
            font-size: 12px;
            font-weight: 500;
            padding: 4px 6px;
            border-radius: 4px;
            margin-top: 12px;
            display: block;
            width: max-content;
        }
    }

    .notInterstedMsgAction {
        font-size: 12px;
        line-height: 16px;
        padding: 8px 12px;

        .ghostBtn {
            font-size: 14px;
            line-height: 17px;
        }
    }

    .opportunitiesSKillsDiv {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-left: -16px;
        width: calc(100% + 32px);
        padding: 16px;
        background: var(--bg-light-gray);
        border-top: 1px solid var(--rgb-gray-20);
        border-bottom: 1px solid var(--rgb-gray-20);
        background: var(--bg-light-gray);
        color: var(--primary-black);
        font-size: 11px;
        font-weight: 500;
        line-height: 17px;

        label {
            color: var(--text-gray);
            font-size: 11px;
            font-weight: 600;
            line-height: 13px;
            margin-bottom: 6px;
        }

        .skill_boolean {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            line-height: 17px;
            font-size: 11px;

            strong {
                color: #231F20;
                font-weight: 500;
            }

            .skill_varients {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 4px;
                font-weight: 400;
                color: #231F20;
                padding-left: 10px;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 4px;
                    height: 4px;
                    border-radius: 4px;
                    background: #6B6B6B;
                }

                &:first-child {
                    padding-left: 0;

                    &::before {
                        display: none;
                    }
                }
            }
        }
    }

    .skills {
        padding: 1rem 2rem 0;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        font-weight: 400;
        font-size: 0.875rem;
        line-height: 1.25rem;


        label {
            font-weight: 600;
            font-size: 1rem;
            line-height: 1.25rem;
            margin-bottom: 0.5rem;
            text-transform: capitalize;
        }

        &.tailor-resume {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #F9F8F4;
            padding: 0.75rem !important;
            border-radius: 8px;
            gap: 0;

            label {
                margin-bottom: 0.25rem !important;
                font-size: 0.875rem;
                line-height: 100%;
                color: #4A4A4A;
            }

            .must_have_skills .must_have {
                display: flex;
                gap: 0.5rem;
                flex-wrap: wrap;

                .skill-tag {
                    padding: 0.375rem 0.5rem;
                    background: #EEEEEE;
                    border-radius: 0.375rem;
                    font-size: 0.75rem;
                    line-height: 100%;
                }
            }

            .good_to_have {
                margin-top: 1rem;

                .gh_skills {
                    font-size: 0.75rem;
                    line-height: 0.875rem;
                }
            }

            .tailor-promo-banner {
                display: flex;
                justify-content: space-between;
                gap: 12px;
                flex-wrap: wrap;

                .tpb-left {
                    display: flex;
                    gap: 0.375rem;

                    .tpb-content {
                        display: flex;
                        flex-direction: column;
                        gap: 0.25rem;

                        h2 {
                            font-size: 1rem;
                            line-height: 1.214;
                        }

                        span {
                            font-size: 0.75rem;
                            line-height: 1.214;
                        }

                        .pro-tip {
                            display: flex;
                            gap: 0.25rem;
                            font-size: 0.875rem;
                            line-height: 1.214;
                            font-weight: 400;

                            >strong {
                                white-space: nowrap;
                            }

                            span {
                                font-size: 0.875rem;
                            }

                            strong {
                                font-weight: 600;
                            }
                        }
                    }
                }

                .primaryBtn.gradientBtn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 0.875rem;
                    padding: 0.625rem 1.5rem;
                    gap: 0.5rem;
                    color: var(--white);
                    background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);

                    @media screen and (max-width:480px) {
                        width: 100%;
                    }
                }
            }
        }

    }

    .jobDescription {
        padding: 16px 0 24px;

        .HSContentWrap.alreadyEnagaged {
            max-height: 180px;
            overflow: hidden;
            position: relative;

            .showMoreBtn {
                color: var(--RA-primary-cta);
                text-align: right;
                font-size: 13px;
                font-weight: 700;
                line-height: 16px;
                text-decoration-line: underline;
                outline: none;
                border: none;
                background: var(--white);
                padding: 0;
                padding-left: 16px;
                margin: 0;
                position: absolute;
                bottom: 4px;
                right: 0;

                &::after {
                    content: '...';
                    background: var(--white);
                    position: absolute;
                    bottom: 0;
                    left: 4px;
                }
            }
        }
    }

    .mathcerDiv {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;

        .matcherList {
            background: var(--bg-light-gray);
            border-radius: 0;
            border: 1px solid var(--rgb-gray-20);
            margin-left: -16px;
            width: calc(100% + 32px);

            .matcherCard {
                display: flex;
                flex-direction: column;
                border-top: 2px solid var(--text-field-outline-2);
                box-sizing: border-box;
                padding: 16px;

                .content {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 0 12px 0;

                    h5 {
                        font-size: 12px;
                        font-weight: 600;
                        line-height: 14.63px;
                        color: var(--secondary-black);
                        margin-bottom: 8px;
                    }

                    h6 {
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 14.63px;
                        color: var(--secondary-black);
                    }

                    img.profilePic {
                        width: 48px;
                        height: 48px;
                        -o-object-fit: contain;
                        object-fit: contain;
                        margin-right: 16px;
                        border-radius: 28px;
                    }
                }

                .matcherBottom {
                    display: flex;
                    align-items: center;
                    gap: 13px;
                    border-top: 1px solid var(--rgb-gray-20);
                    padding: 8px 0 0;
                    flex-wrap: wrap;

                    .sendEmail {
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 14.63px;
                        color: var(--text-gray);

                        .mailIcon {
                            width: 16px;
                            height: 16px;
                            margin-right: 8px;
                        }

                        a {
                            color: inherit;
                            text-decoration: underline;
                        }

                        padding-left: 12px;
                        border-left: 1px solid var(--rgb-dark-gray-60);
                    }

                    .sendEmail:first-child {
                        padding: 0;
                        border: none;
                    }

                    button.icon-btn {
                        background-color: transparent;
                    }

                    button.icon-btn svg {
                        width: 32px;
                        height: 32px;
                    }
                }
            }

            .matcherCard:first-child {
                border-top: none;
            }
        }
    }

    .similar-jobs {
        padding: 16px 0;
        margin: 0;

        .header {
            font-size: 12px;
            line-height: 15px;

            a {
                text-transform: uppercase;
            }
        }

        .job-list {
            gap: 12px;
            margin: 0;

            .job-card.oppHead {
                border: none;
                border-radius: 8px;
                background: var(--bg-secondary);
                padding: 12px 16px;

                .jobTitle {
                    margin-bottom: 12px;

                    .logo {
                        width: 32px;
                        min-width: 32px;
                        height: 32px;
                        border-radius: 6px;

                        .company_intialBg {
                            .company_intial h6 {
                                font-size: 14px;
                                line-height: 16px;
                            }
                        }
                    }

                    .content {
                        h6 {
                            font-size: 12px;
                            font-weight: 700;
                            line-height: 15px;
                        }

                        .companyName {
                            font-size: 10px;
                            font-weight: 400;
                            line-height: 12px;
                            color: var(--primary-black);
                        }
                    }
                }

                .jobAttribs {
                    ul.attribs {
                        margin: 0;

                        span {
                            color: var(--primary-black);
                            font-size: 10px;
                            font-weight: 400;
                            line-height: 12px;

                            img {
                                width: 12px;
                                height: 12px;
                                opacity: 1;
                            }
                        }
                    }
                }
            }
        }
    }

    /* .similar-jobs.fade:not(.show) {
        opacity: 0;
        height: 0;
        padding: 0;
    } */



    .oppHead.job-card.similarJobLoadingCard {
        .jobTitle {
            .logo {
                border: none;
                outline: none;
            }

            .content {
                width: 100%;

                h6 {
                    background: var(--white);
                    width: 80%;
                    border-radius: 5px;
                    height: 15px;
                }

                .companyName {
                    background: var(--white);
                    width: 40%;
                    border-radius: 5px;
                    height: 12px;
                }
            }
        }

        .jobAttribs {
            ul.attribs {
                .remote-tag {
                    width: 120px;
                    height: 12px;
                    background: var(--white);
                    border-radius: 2px;
                    border: none;
                }

                .experience {
                    width: 91px;
                    height: 12px;
                    background: var(--white);
                    border-radius: 2px;
                    border: none;
                }
            }
        }
    }

    .aboutTheCompanySec {
        padding: 8px 0 148px;
        border: none;
        margin: 0;

        h3 {
            color: var(--primary-black);
            font-size: 14px;
            font-weight: 600;
            line-height: 17px;
        }

        .aboutcompanyList {
            margin: 16px 0 24px;

            .aboutComLogo {
                display: none;
            }
        }

        .aboutComInfo h2 {
            display: none;
        }
    }

    /* hs content start */

    .HSContent,
    .HSContent * {
        font-size: 0.8125rem;
        line-height: 1rem;
    }

    .HSContent p {
        font-size: 0.8125rem;
        line-height: 1rem;
    }

    .HSContentWrap>.HSContent {
        font-size: 0.8125rem;
        line-height: 1rem;

        * {
            font-family: Montserrat !important;
            font-size: 0.8125rem;
            line-height: 1rem;
        }

        span {
            font-size: 0.8125rem !important;
            line-height: 1rem !important;
        }
    }


    .HSContent.aboutCompany {
        font-size: 0.6875rem !important;

        * {
            font-size: 0.6875rem !important;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 0.8125rem !important;
            line-height: 1.375rem;

            * {
                font-size: inherit !important;
                line-height: inherit
            }
        }


    }

    /* hs content end */

    /* Assessment part start */

    .SingleOppAssessment {
        display: none;
    }

    .bottomActionDrawer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap-reverse;
        gap: 16px;
        padding: 12px 16px;
        border-radius: 16px 16px 0px 0px;
        border: 1px solid var(--text-field-outline);
        background: var(--lightest-yellow);
        box-shadow: 1px -2px 4px 0px var(--rgb-dark-gray-12);
        z-index: 11;

        .outreachBtn {
            width: 100%;
            outline: none !important;
        }

        &:has(.two-btns) {
            flex-direction: column;
            gap: 12px;
            align-items: unset;

            .two-btns {
                display: flex;
                align-items: center;
                gap: 12px;

                .primaryBtn.applyWithTailorCVBtn {
                    padding: 0.75rem;
                    width: calc(50% - 6px);
                }

                .outreachBtn {
                    width: calc(50% - 6px);
                    padding: 0.75rem;
                    height: 36px;
                }
            }
        }

        .bookmarkIconBtn {
            width: 43px;
            height: 43px;
            min-width: 43px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--white);
            outline: 1px solid var(--text-field-outline);
            border: none;
            border-radius: 27px;
            transition: background-color 0.3s ease;

            svg {
                width: 18px;
                height: 23px;
                transition: fill 0.3s ease, stroke 0.3s ease;
            }

            &.saved {
                background: var(--primary-black);

                svg path {
                    fill: var(--white);
                    stroke: var(--white);
                }
            }
        }

        .primaryBtn {
            background: var(--primary-black);
            color: var(--white);
            text-align: center;
            font-size: 14px;
            font-weight: 700;
            line-height: 18px;
            text-transform: uppercase;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            flex: 1;
        }

        .primaryBtn.applyWithTailorCVBtn {
            padding: 0.75rem 1.25rem;
            font-size: 11px;
            white-space: nowrap;
            background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
        }
    }

    /* Assessment part ends */
}


.jobCardMobile {
    position: relative;
    padding: 16px;
    margin-left: -16px;
    width: calc(100% + 32px);
    border-bottom: 2px solid var(--rgb-gray-20);
    background: var(--white);

    &:first-child {
        border-top: 2px solid var(--rgb-gray-20);
    }


    .top-nudges {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;

        .nudge {
            padding-left: 12px;
            position: relative;
            display: flex;

            .earlyApplicant {
                all: unset;
                display: flex;
                align-items: center;
                gap: 8px;
                color: var(--primary-blue);
                font-size: 10px;
                font-weight: 600;
                line-height: 1;
            }

            .partenerIcon {
                gap: 4px;
                color: #186644;
                font-size: 11px;
                font-weight: 500;
                line-height: 13px;
                text-transform: capitalize;
                align-items: center;

                .tooltiptext {
                    left: -12px !important;
                    z-index: 11 !important;
                    transform: unset !important;

                    &::before {
                        left: 22px !important;
                    }
                }
            }

            &::before {
                content: '';
                width: 4px;
                height: 4px;
                border-radius: 2px;
                background: var(--text-field-outline);
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
            }

            &:first-child {
                padding: 0;

                &::before {
                    display: none;
                }
            }
        }


    }

    .top-nudges.appliedStatus {
        justify-content: space-between;

        .oppHeadActionTag {
            font-size: 10px;
            font-weight: 700;
            line-height: 12px;
            padding-left: 10px;
            position: relative;

            .dot {
                width: 6px;
                height: 6px;
                border-radius: 6px;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
            }
        }

        .appliedDate {
            color: var(--rgb-dark-gray-60);
            font-size: 9px;
            font-weight: 500;
            line-height: 11px;

            &::before {
                display: none;
            }
        }
    }

    .jobTitle {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 16px;
        padding-right: 32px;

        position: relative;

        .uplersPartnerBadge {
            position: absolute;
            right: 0;
            top: 0;

            .partenerIcon .tooltiptext {
                right: -12px;
                z-index: 11;

                &::before {
                    right: 16px;
                }
            }
        }

        .logo {
            position: relative;
            width: 60px;
            min-width: 60px;
            height: 60px;
            border-radius: 8px;
            background: var(--white);
            align-items: center;
            justify-content: center;
            display: flex;
            padding: 2px;
            position: relative;
            outline: 1px solid var(--light-gray-D9);

            img {
                max-width: 100%;
                max-height: 100%;
                vertical-align: middle;
                border-radius: 6px;
                /* aspect-ratio: 1;
                object-fit: cover; */
            }

            .company_intialBg {
                background: linear-gradient(136.64deg, #9600FF -11.53%, #AEBAF8 119.33%);
                width: 100%;
                height: 100%;
                position: relative;
                border-radius: 6px;

                .company_intial h6 {
                    font-size: 20px;
                    line-height: 24px;
                }
            }
        }

        .logo:has(.company_intialBg) {
            padding: 0;
            border: none;
        }

        .content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;

            h6 {
                color: var(--primary-black);
                font-size: 14px;
                font-weight: 600;
                line-height: 19px;
            }

            .companyName {
                color: var(--text-gray);
                font-size: 12px;
                font-weight: 500;
                line-height: 15px;
            }
        }
    }

    .opportunitiesJobNote {
        color: var(--primary-black);
        font-size: 10px;
        font-weight: 500;
        line-height: 16px;
        padding: 4px 8px;
        border-radius: 4px;
        margin-bottom: 16px;
    }

    .jobAttribs {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        ul.attribs {
            margin-right: 56px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 7px;

            span {
                color: var(--primary-black);
                font-size: 11px;
                font-weight: 500;
                line-height: 14px;
                padding-left: 18px;
                position: relative;

                img {
                    width: 14px;
                    height: 14px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    opacity: 1;
                }
            }

            .dpInfoTag {
                padding: 0 4px;
                display: inline-block;
                vertical-align: middle;
                cursor: default;
                position: relative;

                img {
                    position: relative !important;
                    left: unset !important;
                    top: unset !important;
                }

                .dpInfoTagHover {
                    display: inline-block;
                    width: 200px;
                    position: absolute;
                    text-align: left;
                    color: var(--white);
                    font-size: 12px;
                    line-height: 16px;
                    font-weight: 500;
                    background: var(--secondary-black);
                    border-radius: 8px;
                    top: 100%;
                    margin-top: 14px;
                    padding: 12px;
                    z-index: 1;
                    left: -49px;
                    opacity: 0;
                    visibility: hidden;
                    -webkit-transition: all 0.35s ease 0s;
                    transition: all 0.35s ease 0s;
                    pointer-events: none;
                    white-space: normal;

                    &::before {
                        content: '';
                        width: 9px;
                        height: 7px;
                        display: inline-block;
                        position: absolute;
                        top: -6px;
                        left: 32px;
                        border-width: 0 4px 7px;
                        border-color: var(--secondary-black) transparent;
                        border-style: solid;
                    }
                }

                &:hover .dpInfoTagHover {
                    opacity: 1;
                    visibility: visible;
                }

            }
        }



        .notInterested .ghostBtn.outline {
            border: 1px solid var(--text-field-outline);
            padding: 10px;
            border-radius: 20px;
            position: absolute;
            top: 0;
            right: 0;

            svg {
                width: 20px;
                height: 20px;
            }
        }

        .notInterested .ghostBtn.outline.blue {
            border-color: var(--primary-blue);
        }

        .notInterested {
            position: relative;

            .reasonsPopover {
                position: absolute;
                top: calc(100% + 32px);
                right: 0;
                width: 265px;
                background: var(--white);
                box-shadow: 1px 0px 6px 0px var(--rgb-dark-gray-12);
                border-radius: 12px;
                z-index: 10;
                left: unset;
                transform: unset;

                .colorfullbg {
                    position: relative;
                    padding: 1px;

                    &::before {
                        position: absolute;
                        top: 0;
                        left: 0;
                        content: '';
                        width: 100%;
                        height: 100%;
                        z-index: -1;
                        border-radius: 12px;
                        background: linear-gradient(99.92deg, #9AA4F4 0%, var(--rgb-gray-gredient-20) 93.25%)
                    }

                    .reasons {
                        padding: 16px 12px;
                        border-radius: 12px;
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        background: var(--white);
                        position: relative;

                        .head {
                            display: block;
                            position: relative;

                            .iconBtn {
                                border: none;
                                background: transparent;
                                position: absolute;
                                top: -2px;
                                right: 0;
                                transform: rotate(-180deg);

                                svg {
                                    width: 20px;
                                    height: 20px;

                                    path {
                                        stroke: var(--text-gray);
                                    }
                                }
                            }

                            h6 {
                                font-weight: 600;
                                font-size: 14px;
                                line-height: 17px;
                                margin-bottom: 4px;
                            }

                            span {
                                font-weight: 400;
                                font-size: 12px;
                                line-height: 16px;
                                color: var(--text-gray);
                            }
                        }

                        .reasonList li {
                            padding: 8px 0;
                            border-bottom: 1px solid var(--rgb-gray-20);

                            .checkboxInput {
                                font-weight: 500;
                                line-height: 16px;
                                min-height: 16px;

                                .checkbox,
                                .checkmark {
                                    width: 16px;
                                    height: 16px;
                                }
                            }
                        }

                        .reasonList li:first-child {
                            padding-top: 0;
                        }

                        .reasonList li:last-child {
                            border-bottom: none;
                            padding-bottom: 0;
                        }

                        .bottom {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 8px;

                            .primaryBtn {
                                font-size: 14px;
                                line-height: 17px;
                                display: flex;
                                width: 100%;
                                justify-content: center;
                            }

                            span {
                                font-weight: 400;
                                font-size: 11px;
                                line-height: 1;
                                text-align: center;
                                color: var(--text-gray);
                            }
                        }
                    }
                }
            }

            .undo {
                flex-direction: column;
                font-size: 8px;
                gap: 6px;

                .ghostBtn {
                    font-size: 10px;
                }
            }
        }
    }

    .repostedTag {
        background: #afdbfb;
        color: #144454;
        font-size: 12px;
        font-weight: 500;
        padding: 4px 6px;
        border-radius: 4px;
        margin-top: 12px;
        display: block;
        width: max-content;
    }

    .mustHaveSkills {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 8px;
        flex-wrap: wrap;

        span {
            color: var(--text-gray);
            font-family: Montserrat;
            font-size: 11px;
            font-weight: 400;
            line-height: 13px;
            position: relative;
            padding-left: 10px;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 4px;
                height: 4px;
                border-radius: 4px;
                background: #A2A4A6;
            }

            &:first-child {
                padding-left: 0;

                &::before {
                    display: none;
                }
            }

        }

        .skill_boolean {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            line-height: 13px;
            font-size: 11px;

            strong {
                color: #6b6b6b;
                font-weight: 500;
            }

            .skill_varients {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-wrap: wrap;
                gap: 4px;
                font-weight: 400;
                color: #6b6b6b;
                padding-left: 10px;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 4px;
                    height: 4px;
                    border-radius: 4px;
                    background: #A2A4A6;
                }

                &:first-child {
                    padding-left: 0;

                    &::before {
                        display: none;
                    }
                }
            }
        }
    }
}

.jobCardMobile.allJobs {

    .bookmarkIconBtn {
        position: absolute;
        right: 0;
        top: -8px;
        width: 32px;
        height: 32px;
        min-width: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--white);
        outline: 1px solid var(--text-field-outline);
        border: none;
        border-radius: 16px;
        transition: background-color 0.3s ease;

        svg {
            width: 14px;
            height: 16px;
            transition: fill 0.3s ease, stroke 0.3s ease;
        }

        &.saved {
            background: var(--primary-black);

            svg path {
                fill: var(--white);
                stroke: var(--white);
            }
        }
    }

    .jobTitle {
        padding-right: 36px;
    }
}

.navbarMobilePageTitle {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-black);
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;

    button {
        background: transparent;
        border: none;
        outline: none;
        padding: 0;
        margin: 0;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;

        svg {
            width: 20px;
            height: 20px;
            transition: inherit;
        }

        &.active {
            text-decoration: underline;

            svg {
                transform: rotate(-180deg);
            }
        }
    }

    .jobs-popover {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: 204px;
        border-radius: 8px;
        border: 1px solid var(--text-field-outline-2);
        background: var(--white);
        box-shadow: 2px 4px 4px 0px var(--rgb-gray-shade-24);
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        display: none;
    }

    .jobs-popover.open {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 4px 0;

        a {
            color: var(--text-gray);
            font-size: 13px;
            font-weight: 500;
            line-height: 16px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            position: relative;

            &.active {
                background: var(--bg-light-yellow);

                &::before {
                    content: '';
                    position: absolute;
                    right: 16px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 16px;
                    height: 16px;
                    background: url('/images/talent/check.svg') no-repeat center center;
                    background-size: contain;
                }
            }
        }
    }
}

.sitemenu>ul>li.logoutBtn .menuLinkBtn {
    color: var(--errorRed);
    font-size: 16px;
    font-weight: 500;
    line-height: 17px;
    /* margin-top: 48px; */
}

.sidebar-content .resumeHealthBtn {
    margin: 20px 0 -8px 24px;
}

.sidebar-content .resumeHealthBtn .menuLinkBtn>span {
    border-radius: 32px;
    background: rgb(224, 255, 47);
    padding: 12px 16px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--primary-black);
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 13px;
    text-transform: uppercase;
    position: relative;

    svg {
        width: 13px;
        height: 13px;
    }

    .score {
        color: var(--errorRed);
    }

    .new {
        background: var(--AI-gradient-color, linear-gradient(90deg, var(--white) -199.41%, var(--primary-dark) -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 11px;
        font-weight: 700;
        line-height: 13px;
        right: 0px;
        top: -4px;
        position: absolute;
        text-transform: capitalize;
    }
}

.sidebar-content .job-search-preference-mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    padding: 12px 0px 12px 24px;
    margin-bottom: 60px;
    margin-top: 32px;

    .jbp-title {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-gray);
    }

    .jbp-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #f6f5f480;
        padding: 8px 12px;
        gap: 8px;
        border-radius: 8px;
        width: 100%;

        .js-status-info {
            display: flex;
            flex-direction: column;
            /* align-items: center; */
            justify-content: space-between;
            gap: 8px;

            .status-info-content {
                text-align: start;

                .jbp-status-text {
                    font-size: 12px;
                    font-weight: 500;
                }

                .jbp-dot-icon {
                    display: inline-block;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: #DFE2E1;
                    margin-right: 8px;
                }
            }
        }

        .jbp-actions-btn {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-left: 1.5rem;

            .jbp-action-btn {
                font-size: 0.75rem;
                font-weight: 600;
                padding: 0.375rem 0.75rem;
                border: none;
                border-radius: 4px;
                color: var(--text-gray);
                background: #8080802e;

                &.yes-bg {
                    background: var(--success);
                    color: var(--white);
                }

                &.no-bg {
                    background: var(--red);
                    color: var(--white);
                }
            }
        }

        .available-in-text {
            font-size: 12px;
            font-weight: 400;
            color: var(--text-gray);
            margin-left: 16px;
            text-align: start;
        }

        &.success {
            .jbp-dot-icon {
                background: #22c35d !important;
            }

            .job-search-toggle {
                background: #22c35d !important;
            }

            .job-search-toggle::before {
                left: 18px;
                background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(180deg, rgba(0, 0, 0, 0.02) 35.42%, rgba(0, 0, 0, 0.18) 100%);
            }
        }

        .job-search-toggle {
            position: relative;
            width: 36px;
            height: 20px;
            border-radius: 99px;
            background: #DFE2E1;
            box-shadow:
                0px 2px 4px 0px #0000000A,
                0px 1px 0px 0px #FFFFFF,
                0px 0px 8px 0px #00000005 inset,
                0px 0px 0px 0.5px #0000000F inset,
                0px 2px 4px 0px #0000000A inset,
                0px 1px 1px 0px #0000000A inset;
            transition: background 0.2s;
            cursor: pointer;

            &::before {
                content: "";
                display: block;
                width: 16px;
                height: 16px;
                position: absolute;
                top: 2px;
                left: 2px;
                border-radius: 99px;
                opacity: 1;
                background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(180deg, rgba(0, 0, 0, 0) 35.42%, rgba(0, 0, 0, 0.08) 100%);
                transition: left 0.2s;
            }
        }
    }

    .jbp-hr {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .js-preference-untill {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        /* padding: 14px 12px;
        background: #f6f5f480;
        border-radius: 8px; */
        width: 100%;

        .js-date-label {
            font-size: 12px;
            font-weight: 500;
        }

        >div {
            width: 100%;
        }

        .react-select__control {
            background: var(--white) !important;

            .react-select__indicator {
                padding: 4px;
            }

            .react-select__value-container .react-select__placeholder,
            .react-select__value-container .react-select__single-value {
                display: flex;
                align-items: flex-start;
                font-size: 13px !important;
            }

            .react-select__input-container {
                height: 20px !important;
            }
        }

        .react-select__menu .react-select__option {
            text-align: start;
        }
    }
}

@media screen and (max-width: 767px) {
    .top-toolbar .nav-right-list {
        display: none;
    }

}

.containSection .manage-account .getHelpBtnContainer {
    margin-top: 148px;

    .outlinedBtn {
        border-radius: 8px;
        padding: 8px 12px;
        border: none;
    }
}

.opportunitiesFilterMobile {
    margin: -24px 0 0 -16px;
    width: calc(100% + 32px);

    .opportunitiesFilterInner {
        padding: 20px 16px 12px;
        border-bottom: 0.5px solid var(--text-field-outline);
        background: var(--white);
        box-shadow: 1px 2px 4px 0px var(--rgb-dark-gray-20);

        .oppFilterTop {
            display: flex;
            gap: 16px;
            margin-bottom: 12px;

            .filterIconBtn {
                background: #EEF2F8;
                border: none;
                outline: none;
                padding: 0;
                margin: 0;
                width: 40px;
                min-width: 40px;
                height: 40px;
                border-radius: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;

                .filterCount {
                    position: absolute;
                    top: -4px;
                    right: -4px;
                    background: var(--primary-black);
                    color: var(--white);
                    font-size: 9px;
                    font-weight: 600;
                    line-height: 10px;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 2px;
                    min-width: 16px;
                    min-height: 16px;
                }

            }

            .oppSearchBox {
                position: relative;
                flex: 1;

                input {
                    background: #EEF2F8;
                    border: none;
                    outline: none;
                    padding: 12px 16px;
                    margin: 0;
                    padding-left: 40px;
                    border-radius: 8px;

                    &:focus,
                    &:focus-visible,
                    &:focus-within {
                        box-shadow: 0 0 0 1px var(--primary-black);
                    }

                }

                svg {
                    position: absolute;
                    left: 12px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 20px;
                    height: 20px;
                }
            }
        }

        .oppFilterBottom {
            .oppAdvanceFilter {
                display: flex;
                gap: 6px;

                .engagementFilter {
                    gap: 6px;

                    .checkbox {
                        padding: 6px;
                        color: var(--primary-black);
                        font-size: 11px;
                        font-weight: 500;
                        line-height: 1;

                        .checkmark {
                            display: none;
                        }

                        &:has(input:checked) {
                            border: 1px solid var(--primary-black);
                            background: var(--primary-black);
                            color: var(--white);
                        }
                    }
                }
            }

            .oppAdvanceFilter .addFiltersMenu .addFilterToggleBtn {
                padding: 5px 6px;
                line-height: 13px;
                font-size: 11px;
                gap: 4px;

                svg {
                    width: 12px;
                    height: 12px;
                    min-width: 12px;
                }

                .filterCount {
                    display: none;
                }

                &:has(.filterCount) {
                    outline: 1px solid var(--primary-black);
                    background: var(--primary-black);
                    color: var(--white);

                    svg path {
                        stroke: var(--white);
                    }
                }
            }
        }
    }

    .filtersBottom {
        padding: 8px 16px 12px;
        color: var(--text-gray);
        font-size: 10px;
        font-weight: 500;
        line-height: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .noMatchingJobs {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }

        .tagClearBtn {
            background: transparent;
            border: none;
            outline: none;
            color: var(--primary-blue);
            font-size: inherit;
            font-weight: 600;
            line-height: inherit;
            white-space: nowrap;
        }
    }
}

.mobileFilterDrawer {
    position: fixed;
    background: var(--rgb-dark-40);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 13;

    .filterDrawerInner {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--white);
        z-index: 14;
        border-radius: 16px 16px 0px 0px;
        background: var(--white);
        box-shadow: 1px 2px 4px 0px var(--rgb-dark-gray-10);

        .filterDrawerHeader {
            padding: 16px 16px 12px;
            border-radius: 16px 16px 0px 0px;
            border-bottom: 1px solid var(--text-field-outline);
            background: var(--white);
            box-shadow: 1px 2px 4px 0px var(--rgb-dark-gray-10);

            display: flex;
            flex-direction: column;
            gap: 12px;

            .filterDrawerTitle {
                display: flex;
                justify-content: space-between;
                align-items: center;

                h6 {
                    color: var(--primary-black);
                    text-align: center;
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 20px;
                }

                .filterClearBtn {
                    background: transparent;
                    border: none;
                    outline: none;
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    color: var(--primary-blue);
                    font-size: 12px;
                    font-weight: 700;
                    line-height: 15px;
                    text-transform: uppercase;

                    svg {
                        width: 15px;
                        height: 15px;
                        min-width: 15px;
                    }
                }

                .filterClearBtn:disabled {
                    mix-blend-mode: luminosity;
                    opacity: 0.4;
                    pointer-events: none;
                }
            }
        }

        .activeFilters {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 1px;

            .activeFilterItem {
                display: flex;
                align-items: center;
                gap: 2px;
                padding: 0 0 0 8px;
                outline: 1px solid var(--primary-black);
                border-radius: 24px;
                color: var(--primary-black);
                background: #FFFCED;
                font-size: 10px;
                font-weight: 500;
                line-height: 12px;
                white-space: nowrap;

                .removeCloseIcon {
                    padding: 6px;

                    svg {
                        width: 14px;
                        height: 14px;
                        min-width: 14px;
                    }
                }



            }

        }
    }

    .oppTabFilters {
        display: flex;
        align-items: flex-start;
        height: calc(100vh - 140px);
        max-height: 590px;

        .tabs {
            display: flex;
            flex-direction: column;
            background: var(--bg-secondary);
            height: 100%;
            width: 122px;
            overflow-y: auto;
            padding-bottom: 80px;

            .tab {
                padding: 12px 32px 12px 16px;
                border-bottom: 1px solid #EDEDED;
                font-size: 12px;
                font-weight: 500;
                line-height: 16px;
                color: var(--text-gray);
                position: relative;
                word-wrap: break-word;
                white-space: normal;

                &.active {
                    background: var(--white);
                    color: var(--primary-black);
                    font-weight: 600;

                    &::before {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 0;
                        border-radius: 0px 8px 8px 0px;
                        background: var(--brandYellow);
                        width: 6px;
                        height: 100%;
                    }
                }

                .count {
                    position: absolute;
                    right: 12px;
                    top: 12px;
                    color: var(--primary-black);
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 15px;
                }

            }
        }

        .oppTabFiltersContent {
            background: var(--white);
            /* padding: 0 24px; */
            flex: 1;
            max-width: calc(100% - 122px);
            padding-bottom: 69px;
            height: 100%;

            .content {
                padding: 0 24px;

                height: calc(100% - 52px);

                &:has(.addFilterSubCheckList.jobFunction) {
                    height: 100%;
                }

                overflow-y: auto;

                &.maangPlus {
                    height: calc(100% - 70px);
                }

                .partnerJobs {
                    margin-top: 12px;
                    padding: 16px;
                    border-radius: 8px;
                    background: #EBF4F8;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    h6 {
                        color: var(--text-gray);
                        font-size: 11px;
                        font-weight: 600;
                        line-height: 13px;
                    }

                    span {
                        color: var(--text-gray);
                        font-size: 10px;
                        font-weight: 400;
                        line-height: 16px;
                    }
                }
            }

            .addFilterSubCheckList {

                li {
                    padding: 12px 0;
                    border-bottom: 1px solid var(--bg-secondary);

                    &:last-child {
                        border-bottom: none;
                    }

                    label.checkbox {
                        width: 100%;
                        line-height: 16px;
                        white-space: normal;

                        .light {
                            color: var(--text-gray);
                            font-weight: 400;
                        }
                    }
                }

                li:has(.radiobox input:checked) {
                    background: #FFFCED;
                    margin-left: -24px;
                    width: calc(100% + 48px);
                    padding-inline: 24px;
                    border-bottom: none;
                }
            }

            .addFilterSubCheckList.jobFunction {
                >li {
                    padding-bottom: 16px;
                    border-bottom: none;

                    h6 {
                        font-weight: 600;
                        font-size: 14px;
                        line-height: 17px;
                        color: var(--primary-black);
                        margin-bottom: 8px;
                        padding-bottom: 4px;
                        border-bottom: 1px solid var(--text-gray);
                    }

                    ul {
                        li {
                            padding: 8px 16px;
                            border-bottom: 1px solid var(--bg-secondary);
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 18px;
                            color: var(--primary-black);
                        }
                    }
                }
            }

            .customRangeBox {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin-top: 24px;

                h4 {
                    color: var(--primary-black);
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 15px;
                }

                .customRangeInner {
                    position: relative;
                    display: flex;
                    gap: 12px;
                    align-items: center;

                    hr {
                        width: 7px;
                        border-top: 2px solid var(--text-gray);
                        margin: 8px 0 0;
                    }

                    .form-group {
                        margin-bottom: 0;

                        label {
                            color: var(--text-gray);
                            font-size: 10px;
                            font-weight: 400;
                            line-height: 12px;
                        }

                        input {
                            border-radius: 8px;
                            border: 1px solid var(--text-field-outline-2);
                            background: var(--white);
                            outline: none;
                            width: 48px;
                            font-size: 12px;
                            padding: 6px 12px;
                            height: auto;
                            line-height: 15px;
                        }
                    }
                }

                .customRangeInner.payout {
                    .input-suffix {
                        display: flex;
                        align-items: center;
                        gap: 8px;

                        .light {
                            font-size: 12px;
                            font-weight: 400;
                            line-height: 14.63px;
                            color: var(--text-gray);
                            white-space: nowrap;
                        }
                    }
                }
            }

            .subDropdownSearch {
                padding: 16px 0 8px;

                .form-group {
                    margin-bottom: 0;
                    position: relative;
                }

                .subSearchIcon {
                    position: absolute;
                    left: 0;
                    top: 0;
                    padding: 0;
                    border-radius: 0;
                    border: none;
                    box-shadow: none;
                    z-index: 1;
                    cursor: pointer;
                    font-size: 16px;
                    line-height: 16px;
                }

                .form-control {
                    box-shadow: none;
                    height: auto;
                    min-width: inherit;
                    background: var(--white);
                    outline: none;
                    border: none;
                    border-bottom: 1px solid var(--text-field-outline-2);
                    border-radius: 0;
                    font-weight: 500;
                    font-size: 12px;
                    line-height: 16px;
                    color: var(--secondary-black);
                    padding: 0 0 8px 24px;
                }
            }

            .filterTop.suggested {
                color: var(--rgb-dark-gray-60);
                font-size: 10px;
                font-weight: 400;
                line-height: 12px;
            }

            .filterTop.clearTop {
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .underlinedBtn {
                    color: var(--primary-blue);
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 15px;
                    text-transform: capitalize;
                    text-decoration: none;
                }

                .checkbox {
                    color: var(--primary-blue);
                    font-weight: 500;

                    input:checked~.checkmark {
                        background: var(--primary-blue);
                        border-color: var(--primary-blue);
                    }

                    .checkmark:after {
                        border-left: 1px solid var(--white);
                        border-bottom: 1px solid var(--white);
                    }
                }

                &.maangPlus {
                    justify-content: space-between;
                    padding-bottom: 4px;
                }
            }
        }

        .oppTabFiltersContent>* {
            padding-inline: 24px !important;
        }

        .radiobox {
            display: inline-block;
            position: relative;
            padding-left: 24px;
            margin: 0;
            cursor: pointer;
            min-height: 16px;
            font-weight: 400;
            font-size: 12px;
            line-height: 18px;
            color: var(--primary-black);
            white-space: nowrap;

            input {
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
                cursor: pointer;
                width: 16px;
                height: 16px;
                margin: 0;
                box-shadow: none;
                line-height: 16px;
                border-radius: 4px;
                padding: 0;
            }

            .checkmark {
                position: absolute;
                top: 0px;
                left: 0;
                height: 16px;
                width: 16px;
                border: 1px solid var(--text-field-outline-2);
                -webkit-border-radius: 4px;
                border-radius: 4px;
                background: var(--white);
                -webkit-transition: all 0.35s ease 0s;
                transition: all 0.35s ease 0s;
                border-radius: 50%;

                &::after {
                    content: "";
                    position: absolute;
                    display: inline-block;
                    left: 0;
                    top: 0;
                    width: 14px;
                    height: 14px;
                    margin: auto;
                    border: 2px solid var(--white);
                    transition: all 0.35s ease 0s;
                    opacity: 0;
                    visibility: hidden;
                    border-radius: 14px;
                }
            }

            input:checked~.checkmark:after {
                visibility: visible;
                opacity: 1;
            }

            input:checked~.checkmark {
                background: var(--primary-black);
                border-color: var(--primary-black)
            }
        }

        .radiobox:has(input:checked) {
            font-weight: 600;
        }

        .checkbox:has(input:checked) {
            font-weight: 600;

            .checkmark {
                background: var(--primary-black);
                border-color: var(--primary-black);
            }

            .checkmark:after {
                border-left: 1px solid var(--white);
                border-bottom: 1px solid var(--white);
            }
        }
    }

}

.filterDrawerBottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 15;
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 12px 16px;
    border-radius: 16px 16px 0px 0px;
    border: 1px solid var(--text-field-outline);
    background: var(--lightest-yellow);
    box-shadow: 1px -2px 4px 0px var(--rgb-dark-gray-12);

    .outlinedBtn {
        border: 1px solid var(--text-gray);
        background: var(--white);
    }

    .primaryBtn {
        background: var(--primary-black);
        color: var(--white);
        flex: 1;
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 17px;
        text-transform: uppercase;
    }
}



@media screen and (max-width: 389px) {
    .opportunitiesFilterMobile {

        .opportunitiesFilterInner,
        .filtersBottom {
            padding-inline: 8px;
        }
    }
}

/* Mobile first style end */

/* Resume Health Check start */

.resume-testimonial-result {
    padding: 1.5rem 2rem 3rem;
    padding-inline: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;


    .backdropTestimonials {
        position: absolute;
        top: 0;
        left: -11rem;
        width: calc(100% + 22rem);
        height: 100%;
        background: #F6F0FD;
        z-index: 1;
    }

    >* {
        z-index: 2;
    }

    h5 {
        color: var(--primary-black);
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1.6875rem;
        text-transform: capitalize;
        margin-bottom: 0.5rem;
        text-align: center;
    }

    text {
        color: var(--text-gray);
        text-align: center;
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 0.9375rem;
        margin-bottom: 1.5rem;
    }

    .testimonials {
        display: block;
        width: 100%;



        .testimonial-item {
            border-radius: 16px;
            border: 1px solid var(--text-field-outline);
            background: var(--white);
            display: flex !important;
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
            position: relative;
            background: var(--white);
            border-radius: 16px;
            padding: 1rem;
            min-height: 18.75rem;

            @media screen and (max-width: 767px) {
                padding: 8px;
                min-height: unset;
            }
        }

        .slick-slider.center .slick-track {
            margin-left: 3rem;
        }

        .slick-slide {
            padding: 0 0.5rem;

            >div {
                height: 100%;
            }
        }

        .slick-list {
            margin-left: -0.5rem;
            padding: 0 !important;
            overflow: unset;
            overflow-x: clip;
        }

        .slick-arrow {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;

            svg {
                width: 2.5rem;
                height: 2.5rem;
                min-width: 40px;
                background: var(--white);
                border-radius: 50%;
            }

            &.slick-prev {
                left: -1.375rem !important;
            }

            &.slick-next {
                right: -1rem !important;
                transform: translate(0, -50%) !important;

                svg {
                    transform: rotate(180deg);
                }
            }
        }

        .slick-dots {
            bottom: -1.875rem;

            li {
                width: auto;
                height: auto;

                button {
                    background: var(--light-gray-D9);
                    opacity: 1;
                    height: 0.625rem;
                    width: 0.625rem;
                    margin: auto;

                    &:before {
                        display: none;
                    }
                }
            }

            li.slick-active button {
                background: var(--primary-dark);
                opacity: 1;
            }
        }
    }

    .testimonials-flex {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin-inline: -2rem;

        @media screen and (max-width:991px) {
            margin-inline: unset;
        }

        @media screen and (max-width:767px) {
            gap: 16px;
        }

        .testimonial-item {
            min-width: 20.375rem;
            width: calc(25% - 1.125rem);
            max-width: 100%;
            background: #fff;
            padding: 1rem;
            border-radius: 16px;
            border: 1px solid var(--text-field-outline);

            /* @media screen and (max-width:1439px) {
                width: calc(33.33% - 16px);
            } */

            /* @media screen and (max-width:1280px) {
                padding: 12px;
            } */

            /* @media screen and (max-width:1089px) {
                width: calc(50% - 12px);
            } */

            @media screen and (max-width:695px) {
                width: calc(100% - 64px);
            }

            @media screen and (max-width:660px) {
                width: 100%;
            }
        }
    }

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

        .resume-testimonial-result {
            padding: 24px 0 48px;

            h5 {
                font-size: 18px;
                line-height: 22px;
                text-transform: capitalize;
            }

            text {
                color: var(--text-gray);
                text-align: center;
                font-size: 11px;
                font-weight: 400;
                line-height: 16px;
            }

            .testimonials {
                .slick-arrow {
                    &.slick-prev {
                        left: -12px !important;
                    }

                    &.slick-next {
                        right: -32px !important;
                    }
                }
            }
        }
    }
}

.containSection.resumeHealthCheck {
    background: var(--bg-secondary);
    padding-bottom: 96px;

    hr.section-divider {
        margin-block: -1rem 3rem;
    }

    .main {
        padding-bottom: 64px;

        .header {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;

            h4 {
                font-size: 30px;
                font-weight: 700;
                line-height: 37px;
                color: var(--primary-black);
                text-align: center;
            }

            span.badge {
                color: #7E32E2;
                text-align: center;
                font-size: 16px;
                font-weight: 600;
                line-height: 20px;
                text-transform: capitalize;
                padding: 4px 8px;
                border-radius: 8px;
                background: #EADAFF;
                white-space: normal;
            }

            @media screen and (max-width: 767px) {
                h4 {
                    font-size: 20px;
                    line-height: 25px;
                }

                span.badge {
                    font-size: 11px;
                    line-height: 14px;
                    text-transform: none;
                    padding: 4px 8px;
                }
            }

            @media screen and (max-width: 425px) {
                margin-bottom: 0 !important;

                h4 {
                    font-size: 18px;
                    line-height: 22px;
                }
            }
        }


        .resume-actions {
            margin: 24px 0 64px;
            padding: 24px;
            border-radius: 16px;
            border: 1.5px dashed #D6D6D6;
            background: var(--white);
            margin-inline: auto;
            width: 640px;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            gap: 40px;
            position: relative;

            .resume-templates {
                padding: 16px 0;
                background: transparent;
                display: flex;
                flex-direction: column;
                gap: 16px;

                h6 {
                    text-transform: capitalize;
                    text-align: center;
                }

                .templates {
                    display: flex;
                    align-items: flex-start;
                    gap: 28px;
                    justify-content: center;

                    .template {
                        width: 280px;
                        max-width: calc(33vw - 48px);
                        height: auto;
                        border-radius: 8px;
                        padding: 8px;
                        background: #F1EDE2;
                        position: relative;
                        cursor: pointer;

                        &:hover {
                            box-shadow: 1px 0px 6px 0px #6B6B6B1F;
                        }

                        &:has(.viewed-at) {
                            background: #F9F1DC;
                            border: 1px solid #DDC792;
                            scale: 1.01;
                        }

                        .template-header {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 6px;
                            width: 100%;
                            padding: 4px 0 8px;
                            position: relative;

                            .last-viewed {
                                position: absolute;
                                right: 8px;
                                top: calc(100% + 8px);
                                display: flex;
                                align-items: center;
                                gap: 4px;
                                color: #03661A;
                                font-size: 10px;
                                font-weight: 600;
                                line-height: 12px;
                                background: #D9FFE1;
                                border-radius: 16px;
                                padding: 3px 6px;
                            }

                            .template-name {
                                color: var(--primary-black);
                                font-size: 12px;
                                font-weight: 700;
                                line-height: 15px;
                                text-transform: capitalize;
                            }

                            .viewed-at {
                                color: #384AD7;
                                font-size: 10px;
                                font-weight: 700;
                                line-height: 13px;
                            }

                            @media screen and (max-width: 840px) {
                                .template-name {
                                    font-size: 10px;
                                    line-height: 13px;
                                }

                                .viewed-at {
                                    font-size: 8px;
                                    line-height: 11px;
                                }
                            }

                            @media screen and (max-width: 680px) {
                                .template-name {
                                    font-size: 8px;
                                    line-height: 11px;
                                }

                                .viewed-at {
                                    font-size: 6px;
                                    line-height: 9px;
                                }
                            }

                            @media screen and (max-width: 576px) {
                                .template-name {
                                    font-size: 12px;
                                    line-height: 15px;
                                }

                                .viewed-at {
                                    font-size: 10px;
                                    line-height: 13px;
                                }
                            }
                        }

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

                        .primaryBtn {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            background: #231F20;
                            color: #fff;
                            box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);

                            &.viewed {
                                background: #ffda30;
                                color: #231F20;
                            }

                            &:hover {
                                background: #ffda30;
                                color: #231F20;
                            }

                            @media screen and (max-width: 1150px) {
                                font-size: 12px;
                                line-height: 15px;
                            }

                            @media screen and (max-width: 1050px) {
                                width: min-content;
                            }

                            @media screen and (max-width: 767px) {
                                font-size: 10px;
                                padding: 8px 12px;
                            }

                            @media screen and (max-width: 576px) {
                                font-size: 12px;
                                padding: 12px 24px;
                            }
                        }

                        &:hover {
                            .primaryBtn {
                                background: #ffda30;
                                color: #231F20;
                            }
                        }

                        @media screen and (max-width: 767px) {
                            max-width: 28vw;
                        }
                    }

                    @media screen and (max-width: 767px) {
                        gap: 16px;
                    }

                    @media screen and (max-width: 576px) {
                        flex-direction: column;

                        .template {
                            max-width: none;
                            width: 100%;

                            .primaryBtn {
                                white-space: nowrap;
                                width: auto;
                            }
                        }
                    }
                }
            }

            .resume-options {
                padding: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 32px;
                width: max-content;
                max-width: 100%;
                border-radius: 8px;
                border: 1.5px solid var(--light-blue);
                background: var(--rgb-light-gray-16);

                .resume-flex {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    width: auto;
                    max-width: calc(100% - 56px);

                    img {
                        width: 28px;
                        height: 28px;
                        min-width: 28px;
                    }


                    >div {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: calc(100% - 36px);
                        display: block;
                    }

                    .title {
                        color: var(--primary-navy);
                        font-size: 14px;
                        font-weight: 500;
                        line-height: 17px;
                    }

                    .title:hover {
                        text-decoration: underline;
                        cursor: pointer;
                        color: #384AD7;
                    }

                    .title.disabled:hover {
                        text-decoration: none;
                        cursor: default;
                        color: var(--primary-navy);
                    }

                    .size {
                        color: var(--text-gray);
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 14px;
                    }
                }

                .kebab-menu {
                    position: relative;

                    .iconBtn {
                        width: 24px;
                        height: 24px;
                        min-width: 24px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background: transparent;
                        border: none;
                        padding: 0;
                        cursor: pointer;

                        svg {
                            width: 24px;
                            height: 24px;
                            min-width: 24px;
                        }
                    }

                    .secondary-actions {
                        position: absolute;
                        top: 100%;
                        width: max-content;
                        right: -56px;

                        background: #fff;
                        border-radius: 12px;
                        border: 1px solid var(--text-field-outline-2);
                        padding: 0 12px;
                        box-shadow: 0px 12px 12px 1px rgba(0, 0, 0, 0.1618);
                        display: flex;
                        flex-direction: column;
                        gap: 0;
                        z-index: 1;

                        .resume-btn {
                            .outlinedBtn.filewrap {
                                border-radius: 12px;
                                width: 197px;
                                /* outline: 1px solid #a6a6a6 !important; */
                                outline: none !important;

                                input {
                                    width: 197px;
                                    padding-right: 0;
                                }

                                label {
                                    padding: 16px;
                                    padding-inline: 0 !important;
                                    border-radius: 12px;
                                }
                            }
                        }

                        .ghost-btn {
                            border: none;
                            border-top: 1px solid var(--text-field-outline);
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            font-size: 13px;
                            line-height: 1;
                            font-weight: 600;
                            text-transform: uppercase;
                            width: 100%;
                            background: transparent;
                            padding: 11px 0;

                            svg path {
                                stroke-width: 3;
                            }
                        }

                        @media screen and (max-width: 767px) {
                            left: unset;
                            transform: unset;
                            right: -24px;

                            .resume-btn {
                                .outlinedBtn.filewrap {
                                    width: 170px;
                                    height: 36px;

                                    input {
                                        width: 170px;
                                    }
                                }
                            }

                            .ghost-btn {
                                height: 36px;
                                font-size: 11px;
                                padding: 8px 0;
                            }
                        }
                    }
                }

                .secondary-actions {
                    display: flex;
                    align-items: flex-start;
                    gap: 16px;
                    width: 100%;
                    justify-content: center;
                    flex-wrap: wrap;

                    .outlinedBtn {
                        padding: 12px 24px;
                        color: var(--primary-black);
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 17px;
                        text-transform: uppercase;
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        background: var(--white);
                        width: 244px;
                        justify-content: center;
                        white-space: nowrap;


                        svg {
                            width: 16px;
                            min-width: 16px;
                            height: 16px;
                        }
                    }

                    .resume-btn {
                        position: relative;

                        .outlinedBtn.filewrap {
                            padding: 0;
                            border-radius: 27px;
                            height: 41px;
                            cursor: pointer;
                            box-shadow: none;
                            width: 428px;

                            input {
                                background: transparent;
                                border-radius: 27px;
                                width: 244px;
                            }

                            label {
                                color: var(--primary-black);
                                font-size: 14px;
                                font-weight: 600;
                                text-transform: uppercase;
                                border-radius: 27px;
                                background: var(--white);
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                padding: 12px 24px;
                                height: 100%;
                                box-shadow: none;
                                cursor: pointer;

                                svg {
                                    width: 18px;
                                    height: 18px;
                                    min-width: 18px;
                                    /* 
                                    @media screen and (max-width: 767px) {
                                        display: none;
                                    } */
                                }

                                .comment {
                                    width: 100%;
                                    text-align: center;
                                    color: #949498;
                                    font-weight: 500;
                                    display: flex;
                                    justify-content: flex-end;
                                }
                            }
                        }
                    }
                }
            }

            .mainAction {
                width: 100%;

                .primaryBtn {
                    color: var(--White, var(--white));
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 17px;
                    text-transform: uppercase;
                    background: var(--primary-black);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                }

                .steps {
                    margin-top: 12px;
                    border-radius: 8px;
                    background: #F1FCF3;
                    padding: 4px 24px;
                    display: flex;
                    align-items: center;
                    gap: 20px;

                    .step {
                        display: flex;
                        align-items: center;
                        gap: 12px 20px;

                        .step-check {
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            font-size: 12px;
                            font-weight: 500;
                            line-height: 15px;
                            white-space: nowrap;
                            color: var(--primary-black);
                        }
                    }

                    b {
                        color: var(--successGreen);
                        font-size: 12px;
                        font-weight: 700;
                        line-height: 15px;
                        white-space: nowrap;
                    }
                }
            }

            .bottomNote {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                top: calc(100% + 8px);
                text-align: center;
                color: #949498;
                font-size: 12px;
                font-weight: 500;
                line-height: 15px;
                white-space: nowrap;

                strong {
                    font-weight: 700;
                }
            }

            .last1AttemptLeft {
                display: flex;
                align-items: center;
                gap: 4px;
                color: #0D7DEB;
                font-size: 11px;
                font-weight: 600;
                line-height: 13px;

                svg {
                    width: 14px;
                    height: 14px;
                    min-width: 14px;

                    path {
                        stroke: #0D7DEB;
                    }
                }
            }
        }


        .sample-report-section {
            padding: 40px 64px 64px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;

            @media screen and (max-width: 767px) {
                padding: 40px 0 64px;
            }

            h5 {
                color: var(--primary-black);
                font-size: 22px;
                font-weight: 700;
                line-height: 27px;
                text-transform: capitalize;
                text-align: center;
            }

            .sections {
                display: flex;
                gap: 16px;
                justify-content: center;

                @media screen and (max-width: 767px) {
                    flex-direction: column;
                }

                .section-item {
                    flex: 1;
                    max-width: 302px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    border-radius: 16px;
                    padding: 24px 16px;
                    border: 1px solid var(--rgb-gray-20);
                    background: var(--white);

                    .icon {
                        border-radius: 24px;
                        background: #D8E9E3;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 32px;
                        height: 32px;
                        margin-bottom: 12px;

                        svg {
                            width: 20px;
                            height: 20px;
                            min-width: 20px;
                        }
                    }

                    .icon.blue {
                        background: #E3E6FE;
                    }

                    .icon.pink {
                        background: #ECDBFF;
                    }

                    h6 {
                        margin-bottom: 6px;
                        color: var(--primary-black);
                        text-align: center;
                        font-size: 14px;
                        font-weight: 700;
                        line-height: 17px;
                    }

                    text {
                        color: var(--text-gray);
                        text-align: center;
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 18px;
                    }
                }
            }

            .sample-report {
                display: flex;
                justify-content: center;
                align-items: center;

                a {
                    display: flex;
                    white-space: nowrap;
                    align-items: center;
                    padding: 10px 24px;
                    border-radius: 27px;
                    background: var(--white);
                    border: 1px solid var(--primary-black);
                    gap: 8px;
                    color: var(--primary-black);
                    font-family: Montserrat;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 20px;
                    text-transform: uppercase;
                }
            }
        }

        .sample-report-section.industry-insight {
            background: var(--gradient, linear-gradient(119deg, #EFEEFF 26.18%, var(--rgb-gray-gredient-94) 96.85%));
            margin-left: -200px;
            width: calc(100% + 400px);
            padding: 24px;

            @media screen and (max-width: 767px) {
                flex-direction: column;
                justify-content: center;
                margin-left: -16px;
                width: calc(100% + 32px);
            }

            .sections {

                .section-item {
                    background: linear-gradient(100deg, var(--white) 32.23%, #EFEEFF 119.15%);

                    @media screen and (max-width: 1200px) {
                        max-width: 248px;
                    }

                    @media screen and (max-width: 991px) {
                        max-width: 200px;
                    }

                    @media screen and (max-width: 800px) {
                        max-width: 180px;
                    }

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

                    .icon {
                        border-radius: 0;
                        width: 16px;
                        height: 16px;
                        min-width: 16px;
                        padding: 0;
                        margin-bottom: 8px;
                        background: transparent;
                    }

                    h6 {
                        line-height: 19px;
                        margin-bottom: 0;
                    }
                }
            }
        }

        .sample-report-section.how-it-works {
            .sections {
                justify-content: center;

                @media screen and (max-width: 767px) {
                    flex-direction: column;
                }


                .section-item {
                    width: 248px;

                    .icon {
                        background: #FFFBE5;
                    }

                    h6 {
                        white-space: nowrap;
                        text-align: center;
                    }


                    @media screen and (max-width: 1200px) {
                        width: 200px;

                        h6 {
                            white-space: normal;
                        }
                    }

                    @media screen and (max-width: 1048px) {
                        width: 160px;
                    }

                    @media screen and (max-width: 840px) {
                        width: 140px;
                    }

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

                .section-item:first-child {
                    .icon svg path {
                        stroke: #94812E;
                        fill: #94812E;

                    }
                }
            }
        }

        .faq-resume {
            display: flex;
            flex-direction: column;

            h5 {
                color: var(--primary-black);
                font-size: 22px;
                font-weight: 700;
                line-height: 27px;
                text-transform: capitalize;
                margin-bottom: 24px;
                text-align: center;
            }

            .faqs {
                display: flex;
                flex-direction: column;
                gap: 16px;

                .faq {
                    padding: 16px;
                    border-radius: 16px;
                    border: 1px solid var(--rgb-gray-20);
                    background: var(--white);

                    h6 {
                        color: var(--primary-black);
                        font-size: 14px;
                        font-weight: 700;
                        line-height: 17px;
                        margin-bottom: 8px;
                    }

                    text {
                        color: var(--text-gray);
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 18px;
                    }
                }
            }
        }



        @media screen and (max-width: 767px) {
            .resume-actions {
                padding: 20px 16px;

                .mainAction {
                    .primaryBtn {
                        font-size: 11px;
                        line-height: 14px;
                    }

                    .steps {
                        padding: 6px 12px;
                        flex-wrap: wrap;
                        gap: 12px;
                        justify-content: center;

                        .step {
                            gap: 12px;
                        }

                    }
                }

                .resume-options {
                    gap: 16px;

                    .resume-flex {
                        max-width: calc(100% - 40px);

                        img {
                            width: 20px;
                            height: 20px;
                            min-width: 20px;
                        }

                        >div {
                            max-width: calc(100% - 28px);
                        }
                    }

                    .secondary-actions {
                        gap: 12px;

                        .outlinedBtn {
                            width: 100%;
                            padding: 12px 16px;
                            font-size: 12px;
                            line-height: 15px;
                            outline: 1px solid var(--text-field-outline) !important;
                        }

                        .resume-btn {

                            .outlinedBtn.filewrap {
                                width: 204px;

                                input {
                                    width: 204px;
                                }

                                label {
                                    font-size: 12px;
                                    line-height: 15px;
                                    padding: 12px 16px !important;
                                    justify-content: center;
                                }
                            }
                        }
                    }
                }

                .bottomNote {
                    white-space: normal;
                    max-width: 100%;
                    transform: none;
                    left: 0;
                }
            }


            .sample-report-section {

                h5 {
                    color: var(--primary-black);
                    text-align: center;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 22px;
                    text-transform: capitalize;
                }

                .sections {
                    .section-item {
                        max-width: 100%;
                    }
                }
            }

            .sample-report-section.industry-insight {
                padding: 24px 16px;


                .sections {
                    .section-item {
                        max-width: 100%;
                    }
                }
            }

            .sample-report-section.how-it-works {
                padding: 48px 0;

                .sections {
                    width: 100%;

                    .section-item {
                        width: 100%;
                    }
                }
            }

            .faq-resume {
                h5 {
                    color: var(--primary-black);
                    text-align: center;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 22px;
                    text-transform: capitalize;
                }
            }
        }
    }


    .main.pilot .resume-actions .mainAction .primaryBtn {
        font-size: 14px;
        line-height: 17px;
        background: var(--AI-gradient-color, linear-gradient(90deg, var(--white) -199.41%, var(--primary-dark) -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%));

        &:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }


    .main.health-check-results {
        padding-bottom: 8px;

        .header {
            margin-bottom: 20px;

            h4 {
                font-weight: 700;
            }

            .subText {
                color: var(--text-gray);
                font-size: 14px;
                font-weight: 400;
                line-height: 17px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 4px;

                .resume-name {
                    color: var(--primary-navy);
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 17px;
                    text-decoration: underline;
                    cursor: pointer;
                    max-width: 240px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    &:hover {
                        text-decoration: none;
                        cursor: pointer;
                        color: #384AD7;
                    }
                }
            }
        }

        .healthCheckLimit {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: #AE4427;
            font-size: 12px;
            font-weight: 600;
            line-height: 15px;
            margin-bottom: 16px;

            svg {
                width: 16px;
                min-width: 16px;
                height: 16px;
            }
        }

        .resume-score {
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 820px;
            max-width: 100%;
            /* margin-inline: auto; */

            .overall {
                /* padding: 16px 24px;
                border-radius: 16px; */
                /* border: 1px solid var(--rgb-gray-20); */
                background: var(--white);
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 16px;

                .resume-name {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    border-radius: 4px;
                    padding: 2px 8px;
                    /* background: var(--Tabs-grey, rgba(186, 186, 186, 0.20)); */

                    img {
                        width: 20px;
                        height: 20px;
                        min-width: 20px;
                        /* filter: grayscale(1); */
                    }

                    .title {
                        color: var(--primary-navy);
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 15px;
                        max-width: 240px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .title:hover {
                        text-decoration: underline;
                        cursor: pointer;
                        color: #384AD7;
                    }

                    .title.disabled:hover {
                        text-decoration: none;
                        cursor: default;
                        color: var(--primary-navy);
                    }
                }

                .score {
                    color: var(--primary-black);
                    text-align: center;
                    font-size: 54px;
                    font-weight: 700;
                    line-height: 66px;
                }

                .scoreMessage {
                    margin-top: -8px;
                    background: #CECCCC;
                    border: 1px solid #CECCCC;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 8px;
                    padding: 12px 24px;
                    border-radius: 12px;
                    text-align: center;

                    h6 {
                        color: #231F20;
                        font-weight: 700;
                        font-size: 18px;
                        line-height: 22px;
                        text-align: center;
                    }

                    text {
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 20px;
                        text-align: center;
                    }

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

                        h6 {
                            font-size: 16px;
                            line-height: 20px;
                        }

                        text {
                            font-size: 12px;
                            line-height: 16px;
                        }
                    }
                }

                .alreadyExcellentResume {
                    background: #EAFFD9;
                    border: 1px solid #E7FCD6;

                    h6 {
                        color: #5D784A;
                    }

                    text {
                        color: #384E28;
                    }
                }

                .almostThere {
                    border-color: #EAE2C2;
                    background: #FFF6CF;

                    h6 {
                        color: #AE601B;
                    }

                    text {
                        color: #7D3E06;
                    }
                }

                .redFlag {
                    border-color: #FCE2E3;
                    background: #fff2f2;

                    h6 {
                        color: var(--errorRed);
                    }

                    text {
                        color: #5F0D0D;
                    }
                }

                .badge-verdict {
                    border-radius: 12px;
                    border: 1px solid #EAE2C2;
                    background: #FFFAE6;
                    padding: 12px 24px;
                    color: #AE601B;
                    text-align: center;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 22px;
                    margin-top: -8px;

                    &.green {
                        color: #5D784A;
                        border-color: #D8EEC8;
                        background: #EAFFD9;
                    }

                    &.blue {
                        color: var(--secondary-blue);
                        border-color: #D3E4E8;
                        background: #E4F0FF;
                    }

                    &.yellow {
                        color: #AE601B;
                        border-color: #EAE2C2;
                        background: #FFF6CF;
                    }

                    &.orange {
                        color: #9F510B;
                        border-color: #FFD8C3;
                        background: #FFD8C3;
                    }

                    &.red {
                        color: var(--errorRed);
                        border-color: #EAD1D0;
                        background: #FCE2E3;
                    }
                }

            }

            .sections {
                display: flex;
                gap: 16px;

                .section {
                    padding: 8px 16px;
                    border-radius: 16px;
                    border: 1px solid var(--text-gray-60);
                    background: var(--white);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 4px;
                    flex: 1;

                    &:hover {
                        cursor: pointer;
                        border: 1px solid #231F20;
                        background: #FFF8D6;
                        transition: 0.35s ease;
                    }

                    h6 {
                        color: var(--text-gray);
                        font-size: 12px;
                        font-weight: 600;
                        line-height: 15px;
                    }

                    .score {
                        color: inherit;
                        font-size: 18px;
                        font-weight: 700;
                        line-height: 22px;
                    }

                    &.green {
                        color: #5D784A;
                    }

                    &.blue {
                        color: var(--secondary-blue);
                    }

                    &.yellow {
                        color: #AE601B;
                    }

                    &.red {
                        color: var(--errorRed);
                    }
                }
            }

            .resume-actions {
                background: transparent;
                padding: 0;
                flex-direction: row;
                gap: 16px;
                border: none;
                width: 100%;
                align-items: flex-start;
                justify-content: center;
                flex-wrap: wrap;
                margin: 0;

                button {
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 17px;
                    text-transform: uppercase;
                    white-space: nowrap;

                    &.outlinedBtn {
                        background: var(--white);
                    }

                    &.black {
                        background: var(--primary-black);
                        color: var(--white);
                    }

                    &.transformed {
                        position: relative;
                        margin-bottom: 26px;

                        .green-msg {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            color: var(--primary-green);
                            font-size: 11px;
                            font-weight: 600;
                            line-height: 13px;
                            position: absolute;
                            top: calc(100% + 8px);
                            left: 0;
                            text-transform: none;
                            max-width: 100%;
                            white-space: normal;
                            text-align: left;

                            svg {
                                width: 16px;
                                height: 16px;
                                min-width: 16px;
                            }
                        }
                    }

                    &.transform-btn {
                        color: var(--white);
                        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) -199.41%, rgba(0, 0, 0, 0.9) -139.52%, rgba(255, 39, 117, 0.9) -78.78%, rgba(227, 54, 255, 0.9) -9.38%, rgba(59, 55, 254, 0.9) 50.14%, rgba(51, 154, 250, 0.9) 141.74%, rgba(54, 255, 110, 0.9) 231.93%, rgba(163, 252, 50, 0.9) 333.69%, rgba(224, 255, 47, 0.9) 420.7%, rgba(255, 223, 53, 0.9) 494.44%, rgba(245, 155, 104, 0.9) 578.76%, rgba(255, 104, 50, 0.9) 664.04%, rgba(242, 53, 53, 0.9) 758.88%);

                        &:disabled {
                            opacity: 0.5;
                        }

                        s {
                            font-weight: 500;
                            color: #c8ccfe;
                        }

                        @media screen and (max-width: 480px) {
                            font-size: 10px;
                            letter-spacing: -0.3px;

                            img {
                                min-width: 14px;
                                width: 14px;
                                height: 14px;
                            }
                        }
                    }
                }

                .transform-text {
                    font-weight: 600;
                    color: #676C97;
                    font-size: 12px;
                    line-height: 15px;
                    text-align: center;
                }

                &:has(.transform-text) {
                    flex-direction: column;
                    align-items: unset;
                    gap: 8px;
                }

                button.transform:disabled {
                    text-transform: none;
                }
            }
        }

        .startAgain {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 24px;
            border-radius: 16px;
            background: var(--white);
            margin-bottom: 48px;

            .left {
                display: flex;
                align-items: center;
                gap: 8px;
                color: var(--primary-black);
                font-size: 16px;
                font-weight: 600;
                line-height: 20px;
                flex-wrap: wrap-reverse;

                .attemptsLeft {
                    color: #0D7DEB;
                    text-align: center;
                    font-size: 11px;
                    font-weight: 700;
                    line-height: 13px;
                    border-radius: 4px;
                    background: #E4F5FF;
                    padding: 2px 6px;
                    white-space: nowrap;
                }
            }

            .outlinedBtn {
                display: flex;
                gap: 8px;
                align-items: center;
                font-weight: 700;
                flex-wrap: nowrap;
                white-space: nowrap;
                align-self: flex-start;
            }
        }

        .startAgain.transform {
            margin-bottom: 0;
            border-radius: 16px;
            background: linear-gradient(112deg, var(--rgb-light-blue-gredient-80) 26.89%, var(--rgb-light-yellow-gredient-30) 54.45%, var(--rgb-gray-gredient-75) 83.6%);

            .left {
                .attemptsLeft {
                    background: var(--white);
                }
            }

            .primaryBtn {
                color: var(--primary-black);
                text-align: center;
                font-size: 14px;
                font-weight: 700;
                line-height: normal;
                text-transform: uppercase;
                white-space: nowrap;
                display: flex;
                align-items: center;
                gap: 4px;
                align-self: flex-start;

                &:disabled {
                    text-transform: none;
                }

            }

            .primaryBtn.transformed {
                position: relative;
                margin-bottom: 26px;

                .green-msg {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    color: var(--primary-green);
                    font-size: 11px;
                    font-weight: 600;
                    line-height: 13px;
                    position: absolute;
                    top: calc(100% + 8px);
                    left: 0;
                    text-transform: none;
                    max-width: 100%;
                    white-space: normal;
                    text-align: left;

                    svg {
                        width: 16px;
                        height: 16px;
                        min-width: 16px;
                    }
                }

            }
        }

        @media screen and (max-width: 767px) {
            .header {
                margin-bottom: 20px;

                .subText {
                    font-size: 12px;
                    line-height: 15px;
                    display: inline-block;

                    .resume-name {
                        display: block;
                    }
                }
            }

            .healthCheckLimit {
                align-items: flex-start;
                justify-content: center;
                gap: 8px;
                font-size: 11px;
                font-weight: 600;
                line-height: 15px;
                margin-bottom: 12px;
                padding: 4px;
                border-radius: 4px;
                background: #FFF3EB;
            }

            .resume-score {
                max-width: 100%;
                gap: 14px;

                .overall {
                    padding: 20px;
                    gap: 12px;

                    .score {
                        margin-top: 8px;
                    }
                }

                .sections {
                    gap: 12px;
                    flex-wrap: wrap;

                    .section {
                        padding: 8px 16px;
                        flex: unset;
                        width: calc(50% - 6px);
                    }
                }

                .resume-actions {
                    flex-wrap: wrap;
                    justify-content: center;
                    margin: 12px 0 12px;

                    button {
                        white-space: nowrap;
                        font-size: 12px;
                        line-height: 15px;

                        .green-msg {
                            font-size: 10px !important;
                        }

                        @media screen and (max-width: 480px) {
                            font-size: 10px;
                            line-height: 12px;
                            gap: 6px;
                            padding: 12px 16px;

                            svg {
                                width: 12px;
                                min-width: 12px;
                                height: 12px;
                            }
                        }
                    }

                }
            }

            .startAgain {
                flex-direction: column;
                padding: 20px 16px;

                .left {
                    font-size: 14px;
                    line-height: 20px;

                    .attemptsLeft {
                        font-weight: 600;
                    }
                }

                .outlinedBtn {
                    font-weight: 600;
                }
            }

            .startAgain.transform {
                margin-left: -16px;
                width: calc(100% + 32px);
                border-radius: 0;
            }

        }

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

            .resume-score .resume-actions .transformed {
                margin-bottom: 0 !important;
            }

            .resume-score .overall {
                padding: 8px 20px !important;
            }
        }
    }


    .how-analyse {
        margin-bottom: 64px;
        width: 100%;
        padding: 24px;
        background: #EDEFFF;
        gap: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        border-radius: 16px;

        h6 {
            font-weight: 600;
            font-size: 22px;
            line-height: 27px;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            text-align: center;
        }

        text {
            font-weight: 400;
            font-size: 14px;
            line-height: 17px;
            text-align: center;
        }

        .how-analyse-sections {
            display: flex;
            gap: 16px;
            width: 100%;

            .section {
                flex: 1;
                background: var(--white);
                display: flex;
                flex-direction: column;
                align-items: flex-start;

                gap: 10px;
                padding: 8px 12px;
                border-radius: 12px;

                .badge {
                    background: #EBFFF5;
                    color: var(--primary-green);
                    padding: 4px 8px;
                    border-radius: 8px;
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 17px;

                    &.blue {
                        background: #E7ECFF;
                        color: var(--secondary-blue);
                    }

                    &.pink {
                        background: #F6E3FF;
                        color: #AC0EEB;
                    }

                    &.yellow {
                        background: #FFF1D6;
                        color: #CE8106;
                    }
                }

                text {
                    font-weight: 500;
                    font-size: 12px;
                    line-height: 15px;
                    color: var(--text-gray);

                }
            }
        }
    }

    .resumeReplaceTransformed {
        border-radius: 16px;
        background: var(--gradient, linear-gradient(119deg, #EFEEFF 26.18%, var(--rgb-warm-pink-gredient-94) 96.85%));
        padding: 24px;
        width: 100%;
        margin-bottom: 48px;
        position: relative;

        .modalCloseBtn {
            position: absolute;
            top: 24px;
            right: 24px;
            background: transparent;
            border: none;
            cursor: pointer;
        }

        hr {
            margin-block: 2rem;
        }

        >h5 {
            color: var(--primary-black);
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            line-height: 24px;
            max-width: 767px;
            margin-inline: auto;
        }

        .replace-section {
            margin-top: 16px;
            display: flex;
            flex-direction: column;
            width: 552px;
            margin-inline: auto;
            max-width: 100%;
            gap: 24px;

            .replace-flex {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 16px;
                border-radius: 8px;
                background: var(--rgb-light-gray-56);
                padding: 16px 24px;

                .resume-name {
                    border-radius: 4px;
                    border: 0.5px solid var(--light-blue);
                    background: #F6FBFF;
                    padding: 4px 8px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    width: 174px;

                    img {
                        width: 20px;
                        height: 20px;
                        min-width: 20px;
                    }

                    .title {
                        color: var(--primary-navy);
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 15px;
                        width: calc(100% - 28px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                .resume-btn {
                    position: relative;

                    .outlinedBtn.filewrap {
                        padding: 0;
                        border-radius: 27px;
                        height: 41px;
                        cursor: pointer;
                        box-shadow: none;

                        input {
                            background: transparent;
                            border-radius: 27px;
                            width: 313px;
                        }

                        label {
                            color: var(--primary-black);
                            font-size: 14px;
                            font-weight: 600;
                            text-transform: uppercase;
                            border-radius: 27px;
                            background: var(--white);
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            padding: 12px 24px;
                            height: 100%;
                            box-shadow: none;
                            cursor: pointer;

                            svg {
                                width: 18px;
                                height: 18px;
                                min-width: 18px;
                            }
                        }
                    }
                }
            }

            .primaryBtn.black {
                color: var(--White, var(--white));
                font-size: 14px;
                font-weight: 700;
                line-height: 17px;
                text-transform: uppercase;
                background: var(--primary-black);

                &:disabled {
                    opacity: 0.5;
                }
            }
        }

        >h6 {
            color: var(--primary-black);
            text-align: center;
            font-size: 16px;
            font-weight: 600;
            line-height: 20px;
            text-transform: capitalize;
        }

        .topMatchingJobs {
            margin-top: 16px;
            display: flex;
            flex-direction: row;
            gap: 16px;

            .jobCard {
                flex: 1;
                cursor: pointer;
                width: calc(33.33% - 12px);
                border-radius: 16px;
                border: 1px solid var(--text-field-outline);
                background: var(--white);
                padding: 16px;
                display: flex;
                flex-direction: column;
                gap: 8px;

                .jobCard-header {
                    display: flex;
                    align-items: flex-start;
                    gap: 8px;

                    .logo {
                        width: 48px;
                        height: 48px;
                        min-width: 48px;
                        border-radius: 6px;
                        background: var(--white);
                        align-items: center;
                        justify-content: center;
                        display: flex;
                        padding: 2px;
                        position: relative;
                        outline: 1px solid var(--light-gray-D9);

                        .company_intialBg .company_intial h6 {
                            color: var(--white);
                            font-size: 20px;
                        }
                    }

                    .logo:has(.company_intialBg) {
                        padding: 0;
                        border: none;
                    }

                    .jobInfo {
                        position: relative;
                        padding-right: 32px;
                        width: calc(100% - 56px);
                        display: flex;
                        flex-direction: column;
                        gap: 6px;

                        h6 {
                            color: var(--primary-black);
                            font-size: 12px;
                            font-weight: 600;
                            line-height: 15px;
                            width: 100%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .companyName {
                            color: var(--text-gray);
                            font-size: 12px;
                            font-weight: 500;
                            line-height: 15px;
                            display: flex;
                            align-items: center;
                            gap: 4px;

                            text {
                                max-width: 100%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                            }

                            .uplersPartnerBadge {
                                display: flex;

                                svg {
                                    width: 15px;
                                    height: 15px;
                                    min-width: 15px;
                                }
                            }

                            &:has(.uplersPartnerBadge) {
                                text {
                                    max-width: calc(100% - 20px);
                                }
                            }
                        }

                        .bookmarkIconBtn {
                            position: absolute;
                            right: 0;
                            top: 0;
                            width: 24px;
                            height: 24px;
                            min-width: 24px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: var(--white);
                            outline: 1px solid var(--text-field-outline);
                            border: none;
                            border-radius: 12px;
                            transition: background-color 0.3s ease;

                            svg {
                                width: 12px;
                                height: 14px;
                                transition: fill 0.3s ease, stroke 0.3s ease;
                            }

                            &.saved {
                                background: var(--primary-black);

                                svg path {
                                    fill: var(--white);
                                    stroke: var(--white);
                                }
                            }
                        }
                    }

                }

                .attribs {
                    display: flex;
                    gap: 16px;

                    >span {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        color: var(--text-gray);
                        font-size: 11px;
                        font-weight: 500;
                        line-height: 13px;

                        img {
                            width: 14px;
                            height: 14px;
                            min-width: 14px;
                            opacity: 0.75;
                        }
                    }
                }
            }
        }

    }

    @media screen and (max-width: 991px) {
        .resumeReplaceTransformed {
            .topMatchingJobs {
                flex-direction: column;

                .jobCard {
                    width: 100%;
                }
            }
        }
    }

    @media screen and (max-width: 767px) {
        padding-bottom: 0px;

        hr.section-divider {
            margin-block: -1.5rem 2.5rem;
        }

        .resumeReplaceTransformed {
            padding: 16px 12px;

            .replace-section {
                .replace-flex {
                    flex-wrap: wrap;
                    gap: 8px 16px;
                    justify-content: center;

                    .resume-name {
                        width: auto;
                    }

                    .resume-btn .outlinedBtn.filewrap {
                        input {
                            width: 280px;
                        }

                        label {
                            font-size: 12px;
                            line-height: 15px;
                        }
                    }
                }
            }
        }
    }

    hr.score-guide-divider {
        margin: 32px 0;
        border-top: 1px solid var(--text-field-outline);
    }

    .scoreGuideSection {
        display: flex;
        gap: 32px;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: center;


        .card {
            border-radius: 16px;
            border: 0.983px solid var(--rgb-gray-20);
            background: var(--white);
            padding: 24px;
            width: calc(50% - 16px);
            min-width: min-content;
            display: flex;
            flex-direction: column;
            align-items: center;

            h5 {
                color: var(--primary-black);
                font-size: 22px;
                font-weight: 700;
                line-height: 27px;
                text-transform: capitalize;
                margin-bottom: 8px;
            }

            text {
                color: var(--text-gray);
                text-align: center;
                font-size: 14px;
                font-weight: 400;
                line-height: 18px;
                margin-bottom: 24px;
                width: 340px;
                max-width: 100%;
            }

            .underLinedBtn {
                color: var(--primary-black);
                font-size: 14px;
                font-weight: 600;
                line-height: 17px;
                text-decoration: underline;
                text-transform: uppercase;
                white-space: nowrap;
                background: transparent;
                border: none;
                padding: 0;
            }
        }
    }

    @media screen and (max-width: 767px) {
        .scoreGuideSection {
            flex-direction: column;
            gap: 16px;

            .card {
                width: 100%;
                min-width: unset;
                padding: 20px 16px;

                h5 {
                    font-size: 18px;
                    line-height: 22px;
                    text-transform: capitalize;
                }

                text {
                    font-size: 12px;
                    line-height: 18px;
                }
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 940px) {
        .health-tabs .health-tab {
            padding: 12px;
            font-size: 12px;
        }

        .need-help-card {
            padding: 32px 42px 40px;
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1060px) {
        .fix-issues-resume-transformation {
            flex-direction: row;

            .right-section .transform-resume-button {
                text-wrap: nowrap;
            }
        }
    }
}

.newResumeHealthCheck {
    .resume-scan-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        width: 100%;
        background: var(--bg-gray-f3);
        padding: 48px;

        .section-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;

            h2 {
                font-weight: 700;
                font-style: Bold;
                font-size: 22px;
                line-height: 100%;
                letter-spacing: 0%;
                color: var(--primary-black);
            }

            p {
                text-align: center;
                font-weight: 500;
                font-style: Medium;
                font-size: 12px;
                line-height: 100%;
                letter-spacing: 0%;
                color: var(--text-gray);
                margin: 0;
            }
        }

        .scan-timer {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            justify-content: center;
            border: 4px solid #DFAF0A;
            background: #FBF8EF;
            border-radius: 50%;
            height: 122px;
            width: 122px;

            .sec {
                font-size: 32px;
                font-weight: 700;
                line-height: 100%;
                color: var(--primary-black);
            }

            .sec-text {
                font-size: 12px;
                font-weight: 400;
                line-height: 100%;
                color: var(--primary-black);
            }

            .yellow-dot {
                position: absolute;
                height: 12px;
                width: 12px;
                background: #DFAF0A;
                border-radius: 50%;
                top: 30%;
                right: 3px;
                transform: translate(50%, -50%);
            }

        }

        .scan-steps-wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 24px;
            width: 100%;

            .scan-step-card {
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                background: #FFFFFF7A;
                box-shadow: 0px 2px 4px 0px #93939333;
                border: 1px solid var(--rgb-gray-20);
                border-image-source: linear-gradient(99.92deg, rgba(186, 182, 163, 0.4) 0%, rgba(193, 183, 171, 0.136) 93.25%);
                border-radius: 12px;
                padding: 20px 16px;
                gap: 12px;
                width: 355px;
                min-width: max-content;

                .time {
                    border-radius: 32px;
                    padding: 8px 12px;
                    background: #DFAF0A;
                    color: var(--white);
                    font-size: 12px;
                    font-weight: 700;
                    line-height: 100%;
                }

                .title {
                    color: var(--primary-black);
                    font-size: 12px;
                    font-weight: 700;
                    line-height: 100%;
                }

                .description {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 4px;

                    p {
                        color: var(--primary-black);
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 100%;
                        margin: 0;
                    }
                }
            }
        }

        .section-footer {
            p {
                color: var(--text-gray);
                font-size: 12px;
                line-height: 100%;
                margin: 0;

                b {
                    font-weight: 600;
                }
            }
        }
    }

    .resume-transformation-overview-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
        padding: 48px;
        background: var(--white);
        width: 100%;
        margin-inline: -64px;
        width: calc(100% + 128px);

        .recruiter-view-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 24px;
            width: 100%;

            .section-header {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 8px;

                .subtitle {
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 100%;
                    color: #3679B7;
                }

                h2 {
                    font-size: 22px;
                    line-height: 100%;
                    font-weight: 500;
                    color: var(--text-gray);

                    b {
                        font-weight: 700;
                        color: var(--primary-black);
                    }
                }
            }

            .section-content {
                display: grid;
                grid-auto-rows: auto;
                gap: 32px;

                .compare-row {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 32px;

                    &.titles {
                        margin-bottom: -32px;

                        .title {
                            color: var(--primary-black);
                            font-size: 12px;
                            font-weight: 600;
                            line-height: 100%;
                            text-align: center;
                            margin: 16px;
                        }
                    }

                    .compare-item {
                        display: flex;
                        align-items: center;
                        box-shadow: 0px 2px 4px 0px #93939333;
                        border-left: 3px solid;
                        border-radius: 12px;
                        padding: 16px;
                        width: 100%;
                        min-height: 74px;

                        p {
                            color: var(--primary-black);
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 20px;
                            margin: 0;

                            text {
                                color: var(--text-gray-60);
                            }
                        }

                        &.write-item {
                            border-left: 0 solid transparent;
                            background: linear-gradient(99.92deg, #E7E2C4 0%, rgba(193, 183, 171, 0.34) 93.25%) left / 3px 100% no-repeat #F8F4F47A;
                        }

                        &.think-item {
                            border-left: 0 solid transparent;
                            background: linear-gradient(99.92deg, #E7E2C4 0%, rgba(193, 183, 171, 0.34) 93.25%) left / 3px 100% no-repeat, #FFFCF0;
                        }
                    }
                }
            }

            .notes-text {
                p {
                    color: var(--primary-black);
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 100%;
                    margin: 0;

                    b {
                        font-weight: 700;
                    }
                }
            }

            .action-btns {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;

                .transform-btn {
                    width: 589px;
                    justify-content: center;
                    max-width: 100%;
                }
            }
        }

    }

    hr {
        border-top: 0.75px solid var(--text-field-outline);
        width: 100%;
    }

    .transformation-features-section {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 84px;
        max-width: 100%;

        .features-section {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            justify-content: space-between;
            gap: 24px;

            .section-header {
                h2 {
                    font-weight: 700;
                    font-style: Bold;
                    font-size: 22px;
                    line-height: 100%;
                    letter-spacing: 0%;
                    color: var(--primary-black);
                }
            }

            .features-wrapper {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 24px;

                .feature-card {
                    display: flex;
                    gap: 12px;

                    .icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 40px;
                        width: 40px;
                        background: #EFECF9;
                        border-radius: 6px;
                    }

                    .feature-content {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        justify-content: center;
                        gap: 8px;

                        h3 {
                            font-size: 14px;
                            font-weight: 600;
                            line-height: 100%;
                            color: #5E5E5E;
                        }

                        p {
                            font-size: 12px;
                            font-weight: 400;
                            line-height: 100%;
                            color: var(--primary-black);
                            margin: 0;
                        }
                    }
                }
            }

            .notes-wrapper {
                p {
                    color: var(--text-gray);
                    font-size: 11px;
                    font-weight: 400;
                    line-height: 14px;
                    margin: 0;
                }
            }
        }

        .guarantee-card {
            display: flex;
            flex-direction: column;
            background: #BEF4DC29;
            border: 1px solid #C3E2D5;
            padding: 8px 12px;
            border-radius: 16px;
            gap: 8px;
            justify-content: flex-start;

            .guarantee-header {
                display: flex;
                align-items: center;
                gap: 4px;

                .icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 24px;
                    width: 24px;
                    background: var(--white);
                    border-radius: 50%;
                }

                span {
                    margin-top: 2px;
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 100%;
                    color: var(--primary-black);
                }
            }

            .guarantee-content {
                width: 542px;

                p {
                    color: var(--text-gray);
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 100%;
                    margin: 0;
                }

                span {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    margin-top: 4px;

                    p {
                        color: var(--successGreen);
                        font-size: 11px;
                        font-weight: 500;
                        line-height: 100%;
                    }
                }
            }
        }


        .pricing-section {
            display: flex;
            flex-direction: column;
            background: #F0F0F0;
            padding: 20px;
            border-radius: 24px;
            gap: 20px;
            width: 340px;

            .icon {
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #D6D7D6;
                height: 40px;
                width: 40px;
                border-radius: 50%;
            }

            .titles {
                line-height: 100%;
                color: var(--primary-black);

                h2 {
                    font-size: 16px;
                    font-weight: 800;
                }

                p {
                    margin: 0;
                    font-size: 12px;
                    font-weight: 400;
                }
            }

            .pricing-card {

                .price-title {
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    .old-price {
                        text-decoration: line-through;
                        color: #231F207A;
                    }

                    .offer-tag {
                        padding: 4px 12px;
                        background: #F6FFC3;
                        border-radius: 8px;
                        font-size: 10px;
                        color: #4C5901;
                        font-weight: 600;
                        line-height: 100%;
                    }
                }
            }

            .price-tag {
                display: flex;
                align-items: flex-end;
                gap: 4px;
                margin-top: 4px;

                h3 {
                    font-size: 32px;
                    font-weight: 600;
                    line-height: 100%;
                }

                p {
                    margin: 0;
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 100%;
                    color: var(--text-gray-60);
                }
            }

            .features-list {
                display: flex;
                flex-direction: column;
                gap: 8px;
                background: var(--white);
                padding: 16px;
                border-radius: 20px;

                .feature-item {
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    svg {}

                    span {
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 100%;
                        color: var(--text-gray);
                    }
                }
            }
        }
    }

    .before-after-resume-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 64px;
        background: var(--bg-gray-f3);
        padding: 48px;

        .resume-overview-section {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 16px;

            .section-header {
                h2 {
                    font-size: 22px;
                    line-height: 100%;
                    font-weight: 600;
                    color: var(--text-gray);

                    b {
                        color: var(--primary-black);
                        font-weight: 700;
                    }

                }

                p {
                    margin: 8px 0 0 0;
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 100%;
                    color: var(--text-gray);
                }
            }
        }
    }

    .testimonials-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;

        .percentage-box {
            position: relative;

            .blue-bg-dot {
                background: #CAE1F6;
                height: 67px;
                width: 67px;
                border-radius: 50%;
            }

            span {
                position: absolute;
                top: 10px;
                left: -52px;
                font-size: 64px;
                font-weight: 700;
                line-height: 100%;
                color: var(--primary-black);
            }
        }

        .subtitle {
            font-size: 14px;
            font-weight: 500;
            line-height: 100%;
            color: var(--primary-black);
        }

        .subtitle-text {
            font-size: 12px;
            font-weight: 400;
            line-height: 100%;
            color: var(--primary-black);
        }

        .testimonial-card-wrapper {
            display: flex;
            align-items: stretch;
            justify-content: center;
            gap: 24px;
            max-width: 100%;

            .testimonial-card {
                display: flex;
                flex-direction: column;
                background: var(--white);
                padding: 12px 24px;
                border-radius: 12px;
                box-shadow: 2px 4px 4px 0px #5F5E5E3D;
                width: 505px;
                /* min-height: 132px; */

                .quote {
                    color: #D3D7DF;
                    height: 13px;
                    width: 19px;
                }

                .testimonial-text {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 17px;
                    color: var(--primary-black);
                    font-style: italic;
                    flex-grow: 1;
                    margin-bottom: 8px;
                }

                .name {
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 100%;
                    color: var(--primary-black);
                    margin-top: auto;
                }

                .dash {
                    display: inline-block;
                    border: 1px solid #231F20;
                    width: 8px;
                    height: 0px;
                    margin-bottom: 3px;
                }
            }
        }
    }

    .transformation-workflow-section {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        width: 100%;

        .title {
            h2 {
                font-size: 22px;
                line-height: 100%;
                font-weight: 700;
                color: var(--primary-black);
            }
        }

        .workflow-steps-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 24px;
            max-width: 100%;

            .step-card {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 14px;
                background: var(--white);
                border: 1px solid #BABABA33;
                border-radius: 16px;
                padding: 0px 18px;
                width: 243px;
                height: 245px;
                overflow: hidden;

                span {
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 100%;
                    color: #DA752B;
                    align-self: flex-start;
                    margin-top: -20px;
                }

                .description {
                    align-self: flex-start;
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 100%;
                    color: var(--primary-black);
                }

            }
        }
    }

    .resume-killer-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 38px;
        width: 100%;
        background: #e8e7e6;
        padding: 48px;
        margin-inline: -64px;
        width: calc(100% + 128px);

        .title {
            h2 {
                font-size: 22px;
                line-height: 100%;
                font-weight: 400;
                color: #6B6B6BB8;

                b {
                    font-weight: 700;
                    color: var(--primary-black);
                }
            }
        }

        .killer-card-list {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px;

            .killer-card-wrapper {
                position: relative;
                display: inline-block;
                /* padding: 16px;
                background: var(--white);
                border: 1px solid #E0E1E0;
                border-radius: 8px;
                box-shadow: 2px 4px 4px 1px #5F5E5E38; */
                width: 254px;
                height: 142px;

                .card-border-left {
                    position: absolute;
                    inset: 0;
                    background: #FFFFFFA3;
                    border-radius: 8px;
                    border: 1px solid var(--text-field-outline);
                    box-shadow: 2px 4px 4px 0px #5F5E5E3D;
                    pointer-events: none;
                    transform: rotate(3.88deg);
                    height: 128px;
                }

                .card-border-right {
                    position: absolute;
                    inset: 0;
                    background: #FFFFFFCC;
                    border-radius: 8px;
                    border: 1px solid var(--text-field-outline);
                    box-shadow: 2px 4px 4px 0px #5F5E5E3D;
                    pointer-events: none;
                    transform: rotate(-3.88deg);
                    opacity: 1;
                    height: 128px;
                }

                .killer-card-content {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    position: relative;
                    z-index: 2;
                    padding: 16px;
                    background: var(--white);
                    border: 1px solid var(--text-field-outline);
                    border-radius: 8px;
                    box-shadow: 2px 4px 4px 1px #5F5E5E38;
                    height: 128px;
                    width: 254px;

                    .title-head {
                        display: flex;
                        align-items: center;
                        gap: 8px;

                        h4 {
                            font-size: 14px;
                            font-weight: 700;
                            line-height: 100%;
                            color: var(--primary-black);
                        }
                    }

                    p {
                        margin: 0;
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 17px;
                        color: var(--text-gray);
                    }
                }
            }
        }

        .action-btns {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 24px;
            width: 100%;

            .sample-report {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 16px;

                a {
                    display: flex;
                    white-space: nowrap;
                    align-items: center;
                    padding: 12px 24px;
                    border-radius: 27px;
                    background: var(--white);
                    border: 1px solid var(--primary-black);
                    gap: 8px;
                    color: var(--primary-black);
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 100%;
                    text-transform: uppercase;
                }
            }
        }
    }

    .action-btns .transform-btn {
        display: flex;
        white-space: nowrap;
        align-items: center;
        padding: 12px 24px;
        border-radius: 27px;
        background: var(--primary-black);
        gap: 8px;
        color: var(--white);
        font-size: 14px;
        font-weight: 700;
        line-height: 100%;
        text-transform: uppercase;
        border: 1px solid var(--primary-black);
    }

    .testimonial-and-faq-section {
        display: flex;
        flex-direction: column;
        background: var(--bg-gray-f3);
        padding: 48px 0px;
        gap: 38px;

        .resume-testimonial-result {
            padding: 24px 0px 48px 84px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 2;


            .backdropTestimonials {
                position: absolute;
                top: 0;
                left: -176px;
                width: calc(100% + 352px);
                height: 100%;
                background: var(--bg-gray-f3);
                z-index: 1;
            }

            >* {
                z-index: 2;
            }

            h5 {
                color: var(--primary-black);
                font-size: 22px;
                font-weight: 700;
                line-height: 27px;
                text-transform: capitalize;
                margin-bottom: 8px;
                text-align: center;
            }

            text {
                color: var(--text-gray);
                text-align: center;
                font-size: 12px;
                font-weight: 500;
                line-height: 15px;
                margin-bottom: 24px;
            }

            .testimonials {
                display: block;
                width: 100%;

                .testimonial-item {
                    border-radius: 16px;
                    border: 1px solid var(--text-field-outline);
                    background: var(--white);
                    display: flex !important;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 16px;
                    position: relative;
                    background: var(--white);
                    border-radius: 16px;
                    padding: 16px;
                    min-height: 300px;

                    @media screen and (max-width: 767px) {
                        padding: 8px;
                        min-height: unset;
                    }
                }

                .slick-slider.center .slick-track {
                    margin-left: 48px;
                }

                .slick-slide {
                    padding: 0 8px;

                    >div {
                        height: 100%;
                    }
                }

                .slick-list {
                    margin-left: -8px;
                    padding: 0 !important;
                    overflow: unset;
                    overflow-x: clip;
                }

                .slick-arrow {
                    display: flex !important;
                    justify-content: center;
                    align-items: center;
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    z-index: 10;
                    background: #FFFFFFB8;
                    border: 1px solid #E0E1E0;

                    svg {
                        width: 30px;
                        height: 30px;
                        min-width: 30px;
                        border-radius: 50%;
                    }

                    &.slick-prev {
                        left: -22px !important;
                    }

                    &.slick-next {
                        right: 16px !important;
                    }
                }

                .slick-dots {
                    bottom: -30px;

                    li {
                        width: auto;
                        height: auto;

                        button {
                            background: var(--light-gray-D9);
                            opacity: 1;
                            height: 10px;
                            width: 10px;
                            margin: auto;

                            &:before {
                                display: none;
                            }
                        }
                    }

                    li.slick-active button {
                        background: var(--primary-dark);
                        opacity: 1;
                    }
                }
            }
        }

        .faq-resume {
            display: flex;
            flex-direction: column;
            /* padding: 0px 84px; */

            h5 {
                color: var(--primary-black);
                font-size: 22px;
                font-weight: 700;
                line-height: 27px;
                text-transform: capitalize;
                margin-bottom: 24px;
                text-align: center;
            }

            .faqs {
                display: flex;
                flex-direction: column;
                gap: 16px;

                .faq {
                    padding: 16px;
                    border-radius: 16px;
                    border: 1px solid var(--rgb-gray-20);
                    background: var(--white);

                    h6 {
                        color: var(--primary-black);
                        font-size: 14px;
                        font-weight: 700;
                        line-height: 17px;
                        margin-bottom: 8px;
                    }

                    text {
                        color: var(--text-gray);
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 18px;
                    }
                }
            }
        }
    }

    /* the impossible pick */
    @media screen and (max-width: 767px) {
        .resume-scan-section {
            padding: 42px 18px;

            .section-header {
                h2 {
                    font-size: 18px;
                }

                p {
                    text-align: center;
                }
            }

            .scan-steps-wrapper {
                flex-direction: column;
            }

            .section-footer {
                display: none;
            }

            @media screen and (max-width: 480px) {
                padding: 42px 0;
            }
        }

        .resume-transformation-overview-section {
            padding: 42px 20px;
            margin-inline: -16px;
            width: calc(100% + 32px);

            .recruiter-view-section {
                .section-header {
                    h2 {
                        font-size: 18px;
                    }
                }

                .section-content {
                    gap: 24px;

                    .compare-row {
                        gap: 24px;

                        &.titles {
                            margin-bottom: -24px;

                            .title {
                                text-align: left;
                                margin: 16px 2px;
                            }
                        }

                        .compare-item {
                            align-items: flex-start;
                            min-height: fit-content;

                            p {
                                font-size: 12px;
                                line-height: 18px;
                            }
                        }
                    }
                }

                .notes-text {
                    p {
                        font-size: 11px;
                        text-align: center;
                        white-space: pre;
                    }
                }

            }

            .transformation-features-section {
                flex-direction: column;
                align-items: center;

                .features-section {
                    .section-header {
                        h2 {
                            font-size: 18px;
                        }
                    }

                    .features-wrapper {
                        .feature-card {
                            width: 100%;

                            .icon {
                                flex-shrink: 0;
                                height: 32px;
                                width: 32px;
                            }

                            .feature-content {
                                gap: 4px;

                                h3 {
                                    font-size: 12px;
                                }

                                p {
                                    font-size: 11px;
                                }
                            }
                        }
                    }

                    .guarantee-card {
                        display: none;
                    }

                    .notes-wrapper {
                        display: none;
                    }
                }

                .guarantee-card {
                    width: 100%;

                    .guarantee-header {
                        .icon {
                            height: 20px;
                            width: 20px;
                        }

                        span {
                            font-size: 12px;
                        }
                    }

                    .guarantee-content {
                        p {
                            font-size: 11px;
                        }

                        span {
                            p {
                                font-size: 10px;
                            }
                        }
                    }
                }
            }
        }

        .before-after-resume-section {
            padding: 42px 18px;

            .resume-overview-section {
                .section-header {
                    h2 {
                        font-size: 18px;
                        line-height: 24px;
                        text-align: center;
                    }

                    p {
                        font-size: 11px;
                        text-align: center;
                    }
                }

                .section-content {
                    margin-bottom: -64px;
                    text-align: center;

                    img {
                        transform: scale(1);
                    }

                    .mobile-rt-resume {
                        position: relative;
                        top: -52px;
                    }
                }
            }

            .testimonials-section {

                .percentage-box {
                    span {
                        font-size: 56px;
                    }

                    .subtitle {
                        font-size: 12px;
                    }
                }

                .subtitle-text {
                    display: none;
                }

                .testimonial-card-wrapper {
                    flex-direction: column;
                    gap: 18px;

                    .testimonial-card {
                        padding: 12px;

                        .testimonial-text {
                            font-size: 11px;
                            line-height: 16px;
                        }

                        .name {
                            font-size: 11px;
                            line-height: 16px;
                        }
                    }
                }
            }

            .transformation-workflow-section {
                .title {
                    h2 {
                        font-size: 18px;
                        line-height: 24px;
                        text-align: center;
                    }
                }

                .workflow-steps-wrapper {
                    gap: 12px;

                    .step-card {
                        width: 48%;
                        height: 214px;
                        padding: 0 12px;
                        gap: 8px;

                        img {
                            height: 142px;
                            width: 142px;
                        }

                        span {
                            font-size: 11px;
                        }

                        .description {
                            font-size: 12px;
                            line-height: 18px;
                        }
                    }

                    .step-card:last-child {
                        width: 80%;
                    }
                }
            }

            @media screen and (max-width: 480px) {
                padding: 42px 0;
            }
        }

        .resume-killer-section {
            padding: 42px 8px;
            margin-inline: -16px;
            width: calc(100% + 32px);

            .title {
                h2 {
                    font-size: 18px;
                    line-height: 24px;
                    text-align: center;
                }

                h2 b::after {
                    content: "";
                    display: block;
                }
            }

            .killer-card-list {
                place-items: center;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 12px;
                width: 100%;
            }

            .action-btns {
                flex-direction: column;
                align-items: center;
                width: 100%;
                gap: 16px;
                padding: 0 8px;
            }
        }

        .testimonial-and-faq-section {

            .resume-testimonial-result {
                padding: 24px 0px 42px 18px;

                h5 {
                    font-size: 18px;
                    line-height: 100%;
                    margin: 0 36px 8px 18px;
                }

                text {
                    font-size: 11px;
                    line-height: 16px;
                    margin: 0 18px 24px 0;
                }

                .testimonials {
                    .slick-arrow {
                        display: none !important;
                    }

                    .slick-slider.center .slick-track {
                        display: flex;
                        justify-content: center;

                        .slick-slide .testimonial-item {
                            width: fit-content !important;
                        }
                    }
                }
            }

            .faq-resume {
                padding: 0px 18px;

                h5 {
                    font-size: 18px;
                    line-height: 100%;
                }
            }
        }
    }

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

        .resume-scan-section .scan-steps-wrapper .scan-step-card {
            width: 100% !important;
        }

        .before-after-resume-section .testimonials-section .testimonial-card-wrapper .testimonial-card {
            width: 100% !important;
        }

        .resume-transformation-overview-section .recruiter-view-section .section-header {
            h2 {
                line-height: 22px;
                text-align: center;

                b::after {
                    content: "";
                    display: block;
                }
            }
        }

        .resume-killer-section {
            .killer-card-list .killer-card-wrapper {
                width: 174px;
                height: 147px;

                .card-border-right {
                    width: 168px;
                }

                .card-border-left {
                    width: 168px;
                    transform: rotate(4deg);
                }

                .killer-card-content {
                    width: 165px;
                    height: 127px;
                    padding: 12px 8px;
                    gap: 8px;

                    .title-head {
                        gap: 2px;
                        font-family: 'Heebo', sans-serif;

                        img {
                            height: 16px;
                            width: 16px;
                        }

                        h4 {
                            font-size: 13px;
                        }
                    }

                    p {
                        font-size: 11px;
                        line-height: 16px;
                    }
                }

            }

            .action-btns {
                .sample-report {
                    width: 100%;
                }

                .sample-report a,
                .transform-btn {
                    width: 100%;
                    justify-content: center;
                }
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 880px) {
        .resume-killer-section .killer-card-list {
            grid-template-columns: repeat(2, 1fr) !important;
        }

        .resume-transformation-overview-section .transformation-features-section .pricing-section {
            width: 372px;
        }

        .resume-scan-section {
            .scan-steps-wrapper {
                flex-direction: column;
                align-items: center;
                gap: 8px;

                .step-card {
                    padding: 16px 12px;

                    .description {
                        p {
                            font-size: 11px;
                        }
                    }
                }
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1160px) {
        .resume-transformation-overview-section .transformation-features-section {
            align-items: center;
            flex-direction: column;
            gap: 28px;
        }
    }


    @media screen and (max-width: 1024px) {
        .resume-transformation-overview-section .transformation-features-section {
            gap: 28px;
        }
    }

    @media screen and (max-width: 1240px) {
        .workflow-steps-wrapper {
            flex-wrap: wrap;
        }
    }

    @media screen and (max-width: 1280px) {
        .before-after-resume-section .resume-overview-section .section-content {
            img {
                transform: scale(0.95);
            }
        }
    }

    @media screen and (max-width: 1270px) {
        .resume-killer-section .killer-card-list {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}


.commonModal.ReactModal__Content.health-check-loader {
    width: 566px;
    max-width: 100%;

    .modal-content {
        padding: 56px 40px 48px;
        display: flex;
        flex-direction: column;
        border-radius: 16px;

        .header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            margin-bottom: 32px;

            h5 {
                color: var(--primary-black);
                font-size: 22px;
                font-weight: 700;
                line-height: 27px;
                text-transform: capitalize;
            }

            span {
                color: var(--text-gray);
                text-align: center;
                font-size: 14px;
                font-weight: 400;
                line-height: 17px;

                @media screen and (max-width: 767px) {
                    font-size: 12px;
                    line-height: 15px;
                }
            }
        }

        .content {
            display: flex;
            flex-direction: column;
            gap: 16px;

            .loadingStep {
                width: 100%;
                display: flex;
                align-self: start;
                justify-content: space-between;
                border-radius: 16px;
                background: #F4F4F4;
                padding: 16px;

                .left {
                    display: flex;
                    align-items: center;
                    gap: 12px;

                    .icon {
                        width: 32px;
                        min-width: 32px;
                        height: 32px;
                        border-radius: 50%;
                        background: var(--text-field-outline);
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        svg {
                            width: 20px;
                            height: 20px;
                        }
                    }

                    h6 {
                        color: var(--rgb-dark-gray-60);
                        font-size: 18px;
                        font-weight: 600;
                        line-height: 22px;
                    }
                }

                &.active {
                    background: var(--Tab-color, #E3E6FE);

                    .left {
                        .icon {
                            background: #2F46F7;
                        }

                        .icon.stroke svg path {
                            stroke: var(--white);
                        }

                        .icon.fill svg path {
                            fill: var(--white);
                        }

                        .icon.fill.opacity svg path {
                            fill-opacity: 1;
                        }

                        .icon.stroke.opacity svg path {
                            stroke-opacity: 1;
                        }

                        h6 {
                            color: #2F46F7;
                        }
                    }

                    .stepLoader {
                        display: block;
                    }
                }

                &.completed {
                    background: #E6FFF3;

                    .left {
                        .icon {
                            background: var(--primary-green);
                            position: relative;

                            svg {
                                display: none;
                            }

                            &::after {
                                content: '';
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                width: 20px;
                                height: 20px;
                                background: url(/images/talent/check.svg) no-repeat center center;
                                background-size: contain;
                                filter: invert(1);
                            }
                        }

                        h6 {
                            color: var(--primary-green);
                        }
                    }
                }
            }
        }

        @media screen and (max-width: 767px) {
            padding: 24px 16px;

            .header {
                h5 {
                    font-size: 18px;
                    line-height: 22px;
                }
            }

            .content {
                .loadingStep {
                    padding: 12px;
                    border-radius: 8px;

                    .left {
                        gap: 6px;

                        .icon {
                            min-width: 24px;
                            width: 24px;
                            height: 24px;

                            svg {
                                width: 15px;
                                height: 15px;
                            }
                        }

                        h6 {
                            font-size: 13px;
                            line-height: 16px;
                        }
                    }

                }
            }
        }
    }
}

.stepLoader {
    position: relative;
    width: 28px;
    height: 28px;
    display: none;

    /* From Uiverse.io by mrhyddenn */
    .spinner {
        all: unset;
        font-size: 28px;
        position: relative;
        display: inline-block;
        width: 1em;
        height: 1em;
    }

    .spinner.center {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .spinner .spinner-blade {
        position: absolute;
        left: 0.4629em;
        bottom: 0;
        width: 0.074em;
        height: 0.2777em;
        border-radius: 0.0555em;
        background-color: transparent;
        -webkit-transform-origin: center -0.2222em;
        -ms-transform-origin: center -0.2222em;
        transform-origin: center -0.2222em;
        animation: spinner-fade9234 1s infinite linear;
    }

    .spinner .spinner-blade:nth-child(1) {
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .spinner .spinner-blade:nth-child(2) {
        -webkit-animation-delay: 0.083s;
        animation-delay: 0.083s;
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .spinner .spinner-blade:nth-child(3) {
        -webkit-animation-delay: 0.166s;
        animation-delay: 0.166s;
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .spinner .spinner-blade:nth-child(4) {
        -webkit-animation-delay: 0.249s;
        animation-delay: 0.249s;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .spinner .spinner-blade:nth-child(5) {
        -webkit-animation-delay: 0.332s;
        animation-delay: 0.332s;
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
    }

    .spinner .spinner-blade:nth-child(6) {
        -webkit-animation-delay: 0.415s;
        animation-delay: 0.415s;
        -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
        transform: rotate(150deg);
    }

    .spinner .spinner-blade:nth-child(7) {
        -webkit-animation-delay: 0.498s;
        animation-delay: 0.498s;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .spinner .spinner-blade:nth-child(8) {
        -webkit-animation-delay: 0.581s;
        animation-delay: 0.581s;
        -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
        transform: rotate(210deg);
    }

    .spinner .spinner-blade:nth-child(9) {
        -webkit-animation-delay: 0.664s;
        animation-delay: 0.664s;
        -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        transform: rotate(240deg);
    }

    .spinner .spinner-blade:nth-child(10) {
        -webkit-animation-delay: 0.747s;
        animation-delay: 0.747s;
        -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .spinner .spinner-blade:nth-child(11) {
        -webkit-animation-delay: 0.83s;
        animation-delay: 0.83s;
        -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
        transform: rotate(300deg);
    }

    .spinner .spinner-blade:nth-child(12) {
        -webkit-animation-delay: 0.913s;
        animation-delay: 0.913s;
        -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
        transform: rotate(330deg);
    }


}

@keyframes spinner-fade9234 {
    0% {
        background-color: #2F46F7;
    }

    100% {
        background-color: transparent;
    }
}

@keyframes emailVerifySpinner {
    to {
        transform: rotate(360deg);
    }
}


.commonModal.ReactModal__Content.restart-health-check {
    width: 566px;
    max-width: 100%;

    .modal-content {
        padding: 56px;
        display: flex;
        flex-direction: column;
        gap: 40px;
        border-radius: 16px;

        .header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            margin-bottom: 0;

            img {
                width: 80px;
                height: 80px;
                margin-bottom: 6px;
            }

            h5 {
                color: var(--primary-black);
                text-align: center;
                font-size: 22px;
                font-weight: 700;
                line-height: 31px;
                text-transform: capitalize;
            }

            .detesText {
                color: var(--text-gray);
                text-align: center;
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
            }
        }

        .action {
            display: flex;
            flex-direction: column;
            gap: 16px;

            button {
                width: 100%;
                text-align: center;

                &.outlinedBtn {
                    outline: 1px solid var(--text-gray) !important;
                    color: var(--text-gray) !important;
                }

                &.primaryBtn {
                    background: var(--primary-black);
                    color: var(--white);
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 17px;
                }
            }
        }

        @media screen and (max-width: 767px) {
            padding: 24px 16px;

            .header {
                img {
                    display: none;
                }

                h5 {
                    color: var(--primary-black);
                    text-align: center;
                    font-size: 18px;
                    line-height: 24px;
                }

                .detesText {
                    font-size: 11px;
                    line-height: 15px;
                }
            }

            .action {
                .outlinedBtn {
                    outline: 1px solid var(--text-gray) !important;
                    color: var(--text-gray) !important;
                }
            }
        }

    }
}

.commonModal.ReactModal__Content.transformed-resume {
    width: 652px;
    max-width: 100%;

    .modal-content {
        padding: 48px 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        border-radius: 16px;

        .header {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            margin-bottom: 0;
            text-align: center;

            h5 {
                color: var(--primary-black);
                font-size: 22px;
                font-weight: 700;
                line-height: 27px;
                text-transform: capitalize;
            }

            h5.noTransform {
                text-transform: none;
            }

            .detesText {
                color: var(--text-gray);
                text-align: center;
                font-size: 14px;
                font-weight: 400;
                line-height: 17px;
            }

            .detesSection {
                margin-top: 24px;
                width: 100%;
                background: linear-gradient(118.92deg, rgba(221, 220, 255, 0.32) 26.18%, rgba(255, 227, 211, 0.3008) 96.85%);
                padding: 16px;
                border-radius: 16px;
                text-align: left;

                .steps {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    padding-left: 54px;

                    .step {
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                        position: relative;
                        min-height: 79px;

                        &::before {
                            content: '';
                            position: absolute;
                            left: -35px;
                            top: 42px;
                            width: 1.5px;
                            height: calc(100% - 32px);
                            background: #6E7EFB;
                        }

                        &:last-child {
                            min-height: unset;

                            &::before {
                                display: none;
                            }
                        }

                        svg {
                            position: absolute;
                            left: -54px;
                            top: 0;
                        }

                        h6 {
                            font-weight: 700;
                            font-size: 14px;
                            line-height: 17px;
                            text-transform: capitalize;
                            color: #384AD7;
                        }

                        text {
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 18px;
                            color: var(--primary-black);

                            b {
                                font-weight: 500;
                            }

                            .orangeText {
                                font-weight: 500;
                                color: #E25509;
                                text-transform: uppercase;
                            }
                        }
                    }

                }
            }

            .content {
                margin-top: 24px;
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 16px;

                .loadingStep {
                    width: 100%;
                    display: flex;
                    align-self: start;
                    justify-content: space-between;
                    border-radius: 16px;
                    background: #F4F4F4;
                    padding: 16px;

                    .left {
                        display: flex;
                        align-items: center;
                        gap: 12px;

                        .icon {
                            width: 28px;
                            min-width: 28px;
                            height: 28px;
                            border-radius: 50%;
                            background: var(--text-field-outline);
                            display: flex;
                            justify-content: center;
                            align-items: center;

                            svg {
                                width: 16px;
                                height: 16px;
                            }
                        }

                        h6 {
                            color: var(--rgb-dark-gray-60);
                            font-size: 14px;
                            font-weight: 600;
                            line-height: 20px;
                        }
                    }

                    .stepLoader {
                        margin-left: 4px;
                        scale: 0.75;
                    }

                    &.active {
                        background: var(--Tab-color, #E3E6FE);

                        .left {
                            .icon {
                                background: #2F46F7;
                            }

                            .icon.stroke svg path {
                                stroke: var(--white);
                            }

                            .icon.fill svg path {
                                fill: var(--white);
                            }

                            .icon.fill.opacity svg path {
                                fill-opacity: 1;
                            }

                            .icon.stroke.opacity svg path {
                                stroke-opacity: 1;
                            }

                            h6 {
                                color: #2F46F7;
                            }
                        }

                        .stepLoader {
                            display: block;
                        }
                    }

                    &.completed {
                        background: #E6FFF3;

                        .left {
                            .icon {
                                background: var(--primary-green);
                                position: relative;

                                svg {
                                    display: none;
                                }

                                &::after {
                                    content: '';
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%, -50%);
                                    width: 20px;
                                    height: 20px;
                                    background: url(/images/talent/check.svg) no-repeat center center;
                                    background-size: contain;
                                    filter: invert(1);
                                }
                            }

                            h6 {
                                color: var(--primary-green);
                            }
                        }
                    }
                }
            }

            @media screen and (max-width: 767px) {
                padding: 24px 16px;

                .header {
                    h5 {
                        font-size: 18px;
                        line-height: 22px;
                    }
                }

                .content {
                    .loadingStep {
                        padding: 12px;
                        border-radius: 8px;

                        .left {
                            gap: 6px;

                            .icon {
                                min-width: 24px;
                                width: 24px;
                                height: 24px;

                                svg {
                                    width: 15px;
                                    height: 15px;
                                }
                            }

                            h6 {
                                font-size: 13px;
                                line-height: 16px;
                            }
                        }

                    }
                }
            }
        }

        .header.success {
            svg {
                margin-bottom: 24px;
            }
        }

        .action .primaryBtn {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 12px 29px;
            font-size: 14px;
            line-height: 17px;

            svg {
                min-width: 16px;
            }

            &:disabled {
                svg {
                    opacity: 0.3;
                }
            }
        }

        @media screen and (max-width: 767px) {
            padding: 24px 16px;

            .header.success {
                padding: 0;

                svg {
                    margin-bottom: 18px;
                }

                h5 {
                    font-size: 16px;
                    line-height: 20px;
                }

                .detesText {
                    font-size: 11px;
                    line-height: 18px;
                }
            }

            .header {
                h5 {
                    text-align: center;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 22px;
                    text-transform: capitalize;
                }

                .detesText {
                    font-size: 14px;
                    line-height: 17px;
                }
            }

            .action .primaryBtn {
                font-size: 14px;
                line-height: 17px;
                padding: 12px 16px;
                gap: 5px;
            }
        }

        /* @media screen and (max-width: 425px) {
            .action .primaryBtn {
                font-size: 11px;
                line-height: 13px;
                padding: 10px 20px;
            }
        } */
    }
}

.commonModal.ReactModal__Content.replaced-resume {
    width: 599px;
    max-width: 100%;

    .modal-content {
        padding: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;

        .header {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;

            h5 {
                font-size: 22px;
                font-weight: 700;
                line-height: 30px;
                margin-top: 12px;
                text-transform: capitalize;
            }

            text {
                font-weight: 400;
                font-size: 18px;
                line-height: 30px;
                text-align: center;
            }
        }

        .matchingJobs {
            background: linear-gradient(118.92deg, rgba(239, 238, 255, 0.8) 26.18%, rgba(255, 234, 222, 0.752) 96.85%);
            padding: 16px;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            gap: 16px;

            h6 {
                font-weight: 600;
                font-size: 16px;
                line-height: 20px;
                text-align: center;
                text-transform: capitalize;
            }


            .topMatchingJobs {
                margin: 0;
                display: flex;
                flex-direction: column;
                gap: 16px;
                text-align: left;

                .jobCard {
                    cursor: pointer;
                    width: 100%;
                    border-radius: 16px;
                    border: 1px solid var(--text-field-outline);
                    background: var(--white);
                    padding: 16px;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;

                    .jobCard-header {
                        display: flex;
                        align-items: flex-start;
                        gap: 8px;

                        .logo {
                            width: 48px;
                            height: 48px;
                            min-width: 48px;
                            border-radius: 6px;
                            background: var(--white);
                            align-items: center;
                            justify-content: center;
                            display: flex;
                            padding: 2px;
                            position: relative;
                            outline: 1px solid #d9d9d9;

                            .company_intialBg .company_intial h6 {
                                color: var(--white);
                                font-size: 20px;
                            }
                        }

                        .logo:has(.company_intialBg) {
                            padding: 0;
                            border: none;
                        }

                        .jobInfo {
                            position: relative;
                            padding-right: 32px;
                            width: calc(100% - 56px);
                            display: flex;
                            flex-direction: column;
                            gap: 6px;

                            h6 {
                                color: var(--primary-black);
                                font-size: 12px;
                                font-weight: 600;
                                line-height: 15px;
                                width: 100%;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                text-align: left;
                            }

                            .companyName {
                                color: var(--Secondary-text, var(--text-gray));
                                font-size: 12px;
                                font-weight: 500;
                                line-height: 15px;
                                display: flex;
                                align-items: center;
                                gap: 4px;

                                text {
                                    max-width: 100%;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                .uplersPartnerBadge {
                                    display: flex;

                                    svg {
                                        width: 15px;
                                        height: 15px;
                                        min-width: 15px;
                                    }
                                }

                                &:has(.uplersPartnerBadge) {
                                    text {
                                        max-width: calc(100% - 20px);
                                    }
                                }
                            }

                            .bookmarkIconBtn {
                                position: absolute;
                                right: 0;
                                top: 0;
                                width: 24px;
                                height: 24px;
                                min-width: 24px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                background-color: var(--white);
                                outline: 1px solid var(--text-field-outline);
                                border: none;
                                border-radius: 12px;
                                transition: background-color 0.3s ease;

                                svg {
                                    width: 12px;
                                    height: 14px;
                                    transition: fill 0.3s ease, stroke 0.3s ease;
                                }

                                &.saved {
                                    background: var(--primary-black);

                                    svg path {
                                        fill: var(--white);
                                        stroke: var(--white);
                                    }
                                }
                            }
                        }

                    }

                    .attribs {
                        display: flex;
                        gap: 16px;

                        >span {
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            color: var(--Secondary-text, var(--text-gray));
                            font-size: 11px;
                            font-weight: 500;
                            line-height: 13px;

                            img {
                                width: 14px;
                                height: 14px;
                                min-width: 14px;
                                opacity: 0.75;
                            }
                        }
                    }
                }
            }
        }

        .action {
            padding-top: 16px;
            display: flex;
            width: 100%;
            height: auto;

            .primaryBtn {
                font-weight: 700;
                font-size: 14px;
                line-height: 17px;
                text-transform: uppercase;
                width: 100%;
                text-align: center;
                padding: 12px 24px;
                border-radius: 27px;
                background: var(--primary-black);
                color: var(--white);
            }
        }
    }
}

.commonModal.ReactModal__Content.replaced-resume.replaceNudge {
    .modal-content {

        @media screen and (max-width: 767px) {
            padding: 24px 16px;
        }

        .header {
            gap: 6px;
            margin-bottom: 0;

            >svg {
                margin-bottom: 10px;
            }

            text {
                font-weight: 400;
                font-size: 14px;
                line-height: 17px;
                text-align: center;
            }

            h5 {
                margin: 0;
                font-size: 22px;
                font-weight: 700;
                line-height: 30px;
                text-transform: capitalize;

                @media screen and (max-width: 767px) {
                    font-size: 14px !important;
                    line-height: 22px !important;
                }
            }
        }

        .replace-section {
            display: flex;
            flex-direction: column;
            width: 552px;
            margin-inline: auto;
            max-width: 100%;
            gap: 24px;

            .replace-flex {
                margin-bottom: 16px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 16px;
                border-radius: 8px;
                background: rgba(255, 255, 255, 0.56);
                padding: 16px 24px;
                border: 1px solid var(--text-field-outline);

                .resume-name {
                    border-radius: 4px;
                    border: 0.5px solid var(--light-blue);
                    background: #F6FBFF;
                    padding: 4px 8px;
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    width: 276px;

                    img {
                        width: 20px;
                        height: 20px;
                        min-width: 20px;
                    }

                    .title {
                        color: var(--primary-navy);
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 15px;
                        width: calc(100% - 28px);
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }

                .resume-btn {
                    position: relative;

                    .outlinedBtn.filewrap {
                        padding: 0;
                        outline: 1px solid var(--gray-A6) !important;
                        border-radius: 27px;
                        height: 41px;
                        cursor: pointer;
                        box-shadow: none;

                        input {
                            background: transparent;
                            border-radius: 27px;
                            width: 330px;
                        }

                        label {
                            color: var(--primary-black);
                            font-size: 14px;
                            font-weight: 600;
                            text-transform: uppercase;
                            border-radius: 27px;
                            background: var(--white);
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            padding: 12px 24px;
                            height: 100%;
                            box-shadow: none;
                            cursor: pointer;

                            svg {
                                width: 18px;
                                height: 18px;
                                min-width: 18px;
                            }
                        }

                        @media screen and (max-width: 767px) {
                            label {
                                padding: 8px 16px;
                                font-size: 12px !important;
                                line-height: 15px !important;
                            }

                            input {
                                width: 282px !important;
                            }
                        }
                    }
                }
            }

            .primaryBtn.black {
                color: var(--white);
                font-size: 14px;
                font-weight: 700;
                line-height: 17px;
                text-transform: uppercase;
                background: var(--primary-black);

                &:disabled {
                    color: var(--primary-black);
                    background: #bababa;
                    opacity: 0.2;
                }
            }
        }
    }
}

@keyframes dot-3-move {
    20% {
        transform: scale(1);
    }

    45% {
        transform: translateY(-18px) scale(0.45);
    }

    60% {
        transform: translateY(-90px) scale(0.45);
    }

    80% {
        transform: translateY(-90px) scale(0.45);
    }

    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes dot-2-move {
    20% {
        transform: scale(1);
    }

    45% {
        transform: translate(-16px, 12px) scale(0.45);
    }

    60% {
        transform: translate(-80px, 60px) scale(0.45);
    }

    80% {
        transform: translate(-80px, 60px) scale(0.45);
    }

    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes dot-1-move {
    20% {
        transform: scale(1);
    }

    45% {
        transform: translate(16px, 12px) scale(0.45);
    }

    60% {
        transform: translate(80px, 60px) scale(0.45);
    }

    80% {
        transform: translate(80px, 60px) scale(0.45);
    }

    100% {
        transform: translateY(0px) scale(1);
    }
}

@keyframes rotate-move {
    55% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    80% {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes index {

    0%,
    100% {
        z-index: 3;
    }

    33.3% {
        z-index: 2;
    }

    66.6% {
        z-index: 1;
    }
}

.commonModal.ReactModal__Content.resume-health-info {
    width: 566px;
    max-width: 100%;

    .modal-content {
        padding: 48px 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        border-radius: 16px;
        background: var(--white);
        position: relative;

        .modalCloseBtn {
            position: absolute;
            top: 24px;
            right: 24px;
        }

        .header {
            display: flex;
            align-items: flex-start;
            gap: 12px;

            @media screen and (max-width: 566px) {
                flex-direction: column;
            }

            img {
                width: 80px;
                height: 80px;
                min-width: 80px;
            }

            .contents {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;

                h5 {
                    color: var(--primary-black);
                    font-size: 22px;
                    font-weight: 700;
                    line-height: 27px;
                }

                text {
                    color: var(--text-gray);
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 20px;
                }
            }
        }

        .scoreGuide {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            justify-content: center;

            .scoreGuide-item {
                padding: 24px 12px 12px;
                width: 215px;
                background: #EAFFD9;
                border-radius: 16px;
                display: flex;
                flex-direction: column;
                gap: 32px;

                .scoreGuide-item-main {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    h5 {
                        color: #5D784A;
                        font-size: 22px;
                        font-weight: 700;
                        line-height: 27px;
                        margin-bottom: 4px;
                    }

                    h6 {
                        color: #5D784A;
                        text-align: center;
                        font-size: 16px;
                        font-weight: 600;
                        line-height: 20px;
                        margin-bottom: 8px;
                    }

                    text {
                        color: #384E28;
                        text-align: center;
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 17px;
                    }
                }

                .badge-row {
                    display: flex;
                    justify-content: flex-end;

                    .badge {
                        width: 40px;
                        height: 40px;
                        border-radius: 6px;
                        background: #4F7830;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        svg {
                            width: 24px;
                            height: 24px;
                        }
                    }
                }

                @media screen and (max-width: 480px) {
                    width: 100%;
                }
            }

            .scoreGuide-item.blue {
                background: #E4F0FF;

                h5,
                h6 {
                    color: var(--secondary-blue);
                }

                text {
                    color: #132468;
                }

                .badge-row .badge {
                    background: var(--secondary-blue);
                }
            }

            .scoreGuide-item.yellow {
                background: #FFF6CF;

                h5,
                h6 {
                    color: #AE601B;
                }

                &.overlooked {
                    h6 {
                        font-size: 12px;
                        line-height: 20px;
                    }
                }

                text {
                    color: #7D3E06;
                }

                .badge-row .badge {
                    background: #AE601B;
                }
            }


            .scoreGuide-item.orange {
                color: #9F510B;
                background: #FFD8C3;

                h5,
                h6 {
                    color: #9F510B;
                }

                &.overlooked {
                    h6 {
                        font-size: 12px;
                        line-height: 20px;
                    }
                }

                text {
                    color: #9F510B;
                }

                .badge-row .badge {
                    background: #9F510B;
                }
            }

            .scoreGuide-item.red {
                background: #FCE2E3;

                h5,
                h6 {
                    color: var(--errorRed);
                }

                text {
                    color: #5F0D0D;
                }

                .badge-row .badge {
                    background: var(--errorRed);
                }
            }
        }

        .section-measures {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            justify-content: center;

            .section-item {
                padding: 16px;
                width: 215px;
                background: var(--light-gray);
                border-radius: 16px;
                display: flex;
                flex-direction: column;
                gap: 12px;

                .top {
                    display: flex;
                    align-items: flex-start;
                    justify-content: space-between;

                    h6 {
                        color: var(--primary-black);
                        font-size: 16px;
                        font-weight: 700;
                        line-height: 21px;
                    }

                    .badge {
                        padding: 2px 8px;
                        border-radius: 16px;
                        background: #E6FFF3;
                        display: inline-flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 4px;
                        color: var(--primary-green);
                        font-size: 12px;
                        font-weight: 700;
                        line-height: 15px;
                        margin-right: -8px;
                    }

                    .badge.blue {
                        color: var(--secondary-blue);
                        background: #DCE1F5;
                    }

                    .badge.pink {
                        color: #AC0EEB;
                        background: #F6E3FF;
                    }

                    .badge.yellow {
                        color: #CE8106;
                        background: #FFE9C0;
                    }
                }

                text {
                    color: var(--text-gray);
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 18px;
                }
            }
        }

        .bottom {
            display: flex;
            justify-content: center;
            width: 100%;
            align-items: center;
            margin-top: 8px;

            .primaryBtn {
                border-radius: 27px;
                border: 1px solid var(--primary-black);
                background: var(--primary-black);
                color: var(--white);
                font-size: 14px;
                font-weight: 700;
                line-height: 17px;
                text-transform: uppercase;
                padding: 12px 24px;
                width: 100%;
            }
        }


        @media screen and (max-width: 767px) {
            padding: 24px 16px 0;
            gap: 0;

            .modalCloseBtn {
                top: 16px;
                right: 16px;
            }

            .header {
                margin-bottom: 0;

                border-bottom: 1px solid var(--text-field-outline);
                background: var(--white);
                box-shadow: 1px 2px 4px 0px var(--rgb-dark-gray-10);
                padding: 0 16px 16px;
                width: calc(100% + 32px);

                img {
                    display: none;
                }

                .contents {

                    h5 {
                        font-size: 18px;
                        line-height: 22px;
                        text-transform: capitalize;
                    }

                    text {
                        font-size: 12px;
                        line-height: 18px;
                    }
                }
            }

            .scoreGuide {
                padding-block: 32px 56px;
                gap: 20px 16px;

                .scoreGuide-item {
                    width: calc(50% - 8px);
                    padding: 16px 12px 12px;
                    gap: 16px;
                    position: relative;

                    .scoreGuide-item-main {
                        margin-bottom: 64px;

                        h5 {
                            font-size: 18px;
                            font-weight: 700;
                            line-height: 20px;
                        }

                        h6 {
                            font-size: 13px;
                            font-weight: 600;
                            line-height: 17px;
                        }

                        text {
                            font-size: 11px;
                            font-weight: 400;
                            line-height: 14px;
                        }
                    }

                    .badge-row {
                        position: absolute;
                        bottom: 12px;
                        right: 12px;
                    }
                }
            }

            .section-measures {
                gap: 20px 16px;
                padding-block: 32px 56px;
                overflow-y: auto;
                max-height: calc(100vh - 236px);

                .section-item {
                    width: calc(50% - 8px);
                    position: relative;

                    .top {
                        h6 {
                            font-size: 14px;
                            line-height: 17px;
                        }

                        text {
                            font-size: 11px;
                            line-height: 13px;
                        }

                        .badge {
                            padding: 2px 6px;
                            font-size: 10px;
                            line-height: 12px;
                            position: absolute;
                            top: 8px;
                            right: 16px;
                        }
                    }
                }
            }

            .bottom {
                margin-top: 0;
                padding: 12px 16px 16px;
                border-radius: 16px 16px 0px 0px;
                border: 1px solid var(--text-field-outline);
                background: var(--lightest-yellow);
                box-shadow: 1px -2px 4px 0px var(--rgb-dark-gray-12);
                width: calc(100% + 32px);
                justify-content: unset;
            }
        }

    }
}

@media screen and (max-width:767px) {
    .react-modal-portal .ReactModal__Overlay:has(.resume-health-info) {
        padding: 0 !important;

        .commonModal.ReactModal__Content.resume-health-info {
            position: fixed;
            bottom: 0;
            top: unset;
            border-radius: 0 !important;
            width: 100%;

            .modal-content {
                position: absolute;
                bottom: 0;
                left: 0;
                border-radius: 16px 16px 0 0;
            }
        }
    }
}

.health-tabs {
    width: 100%;
    background: #E7E7E7;
    padding: 4px;
    border-radius: 12px;
    display: flex;
    gap: 4px;
    margin-bottom: 36px;

    .health-tab {
        flex: 1;
        color: #737381;
        border-radius: 12px;
        padding: 12px 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        background: transparent;
        cursor: pointer;
        transition: background 0.3s ease;

        svg path {
            stroke: #737381;
        }

        &:hover {
            background: #F5F5F5;
        }

        &.active {
            background: var(--white);
            cursor: default;
            color: var(--primary-black);
            font-weight: 700;

            svg path {
                stroke: var(--primary-black);
            }

            &:hover {
                background: var(--white);
            }
        }
    }
}

/* Resume Health Report start */
.resume-health-report {
    position: relative;

    .download-report-btn {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        background: var(--white);
        border: none;
        outline: none;
        border-radius: 24px;
        padding: 8px 16px;
        color: var(--primary-black);
        font-size: 14px;
        font-weight: 700;
        line-height: 17px;
        text-transform: uppercase;

        svg {
            width: 16px;
            height: 16px;
            min-width: 16px;
        }
    }

    .analyse-resume-container {
        background: #EDEFFF;
        padding: 24px;
        border-radius: 16px;
        margin: 0 0 24px;

        .header {
            display: flex;
            flex-direction: column;
            gap: 18px;

            span {
                display: flex;
                align-items: center;
                gap: 10px;

                h5 {
                    font-weight: 600;
                    font-size: 22px;
                    line-height: 28px;
                }
            }

            p {
                margin-bottom: 5px;
                font-size: 14px;
                font-weight: 400;
                color: var(--primary-black);
            }
        }

        .cards-container {
            display: flex;
            justify-content: center;
            gap: 16px;

            .card {
                display: flex;
                flex-direction: column;
                padding: 8px 12px;
                border-radius: 12px;
                width: 232px;
                gap: 10px;

                h6 {
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 100%;
                    padding: 4px 8px;
                    border-radius: 8px;
                    width: fit-content;
                }

                p {
                    margin: 0;
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 100%;
                    color: var(--text-gray);
                }
            }

            .card.content h6 {
                background: #EBFFF5;
                color: #348F79;
            }

            .card.format h6 {
                background: #E7ECFF;
                color: #1738BE;
            }

            .card.sections h6 {
                background: #F6E3FF;
                color: #AC0EEB;
            }

            .card.style h6 {
                background: #FFF1D6;
                color: #CE8106;
            }
        }
    }

    .priority-info {
        display: flex;
        flex-direction: column;
        gap: 24px;
        /* background: var(--white); */
        /* padding: 24px; */
        /* border-radius: 16px; */
        margin: 0 0 40px;
        width: 100%;

        .priority-info-header {
            display: flex;
            justify-content: flex-start;
            gap: 10px;

            img {
                width: 24px;
                height: 24px;
                min-width: 24px;
            }

            h5 {
                font-weight: 600;
                font-size: 22px;
                line-height: 28px;

                @media screen and (max-width: 480px) {
                    font-size: 18px;
                    line-height: 22px;
                }
            }
        }

        .priority-info-body {
            display: flex;
            gap: 32px;
            align-items: stretch;
            max-width: 100%;

            &:has(.evenDate-content) {
                flex-direction: column;
                gap: 16px 32px;


                .priority-info-content {
                    max-width: 100%;


                    .immediate-actions,
                    .nice-to-have {
                        width: 50%;
                    }

                    .priority-info-content-body {
                        flex-direction: row;
                    }

                    @media screen and (max-width: 991px) {
                        .priority-info-content-body {
                            flex-direction: column;
                            gap: 16px;

                            .immediate-actions,
                            .nice-to-have {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }

        .professional-resume-card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 16px;
            border-radius: 14px;
            padding: 16px;
            background: #FFFFFFCC;
            box-shadow: 0px 16px 24px -12px #00000033;
            border: 0.5px solid #4F39F6;

            h4 {
                font-family: Montserrat;
                font-weight: 600;
                font-size: 13px;
                line-height: 100%;
                letter-spacing: -0.15px;
                text-align: center;
            }

            .resume-templates {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 32px;

                .template-card {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;

                    h5 {
                        font-family: Montserrat;
                        font-weight: 500;
                        font-size: 12px;
                        line-height: 100%;
                        letter-spacing: 0px;
                        color: #6B6B6B;
                        text-align: center;
                    }
                }
            }

            button {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                font-size: 14px;
                font-weight: 700;
                line-height: 17px;
                text-transform: uppercase;
                white-space: nowrap;
                width: 100%;

                &.transform-btn {
                    color: var(--white);
                    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) -199.41%, rgba(0, 0, 0, 0.9) -139.52%, rgba(255, 39, 117, 0.9) -78.78%, rgba(227, 54, 255, 0.9) -9.38%, rgba(59, 55, 254, 0.9) 50.14%, rgba(51, 154, 250, 0.9) 141.74%, rgba(54, 255, 110, 0.9) 231.93%, rgba(163, 252, 50, 0.9) 333.69%, rgba(224, 255, 47, 0.9) 420.7%, rgba(255, 223, 53, 0.9) 494.44%, rgba(245, 155, 104, 0.9) 578.76%, rgba(255, 104, 50, 0.9) 664.04%, rgba(242, 53, 53, 0.9) 758.88%);

                    &:disabled {
                        opacity: 0.5;
                    }

                    s {
                        font-weight: 500;
                        color: #c8ccfe;
                    }

                    @media screen and (max-width: 480px) {
                        font-size: 10px;
                        letter-spacing: -0.3px;

                        img {
                            min-width: 14px;
                            width: 14px;
                            height: 14px;
                        }
                    }
                }
            }
        }


        .priority-info-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* max-width: 440px; */
            max-width: 50%;
            gap: 24px;
            border-radius: 12px;
            background: var(--white);
            padding: 24px;

            .main.health-check-results {
                max-width: 100%;

                h2 {
                    font-size: 14px;
                    font-weight: 700;
                    text-align: center;
                    margin-bottom: 6px;
                }
            }

            .priority-info-content-body {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 24px;

                &.no-preview {
                    flex-direction: row;
                    width: 100%;
                    max-width: 100%;
                }
            }

            .immediate-actions {
                border: 1.5px dashed #F5C0B9;
                border-radius: 12px;
                opacity: 1;
                padding: 16px;
                width: 100%;
                background: #fff2f2;

                h6 {
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 4px;
                    font-size: 14px;
                    line-height: 17px;
                    font-weight: 700;
                    color: var(--errorRed);

                    img {
                        margin-right: 4px;
                        width: 16px;
                        height: 16px;
                        min-width: 16px;
                    }

                    span {
                        font-size: 11px;
                        font-weight: 400;
                        color: #640606;
                        line-height: inherit;
                    }
                }

                ul {
                    margin-top: 8px;
                    margin-left: 5px;

                    li b {
                        font-weight: 600;
                    }
                }

                span {
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 28px;
                    color: var(--primary-black);
                }
            }

            .nice-to-have {
                border: 1.5px dashed rgba(27, 156, 216, 0.4);
                border-radius: 12px;
                opacity: 1;
                padding: 16px;
                width: 100%;
                background: #E7F7FF;

                h6 {
                    font-size: 14px;
                    display: flex;
                    align-items: flex-start;
                    gap: 4px;
                }

                ul {
                    margin-top: 8px;
                    margin-left: 5px;
                }

                span {
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 28px;
                    color: var(--text-gray);
                }
            }

            .view_weakness_details {
                cursor: pointer;
                transition: all 0.2s ease-in-out;
                padding: 4px 8px;
                margin: 2px -8px;
                border-radius: 6px;
                position: relative;

                &[data-tooltip] {
                    &::after {
                        content: attr(data-tooltip);
                        position: absolute;
                        /* bottom: calc(100% + 8px); */
                        bottom: -50%;
                        left: 50%;
                        transform: translateX(-50%);
                        background-color: rgba(51, 51, 51, 0.95);
                        color: white;
                        padding: 6px 10px;
                        border-radius: 6px;
                        font-size: 11px;
                        white-space: nowrap;
                        opacity: 0;
                        pointer-events: none;
                        transition: opacity 0.2s ease-in-out;
                        z-index: 1000;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                    }

                    /* &::before {
                        content: '';
                        position: absolute;
                        bottom: calc(100% + 2px);
                        left: 50%;
                        transform: translateX(-50%);
                        border: 5px solid transparent;
                        border-top-color: rgba(51, 51, 51, 0.95);
                        opacity: 0;
                        pointer-events: none;
                        transition: opacity 0.2s ease-in-out;
                        z-index: 1001;
                    } */

                }

                &:hover {
                    span {
                        text-decoration: underline;
                        /* color: var(--errorRed); */
                    }
                }

                &[data-tooltip]:hover::after,
                &[data-tooltip]:hover::before {
                    opacity: 1;
                }

                &:active {
                    transform: scale(0.98);
                }
            }

            /* .view_weakness_details.weakness {
                &:hover {
                    background-color: rgba(245, 192, 185, 0.5);
                }
            } */

            /* .view_weakness_details.suggestion {
                &:hover {
                    background-color: rgba(185, 223, 245, 0.5);
                }
            } */

            &.no-preview {
                width: 100%;
                max-width: 100%;
            }
        }

        @media screen and (max-width: 1440px) {
            .priority-info-content {
                max-width: 50%;
            }
        }

        .preview-container {
            width: calc(100% - 440px);
            position: relative;
            display: flex;
            flex-direction: column;
            height: 728px;

            .preview-header {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                margin-bottom: 24px;

                h6 {
                    font-size: 20px;
                    line-height: 24px;
                    font-weight: 600;
                    text-align: center;

                    @media screen and (max-width: 480px) {
                        font-size: 16px;
                        line-height: 20px;
                    }
                }
            }

            @media screen and (max-width: 1440px) {
                width: calc(100% - 360px);
            }

            @media screen and (max-width: 1100px) {
                width: 100%;
                max-width: 100%;
            }
        }

        .fix-preview {
            border: 1px solid #A6A6A6;
            border-radius: 12px;
            width: 100%;
            position: relative;
            flex: 1;
            min-height: 384px;

            .doc-div {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 32px 64px;
                background: var(--white);
                border-radius: 12px;

                h4 {
                    font-size: 20px;
                    font-weight: 700;
                    line-height: 24px;
                    color: #231F20;
                    margin-bottom: 12px;
                }

                strong {
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 17px;
                    color: var(--primary-black);
                    margin-bottom: 6px;
                }

                ul.contact-info {
                    display: flex;
                    justify-content: center;
                    flex-wrap: wrap;
                    gap: 4px;
                    cursor: default;
                    pointer-events: none;

                    li {
                        position: relative;
                        padding-right: 8px;
                        font-size: 14px;
                        line-height: 17px;
                        font-weight: 400;
                        color: #231F20;
                        white-space: nowrap;

                        @media screen and (max-width: 1250px) {
                            font-size: 11px;
                            line-height: 14px;
                        }

                        .missing {
                            font-weight: 500;
                            color: #E25509;
                        }

                        a {
                            color: #0070c0;
                            text-decoration: underline;
                            white-space: nowrap;
                        }

                        &:before {
                            content: '|';
                            position: absolute;
                            top: 0;
                            right: 0;
                        }

                        &:last-child {
                            padding-right: 0;

                            &:before {
                                content: '';
                            }
                        }
                    }
                }

                .sections {
                    padding-top: 24px;
                    display: flex;
                    flex-direction: column;
                    gap: 16px;

                    .section {
                        display: flex;
                        flex-direction: column;

                        h5 {
                            color: #0070c0;
                            text-transform: uppercase;
                            font-size: 16px;
                            font-weight: 700;
                            line-height: 20px;
                            padding-bottom: 4px;
                            margin-bottom: 8px;
                            text-align: center;
                            border-bottom: 1px solid var(--primary-black);
                        }

                        text {
                            font-size: 13px;
                            font-weight: 400;
                            line-height: 20px;
                            color: var(--primary-black);
                        }

                        ul {
                            font-size: 13px;
                            font-weight: 400;
                            line-height: 20px;
                            color: var(--primary-black);
                            filter: blur(3px);
                        }
                    }
                }
            }

            .fader {
                position: absolute;
                bottom: 40px;
                left: 0;
                width: 100%;
                height: auto;
                /* background: linear-gradient(179.71deg, rgba(255, 255, 255, 0) 11.8%, rgba(58, 53, 53, 0.8) 65.68%, #3A3535 86.17%); */

                z-index: 2;

                .fader-container {
                    position: relative;
                    width: 100%;
                    height: 100%;

                    .fader-content {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 8px;

                        .transform-resume-button {
                            display: flex;
                            gap: 8px;
                            font-size: 14px;
                            font-weight: 700;
                            color: var(--white);
                            text-transform: uppercase;
                            border-radius: 27px;
                            padding: 12px 24px;
                            border: none;
                            white-space: nowrap;
                            background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) -199.41%, rgba(0, 0, 0, 0.9) -139.52%, rgba(255, 39, 117, 0.9) -78.78%, rgba(227, 54, 255, 0.9) -9.38%, rgba(59, 55, 254, 0.9) 50.14%, rgba(51, 154, 250, 0.9) 141.74%, rgba(54, 255, 110, 0.9) 231.93%, rgba(163, 252, 50, 0.9) 333.69%, rgba(224, 255, 47, 0.9) 420.7%, rgba(255, 223, 53, 0.9) 494.44%, rgba(245, 155, 104, 0.9) 578.76%, rgba(255, 104, 50, 0.9) 664.04%, rgba(242, 53, 53, 0.9) 758.88%);
                            max-width: calc(100vw - 64px);

                            &:disabled {
                                opacity: 0.5;
                            }

                            @media screen and (max-width: 767px) {
                                font-size: 12px;
                                line-height: 15px;
                                white-space: normal;
                            }
                        }

                        text {
                            color: #DBDBDB;
                            font-size: 10px;
                            font-weight: 500;
                            line-height: 12px;
                            text-align: center;
                        }
                    }

                    .professional-resume-card {
                        margin-inline: 28px;
                        margin-bottom: -16px;
                        background: #ececec;
                    }
                }
            }

            .fader-bg {
                position: absolute;
                top: 144px;
                left: 0;
                width: 100%;
                height: calc(100% - 144px);
                background: #231F20;
                /* background: linear-gradient(179.71deg, rgba(255, 255, 255, 0) 1%, #9A9595 20%, #000 86.17%); */
                background: linear-gradient(179.71deg, rgba(255, 255, 255, 0) 11.8%, rgba(58, 53, 53, 0.8) 65.68%, #3A3535 86.17%);
                border-radius: 12px;
                z-index: 1;
            }

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

                .doc-div {
                    padding: 24px 32px;
                }
            }

            @media screen and (max-width: 576px) {
                .doc-div {
                    padding: 24px 16px;

                    h4 {
                        font-size: 18px;
                        line-height: 22px;
                    }

                    strong {
                        font-size: 12px;
                        line-height: 15px;
                    }

                    ul.contact-info {
                        li {
                            font-size: 10px;
                            line-height: 15px;

                            @media screen and (max-width: 480px) {
                                font-size: 8px;
                                line-height: 12px;
                            }
                        }
                    }

                    .sections {
                        .section {
                            h5 {
                                font-size: 14px;
                                line-height: 18px;
                            }

                            text {
                                font-size: 11px;
                                line-height: 16px;
                            }
                        }
                    }
                }
            }

            @media screen and (max-width: 480px) {
                min-height: 464px;

                .doc-div {
                    padding: 24px 8px;

                    h4 {
                        font-size: 14px;
                        line-height: 17px;
                    }

                    strong {
                        font-size: 11px;
                        line-height: 14px;
                    }

                    ul.contact-info {
                        li {
                            font-size: 8px;
                            line-height: 12px;

                            @media screen and (max-width: 390px) {
                                font-size: 7px;
                                line-height: 11px;
                            }
                        }
                    }

                    .sections {
                        .section {
                            h5 {
                                font-size: 12px;
                                line-height: 16px;
                            }

                            text {
                                font-size: 9px;
                                line-height: 14px;
                            }
                        }
                    }
                }
            }
        }


        @media screen and (max-width: 1100px) {
            .priority-info-body {
                flex-direction: column;

                .priority-info-content {
                    width: 100%;
                    max-width: 100%;
                    min-width: unset !important;
                }

                .priority-info-content-body {
                    flex-direction: row;
                    flex-wrap: wrap;
                }

                .evenDate-content {
                    width: 100%;
                }
            }

            .priority-info-body:has(.evenDate-content) .priority-info-content {
                max-width: 100% !important;
            }
        }

        .priority-info-body:has(.evenDate-content) .priority-info-content {
            max-width: 100%;
            flex: 1;
            box-shadow: 1px 0px 6px 0px #6B6B6B1F;
            border: 1px solid #F9F8F4;
            /* min-width: 320px; */
        }

        .evenDate-content {
            width: 100%;
            background: #FFF8D6;
            padding: 24px;
            border-radius: 12px;
            align-self: flex-start;
            display: flex;
            flex-direction: column;
            gap: 20px;

            .evenDate-header {
                display: flex;
                align-items: center;
                gap: 12px;

                .evenDate-header-icon {
                    width: 32px;
                    height: 32px;
                    min-width: 32px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: white;
                    border-radius: 6px;
                }

                h5 {
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 24px;
                    color: #B60707;
                    text-transform: capitalize;

                    &.alreadyGood {
                        color: #231F20;
                    }

                    @media screen and (max-width: 640px) {
                        font-size: 16px;
                        line-height: 20px;
                    }

                    @media screen and (max-width: 480px) {
                        font-size: 13px;
                        line-height: 16px;
                    }
                }
            }

            .evenDate-body {
                background: white;
                border: 1px solid #F5C0B9;
                border-radius: 8px;
                padding: 12px 16px;
                display: flex;
                flex-direction: column;

                &.alreadyGood {
                    border: 1px solid #5D784A;
                }

                h6 {
                    color: var(--text-gray);
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 17px;
                    margin-bottom: 8px;


                    @media screen and (max-width: 480px) {
                        font-size: 12px;
                        line-height: 15px;
                    }
                }

                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    padding-left: 16px;

                    li {
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 15px;
                        color: var(--primary-black);
                        list-style-type: disc;

                        @media screen and (max-width: 480px) {
                            font-size: 11px;
                            line-height: 14px;
                        }
                    }
                }
            }

            .evenDate-footer {
                background: #6355FF;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
                padding: 16px;
                border-radius: 8px;

                h6 {
                    color: #E0E1E0;
                    font-size: 18px;
                    font-weight: 600;
                    line-height: 22px;

                    @media screen and (max-width: 480px) {
                        font-size: 14px;
                        line-height: 17px;
                    }
                }

                .transform-text {
                    font-weight: 600;
                    color: #E0E1E0;
                    font-size: 12px;
                    line-height: 15px;
                    text-align: left;
                    margin-top: -8px;
                }

                .transform-resume-button {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    font-size: 14px;
                    font-weight: 700;
                    color: var(--white);
                    text-transform: uppercase;
                    padding: 12px 24px;
                    border-radius: 27px;
                    border: none;
                    background: white;

                    &:disabled {
                        opacity: 0.5;
                    }

                    .gradient-text {
                        background-image: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                        background-clip: text;
                        -webkit-background-clip: text;
                        /* For cross-browser compatibility */
                        color: transparent;
                    }
                }
            }
        }
    }

    .report-sections {
        margin-bottom: 32px;
        padding-bottom: 32px;
        border-bottom: 1px solid var(--text-field-outline);
        display: flex;
        flex-direction: column;
        gap: 38px;
        position: relative;

        .section {
            display: flex;
            flex-direction: column;
            gap: 16px;

            &:last-child {
                margin-bottom: 0;
            }

            .section-header {
                span {
                    font-size: 20px;
                    font-weight: 600;
                    line-height: 27px;
                }
            }

            .section-content {
                display: flex;
                flex-direction: column;
                gap: 32px;
                background: var(--white);
                padding: 24px;
                border-radius: 16px;
                border: 1px solid var(--text-field-outline);
            }

            .sub-section-wrapper {
                border: 1.5px dashed var(--text-field-outline);
                border-radius: 12px;

                .sub-section-header {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    border-radius: 11px 11px 0 0;
                    background: var(--bg-light-gray);
                    padding: 12px 16px 8px;

                    svg {
                        width: 20px;
                        height: 20px;
                        min-width: 20px;
                    }

                    span {
                        font-size: 16px;
                        font-weight: 700;
                        line-height: 100%;
                    }
                }

                .sub-section-info {
                    padding: 12px 16px 0;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 20px;
                    color: var(--primary-black);

                    h6 {
                        font-size: 16px;
                        font-weight: 600;
                        line-height: 20px;
                        margin-bottom: 4px;
                    }

                    strong {
                        font-weight: 600;
                    }

                    ul {
                        margin-top: 4px;
                        padding-left: 20px;

                        li {
                            list-style-type: disc;
                        }
                    }
                }

                .sub-section-content {
                    padding: 0 12px;
                }
            }

            .sub-section {
                margin: 24px 6px;

                span {
                    display: flex;
                    align-items: center;
                    margin: 16px 0;
                    gap: 8px;

                    h6 {
                        font-size: 16px;
                        font-weight: 600;
                        line-height: 20px;
                    }
                }

                .bullet-list {
                    .bullet {
                        font-size: 14px;
                        line-height: 20px;
                        border-radius: 8px;
                        padding: 12px;

                        h6 {
                            color: var(--primary-black) !important;
                            font-size: 14px;
                        }

                        b {
                            font-weight: 500;
                        }
                    }

                    .bullet.phrases {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 4px;
                    }

                    .bullet.skills {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 4px;

                        ul {
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0 24px;
                        }
                    }

                    .buzzwords {
                        h6 {
                            color: var(--primary-black) !important;
                            font-size: 14px;
                        }

                        ul {
                            display: flex;
                            gap: 18px;
                        }
                    }
                }

                &.working-well {
                    span {
                        h6 {
                            color: #348F79;
                        }
                    }

                    .bullet-list {
                        .bullet {
                            border-left: 3px solid #348F79;
                            background: #F8F8F8
                        }
                    }
                }

                &.areas-improvement {
                    span {
                        h6 {
                            color: var(--errorRed);
                        }
                    }

                    .bullet-list {
                        .bullet {
                            border-left: 3px solid var(--errorRed);
                            background: #FFE0DC;
                        }

                        .bullet.gray {
                            background: #F5F5F5;
                            border-left: 3px solid #231F20;
                            font-weight: 500;
                        }
                    }
                }

                &.recommendations {
                    span {
                        h6 {
                            color: #384AD7;
                        }
                    }

                    .bullet-list {
                        .bullet {
                            border-left: 3px solid #384AD7;
                            background: #E9EBFF;
                        }
                    }

                    &.quantify {
                        position: relative;
                        z-index: 0;

                        .bullet-list {
                            .bullet {
                                position: relative;
                                z-index: 0;

                                &:after {
                                    position: absolute;
                                    left: 4px;
                                    top: 0;
                                    width: calc(100% - 8px);
                                    height: 100%;
                                    backdrop-filter: blur(3px);
                                    content: '';
                                    z-index: 1;
                                }
                            }
                        }

                        .overlay {
                            position: absolute;
                            top: 20px;
                            left: 0;
                            width: 100%;
                            min-height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            padding: 0 64px;

                            @media screen and (max-width: 1280px) {
                                padding: 0 32px;
                            }

                            @media screen and (max-width: 576px) {
                                padding: 0 16px;
                            }

                            @media screen and (max-width: 480px) {
                                padding: 0 8px;
                            }


                            .fix-issues-resume-transformation {
                                width: 100%;
                                height: auto;
                                box-shadow: 1px 0px 16px 0px rgba(107, 107, 107, 0.42);
                                gap: 16px;

                                .transform-resume-button {
                                    white-space: nowrap;
                                    background: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                                    color: #fff;
                                    opacity: 1;
                                    border: unset;

                                    &:disabled {
                                        opacity: 0.5;
                                    }

                                    .btn-text {
                                        color: #fff;
                                        background: unset;
                                        -webkit-background-clip: unset;
                                        -webkit-text-fill-color: unset;
                                    }

                                    @media screen and (max-width: 480px) {
                                        img {
                                            display: none;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .report-divider {
                border: 0;
                background-image: linear-gradient(90deg, #E0E1E0 50%, transparent 50%);
                background-size: 8px 1.5px;
                background-repeat: repeat-x;
                height: 1.5px;
                margin: 24px 0;
                opacity: 1;
            }
        }
    }

    .report-sections.mobile-report {
        gap: 12px;
        margin: 0;
        border: none;

        .section {
            padding: 12px 16px;
            border-radius: 12px;
            background: #FDFDFD;

            &:not(.active) {
                .section-content {
                    display: none;
                }
            }

            &.active {
                .section-header {
                    svg {
                        transform: rotate(180deg);
                        transition: 0.3s ease;
                    }
                }
            }

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

                span {
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 100%;
                }
            }

            .section-content {
                padding: 0;
                border: none;
                gap: 24px;
                transition: all 0.3s ease;

                .sub-section-wrapper {

                    .sub-section-header {
                        svg {
                            width: 18px;
                            height: 18px;
                            min-width: 18px;
                        }

                        span {
                            font-size: 14px;
                            font-weight: 600;
                            line-height: 100%;
                        }
                    }

                    .sub-section-info {
                        padding: 12px 16px 0;
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 16px;
                        color: var(--primary-black);

                        h6 {
                            font-size: 14px;
                            font-weight: 600;
                            line-height: 17px;
                            margin-bottom: 4px;
                        }
                    }

                    .sub-section-content {
                        padding: 0 4px;

                        .sub-section {
                            span {
                                img {
                                    width: 18px;
                                    height: 18px;
                                    min-width: 18px;
                                }

                                h6 {
                                    font-size: 14px;
                                    font-weight: 600;
                                    line-height: 100%;
                                }
                            }

                            .bullet-list {
                                .bullet {
                                    font-size: 12px;
                                    font-weight: 400;
                                    line-height: 16px;
                                    padding: 8px 12px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .boost-transform-resume-container {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 24px 32px;
        align-items: center;
        padding: 24px 16px;
        border-radius: 10px;
        border: 1.5px dashed #b849fe;
        background: linear-gradient(118.92deg, rgba(239, 238, 255, 0.48) 26.18%, rgba(255, 234, 222, 0.4512) 96.85%);

        .resume-boost-content {
            display: flex;
            gap: 12px;
            align-items: flex-start;

            img {
                height: 40px;
            }

            h6 {
                font-size: 14px;
                font-weight: 700;
                line-height: 17px;

                s {
                    color: var(--text-gray);
                    font-weight: 400;
                }

                strong {
                    font-weight: 700;
                    color: var(--successGreen)
                }
            }

            p {
                margin: 8px 0 0;
                font-size: 12px;
                font-weight: 500;
                line-height: 15px;
                color: var(--text-gray);
            }
        }

        .transform-resume-button {
            font-size: 14px;
            font-weight: 700;
            color: var(--white);
            text-transform: uppercase;
            border-radius: 27px;
            padding: 12px 24px;
            border: none;
            white-space: nowrap;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) -199.41%, rgba(0, 0, 0, 0.9) -139.52%, rgba(255, 39, 117, 0.9) -78.78%, rgba(227, 54, 255, 0.9) -9.38%, rgba(59, 55, 254, 0.9) 50.14%, rgba(51, 154, 250, 0.9) 141.74%, rgba(54, 255, 110, 0.9) 231.93%, rgba(163, 252, 50, 0.9) 333.69%, rgba(224, 255, 47, 0.9) 420.7%, rgba(255, 223, 53, 0.9) 494.44%, rgba(245, 155, 104, 0.9) 578.76%, rgba(255, 104, 50, 0.9) 664.04%, rgba(242, 53, 53, 0.9) 758.88%);

            &:disabled {
                opacity: 0.5;
            }

            img {
                margin-right: 8px;
            }

            @media screen and (max-width: 480px) {
                font-size: 12px;

                img {
                    width: 15px;
                    height: 15px;
                    min-width: 15px;
                }
            }
        }
    }

    .ready-transform-resume {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 24px;
        border-radius: 16px;
        background: url('/images/talent/ready-to-transform-bg.png') no-repeat center center;
        background-size: cover;


        h6 {
            margin: 8px 0;
            font-size: 18px;
            font-weight: 700;
            line-height: 20px;
        }

        p {
            font-size: 14px;
            font-weight: 500;
            line-height: 100%;
            margin-bottom: 24px;
        }

        .what-you-get {
            width: 632px;
            max-width: calc(100vw - 80px);
            background: #f4f2fa;
            border: 1px solid #fff;
            padding: 16px 32px;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            margin-bottom: 32px;

            h6 {
                font-size: 18px;
                line-height: 22px;
                font-weight: 700;
                color: #23244d;
                text-align: center;
                margin: 0;

                s {
                    font-weight: 500;
                    color: #737894;
                }
            }

            .early-bird-offer {
                padding: 4px 12px;
                background: #F6FFC3;
                border-radius: 8px;
                font-size: 10px;
                line-height: 12px;
                font-weight: 600;
                color: #4C5901;
                width: auto;
                margin: 8px auto 16px;
            }

            .list {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: 24px;

                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;

                    li {
                        gap: 8px;
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        line-height: 20px;
                        font-weight: 500;
                        color: var(--primary-black);

                        svg {
                            width: 16px;
                            height: 16px;
                            min-width: 16px;
                        }
                    }
                }
            }

        }

        .transform-resume-button {
            font-size: 14px;
            font-weight: 700;
            color: var(--white);
            text-transform: uppercase;
            border-radius: 27px;
            padding: 12px 24px;
            border: none;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) -199.41%, rgba(0, 0, 0, 0.9) -139.52%, rgba(255, 39, 117, 0.9) -78.78%, rgba(227, 54, 255, 0.9) -9.38%, rgba(59, 55, 254, 0.9) 50.14%, rgba(51, 154, 250, 0.9) 141.74%, rgba(54, 255, 110, 0.9) 231.93%, rgba(163, 252, 50, 0.9) 333.69%, rgba(224, 255, 47, 0.9) 420.7%, rgba(255, 223, 53, 0.9) 494.44%, rgba(245, 155, 104, 0.9) 578.76%, rgba(255, 104, 50, 0.9) 664.04%, rgba(242, 53, 53, 0.9) 758.88%);
            width: 632px;
            max-width: calc(100vw - 80px);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            &:disabled {
                opacity: 0.5;
            }

            s {
                font-weight: 500;
                color: #c8ccfe;
            }

        }
    }

    .fix-issues-resume-transformation {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--white);
        box-shadow: 1px 0px 6px 0px #6b6b6b1f;
        padding: 8px 16px;
        box-sizing: border-box;
        position: relative;
        border-radius: 8px;
        border: 0.5px solid transparent;
        background-image: linear-gradient(white, white),
            linear-gradient(90deg, var(--white) -199.41%, var(--primary-dark) -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
        background-origin: border-box;
        background-clip: padding-box, border-box;

        .left-section {
            display: flex;
            gap: 10px;

            img {
                height: 24px;
                width: 24px;
            }

            .content {
                display: flex;
                justify-content: center;
                flex-direction: column;
                gap: 8px;

                h6 {
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 18px;
                }

                s {
                    color: #85A197;
                    font-weight: 500;
                    text-decoration: line-through;
                }

                b {
                    font-weight: 700;
                    color: var(--successGreen);
                }
            }

        }

        .right-section {
            .transform-resume-button {
                transform: rotate(0deg);
                opacity: 0.9;
                gap: 8px;
                border-radius: 27px;
                border-width: 1px;
                padding: 12px 24px 12px 16px;
                background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) -199.41%, rgba(0, 0, 0, 0.04) -139.52%, rgba(255, 39, 117, 0.04) -78.78%, rgba(227, 54, 255, 0.04) -9.38%, rgba(59, 55, 254, 0.04) 50.14%, rgba(51, 154, 250, 0.04) 141.74%, rgba(54, 255, 110, 0.04) 231.93%, rgba(163, 252, 50, 0.04) 333.69%, rgba(224, 255, 47, 0.04) 420.7%, rgba(255, 223, 53, 0.04) 494.44%, rgba(245, 155, 104, 0.04) 578.76%, rgba(255, 104, 50, 0.04) 664.04%, rgba(242, 53, 53, 0.04) 758.88%);
                border: 1px solid transparent;
                background-image: linear-gradient(white, white),
                    linear-gradient(90deg, var(--white) -199.41%, var(--primary-dark) -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                background-origin: border-box;
                background-clip: padding-box, border-box;
                min-width: 202px;
                white-space: nowrap;
                display: flex;
                gap: 8px;
                align-items: center;
                justify-content: center;

                &:disabled {
                    opacity: 0.5;
                }


                .btn-text {
                    margin: 0;
                    font-size: 12px;
                    font-weight: 700;
                    text-transform: uppercase;
                    background: linear-gradient(90deg, var(--white) -199.41%, var(--primary-dark) -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    display: inline-block;

                    s {
                        -webkit-background-clip: initial;
                        -webkit-text-fill-color: initial;
                        background: none;
                        color: #a4b3fd;
                        font-weight: 500;
                        text-decoration: line-through;
                    }

                    b {
                        font-weight: 700;
                        color: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                    }
                }
            }
        }
    }

    @media screen and (max-width: 1130px) {
        .priority-info .priority-info-content.column {
            flex-direction: column;
            gap: 24px;
        }

        .analyse-resume-container .cards-container.display-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            justify-self: center;

            .card {
                width: 100%;
                height: 80px;
            }
        }
    }

    @media screen and (max-width: 1080px) {
        .report-sections .section .sub-section .bullet-list .buzzwords.column {
            display: block;

            ul {
                gap: 16px;
                margin: 4px 0;
            }
        }
    }

    @media screen and (max-width: 900px) {
        .priority-info {
            .priority-info-content {
                flex-direction: column;
                gap: 24px;
            }
        }

        .report-sections .section .sub-section .bullet-list {
            .buzzwords {
                display: block;
            }

            .buzzwords.column {
                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    margin: 4px 6px;
                }
            }
        }

        .fix-issues-resume-transformation.column {
            flex-direction: column;
            gap: 12px;
        }

        .fix-issues-resume-transformation {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .newResumeHealthCheck .need-help-card {
            padding: 32px 48px 40px;
        }
    }

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

        .analyse-resume-container {
            gap: 14px;

            .header {
                margin-bottom: 14px;

                span h5 {
                    font-size: 18px;
                    line-height: 22px;
                }

                p {
                    font-size: 13px;
                    margin: 0;
                }
            }

            .cards-container {
                display: flex;
                flex-direction: column;
                align-items: center;

                .card {
                    width: 320px;
                    gap: 12px;
                }
            }
        }

        .priority-info {
            padding: 22px 16px;

            .priority-info-content .immediate-actions,
            .nice-to-have {
                span {
                    line-height: 24px;
                }
            }

            @media screen and (max-width: 480px) {
                margin-left: -16px;
                width: calc(100% + 32px);
                border-radius: 0;

                .priority-info-content {
                    gap: 12px !important;
                }
            }
        }

        /* .report-sections .section {
            padding: 22px 16px;
        } */

        .report-sections .section .sub-section .bullet-list {
            .buzzwords {
                display: block;

                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    margin: 4px 6px;
                }
            }

            .skills {
                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    margin: 4px 6px;
                }
            }
        }

        .boost-transform-resume-container {
            flex-direction: column;
            gap: 12px;

            .resume-boost-content {
                flex-direction: column;
                align-items: center;
                gap: 12px;
                text-align: center;

                h6 {
                    line-height: 18px;
                }
            }
        }

        .fix-issues-resume-transformation {
            flex-direction: column;
            padding: 16px;
            gap: 16px;

            .left-section {
                align-self: self-start;

                img {
                    height: 18px;
                    width: 18px;
                }

                .content h6 {
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 18px;

                    s {
                        font-weight: 500;
                    }
                }
            }

            .right-section {
                display: flex;
                justify-content: center;
                width: 100%;

                .transform-resume-button {
                    width: 100%;
                    padding: 10px 12px;

                    .btn-text {
                        font-size: 12px;
                        line-height: 15px;
                    }
                }
            }
        }

        .ready-transform-resume {
            padding: 24px 18px;
            margin: 0 -16px;
            border-radius: 0;

            p {
                font-size: 10px;
                text-align: center;
            }

            .what-you-get {
                width: 100%;
                max-width: 100%;
                padding: 16px 24px;

                h6 {
                    font-size: 16px;
                    line-height: 100%;
                }
            }

            .transform-resume-button {
                font-size: 12px;
                line-height: 15px;
                max-width: calc(100vw - 32px);
                white-space: normal;
                padding: 12px;
            }
        }
    }

    @media screen and (max-width: 568px) {
        .ready-transform-resume {
            .what-you-get .list {
                flex-direction: column;
                justify-content: center;
                gap: 12px;

                ul {
                    align-self: center;

                    li {
                        font-size: 12px;
                        line-height: 100%;
                    }

                    &.last-item {
                        margin-left: -62px;
                    }
                }
            }
        }

        .report-sections .section .sub-section-wrapper .sub-section-header {
            padding: 12px 10px 8px;
        }

        .priority-info .priority-info-body .evenDate-content {
            padding: 16px;
        }

        .evenDate-content .priority-info .professional-resume-card {
            gap: 14px;
        }

        .priority-info .fix-preview .fader-container .professional-resume-card {
            margin-inline: 12px !important;
            margin-bottom: -24px !important;
        }

        .priority-info .professional-resume-card .resume-templates {
            gap: 12px;

            .template-card h5 {
                font-size: 11px;
            }

            .template-card img {
                width: 68px;
            }
        }

        .priority-info .preview-container {
            height: 640px !important;
        }
    }

    @media screen and (max-width: 480px) {
        .ready-transform-resume .transform-resume-button {
            font-size: 11px;
            line-height: 13px;

            img {
                min-width: 14px;
                width: 14px;
                height: 14px;
            }
        }
    }
}

/* Resume Health Report end */


/* All Jobs Resume Banner start */

.all-jobs-resume-banner {
    border-radius: 8px;
    background: var(--gradient, linear-gradient(119deg, #EFEEFF 26.18%, var(--rgb-warm-pink-gredient-94-nonOpaque) 96.85%));
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    margin-bottom: 1.5rem;

    &.tranformed {
        background: #F1FFFD;
    }

    .left-container {
        display: flex;
        align-items: flex-start;
        gap: 1rem;

        >svg {
            width: 3rem;
            min-width: 3rem;
            height: 3rem;
        }
    }

    .left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;

        h6 {
            color: var(--primary-black);
            font-size: 1.125rem;
            font-weight: 700;
            line-height: 1.375rem;
            text-transform: capitalize;

            span {
                color: var(--errorRed);
            }
        }

        text {
            color: var(--primary-black);
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.0625rem;
        }
    }

    .primaryBtn {
        border-radius: 27px;
        border: 1px solid var(--primary-black);
        background: var(--primary-black);
        color: var(--white);
        text-align: center;
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.0625rem;
        text-transform: uppercase;
        white-space: nowrap;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.625rem;
    }

    .closeBtn {
        position: absolute;
        top: -0.375rem;
        right: -0.375rem;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--bg-light-gray-f9);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        padding: 0;
        cursor: pointer;

        svg {
            width: 1rem;
            height: 1rem;
        }
    }

    @media screen and (max-width: 767px) {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-left: -16px;
        width: calc(100% + 32px);
        padding: 16px;
        padding-right: 40px;
        border-radius: 0;
        margin-bottom: 0;
        top: 0;
        position: sticky;
        z-index: 11;

        .left {
            h6 {
                font-size: 16px;
            }

            text {
                font-size: 11px;
            }
        }

        .left-container {
            gap: 4px;

            >svg {
                width: 20px;
                height: 20px;
                min-width: 20px;
            }

            .left {
                text {
                    margin-left: -24px;
                }
            }
        }

        .closeBtn {
            top: 8px;
            right: 8px;
        }

        .primaryBtn {
            font-size: 12px;
            line-height: 15px;
            padding: 10px 24px
        }

    }
}

.all-jobs-resume-banner.dormammu-banner {
    display: flex;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: flex-start !important;
    margin: 0 -16px !important;
    justify-content: flex-start !important;

    svg {
        min-width: 24px;
        width: 24px;
        height: 24px;
    }

    .right {
        display: flex;
        flex-direction: column;
        gap: 16px;

        h6 {
            font-size: 16px;
            line-height: 22px;
            text-transform: capitalize;

            span {
                color: var(--errorRed);
            }
        }

        text {
            font-size: 12px;
            line-height: 15px;
            margin-top: -8px;
        }

        .primaryBtn {
            width: max-content;
        }
    }
}

.single-job-resume-banner {
    position: relative;
    border-radius: 8px;
    background: linear-gradient(119deg, var(--rgb-lavender-gredient-80) 26.18%, var(--rgb-warm-pink-gredient-75) 96.85%);
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-block: -24px 24px;
    margin-top: 5px;

    &.tranformed {
        background: #F1FFFD;
        flex-direction: row;
        gap: 12px;

        .right {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
    }

    .closeBtn {
        position: absolute;
        top: -6px;
        right: -6px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: #FFFCEE;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        padding: 0;
        cursor: pointer;

        svg {
            width: 16px;
            height: 16px;
        }
    }

    h6 {
        color: var(--primary-black);
        font-size: 18px;
        font-weight: 600;
        line-height: 22px;
        text-transform: capitalize;
        margin-bottom: 8px;
    }

    text {
        color: var(--primary-black);
        font-size: 12px;
        font-weight: 400;
        line-height: 15px;
        margin-bottom: 12px;
    }

    .checkpoints {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;

        .checkpoint {
            display: flex;
            align-items: center;
            gap: 8px;
            border-radius: 12px;
            background: #FFFDF3;
            padding: 4px 12px;
            color: var(--primary-black);
            font-size: 12px;
            font-weight: 500;
            line-height: 15px;
        }
    }

    .primaryBtn {
        margin-top: 12px;
        border-radius: 27px;
        border: 1px solid var(--text-field-outline);
        background: var(--white);
        color: var(--primary-black);
        text-align: center;
        font-size: 12px;
        font-weight: 700;
        line-height: 15px;
        text-transform: uppercase;
    }

    @media screen and (max-width: 767px) {
        padding: 16px;
        padding-right: 40px;
        margin-left: -16px;
        width: calc(100% + 32px);
        border-radius: 0;
        margin-block: -4px 12px;

        .closeBtn {
            top: 12px;
            right: 12px;
        }

        h6 {
            font-size: 16px;
            line-height: 20px;
            margin-bottom: 4px;
        }

        text {
            font-size: 11px;
        }

        .checkpoints {
            margin-bottom: 12px;

            .checkpoint {
                font-size: 11px;
                line-height: 13px;
                padding: 4px 8px;
            }
        }

        .primaryBtn {
            font-size: 12px;
            line-height: 15px;
            padding: 10px 24px;
        }

        &.tranformed {
            gap: 4px;

            >svg {
                width: 20px;
                height: 20px;
                min-width: 20px;
            }

            text {
                margin-left: -24px;
            }

            .primaryBtn {
                margin-left: -24px;
            }
        }
    }

}

/* All Jobs Resume Banner end */

/* POST APPLY RESUME MODAL START */
.commonModal.post-apply-resume-modal {
    width: 728px;
    max-width: 100%;

    .modal-content {
        border-radius: 16px;
        padding: 56px;
        display: flex;
        flex-direction: column;

        .header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            margin-bottom: 0;
            position: relative;

            .celebration-stars {
                position: absolute;
                top: 40%;
                left: 50%;
                transform: translate(-44%, -49%);
                z-index: 1;
            }

            >svg {
                width: 48px;
                height: 48px;
                margin-bottom: 8px;
            }

            h6 {
                color: var(--primary-black);
                font-size: 18px;
                font-weight: 700;
                line-height: 22px;
                text-transform: capitalize;
                margin-bottom: 4px;
                z-index: 2;
            }

            text {
                color: var(--primary-black);
                text-align: center;
                font-size: 12px;
                font-weight: 400;
                line-height: 15px;
                z-index: 2;
            }
        }

        .boostApply {
            margin-top: 32px;
            border-radius: 8px;
            background: linear-gradient(119deg, var(--rgb-lavender-gredient-80) 26.18%, var(--rgb-warm-pink-gredient-75) 96.85%);
            padding: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .rocketIcon {
                border-radius: 6px;
                background: #DFD5FF;
                padding: 12px;
                margin-bottom: 12px;
            }

            h6 {
                color: var(--primary-black);
                font-size: 20px;
                font-weight: 700;
                line-height: 24px;
                text-transform: capitalize;
                margin-bottom: 8px;
                text-align: center;
            }

            text {
                color: var(--primary-black);
                text-align: center;
                font-size: 12px;
                font-weight: 400;
                line-height: 15px;
            }

            .sections {
                width: 100%;
                display: flex;
                justify-content: center;
                gap: 16px;
                margin-top: 24px;

                .section {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 8px;
                    background: var(--white);
                    padding: 8px 12px;
                    border-radius: 12px;
                    width: calc(100% - 12px);
                    color: var(--primary-black);
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 15px;

                    .icon {
                        width: 32px;
                        height: 32px;
                        border-radius: 32px;
                        background: #E1F7EE;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        svg {
                            width: 16px;
                            height: 16px;
                        }
                    }
                }
            }

            &.fix-resume {

                text {
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 17px;
                }

                .score {
                    margin: 4px 0 8px;
                    font-size: 18px;
                    font-weight: 500;
                    line-height: 29px;
                    color: var(--text-gray);

                    .score-value {
                        color: var(--errorRed);
                        font-size: 24px;
                        font-weight: 700;
                    }
                }
            }
        }


        .insiderTip {
            margin-top: 8px;
            color: #5A5AAE;
            font-size: 11px;
            font-weight: 500;
            line-height: 17px;

            .strong {
                font-weight: 800;
            }
        }

        .bottom {
            margin-top: 40px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;

            .primaryBtn {
                width: 100%;
                background: var(--primary-black);
                color: var(--white);
                color: var(--White, var(--white));
                text-align: center;
                font-size: 14px;
                font-weight: 700;
                line-height: 17px;
                text-transform: uppercase;
                display: flex;
                gap: 10px;
                align-items: center;
                justify-content: center;

                &.gradientBtn {
                    background: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                }
            }

            .value {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 6px;

                span {
                    display: flex;
                    align-items: center;
                    gap: 6px;
                    color: #5A5AAE;
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 15px;
                    padding-left: 10px;
                    position: relative;

                    &::before {
                        content: '';
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        background: #A9A9DD;
                        top: 50%;
                        left: 0;
                        transform: translateY(-50%);
                        position: absolute;
                    }
                }

                span:first-child {
                    padding-left: 0;

                    &::before {
                        display: none;
                    }
                }
            }
        }

        @media screen and (max-width: 767px) {
            padding: 24px 16px;

            .header {
                h6 {
                    margin-bottom: 0;
                    font-size: 16px;
                    line-height: 20px;
                }
            }

            .boostApply {
                margin-top: 24px;
                padding: 16px 12px;

                h6 {
                    font-size: 16px;
                    line-height: 20px;
                }

                text {
                    font-size: 11px;
                    line-height: 15px;
                }

                .sections {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 8px;

                    .section {
                        width: 100%;
                        padding: 8px 12px;
                        border-radius: 12px;
                        flex-direction: row;

                        .icon {
                            width: 24px;
                            height: 24px;
                            border-radius: 24px;
                        }
                    }
                }
            }

            .bottom {
                gap: 8px;

                .primaryBtn {
                    font-size: 12px;
                    line-height: 15px;
                }

                .value span {
                    font-size: 11px;
                    line-height: 13px;
                }
            }
        }
    }
}

/* POST APPLY RESUME MODAL END */

/* ios loader start */

.iosLoader {
    position: relative;
    width: 16px;
    height: 16px;
    display: block;

    .spinner {
        all: unset;
        position: relative;
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .spinner.center {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .spinner .spinner-blade {
        position: absolute;
        left: 0.4629em;
        bottom: 0;
        width: 0.074em;
        height: 0.2777em;
        border-radius: 0.0555em;
        background-color: transparent;
        -webkit-transform-origin: center -0.2222em;
        -ms-transform-origin: center -0.2222em;
        transform-origin: center -0.2222em;
        animation: spinner 1s infinite linear;
    }

    .spinner .spinner-blade:nth-child(1) {
        -webkit-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .spinner .spinner-blade:nth-child(2) {
        -webkit-animation-delay: 0.083s;
        animation-delay: 0.083s;
        -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    .spinner .spinner-blade:nth-child(3) {
        -webkit-animation-delay: 0.166s;
        animation-delay: 0.166s;
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .spinner .spinner-blade:nth-child(4) {
        -webkit-animation-delay: 0.249s;
        animation-delay: 0.249s;
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .spinner .spinner-blade:nth-child(5) {
        -webkit-animation-delay: 0.332s;
        animation-delay: 0.332s;
        -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        transform: rotate(120deg);
    }

    .spinner .spinner-blade:nth-child(6) {
        -webkit-animation-delay: 0.415s;
        animation-delay: 0.415s;
        -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
        transform: rotate(150deg);
    }

    .spinner .spinner-blade:nth-child(7) {
        -webkit-animation-delay: 0.498s;
        animation-delay: 0.498s;
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .spinner .spinner-blade:nth-child(8) {
        -webkit-animation-delay: 0.581s;
        animation-delay: 0.581s;
        -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
        transform: rotate(210deg);
    }

    .spinner .spinner-blade:nth-child(9) {
        -webkit-animation-delay: 0.664s;
        animation-delay: 0.664s;
        -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        transform: rotate(240deg);
    }

    .spinner .spinner-blade:nth-child(10) {
        -webkit-animation-delay: 0.747s;
        animation-delay: 0.747s;
        -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .spinner .spinner-blade:nth-child(11) {
        -webkit-animation-delay: 0.83s;
        animation-delay: 0.83s;
        -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
        transform: rotate(300deg);
    }

    .spinner .spinner-blade:nth-child(12) {
        -webkit-animation-delay: 0.913s;
        animation-delay: 0.913s;
        -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
        transform: rotate(330deg);
    }


}

@keyframes spinner {
    0% {
        background-color: #69717d;
    }

    100% {
        background-color: transparent;
    }
}

@keyframes spinner-white {
    0% {
        background-color: var(--white);
    }

    100% {
        background-color: transparent;
    }
}

.iosLoader.white .spinner .spinner-blade {
    animation-name: spinner-white;
}

/* ios loader end */

/* job detail loader start */

/* From Uiverse.io by david-mohseni */

.jobDetailLoader {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 10px;
}

.loader div {
    width: 8%;
    height: 24%;
    background: rgb(128, 128, 128);
    position: absolute;
    left: 50%;
    top: 30%;
    opacity: 0;
    border-radius: 50px;
    box-shadow: 0 0 3px var(--rgb-dark-20);
    animation: fade458 1s linear infinite;
}

@keyframes fade458 {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.25;
    }
}

.loader .bar1 {
    transform: rotate(0deg) translate(0, -130%);
    animation-delay: 0s;
}

.loader .bar2 {
    transform: rotate(30deg) translate(0, -130%);
    animation-delay: -1.1s;
}

.loader .bar3 {
    transform: rotate(60deg) translate(0, -130%);
    animation-delay: -1s;
}

.loader .bar4 {
    transform: rotate(90deg) translate(0, -130%);
    animation-delay: -0.9s;
}

.loader .bar5 {
    transform: rotate(120deg) translate(0, -130%);
    animation-delay: -0.8s;
}

.loader .bar6 {
    transform: rotate(150deg) translate(0, -130%);
    animation-delay: -0.7s;
}

.loader .bar7 {
    transform: rotate(180deg) translate(0, -130%);
    animation-delay: -0.6s;
}

.loader .bar8 {
    transform: rotate(210deg) translate(0, -130%);
    animation-delay: -0.5s;
}

.loader .bar9 {
    transform: rotate(240deg) translate(0, -130%);
    animation-delay: -0.4s;
}

.loader .bar10 {
    transform: rotate(270deg) translate(0, -130%);
    animation-delay: -0.3s;
}

.loader .bar11 {
    transform: rotate(300deg) translate(0, -130%);
    animation-delay: -0.2s;
}

.loader .bar12 {
    transform: rotate(330deg) translate(0, -130%);
    animation-delay: -0.1s;
}

/* job detail loader end */

/* new navbar start */
@keyframes shine-profile {
    0% {
        transform: skewX(40deg) translateX(0);
        height: 100%;
        opacity: 1;
    }

    10% {
        transform: skewX(40deg) translateX(200%);
        height: 100%;
        opacity: 0;
    }

    10.1% {
        transform: skewX(40deg) translateX(200%);
        height: 0;
        opacity: 0;
    }

    100% {
        transform: skewX(40deg) translateX(200%);
        height: 0;
        opacity: 0;
    }
}

.openPricingPopupBtn {
    display: none;
}

.navbar-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 2.5rem 0.6875rem;
    background: var(--white);
    border-bottom: 1px solid var(--text-field-outline);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;

    .logo {
        svg {
            height: 1.5rem;
            width: auto;
        }

        &.hasProPackage {
            display: flex;
            align-items: center;
            gap: 12px;

            .pro-package {
                font-size: 0.6875rem;
                line-height: 0.8125rem;
                font-weight: 600;
                color: var(--text-primary);
                padding: 0.375rem 0.5rem;
                border-radius: 24px;
                background: linear-gradient(91.02deg, #C9F962 0.87%, #CFFAFF 131.82%);
                background-size: 400% 400%;
                animation: gradient-pro 6s ease infinite;
            }
        }
    }

    .center-menu {
        display: flex;
        align-items: center;
        gap: 0.25rem;

        a {
            padding: 0.625rem 0.75rem;
            color: var(--text-gray);
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.25rem;
            text-transform: capitalize;
            border-radius: 8px;
            transition: all .3s ease-in-out;
        }

        >a:hover {
            background: var(--bg-light-yellow);
            color: var(--primary-black);
        }

        a.active {
            color: var(--primary-black);
            background: var(--bg-light-yellow);
            font-weight: 500;
        }

        a.highlight.active {
            box-shadow: inset 0px -4px 0px 0px var(--brandYellow);
        }

        .resume-tailored {
            display: flex;
            align-items: center;
            gap: 4px;

            .plan-badge {
                display: flex;
                align-items: center;
                gap: 0.25rem;
                padding: 0.375rem 0.5rem;
                background: linear-gradient(91.02deg, #C9F962 0.87%, #CFFAFF 131.82%);
                border-radius: 24px;
                font-size: 0.6875rem;
                font-weight: 600;
                line-height: 100%;
                color: var(--primary-black);
            }
        }

        .jobs-pages {
            position: relative;
            display: flex;

            .title {
                padding: 0.625rem 0.75rem;
                color: var(--text-gray);
                font-size: 0.875rem;
                font-weight: 400;
                line-height: 1.25rem;
                text-transform: capitalize;
                border-radius: 8px;
                transition: all .3s ease-in-out;
                cursor: default;

                &:hover {
                    background: var(--bg-light-yellow);
                    color: var(--primary-black);
                }

                &.active {
                    font-weight: 500;
                    background: var(--bg-light-yellow);
                    color: var(--primary-black);
                    box-shadow: inset 0px -4px 0px 0px var(--brandYellow);
                }
            }

            &:hover {
                .list-dialog {
                    display: flex;
                }
            }

            .list-dialog {
                display: none;
                position: absolute;
                top: calc(100%);
                left: 0;
                padding-top: 4px;
                background: transparent;

                &:hover {
                    display: flex;
                }

                .pages {
                    width: 175px;
                    background: var(--white);
                    border-radius: 8px;
                    padding: 12px;
                    display: flex;
                    flex-direction: column;
                    gap: 4px;
                    border: 1px solid var(--rgb-dark-10);

                    a {
                        padding: 8px 12px;
                        color: #6A6969;
                        font-weight: 500;
                        font-size: 12px;
                        line-height: 16px;
                        text-transform: capitalize;
                        border-radius: 8px;
                        transition: all .3s ease;

                        &:hover {
                            color: #384AD7;
                        }

                        &.active {
                            box-shadow: unset;
                            font-weight: 600;
                            background: #F6F6F6;
                            color: var(--primary-black);
                        }
                    }
                }
            }
        }

    }

    .navbar-new-right {
        display: flex;
        align-items: center;
        gap: 1rem;


        .resumeHealth a {
            display: flex;
            align-items: center;
            gap: 0.25rem;
            text-transform: uppercase;
            border: none;
            position: relative;
            background: #E3D6FF;
            border-radius: 27px;
            color: #231f20;
            font-weight: 700;
            padding: 0.625rem 1rem;

            font-size: 0.875rem;
            line-height: 1.25rem;
            transition: all .3s ease-in-out;

            /* @media screen and (max-width: 1024px) {
                font-size: 12px;
            } */

            @media screen and (max-width: 991px) {
                font-size: 10px;
                padding: 6px 12px;
                height: 30px;
            }

            .score {
                color: var(--errorRed);
            }
        }

        a.preferences {
            height: 2.5rem;
            color: var(--white);
            border-radius: 24px;
            text-decoration: none;
            position: relative;
            padding: 0.6875rem 1.5rem;
            border-radius: 40px;
            background-color: #384ad7;
            font-size: 0.875rem;
            line-height: 1.125rem;
            font-weight: 600;
            text-align: center;
            color: var(--white);
            border: none;
            text-decoration: none;
            text-transform: uppercase;

            &::before {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 50%;
                height: 100%;
                background: linear-gradient(to left, rgba(255, 255, 255, .20), transparent);
                transform: skewX(40deg) translateX(0);
                transition: all .5s ease-out;
                animation: shine-profile 11s infinite linear;
            }

            &:hover::before {
                transform: skewX(40deg) translateX(200%);
            }
        }

        .user-profile {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            cursor: pointer;

            .profile-pic {
                width: 2.5rem;
                height: 2.5rem;
                border-radius: 50%;
                object-fit: cover;
            }

            &:active {
                .profile-pic {
                    border: 2px solid var(--brandYellow);
                }
            }

            .arrow-greater {
                width: 1.25rem;
                height: 1.25rem;
            }
        }
    }

    .tailor-renew-plan-banner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        padding: 0.5rem 2rem;
        background: #F7E1BD;
        color: var(--primary-black);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        transition: all 0.3s ease;

        &.expired {
            background: #F7D8BD;

            .banner-container .b-message span {
                color: #93411B;
            }
        }

        .banner-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            flex: 1;

            .b-message {
                display: flex;
                align-items: center;
                gap: 0.5rem;

                span {
                    font-size: 0.875rem;
                    line-height: 140%;
                    font-weight: 600;
                    color: #935D1B;
                }
            }

            .renew-btn {
                border: none;
                background: none;
                font-size: 0.875rem;
                font-weight: 800;
                line-height: 140%;
                text-decoration: underline;
                text-transform: uppercase;
            }
        }

        .close-btn {
            height: 1.5rem;
            width: 1.5rem;
            background: #FEF2E7;
            border-radius: 50%;
            border: none;
        }
    }

    .social-banner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        padding: 0.5rem 2rem;
        background: #FFE4E1;
        color: var(--primary-black);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        transition: all 0.3s ease;

        &.expired {
            background: #F7D8BD;

            .banner-container .b-message span {
                color: #93411B;
            }
        }

        .banner-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            flex: 1;

            .b-message {
                display: flex;
                align-items: center;
                gap: 0.5rem;

                span {
                    font-size: 0.875rem;
                    line-height: 140%;
                    font-weight: 600;
                    color: #935D1B;
                }
            }

            .renew-btn {
                border: none;
                background: none;
                font-size: 0.875rem;
                font-weight: 800;
                line-height: 140%;
                text-decoration: underline;
                text-transform: uppercase;
            }
        }

        .close-btn {
            height: 1.5rem;
            width: 1.5rem;
            background: #FEF2E7;
            border-radius: 50%;
            border: none;
        }
    }

    .early-bird-banner {
        cursor: pointer;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        padding: 0.375rem 0.75rem;
        background: #FFF9A5;
        color: var(--primary-black);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 600;

        &.get-noticed {
            padding: 0.75rem;
            text-decoration: underline;
        }

        &.fix-resume {
            text-decoration: none;
            display: inline;
            text-align: center;
            text-decoration: underline;

            .underlinedBtn {
                text-decoration: underline;
                text-transform: capitalize;
            }

            .score {
                font-weight: 700;
                font-size: 0.875rem;
                line-height: 1.25rem;
                color: var(--errorRed);
            }
        }

        &.republic-day-banner {
            background: #F7F3E8;
            box-shadow: 0 4px 4px 2px rgba(0, 0, 0, 0.12);
            font-weight: 500;
            font-size: 0.75rem;
            line-height: 1.214;
            justify-content: space-between;
            padding: 0.375rem 1.5rem;
            height: 44px;

            .banner-content {
                display: flex;
                align-items: center;
                gap: 0.5rem;

                .left {
                    position: relative;
                    padding-left: 56px;
                    color: #D56F0C;
                    font-family: 'Surana';
                    letter-spacing: -0.8%;
                    white-space: nowrap;
                    font-size: 1.1875rem;
                    font-weight: 600;

                    img {
                        position: absolute;
                        top: -15px;
                        left: 0;
                        width: auto;
                        height: 48px;
                    }
                }

                @media screen and (max-width: 1076px) {
                    span .pc-only {
                        display: none;
                    }
                }

                strong {
                    font-size: 0.8125;
                }

                .underlinedBtn {
                    font-size: 0.75rem;
                    line-height: 1.214;
                    color: #000064;
                    margin-left: 0.25rem;
                    white-space: nowrap;
                }
            }

            .lotus {
                display: flex;
                flex-direction: column;
                margin: -0.375rem 1.25rem;
                height: calc(100% + 0.75rem);
                justify-content: space-between;

                img {
                    width: 1.75rem;
                }
            }

            .close-btn {
                width: 1.5rem;
                height: 1.5rem;
                background: white;
                border: none;
                border-radius: 50%;

                svg {
                    width: 1rem;
                    height: 1rem;

                    path {
                        stroke: #231F20;
                    }
                }
            }
        }

        @media screen and (max-width: 800px) {
            font-size: 12px;
            line-height: 20px;
        }

        .countdown {
            border: 1px solid #EEE9A5;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 8px;
            background: #fffeef;
            color: var(--text-gray);
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            box-shadow: 0px 2px 4px 0px rgba(158, 153, 84, 0.32);

            span {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 14px;
                line-height: 18px;
                font-weight: 700;
                color: var(--primary-black);

                svg {
                    width: 16px;
                    min-width: 16px;
                    height: 16px;
                }
            }
        }
    }
}

@keyframes gradient-pro {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.navbar-new:has(.tailor-renew-plan-banner),
.navbar-new:has(.social-banner) {
    top: 2.5rem;
}

.navbar-new:has(.tailor-renew-plan-banner)~.wrapper .dashboard-pg,
.navbar-new:has(.social-banner)~.wrapper .dashboard-pg {
    height: calc(100vh - 6.625rem);
    margin-top: 6.625rem;

    .containSection.workPc {
        .allOpportunities {
            .contentDiv {
                height: calc(100vh - 14rem);

                &.bookmarkedFilter {
                    height: calc(100vh - 10.875rem) !important;
                }
            }
        }

        &.applied .allOpportunities .contentDiv {
            height: calc(100vh - 6.675rem);
        }
    }
}

.navbar-new:has(.early-bird-banner),
.navbar-new:has(.social-banner) {
    top: 44px;
}

.navbar-new:has(.early-bird-banner)~.wrapper .dashboard-pg,
.navbar-new:has(.social-banner)~.wrapper .dashboard-pg {
    height: calc(100vh - 108px);
    margin-top: 108px;

    .containSection.workPc {
        .allOpportunities {
            .contentDiv {
                height: calc(100vh - 220px);

                @media screen and (max-width: 880px) {
                    height: calc(100vh - 260px);
                }

                &.bookmarkedFilter {
                    height: calc(100vh - 170px);

                    @media screen and (max-width: 900px) {
                        height: calc(100vh - 167px);
                    }
                }
            }
        }

        &.applied .allOpportunities .contentDiv {
            height: calc(100vh - 108px);

            @media screen and (max-width: 900px) {
                height: calc(100vh - 100px);
            }
        }
    }

    @media screen and (max-width: 900px) {
        height: calc(100vh - 100px);
        margin-top: 100px;
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.top-toolbar {

    .early-bird-banner,
    .social-banner {
        cursor: pointer;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        padding: 12px 0;
        color: var(--primary-black);
        background: #FFF9A5;
        font-size: 11px;
        line-height: 15px;
        font-weight: 600;

        .marquee-text {
            display: inline-flex;
            padding-left: 100%;
            animation: marquee 16s linear infinite;
            width: max-content;

            .countdown {
                display: flex;
                align-items: center;
                gap: 6px;
                color: var(--text-gray);
                font-weight: 500;
                font-size: 11px;
                line-height: 15px;

                span {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    font-size: 11px;
                    line-height: 15px;
                    font-weight: 600;
                    color: var(--primary-black);

                    svg {
                        width: 15px;
                        min-width: 15px;
                        height: 15px;
                    }
                }
            }
        }


        &.get-noticed {
            padding-inline: 20px;
            font-size: 11px;
            line-height: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 4px;
            font-weight: 500;

            b {
                font-weight: 600;
            }

            span {
                text-decoration: underline;
            }


            svg {
                width: 14px;
                min-width: 14px;
                height: 14px;
            }
        }

        &.fix-resume {
            text-decoration: underline;
            display: inline;

            .underlinedBtn {
                text-decoration: underline;
                text-transform: capitalize;
                font-size: 12px;
                line-height: 15px;
                white-space: nowrap;
            }

            .score {
                font-weight: 700;
                font-size: 12px;
                line-height: 15px;
                color: var(--errorRed);
                text-decoration: none;
            }
        }
    }

    .early-bird-banner.republic-day-banner {
        background: #F7F3E8;
        padding-inline: 8px;

        .banner-content {
            position: relative;

            .left {
                padding-left: 54px;

                .left-content {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    font-size: 9px;
                    line-height: 1.214;
                    font-weight: 500;

                    .orange-text {
                        color: #D56F0C;
                        font-family: 'Surana';
                        letter-spacing: -0.8%;
                        white-space: nowrap;
                        font-size: 13px;
                        font-weight: 600;
                        margin-bottom: 2px;
                    }
                }

                img {
                    position: absolute;
                    left: 0;
                    bottom: -12px;
                }
            }

            .lotus {
                position: absolute;
                top: -12px;
                right: 64px;
                height: calc(100% + 24px);
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                img {
                    width: 24px;
                }

            }

            .close-btn {
                position: absolute;
                top: -4px;
                right: 4px;
                background: none;
                border: none;
                width: 16px;
                height: 16px;

                svg {
                    width: 16px;
                    height: 16px;

                    path {
                        stroke: #231F20;
                    }
                }
            }

            .underlinedBtn {
                color: #000064;
                font-size: 10px;
                line-height: 1.214;
                margin-top: 8px;
            }
        }
    }
}

.top-toolbar:has(.early-bird-banner),
.top-toolbar:has(.social-banner) {
    top: 39px;
}

.top-toolbar:has(.early-bird-banner)~.wrapper .dashboard-pg,
.top-toolbar:has(.social-banner)~.wrapper .dashboard-pg {
    height: calc(100vh - 102px);
    margin-top: 102px;
}

.top-toolbar:has(.republic-day-banner) {
    top: 73px;
}

.top-toolbar:has(.republic-day-banner)~.wrapper .dashboard-pg {
    height: calc(100vh - 136px);
    margin-top: 136px;
}

.commonModal.post-apply-resume-modal.transform-done-modal {
    width: 652px;

    .modal-content {
        .header {
            gap: 12px;

            svg {
                width: 66px;
                height: 66px;
                margin-bottom: 0;
            }

            h6 {
                font-size: 22px;
                font-weight: 700;
                line-height: 27px;
                margin: 0;
                text-align: center;
            }
        }

        .detesSection {
            display: block;
            margin-top: 24px;
            border-radius: 16px;
            width: 100%;
            background: linear-gradient(118.92deg, rgba(221, 220, 255, 0.32) 26.18%, rgba(255, 227, 211, 0.3008) 96.85%);
            padding: 16px;
            text-align: left;

            .steps {
                display: flex;
                flex-direction: column;
                gap: 16px;
                padding-left: 54px;

                .step {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    position: relative;
                    min-height: 79px;

                    &::before {
                        content: '';
                        position: absolute;
                        left: -35px;
                        top: 42px;
                        width: 1.5px;
                        height: calc(100% - 32px);
                        background: #6E7EFB;
                    }

                    &:last-child {
                        min-height: unset;

                        &::before {
                            display: none;
                        }
                    }

                    svg {
                        position: absolute;
                        left: -54px;
                        top: 0;
                    }

                    h6 {
                        font-weight: 700;
                        font-size: 14px;
                        line-height: 17px;
                        text-transform: capitalize;
                        color: #384AD7;
                    }

                    text {
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 18px;
                        color: var(--primary-black);

                        b {
                            font-weight: 500;
                            color: #E25509;
                        }

                        .orangeText {
                            font-weight: 500;
                            color: #E25509;
                            text-transform: uppercase;
                        }
                    }
                }

            }
        }

        .bottom {
            gap: 8px;

            .primaryBtn {
                width: 100%;
                background: var(--brandYellow);
                color: var(--primary-black);
                font-size: 14px;
                font-weight: 700;
                line-height: 17px;
                text-transform: uppercase;
                padding: 12px 24px;
                border-radius: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;

                svg {
                    width: 16px;
                    height: 16px;
                    min-width: 16px;
                }
            }

            text {
                color: var(--text-gray);
                font-size: 12px;
                font-weight: 400;
                line-height: 15px;
                text-align: center;
            }

            .resume-templates {
                border-radius: 24px;
                background: #fff;
                display: flex;
                flex-direction: column;
                gap: 16px;
                width: 100%;

                h6 {
                    text-transform: capitalize;
                    text-align: center;
                }

                .templates {
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    gap: 16px;

                    .template {
                        width: 160px;
                        height: auto;
                        border-radius: 8px;
                        padding: 8px;
                        background: #F1EDE2;
                        position: relative;
                        cursor: pointer;
                        margin-bottom: 24px;

                        &:hover {
                            box-shadow: 1px 0px 6px 0px #6B6B6B1F;
                        }

                        &:has(.viewed-at) {
                            background: #F9F1DC;
                            border: 1px solid #DDC792;
                            scale: 1.01;
                        }

                        .template-header {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 6px;
                            width: 100%;
                            padding: 4px 0 8px;
                            flex-wrap: wrap-reverse;
                            position: relative;

                            .last-viewed {
                                position: absolute;
                                right: 8px;
                                top: calc(100% + 8px);
                                display: flex;
                                align-items: center;
                                gap: 4px;
                                color: #03661A;
                                font-size: 10px;
                                font-weight: 600;
                                line-height: 12px;
                                background: #D9FFE1;
                                border-radius: 16px;
                                padding: 3px 6px;
                            }

                            .template-name {
                                color: var(--primary-black);
                                font-size: 12px;
                                font-weight: 700;
                                line-height: 15px;
                                text-transform: capitalize;
                            }

                            .viewed-at {
                                color: #384AD7;
                                font-size: 10px;
                                font-weight: 700;
                                line-height: 13px;
                            }

                            @media screen and (max-width: 840px) {
                                .template-name {
                                    font-size: 10px;
                                    line-height: 13px;
                                }

                                .viewed-at {
                                    font-size: 8px;
                                    line-height: 11px;
                                }
                            }

                            @media screen and (max-width: 680px) {
                                .template-name {
                                    font-size: 8px;
                                    line-height: 11px;
                                }

                                .viewed-at {
                                    font-size: 6px;
                                    line-height: 9px;
                                }
                            }

                            @media screen and (max-width: 576px) {
                                .template-name {
                                    font-size: 10px;
                                    line-height: 13px;
                                }

                                .viewed-at {
                                    font-size: 8px;
                                    line-height: 11px;
                                }
                            }

                            @media screen and (max-width: 395px) {
                                .template-name {
                                    font-size: 9px;
                                    line-height: 12px;
                                }
                            }
                        }

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

                        .primaryBtn {
                            position: absolute;
                            bottom: -16px;
                            left: 50%;
                            transform: translateX(-50%);
                            background: #231F20;
                            color: #fff;
                            box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
                            font-size: 10px;
                            line-height: 13px;
                            font-weight: 700;
                            border-radius: 6px;
                            text-transform: uppercase;

                            &.viewed {
                                background: #ffda30;
                                color: #231F20;
                            }

                            &:hover {
                                background: #ffda30;
                                color: #231F20;
                            }
                        }

                        &:hover {
                            .primaryBtn {
                                background: #ffda30;
                                color: #231F20;
                            }
                        }
                    }



                    .templateSlider {
                        width: calc(100vw - 32px);
                        margin-bottom: 48px;

                        .template {
                            width: auto;
                            margin-bottom: 0;

                            .primaryBtn {
                                bottom: 20px;
                                width: auto;
                                font-size: 12px;
                                line-height: 15px;
                                white-space: nowrap;
                            }
                        }
                    }

                    @media screen and (max-width: 576px) {
                        gap: 12px;

                        .template {
                            padding: 4px;

                            .primaryBtn {
                                font-size: 10px;
                                line-height: 12px;
                                padding: 6px 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}

.ReactModal__Content:has(.network-error-modal) {
    inset: 0 !important;
}

.network-error-modal {
    width: 465px;

    @media screen and (max-width: 576px) {
        width: 375px;
    }

    @media screen and (max-width: 480px) {
        width: 300px;

        .modal-container {
            padding: 12px;
        }
    }
}

#app:has(.opportunitiesFilter)>.navbar-new {
    border: none;
}

#app:has(.public-wrapper) .navbar-new {
    display: none;
}

/* new sidebar start */

.sidebar-new-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--rgb-dark-50);
    z-index: 999;
}

.sidebar-new {
    width: 27.5rem;
    height: 100vh;
    min-height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    border-radius: 24px 0 0 24px;
    border-style: solid;
    border-right: none;
    background: var(--white);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    animation: slidein 0.3s forwards;

    .sidebar-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 100%;
        padding: 1.75rem 1.75rem 1.75rem 2.25rem;

        .close-menu {
            align-self: flex-end;

            svg {
                width: 2rem;
                height: 2rem;
                cursor: pointer;
            }
        }

        .user-box {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            width: 100%;

            figure {
                position: relative;
                height: 5rem;
                width: 5rem;
                border-radius: 50%;

                img {
                    height: 100%;
                    width: 100%;
                    border-radius: 50%;
                    border: 2px solid var(--brandYellow);
                    object-fit: cover;
                }

                &:hover .editBox {
                    display: flex;
                }

                .editBox {
                    display: none;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    top: 0;
                    left: 0;
                    border-radius: 100%;
                    width: 100%;
                    height: 100%;
                    background-color: var(--brandYellow);

                    .filewrap {
                        position: relative;
                        width: 2rem !important;
                        height: 2rem;
                        border-radius: 16px;
                        background: var(--bg-light-yellow);
                        box-shadow: none;
                        padding: 0;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        input {
                            all: unset;
                            z-index: 0;
                            background: var(--brandYellow) !important;
                            position: relative;
                            outline: none;
                            border: none;
                            opacity: 0;
                        }

                        >label {
                            z-index: 1;
                            background: url(/images/talent/edit.svg) no-repeat 0.59375rem center;
                            cursor: pointer;
                        }
                    }
                }
            }

            .right-side {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 7px;
                flex: 1;

                .loader-line {
                    width: 100%;
                    height: 2rem;
                    background: var(--bg-secondary);
                    border-radius: 8px;
                    position: relative;
                    overflow: hidden;

                    &::after {
                        content: "";
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        top: 0;
                        left: 0;
                        background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
                        animation: gradient-animation_2 1.4s linear infinite
                    }
                }

                h6 {
                    font-size: 1.375rem;
                    font-weight: 600;
                    line-height: 100%;
                    color: var(--primary-black);
                    margin: 0;

                    display: flex;
                    align-items: center;
                    gap: 0.25rem;

                    .edit-btn {
                        width: 2rem;
                        height: 2rem;
                        border-radius: 50%;
                        background: var(--bg-light-yellow);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: none;
                        cursor: pointer;
                        transition: all .3s ease-in-out;

                        svg {
                            width: 1rem;
                            height: 1rem;
                        }

                        &:hover {
                            background: var(--brandYellow);
                        }
                    }
                }

                .edit-form {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                    margin-bottom: 0.25rem;

                    .error-text {
                        color: #ed0000;
                        font-size: 0.75rem;
                        font-weight: 400;
                        line-height: 0.9375rem;
                        margin: 0;
                    }
                }

                .name-edit-container {
                    position: relative;
                    width: 100%;

                    input {
                        width: 100%;
                        border: none;
                        padding: 0.5rem 4rem 0.5rem 0.75rem;
                        font-size: 0.875rem;
                        line-height: 1.0625rem;
                    }

                    button {
                        position: absolute;
                        right: 0;
                        top: 0;
                        height: 100%;
                        background: var(--brandYellow);
                        font-size: 0.875rem;
                        font-weight: 600;
                        line-height: 100%;
                        color: var(--primary-black);
                        padding: 0.25rem 0.5625rem;
                        border-radius: 0 8px 8px 0;
                        border: none;
                        transition: all .3s ease-in-out;
                    }
                }

                p {
                    font-size: 0.875rem;
                    font-weight: 400;
                    line-height: 100%;
                    color: var(--text-gray);
                    margin: 0;
                }
            }
        }

        .menu-divider {
            width: 100%;
            border: none;
            border-top: 1px solid var(--text-field-outline);
            margin-bottom: 1.25rem;
        }

        .menu-box {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            width: 100%;
            height: 100%;

            .menu-list {
                width: 100%;
                padding: 0;
                margin: 0;
                list-style: none;

                li {
                    .menu-link-btn {
                        display: flex;
                        align-items: center;
                        gap: 0.5rem;
                        padding: 0.75rem 0;
                        width: 100%;
                        cursor: pointer;
                        transition: background-color 0.2s ease;
                        border-radius: 8px;

                        .icon {
                            width: 1rem;
                            height: 1rem;
                        }

                        span {
                            font-size: 0.875rem;
                            font-weight: 400;
                            line-height: 100%;
                            color: #6A6969;
                        }

                        .plan-badge {
                            display: flex;
                            align-items: center;
                            gap: 0.25rem;
                            padding: 0.375rem 0.5rem;
                            background: linear-gradient(91.02deg, #C9F962 0.87%, #CFFAFF 131.82%);
                            border-radius: 24px;
                            font-size: 0.6875rem;
                            font-weight: 600;
                            line-height: 100%;
                            color: var(--primary-black);
                        }
                    }
                }
            }

            .sidebar-footer {
                display: flex;
                flex-direction: column;
                gap: 1rem;
                border-top: 1px solid var(--text-field-outline);
                padding: 0.75rem 0;
                width: 100%;

                .job-search-preference {
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    width: 100%;

                    .jbp-title {
                        font-size: 0.75rem;
                        font-weight: 600;
                        color: var(--text-gray);
                    }

                    .jbp-toggle {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        background: #f6f5f480;
                        padding: 0.5rem 0.75rem;
                        gap: 0.25rem;
                        border-radius: 8px;

                        .js-status-info {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 0.25rem;

                            .status-info-content {
                                .jbp-status-text {
                                    font-size: 0.75rem;
                                    font-weight: 500;
                                }

                                .jbp-dot-icon {
                                    display: inline-block;
                                    width: 0.5rem;
                                    height: 0.5rem;
                                    border-radius: 50%;
                                    background: #DFE2E1;
                                    margin-right: 0.25rem;
                                }
                            }
                        }

                        .jbp-actions-btn {
                            display: flex;
                            align-items: center;
                            gap: 0.25rem;

                            .jbp-action-btn {
                                font-size: 0.75rem;
                                font-weight: 600;
                                padding: 0.375rem 0.75rem;
                                border: none;
                                border-radius: 4px;
                                color: var(--text-gray);
                                background: #8080802e;

                                &.yes-bg {
                                    background: var(--success);
                                    color: var(--white);
                                }

                                &.no-bg {
                                    background: var(--red);
                                    color: var(--white);
                                }
                            }
                        }

                        .available-in-text {
                            font-size: 0.75rem;
                            font-weight: 400;
                            color: var(--text-gray);
                            margin-left: 0.875rem;
                        }

                        &.success {
                            .jbp-dot-icon {
                                background: #22c35d !important;
                            }

                            .job-search-toggle {
                                background: #22c35d !important;
                            }

                            .job-search-toggle::before {
                                left: 1.125rem;
                                background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(180deg, rgba(0, 0, 0, 0.02) 35.42%, rgba(0, 0, 0, 0.18) 100%);
                            }
                        }

                        .job-search-toggle {
                            position: relative;
                            width: 2.25rem;
                            height: 1.25rem;
                            border-radius: 99px;
                            background: #DFE2E1;
                            box-shadow:
                                0px 2px 4px 0px #0000000A,
                                0px 1px 0px 0px #FFFFFF,
                                0px 0px 8px 0px #00000005 inset,
                                0px 0px 0px 0.5px #0000000F inset,
                                0px 2px 4px 0px #0000000A inset,
                                0px 1px 1px 0px #0000000A inset;
                            transition: background 0.2s;
                            cursor: pointer;

                            &::before {
                                content: "";
                                display: block;
                                width: 1rem;
                                height: 1rem;
                                position: absolute;
                                top: 0.125rem;
                                left: 0.125rem;
                                border-radius: 99px;
                                opacity: 1;
                                background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(180deg, rgba(0, 0, 0, 0) 35.42%, rgba(0, 0, 0, 0.08) 100%);
                                transition: left 0.2s;
                            }
                        }
                    }

                    .jbp-hr {
                        margin-top: 0.5rem;
                        margin-bottom: 0.5rem;
                    }

                    .js-preference-untill {
                        display: flex;
                        flex-direction: column;
                        gap: 0.5rem;
                        /* padding: 0.875rem 0.75rem;
                        background: #f6f5f480;
                        border-radius: 8px; */

                        .js-date-label {
                            font-size: 0.75rem;
                            font-weight: 500;
                        }

                        .react-select__control {
                            background: var(--white) !important;

                            .react-select__indicator {
                                padding: 0.25rem;
                            }

                            .react-select__value-container .react-select__placeholder,
                            .react-select__value-container .react-select__single-value {
                                font-size: 0.8125rem !important;
                            }

                            .react-select__input-container {
                                height: 1.25rem !important;
                            }
                        }
                    }
                }

                .manage-notifications {
                    display: flex;
                    flex-direction: column;
                    gap: 0.5rem;
                    width: 100%;

                    .jbp-title {
                        font-size: 0.75rem;
                        font-weight: 600;
                        color: var(--text-gray);
                    }

                    .manage-notifications-link {
                        display: flex;
                        align-items: center;
                        gap: 0.5rem;
                        padding: 0.5rem 0.75rem;
                        background: #f6f5f480;
                        border-radius: 8px;
                        text-decoration: none;
                        font-size: 0.75rem;
                        font-weight: 500;
                        color: var(--primary-black);
                        transition: background-color 0.2s ease;

                        &:hover {
                            background: #eeedec80;
                        }

                        span {
                            line-height: 100%;
                        }
                    }
                }
            }
        }
    }
}

@keyframes slidein {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media screen and (max-width: 1280px) {
    /* .navbar-new {
        .navbar-new-right {
            a.preferences {
                font-size: 12px;
                padding: 11px 16px;
            }

            .resumeHealth a {
                font-size: 12px;
                padding: 10px 16px;
            }
        }
    } */
}

@media screen and (max-width: 1156px) {
    .navbar-new {
        /* padding: 16px 24px 15px; */

        /* .center-menu {
            a {
                font-size: 12px;
                padding: 10px;
            }
        } */

        /* .navbar-new-right {
            a.preferences {
                font-size: 12px;
                padding: 11px 16px;
            }
        } */

    }
}

@media screen and (min-width: 768px) and (max-width: 1090px) {
    /* .navbar-new .navbar-new-right .resumeHealth a {
        font-size: 11px;
    } */

    .navbar-new .navbar-new-right .preferences {
        display: none;
    }
}

@media screen and (max-width: 970px) {
    .navbar-new {
        padding: 16px 24px 15px;

        .center-menu {
            a {
                font-size: 12px;
                padding: 6px 8px;
            }
        }

        .navbar-new-right {
            gap: 8px;

            a.preferences {
                font-size: 10px;
                padding: 6px 12px;
                height: 30px;
            }

            .user-profile {
                gap: 6px;

                .profile-pic {
                    width: 32px;
                    height: 32px;
                }
            }
        }

    }
}

/* @media screen and (max-width: 1280px) {
    .navbar-new {
        padding: 12px 32px 11px;
    }
} */


@media screen and (max-width: 991px) {
    .navbar-new {
        padding: 12px 16px 11px;
    }
}

@media screen and (max-width: 840px) {
    .navbar-new {
        .center-menu {
            gap: 0;

            a {
                font-size: 10px;
                font-weight: 500;
                padding: 6px 8px;
            }

            a.active {
                font-weight: 600;
            }
        }

        .navbar-new-right {
            .resumeHealth a {
                font-size: 10px;
            }

            a.preferences {
                font-size: 10px;
                padding: 8px 12px;
                height: 32px;
                line-height: 16px;
            }
        }

    }
}

/* new navbar end */

/* Current CTC Breakdown popover start */

.form-group.relative,
.form-input.relative {
    position: relative;
}

.ctc-breakdown-btn {
    border: none;
    background: none;
    margin: 0.5rem 0.25rem 0.125rem;
    justify-content: flex-start;
    display: flex;
    cursor: pointer;
    align-items: center;
    width: -webkit-fill-available;

    span {
        font-size: clamp(10px, 0.75rem, 12px);
        font-weight: 500;
        line-height: 0.875rem;
    }

    img {
        width: 0.875rem;
        height: 0.875rem;
        margin-right: 0.25rem;
        transform: rotate(90deg);
    }

    img.rotateImg {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
}

.ctc-breakdown-section {
    position: absolute;
    right: 0;
    top: 6.25rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    padding: 1.375rem 1.125rem;
    border-radius: 8px;
    border: 1px solid var(--text-field-outline-2);
    background: var(--white);
    width: 31rem;
    box-shadow: 0px 4px 12px 0px var(--rgb-dark-15);

    &.preferences-ctc-breakdown {
        top: 4.875rem;
    }

    hr {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .breakdown-label {
        h6 {
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.25rem;
            color: var(--primary-black);
        }

        span {
            font-size: 0.75rem;
            font-weight: 500;
            line-height: 1rem;
            color: var(--text-gray);
        }
    }

    .breakdown-item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .form-input {
            margin-top: 0;
            width: 13.75rem;

            .year-input {
                position: relative;
                display: flex;
                align-items: center;

                input {
                    flex: 1;
                    padding-right: 50px;
                }

                .input-suffix {
                    position: absolute;
                    right: 10px;
                    color: #66666699;
                    font-size: 0.875rem;
                    pointer-events: none;
                }
            }
        }
    }

    .total-ctc {
        display: flex;
        justify-content: center;
        padding: 0.75rem;
        background: var(--bg-light-yellow);
        border-radius: 8px;

        span {
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1.125rem;
            color: var(--primary-black);
        }
    }
}

/* Current CTC Breakdown popover end */

/* premium resume transform start */
.containSection.resume {
    background: var(--bg-gray-f3);
    min-height: 100%;
    padding-top: 0;

    .dashboard {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        .header {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.5rem;

            h4 {
                font-size: 1.875rem;
                font-weight: 700;
                line-height: 2.75rem;
                color: var(--primary-black);
            }
        }

        .activity {
            display: flex;
            gap: 1.5rem;
            flex-wrap: wrap;

            .activity-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
                width: calc(50% - 0.75rem);
                padding: 0.75rem 1.5rem;
                border-radius: 12px;
                background: var(--white);

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

                @media screen and (max-width: 576px) {
                    width: 100%;
                }

                .activity-item-content {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;

                    strong {
                        font-size: 1.5rem;
                        font-weight: 700;
                        line-height: 2rem;
                        color: var(--primary-black);
                    }

                    text {
                        font-size: 0.875rem;
                        font-weight: 400;
                        line-height: 1.25rem;
                        color: var(--primary-black);
                        white-space: nowrap;
                    }
                }
            }
        }

        .your-resumes {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem 1.5rem;
            flex-wrap: wrap-reverse;

            .section-tabs {
                display: flex;
                gap: 0.25rem;
                background: #E7E7E7;
                padding: 0.25rem;
                border-radius: 16px;
                flex: 1;
                max-width: 39.625rem;

                .section-tab-item {
                    flex: 1;
                    display: flex;
                    white-space: nowrap;
                    justify-content: center;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.75rem 1.5rem;
                    border-radius: 12px;
                    font-size: 0.875rem;
                    font-weight: 500;
                    line-height: 1.0625rem;
                    color: var(--text-gray);
                    transition: color .3s ease, background .3s ease;
                    cursor: pointer;

                    svg path {
                        stroke: var(--text-gray);
                    }

                    &.active {
                        background: var(--white);
                        color: var(--primary-black);
                        font-weight: 700;

                        svg path {
                            stroke: var(--primary-black);
                        }
                    }
                }
            }

            .primaryBtn {
                background: var(--primary-black);
                color: var(--white);
                font-size: 0.875rem;
                font-weight: 700;
                line-height: 1.0625rem;
                text-transform: uppercase;
                padding: 0.75rem 1.5rem;
                display: flex;
                gap: 0.5rem;
            }
        }

        .resume-list {
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            position: relative;
            margin-bottom: 2.5rem;


            .primaryBtn.newResumeBtn {
                position: absolute;
                top: 0;
                right: 0;

                background: var(--primary-black);
                color: var(--white);
                font-size: 0.875rem;
                font-weight: 700;
                line-height: 1.0625rem;
                text-transform: uppercase;
                padding: 0.75rem 1.5rem;
                display: flex;
                gap: 0.5rem;
            }

            @media screen and (max-width: 576px) {
                &:has(.newResumeBtn) {
                    padding-top: 56px;

                    .newResumeBtn {
                        top: 0;
                        left: 0;
                        width: max-content;
                    }
                }
            }


            .section-header {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 0.5rem;

                h5 {
                    font-size: 1.125rem;
                    font-weight: 600;
                    line-height: 1.375rem;
                }

                text {
                    font-size: 0.75rem;
                    font-weight: 400;
                    line-height: 0.9375rem;
                    color: var(--text-gray);
                }
            }

            .list-container {
                display: flex;
                flex-direction: column;
                gap: 1.5rem;

                .list-item {
                    display: flex;
                    flex-direction: column;
                    padding: 1.25rem;
                    border-radius: 16px;
                    background: var(--white);
                    border: 1px solid var(--bg-secondary-light);

                    .badge-transforming {
                        background: #FCC978;
                        display: flex;
                        align-items: center;
                        gap: 0.25rem;
                        padding: 0.25rem 0.5rem;
                        border-radius: 16px;
                        font-size: 0.6875rem;
                        font-weight: 600;
                        line-height: 0.8125rem;
                        color: var(--primary-black);
                    }

                    .list-item-content {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 0.5rem;

                        h6 {
                            font-size: 0.875rem;
                            font-weight: 700;
                            line-height: 1.0625rem;
                            color: var(--primary-black);
                            width: 100%;
                            display: flex;
                            gap: 1rem;
                            justify-content: space-between;
                            flex-wrap: wrap;
                            align-items: center;
                        }

                        .timeline {
                            display: flex;
                            align-items: center;
                            gap: 2rem;

                            .timeline-item {
                                display: flex;
                                align-items: center;
                                gap: 0.5rem;
                                font-size: 0.6875rem;
                                font-weight: 400;
                                line-height: 0.8125rem;
                                color: var(--text-gray);
                            }
                        }
                    }

                    .transformation-progress {
                        display: flex;
                        flex-direction: column;
                        gap: 0.5rem;
                        margin-top: 1.25rem;

                        strong {
                            font-size: 0.75rem;
                            font-weight: 600;
                            line-height: 0.9375rem;
                            color: #A6A6A6;
                        }

                        .progress-bar {
                            width: 100%;
                            height: 0.75rem;
                            background: #EFEFEF;
                            border-radius: 24px;
                            position: relative;

                            .progress-bar-fill {
                                position: absolute;
                                top: 0;
                                left: 0;
                                background: #6E9CFE;
                                border-radius: 24px;
                                height: 100%;
                            }
                        }
                    }

                    .list-item-action {
                        display: flex;
                        flex-wrap: wrap;
                        gap: 0.75rem;
                        margin-top: 1rem;
                        padding-top: 1rem;
                        border-top: 1px solid var(--text-field-outline);

                        .transform-text {
                            width: 100%;
                            font-weight: 600;
                            color: #676C97;
                            font-size: 0.75rem;
                            line-height: 0.9375rem;
                            text-align: left;
                        }

                        .transformBtn {
                            background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) -199.41%, rgba(0, 0, 0, 0.9) -139.52%, rgba(255, 39, 117, 0.9) -78.78%, rgba(227, 54, 255, 0.9) -9.38%, rgba(59, 55, 254, 0.9) 50.14%, rgba(51, 154, 250, 0.9) 141.74%, rgba(54, 255, 110, 0.9) 231.93%, rgba(163, 252, 50, 0.9) 333.69%, rgba(224, 255, 47, 0.9) 420.7%, rgba(255, 223, 53, 0.9) 494.44%, rgba(245, 155, 104, 0.9) 578.76%, rgba(255, 104, 50, 0.9) 664.04%, rgba(242, 53, 53, 0.9) 758.88%);
                            color: var(--white);
                            padding: 0.5rem 1rem;
                            font-size: 0.75rem;
                            font-weight: 700;
                            line-height: 0.9375rem;
                            display: flex;
                            gap: 0.5rem;
                            align-items: center;
                            white-space: nowrap;
                            border: none;
                            outline: none;
                            border-radius: 27px;
                            text-transform: uppercase;

                            .strikethrough {
                                text-decoration: line-through;
                                color: #c8ccfe;
                                font-weight: 500;
                            }

                            @media screen and (max-width: 767px) {
                                width: 100%;
                                justify-content: center;
                                gap: 2px;
                                letter-spacing: 0;
                                padding: 12px 8px;

                                svg {
                                    display: none;
                                }
                            }

                            @media screen and (max-width: 480px) {
                                font-size: 11px;
                                line-height: 13px;
                                padding: 12px 16px;
                                gap: 6px;

                                img {
                                    min-width: 14px;
                                    width: 14px;
                                    height: 14px;
                                }
                            }
                        }

                        .primaryBtn {
                            background: var(--primary-black);
                            color: var(--white);
                            font-size: 0.75rem;
                            font-weight: 700;
                            line-height: 0.9375rem;
                            padding: 0.5rem 1rem;
                            display: flex;
                            gap: 0.5rem;
                            align-items: center;
                            white-space: nowrap;

                            &.transforming {
                                background: rgba(186, 186, 186, 0.2);
                                color: #A0A0A0;
                                cursor: default;
                            }
                        }

                        .primaryBtn.toggleBtn {
                            display: flex;
                            gap: 0.5rem;
                            align-items: center;
                            white-space: nowrap;
                            cursor: pointer;
                            position: relative;

                            .kebab-menu {

                                >svg {
                                    width: 1rem;
                                    height: 1rem;

                                    * {
                                        stroke: #fff;
                                    }
                                }
                            }

                            .kebab-menu-content {
                                position: absolute;
                                top: calc(100% - 0.375rem);
                                right: 0;
                                display: flex;
                                flex-direction: column;
                                gap: 0.5rem;
                                background: var(--white);
                                border-radius: 8px;
                                padding: 0.5rem 0.5rem 0.75rem;
                                border: 1px solid var(--text-field-outline);
                                z-index: 9;
                                cursor: default;

                                .templates {
                                    display: flex;
                                    align-items: flex-start;
                                    justify-content: center;
                                    gap: 0.75rem;

                                    .template {
                                        width: 8.125rem;
                                        height: auto;
                                        border-radius: 8px;
                                        padding: 0.25rem;
                                        padding: 0.25rem;
                                        background: #F1EDE2;
                                        position: relative;
                                        cursor: pointer;
                                        margin-bottom: 1.5rem;

                                        &:hover {
                                            box-shadow: 1px 0px 6px 0px #6B6B6B1F;
                                        }

                                        &:has(.viewed-at) {
                                            background: #F9F1DC;
                                            border: 1px solid #DDC792;
                                            scale: 1.01;
                                        }

                                        @media screen and (max-width:480px) {
                                            width: 100px;
                                        }


                                        .template-header {
                                            display: flex;
                                            align-items: center;
                                            justify-content: center;
                                            gap: 0.375rem;
                                            width: 100%;
                                            padding: 0.25rem 0 0.5rem;
                                            position: relative;

                                            .last-viewed {
                                                position: absolute;
                                                left: 0.5rem;
                                                top: calc(100% + 0.5rem);
                                                display: flex;
                                                align-items: center;
                                                gap: 0.25rem;
                                                color: #03661A;
                                                font-size: 0.5rem;
                                                font-weight: 600;
                                                line-height: 0.625rem;
                                                background: #D9FFE1;
                                                border-radius: 16px;
                                                padding: 0.1875rem 0.375rem;
                                                text-transform: none;

                                                svg {
                                                    width: 0.625rem;
                                                    height: 0.625rem;
                                                }
                                            }

                                            .template-name {
                                                color: var(--primary-black);
                                                font-size: 0.75rem;
                                                font-weight: 700;
                                                line-height: 0.9375rem;
                                                text-transform: capitalize;

                                            }

                                            @media screen and (max-width: 840px) {
                                                .template-name {
                                                    font-size: 10px;
                                                    line-height: 13px;
                                                }
                                            }

                                            @media screen and (max-width: 680px) {
                                                .template-name {
                                                    font-size: 8px;
                                                    line-height: 11px;
                                                }
                                            }

                                            @media screen and (max-width: 576px) {
                                                .template-name {
                                                    font-size: 12px;
                                                    line-height: 15px;
                                                }
                                            }
                                        }

                                        .viewed-at {
                                            position: absolute;
                                            bottom: -0.5rem;
                                            left: 50%;
                                            transform: translateX(-50%);
                                            display: block;
                                            padding: 0.25rem 0.375rem;
                                            border-radius: 6px;
                                            font-size: 0.5625rem;
                                            line-height: 0.75rem;
                                            color: #384AD7;
                                            background: #E3E6FF;
                                            text-transform: none;
                                        }

                                        img {
                                            width: 7.5rem;
                                            height: 10.625rem;
                                            object-fit: cover;
                                        }

                                        .primaryBtn {
                                            max-width: 100%;
                                            position: absolute;
                                            bottom: 0.75rem;
                                            left: 50%;
                                            transform: translateX(-50%);
                                            background: #231F20;
                                            color: #fff;
                                            box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);
                                            font-size: 0.625rem;
                                            line-height: 0.8125rem;
                                            font-weight: 700;
                                            border-radius: 6px;
                                            text-transform: uppercase;
                                            font-size: 0.625rem;
                                            line-height: 0.75rem;
                                            padding: 0.375rem 0.75rem;
                                            white-space: normal;

                                            &.viewed {
                                                background: #ffda30;
                                                color: #231F20;
                                            }

                                            &:hover {
                                                background: #ffda30;
                                                color: #231F20;
                                            }
                                        }

                                        &:hover {
                                            .primaryBtn {
                                                background: #ffda30;
                                                color: #231F20;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                        .outlinedBtn {
                            font-size: 0.75rem;
                            font-weight: 600;
                            line-height: 0.9375rem;
                            padding: 0.5rem 1rem;
                            display: flex;
                            gap: 0.5rem;
                            align-items: center;
                            background: var(--white);
                            color: var(--primary-black);
                            outline: 1px solid var(--text-field-outline) !important;
                            white-space: nowrap;
                        }
                    }
                }

                .list-item.health-check {
                    flex-direction: row;
                    gap: 3.5rem;
                    align-items: flex-start;

                    .left {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                    }

                    .right {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-end;
                        gap: 1.25rem;
                    }

                    .score {
                        padding: 1.25rem 1rem;
                        width: 12.4375rem;
                        border-radius: 0.75rem;
                        background: var(--bg-gray-f3);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        gap: 0.25rem;

                        h4 {
                            font-size: 1.5rem;
                            font-weight: 800;
                            line-height: 2.3125rem;
                            color: var(--primary-black);
                            display: flex;
                            align-items: center;
                            gap: 0.25rem;
                        }

                        text {
                            font-size: 0.875rem;
                            font-weight: 400;
                            line-height: 22px;
                            color: var(--primary-black);
                        }

                        &.green {
                            background: #EAFFD9;

                            h4 {
                                color: #5D784A;
                            }

                            text {
                                color: #5D784A;
                                font-weight: 600;
                            }
                        }

                        &.blue {
                            background: #E4F0FF;

                            h4 {
                                color: var(--secondary-blue);
                            }
                        }

                        &.yellow {
                            background: #FFF6CF;

                            h4 {
                                color: #AE601B;
                            }
                        }

                        &.orange {
                            background: #FFD8C3;

                            h4 {
                                color: #9F510B;
                            }
                        }

                        &.red {
                            background: #FCE2E3;

                            h4 {
                                color: var(--errorRed);
                            }
                        }
                    }
                }
            }
        }
    }

    &.payment {
        background: #fff;

        .header {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            margin-top: 1.25rem;
            margin-bottom: 1.875rem;

            h4 {
                font-weight: 700;
                font-size: 1.5rem;
                line-height: 2.5rem;
                text-align: center;
                text-transform: capitalize;
                color: var(--primary-black);
                margin-bottom: 0.25rem;
            }

            text {
                font-weight: 500;
                font-size: 0.875rem;
                line-height: 1.0625rem;
                color: var(--text-gray);
            }

            .badges {
                margin-top: 0.75rem;
                display: flex;
                gap: 1rem;
                flex-wrap: wrap;
                justify-content: center;

                span {
                    padding: 0.25rem 1rem;
                    background: #eaedf3;
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    font-size: 0.75rem;
                    font-weight: 500;
                    line-height: 0.9375rem;
                    color: #5986E4;
                }
            }
        }

        .payment-section {
            display: flex;
            /* gap: 32px; */
            justify-content: center;
            padding-bottom: 4rem;
            margin-inline: -4rem;
            width: calc(100% + 8rem);
            position: relative;
            background: linear-gradient(118.92deg, #EFEEFF 26.18%, rgba(255, 234, 222, 0.94) 96.85%);

            .left {
                width: calc(100% - 34.375rem);
                display: flex;
                flex-direction: column;

                .brands {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 1rem;
                    padding: 1.25rem 0 2rem;
                    border-top: 1px solid #E0E1E0;
                    border-bottom: 1px solid #E0E1E0;
                    margin-bottom: 1.25rem;

                    text {
                        font-size: 0.875rem;
                        font-weight: 600;
                        line-height: 1.25rem;
                        color: var(--text-gray);
                    }

                    .brand-animate {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        img {
                            visibility: hidden;
                            height: 0;
                        }

                        img.show {
                            visibility: visible;
                            height: auto;
                            -webkit-animation: fade-in-right .6s cubic-bezier(.39, .575, .565, 1.000) both;
                            animation: fade-in-right .6s cubic-bezier(.39, .575, .565, 1.000) both;
                        }

                    }
                }

                .interviewed {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;

                    text {
                        font-size: 1.625rem;
                        font-weight: 700;
                        line-height: 2.5rem;
                        color: var(--primary-black);

                        .highlight {
                            color: #697DEC;
                        }
                    }
                }

                .included {
                    background: #fff;
                    padding: 1.5rem;
                    border-radius: 16px;

                    h6 {
                        font-size: 1.25rem;
                        font-weight: 500;
                        line-height: 1.5rem;
                        color: var(--primary-black);
                        margin-bottom: 0.5rem;
                        text-transform: capitalize;
                    }

                    .resume-flex {
                        display: flex;
                        align-items: center;
                        gap: 0.5rem;
                        margin-bottom: 1.5rem;
                        background: #EFF4F9;
                        padding: 0.5rem;
                        border-radius: 8px;
                        width: max-content;

                        img {
                            width: 1.25rem;
                            height: 1.25rem;
                            min-width: 1.25rem;
                        }

                        >div {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            max-width: 12.5rem;
                        }

                        .title {
                            font-size: 0.875rem;
                            font-weight: 500;
                            line-height: 1.0625rem;
                            color: #16497B;
                            cursor: pointer;

                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }

                    .included-items {
                        display: flex;
                        flex-direction: column;
                        gap: 1.5rem;

                        .included-item {
                            display: flex;
                            align-items: center;
                            gap: 0.75rem;

                            .icon {
                                width: 2.125rem;
                                height: 2.125rem;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 6px;
                                background: #EFECF9;
                            }

                            .included-item-content {
                                display: flex;
                                flex-direction: column;
                                gap: 0.25rem;
                                align-items: flex-start;

                                h6 {
                                    font-size: 0.75rem;
                                    line-height: 1.214;
                                    font-weight: 600;
                                    color: #545454;
                                    margin: 0;
                                }

                                text {
                                    font-size: 0.75rem;
                                    line-height: 1.214;
                                    font-weight: 400;
                                    color: #231F20;
                                    text-transform: capitalize;
                                }
                            }
                        }
                    }
                }

                .money-back {
                    margin-top: 0.5rem;
                    background: #e7f0ec;
                    border: 1px solid #C3E2D5;
                    border-radius: 16px;
                    padding: 0.5rem 1rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    flex: 1;

                    h6 {
                        display: flex;
                        gap: 0.5rem;
                        align-items: center;
                        font-size: 0.875rem;
                        line-height: 1.0625rem;
                        font-weight: 700;
                        color: var(--primary-black);
                        margin-bottom: 0.5rem;
                    }

                    text {
                        font-size: 0.75rem;
                        line-height: 0.9375rem;
                        font-weight: 400;
                        color: var(--text-gray);
                        margin-bottom: 0.25rem;
                    }

                    span {
                        display: flex;
                        gap: 0.5rem;
                        align-items: center;
                        font-size: 0.6875rem;
                        line-height: 0.8125rem;
                        font-weight: 400;
                        color: var(--successGreen);
                    }
                }
            }

            .right {
                position: relative;

                .right-content {
                    position: sticky;
                    top: 0;
                }
            }

            .payment-right {
                max-width: 34.375rem;
                background: #fff;
                padding: 1.5rem 2.75rem 1.5rem;
                border-radius: 1rem;
                border-radius: 0;
                display: flex;
                flex-direction: column;
                position: relative;

                @media screen and (max-width:480px) {
                    .header h4 {
                        font-size: 18px;
                        line-height: 24px;
                    }
                }

                .brands {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    gap: 16px;
                    padding: 20px 0 32px;
                    border-top: 1px solid #E0E1E0;
                    border-bottom: 1px solid #E0E1E0;
                    margin-bottom: 20px;

                    text {
                        font-size: 14px;
                        font-weight: 600;
                        line-height: 20px;
                        color: var(--text-gray);
                    }

                    .brand-animate {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        min-height: 40px;

                        img {
                            visibility: hidden;
                            height: 0;
                        }

                        img.show {
                            visibility: visible;
                            height: auto;
                            -webkit-animation: fade-in-right .6s cubic-bezier(.39, .575, .565, 1.000) both;
                            animation: fade-in-right .6s cubic-bezier(.39, .575, .565, 1.000) both;
                        }
                    }
                }

                .powered-by {
                    width: 34.1875rem;
                    background: #fff;
                    padding: 2.625rem 1rem 1.25rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    flex-direction: column;
                    gap: 0.5rem;
                    padding: 0.5rem 1rem 0.75rem;

                    h5 {
                        font-size: 1.375rem;
                        font-weight: 600;
                        line-height: 1.875rem;
                        color: var(--primary-black);
                    }

                    text.rating {
                        font-size: 0.75rem;
                        font-weight: 600;
                        line-height: 1.25rem;
                        color: var(--primary-black);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        gap: 0.25rem 0.5rem;
                        flex-wrap: wrap;
                    }

                    text.trusted {
                        font-size: 0.75rem;
                        font-weight: 400;
                        color: var(--text-gray);
                    }
                }

                .price-summary {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    margin-bottom: 1.25rem;
                    margin-top: 1.5625rem;

                    h3 {
                        font-size: 2rem;
                        font-weight: 700;
                        /* line-height: 39px; */
                        margin-bottom: 0.625rem;
                        color: var(--primary-black);
                    }

                    /* text {
                        display: flex;
                        align-items: center;
                        gap: 4px;
                        font-size: 12px;
                        line-height: 15px;
                        font-weight: 700;
                        color: #8AA107;

                        s {
                            color: rgba(116, 124, 73, 0.72);
                        }
                    } */

                    .attribs {
                        display: flex;
                        gap: 0.25rem;
                        align-items: center;

                        text {
                            font-size: 0.75rem;
                            line-height: 0.8125rem;
                            font-weight: 500;
                            color: var(--primary-black);
                        }
                    }
                }

                .order-summary {
                    padding: 1.25rem 1.25rem 2rem;
                    border: 1px solid #E0E1E0;
                    border-radius: 0.75rem;
                    background: #fff;

                    h6 {
                        font-size: 1rem;
                        font-weight: 700;
                        line-height: 1.5rem;
                        color: var(--text-gray);
                        margin-bottom: 0.125rem;
                        text-transform: capitalize;

                        @media screen and (max-width: 480px) {
                            font-size: 16px;
                            line-height: 24px;
                        }
                    }

                    h3 {
                        font-size: 2rem;
                        font-weight: 700;
                        line-height: 2.4375rem;
                        color: var(--primary-black);
                    }

                    .what-you-get-heading {
                        color: #32936f;
                        font-size: 0.875rem;
                        font-weight: 600;
                        display: block;
                        margin-top: 0.9375rem;
                    }

                    ul {
                        margin-top: 0.75rem;
                    }

                    li {
                        display: flex;
                        gap: 0.5rem;
                        font-size: 0.8125rem;
                        font-weight: 400;
                        color: var(--primary-black);
                        margin-bottom: 0.75rem;
                        line-height: 1.125rem;

                        svg {
                            flex-shrink: 0;
                        }

                        b {
                            font-weight: inherit;
                        }
                    }

                    .paymentBtn {
                        margin-top: 1.5rem;
                        width: 100%;
                        background: #231F20;
                        color: #fff;
                        padding: 0.75rem 1.5rem;
                    }

                    .order-item {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: 0.75rem;
                        line-height: 0.9375rem;
                        font-weight: 400;
                        color: var(--text-gray);
                        margin-bottom: 0.75rem;

                        strong {
                            font-weight: 700;
                            color: var(--primary-black);
                        }

                        &.light {
                            font-weight: 300;
                            margin-bottom: 0;
                        }
                    }
                }

                .total {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 2rem;

                    h6 {
                        font-size: 1rem;
                        font-weight: 700;
                        line-height: 1.25rem;
                        color: var(--primary-black);
                    }

                    .total-right {
                        display: flex;
                        align-items: center;
                        gap: 0.75rem;

                        .early-bird {
                            background: #F6FFC3;
                            color: #4C5901;
                            font-size: 0.625rem;
                            line-height: 0.75rem;
                            font-weight: 600;
                            padding: 0.25rem 0.75rem;
                            border-radius: 0.5rem;
                        }

                        .price {
                            display: flex;
                            align-items: center;
                            gap: 0.25rem;
                            font-size: 1rem;
                            font-weight: 500;
                            line-height: 1.25rem;
                            color: var(--primary-black);

                            s {
                                color: #969494;
                            }

                            strong {
                                font-weight: 700;
                                color: var(--primary-black);
                            }
                        }
                    }
                }

                .paymentBtn {
                    background: var(--successGreen);
                    color: var(--white);
                    padding: 0.5rem 1rem;
                    font-size: 0.875rem;
                    font-weight: 700;
                    line-height: 1.0625rem;
                    display: flex;
                    gap: 0.5rem;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    white-space: nowrap;
                    border: none;
                    outline: none;
                    border-radius: 27px;
                    text-transform: uppercase;

                    s {
                        color: #FFFFFFB8;
                    }
                }

                .footer {
                    margin-top: 0.375rem;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 0.5rem;

                    text {
                        font-size: 0.6875rem;
                        line-height: 0.8125rem;
                        font-weight: 400;
                        color: var(--text-gray);
                    }

                    .attribs {
                        display: flex;
                        justify-content: center;
                        gap: 1rem;

                        span {
                            display: flex;
                            align-items: center;
                            gap: 0.375rem;

                            font-size: 0.6875rem;
                            line-height: 0.8125rem;
                            font-weight: 400;
                            color: var(--text-gray);

                        }
                    }
                }

                .tailored-package {
                    margin: -0.75rem -0.25rem 0 -0.25rem;
                    background: #FDFFFA;
                    border: 1px solid #C7C7C7;
                    box-shadow: 2px 4px 4px 2px rgba(0, 0, 0, 0.18);
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 1.25rem;
                    border-radius: 12px;
                    padding: 1.25rem 1.5rem;

                    .tp-header {
                        display: flex;
                        flex-direction: column;
                        gap: 0.125rem;
                        align-items: flex-start;
                        width: 100%;

                        h5 {
                            width: 100%;
                            font-size: 1.25rem;
                            font-weight: 700;
                            line-height: 1.8125rem;
                            color: #70A600;
                            position: relative;
                            display: flex;
                            justify-content: space-between;
                            gap: 1rem;
                            align-items: flex-start;

                            span {
                                color: #6C867F;
                                font-size: 0.6875rem;
                                line-height: 0.8125rem;
                                font-weight: 600;
                                width: max-content;
                                white-space: nowrap;
                                background: #fff;
                                padding: 0.25rem 0.5rem;
                                border-radius: 32px;
                            }
                        }

                        h2 {
                            font-weight: 700;
                            font-size: 2rem;
                            line-height: 2.4375rem;
                        }

                        h6 {
                            font-size: 1.125rem;
                            line-height: 1.375rem;
                            font-weight: 400;
                            color: #fff;

                            strong {
                                font-weight: 500;
                            }
                        }

                        text {
                            /* margin-top: -4px; */
                            /* font-size: 1.125rem;
                            line-height: 1.5rem; */
                            font-size: 0.875rem;
                            line-height: 1.214;
                            letter-spacing: -3.5%;
                            font-weight: 500;
                            color: #231F20;
                        }

                    }

                    ul {
                        display: flex;
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 0.5rem;

                        li {
                            display: flex;
                            align-items: flex-start;
                            gap: 0.5rem;
                            color: #231F20;
                            font-size: 0.75rem;
                            line-height: 1.618;
                            font-weight: 400;

                            svg {
                                flex-shrink: 0;
                            }
                        }
                    }

                    .tp-footer {
                        width: 100%;
                        display: flex;
                        flex-direction: column;
                        gap: 0.5rem;

                        .primaryBtn {
                            background: #C9F962;
                            color: var(--primary-black);
                            width: 100%;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            gap: 0.625rem;
                            text-transform: uppercase;
                            font-size: 0.875rem;
                            line-height: 1.0625rem;
                            font-weight: 700;
                            padding: 0.75rem 1.5rem;
                        }

                        text {
                            font-size: 0.75rem;
                            line-height: 0.9375rem;
                            font-weight: 400;
                            color: #777575;
                            text-align: center;
                        }
                    }
                }
            }
        }


        .money-back-guarantee {
            margin-top: 1.5625rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: #eef7f2;
            border: 1px solid #C3E2D5;
            border-radius: 0.375rem;
            padding: 0.5rem 0.75rem;

            svg {
                flex-shrink: 0;
            }

            .money-back-text {
                display: flex;
                flex-direction: column;
                gap: 2px;
            }

            p {
                font-size: 0.75rem;
                margin-bottom: 0px;
                font-weight: 500;
                text-align: left;
                line-height: 1.125rem;
            }

            @media screen and (max-width:1120px) {
                display: flex;
            }

            &.mobile-version {
                @media screen and (max-width:1120px) {
                    display: flex;
                }

                @media screen and (min-width:1121px) {
                    display: none;
                }
            }

            &.desktop-version {
                margin: -1.5625rem auto 1.5625rem;
                width: 100%;
                position: relative;
                z-index: 1;

                .left {
                    gap: 8px;
                }

                .money-back-text {
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 8px 16px;
                }

                @media screen and (max-width:1120px) {
                    display: none;
                }

                @media screen and (min-width:1121px) {
                    display: flex;
                }

            }
        }

        .payment-section.old {
            background: #F3F3F3;
            padding-inline: 3.5rem;
            margin-inline: -8rem;
            width: calc(100% + 16rem) !important;
            /* gap: 28px 56px; */

            /* .payment-right {
                margin-top: 16px;
            } */

            .left {
                /* width: auto; */
                flex: 1;

                .left-content {
                    max-width: 100%;
                    height: 100%;
                    /* margin-inline: auto; */
                    display: flex;
                    flex-direction: column;
                    background: linear-gradient(152.16deg, rgba(211, 211, 248, 0.94) 24.59%, #F6F6F6 102.99%);

                    .header {
                        margin: 2rem 3.5rem 0px;
                        align-items: flex-start;
                        text-align: left;

                        h4 {
                            text-align: left;
                            font-size: 2rem;
                            line-height: 2.4375rem;
                        }

                        .badges {
                            justify-content: flex-start;
                            gap: 0.5rem 1rem;

                            span {
                                padding: 0.25rem 0.75rem;
                                font-size: 0.6875rem;
                                line-height: 0.8125rem;
                            }
                        }

                        .payment-hr-line {
                            border: 1px solid #BFBFF0;
                            width: 60%;
                            margin: 1.8rem 0;
                        }
                    }

                    .brands {
                        margin-bottom: 2.5rem;
                        align-items: flex-start;
                        text-align: left;
                    }

                    .interviewed text {
                        font-size: 1.75rem;
                        line-height: 2.5rem;

                        span {
                            font-size: 2rem;
                            line-height: 3.125rem;
                        }
                    }

                    .talent-features-container {
                        display: flex;
                        flex-direction: column;
                        gap: 1.5rem;
                        position: relative;

                        .tf-header {
                            margin: 0px 3.5rem;
                            position: absolute;

                            .normal-text {
                                font-size: 1.5rem;
                                line-height: 2.5rem;
                                font-weight: 700;
                            }

                            .highlight {
                                font-style: Bold;
                                font-size: 2.125rem;
                                line-height: 2.5rem;
                                background: linear-gradient(133.93deg, #29ABE2 17.86%, #6200D2 88.25%);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                background-clip: text;
                                font-weight: 800;
                            }
                        }

                        .tf-companies .tf-companies-img {
                            width: 100%;
                            height: auto;
                            margin-top: 2.375rem;
                        }
                    }

                    .talent-testimonials-container {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 1rem 1rem 1.75rem;
                        gap: 0.5rem;

                        .tc-card-wrapper {
                            display: flex;
                            align-items: stretch;
                            justify-content: center;
                            flex-wrap: wrap;
                            gap: 1.5rem;
                            max-width: 67.5rem;

                            .tc-row1,
                            .tc-row2 {
                                display: flex;
                                gap: 1.5rem;
                            }

                            .tc-card {
                                display: flex;
                                flex-direction: column;
                                gap: 0.75rem;
                                width: 16rem;
                                background: #F6F6FF;
                                border-radius: 12px;
                                padding: 1rem 0.75rem;
                                min-height: 8.375rem;

                                .tc-message {
                                    margin-bottom: 0;
                                    font-weight: 500;
                                    font-style: Italic;
                                    font-size: 0.6875rem;
                                    line-height: 1rem;
                                    flex: 1;
                                }

                                .tc-info {
                                    h4 {
                                        font-weight: 700;
                                        font-style: Bold;
                                        font-size: 0.875rem;
                                        line-height: 1rem;
                                    }

                                    span {
                                        font-weight: 500;
                                        font-size: 0.75rem;
                                        color: #7A7AAC;
                                        line-height: 1rem;
                                    }
                                }
                            }
                        }

                        .overall-rating-section {
                            display: flex;
                            align-items: center;
                            gap: 0.75rem;

                            p {
                                margin-bottom: 0;
                                font-size: 0.75rem;
                                font-weight: 500;

                                b {
                                    font-weight: 600;
                                }
                            }
                        }
                    }

                    /* @media screen and (max-width:1280px) {
                        .header {
                            h4 {
                                font-size: 24px;
                                line-height: 34px;
                            }

                            text {
                                font-size: 12px;
                                line-height: 15px;
                            }

                            .badges {
                                gap: 8px 12px;

                                span {
                                    font-size: 10px;
                                    line-height: 12px;
                                    gap: 6px;

                                    svg {
                                        width: 12px;
                                        height: 12px;
                                    }
                                }
                            }
                        }

                        .brands text {
                            font-size: 12px;
                            line-height: 16px;
                        }
                    } */

                    @media screen and (max-width:480px) {
                        .header h4 {
                            font-size: 18px;
                            line-height: 24px;
                        }


                        .interviewed text {
                            font-size: 22px;
                            line-height: 28px;

                            span {
                                font-size: 28px;
                                line-height: 40px;
                            }
                        }
                    }
                }

                @media screen and (min-width:1380px) {
                    min-width: 900px;
                }
            }

            .mobile-left {
                width: calc(100% + 16px);
                margin-top: -16px;
                background: linear-gradient(152.16deg, rgba(211, 211, 248, 0.94) 24.59%, #F6F6F6 102.99%);

                .left-content {
                    max-width: 100%;

                    .tf-head {
                        margin: 16px 16px 0;

                        h2 {
                            font-weight: 700;
                            font-style: Bold;
                            font-size: 24px;
                            line-height: 32px;

                            &.highlight {
                                background: linear-gradient(133.93deg, #29ABE2 17.86%, #6200D2 88.25%);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                background-clip: text;
                                font-weight: 800;
                            }
                        }
                    }

                    .tf-companies-slider {
                        margin: 12px 16px;
                        padding-bottom: 32px;

                        .slick-slider .slick-dots {
                            bottom: -32px;
                        }

                        .slick-dots li .slick-active button {
                            height: 4px;
                            width: 4px;
                            background: black;
                            border: none;
                        }

                        .tc-card {
                            display: flex !important;
                            flex-direction: column;
                            gap: 12px;
                            width: 98% !important;
                            background: #F6F6FF;
                            border-radius: 12px;
                            padding: 16px 12px;
                            min-height: 190px;

                            .tc-message {
                                margin-bottom: 0;
                                font-weight: 500;
                                font-style: Italic;
                                font-size: 12px;
                                line-height: 16px;
                                flex: 1;
                            }

                            .tc-info {
                                h4 {
                                    font-weight: 700;
                                    font-style: Bold;
                                    font-size: 14px;
                                    line-height: 16px;
                                }

                                span {
                                    font-weight: 500;
                                    font-size: 12px;
                                    color: #7A7AAC;
                                    line-height: 16px;
                                }
                            }
                        }
                    }

                    .brands {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 16px;
                        padding: 16px;
                        border-top: 1px solid #E0E1E0;
                        border-bottom: 1px solid #E0E1E0;
                        margin-bottom: 14px;

                        text {
                            font-size: 11px;
                            font-weight: 600;
                            line-height: 100%;
                            color: var(--text-gray);
                        }

                        .brand-animate {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            min-height: 40px;

                            img {
                                visibility: hidden;
                                height: 0;
                            }

                            img.show {
                                visibility: visible;
                                height: auto;
                                -webkit-animation: fade-in-right .6s cubic-bezier(.39, .575, .565, 1.000) both;
                                animation: fade-in-right .6s cubic-bezier(.39, .575, .565, 1.000) both;
                            }

                        }
                    }
                }
            }

            /* @media screen and (max-width: 1400px) and (min-width: 1280px) {
                .talent-features-container .tf-header {
                    .normal-text {
                        font-size: 22px !important;
                        line-height: 36px !important;
                    }

                    .highlight {
                        font-size: 30px !important;
                        line-height: 36px !important;
                    }
                }
            } */


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

                .left .left-content {
                    /* max-width: 712px; */

                    /* .header {
                        margin: 32px 32px 0px;
                    }

                    .talent-features-container .tf-header {
                        margin: 0px 32px;

                        .normal-text {
                            font-size: 20px;
                            line-height: 32px;
                        }

                        .highlight {
                            font-size: 26px;
                            line-height: 32px;
                        }
                    }

                    .talent-testimonials-container .tc-card-wrapper {
                        max-width: 100%;

                        .tc-row1,
                        .tc-row2 {
                            flex-wrap: wrap;
                            justify-content: center;
                            max-width: 100%;
                        }
                    } */
                }

                /* .payment-right {
                    max-width: 484px;
                    padding: 24px 32px 24px;

                    .order-summary li {
                        font-size: 11px;
                    }

                    .tailored-package ul li {
                        font-size: 11px;
                    }
                } */
            }

            @media screen and (max-width: 1120px) {
                padding-inline: 32px;
                gap: 24px 32px;

                .left .left-content {
                    max-width: unset;

                    .header {
                        margin-top: 16px;
                    }
                }
            }

            @media screen and (max-width: 767px) {
                margin-inline: -24px !important;
                width: calc(100% + 48px) !important;

                .right .right-content .payment-right {
                    margin-top: 0;
                }
            }

            @media screen and (max-width: 480px) {
                padding-inline: 16px;

                .right .right-content .payment-right {
                    margin-inline: -16px;
                    width: calc(100% + 32px);
                }
            }
        }

        &:has(.payment-section.old) {
            background: #F3F3F3;

            .money-back {
                margin: -32px auto 48px;
            }
        }

        .money-back {
            margin-top: -24px;
            margin-bottom: 24px;
            background: #e7f0ec;
            border: 1px solid #C3E2D5;
            border-radius: 16px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
            width: 100%;
            max-width: 1264px;
            margin-inline: auto;
            position: relative;

            .left {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 16px;
            }

            h6 {
                display: flex;
                gap: 8px;
                align-items: center;
                font-size: 14px;
                line-height: 17px;
                font-weight: 700;
                color: var(--primary-black);
            }

            text {
                font-size: 12px;
                line-height: 15px;
                font-weight: 500;
                color: var(--primary-black);
            }

            span {
                display: flex;
                gap: 8px;
                align-items: center;
                font-size: 0.75rem;
                line-height: 13px;
                font-weight: 500;
                color: #066e47;
            }
        }

        .resume-testimonial-result {
            margin-bottom: -1.5rem;
        }

    }

    .payment-success {
        padding-top: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;

        .payment-success-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            text-align: center;

            h4 {
                margin-top: 4px;
                font-size: 30px;
                font-weight: 700;
                line-height: 44px;
                color: var(--primary-black);
            }

            text {
                font-size: 14px;
                line-height: 17px;
                font-weight: 400;
            }
        }

        .order-details {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 16px 24px;
            border-radius: 16px;
            background: var(--white);
            width: 440px;
            max-width: calc(100vw - 48px);

            flex-direction: row;
            width: auto;
            gap: 32px;
            justify-content: center;
            align-items: center;


            h6 {
                text-align: center;
                font-size: 12px;
                font-weight: 500;
                line-height: 15px;
                color: var(--primary-black);
            }

            .order-details-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 12px;

                h5 {
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 17px;
                    color: var(--text-gray);
                }

                .badge {
                    padding: 4px 8px;
                    border-radius: 24px;
                    background: #F0F0F0;
                    font-size: 12px;
                    font-weight: 600;
                    line-height: 15px;
                    color: var(--primary-black);
                }

                strong {
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 17px;
                    color: var(--primary-black);
                }

                .badge.confirmed {
                    background: #28A745;
                    color: var(--white);
                    display: flex;
                    align-items: center;
                    gap: 4px;
                }

            }
        }

        .resume-transform {
            margin-top: 8px;
            background: url('/images/talent/resume-transform-bg.png') no-repeat center center;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 32px;
            border-radius: 16px;
            width: 886px;
            max-width: calc(100vw - 48px);
            color: var(--white);
            background-size: cover;
            text-align: center;

            .ring-loader {
                margin-bottom: 8px;

                img {
                    width: 56px;
                    height: 56px;
                    animation: ring-loader 2s linear infinite;
                }
            }

            h5 {
                font-size: 22px;
                line-height: 32px;
                font-weight: 700;
                margin-bottom: 8px;
            }

            text {
                font-size: 14px;
                line-height: 17px;
                font-weight: 400;
            }

            .primaryBtn {
                background: var(--white);
                color: var(--primary-black);
                font-size: 14px;
                font-weight: 700;
                line-height: 17px;
                padding: 12px 24px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 8px;
                width: 632px;
                max-width: calc(100% - 48px);
                margin-top: 27px;
                border-radius: 27px;


                @media screen and (max-width: 600px) {
                    max-width: 100%;
                    font-size: 12px;
                    line-height: 15px;

                    svg {
                        min-width: 15px;
                        width: 15px;
                        height: 15px;
                    }
                }

                @media screen and (max-width: 500px) {
                    font-size: 11px;
                    line-height: 14px;
                    padding: 12px 16px;
                    gap: 6px;
                    align-items: flex-start;

                    svg {
                        width: 14px;
                        min-width: 14px;
                        height: 14px;
                    }
                }
            }

            .resume-templates {
                padding: 16px 0;
                border-radius: 24px;
                background: transparent;
                display: flex;
                flex-direction: column;
                gap: 16px;

                h6 {
                    text-transform: capitalize;
                    text-align: center;
                }

                .templates {
                    display: flex;
                    align-items: flex-start;
                    gap: 28px;
                    justify-content: center;

                    .template {
                        width: 280px;
                        max-width: calc(33vw - 48px);
                        height: auto;
                        border-radius: 8px;
                        padding: 8px;
                        background: #F1EDE2;
                        position: relative;
                        cursor: pointer;

                        &:hover {
                            box-shadow: 1px 0px 6px 0px #6B6B6B1F;
                        }

                        &:has(.viewed-at) {
                            background: #F9F1DC;
                            border: 1px solid #DDC792;
                            scale: 1.01;
                        }

                        .template-header {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 6px;
                            width: 100%;
                            padding: 4px 0 8px;
                            position: relative;

                            .last-viewed {
                                position: absolute;
                                right: 8px;
                                top: calc(100% + 8px);
                                display: flex;
                                align-items: center;
                                gap: 4px;
                                color: #03661A;
                                font-size: 10px;
                                font-weight: 600;
                                line-height: 12px;
                                background: #D9FFE1;
                                border-radius: 16px;
                                padding: 3px 6px;
                            }

                            .template-name {
                                color: var(--primary-black);
                                font-size: 12px;
                                font-weight: 700;
                                line-height: 15px;
                                text-transform: capitalize;
                            }

                            .viewed-at {
                                color: #384AD7;
                                font-size: 10px;
                                font-weight: 700;
                                line-height: 13px;
                            }

                            @media screen and (max-width: 840px) {
                                .template-name {
                                    font-size: 10px;
                                    line-height: 13px;
                                }

                                .viewed-at {
                                    font-size: 8px;
                                    line-height: 11px;
                                }
                            }

                            @media screen and (max-width: 680px) {
                                .template-name {
                                    font-size: 8px;
                                    line-height: 11px;
                                }

                                .viewed-at {
                                    font-size: 6px;
                                    line-height: 9px;
                                }
                            }

                            @media screen and (max-width: 576px) {
                                .template-name {
                                    font-size: 12px;
                                    line-height: 15px;
                                }

                                .viewed-at {
                                    font-size: 10px;
                                    line-height: 13px;
                                }
                            }
                        }

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

                        .primaryBtn {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            background: #231F20;
                            color: #fff;
                            box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.3);

                            &.viewed {
                                background: #ffda30;
                                color: #231F20;
                            }

                            &:hover {
                                background: #ffda30;
                                color: #231F20;
                            }

                            @media screen and (max-width: 1150px) {
                                font-size: 12px;
                                line-height: 15px;
                            }

                            @media screen and (max-width: 1050px) {
                                width: min-content;
                            }

                            @media screen and (max-width: 480px) {
                                font-size: 10px;
                            }
                        }

                        &:hover {
                            .primaryBtn {
                                background: #ffda30;
                                color: #231F20;
                            }
                        }

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

                        }
                    }

                    @media screen and (max-width: 576px) {
                        flex-direction: column;

                        .template {
                            max-width: none;
                            width: 100%;

                            .primaryBtn {
                                white-space: nowrap;
                                width: auto;
                            }
                        }
                    }
                }
            }

            &:has(.resume-templates) {
                max-width: auto;
                width: auto;


                @media screen and (max-width: 767px) {
                    width: 100%;
                    max-width: 100%;
                    margin-inline: -14px;
                    border-radius: 0;
                    width: calc(100% + 28px);
                    max-width: none;

                }
            }
        }

        .next-steps {
            background: var(--white);
            padding: 24px 32px;
            border-radius: 16px;
            width: 886px;
            max-width: calc(100vw - 48px);
            position: relative;

            h5 {
                font-size: 20px;
                font-weight: 700;
                line-height: 24px;
                color: var(--primary-black);
                display: flex;
                gap: 16px;
                align-items: center;
            }

            .detesSection {
                display: block;
                margin-top: 16px;
                width: 100%;
                border-top: 1px solid #F1F1F1;
                padding-top: 24px;
                text-align: left;

                .steps {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;
                    padding-left: 54px;

                    .step {
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                        position: relative;
                        min-height: 79px;

                        &::before {
                            content: '';
                            position: absolute;
                            left: -35px;
                            top: 42px;
                            width: 1.5px;
                            height: calc(100% - 32px);
                            background: #6E7EFB;
                        }

                        &:last-child {
                            min-height: unset;

                            &::before {
                                display: none;
                            }
                        }

                        svg {
                            position: absolute;
                            left: -54px;
                            top: 0;
                        }

                        h6 {
                            font-weight: 700;
                            font-size: 14px;
                            line-height: 17px;
                            text-transform: capitalize;
                            color: #384AD7;
                        }

                        text {
                            font-weight: 400;
                            font-size: 12px;
                            line-height: 18px;
                            color: var(--primary-black);

                            b {
                                font-weight: 500;
                                color: #E25509;
                            }

                            .orangeText {
                                font-weight: 500;
                                color: #E25509;
                                text-transform: uppercase;
                            }
                        }
                    }

                }
            }

            .footer-link {
                position: absolute;
                left: 0;
                top: calc(100% + 16px);

                a {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    color: var(--primary-black);
                    text-decoration: underline;
                    font-size: 14px;
                    font-weight: 700;
                    line-height: 24px;
                    text-transform: uppercase;

                    svg {
                        width: 24px;
                        height: 24px;
                        min-width: 24px;
                        transform: rotate(180deg);

                        path {
                            stroke-width: 1px;
                        }
                    }
                }
            }
        }

        .need-help-card {
            border-radius: 0;
            margin-top: 88px;
        }
    }

    @media screen and (max-width: 568px) {
        .payment-section .payment-right {
            width: 100%;
        }

        .payment-section .left .included .resume-flex {
            img {
                width: 18px;
                height: 18px;
            }

            span {
                font-size: 12px !important;
            }
        }

        .dashboard .resume-list .list-container .list-item .list-item-content .timeline {
            gap: 24px;
        }
    }


    @media screen and (max-width: 767px) {
        padding: 24px 14px 0 14px;

        .dashboard {
            gap: 24px;

            .header {

                h4 {
                    font-size: 20px;
                    line-height: 100%;
                }

                span {
                    font-size: 11px;
                    letter-spacing: -0.4px;
                }
            }

            .activity {
                gap: 8px;
                flex-wrap: nowrap;

                .activity-item {
                    gap: 0;
                    padding: 8px 12px;
                    width: -webkit-fill-available;

                    .activity-item-content {
                        strong {
                            font-size: 18px;
                            line-height: 156%;
                        }

                        text {
                            font-size: 10px;
                            letter-spacing: -0.35px;
                        }
                    }

                    .activity-item-icon {
                        svg {
                            width: 32px;
                            height: 32px;
                        }
                    }
                }
            }

            .your-resumes {
                .section-tabs {
                    .section-tab-item {
                        padding: 12px 8px;
                        font-size: 11px;
                        line-height: 100%;

                        svg {
                            width: 14px;
                            height: 14px;
                        }
                    }
                }

                /* .primaryBtn {
                    display: none;
                } */
            }

            .resume-list {

                .section-header {
                    display: none;
                }

                .list-container {
                    gap: 14px;

                    .list-item {
                        padding: 16px 12px;
                        position: relative;

                        .list-item-content {
                            gap: 4px;

                            h6 {
                                gap: 8px;
                                font-size: 13px;
                                line-height: 100%;
                                font-weight: 600;
                                justify-content: unset;
                                flex-wrap: nowrap;

                                text {
                                    margin-right: auto;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                }

                                .option-icon {

                                    svg {
                                        margin-right: 8px;
                                    }

                                    .outlinedBtn.preview-resume-btn {
                                        position: absolute;
                                        padding: 12px;
                                        right: 12px;
                                        top: 38px;
                                        font-size: 12px;
                                        line-height: 100%;
                                        text-transform: capitalize;
                                        border-radius: 12px;
                                        background: #fff;
                                        border: 1px solid #6B6B6B99;
                                        box-shadow: 1px 0px 6px 0px #6B6B6B1F;
                                    }
                                }
                            }

                            .badge-transforming {
                                font-size: 10px;
                            }

                            .timeline {
                                .timeline-item {
                                    font-size: 10px;
                                }
                            }

                        }

                        .transformation-progress {
                            margin-top: 14px;
                        }

                        .list-item-action {
                            .primaryBtn {
                                width: 100%;
                                justify-content: center;
                                font-size: 12px;
                                line-height: 100%;


                                @media screen and (max-width: 480px) {
                                    font-size: 11px;
                                    line-height: 13px;
                                    gap: 6px;

                                    svg {
                                        width: 13px;
                                        min-width: 13px;
                                        height: 13px;
                                    }
                                }
                            }

                            .outlinedBtn {
                                width: 100%;
                                justify-content: center;

                                &.preview-resume-btn {
                                    display: none;
                                }
                            }

                            .preview-resume-btn {
                                display: none;
                            }
                        }

                        &.health-check {
                            flex-direction: column;
                            gap: 8px;
                            align-items: flex-start;

                            .left {
                                width: 100%;

                                .list-item-content {
                                    gap: 0;
                                }

                                .score {
                                    padding: 12px 10px;
                                    width: 138px;
                                    min-width: fit-content;
                                    flex-direction: unset;
                                    justify-content: unset;
                                    margin-top: 12px;

                                    h4 {
                                        font-size: 18px;
                                        line-height: 100%;
                                    }

                                    text {
                                        font-size: 10px;
                                        line-height: 100%;
                                        letter-spacing: -0.35px;
                                    }
                                }
                            }

                            .right {
                                padding: 4px 0;
                                width: 100%;
                                align-items: flex-start;

                                .score {
                                    display: none;
                                }

                                .badge-transforming {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }

            .need-help-card {
                margin-top: 48px;
            }
        }

        &.payment {
            .header {
                h4 {
                    font-size: 20px;
                    line-height: 100%;
                }

                text {
                    font-size: 11px;
                    line-height: 15px;
                }

                .badges {
                    display: none;
                }
            }

            .payment-section {
                align-items: center;
                flex-direction: column-reverse;
                margin-inline: -24px;
                width: calc(100% + 48px);

                .payment-right {
                    padding: 0 20px 28px;
                    margin-bottom: -8px;
                    width: 100%;

                    .powered-by {
                        padding: 8px 16px 12px;
                        /* flex-direction: column; */
                        align-items: center;
                        flex-wrap: wrap;
                        gap: 4px;

                        h5 {
                            font-size: 18px;
                        }

                        text {
                            font-size: 10px;
                        }
                    }

                    .price-summary {
                        text {
                            font-size: 11px;
                            line-height: 100%;
                        }

                        .attribs {
                            flex-wrap: wrap;
                            justify-content: center;
                        }
                    }

                    .total {
                        margin-bottom: 24px;

                        h6 {
                            font-size: 13px;
                            line-height: 100%;
                        }

                        .total-right {
                            gap: 8px;

                            .early-bird {
                                font-size: 9px;
                                line-height: 100%;
                                padding: 4px 8px;
                            }

                            .price {
                                font-size: 13px;
                                line-height: 100%;
                            }
                        }
                    }

                    .paymentBtn {
                        svg {
                            display: none;
                        }
                    }
                }

                .left {
                    display: flex;
                    width: 100%;

                    .included {
                        h6 {
                            font-size: 18px;
                            line-height: 24px;
                        }

                        .included-items {
                            gap: 18px;

                            .included-item {

                                .icon {
                                    flex-shrink: 0;
                                }
                            }
                        }
                    }
                }

            }
        }

        .payment-success {
            .payment-success-header {

                svg {
                    display: none;
                }

                h4 {
                    font-size: 20px;
                    line-height: 100%;
                }

                text {
                    font-size: 10px;
                    line-height: 100%;
                    letter-spacing: -0.4px;
                }
            }

            .resume-transform {
                h5 {
                    font-size: 18px;
                    line-height: 100%;
                }

                text {
                    font-size: 12px;
                    line-height: 100%;
                }
            }

            .order-details {
                padding: 16px;
                flex-direction: column;
                width: 440px;
                gap: 12px;
                align-items: unset;
            }

            .next-steps {
                padding: 20px 16px;

                h5 {
                    font-size: 18px;
                    gap: 8px;

                    svg {
                        height: 20px;
                        width: 20px;
                    }
                }

                .detesSection {
                    margin-top: 12px;
                    padding-left: 18px;
                    padding-top: 18px;

                    .steps {
                        padding-left: 24px;

                        .step {

                            svg {
                                height: 24px;
                                width: 24px;
                                left: -44px;
                                top: -6px;
                            }

                            h6 {
                                font-size: 12px;
                                line-height: 100%;
                            }

                            text {
                                font-size: 11px;
                                line-height: 16px;
                            }

                            &::before {
                                top: 26px;
                                left: -32px;
                            }
                        }
                    }
                }
            }
        }

        .need-help-card {
            margin: 0 -18px;
            border-radius: unset;

            .need-help-card-content {
                text {
                    font-size: 12px;
                }

            }

            .ctas {
                flex-wrap: wrap;
                gap: 8px;

                .underlinedBtn {
                    font-size: 11px;
                }

                .outlinedBtn {
                    font-size: 11px;
                    padding: 10px 14px;
                    line-height: 100%;
                    white-space: nowrap;
                }
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 1120px) {
        &.payment .payment-section {
            align-items: center;
            flex-direction: column-reverse;
            max-width: 100%;
            margin-inline: unset !important;

            .payment-right {
                width: 100%;

                .powered-by {
                    align-items: center;
                    flex-wrap: wrap;
                }
            }

            .left {
                display: flex;
                width: 100%;
            }
        }
    }

    @media screen and (min-width: 768px) and (max-width: 860px) {
        .header h4 {
            width: 478px;
        }
    }

    /* @media screen and (max-width: 1280px) {
        &.payment .payment-section .payment-right {

            .powered-by {
                flex-wrap: wrap;
                padding: 8px 16px 12px;

                h5 {
                    line-height: 24px;
                }

                text.rating {
                    line-height: 24px;
                }
            }
        }
    } */


    @media screen and (max-width:767px) {
        &.payment {
            padding-top: 0;
            padding-inline: 16px;

            .payment-section .payment-right {
                .brands {
                    border-top: none;
                    padding: 12px 0 16px;
                    margin-bottom: 8px;

                    text {
                        font-size: 12px;
                        line-height: 15px;
                    }
                }

                .powered-by {
                    padding: 8px 4px 12px;

                    h5 {
                        font-size: 24px;
                        line-height: 28px;
                    }

                    text.trusted {
                        text-align: center;
                    }
                }

                .order-summary {
                    padding: 16px 12px 28px;

                    ul {
                        margin-top: 12px;

                        li {
                            font-size: 11px;
                            line-height: 13px;
                            margin-bottom: 8px;
                        }
                    }

                    .paymentBtn {
                        margin-top: 20px;
                    }
                }

                .tailored-package {
                    padding: 20px 20px;
                }

                @media screen and (min-height:720px) {

                    .order-summary {
                        h3 {
                            line-height: 1.618;
                        }

                        h6 {
                            font-size: 18px;
                            line-height: 1.618;
                            margin-bottom: 0;
                        }
                    }

                    .brands {
                        padding: 24px 0 24px;
                    }

                    .powered-by {
                        padding: 16px 4px 24px;
                    }

                    .paymentBtn {
                        margin-top: 24px !important;
                    }
                }

                @media screen and (min-height:820px) {
                    .order-summary {
                        ul {

                            li {
                                font-size: 13px;
                                line-height: 1.618;
                            }
                        }
                    }

                    .tailored-package {
                        .tp-header {
                            h2 {
                                line-height: 1.618;
                            }
                        }

                        ul {
                            li {
                                font-size: 13px;
                            }
                        }
                    }
                }
            }
        }
    }

    @media screen and (min-width: 767px) {
        .dashboard .resume-list.health-checked .list-container .list-item.health-check .left .score {
            display: none;
        }
    }
}

.containSection.resume:has(.first-checkout-page) {
    background: var(--bg-gray-f3) !important;

    &.payment {
        .header {
            margin-top: 0;
            padding-top: 1.25rem;
            margin-bottom: 3rem;

            h4 {
                font-size: 2rem;
                line-height: 1.214;
            }

            text {
                font-size: 0.875rem;
                line-height: 1.214;
            }
        }

        .payment-section.first-checkout-page {
            gap: 32px;
            margin-inline: 0;
            width: 100%;
            background: transparent;

            .left-wrapper {
                width: auto;
                position: relative;
            }

            .left {
                position: sticky;
                top: 5rem;
                left: 0;
                width: auto;

                .included {
                    h6 {
                        font-size: 1.25rem;
                        font-weight: 500;
                        line-height: 1.214;
                    }
                }

                .money-back {
                    align-items: flex-start;
                    text-align: left;
                    gap: 0;
                    flex: unset;
                    height: auto;

                    @media screen and (max-width:1120px) {
                        &.pc-only {
                            display: none;
                        }
                    }
                }
            }

            .payment-right {
                max-width: 43.125rem;
                width: 100%;
                border-radius: 1rem;

                .powered-by {
                    background: #D9EEE6;
                    margin-top: -3rem;
                    height: 5.5rem;
                    flex-direction: row;
                    flex-wrap: wrap;
                    align-items: flex-end;
                    gap: 0.75rem 1.5rem;
                    padding: 1rem 1.25rem;

                    h5 {
                        font-size: 1.5rem;
                        line-height: 1;
                    }

                    text {
                        font-size: 0.75rem;
                        line-height: 1.214;
                    }
                }

                .price-summary {
                    margin: 1rem 0 1.25rem;

                    h3 {
                        margin-bottom: 0.25rem;
                    }

                    .attribs {
                        text {
                            font-weight: 400;
                        }
                    }
                }

                .order-summary {
                    border: none;
                    border-top: 1px solid #E0E1E0;
                    border-bottom: 1px solid #E0E1E0;
                    border-radius: 0;
                    padding: 1rem 0 0.75rem;

                    h6 {
                        margin-bottom: 1rem;
                    }
                }

                .total {
                    margin-top: 1rem;
                }

                .tailored-package {
                    margin: 1.5rem -1rem 0 -1rem;
                }

                @media screen and (max-width: 1120px) {
                    width: auto;
                }

                @media screen and (max-width: 767px) {
                    .powered-by {
                        margin-top: -1rem;
                    }

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

                    .tailored-package {
                        margin: 1.5rem -2rem -2.5rem;
                    }
                }
            }
        }
    }
}

.dashboard-pg:has(.containSection.resume.payment) {
    margin-top: 0;
    height: 100vh;

    :has(.payment-success) {
        margin-top: 64px;
        height: calc(100vh - 64px);
    }
}

.need-help-card {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 1.5rem;
    background: #E2E2E2;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    flex-wrap: wrap;

    &.refund-policy {
        margin-top: 2.25rem;
        gap: 1.5rem 2.5rem;
        margin-bottom: -1.5rem;
        width: 100vw;
        padding: 2rem 5.5rem 2.5rem;
    }

    .need-help-card-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;

        h6 {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.25rem;
            color: var(--primary-black);
        }

        text {
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.0625rem;
            color: var(--text-gray);
        }
    }

    &.support-card .need-help-card-content {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

    .ctas {
        display: flex;
        gap: 1rem;
        align-items: center;
        flex-wrap: wrap;

        button {
            white-space: nowrap;

            &:disabled {
                opacity: 0.8;
                text-decoration: none;
            }
        }

        .outlinedBtn {
            background: var(--white);
            color: var(--primary-black);
            outline: 1px solid var(--primary-black);
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.0625rem;
            padding: 0.75rem 1.5rem;
            display: flex;
            gap: 0.5rem;
            align-items: center;
            white-space: nowrap;
        }
    }

    @media screen and (max-width: 767px) {
        &.refund-policy {
            border-radius: 0;
            padding: 24px 16px;
            margin-top: 42px !important;
            gap: 18px;

            .need-help-card-content {
                text {
                    font-size: 12px;
                }

            }

            .ctas {
                flex-wrap: wrap;

                .underlinedBtn {
                    font-size: 12px;
                }

                .outlinedBtn {
                    font-size: 12px;
                    padding: 12px 16px;
                    line-height: 100%;
                    white-space: nowrap;
                }
            }
        }
    }
}

.containSection.resumeHealthCheck {
    padding-bottom: 24px;

    .need-help-card.refund-policy {
        margin-top: 148px;
        margin-left: -64px;
        border-radius: 0;

        @media screen and (max-width: 991px) {
            margin-left: -32px;
        }

        @media screen and (max-width: 767px) {
            margin-left: -16px;
        }
    }
}

@keyframes ring-loader {
    0% {
        transform: rotate(0deg);
    }

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

.wrapper:has(.containSection.resumeHealthCheck) {
    background: var(--bg-secondary);
}

.breadcrumbs {
    padding: 0.75rem 2.5rem 0.5rem 2.5rem;
    background: var(--white);
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.875rem;
    line-height: 2rem;
    color: var(--text-gray);
    font-weight: 400;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 9;
    box-shadow: 0px 0px 4px rgba(100, 100, 100, 0.1);

    a {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: var(--primary-black);
        text-decoration: underline;
        font-weight: 500;
        line-height: 2rem;

        svg {
            width: 2rem;
            height: 2rem;
            min-width: 2rem;
            transform: rotate(180deg);

            path {
                stroke-width: 1px;
            }
        }
    }

    span {
        line-height: 2rem;
        color: var(--text-gray);
        font-weight: 400;
        font-size: 0.875rem;
    }

    @media screen and (max-width: 767px) {
        padding: 8px 12px;
        font-size: 11px;
        gap: 8px;

        a {
            line-height: 16px;
        }

        a svg {
            width: 16px;
            height: 16px;
            min-width: 16px;
        }

        span {
            font-size: 11px;
            line-height: 16px;
        }
    }
}


.resumeHealthCheck {
    overflow-x: hidden;

    .main.pilot {
        .logo-main.resume-pilot {
            margin-right: auto;
            height: auto;

            svg {
                width: 100%;
                height: auto;
            }

            @media screen and (max-width: 991px) {
                margin-bottom: 12px;
                width: 100px;
            }

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

            @media screen and (max-width: 480px) {
                width: 80px;
            }

        }

        margin-top: -24px;
        margin-top: 0;
        margin-left: -64px;
        width: 100vw;
        background: url(/images/talent/resume-pilot-bg.png) no-repeat center center;
        background-size: cover;
        padding: 32px 32px 16px;
        display: flex;
        flex-direction: column;
        align-items: center;

        @media screen and (max-width: 991px) {
            margin-left: -32px;
        }

        @media screen and (max-width: 767px) {
            margin-top: -24px;
            margin-left: -16px;
            background: url(/images/talent/resume-pilot-bg-mob.png) no-repeat top left;
            background-size: cover;
        }

        @media screen and (max-width: 480px) {
            padding: 16px 16px 40px;
        }

        .header {
            display: flex;
            flex-direction: column;
            gap: unset;
            margin: 0;

            h1 {
                color: var(--text-gray);
                font-size: 32px;
                line-height: 44px;
                font-weight: 500;
                text-transform: capitalize;
            }

            h2 {
                color: var(--primary-black);
                font-size: 40px;
                line-height: 64px;
                font-weight: 600;
                margin-bottom: 8px;
                text-transform: capitalize;
            }

            strong {
                color: var(--primary-black);
                font-size: 12px;
                line-height: 18px;
                font-weight: 500;
            }

            text {
                color: var(--primary-black);
                font-size: 12px;
                line-height: 18px;
                font-weight: 400;
            }

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

                h1 {
                    font-size: 14px;
                    line-height: 23px;
                }

                h2 {
                    font-size: 22px;
                    line-height: 29px;
                }

            }
        }

        .resume-actions {
            margin: 24px auto 40px;
            align-items: center;
            gap: 24px;

            >h6 {
                font-size: 14px;
                line-height: 17px;
                font-weight: 600;
                color: var(--text-gray);
                text-transform: capitalize;
                text-align: center;
                margin-bottom: -12px;
            }

            .resume-options .secondary-actions .resume-btn .outlinedBtn.filewrap {
                width: 244px;
            }

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

                >h6 {
                    font-size: 11px;
                    line-height: 13px;
                    margin-bottom: -8px;
                }
            }
        }

        .limit-health-check {
            margin-top: -24px;
            background: #FFF3EB;
            padding: 6px 12px;
            border-radius: 4px;
            display: flex;
            align-items: flex-start;
            gap: 4px;
            font-size: 12px;
            line-height: 15px;
            color: #AE4427;
            font-weight: 600;

            svg {
                min-width: 16px;
                width: 16px;
                height: 16px;
            }
        }

        .outlinedBtn.for-limit {
            margin: 16px 0 32px;
        }
    }
}

.transformLoader {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 0;
    text-align: center;

    h5 {
        color: var(--white);
        font-size: 1.375rem;
        font-weight: 700;
        line-height: 1.6875;
        text-transform: capitalize;
        margin-bottom: 0 !important;
    }

    h5.noTransform {
        text-transform: none;
    }

    .detesText {
        color: var(--white);
        text-align: center;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.214;
    }

    .steps-content {
        margin-top: 1.5rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .loadingStep {
            width: 100%;
            display: flex;
            align-self: start;
            justify-content: space-between;
            border-radius: 1rem;
            background: #F4F4F4;
            padding: 1rem;

            .left {
                display: flex;
                align-items: center;
                gap: 0.75rem;

                .icon {
                    width: 1.75rem;
                    min-width: 1.75rem;
                    height: 1.75rem;
                    border-radius: 50%;
                    background: var(--text-field-outline);
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    svg {
                        width: 1rem;
                        height: 1rem;
                    }
                }

                h6 {
                    color: var(--rgb-dark-gray-60);
                    font-size: 0.875rem;
                    font-weight: 600;
                    line-height: 1.25rem;
                    text-align: left;
                }
            }

            .stepLoader {
                margin-left: 4px;
                scale: 0.75;
            }

            &.active {
                background: var(--Tab-color, #E3E6FE);

                .left {
                    .icon {
                        background: #2F46F7;
                    }

                    .icon.stroke svg path {
                        stroke: var(--white);
                    }

                    .icon.fill svg path {
                        fill: var(--white);
                    }

                    .icon.fill.opacity svg path {
                        fill-opacity: 1;
                    }

                    .icon.stroke.opacity svg path {
                        stroke-opacity: 1;
                    }

                    h6 {
                        color: #2F46F7;
                    }
                }

                .stepLoader {
                    display: block;
                }
            }

            &.completed {
                background: #E6FFF3;

                .left {
                    .icon {
                        background: var(--primary-green);
                        position: relative;

                        svg {
                            display: none;
                        }

                        &::after {
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 20px;
                            height: 20px;
                            background: url(/images/talent/check.svg) no-repeat center center;
                            background-size: contain;
                            filter: invert(1);
                        }
                    }

                    h6 {
                        color: var(--primary-green);
                    }
                }
            }
        }
    }

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

        .header {
            h5 {
                font-size: 18px;
                line-height: 22px;
            }
        }

        .content {
            .loadingStep {
                padding: 12px;
                border-radius: 8px;

                .left {
                    gap: 6px;

                    .icon {
                        min-width: 24px;
                        width: 24px;
                        height: 24px;

                        svg {
                            width: 15px;
                            height: 15px;
                        }
                    }

                    h6 {
                        font-size: 13px;
                        line-height: 16px;
                    }
                }

            }
        }
    }

    @media screen and (max-width: 576px) {
        margin-inline: -16px;
        width: calc(100% + 32px);

        .detesText {
            font-size: 11px;
            line-height: 15px;
        }
    }
}

@-webkit-keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

@keyframes fade-in-right {
    0% {
        -webkit-transform: translateX(50px);
        transform: translateX(50px);
        opacity: 0
    }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }
}

.commonModal.post-apply-resume-modal.weekend-offer-modal {
    width: 566px;
    max-width: calc(100% - 32px);

    .header {
        margin-bottom: 4px;
        text-align: center;

        h5 {
            font-size: 22px;
            line-height: 28px;
            font-weight: 700;
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;

        text {
            font-size: 12px;
            line-height: 18px;
            color: var(--text-gray);
            font-weight: 400;

            s {
                color: #A6A6A6;
            }
        }

        img {
            width: 120px;
            height: 120px;
        }

        .offer-duration {
            font-weight: 700;
            font-size: 12px;
            line-height: 100%;
            text-align: center;
            background: var(--AI-gradient-color, linear-gradient(90deg, var(--white) -199.41%, var(--primary-dark) -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            .time-left {
                min-width: 56px;
                display: inline-block;
            }
        }
    }

    .bottom {
        .primaryBtn {
            background: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
            color: var(--white);
            font-size: 14px;
            font-weight: 700;
            line-height: 17px;
            text-transform: uppercase;
            padding: 12px 24px;
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            s {
                font-weight: 400;
                color: #e7f0ec;
            }

            @media screen and (max-width: 425px) {
                font-size: 12px;
                line-height: 15px;
                padding: 10px 24px;
                gap: 6px;
            }
        }
    }
}

.commonModal.post-apply-resume-modal.support-query-modal {
    width: 566px;

    .header {
        margin-bottom: 24px;
        text-align: center;
        gap: 8px;

        h5 {
            font-size: 22px;
            line-height: 28px;
            font-weight: 700;
        }

        text {
            font-size: 14px;
            line-height: 20px;
            color: var(--text-gray);
            font-weight: 500;
        }
    }

    .content {
        display: flex;
        flex-direction: column;
        gap: 40px;

        textarea {
            padding: 12px;
        }

        .note {
            font-size: 0.875rem;
            line-height: 1.214;
            margin: -24px 0 -16px;
            text-align: center;

            &.refundClarification {
                margin: -32px;
                font-size: 0.75rem;
            }
        }

        .primaryBtn {
            width: 100%;
            background: var(--primary-black);
            color: var(--white);
            font-size: 14px;
            line-height: 17px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 12px 24px;
            border-radius: 27px;
        }
    }
}


.commonModal.promote-healthcheck-modal .modal-dialog {
    width: 516px;
    max-width: calc(100% - 32px);

    .modal-content {
        padding: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        border-radius: 16px;
        background: var(--white);
        position: relative;

        @media screen and (max-width: 576px) {
            padding: 56px 24px;
        }

        @media screen and (max-width: 480px) {
            padding: 40px 16px;
        }

        .header {
            margin: unset;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;

            img {
                width: 56px;
                height: 56px;
            }

            .gradientText {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;

                svg {
                    width: 16px;
                    min-width: 16px;
                    height: 16px;
                }

                h6 {
                    font-size: 12px;
                    line-height: 15px;
                    font-weight: 700;
                    background: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;

                    @media screen and (max-width: 480px) {
                        font-size: 11px;
                        line-height: 14px;
                    }
                }
            }
        }

        .content {
            display: flex;
            flex-direction: column;
            align-items: center;

            h5,
            h3 {
                text-align: center;
                text-transform: capitalize;
            }

            h5 {
                font-size: 22px;
                line-height: 41px;
                font-weight: 700;
                color: #9B9B9B;

                @media screen and (max-width: 480px) {
                    font-size: 18px;
                    line-height: 32px;
                }
            }

            h3 {
                font-size: 32px;
                line-height: 41px;
                font-weight: 700;
                color: var(--primary-black);

                @media screen and (max-width: 480px) {
                    font-size: 24px;
                    line-height: 32px;
                }
            }

            ul {
                margin-top: 16px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;

                li {
                    display: flex;
                    align-items: flex-start;
                    gap: 8px;
                    font-size: 12px;
                    line-height: 15px;
                    font-weight: 400;
                    color: var(--text-gray);

                    svg {
                        width: 14px;
                        min-width: 14px;
                        height: 14px;
                    }
                }
            }
        }

        .primaryBtn {
            margin-top: 24px;
            width: 100%;
            font-size: 14px;
            line-height: 17px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 12px 24px;
            border-radius: 27px;

            &.blackBtn {
                color: #fff;
                background: #231F20;
            }
        }

    }
}

.commonModal.promote-healthcheck-modal.tailor-ext .modal-dialog {
    width: 519px;

    .modal-content {
        padding: 40px;

        .primaryBtn {
            margin-top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
            color: white;
            line-height: 1;

            svg {
                width: 20px;
                height: 20px;

                path {
                    stroke: white;
                }
            }
        }

        .underlinedBtn {
            color: var(--text-gray);
        }

        .content.just-tailored {
            h5 {
                font-size: 16px;
                line-height: 1.618;
                font-weight: 700;
                color: #aB9B9B;
            }

            h6 {
                font-size: 15px;
                text-align: center;
            }
        }

        .extension-demo-gif {
            width: 100%;
            border-radius: 8px;
            margin-bottom: 24px;
        }

        .ext-modal-footer {
            margin-top: -8px;
            display: flex;
            gap: 4px;
            justify-content: center;
            align-items: center;
            color: #186347;
            font-size: 12px;
            line-height: 15px;
            font-weight: 400;
        }
    }
}

.commonModal.promote-healthcheck-modal.sb .modal-dialog {
    width: 628px;

    .modal-content {
        text {
            margin-top: 8px;
            font-size: 14px;
            line-height: 17px;
            font-weight: 500;
            color: var(--text-gray);
            text-align: center;
        }

        ul {
            li {
                text-align: center;
            }
        }

        .primaryBtn {
            max-width: 418px;
        }
    }
}


.commonModal.promote-healthcheck-modal.fix-resume-modal .modal-dialog {
    width: 576px;
    max-width: calc(100% - 32px);

    .modal-content {
        padding: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        border-radius: 16px;
        background: var(--white);
        position: relative;

        @media screen and (max-width: 576px) {
            padding: 40px 24px;
        }

        @media screen and (max-width: 480px) {
            padding: 40px 16px;
        }

        .header {
            margin: unset;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center;

            text {
                font-size: 11px;
                line-height: 14px;
                font-weight: 500;
                color: var(--primary-black);
                text-align: center;

                .resume-name {
                    max-width: 240px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-weight: 600;
                    display: inline-block;
                    vertical-align: bottom;
                    margin-top: 2px;
                }
            }

            .score {
                font-size: 28px;
                line-height: 34px;
                font-weight: 700;
                color: var(--errorRed);
                text-align: center;
            }

            .scoreMessage {
                background: #CECCCC;
                border: 1px solid #CECCCC;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                padding: 12px 24px;
                border-radius: 12px;
                text-align: center;
                width: 100%;

                h6 {
                    color: #231F20;
                    font-weight: 700;
                    font-size: 12px;
                    line-height: 15px;
                    text-align: center;
                }

                text {
                    font-weight: 400;
                    font-size: 11px;
                    line-height: 13px;
                    text-align: center;
                }

                &.redFlag {
                    border-color: #FCD3D4;
                    background: #FCD3D4;


                    h6 {
                        color: var(--errorRed);
                    }

                    text {
                        color: #5F0D0D;
                    }
                }

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

                    h6 {
                        font-size: 16px;
                        line-height: 20px;
                    }

                    text {
                        font-size: 12px;
                        line-height: 16px;
                    }
                }
            }

        }

        .primaryBtn.gradientBtn {
            margin: unset;
            width: 100%;
            font-size: 14px;
            line-height: 17px;
            font-weight: 700;
            text-transform: uppercase;
            padding: 12px 24px;
            border-radius: 27px;
            background: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
            color: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;

            img {
                width: 16px;
                height: 16px;
                min-width: 16px;
            }
        }

        .content {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 16px;

            ul {
                align-items: flex-start;
            }

            .immediate-actions {
                border: 1.5px dashed #F5C0B9;
                border-radius: 12px;
                opacity: 1;
                padding: 16px;
                width: 100%;
                background: #FFEBE9;

                h6 {
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 4px;
                    font-size: 14px;
                    line-height: 17px;
                    font-weight: 700;
                    color: var(--errorRed);

                    img {
                        margin-right: 4px;
                        width: 16px;
                        height: 16px;
                        min-width: 16px;
                    }

                    span {
                        font-size: 11px;
                        font-weight: 400;
                        color: #640606;
                        line-height: inherit;
                    }
                }

                ul {
                    margin-top: 12px;
                    margin-left: 8px;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    align-items: flex-start;

                    max-height: calc(100vh - 540px);
                    overflow: auto;
                    margin-right: -16px;

                    li {
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 17px;
                        color: var(--text-gray);
                        display: flex;
                        align-items: flex-start;
                        gap: 4px;

                    }

                }
            }

            .underlinedBtn {
                align-self: flex-start;
                display: flex;
                gap: 8px;
                align-items: center;

                svg {
                    width: 16px;
                    height: 16px;
                    min-width: 16px;
                }

                font-size: 14px;
                font-weight: 700;
                line-height: 17px;
            }
        }

    }
}

.commonModal.promote-healthcheck-modal.agg-apply .modal-dialog {
    width: 576px;

    .modal-content {
        padding: 56px 40px;

        @media screen and (max-width: 480px) {
            padding: 40px 16px;

            .primaryBtn {
                font-size: 12px;
                line-height: 15px;
                padding: 12px 20px;
            }
        }

        .header img {
            width: 72px;
            height: 72px;
        }

        .content {
            h5 {
                font-size: 24px;
                line-height: 31px;
                font-weight: 700;
                color: #231F20;
                margin-bottom: 12px;

                @media screen and (max-width: 480px) {
                    font-size: 15px;
                    line-height: 24px;
                }
            }

            text {
                font-size: 14px;
                font-weight: 400;
                line-height: 17px;
                color: #231F20;
                text-transform: none;
                text-align: center;

                @media screen and (max-width: 480px) {
                    font-size: 12px;
                    line-height: 15px;
                }
            }
        }

        .weakness {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 16px;

            ul {
                align-items: flex-start;
            }

            .immediate-actions {
                border: 1.5px dashed #F5C0B9;
                border-radius: 12px;
                opacity: 1;
                padding: 16px;
                width: 100%;
                background: #FFEBE9;

                h6 {
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 4px;
                    font-size: 14px;
                    line-height: 17px;
                    font-weight: 700;
                    color: var(--errorRed);

                    img {
                        margin-right: 4px;
                        width: 16px;
                        height: 16px;
                        min-width: 16px;
                    }

                    span {
                        font-size: 11px;
                        font-weight: 400;
                        color: #640606;
                        line-height: inherit;
                    }
                }

                ul {
                    margin-top: 12px;
                    margin-left: 8px;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    align-items: flex-start;

                    max-height: calc(100vh - 540px);
                    overflow: auto;
                    margin-right: -16px;

                    li {
                        font-size: 12px;
                        font-weight: 500;
                        line-height: 17px;
                        color: var(--text-gray);
                        display: flex;
                        align-items: flex-start;
                        gap: 4px;

                    }

                }
            }

            .underlinedBtn {
                align-self: flex-start;
                display: none;
                gap: 8px;
                align-items: center;

                svg {
                    width: 16px;
                    height: 16px;
                    min-width: 16px;
                }

                font-size: 14px;
                font-weight: 700;
                line-height: 17px;

                @media screen and (max-width:767px) {
                    display: flex;
                }
            }
        }

        .ghostBtn {
            text-decoration: underline;
            color: #6b6b6b;
        }

        .transform-modal {
            display: flex;
            flex-direction: column;
            gap: 16px;

            .header {
                h6 {
                    font-size: 18px;
                    line-height: 22px;
                    font-weight: 600;
                    text-align: center;
                }

                strong {
                    font-size: 13px;
                    line-height: 17px;
                    font-weight: 500;
                    text-align: center;
                    margin: 8px 0 16px;

                    .score {
                        font-size: 14px;
                        line-height: 17px;
                        font-weight: 700;
                        margin-right: 4px;
                    }
                }

                text {
                    font-size: 12px;
                    line-height: 15px;
                    font-weight: 500;
                    display: flex;
                    gap: 4px;
                    align-items: center;
                    flex-wrap: wrap;
                    justify-content: center;
                    text-align: center;

                    .resume-name {
                        max-width: 240px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        font-weight: 600;
                        display: inline-block;
                        vertical-align: bottom;
                    }
                }

                .score {
                    font-size: 28px;
                    line-height: 34px;
                    font-weight: 700;
                    color: var(--errorRed);
                    text-align: center;
                }
            }

            .scoreMessage {
                background: #CECCCC;
                border: 1px solid #CECCCC;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 8px;
                padding: 12px 20px;
                border-radius: 12px;
                text-align: center;
                width: 100%;

                h6 {
                    color: #231F20;
                    font-weight: 700;
                    font-size: 12px;
                    line-height: 15px;
                    text-align: center;
                }

                text {
                    font-weight: 400;
                    font-size: 11px;
                    line-height: 13px;
                    text-align: center;
                }

                &.redFlag {
                    border-color: #FCD3D4;
                    background: #FCD3D4;


                    h6 {
                        color: var(--errorRed);
                    }

                    text {
                        color: #5F0D0D;
                        text-transform: none;
                    }
                }

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

                    h6 {
                        font-size: 16px;
                        line-height: 20px;
                    }

                    text {
                        font-size: 12px;
                        line-height: 16px;
                    }
                }
            }

            .primaryBtn.gradientBtn {
                margin: unset;
                width: 100%;
                font-size: 14px;
                line-height: 17px;
                font-weight: 700;
                text-transform: uppercase;
                padding: 12px 24px;
                border-radius: 27px;
                background: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                color: var(--white);
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;

                img {
                    width: 16px;
                    height: 16px;
                    min-width: 16px;
                }
            }
        }
    }
}

.commonModal.tailor-resume-payment-modal {
    /* width: 704px; */

    .modal-dialog .modal-content {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 40px;
        background: #F7F7F7;
        position: relative;

        .tailor-resume-payment-logo-bg {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 0;
        }

        .tr-payment-top {
            display: flex;
            flex-direction: column;
            gap: 16px;
            z-index: 1;

            .trp-header {
                display: flex;
                flex-direction: column;
                justify-content: center;
                gap: 12px;

                .trp-header-top {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                }

                .trp-flash-icon {
                    height: 32px;
                    width: 32px;
                    background: white;
                    border: 1px solid #ECECEC;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    flex-shrink: 0;
                }

                h2 {
                    font-size: 22px;
                    font-weight: 700;
                    line-height: 30px;
                    margin: 0;
                }

                p {
                    font-size: 15px;
                    font-weight: 500;
                    line-height: 100%;
                    color: var(--text-gray);
                    margin-bottom: 0;
                }
            }

            .trp-what-includes {
                display: flex;
                flex-direction: column;
                gap: 8px;

                h3 {
                    font-size: 14px;
                    font-weight: 600;
                    line-height: 100%;
                    text-transform: capitalize;
                    color: #3a6c46;
                    margin-bottom: 3px;
                }

                ul {
                    display: flex;
                    flex-direction: column;
                    gap: 10px;

                    li {
                        font-size: 12px;
                        font-weight: 400;
                        line-height: 100%;
                        color: #000;

                        svg {
                            min-width: 14px;
                            margin-right: 8px;
                        }
                    }
                }

            }
        }

        .mobile-note-for-edits {
            display: none;
        }

        .tr-payment-bottom {
            display: flex;
            flex-direction: column;
            gap: 12px;

            .tr-pb-title {
                h2 {
                    font-size: 20px;
                    font-weight: 500;
                    line-height: 100%;
                    margin-bottom: 10px;
                }

                .plan-expiry-info {
                    font-size: 11px;
                    line-height: 100%;
                    letter-spacing: -0.2px;
                    font-weight: 600;
                    color: #867FB9;
                    margin-top: 2px;
                }
            }

            .trp-plans {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;
                position: relative;
                width: 100%;

                .trp-plan {
                    width: 100%;
                    border: 1px solid #DEE1E7;
                    border-radius: 16px;
                    background: #FBFBFB;
                    transition: all 0.3s ease;
                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);

                    &:hover {
                        transform: translateY(-2px);
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                        border-color: #C5CBD3;
                    }

                    .trp-plan-content {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        gap: 16px;
                        padding: 12px 20px;
                    }

                    .trp-plan-left {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        flex: 1;
                        gap: 20px;
                        min-width: 0;
                    }

                    .plan-name {
                        font-size: 15px;
                        font-weight: 600;
                        line-height: 1.3;
                        color: #404040;
                        min-width: 140px;
                        flex-shrink: 0;
                        display: flex;
                        align-items: center;
                        gap: 6px;

                        .recommended-badge {
                            font-size: 9px;
                            font-weight: 600;
                            line-height: 100%;
                            color: #8738D7;
                            background: rgba(135, 56, 215, 0.1);
                            padding: 2px 6px;
                            border-radius: 4px;
                            text-transform: uppercase;
                            letter-spacing: 0.5px;
                        }
                    }

                    .plan-price {
                        font-size: 13px;
                        font-weight: 400;
                        line-height: 1.4;
                        color: var(--text-gray);
                        position: relative;
                        flex: 1;
                        min-width: 0;

                        b {
                            font-size: 16px;
                            font-weight: 700;
                            line-height: 1.2;
                            color: #404040;
                            margin-right: 4px;
                        }

                        &:has(.plan-price-description) {
                            margin-bottom: 15px;
                        }

                        .plan-price-description {
                            position: absolute;
                            top: calc(100% + 4px);
                            left: 0;
                            font-size: 0.75rem;
                            line-height: 1.214;
                            font-weight: 500;
                            color: var(--secondary-blue);
                            white-space: nowrap;
                        }
                    }

                    .trp-plan-btn {
                        font-size: 13px;
                        font-weight: 700;
                        line-height: 1.214;
                        text-transform: uppercase;
                        color: var(--white);
                        background: #404040;
                        border: 1px solid #404040;
                        padding: 10px 24px;
                        min-width: 180px;
                        border-radius: 8px;
                        transition: all 0.2s ease;
                        flex-shrink: 0;
                        cursor: pointer;

                        &:hover {
                            background: #2d2d2d;
                            border-color: #2d2d2d;
                            transform: scale(1.02);
                        }

                        &:active {
                            transform: scale(0.98);
                        }
                    }

                    &.pro {
                        background: var(--white);
                        padding: 0;
                        box-sizing: border-box;
                        position: relative;
                        border-radius: 16px;
                        border: 2px solid transparent;
                        background-image: linear-gradient(white, white), linear-gradient(90deg, var(--white) -199.41%, var(--primary-dark) -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                        background-origin: border-box;
                        background-clip: padding-box, border-box;
                        width: 100%;
                        margin-block: 0;
                        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

                        &:hover {
                            transform: translateY(-3px);
                            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
                        }

                        .trp-plan-content {
                            padding: 22px 20px;
                        }

                        .plan-name {
                            min-width: 160px;

                            .recommended-badge {
                                font-size: 9px;
                                font-weight: 600;
                                line-height: 100%;
                                color: #8738D7;
                                background: rgba(135, 56, 215, 0.15);
                                padding: 3px 8px;
                                border-radius: 4px;
                                text-transform: uppercase;
                                letter-spacing: 0.5px;
                            }
                        }

                        .trp-plan-btn {
                            background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
                            border: none;
                            padding: 10px 32px;
                            min-width: 200px;
                            box-shadow: 0 2px 8px rgba(152, 16, 250, 0.3);

                            &:hover {
                                background: linear-gradient(135deg, #8A0EE8 0%, #0F52E8 50%, #4528E0 100%);
                                box-shadow: 0 4px 12px rgba(152, 16, 250, 0.4);
                                transform: scale(1.02);
                            }
                        }
                    }
                }
            }
        }
    }

    @media screen and (max-width:767px) {
        width: 100vw !important;
        position: fixed !important;
        top: unset !important;
        bottom: 0 !important;
        left: 0 !important;
        border-radius: 8px 8px 0 0 !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 64px);

        .modal-dialog {
            margin: 0 !important;
            min-height: calc(100vh - 64px);
            -webkit-animation: drawer-bottom-slide-in .28s cubic-bezier(.25, .46, .45, .94) both;
            animation: drawer-bottom-slide-in .28s cubic-bezier(.25, .46, .45, .94) both;

            .modal-content {
                padding: 44px 16px;
                border-radius: 8px 8px 0 0;
                height: inherit;
                min-height: inherit;

                .tr-payment-top {
                    .trp-header {
                        .trp-header-top {
                            .trp-flash-icon {
                                display: none;
                            }
                        }

                        h2 {
                            font-size: 18px;
                        }

                        p {
                            font-size: 11px;
                            margin-top: -8px;
                        }
                    }

                    .trp-what-includes {
                        h3 {
                            font-size: 12px;
                        }

                        ul li {
                            font-size: 11px;
                        }
                    }
                }

                .mobile-note-for-edits {
                    margin: -24px 0 -8px;
                    border-radius: 8px;
                    background: #FEE9DC;
                    display: flex;
                    padding: 4px 6px;
                    justify-content: flex-start;
                    align-items: flex-start;
                    gap: 8px;

                    span {
                        font-size: 11px;
                        line-height: 1.214;
                        font-weight: 500;
                    }

                    strong {
                        font-weight: 700;
                    }

                    @media screen and (max-height: 670px) {
                        margin: -24px 0 -16px;
                    }
                }

                .tr-payment-bottom {
                    gap: 16px;

                    @media screen and (max-height: 670px) {
                        gap: 8px;
                    }

                    h2 {
                        font-size: 16px !important;
                        margin-bottom: 0 !important;
                    }

                    .trp-plans {
                        gap: 10px;

                        .trp-plan {
                            width: calc(100% - 12px);

                            .trp-plan-content {
                                flex-direction: column;
                                align-items: stretch;
                                gap: 12px;
                                padding: 14px 16px;
                            }

                            .trp-plan-left {
                                flex-direction: column;
                                align-items: flex-start;
                                justify-content: flex-start;
                                gap: 8px;
                                width: 100%;
                            }

                            .plan-name {
                                min-width: unset;
                                font-size: 14px;
                                width: 100%;
                            }

                            .plan-price {
                                min-width: unset;
                                font-size: 12px;
                                width: 100%;

                                b {
                                    font-size: 15px;
                                    line-height: 1.3;
                                }
                            }

                            .trp-plan-btn {
                                width: 100%;
                                padding: 10px 16px;
                                font-size: 12px;
                                min-width: unset;
                            }

                            &.pro {
                                .trp-plan-content {
                                    padding: 16px;
                                }

                                .plan-name {
                                    min-width: unset;
                                }

                                .trp-plan-btn {
                                    padding: 10px 20px;
                                    font-size: 12px;
                                    width: 100%;
                                }
                            }

                            @media screen and (max-width: 480px) {
                                .trp-plan-content {
                                    padding: 12px;
                                }

                                .plan-name {
                                    font-size: 13px;
                                }

                                .plan-price {
                                    font-size: 11px;

                                    b {
                                        font-size: 14px;
                                    }
                                }

                                .trp-plan-btn {
                                    padding: 9px 14px;
                                    font-size: 11px;
                                }

                                &.pro {
                                    .trp-plan-content {
                                        padding: 14px 12px;
                                    }

                                    .trp-plan-btn {
                                        padding: 9px 18px;
                                        font-size: 11px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:767px) {
    .ReactModal__Overlay:has(.commonModal.tailor-resume-payment-modal) {
        padding: 0 !important;
        /* inset: unset !important; */
    }
}

/* career coach */

.career-coach-page {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fffceb;
    overflow-y: auto;
    min-height: 100vh;
    font-family: 'Rubik', sans-serif !important;

    .chat-section-container {
        display: flex;
        min-height: 100vh;
        width: 100%;
        background: #faeeab;

        .sidebar {
            display: flex;
            flex-direction: column;
            width: 72px;
            transition: width 0.3s ease-in-out;

            .logo-head {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                cursor: pointer;
                padding: 12px;

                svg {
                    height: 28px;
                    width: 28px;
                }

                img {
                    height: 45px;
                    width: 45px;
                }
            }

            &.expanded {
                width: 270px;

                .logo-head {
                    justify-content: flex-end;
                }

                .items {
                    margin-left: 8px;
                    align-items: unset;

                    .item.chat-actions .new-chat,
                    .item.chat-actions .recent-chats,
                    .item.user-box {
                        display: flex;
                        align-items: center;
                        gap: 8px;

                        .icon {
                            height: 32px;
                            width: 32px;

                            svg {
                                height: auto;
                                width: 16px;
                            }
                        }

                        .title-text {
                            display: block !important;
                            font-size: 16px;
                            font-weight: 500;
                        }
                    }

                    .item .action .recent-chats {
                        display: flex !important;
                        flex-direction: column;
                        align-items: flex-start;

                        .title {
                            width: 100%;
                            display: flex;
                            gap: 8px;
                            align-items: center;
                        }


                        .chats-list {
                            width: 100%;
                            padding: 0 6px 8px;
                            overflow-y: auto;
                            scrollbar-width: thin;
                            max-height: calc(100vh - 192px);
                            scrollbar-color: #99978d #faeeab;

                            .chat-item {
                                padding: 6px 12px;

                                p {
                                    margin-bottom: 0;
                                    font-size: 14px;
                                    white-space: normal;
                                    font-weight: 400;
                                    text-wrap-mode: nowrap;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                }

                                &:hover {
                                    background: #fffdc5;
                                    border-radius: 4px;
                                }
                            }
                        }
                    }
                }

                .item.user-box {
                    padding: 12px;
                    margin-bottom: 0 !important;
                    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.1);

                    .name-initials {
                        flex-shrink: 0 !important;
                    }

                    .user-info {
                        display: flex !important;
                        justify-content: space-between;
                        width: 100%;

                        .user-name {
                            align-self: center;
                            font-weight: 700 !important;
                        }

                        svg {
                            align-self: center;
                        }
                    }
                }
            }

            .items {
                display: flex;
                flex-direction: column;
                align-self: flex-end;
                height: 100%;
                width: 100%;
                padding: 16px 0px 12px 0px;
                align-items: center;

                .item.chat-actions {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    height: 100%;

                    .action {
                        width: 100%;

                        .new-chat {
                            cursor: pointer;
                            padding: 6px 12px;

                            .icon {
                                height: 40px;
                                width: 40px;
                                border-radius: 50%;
                                background: #3d3d3a;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                /* align-self: center; */

                                svg {
                                    fill: var(--white);
                                    height: 20px;
                                    width: 20px;
                                }
                            }

                            &:hover {
                                cursor: pointer;
                                background: #fffdc5;
                            }
                        }

                        .recent-chats {
                            cursor: pointer;

                            .title {
                                padding: 6px 12px;

                                &:hover {
                                    cursor: pointer;
                                    background: #fffdc5;
                                }
                            }

                            .icon {
                                height: 40px;
                                width: 40px;
                                border-radius: 50%;
                                background: #3d3d3a;
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                svg {
                                    height: auto;
                                    width: 22px;
                                    fill: white;
                                }
                            }
                        }
                    }
                }

                .item.user-box {
                    cursor: pointer;
                    position: relative;
                    margin-bottom: 14px;
                    margin-right: 0px;

                    .name-initials {
                        height: 42px;
                        width: 42px;
                        border-radius: 50%;
                        background: #3d3d3a;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .user-intial {
                            color: var(--white);
                            font-weight: 700;
                            font-size: 18px
                        }
                    }
                }
            }

            .profile-menu {
                position: absolute;
                bottom: 74px;
                right: 2px;
                width: 204px;
                padding: 8px;
                height: fit-content;
                background: var(--white);
                border: 1px solid var(--text-field-outline-2);
                border-radius: 8px;
                z-index: 1000;
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
                max-height: 250px;
                overflow-y: auto;
                scrollbar-width: thin;

                .items-wrapper {
                    display: flex;
                    flex-direction: column;

                    .p-item {
                        display: flex;
                        padding: 8px;
                        width: 100%;
                        align-items: center;
                        gap: 8px;

                        &:hover {
                            border-radius: 8px;
                            background: #fffef6;

                            &.add-p-btn button {
                                background: #faeeab;
                            }
                        }

                        .name-initials {
                            height: 28px;
                            width: 28px;

                            .p-intial {
                                font-size: 14px;
                                color: white;
                                font-weight: 700;
                            }
                        }

                        &.add-p-btn {
                            display: flex;
                            justify-content: center;
                            width: 100%;
                            padding: 12px;
                            margin-top: 8px;
                            border-radius: 8px;
                            border: none;
                            background: #faeeab;
                            color: var(--primary-black);
                            font-size: 14px;
                            font-weight: 600;
                            cursor: pointer;
                        }

                        .p-name {
                            font-size: 14px;
                            font-weight: 600;
                            color: var(--primary-black);
                            text-align: center;
                        }
                    }
                }
            }
        }

        .chat-section {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 20px;
            border-radius: 8px;
            width: 100%;
            margin: 8px 8px 8px 0px;
            background: #fffef6;
            overflow-y: auto;
            scrollbar-width: thin;

            .content-wrapper {
                display: flex;
                width: 100%;
                height: calc(100vh - 16px);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: relative;
                transition: border 0.3s ease;

                .file-drag-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    gap: 14px;
                    z-index: 10;
                    font-size: 16px;
                    font-weight: 600;
                    color: var(--primary-black);
                    background: #ffffffd4;
                    border-radius: 8px;

                    svg {
                        width: 20px;
                        height: 20px;
                    }
                }

                &.response-content {
                    /* margin: 32px 0; */
                    justify-content: space-between;
                }

                &.default-content .prompt-wrapper {
                    justify-content: center;
                }

                .prompt-wrapper {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    align-items: center;
                    overflow-y: auto;
                    scrollbar-width: thin;
                    position: relative;
                    padding-bottom: 40px;
                    flex: 1;

                    .prompt-content {
                        &.message {
                            position: sticky;
                            top: 0;
                            z-index: 21;
                            background: #fffef6;
                        }

                        &.e-text .message {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        &.f-text .message {
                            white-space: pre-wrap;
                            overflow: visible;
                            text-overflow: clip;
                        }

                        .message {
                            width: 48rem;
                            position: sticky;
                            top: 0;
                            z-index: 1;
                            background: #fffef6;
                            padding: 20px 0 12px;
                            margin-inline: auto;
                            border-bottom: 1px solid var(--text-field-outline-2);

                            span {
                                font-size: 24px;
                                line-height: 28px;
                                font-weight: 500;
                                color: var(--primary-black);
                            }
                        }

                        .loader-thinking {
                            display: flex;
                            align-items: center;
                            gap: 4px;
                            padding: 8px 2px;

                            .spinner-loader {
                                display: inline-block;
                                width: 16px;
                                aspect-ratio: 1;
                                border-radius: 50%;
                                background: radial-gradient(farthest-side, #e0e0e0 94%, #0000) top/4px 4px no-repeat,
                                    conic-gradient(#0000 30%, #e0e0e0);
                                -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
                                mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 0);
                                animation: spinner-rotate 1s infinite linear;
                                transform-origin: center;
                            }


                            span {
                                font-size: 14px;
                                font-weight: 600;
                                color: var(--text-gray);
                            }
                        }

                        .markdown-content {
                            width: 48rem;
                            margin-inline: auto;
                            font-size: 14px;
                            font-weight: 400;
                            color: var(--primary-black);

                            strong {
                                font-weight: 500;
                            }

                            p {
                                margin: 12px 0;
                            }

                            ol {
                                margin-top: 18px;
                                margin-left: 24px;
                            }

                            ol li p {
                                font-weight: 600;
                            }

                            ol li {
                                font-size: 16px;
                                line-height: 24px;
                                font-weight: 500;
                                list-style-type: decimal;

                                ul li {
                                    margin-left: 18px;
                                }
                            }

                            ul li ol li {
                                margin-left: 4px;
                                list-style-type: decimal;
                            }

                            ul li ul {
                                margin-top: 4px;
                            }

                            ul li ul li {
                                margin-bottom: 4px;
                                margin-left: 18px;
                                list-style-type: circle;
                            }

                            ul li {
                                list-style-type: disc;
                                margin-left: 42px;
                                margin-bottom: 8px;
                            }

                            ul li,
                            ul li p,
                            li p,
                            p {
                                font-size: 16px;
                                font-weight: 400;
                                line-height: normal;
                                color: var(--primary-black);
                            }

                            h1,
                            h2,
                            h3,
                            h4,
                            h5,
                            h6 {
                                font-weight: 600 !important;
                            }

                            .table-wrapper {
                                width: 100%;
                                overflow-x: auto;
                                scrollbar-width: thin;
                                scrollbar-color: var(--primary-gray) transparent;

                                &::-webkit-scrollbar-track {
                                    background: transparent;
                                }

                                table {
                                    border-collapse: collapse;
                                    width: max-content;
                                    min-width: 100%;

                                    th,
                                    td {
                                        width: max-content;
                                        min-width: 80px;
                                        max-width: 240px;
                                    }
                                }
                            }
                        }

                        .res-feedback {
                            display: flex;
                            align-items: center;
                            margin: 12px 0;
                            width: 48rem;
                            margin-inline: auto;

                            span {
                                padding: 8px;

                                &.positive {
                                    transform: rotate(180deg);
                                }

                                &.active {
                                    padding: 8px 8px 5px;

                                    svg {
                                        fill: #231F20;
                                        height: 20px;
                                        width: 20px;

                                        path {
                                            stroke: var(--white);
                                            stroke-width: 0.6;
                                        }
                                    }
                                }

                                &:hover {
                                    background: #faeeab;
                                    border-radius: 8px;
                                    cursor: pointer;
                                }

                                svg {
                                    height: 18px;
                                    width: 18px;
                                }
                            }
                        }

                        .feedback-detail {
                            display: flex;
                            flex-direction: column;
                            width: 48rem;
                            gap: 16px;
                            padding: 20px 14px;
                            border: 1px solid var(--text-field-outline-2);
                            border-radius: 8px;
                            margin-inline: auto;

                            .f-title {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                .modalCloseBtn {
                                    border: none;
                                    background: none;
                                    top: 16px;
                                    right: 16px;
                                }

                                .span {
                                    font-size: 16px;
                                    font-weight: 500;
                                }
                            }

                            .f-tags-list {
                                display: flex;
                                gap: 8px 12px;
                                flex-wrap: wrap;

                                span {
                                    cursor: pointer;
                                    font-size: 13px;
                                    padding: 8px;
                                    border: 1px solid var(--text-field-outline-2);
                                    border-radius: 8px;
                                }
                            }

                            .feedback-input {
                                padding: 14px;
                                font-weight: 400;

                                &:focus {
                                    outline: 2px solid var(--text-field-outline-2);
                                }
                            }

                            .feedback-submit-btn {
                                background: #3d3d3a;
                                border: none;
                                width: fit-content;
                                align-self: flex-end;
                                color: white;
                                padding: 8px 12px;
                                font-size: 14px;
                                border-radius: 8px;
                            }
                        }

                        hr {
                            margin: 52px 0 18px;
                        }
                    }
                }

                .default-content {
                    padding: 20px;
                    max-width: 100%;
                    margin: 0 auto;

                    .chat-header {
                        text-align: center;
                        margin-bottom: 28px;

                        .head-title {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            gap: 24px;
                            margin-bottom: 10px;

                            img {
                                height: auto;
                                width: 104px;
                            }

                            .head-title-text {
                                font-size: 23px;
                                font-weight: 700;
                                color: #000;
                            }
                        }
                    }

                    .suggested-search-wrapper {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 10px;

                        .suggested-search {
                            place-items: center;

                            .search-title {
                                font-size: 16px;
                                font-weight: 600;
                                color: var(--primary-black);
                                padding: 18px;
                                text-align: center;
                            }

                            .search-items {
                                display: flex;
                                flex-direction: column;
                                gap: 10px;

                                .search-item {
                                    padding: 12px 16px;
                                    width: 250px;
                                    min-width: 210px;
                                    background: white;
                                    border-radius: 8px;
                                    background: var(--white);
                                    border: 1px solid var(--text-field-outline-2);
                                    cursor: pointer;

                                    span {
                                        font-size: 13px;
                                        font-weight: 500;
                                        color: var(--text-gray);

                                        .top-arrow-icon {
                                            rotate: 90deg;
                                            height: 12px;
                                            width: 12px;
                                        }
                                    }

                                    &:hover {
                                        background: #FFF8D6;

                                        span {
                                            color: var(--primary-black);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .scroll-btn {
                    background: #faeeab;
                    border: 1px solid #e4d68a;
                    height: 32px;
                    width: 32px;
                    border-radius: 50px;
                    position: sticky;
                    z-index: 111;
                    bottom: 0;
                    left: 50%;
                    transform: translateX(-50%);
                    flex-shrink: 0;

                    svg {
                        transform: rotate(180deg);
                    }
                }

                .chat-box {
                    display: flex;
                    flex-direction: column;
                    width: 48rem;

                    .search-box {
                        border: 1px solid var(--text-field-outline-2);
                        background: var(--white);
                        border-radius: 8px;
                        padding: 12px 16px;
                        display: flex;
                        /* align-items: center; */
                        flex-direction: column;
                        gap: 22px;
                        width: 100%;
                        position: relative;
                        margin-bottom: 18px;

                        textarea {
                            border: none;
                            border-radius: 0;
                            outline: none;
                            resize: none;
                            width: 100%;
                            padding: 0;
                            scrollbar-width: thin;
                            font-weight: 400;
                        }

                        .chat-actions-wrapper {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            gap: 6px;
                            width: 100%;

                            .add-resume-wrapper {

                                .add-btn {
                                    border: 1px solid var(--text-field-outline-2);
                                    background: #3d3d3a;
                                    font-size: 12px;
                                    font-weight: 500;
                                    padding: 8px;
                                    color: white;
                                    border-radius: 8px;
                                    text-align: center;

                                    &.disabled {
                                        opacity: 0.5;
                                    }
                                }
                            }

                            .upload-file-name {
                                padding: 8px 12px;
                                display: flex;
                                align-items: center;
                                gap: 12px;
                                width: fit-content;
                                max-width: 280px;
                                border-radius: 8px;
                                border: 1.5px solid var(--light-blue);
                                background: var(--rgb-light-gray-16);

                                .file-name {
                                    display: flex;
                                    flex-wrap: nowrap;
                                    align-items: center;
                                    width: 88%;
                                    gap: 6px;

                                    img {
                                        height: 22px;
                                        width: 22px;
                                        min-width: 22px;
                                    }

                                    span {
                                        font-size: 12px;
                                        white-space: normal;
                                        text-wrap-mode: nowrap;
                                        text-overflow: ellipsis;
                                        overflow: hidden;
                                    }
                                }

                                .resume-option-wrapper {
                                    position: relative;

                                    svg {
                                        height: 18px;
                                        width: auto;
                                    }

                                    .option-dropdown {
                                        position: absolute;
                                        top: -102px;
                                        right: -14px;
                                        height: fit-content;
                                        width: 218px;
                                        background: white;
                                        padding: 12px 8px;
                                        border: 1px solid var(--text-field-outline-2);
                                        border-radius: 8px;
                                        font-size: 14px;
                                        z-index: 11;
                                        display: flex;
                                        flex-direction: column;

                                        span {
                                            padding: 8px 6px;
                                            width: 100%;

                                            &:hover {
                                                background: #FFF8D6;
                                                border-radius: 4px;
                                                cursor: pointer;
                                            }
                                        }
                                    }
                                }
                            }

                            .send-btn-icon {
                                border: none;
                                height: fit-content;
                                padding: 6px;
                                background: #3d3d3a;
                                border-radius: 8px;

                                &.disabled {
                                    opacity: 0.5;
                                }

                                svg {
                                    fill: var(--white);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.ReactModal__Overlay .ReactModal__Content.cc-profile-loader {
    width: 460px;

    .modal-content {
        padding: 42px 32px;

        .content .loadingStep {
            .left h6 {
                font-size: 16px;
                line-height: 20px;
            }

            .sectionLoader {
                width: fit-content;
                margin-bottom: 0;

                .dot-spinner {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }
}

@media (max-width: 767px) {
    .career-coach-page {
        display: flex;
        height: 100vh;
        position: relative;

        .chat-section-container {
            flex-direction: column;
            max-height: 100%;

            .nav-bar {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 10;
                padding: 4px;
                background: #fffceb;

                .toggle-icon {
                    padding: 6px;
                }
            }

            .sidebar {
                position: fixed;
                top: 0;
                left: 0;
                height: 100%;
                width: 240px;
                z-index: 112;
                transition: transform 0.3s ease-in-out;
                transform: translateX(-100%);
                background: #faeeab;

                &.open {
                    transform: translateX(0);
                }

                &.collapsed {
                    transform: translateX(-100%);
                }

                &.expanded {
                    width: 240px;
                }

                .items .item.chat-actions .icon {
                    height: 32px;
                    width: 32px;

                    svg {
                        height: auto;
                        width: 18px;
                    }
                }

                .items .item.user-box .profile-menu {
                    right: 8px;
                }
            }

            .chat-section {
                height: 100vh;
                border-radius: 0;
                flex-grow: 1;
                margin: 0;
                transition: margin-left 0.3s ease;

                .content-wrapper {
                    height: calc(100vh - 44px);
                    justify-content: unset;

                    &.response-content {
                        margin-top: 44px;
                        justify-content: unset;
                    }

                    .prompt-wrapper {
                        height: 100%;

                        .default-content {
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            text-align: center;
                        }

                        .default-content {
                            max-width: 100%;

                            .chat-header {
                                h2 {
                                    font-size: 22px;
                                }
                            }

                            .suggested-search-wrapper {
                                display: flex;

                                .suggested-search {
                                    flex-direction: column;
                                    align-items: center;
                                    width: 100%;

                                    .search-item {
                                        width: 100%;
                                        max-width: 300px;
                                    }
                                }
                            }
                        }

                        .prompt-content {
                            width: 100%;
                            padding: 0 22px;

                            .message {
                                width: 100%;
                                padding: 24px 0 16px;

                                span {
                                    font-size: 18px;
                                }
                            }

                            .markdown-content {
                                width: 100%;

                                ol {
                                    margin-left: 18px;

                                    li {
                                        font-size: 16px;
                                        line-height: 20px;
                                        margin-bottom: 2px;
                                    }
                                }

                                ul li {
                                    margin-left: 18px;

                                    ul li {
                                        margin-left: 16px;
                                    }
                                }

                                table {
                                    border-collapse: collapse;

                                    th,
                                    td {
                                        padding: 8px 12px;
                                        width: auto !important;
                                        min-width: 60px !important;
                                        max-width: 160px !important;
                                    }
                                }
                            }

                            .res-feedback {
                                width: 100%;
                            }

                            .feedback-detail {
                                width: 100%;
                            }

                            hr {
                                margin: 38px 0 24px;
                            }
                        }
                    }

                    .chat-box {
                        width: 100%;
                        padding: 0 18px;

                        .search-box .chat-actions-wrapper .upload-file-name {
                            max-width: 220px;

                            .file-name {
                                width: 86%;
                            }
                        }
                    }
                }
            }
        }
    }

    .career-coach-modal .profile-section,
    .career-coach-page .profile-section {
        max-width: 100%;
        padding: 0 !important;

        .profile-header {
            padding-top: 32px;
        }

        .profile-content {
            padding: 28px 22px !important;
        }
    }

    .react-modal-portal.career-coach-modal .ReactModal__Overlay {
        display: flex;
        padding: 0 !important;

        .ReactModal__Content .modalCloseBtn {
            top: 12px;
            right: 12px;
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .prompt-content {
        width: 100%;

        .message {
            width: calc(100% - 48px) !important;
        }

        .markdown-content {
            width: calc(100% - 48px) !important;
        }

        .res-feedback {
            width: calc(100% - 48px) !important;
        }

        .feedback-detail {
            width: calc(100% - 48px) !important;
        }
    }

    .content-wrapper .chat-box {
        width: calc(100% - 48px) !important;
    }

}

@media screen and (min-width: 768px) and (max-width: 1100px) {
    .career-coach-page .chat-section-container .chat-section .content-wrapper .default-content .suggested-search-wrapper.single-search {
        display: flex;
        justify-content: center;

        .suggested-search {
            width: 100%;

            .search-items {
                flex-direction: row !important;
                gap: 12px !important;
                width: 100%;

                .search-item {
                    width: fit-content;
                    max-width: 260px !important;
                    min-width: unset !important;
                }
            }
        }
    }
}


@media screen and (min-width: 1360px) {
    .career-coach-page .chat-section-container .chat-section .content-wrapper {

        .prompt-wrapper .prompt-content .message,
        .prompt-wrapper .prompt-content .markdown-content,
        .prompt-wrapper .prompt-content .res-feedback,
        .prompt-wrapper .prompt-content .feedback-detail {
            width: 840px;
        }

        .chat-box {
            width: 840px;
        }
    }
}


.career-coach-modal .ReactModal__Content {
    width: fit-content !important;
    max-height: calc(100vh - 30px);
    overflow-y: auto;
    scrollbar-width: thin;

    .modalCloseBtn {
        border: none;
        background: none;
        top: 16px;
        right: 16px;
    }

    .profile-section {
        padding: 42px 0 0;
        max-height: (100vh - 30px);

        .profile-header .logo {
            display: none;
        }
    }
}

.career-coach-modal .profile-section,
.career-coach-page .profile-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    gap: 24px;
    width: 452px;
    min-width: 360px;
    padding: 38px 0;

    .profile-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;

        .logo img {
            height: 42px;
            width: auto;
            text-align: center;
        }

        .titles {
            h2 {
                font-size: 28px;
                font-weight: 700;
                line-height: 34px;
                color: var(--primary-black);
                margin-bottom: 4px;
            }

            p {
                font-size: 14px;
                font-weight: 500;
                line-height: 20px;
                margin-bottom: 0;
                color: var(--text-gray);
            }
        }
    }

    .profile-content {
        padding: 28px;
        width: 100%;
        background: white;
        border-radius: 4px;
        box-shadow: 0 4px 24px 0 rgba(44, 39, 56, 0.08);

        .get-started-section {
            display: flex;
            flex-direction: column;
            gap: 16px;


            .form-group.resume .upload-input-content {

                .upload-file-name {
                    padding: 12px 16px;
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    max-width: 100%;
                    border-radius: 8px;
                    border: 1.5px solid var(--light-blue);
                    background: var(--rgb-light-gray-16);

                    img {
                        height: 28px;
                        width: 28px;
                        min-width: 28px;
                    }

                    span {
                        font-size: 14px;
                        white-space: normal;
                        text-wrap-mode: nowrap;
                        width: 90%;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }

                .fileUploadField {
                    .input-label {
                        width: 100%;
                        cursor: pointer;

                        #resume {
                            display: none;
                        }
                    }

                    .form-control {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: 2px dashed var(--text-field-outline-2);
                        height: 108px;

                        .uploadFlex {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            svg {
                                width: 20px;
                                height: 20px;
                                margin-bottom: 8px;
                            }

                            .upload-text {
                                font-size: 14px;
                                font-weight: 500;
                                color: #4b5563;
                            }

                            .fileAllowed {
                                margin-top: 2px;
                                font-size: 10px;
                                font-weight: 500;
                                color: var(--text-gray);
                            }
                        }
                    }
                }

            }
        }

        .profile-summary-section {

            .header {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 18px;

                h2 {
                    margin-bottom: 4px;
                }

                p {
                    font-size: 12px;
                    line-height: 17px;
                    color: var(--text-gray);
                    margin-bottom: 0;
                }
            }
        }

        h2 {
            font-size: 18px;
            font-weight: 600;
            line-height: 100%;
            text-align: center;
            margin-bottom: 8px;
            color: var(--primary-black);
        }

        .formFields {
            .form-group {
                label {
                    margin-bottom: 6px;
                    font-size: 13px;
                    font-weight: 500;
                    line-height: 100%;
                    color: var(--primary-black);
                }

                input {
                    border: 1px solid var(--text-field-outline-2) !important;
                }

                .form-control {
                    background: var(--white);
                    border: 1px solid var(--text-field-outline-2);
                    outline: unset;
                    border-radius: 8px;
                    padding: 12px 16px;
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 17px;
                    color: var(--secondary-black);
                    height: 48px;
                }
            }

            .form-submit .submitBtn {
                width: 100%;
                padding: 12px 24px;
                font-size: 14px;
                font-weight: 600;
                line-height: 17px;
                color: var(--white);
                background: var(--brandYellow);
                border-radius: 4px;
                border: none;
                margin-top: 12px;
            }
        }
    }
}

.career-coach-page {
    & .chat-section-container {
        & .chat-section {
            & .content-wrapper {
                & .prompt-content {
                    & .markdown-content {

                        & ol li,
                        & ol li p,
                        & ul li,
                        & ul li p,
                        & li p,
                        & p {
                            font-size: 14px;
                            font-weight: 500;
                            line-height: 20px;
                            color: var(--primary-black);
                            letter-spacing: 0.1px;
                        }
                    }
                }
            }
        }
    }
}

.career-coach-page {
    & .chat-section-container {
        & .chat-section {
            & .content-wrapper {
                & .prompt-content {
                    & .markdown-content {
                        & code {
                            background: #faeeab;
                            color: #795f08;
                            font-weight: 600;
                            padding: 2px 7px;
                            font-size: 13px;
                            letter-spacing: 0px;
                            line-height: 10px;
                            border-radius: 5px;
                        }
                    }
                }
            }
        }
    }
}

.jobdetails-resume-promo {
    background: linear-gradient(90deg, #FFFEF3 0%, #FEEFE4 100%);
    background: #D8F3FF;
    width: 100%;
    padding: 1.375rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;

    .left {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;

        h6 {
            display: flex;
            align-items: flex-start;
            gap: 0.375rem;
            font-size: 1rem;
            line-height: 1.25rem;
            font-weight: 700;
            color: var(--primary-black);
            text-transform: capitalize;

            svg {
                width: 1rem;
                height: 1rem;
                min-width: 1rem;
            }
        }

        text {
            font-size: 0.75rem;
            line-height: 0.9375rem;
            font-weight: 400;
            color: var(--primary-black);
        }
    }

    .primaryBtn.gradientBtn {
        background: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
        color: var(--white);
        text-align: center;
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.0625rem;
        text-transform: uppercase;
        white-space: nowrap;
        position: relative;
        overflow: hidden;
        min-width: fit-content;

        &::before,
        &::after {
            content: "";
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(255, 255, 255, 0.1),
                    transparent);
            transition: 0.6s;
        }

        &::before {
            left: -100%;
            animation: swipeRight 1.5s infinite;
        }

        &::after {
            left: 100%;
            animation: swipeLeft 1.5s infinite;
        }

    }

    &.fix-resume {
        background: linear-gradient(90.22deg, #FFE4DA 0.19%, #FFFEF3 119.07%);
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem 1.5rem;

        .left {
            gap: unset;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            h6 {
                margin-bottom: 0.375rem;
                font-size: 0.875rem;
                line-height: 1.0625rem;

                .score {
                    color: var(--errorRed);
                }
            }

            text {
                line-height: 1.0625rem;
            }
        }

        .right {
            display: flex;
            gap: 0.5rem 1rem;
            align-items: center;

            .underlinedBtn {
                color: var(--text-gray);
            }

            /* @media screen and (max-width: 1372px) {
                flex-direction: row;
            } */

            @media screen and (max-width: 767px) {
                width: 100%;
                flex-direction: column;
                align-items: center;
            }
        }

        .primaryBtn.gradientBtn {
            display: flex;
            gap: 0.625rem;
            align-items: center;
            justify-content: center;
        }
    }

    &.healthcheck {
        background: linear-gradient(60.14deg, #FFDE82 5.72%, #FFF5C6 52.34%);
        flex-wrap: nowrap;
        overflow: hidden;
        height: 100%;

        .left {
            gap: 2px;

            h6 {
                font-size: 1.125rem;
                line-height: 1.375rem;
                text-transform: unset;
            }

            text {
                font-weight: 600;
            }

            .primaryBtn {
                margin-top: 1rem;
            }
        }

        .right {
            height: 100%;
            position: relative;
            margin-left: 5.25rem;

            .ellipse-gradient {
                position: absolute;
                top: -3rem;
                right: -60%;
                width: 17.5rem;
                max-width: calc(100% + 8.5rem);
                height: calc(100% + 8.5rem);
                min-height: calc(100% + 8.5rem);
                border-radius: 60% 0 0 60%;
                background: linear-gradient(208.34deg, rgba(255, 255, 255, 1) 40.54%, rgba(153, 153, 153, 1) 85.91%);
                mix-blend-mode: soft-light;
            }

            .health-check {
                position: relative;
                z-index: 1;
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
                height: 100%;
                min-height: 100%;

                img {
                    rotate: 18deg;
                    width: 6.875rem;
                    height: 6.875rem;
                }
            }

            @media screen and (max-width: 991px) {
                display: none;
            }
        }
    }

    &.generate-tailored-resume {
        background: linear-gradient(60.14deg, #FFDE82 5.72%, #FFF5C6 52.34%);

        .left {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0.75rem;

            .match-gauge {
                display: flex;
                flex-direction: column;
                align-items: center;

                span {
                    font-size: 0.625rem;
                    font-weight: 700;
                    line-height: 0.75rem;
                }


                &.poor span {
                    color: #B60707;
                }

                &.fair span {
                    color: #B98809;
                }

                &.strong span {
                    color: #32936F;
                }
            }

            .gtr-content {
                h6 {
                    font-size: 0.875rem;
                    line-height: 0.975rem;
                    text-transform: none;
                }

                text {
                    line-height: 100%;
                }
            }
        }

        .primaryBtn.gradientBtn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
        }

        @media screen and (max-width:767px) {
            padding: 12px 16px;
            gap: 16px;
            align-items: flex-start;
        }
    }

    @media screen and (max-width: 1372px) {
        flex-wrap: wrap;
    }
}


@keyframes swipeRight {
    100% {
        transform: translateX(200%) skew(-45deg);
    }
}

@keyframes swipeLeft {
    100% {
        transform: translateX(-200%) skew(-45deg);
    }
}

.jobDetailSection .skills .jobdetails-resume-promo {
    margin-inline: -2rem;
    margin-top: -1rem;
    width: calc(100% + 4rem);
}

.remind-later-done-msg {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #1D7B58;
    font-size: 14px;
    line-height: 17px;
    font-weight: 500;
}

.single-opp-mobile .jobdetails-resume-promo {
    margin-inline: -16px;
    width: calc(100% + 32px);
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;

    .left {
        align-items: flex-start;

        h6 {
            /* display: inline; */
            font-size: 12px;
            line-height: 15px;
            display: flex;
            /* flex-direction: column; */
            gap: 6px;

            /* svg {
                    margin: unset;
                } */

            svg {
                margin-right: 0;
            }
        }
    }

    .primaryBtn.gradientBtn {
        width: 100%;
    }

    &.fix-resume {
        .left {
            h6 {
                display: flex;
            }
        }
    }


    &.generate-tailored-resume {
        padding: 12px 16px;
        gap: 16px;
        align-items: flex-start;

        .primaryBtn {
            width: auto;
        }
    }
}

/* Keyframes for thinking spinner */
@keyframes spinner-rotate {
    0% {
        transform: rotate(0deg);
    }

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

@-webkit-keyframes spinner-rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}


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

        .bottomDrawer-backdrop {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            background: rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .bottomDrawer.promote-healthcheck {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 100;
            background: var(--white);
            border-radius: 16px 16px 0 0;
            border: 1px solid var(--text-field-outline);
            box-shadow: 0 0 12px var(--rgb-dark-20);
            padding: 24px 16px;


            .modal-content {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 16px;
                border-radius: 16px;
                background: var(--white);
                position: relative;

                .modalCloseBtn {
                    position: absolute;
                    top: 0;
                    right: 0;
                    background: transparent;
                    border: none;
                    box-shadow: none;
                    cursor: pointer;
                }

                .header {
                    margin: unset;
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    align-items: center;

                    img {
                        width: 56px;
                        height: 56px;
                    }
                }

                .content {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    h5,
                    h3 {
                        text-align: center;
                        text-transform: capitalize;
                    }

                    h5 {
                        font-size: 22px;
                        line-height: 41px;
                        font-weight: 700;
                        color: #9B9B9B;
                    }

                    h3 {
                        font-size: 24px;
                        line-height: 31px;
                        font-weight: 700;
                        color: var(--primary-black);
                    }

                    ul {
                        margin-top: 12px;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        gap: 8px;

                        li {
                            display: flex;
                            align-items: flex-start;
                            gap: 8px;
                            font-size: 12px;
                            line-height: 15px;
                            font-weight: 400;
                            color: var(--text-gray);
                        }
                    }
                }

                .primaryBtn {
                    margin-top: 16px;
                    width: 100%;
                    font-size: 14px;
                    line-height: 17px;
                    font-weight: 700;
                    text-transform: uppercase;
                    padding: 12px 24px;
                    border-radius: 27px;
                    background: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                    color: var(--white);
                }

            }
        }
    }
}


#resumePilotPublic {
    .resume-actions {
        .resume-btn.initial {
            position: relative;
            margin-bottom: 15px;
        }

        .resume-btn.initial {
            input {
                background: transparent;
                border: none;
                outline: none;
                box-shadow: none;
                cursor: pointer;
                padding: 0;
                margin: 0;
                visibility: hidden;
            }

            .filewrap {
                box-shadow: unset !important;
            }

            .filewrap>label {
                background: transparent;
                display: flex;
                gap: 0.5rem;
                align-items: center;
                justify-content: center;
                padding: 0.75rem 1.5rem;
                box-shadow: none;
                cursor: pointer;
                box-shadow: unset !important;
                border: 1px solid #A6A6A6;
                border-radius: 27px;
                font-size: 0.875rem;
                line-height: 1.0625rem;
                font-weight: 600;
                text-transform: uppercase;


                svg {
                    width: 1.125rem;
                    height: 1.125rem;
                    min-width: 1.125rem;
                }
            }

            .file_message {
                line-height: 0px;
                font-size: 0.75rem;
                font-weight: 600;
                color: var(--rgb-dark-gray-60);
                position: absolute;
                bottom: -15px;
                left: 50%;
                transform: translateX(-50%);
            }

        }
    }
}

.commonModal.signupflow.resumeHealthPublic {
    .modal-dialog {
        width: 720px;
    }

    .modal-content {
        .modal-body {
            padding: 40px 48px;

            @media screen and (max-width: 576px) {
                padding: 24px;
            }
        }

        h5 {
            font-size: 24px;
            font-weight: 600;
            line-height: 29px;
            color: var(--primary-black);
            text-align: center;
            padding-bottom: 16px;
            width: 100%;
            border-bottom: 1px solid rgba(186, 186, 186, 0.2);

            @media screen and (max-width: 576px) {
                font-size: 18px;
                line-height: 24px;
            }
        }

        .formInputs {

            .input-row {
                display: flex;
                align-items: flex-start;
                gap: 16px;

                .form-group {
                    width: calc(50% - 8px);
                }

                @media screen and (max-width: 576px) {
                    flex-direction: column;
                    gap: unset;

                    .form-group {
                        width: 100%;
                    }
                }
            }

            .react-select__control {
                font-size: 14px;
                line-height: 17px;
                text-transform: none;
                background: transparent !important;
                box-shadow: none;
                position: relative;
            }

            .react-select__menu {
                font-size: 14px;
                line-height: 17px;
            }

            .email-form-group {
                .label {
                    display: block;
                    max-width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;

                    /* strong {
                        max-width: 250px;
                        display: inline-block;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        vertical-align: bottom;
                    } */
                }

                .email-verification-container {
                    width: 100%;

                    .input-group {
                        width: 100%;
                        position: relative;

                        .form-control {
                            padding-right: 130px;
                        }

                        .verify-btn {
                            position: absolute;
                            right: 14px;
                            top: 14px;

                            font-family: Montserrat;
                            font-weight: 700;
                            font-size: 11px;
                            line-height: 100%;
                            letter-spacing: 0%;
                            text-align: center;
                            text-transform: uppercase;
                            background-color: rgba(56, 74, 215, 1);
                            color: rgba(255, 255, 255, 1);
                            border-radius: 25px;

                            &:disabled {
                                cursor: not-allowed;
                                opacity: 0.5;
                                filter: grayscale(1);
                            }
                        }
                    }

                    .input-group.otp-input-row {

                        .otp-actions {
                            position: absolute;
                            right: 14px;
                            top: 14px;

                            .resend-btn {
                                font-family: Montserrat;
                                font-weight: 700;
                                font-size: 11px;
                                line-height: 100%;
                                letter-spacing: 0%;
                                text-align: center;
                                text-transform: uppercase;
                                color: rgba(56, 74, 215, 1);
                                text-decoration: none;
                                background: none;
                                border: none;
                                cursor: pointer;
                                padding: 8px 12px;
                                white-space: nowrap;

                                &:hover {
                                    text-decoration: underline;
                                    color: #0056b3;
                                }

                                &:disabled {
                                    color: #6c757d;
                                    cursor: not-allowed;
                                    text-decoration: none;
                                }
                            }

                            .verify-btn {
                                position: unset;
                            }

                            .btn {
                                @media screen and (max-width: 576px) {
                                    font-size: 9px;
                                    padding: 8px;
                                }
                            }

                        }
                    }

                }

                .verified-email-container {
                    width: 100%;

                    .verified-email-display {
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        padding: 12px 15px;

                        background-color: rgba(186, 186, 186, 0.2);
                        border: 1px solid rgba(186, 186, 186, 0.2);

                        border-radius: 6px;
                        margin-bottom: 5px;
                        gap: 15px;

                        .verified-email {
                            font-family: Montserrat;
                            font-weight: 500;
                            font-size: 14px;
                            line-height: 100%;
                            color: rgba(107, 107, 107, 0.6);


                            max-width: 180px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;

                            @media screen and (max-width: 576px) {
                                font-size: 12px;
                            }
                        }

                        .verified-indicator {
                            display: flex;
                            align-items: center;
                            gap: 8px;
                            color: rgba(50, 147, 111, 1);
                            font-size: 12px;
                            font-weight: 500;
                            font-family: Montserrat;
                            font-weight: 500;
                            font-style: Medium;
                            font-size: 12px;
                            line-height: 100%;

                            @media screen and (max-width: 576px) {
                                font-size: 9px;
                            }
                        }

                        .update-email-btn {
                            font-family: Montserrat;
                            font-weight: 600;
                            font-size: 12px;
                            line-height: 100%;
                            letter-spacing: 0%;
                            text-decoration: underline;
                            color: rgba(0, 45, 203, 1);
                            border: none;

                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            gap: 8px;

                            margin-left: auto;

                            @media screen and (max-width: 576px) {
                                font-size: 9px;
                            }
                        }
                    }
                }

                .input-group .form-control.err {
                    border-color: #dc3545;
                }

                .error {
                    margin-top: 8px;
                }

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

        .submitBtn {
            margin: 40px 0 16px;

            button {
                width: 100%;
                text-transform: uppercase;
                font-size: 14px;
                line-height: 17px;
                font-weight: 700;
                padding: 12px 24px;
                border-radius: 27px;
                background: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
                color: var(--white);

                @media screen and (max-width: 576px) {
                    font-size: 12px;
                    line-height: 15px;
                }
            }
        }

        .modal-footer {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding-inline: 16px;

            .login-link {
                display: flex;
                align-items: center;
                gap: 8px;

            }
        }
    }
}

/* jobs landing page */
.jobs-spot-container {

    .jobs-spot-header {
        padding: 18px 42px;
        border-bottom: 1px solid var(--text-field-outline);
        position: sticky;
        z-index: 10;
        top: 0;
        left: 0;
        background: var(--white);

        svg {
            width: 94px;
            height: auto;
        }
    }

    .main-content-section {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        background: var(--lightest-yellow);
        padding: 4.5rem 3.25rem;

        .left-content {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            width: 580px;

            .tagline {
                padding: 0.5rem 0.875rem;
                font-size: 0.75rem;
                font-weight: 600;
                background: #f5f5f5;
                border-radius: 1.25rem;
                width: fit-content;
                color: var(--primary-black);

                span svg {
                    height: 1rem;
                    width: 1rem;
                    min-width: 1rem;
                    margin-right: 0.25rem;
                }
            }

            .headline {
                h1 {
                    font-size: 2.125rem;
                }

                h3 {
                    font-size: 2rem;
                }
            }

            .subtext {
                font-size: 0.75rem;
                line-height: 1.25;
                margin-bottom: 0;
            }

            .stats-wrapper {
                display: flex;
                align-items: center;
                gap: 1.125rem;

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

                    .s-icon {
                        padding: 0.5rem;
                        background: #fff6c6;
                        border-radius: 0.5rem;

                        svg {
                            height: 1.25rem;
                            width: 1.25rem;
                            min-width: 1.25rem;
                        }
                    }

                    .s-content {
                        span {
                            font-size: 1rem;
                            font-weight: 700;
                            line-height: 1.625rem;
                        }

                        p {
                            font-size: 0.6875rem;
                            font-weight: 500;
                            color: var(--text-gray);
                            line-height: normal;
                            margin-bottom: 0;
                        }
                    }
                }
            }

            .button-wrapper {
                display: flex;
                gap: 1.5rem;

                button {
                    font-size: 0.75rem;
                    font-weight: 600;
                    padding: 0.75rem 1.5rem;
                    border-radius: 0.25rem;
                    border: none;
                    outline: none;

                    &.browse-jobs-btn {
                        background: none;
                        text-decoration: underline;
                        color: var(--primary-black);
                        padding: 0;
                        text-transform: uppercase;
                        font-size: 0.75rem;
                        font-weight: 700;
                    }

                    &.job-alert-btn {
                        background: var(--primary-black);
                        color: var(--white);
                    }
                }
            }
        }

        .right-content.signup-form-content {
            position: relative;
            padding: 0;
            background: transparent;

            img {
                height: auto;
                width: auto;
                border-radius: 0;
            }

            .ja-form-wrapper {
                padding: 1.5rem 2rem;
                box-shadow: 0 0.125rem 0.5rem rgb(206 206 206 / 80%);
                border-radius: 0.5rem;
                background: var(--white);
                width: 100%;
                max-width: 480px;

                .jf-title {
                    margin-bottom: 1rem;

                    h4 {
                        font-size: 1.375rem;
                        font-weight: 600;
                        margin-bottom: 0.25rem;
                    }

                    p {
                        font-size: 0.75rem;
                        color: var(--text-gray);
                        line-height: normal;
                        margin-bottom: 0;
                    }
                }

                .jf-form {

                    .formInputs.d-flex {
                        display: flex;
                        gap: 1rem;
                        width: 100%;

                        .form-group {
                            width: calc(50% - 0.5rem);
                        }
                    }

                    .form-group {
                        margin-bottom: 0.875rem;

                        label {
                            font-size: 0.8125rem;
                            font-weight: 500;
                            margin-bottom: 0.375rem;
                            display: block;
                        }

                        .form-control {
                            font-size: 0.75rem;
                            padding: 0.625rem 0.75rem;
                            border: 1px solid var(--text-field-outline) !important;
                            border-radius: 0.25rem;
                            outline: none;
                            width: 100%;

                            &::placeholder {
                                color: #9ca3af;
                            }

                            &.err {
                                border-color: var(--failureRed) !important;
                            }
                        }

                        &.current_ctc .money-input {
                            position: relative;

                            &::before {
                                left: 0.75rem;
                                transform: translateY(-50%) scale(0.8);
                            }

                            &::after {
                                font-size: 0.75rem;
                                right: 0.75rem;
                            }

                            .form-control {
                                padding-left: 1.75rem;
                            }
                        }

                        .preview-resume-label {
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .preview-resume {
                                font-size: 0.75rem;
                                font-weight: 600;
                                color: var(--link-blue);
                                cursor: pointer;

                                &:hover {
                                    text-decoration: underline;
                                }
                            }
                        }

                        .error {
                            font-size: 0.6875rem !important;
                            margin-top: 0.25rem;
                            color: var(--failureRed);
                        }

                        .react-select__control {
                            font-size: 0.75rem;
                            border-radius: 0.25rem !important;
                            background: var(--white) !important;
                            min-height: 2.5rem;

                            .react-select__indicator {
                                padding: 0 0.5rem !important;
                            }
                        }

                        .react-select__menu .react-select__option {
                            font-size: 0.8125rem;
                        }

                        &.resume .upload-input-content {

                            .upload-file-name {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                gap: 0.75rem;
                                max-width: 100%;

                                img {
                                    height: 1.5rem;
                                    width: 1.5rem;
                                    min-width: 1.5rem;
                                }

                                span {
                                    font-size: 0.8125rem;
                                    white-space: nowrap;
                                    width: 80%;
                                    text-overflow: ellipsis;
                                    overflow: hidden;
                                }
                            }

                            .fileUploadField {
                                .input-label {
                                    width: 100%;
                                    cursor: pointer;

                                    #resume {
                                        display: none;
                                    }
                                }

                                .form-control {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    border: 1.5px dashed var(--text-field-outline-2) !important;
                                    height: 5.5rem;
                                    padding: 0.75rem;

                                    .uploadFlex {
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        justify-content: center;
                                        gap: 0.25rem;

                                        svg {
                                            width: 1.25rem;
                                            height: 1.25rem;
                                            margin-bottom: 0.25rem;
                                        }

                                        .upload-text {
                                            font-size: 0.875rem;
                                            font-weight: 500;
                                            color: #4b5563;
                                        }

                                        .fileAllowed {
                                            font-size: 0.625rem;
                                            font-weight: 500;
                                            color: var(--text-gray);
                                        }
                                    }
                                }
                            }
                        }

                        .comment {
                            font-size: 0.6875rem;
                            text-align: end;
                            margin-top: 0.25rem;
                            color: var(--text-gray);
                        }

                        &.flexible {
                            width: 100%;
                        }

                        &.email-field-wrapper {
                            .input-with-icon {
                                position: relative;
                                display: flex;
                                align-items: center;

                                .form-control {
                                    padding-right: 2.5rem;
                                }

                                .email-action-btn {
                                    position: absolute;
                                    right: 0.75rem;
                                    top: 50%;
                                    transform: translateY(-50%);
                                    background: none;
                                    border: none;
                                    cursor: pointer;
                                    padding: 0.25rem;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;

                                    &:hover {
                                        opacity: 0.7;
                                    }

                                    &:disabled {
                                        cursor: not-allowed;
                                        opacity: 0.5;
                                    }

                                    .btn-loader {
                                        width: 1rem;
                                        height: 1rem;
                                        border: 2px solid #e0e0e0;
                                        border-top-color: #002DCB;
                                        border-radius: 50%;
                                        animation: emailVerifySpinner 0.8s linear infinite;
                                    }
                                }
                            }
                        }
                    }

                    /* OTP Section Styles */
                    .otp-section {
                        display: flex;
                        flex-direction: column;
                        align-items: center;

                        .otp-form-group {
                            width: 100%;
                        }

                        .otp-label {
                            font-size: 1rem;
                            font-weight: 600;
                            color: var(--primary-black);
                            margin-bottom: 1rem;
                            display: block;
                            text-align: left;
                        }

                        .otp-inputs-wrapper {
                            display: flex;
                            justify-content: flex-start;
                            gap: 0.625rem;
                            margin-bottom: 0.75rem;
                        }

                        .otp-input {
                            width: 2.75rem;
                            height: 2.75rem;
                            border: 1px solid #d1d5db;
                            border-radius: 0.5rem;
                            text-align: center;
                            font-size: 1.125rem;
                            font-weight: 500;
                            color: var(--primary-black);
                            transition: border-color 0.2s ease, box-shadow 0.2s ease;

                            &:focus {
                                outline: none;
                                border-color: #3b82f6;
                                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
                            }

                            &.err {
                                border-color: var(--failureRed);
                            }

                            &::placeholder {
                                color: #9ca3af;
                            }
                        }

                        .error {
                            font-size: 0.6875rem !important;
                            margin-top: 0.25rem;
                            color: var(--failureRed);
                            text-align: left;
                        }

                        .otp-hint {
                            font-size: 0.8125rem;
                            color: #6b7280;
                            margin-top: 0.75rem;
                            text-align: left;
                        }
                    }

                    .ja-btn {
                        border: none;
                        background: var(--brandYellow);
                        padding: 0.75rem 1rem;
                        width: 100%;
                        border-radius: 0.25rem;
                        font-size: 0.875rem;
                        font-weight: 600;
                        cursor: pointer;
                        margin-top: 0.5rem;
                        transition: opacity 0.2s ease;

                        &:hover {
                            opacity: 0.9;
                        }
                    }
                }
            }
        }
    }

    .featured-companies-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 52px;
        gap: 24px;
        background: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(240 5% 98%) 100%);

        .fc-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;

            h2 {
                font-size: 32px;
                font-weight: 700;
                color: var(--primary-black);
            }

            p {
                font-size: 13px;
                font-weight: 500;
                color: var(--text-gray);
                line-height: normal;
                margin-bottom: 0;
                text-align: center;
            }
        }

        .fc-list-wrapper {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 24px;
            margin-top: 24px;

            .fc-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 24px 18px;
                border: 1px solid var(--text-field-outline);
                border-radius: 12px;
                background: var(--white);
            }
        }

        .fc-text {
            font-size: 12px;
            font-weight: 500;
            color: var(--text-gray);
            line-height: 15px;
            margin-top: 24px;
            margin-bottom: 0;
        }
    }

    .why-choose-us-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 28px;
        padding: 52px;

        .wc-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;

            h2 {
                font-size: 32px;
            }

            p {
                font-size: 13px;
                font-weight: 500;
                color: var(--text-gray);
                line-height: normal;
                margin-bottom: 0;
                text-align: center;
            }
        }

        .wc-list-wrapper {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 24px;

            .wc-card {
                display: flex;
                flex-direction: column;
                padding: 24px 18px;
                border: 1px solid var(--text-field-outline);
                border-radius: 12px;
                max-width: 360px;
                gap: 18px;
                transition: box-shadow 0.3s ease, transform 0.3s ease;

                &:hover {
                    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
                    transform: translateY(-5px);

                    .wc-title .wc-icon {
                        transition: box-shadow 0.3s ease, transform 0.3s ease;
                        transform: translateY(-5px);
                    }
                }

                .wc-title {
                    display: flex;
                    align-items: center;
                    gap: 12px;

                    .wc-icon {
                        background: #fff6c6;
                        border-radius: 8px;
                        padding: 8px;
                    }

                    span {
                        font-size: 16px;
                        font-weight: 700;
                        line-height: 28px;
                    }
                }

                p {
                    font-size: 13px;
                    font-weight: 500;
                    color: var(--text-gray);
                    line-height: normal;
                    margin-bottom: 0;
                }
            }
        }
    }

    .job-alerts-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 52px;
        gap: 24px;
        background: #fbfbfb;

        .ja-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;

            h2 {
                font-size: 32px;
            }

            p {
                font-size: 13px;
                font-weight: 500;
                color: var(--text-gray);
                line-height: normal;
                margin-bottom: 0;
                text-align: center;
            }
        }

        .ja-form-wrapper {
            padding: 24px 32px;
            box-shadow: 0 2px 8px rgb(206 206 206 / 80%);
            border-radius: 8px;
            margin-top: 18px;
            background: var(--white);

            .jf-title {
                h4 {
                    font-size: 22px;
                    font-weight: 600;
                    margin-bottom: 4px;

                    svg {
                        height: 22px;
                        width: 22px;
                        min-width: 22px;
                    }
                }

                p {
                    font-size: 12px;
                    color: var(--text-gray);
                    line-height: normal;
                }
            }

            .jf-form {

                .formInputs.d-flex {
                    display: flex;
                    gap: 24px;
                    width: 100%;

                    .form-group {
                        width: calc(50% - 12px);
                    }
                }

                .form-group {
                    label {
                        font-size: 13px;
                        font-weight: 500;
                    }

                    .form-control {
                        font-size: 12px;
                        border: 1px solid var(--text-field-outline) !important;
                        outline: none;
                        /* background: var(--white) !important; */

                        &.err {
                            border-color: var(--failureRed) !important;
                        }
                    }

                    &.current_ctc .money-input::before {
                        left: 12px;
                        transform: translateY(-50%) scale(0.8);
                    }

                    &.current_ctc .money-input::after {
                        font-size: 12px;
                        right: 12px;
                    }

                    .preview-resume-label {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .preview-resume {
                            font-size: 12px;
                            font-weight: 600;
                            color: var(--link-blue);
                            cursor: pointer;

                            &:hover {
                                text-decoration: underline;
                                color: #0084fc;
                            }
                        }
                    }

                    .error {
                        font-size: 11px !important;
                        margin-top: 4px;
                    }

                    .react-select__control {
                        font-size: 12px;
                        border-radius: 4px !important;
                        background: var(--white) !important;

                        .react-select__indicator {
                            padding: 0 !important;
                        }

                    }

                    .react-select__menu .react-select__option {
                        font-size: 13px;
                    }

                    &.resume .upload-input-content {

                        .upload-file-name {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            gap: 12px;
                            max-width: 100%;

                            img {
                                height: 24px;
                                width: 24px;
                                min-width: 24px;
                            }

                            span {
                                font-size: 13px;
                                white-space: normal;
                                text-wrap-mode: nowrap;
                                width: 80%;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                        }

                        .fileUploadField {
                            .input-label {
                                width: 100%;
                                cursor: pointer;

                                #resume {
                                    display: none;
                                }
                            }

                            .form-control {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border: 1.5px dashed var(--text-field-outline-2) !important;
                                height: 108px;

                                .uploadFlex {
                                    display: flex;
                                    flex-direction: column;
                                    align-items: center;
                                    justify-content: center;

                                    .left {
                                        text-align: center;

                                        svg {
                                            width: 20px;
                                            height: 20px;
                                            margin-bottom: 8px;
                                        }
                                    }

                                    .upload-text {
                                        font-size: 14px;
                                        font-weight: 500;
                                        color: #4b5563;
                                    }

                                    .fileAllowed {
                                        margin-top: 2px;
                                        font-size: 10px;
                                        font-weight: 500;
                                        color: var(--text-gray);
                                    }
                                }
                            }
                        }
                    }

                    .comment {
                        font-size: 11px;
                        text-align: end;
                        margin-top: 0;
                    }
                }

                .ja-btn {
                    border: none;
                    background: var(--brandYellow);
                    padding: 12px 16px;
                    width: 100%;
                    border-radius: 4px;
                    font-size: 14px;
                    font-weight: 600;
                }

                /* OTP Input Styles */
                .otp-section {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    .otp-form-group {
                        width: 100%;
                        text-align: center;
                    }

                    .otp-label {
                        font-size: 1.25rem;
                        font-weight: 600;
                        color: #1e3a5f;
                        margin-bottom: 1.5rem;
                        display: block;
                    }

                    .otp-inputs-wrapper {
                        display: flex;
                        justify-content: center;
                        gap: 0.75rem;
                        margin-bottom: 1rem;
                    }

                    .otp-input {
                        width: 3rem;
                        height: 3rem;
                        border: 1px solid #d1d5db;
                        border-radius: 0.75rem;
                        text-align: center;
                        font-size: 1.25rem;
                        font-weight: 500;
                        color: #1e3a5f;
                        transition: border-color 0.2s ease, box-shadow 0.2s ease;
                    }

                    .otp-input:focus {
                        outline: none;
                        border-color: #3b82f6;
                        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
                    }

                    .otp-input.err {
                        border-color: #ef4444;
                    }

                    .otp-input::placeholder {
                        color: #9ca3af;
                    }

                    .otp-hint {
                        font-size: 0.875rem;
                        color: #6b7280;
                        margin-top: 1rem;
                    }
                }

                @media (max-width: 480px) {
                    .otp-input {
                        width: 2.75rem;
                        height: 2.75rem;
                        font-size: 1rem;
                    }

                    .otp-inputs-wrapper {
                        gap: 0.5rem;
                    }
                }
            }
        }
    }

    @media screen and (min-width: 1380px) {
        .main-content-section {
            .left-content {
                gap: 32px;
                width: 620px;

                .tagline {
                    padding: 10px 16px;
                    font-size: 14px;

                    svg {
                        height: 18px !important;
                        width: 18px !important;
                        min-width: 18px !important;
                    }
                }

                .headline {

                    h1,
                    h3 {
                        font-size: 42px;
                    }
                }

                .subtext {
                    font-size: 15px;
                    line-height: 20px;
                }

                .stats-wrapper {
                    gap: 24px;

                    .stats-item {
                        gap: 12px;

                        .s-icon {
                            padding: 12px;

                            svg {
                                height: 24px;
                                width: 24px;
                                min-width: 24px;
                            }
                        }

                        .s-content {
                            span {
                                font-size: 24px;
                                line-height: 32px;
                            }

                            p {
                                font-size: 13px;
                            }
                        }
                    }
                }

                .button-wrapper {
                    .job-alert-btn {
                        font-size: 15px;
                        padding: 14px 28px;
                    }

                    .browse-jobs-btn {
                        font-size: 15px !important;
                    }
                }
            }

            .right-content {
                img {
                    height: 300px;
                    width: auto;
                }

                .r-badge {
                    padding: 14px 18px;

                    span {
                        font-size: 14px;
                        line-height: 20px;
                    }

                    h5 {
                        font-size: 22px;
                    }
                }
            }
        }

        .featured-companies-section .fc-list-wrapper .fc-card {
            img {
                max-width: 120px;
                max-height: 32px;
            }
        }
    }

    @media screen and (max-width: 1200px) {
        .main-content-section {
            padding: 3.5rem 2rem;
            gap: 2rem;

            .left-content {
                width: 480px;

                .headline {
                    h1 {
                        font-size: 1.875rem;
                    }

                    h3 {
                        font-size: 1.75rem;
                    }
                }

                .stats-wrapper {
                    gap: 1rem;
                    flex-wrap: wrap;
                }
            }

            .right-content.signup-form-content {
                .ja-form-wrapper {
                    max-width: 420px;
                }
            }
        }
    }

    @media screen and (max-width: 992px) {
        .main-content-section {
            flex-direction: column;
            padding: 2.5rem 1.5rem;
            gap: 2.5rem;

            .left-content {
                width: 100%;
                max-width: 600px;
                text-align: center;
                align-items: center;

                .tagline {
                    margin: 0 auto;
                }

                .headline {
                    h1 {
                        font-size: 1.75rem;
                    }

                    h3 {
                        font-size: 1.625rem;
                    }
                }

                .subtext {
                    max-width: 500px;
                }

                .stats-wrapper {
                    justify-content: center;
                    gap: 1.25rem;
                }

                .button-wrapper {
                    justify-content: center;
                }
            }

            .right-content.signup-form-content {
                width: 100%;
                max-width: 500px;
                display: flex;
                justify-content: center;

                .ja-form-wrapper {
                    max-width: 90%;
                    /* width: fit-content; */
                    padding: 1.25rem 1.5rem;

                    .jf-title {
                        text-align: center;
                    }

                    .jf-form {
                        .formInputs.d-flex {
                            flex-direction: column;
                            gap: 0;

                            .form-group {
                                width: 100%;
                            }
                        }

                        .otp-section {
                            .otp-label {
                                text-align: center;
                            }

                            .otp-inputs-wrapper {
                                justify-content: center;
                            }

                            .otp-hint {
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }

        .featured-companies-section,
        .why-choose-us-section,
        .job-alerts-section {
            padding: 48px 38px;

        }

        .featured-companies-section .fc-list-wrapper {
            .fc-card {
                padding: 18px 14px;
            }
        }

        .why-choose-us-section .wc-header,
        .featured-companies-section .fc-header,
        .job-alerts-section .ja-header {
            h2 {
                font-size: 30px;
            }

            p {
                font-size: 12px;
            }
        }

        .why-choose-us-section .wc-list-wrapper {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media screen and (max-width: 767px) {
        .jobs-spot-header {
            padding: 18px 16px;
        }

        .main-content-section {
            padding: 2rem 1rem;
            gap: 2.5rem;

            .left-content {
                gap: 1rem;

                .tagline {
                    padding: 0.5rem 0.75rem;
                    font-size: 0.6875rem;

                    span svg {
                        height: 0.875rem;
                        width: 0.875rem;
                        min-width: 0.875rem;
                    }
                }

                .headline {
                    h1 {
                        font-size: 1.5rem;
                    }

                    h3 {
                        font-size: 1.375rem;
                    }
                }

                .subtext {
                    font-size: 0.6875rem;
                    line-height: 1.4;
                }

                .stats-wrapper {

                    .stats-item {
                        .s-icon {
                            padding: 0.5rem;

                            svg {
                                height: 1rem;
                                width: 1rem;
                                min-width: 1rem;
                            }
                        }

                        .s-content {
                            span {
                                font-size: 0.875rem;
                                line-height: 1.4;
                            }

                            p {
                                font-size: 0.625rem;
                            }
                        }
                    }
                }

                .button-wrapper {
                    flex-direction: column;
                    gap: 0.75rem;
                    width: 100%;

                    button {
                        width: 100%;
                        padding: 0.75rem 1.5rem;

                        &.browse-jobs-btn {
                            padding: 0.5rem;
                        }
                    }
                }
            }

            .right-content.signup-form-content {
                padding: 0;

                .ja-form-wrapper {
                    padding: 1rem;

                    .jf-title {
                        margin-bottom: 0.75rem;

                        h4 {
                            font-size: 1.125rem;
                        }

                        p {
                            font-size: 0.6875rem;
                        }
                    }

                    .jf-form {
                        .form-group {
                            margin-bottom: 0.75rem;

                            label {
                                font-size: 0.75rem;
                                margin-bottom: 0.25rem;
                            }

                            .form-control {
                                padding: 0.5rem 0.625rem;
                            }

                            &.resume .upload-input-content {
                                .fileUploadField {
                                    .form-control {
                                        height: 4.5rem;
                                    }
                                }
                            }
                        }

                        .otp-section {
                            .otp-label {
                                font-size: 0.875rem;
                                margin-bottom: 0.75rem;
                            }

                            .otp-inputs-wrapper {
                                gap: 0.5rem;
                            }

                            .otp-input {
                                width: 2.25rem;
                                height: 2.25rem;
                                font-size: 1rem;
                            }

                            .otp-hint {
                                font-size: 0.75rem;
                            }
                        }

                        .ja-btn {
                            padding: 0.625rem 0.875rem;
                            font-size: 0.8125rem;
                        }
                    }
                }
            }
        }

        .featured-companies-section {
            padding: 42px 16px;
            max-width: 100%;

            .fc-header {
                h2 {
                    font-size: 22px;
                }

                p {
                    font-size: 12px;
                }
            }

            .fc-list-wrapper {
                grid-template-columns: repeat(2, 1fr);
                margin-top: 0;

                .fc-card {
                    padding: 24px 18px;
                }
            }
        }

        .why-choose-us-section {
            padding: 42px 16px;
            max-width: 100%;

            .wc-header {
                h2 {
                    font-size: 22px;
                }

                p {
                    font-size: 12px;
                }
            }

            .wc-list-wrapper {
                grid-template-columns: repeat(1, 1fr);
                margin-top: 0;
            }
        }

        .job-alerts-section {
            padding: 42px 16px;
            max-width: 100%;

            .ja-header {
                align-items: center;
                gap: 8px;

                h2 {
                    font-size: 22px;
                }

                p {
                    font-size: 12px;
                }
            }

            .ja-form-wrapper {
                padding: 24px 16px;
                max-width: 100%;
                /* margin-inline: -16px;
                border-radius: 0;
                box-shadow: none; */
                margin-top: 0;

                .jf-title {
                    h4 {
                        font-size: 21px;
                    }

                    p {
                        font-size: 11px;
                    }
                }
            }
        }
    }

    @media screen and (max-width: 480px) {
        .main-content-section {
            padding: 1.5rem 0.75rem;

            .left-content {
                .headline {
                    h1 {
                        font-size: 1.25rem;
                    }

                    h3 {
                        font-size: 1.125rem;
                    }
                }
            }

            .right-content.signup-form-content {
                .ja-form-wrapper {
                    padding: 0.875rem;
                    border-radius: 0.375rem;

                    .jf-form {
                        .otp-section {
                            .otp-input {
                                width: 2rem;
                                height: 2rem;
                                font-size: 0.875rem;
                                border-radius: 0.375rem;
                            }

                            .otp-inputs-wrapper {
                                gap: 0.375rem;
                            }
                        }
                    }
                }
            }
        }
    }

}

.floatingRocketHealthcheck {
    position: fixed;
    bottom: 90px;
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 32px;
    background: #F4EBFF;
    border: 1px solid;
    border-image: linear-gradient(227.44deg, #FDFBFF 2.7%, #E7D3FF 90.32%);

    box-shadow: 2px 4px 4px 0px rgba(129, 127, 127, 0.24);


    .rocket {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 12px;
        border-radius: 32px;
        display: flex;
        align-items: center;
        justify-content: center;

        .heart-beating-icon {
            position: absolute;
            top: -4px;
            right: -4px;
            width: 28px;
            height: 28px;
        }
    }
}

.resume-templates .templateSlider {
    .slick-dots li.slick-active button {
        height: 12px;
        width: 12px;
        margin: auto;
    }

    .slick-dots li.slick-active button:before {
        background: transparent;
    }

    .slick-dots {
        bottom: -50px;
    }

    .slick-list {
        -webkit-transition: all 0.35s ease 0s;
        transition: all 0.35s ease 0s;
    }

    .slick-dots li button {
        width: 22px;
        height: 22px;
    }

    .slick-dots li button:before {
        opacity: 1;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 4px;
        height: 4px;
        background: var(--light-gray-D9);
        border-radius: 20px;
        margin: auto;
        -webkit-transition: all 0.35s ease 0s;
        transition: all 0.35s ease 0s;
    }

    .slick-dots li.slick-active button {
        height: 12px;
        width: 12px;
        margin: auto;
    }

    .slick-dots li.slick-active button:before {
        background: transparent;
    }
}

.resume-templates .templateSlider .slick-list .slick-track {
    display: flex;
}

.resume-templates .templateSlider .slick-track .slick-slide {
    height: inherit;
    background: transparent;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 16px;
    opacity: 0.5;
    transition: opacity 0.2s ease;

    >div {
        width: auto;
    }

    &.slick-active {
        opacity: 1;
    }
}

.resume-templates .templateSlider {
    width: 100vw;

    .template {
        &:has(.viewed-at) {
            scale: 1 !important;
        }
    }
}

.resume-templates .templateSlider .slick-dots {
    bottom: -30px;
}

.resume-templates .templateSlider .slick-dots li {
    width: auto;
    height: auto;
}

.resume-templates .templateSlider .slick-dots li.slick-active button {
    background: var(--primary-dark);
    opacity: 1;
}

.resume-templates .templateSlider .slick-dots li button {
    background: var(--light-gray-D9);
    opacity: 1;
    height: 10px;
    width: 10px;
    margin: auto;
    padding: 0 !important;
}

.resume-templates .templateSlider .slick-dots li button:before {
    display: none;
}

.resumeReelsSliderMain {
    background: #fff;
    margin-inline: -64px;
    padding: 12px 64px 48px;



    .resumeReelsSlider {
        max-width: 768px;
        margin-inline: auto;

        h2 {
            text-align: center;
            font-weight: 700;
            font-size: 22px;
            line-height: 27px;
            vertical-align: middle;
            text-transform: capitalize;
        }

        .sliderItemMain {
            cursor: pointer;
            filter: contrast(0.9);
            transition: scale 0.35s ease;
            position: relative;

            img {
                border-radius: 18px;
                transition: box-shadow .1s ease;
            }

            &:has(video) {
                border-radius: 16px;

                video {
                    max-height: calc(100vh - 80px);
                    border-radius: 16px;
                }

                &:hover {
                    filter: none;
                    scale: 1;
                }
            }

            .thumbnailPlayIcon {
                position: absolute;
                bottom: 32%;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 34px;
            }

            &:hover {
                filter: none;
                scale: 1.01;

                .thumbnailPlayIcon .iconBg {
                    fill: #FFFC4F;
                }

                img {
                    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
                }
            }
        }

        .slick-dots {
            bottom: -32px;

            li {
                width: auto;
                height: auto;
            }

            li.slick-active button {
                background: var(--primary-dark);
                opacity: 1;
            }

            li button {
                background: var(--light-gray-D9);
                opacity: 1;
                height: 10px;
                width: 10px;
                margin: auto;
            }

            li button:before {
                display: none;
            }

        }
    }

    @media screen and (max-width:575px) {
        padding-inline: 48px;

        .resumeReelsSlider {
            h2 {
                padding-inline: 8px;
                font-size: 18px;
                line-height: 22px;
            }
        }
    }
}

.ReactModal__Overlay:has(.commanModal.reelsModal) {
    background: rgba(0, 0, 0, 0.6) !important;
}

.commanModal.reelsModal {
    background: #231F20 !important;
    border-radius: 8px !important;
    max-width: calc(100% - 32px);
    width: 480px;

    @media screen and (max-width:767px) {
        width: 100%;
        max-width: unset;
    }

    .modal-content {
        position: relative;
        padding: 32px 48px;
        border-radius: 16px;
        background: transparent;

        @media screen and (max-width:767px) {
            padding: 32px 16px;
        }

        .modalCloseBtn {
            position: absolute;
            top: -16px;
            right: -16px;
            cursor: pointer;

            svg * {
                stroke: #fff;
            }
        }

        .slick-arrow {
            background: #5F5F5F;
            width: 56px;
            height: 56px;
            border-radius: 28px;

            &.slick-prev {
                left: -80px !important;
            }

            &.slick-next {
                right: -80px !important;
            }

            @media screen and (max-width:767px) {
                width: 40px !important;
                height: 40px !important;
                border-radius: 20px !important;

                &.slick-prev {
                    left: -24px !important;
                }

                &.slick-next {
                    right: -24px !important;
                }
            }

            svg {
                width: 100%;
                height: 100%;

                * {
                    stroke: #fff;
                }

                path {
                    stroke-width: 1.5;
                }
            }
        }

        .sliderItemMain {
            padding: 0;
            align-items: center;
            border-radius: 16px;
            position: relative;

            video {
                border-radius: 16px;
                min-height: 640px;
                max-height: calc(100vh - 112px);

                @media screen and (max-width:767px) {
                    min-height: 480px;
                }

                @media screen and (max-height: 720px) {
                    min-height: 440px;
                }

                @media screen and (max-height: 576px) {
                    min-height: 40vh;
                }
            }

            .reelOverlay {
                position: absolute;
                top: 0;
                left: 0;
                padding: 8px 16px;
                width: 100%;
                display: flex;
                justify-content: space-between;

                button {
                    background: rgba(0, 0, 0, 0.4);
                    width: 32px;
                    height: 32px;
                    border-radius: 16px;
                    padding: 4px;
                    border: none;
                    outline: none;

                    svg {
                        width: 24px;
                        height: 24px;
                    }
                }
            }

            .endOverlay {
                position: absolute;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                width: 100%;
                display: flex;
                justify-content: center;

                .primaryBtn {
                    box-shadow: 0px 12px 64px 32px rgba(0, 0, 0, 0.6);
                    white-space: nowrap;
                    font-size: 14px;
                    line-height: 17px;
                }
            }
        }
    }
}

.floatingReel {
    position: fixed;
    bottom: 24px;
    right: 16px;
    width: 120px;
    z-index: 999;
    border-radius: 16px;
    background-color: white;
    cursor: pointer;

    @media screen and (max-width:767px) {
        bottom: 72px;
        right: 8px;
    }

    .reelContainer {
        position: relative;

        video {
            border-radius: 8px;
            transition: mix-blend-mode 0.35s ease;
        }

        .reelOverlay {
            position: absolute;
            top: 0;
            left: 0;
            padding: 8px;
            width: 100%;
            display: flex;
            justify-content: space-between;

            button {
                background: rgba(0, 0, 0, 0.4);
                width: 24px;
                height: 24px;
                border-radius: 12px;
                padding: 4px;
                border: none;
                outline: none;

                svg {
                    width: 16px;
                    height: 16px;
                }
            }
        }



        &.reelHasEnded {
            video {
                mix-blend-mode: luminosity;
            }

            .reelOverlay button {
                background: rgba(165, 155, 155, 0.8);
            }
        }

        .endOverlay {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;

            .primaryBtn {
                box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.6);
                white-space: normal;
                font-size: 12px;
                line-height: 15px;
                max-width: calc(100% - 16px);
                border-radius: 16px;
                padding: 6px 12px;
            }
        }
    }
}

.floatingReel.enlarged {
    background: #231F20 !important;
    padding: 12px;
    width: 360px;
    box-shadow: 0 12px 12px 1px rgba(0, 0, 0, 0.4854);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 64px);
    cursor: default;

    @media screen and (max-width:767px) {
        bottom: 24px;
        right: 8px;
    }

    @media screen and (max-width:480px) {
        left: 50%;
        right: unset;
        transform: translateX(-50%);
    }

    .reelContainer {
        .endOverlay {
            .primaryBtn {
                font-size: 14px;
                line-height: 17px;
                padding: 12px 24px;
            }
        }

        .reelOverlay {
            button {
                width: 32px;
                height: 32px;

                svg {
                    width: 24px;
                    height: 24px;
                }
            }
        }

        .pipOverlay {
            position: absolute;
            bottom: 8px;
            right: 8px;

            button {
                background: rgba(0, 0, 0, 0.4);
                width: 32px;
                height: 32px;
                border-radius: 12px;
                padding: 4px;
                border: none;
                outline: none;

                svg {
                    width: 24px;
                    height: 24px;
                }
            }
        }
    }
}

.resume-reels-reportpage {
    width: 100%;
    max-width: 100%;

    .resumeReelsSliderMain {
        margin-inline: auto;
        padding: 0;
        background: transparent;
        max-width: 500px;
        margin: -16px 0 -16px -16px;

        .resumeReelsSlider .sliderItemMain img {
            border-radius: 12px;
        }

        @media screen and (max-width:1302px) {
            max-width: 400px;

            .resumeReelsSlider .sliderItemMain img {
                border-radius: 8px;
            }

        }
    }

    .gradientBtn {
        background: linear-gradient(90deg, #FFFFFF -199.41%, #000000 -139.52%, #FF2775 -78.78%, #E336FF -9.38%, #3B37FE 50.14%, #339AFA 141.74%, #36FF6E 231.93%, #A3FC32 333.69%, #E0FF2F 420.7%, #FFDF35 494.44%, #F59B68 578.76%, #FF6832 664.04%, #F23535 758.88%);
        color: var(--white);
        margin-bottom: 24px;
        font-size: 14px;
        line-height: 17px;
    }

    @media screen and (max-width:767px) {
        display: none;
    }
}

.tailor-dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background: #F0F0F0;
    padding: 2.625rem 5.25rem;
    height: fit-content;
    min-height: 100%;

    .td-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;

        .td-left {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;

            span {
                padding: 0.375rem 0.5rem;
                font-size: 0.6875rem;
                font-weight: 500;
                line-height: 100%;
                border-radius: 24px;
                background: linear-gradient(91.02deg, #C9F962 0.87%, #CFFAFF 131.82%);
                width: fit-content;
            }

            h2 {
                font-size: 1.75rem;
                line-height: 100%;
                font-weight: 700;
                letter-spacing: -3.5%;
            }

            p {
                font-size: 0.875rem;
                line-height: 100%;
                font-weight: 400;
                letter-spacing: -3.5%;
                margin-bottom: 0;
            }
        }

        .td-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.5rem;

            .total-resumes {
                display: flex;
                align-items: center;
                gap: 2.5rem;
                padding: 0.75rem 1.25rem;
                border-radius: 48px;
                /* background: #FBFBFB; */
                align-self: flex-end;
                width: fit-content;

                span {
                    font-size: 0.875rem;
                    line-height: 156%;
                    letter-spacing: -3.5%;
                    font-weight: 400;

                    b {
                        font-size: 1.5rem;
                    }
                }
            }

            .resume-actions {
                display: flex;
                gap: 1rem;

                .add-resume-btn {
                    font-size: 0.875rem;
                    font-weight: 700;
                    line-height: 100%;
                    align-self: center;
                    width: fit-content;
                    text-transform: uppercase;
                }

                .create-tr-btn {
                    background: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
                    color: var(--white);
                    font-size: 0.875rem;
                    font-weight: 700;
                    line-height: 100%;
                    text-transform: uppercase;
                    border: 1px solid;
                    border-image-source: linear-gradient(135deg, #9810FA 0%, #155DFC 50%, #4F39F6 100%);
                    border-radius: 24px;
                    padding: 0.75rem 1.5rem;
                }
            }

            .td-file-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 2.3125rem;
                width: 2.3125rem;
                border-radius: 50%;
                background: #E7E9FF;
            }

        }
    }

    .td-resume-list-container {
        background: white;
        border-radius: 16px;
        border: 1px solid var(--inactive-text-box, #BABABA33);
        padding: 1.5rem;

        .td-resume-table-header {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            margin-bottom: 4px;

            .tdr-col {
                font-size: 0.875rem;
                font-weight: 700;
                line-height: 100%;
                letter-spacing: -3.5%;
                color: #4B4B4B;
                text-transform: capitalize;
                flex: 1 1 0;
                min-width: 0;

                &.tailored-resume-col,
                &.resume-col {
                    max-width: 34.375rem;
                }

                &.action-col {
                    flex: 0 0 2.625rem !important;
                }

                &.last-modified-at-col {
                    flex: 0 0 10rem !important;
                }
            }
        }

        .td-resume-list-row {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            border-bottom: 1px solid #DEE1E7;

            .tdr-col {
                padding: 1.25rem 0;
                font-size: 0.75rem;
                font-weight: 500;
                line-height: 100%;
                letter-spacing: -3.5%;
                flex: 1 1 0;
                min-width: 0;

                &.resume-col {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 0.375rem;
                    max-width: 34.375rem;
                    width: 100%;

                    .resume-name {
                        font-size: 0.75rem;
                        font-weight: 500;
                        line-height: 100%;
                        letter-spacing: -3.5%;
                        text-transform: capitalize;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 100%;

                        &.base-resume-view {
                            cursor: pointer;
                            color: #007BB6;
                            text-decoration: underline;
                        }
                    }

                    .resume-type {
                        font-size: 0.625rem;
                        font-weight: 500;
                        line-height: 100%;
                        color: #6B6B6B;
                        max-width: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .primary-badge {
                        font-size: 0.625rem;
                        font-weight: 700;
                        letter-spacing: 0%;
                        color: #088F5D;
                    }
                }

                &.tailored-resume-col {
                    display: flex;
                    flex-direction: column;
                    gap: 0.375rem;
                    max-width: calc(100% - 2.5rem);
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 100%;
                    width: 100%;

                    .tr-info {
                        font-size: 0.625rem;
                        font-weight: 500;
                        line-height: 100%;
                        color: #6B6B6B;
                        max-width: 100%;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;

                        &.link {
                            color: #007BB6;
                            text-decoration: underline;
                            cursor: pointer;
                        }
                    }
                }

                &.last-modified-at-col {
                    color: #6B6B6B99;
                    flex: 0 0 10rem !important;
                }

                &.action-col {
                    display: flex;
                    justify-content: center;
                    flex: 0 0 2.625rem !important;
                    position: relative;

                    .action-icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 2rem;
                        width: 2rem;
                        background: #F0F0F0;
                        border-radius: 50%;
                        cursor: pointer;
                    }

                    .action-dropdown {
                        display: flex;
                        flex-direction: column;
                        position: absolute;
                        top: 55px;
                        right: -8px;
                        background: var(--white);
                        border: 1px solid #6B6B6B99;
                        box-shadow: 2px 4px 4px 0px #817F7F3D;
                        padding: 12px 8px;
                        border-radius: 12px;
                        min-width: 244px;
                        align-items: flex-end;
                        z-index: 1;

                        .ad-item {
                            font-size: 0.875rem;
                            font-weight: 500;
                            line-height: 100%;
                            letter-spacing: -3.5%;
                            padding: 0.5rem;
                            cursor: pointer;
                            width: 100%;

                            &:hover {
                                background: #e0e1e052 !important;
                                border-radius: 4px;
                            }

                            &.action-item {
                                display: flex;
                                justify-content: space-between;
                                align-items: flex-start;
                                width: 100%;

                                .set-primary-icon {
                                    position: relative;
                                    width: 2.25rem;
                                    height: 1.25rem;
                                    border-radius: 99px;
                                    background: #DFE2E1;
                                    box-shadow:
                                        0px 2px 4px 0px #0000000A,
                                        0px 1px 0px 0px #FFFFFF,
                                        0px 0px 8px 0px #00000005 inset,
                                        0px 0px 0px 0.5px #0000000F inset,
                                        0px 2px 4px 0px #0000000A inset,
                                        0px 1px 1px 0px #0000000A inset;

                                    &::before {
                                        content: "";
                                        display: block;
                                        width: 1rem;
                                        height: 1rem;
                                        position: absolute;
                                        top: 0.125rem;
                                        left: 0.125rem;
                                        border-radius: 99px;
                                        opacity: 1;
                                        background: linear-gradient(0deg, #FFFFFF, #FFFFFF), linear-gradient(180deg, rgba(0, 0, 0, 0) 35.42%, rgba(0, 0, 0, 0.08) 100%);
                                    }
                                }

                                .item-text p {
                                    font-size: 0.75rem;
                                    font-weight: 400;
                                    color: var(--text-gray);
                                    margin-bottom: 0;
                                    line-height: 100%;
                                    text-align: end;
                                }
                            }
                        }
                    }
                }

                &.txt-center {
                    text-align: center;
                }
            }
        }

        .td-resume-list-row:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
    }

    .need-help-card {
        padding: 1rem 1.5rem;
        width: 100%;
        margin-top: auto;
    }

    .plan-expired-banner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding: 0.75rem 1.5rem;
        background: #FFE4E1;
        border-radius: 0.5rem;
        transition: all 0.3s ease;

        .b-message {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            span {
                font-size: 0.875rem;
                line-height: 140%;
                font-weight: 600;
                color: #935D1B;
            }
        }

        .renew-plan-btn {
            background: black;
            color: white;
            padding: 0.6875rem 1.5rem;
            font-size: 0.75rem;
            line-height: 100%;
        }

        .close-btn {
            position: absolute;
            top: -0.25rem;
            right: -0.25rem;
            background: #F9F9F9;
            border-radius: 50%;
            border: 1px solid #BABABA33;
            height: 1.5rem;
            width: 1.5rem;
        }
    }

    @media screen and (max-width:1024px) {
        padding: 2.625rem 3rem;

        .td-resume-list-container .td-resume-table-header,
        .td-resume-list-container .td-resume-list-row {
            gap: 1rem !important;
        }
    }
}

.pagination-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 0 0 0;
    color: #6B6B6B;
}

.pagination-container p {
    color: inherit;
    font-size: 0.875rem;
    line-height: 17px;
    margin-bottom: 0;
}

.pagination-container .pagination {
    margin: 0;
    padding: 0;
    list-style-type: none;
    border-radius: 0;
    gap: 16px;
    flex-wrap: wrap;
    display: flex;
    padding: 0 16px;
}

.pagination-container .pagination li a {
    display: flex;
    /* width: 40px; */
    width: auto;
    min-width: 2rem;
    height: 2rem;
    padding: 0 6px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    color: #000;
    text-align: center;
    font-weight: 600;
}

.pagination-container .pagination li:hover a {
    color: #00000080;
    cursor: pointer;
}

.pagination-container .pagination li.active a {
    background: #8787871f;
}

.pagination-container .pagination .previous,
.pagination-container .pagination .next {
    cursor: pointer;
}

.pagination-container .pagination .previous.disabled a,
.pagination-container .pagination .next.disabled a {
    opacity: 0.3;
    cursor: not-allowed !important;
}

.pagination-container .pagination .previous-label,
.pagination-container .pagination .next-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.pagination-container .pagination .previous-label svg {
    width: 1.25rem;
    transform: rotate(90deg);
}

.pagination-container .pagination .next-label svg {
    width: 1.25rem;
    transform: rotate(-90deg);
}

.pagination-container .pagination li.break a {
    border: none;
    background: none;
    width: auto;
    padding: 0;
    min-width: inherit;
    color: #000000;
    pointer-events: none;
}

.contentDiv .jobListSection:has(.all-jobs-tailor-resume-banner) .list {
    height: calc(100% - 10.9375rem) !important;
}

.all-jobs-tailor-resume-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(118.92deg, #EFEEFF 26.18%, rgba(255, 234, 222, 0.94) 96.85%);
    position: relative;

    @media screen and (max-width:767px) {
        position: sticky;
        top: 0;
        margin-inline: -16px;
        z-index: 11;
    }

    .tr-content {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;

        h2 {
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 100%;
            text-transform: capitalize;
        }

        span {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 100%;
        }
    }

    .primaryBtn {
        font-size: 0.875rem;
        line-height: 100%;
        background: var(--primary-black);
        color: var(--white);
    }

    .closeBtn {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        height: 1.5rem;
        width: 1.5rem;
        background: #F9F9F9;
        border: none;
        border-radius: 50%;

        svg {
            height: 1rem;
            width: 1rem;
        }
    }
}