:root {
    --primary-background: #FFF9F5;
    --primary-color: #232323;
    --secondary-color: #616888;
    --white-bg: #fff;
    /*  --gradient-one: linear-gradient(90deg, #EFA94A 0%, #FF5E63 100%);*/
    --btn-primary-color: #223A74;
    --blue-primary-color: #223A74;
    --orange-primary-color: #FF7E36;
    --stepper-blue: #29ABE2;
    --stepper-blue-dark: #1B8FCB;
    --stepper-line-bg: #E3E8EE;
    --stepper-inactive-text: #9AA5B1;
    --stepper-circle-size: 56px;
    --loginhead: #30358d;
    --loginbtn: #131675;
    --inputfield: #f0f6fd;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

img {
    max-width: 100%;
    display: block;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

body {
    /*font-family: "DM Sans", sans-serif;*/
    font-family: "Urbanist", sans-serif;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

footer {
    margin-top: auto;
}

.primaryBg {
    background-color: var(--primary-background);
}


.Login-container {
    height: calc( 100vh - 54px );
}

.header-sections {
    height: 70px !important;
}

.main {
    min-height: calc(100vh - 124px);
}



/* OTP screen code START */


.OTPMain {
    background-color: white;
    padding: 64px 154px;
    border-radius: 30px;
    width: 700px;
    border: 1.5px solid #F0A94B;
    margin-top: 30px;
}

.otp-input {
    width: 85px;
    height: 85px;
    background-color: #F6F6F6;
    border-radius: 10px;
    border: none;
    font-size: 38px;
    color: var(--btn-primary-color);
    font-weight: 600;
    text-align: center;
}

.ErrorOTP .otp-input {
    background-color: #FEEDEC;
    border: 1px solid #F14437;
}

.OTPBoxContainer {
    margin-top: 32px;
}

.OTP-heading {
    color: var(--primary-color);
    font-size: 38px;
    font-weight: 600;
    line-height: normal;
    margin-top: 24px;
    text-align: center;
}

.OTP-description {
    color: var(--secondary-color);
    font-size: 16px;
    font-weight: 400;
    margin-top: 13px;
    line-height: normal;
    text-align: center;
}

.OTP-row {
    margin-top: 11px;
}

.OTPerrorMessage {
    font-size: 14px;
    color: rgba(255, 48, 48, 0.80);
    font-weight: 400;
    line-height: normal;
}

.OTP-timer {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-align: right;
}

.OTP-timer-left {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
    text-align: left;
}

.continue-btn-final {
    width: 198px;
    height: 56px;
    border-radius: 60px;
    opacity: 0px;
    background-color: #223A74;
    color: #fff;
    font-family: Roboto;
    font-size: 22px;
    font-weight: 500;
    line-height: 25.78px;
}

.querybtn, .OTP-submit, .loginbutton {
    border-radius: 10px;
    height: 60px !important;
    min-width: 220px !important;
    background-color: #00AEEF;
    color: white;
    border: none !important;
    justify-content: center;
    font-size: 18px;
    padding: 10px 25px;
}

.loginbutton {
    width: 220px !important;
}

.verifybutn {
    background-color: #00AEEF !important;
}


/*

    .OTP-submit.active {
        background-color: var(--btn-primary-color);
    }

.OTP-resend {
    font-size: 16px;
    color: var(--secondary-color);
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin-top: 58px;
}

    .OTP-resend span {
        color: #223A74;
    }


*/



.OTP-submit.active {
    cursor: pointer;
    opacity: 1;
}

.OTP-submit:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}



.errorIconOTP {
    width: 14px;
    height: 14px;
    object-fit: contain;
}



.timerContainer {
    margin-top: 10px;
}

.MainOTPContainer {
    position: relative;
}

.watermark img {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 400px;
    height: 400px;
    object-fit: contain;
}

/* OTP screen code END */


/* LOGIN screen cosw START */

.Login-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: white;
}

.Login-left-column {
    overflow: hidden;
}

.Login-responsive-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.Login-right-column {
    padding: 50px 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.Login-form {
    display: flex;
    flex-direction: column;
}



    .Login-form .loginLabel {
        font-size: 20px;
        color: var(--primary-color);
        font-weight: 500;
        line-height: normal;
        margin-bottom: 14px;
        margin-top: 32px;
    }

    .Login-form input {
        padding: 20px;
        border-radius: 8px;
        border: 1px solid #D0D0DD;
    }

        .Login-form input:active {
            border: 1px solid #D0D0DD;
        }

        .Login-form input:focus {
            border: 1px solid #D0D0DD;
        }

        .Login-form input:focus-visible {
            border: 1px solid #D0D0DD;
            outline: 1px solid #D0D0DD;
        }

        .login-form input::placeholder {
            color: #A09F9F;
            font-size: 18px;
            font-weight: 400;
        }

.Login-password-container {
    position: relative;
    display: flex;
    align-items: center;
}

    .Login-password-container input {
        flex-grow: 1;
        padding-right: 40px;
    }

.Login-toggle-password {
    position: absolute;
    right: 10px;
    width: 24px;
    height: 24px;
    cursor: pointer;
}



.LoginNav {
    position: absolute;
    top: 30px;
    /*left: 0;*/
    width: 100%;
}

.loginHeading {
    font-size: 38px;
    font-weight: 600;
    line-height: normal;
    color: var(--primary-color);
    margin-top: 70px;
}

.logindesc {
    color: var(--secondary-color);
    font-size: 24px;
    font-weight: 500;
    margin-top: 12px;
}

.resetpassmsg {
    text-wrap: auto;
}

.resetmsgicon{
    margin-bottom:24px;
}

.rememberMe {
    color: var(--btn-primary-color);
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
}

.forgotPass {
    font-size: 16px;
    color: rgba(45, 45, 45, 0.80);
    font-weight: 500;
    line-height: normal;
}

.passContainer {
    margin-top: 12px;
}

.Logindivider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 44px 0;
}

    .Logindivider .line {
        flex-grow: 1;
        border: none;
        height: 3px;
        background-color: #CCD6E8;
        margin: 0 15px;
    }

.socialLogin {
    padding: 14px 26px;
    border-radius: 8px;
    border: 1px solid #dddfea;
    background: #FAFCFF;
}

    .socialLogin img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

    .socialLogin p {
        color: rgba(45, 45, 45, 0.80);
        font-size: 18px;
        font-weight: 400;
        line-height: normal;
        text-align: center;
    }

.signupLink {
    margin-top: 54px;
}

    .signupLink p {
        color: rgba(45, 45, 45, 0.80);
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-align: center;
    }

        .signupLink p a {
            background: var(--cta-Gradient, linear-gradient(90deg, #EFA94A 0%, #FF5E63 100%));
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            text-decoration-line: underline;
        }

.mainOption {
    font-size: 18px;
    font-weight: 600;
    border: none;
    outline: none;
    margin-top: 24px;
    background-color: transparent;
}

.disableResend {
    color: #A09F9F !important;
    cursor: not-allowed;
}

/* LOGIN screen code END */

/* Workman-comensation code START */

.headerNotice {
    width: 100%;
    background-color: var(--blue-primary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
}

    .headerNotice p {
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        line-height: 150%;
    }

.navPad {
    margin-top: 26px;
    margin-bottom: 26px;
}

.LanguageOption {
    font-size: 18px;
    font-weight: 600;
    border: none;
    outline: none;
    background-color: transparent;
}

.headerContact {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .headerContact img {
        object-fit: contain;
    }

    .headerContact p {
        color: var(--primary-color);
        font-size: 20px;
        font-weight: 700;
        line-height: 150%;
    }

.workmenSideBar {
}



.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
}

.step-text {
    font-size: 16px;
}

.active .step-number {
    background-color: #fff;
    border: 2px solid var(--orange-primary-color);
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 500;
}

.completed .step-number {
    background-color: #2ecc71;
    color: white;
}

.disabled .step-number {
    background: #CCC;
    color: #FBFCFF;
    font-size: 20px;
    font-weight: 500;
}

.disabled .step-text {
    color: #95a5a6;
}

.step-line {
    position: absolute;
    left: 18px;
    top: 40px;
    bottom: -20px;
    width: 3px;
    background-color: #ccc;
    transition: background-color 0.3s ease;
}

.completed .step-line {
    background-color: #2ecc71;
}

.content {
}

.step-content {
    display: none;
}

    .step-content.active {
        display: block;
    }

/* marine cargo START */

.marine-custom-mb1 {
    margin-bottom: 30px;
}


/* marine cargo END */


/* product pages code START */

.workmen-compensation-sec {
    background: url('../images/product-pages/hero-bg.svg') !important;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

.viewMoreBtn2 {
    padding: 10px 40px;
    border-radius: 32px;
    background: var(--Color, #223A74);
    gap: 10px;
}

    .viewMoreBtn2 p {
        color: #FFF;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

.blogViewMorespg {
    margin-top: 64px;
}

.social-network-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.numberPlaceCenter {
    border-radius: 8px;
    background: var(--Primary-100, #DEEBFB);
    height: 80px;
    max-width: 70%;
    display: flex;
    gap: 20px;
    padding: 8px 12px;
    width: 100%;
    margin-bottom: 90px;
}

.carPlace {
    width: 100%;
    max-width: 70%;
}

.carImg {
    transition: transform 0.5s ease-out;
    width: 90px;
    height: 37px;
    object-fit: contain;
}

.plateinput {
    color: #000;
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.platediv {
    background-color: #fff;
    border-radius: 8px;
    width: 33%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.plateNumber {
    text-align: justify;
}

.plateCountry {
    text-align: center;
    width: 100%;
    display: flex;
    height: 100%;
    object-fit: cover;
}

.label-enable-text {
    font-size: 20px;
    font-weight: 500;
    line-height: 23.44px;
    text-align: left;
    margin-bottom: 1.2rem;
    margin-top: 0.3rem;
}

.col-disable-field {
    opacity: 0.5;
    pointer-events: none;
}

.motor-insu-sidebar {
    background: linear-gradient(166deg, #F2F8FF 2.27%, #EFF4FF 98.33%) !important;
}

.motor-in-body {
    background-image: linear-gradient(to top right, #FDF5EB, #F2F6FF) !important;
}


/* product pages code END */

/* Wallet page code START */

.walletHeading h1 {
    margin-top: 100px;
    margin-bottom: 26px;
    font-size: 60px;
    font-style: normal;
    font-weight: 500;
    line-height: 60px;
    background: linear-gradient(97deg, #FF9F35 32.72%, #E14956 79.33%, #A53FCE 105.09%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wallet-insurance-option-container {
    padding: 24px;
    border-radius: 20px;
    border: 2px solid #DAF1FF;
    background: #FFF;
}

.wallet-insurance-list-heading h2 {
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    background: var(--CTA, linear-gradient(180deg, #223A74 0%, #406DDA 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 26px;
}

.wallet-insurance-list-heading p {
    color: var(--Font-sub-heading, #232323);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 13px;
}

.wallet-insurance-list-heading {
    align-items: baseline;
}

.swiper {
    width: 100%;
    height: 100%;
}

.insurance-swiper {
    padding-bottom: 60px;
}

.wallet-insurance-option-card {
    border-radius: 12.029px;
    border: 1.5px solid var(--cta-Gradient, #EFA94A);
    background: var(--Orange-50, #FFF5ED);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
    padding: 10px 12px;
}

    .wallet-insurance-option-card img {
        width: 100%;
    }

    .wallet-insurance-option-card h2 {
        overflow: hidden;
        color: var(--Dark, #080808);
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 22.053px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 26px;
        margin-top: 16px;
    }

    .wallet-insurance-option-card p {
        color: var(--Dark-75, rgba(8, 8, 8, 0.75));
        font-size: 14.034px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        margin-bottom: 26px;
    }

    .wallet-insurance-option-card button {
        border-radius: 10.024px;
        background: var(--Dark, #080808);
        color: var(--White, #FFF);
        text-align: center;
        font-size: 14.034px;
        font-style: normal;
        font-weight: 500;
        line-height: 20.048px;
        text-transform: capitalize;
        height: 100%;
        padding: 10px 16px;
    }

.custom-container {
    padding: 0px 70px;
}

.courseRating {
    position: relative;
}

    .courseRating img {
        width: 40px;
        height: 40px;
        object-fit: contain;
    }

    .courseRating p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #000;
        text-align: center;
        font-size: 16.039px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: capitalize;
    }

.wallet-insurance-col-1 {
    position: relative;
}

.insurance-option-next {
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 64px;
    background: #000;
    position: absolute;
    bottom: 0 !important;
    right: 0 !important;
    top: auto;
    left: auto;
}

    .insurance-option-next::after {
        font-size: 16px;
    }


.insurance-option-pre {
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 64px;
    background: #000;
    position: absolute;
    bottom: 0 !important;
    right: 60px !important;
    top: auto;
    left: auto;
}

    .insurance-option-pre::after {
        font-size: 16px;
    }

.wallet-insurance-details {
    border-radius: 20px;
    border: 1.5px solid var(--cta-Gradient, #EFA94A);
    background: #FFF;
    box-shadow: 2px 0px 12px 0px rgba(0, 0, 0, 0.10);
    padding: 40px;
    margin-top: 50px;
}

.companyName {
    display: flex;
    align-items: center;
    gap: 21px;
}

    .companyName img {
        width: 100px;
        object-fit: contain;
    }

    .companyName h2 {
        color: #000;
        font-size: 24px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

.wallet-wc-name-info h2 {
    font-size: 30px;
    font-style: normal;
    font-weight: 500;
    line-height: 60px;
    background: var(--cta-Gradient, linear-gradient(90deg, #EFA94A 0%, #FF5E63 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.wallet-wc-name-info p {
    color: var(--Font-sub-heading, #232323);
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.wallet-wc-status p {
    color: #FFF;
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 5px 10px;
    border-radius: 5.455px;
    border: 1.364px solid rgba(0, 0, 0, 0.10);
    background: var(--Green, #388E3C);
}

.wallet-wc-details {
    margin-top: 64px;
    margin-bottom: 70px;
}

.wallet-insurance-details-table-header h2 {
    color: var(--Color, #223A74);
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    padding-bottom: 10px;
    border-bottom: 1px solid #d9d9d9;
    margin-bottom: 30px;
    /* 127.273% */
}

.wallet-insurance-detail-table-list {
    margin-bottom: 20px;
}



    .wallet-insurance-detail-table-list h3 {
        color: var(--Color, #223A74);
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
    }

    .wallet-insurance-detail-table-list p {
        color: var(--grey-logo, #A09F9F);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 28px;
        /* 155.556% */
    }

.wallet-expiring-container {
    border-radius: 10px;
    border: 0.5px solid #2F71EA;
    background: #FFF;
}

.wallet-expiring-heading h2 {
    padding: 24px;
    color: #2D2D2D;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-bottom: 2px dashed #9BC8F5;
}

.timeInput {
    color: var(--Orange-600, #EF4207);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.timeHeading {
    color: var(--grey-logo, #A09F9F);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.expiring-heading {
    color: #223A74;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
    width: 50%;
    /* 140% */
}

.wallet-expiring-list-container {
    padding: 0px 24px;
}

.wallet-expiring-list {
    border-radius: 10px;
    border: 1px solid #DDEFF9;
    background: var(--Primary-50, #F0F6FE);
    padding: 16px;
    margin-top: 24px;
}

.expiring-date-container h4 {
    color: var(--Color, #223A74);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 175% */
}

.expiring-date-container p {
    color: var(--grey-logo, #A09F9F);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    /* 175% */
}

.expiring-date-container {
    margin-top: 26px;
}

/* Wallet page code END */

/* Blog page code START */

.blogHeader {
    padding: 30px 0px;
    background: var(--cta-Gradient, linear-gradient(90deg, #EFA94A 0%, #FF5E63 100%));
}


    .blogHeader h1 {
        color: #FFF;
        font-size: 46px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }

.blog-searchBar {
    width: 100%;
    position: relative;
}

    .blog-searchBar input {
        padding: 20px 20px 20px 50px;
        width: 100%;
        border-radius: 10px;
        border: 1px solid #000;
        color: var(--grey-logo, #A09F9F);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

.searchIcon {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 20px;
    height: 20px;
}

.blog-pop-container {
    margin-top: 100px;
}


.category-list-container {
    border-radius: 5px;
    border: 1px solid var(--grey-logo, #A09F9F);
    padding: 40px;
    width: 100%;
    margin-top: 20px;
}

    .category-list-container .headings h2 {
        color: var(--Font-sub-heading, #232323);
        font-size: 28px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 34px;
    }

    .category-list-container .headings h3 {
        color: var(--Font-sub-heading, #232323);
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(45, 45, 45, 0.50);
    }

    .category-list-container .list ul {
        margin-bottom: 0px;
        padding-left: 0px;
        list-style: none;
    }

        .category-list-container .list ul li {
            color: var(--grey-logo, #A09F9F);
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            padding: 20px 0px;
            border-bottom: 1px solid rgba(45, 45, 45, 0.50);
        }

.blogcard {
    margin-bottom: 20px;
}

    .blogcard img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        aspect-ratio: 3/2;
        border-radius: 6px;
    }

    .blogcard h2 {
        color: var(--Font-sub-heading, #232323);
        margin-top: 16px;
        font-size: 22px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

    .blogcard p {
        color: var(--Font-sub-heading, #232323);
        margin-top: 12px;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

.pagination {
    display: flex;
    gap: 40px;
    align-items: center;
    margin-bottom: 120px;
    margin-top: 64px;
}

.page-number {
    border-radius: 3.75px;
    border: 0.75px solid var(--grey-logo, #A09F9F);
    color: #2D2D2D;
    font-size: 21px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding: 17px;
    text-decoration: none;
}

.page-pn {
    border-radius: 3.75px;
    border: 0.75px solid var(--grey-logo, #A09F9F);
    padding: 23px;
}

.page-number.active {
    background: var(--primary, #FF7E36);
    color: #fff;
}

.back-option {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

    .back-option p {
        color: #000;
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

.mobileBlogDisplay {
    display: none;
}

.blog-detail-heading .Headingtag {
    padding: 10px 30px;
    color: var(--Font-sub-heading, #232323);
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    border-radius: 36px;
    border: 1px solid var(--primary, #FF7E36);
    margin-bottom: 32px;
}

.blog-detail-heading {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

    .blog-detail-heading h1 {
        color: var(--Font-sub-heading, #232323);
        text-align: center;
        font-size: 50px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        width: 70%;
        margin-bottom: 32px;
    }

.blog-detail-date {
    display: flex;
    gap: 20px;
}

    .blog-detail-date p {
        color: var(--grey-logo, #A09F9F);
        text-align: center;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

.blog-detail-heading {
    margin-bottom: 56px;
}

.blog-detail-category {
    padding: 0px;
    border: none;
}

    .blog-detail-category .list ul li {
        color: var(--Font-sub-heading, #232323);
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        border-left: 7px solid #f0f0f0;
        padding-left: 20px;
        padding-top: 42px;
    }

        .blog-detail-category .list ul li.active {
            border-left: 7px solid #f0a277;
        }

.blogCover {
    margin-bottom: 60px;
}

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

.blogContent p {
    margin-top: 9px;
    margin-bottom: 50px;
    color: #2D2D2D;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.blogContent h2 {
    color: var(--Font-sub-heading, #232323);
    font-size: 34px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


/* Blog page code END */

/* 
t and c code START */

.tnc-tabs {
    margin-top: 60px;
}

    .tnc-tabs a {
        padding: 8px 20px;
        text-decoration: none;
        color: var(--white, #000);
        font-size: 28px;
        font-style: normal;
        font-weight: 500;
        line-height: 40.233px;
        border-radius: 154px;
        background: linear-gradient(90deg, rgba(239, 169, 74, 0.20) 0%, rgba(255, 94, 99, 0.20) 100%);
    }

        .tnc-tabs a.active {
            background: var(--cta-Gradient, linear-gradient(90deg, #EFA94A 0%, #FF5E63 100%));
            color: #FFF;
        }

.tnc-heading h1 {
    color: #2D2D2D;
    font-family: Roboto;
    font-size: 80px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    text-align: center;
}

.tnc-heading {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
}

.tnc-content {
    margin-top: 72px;
    margin-bottom: 72px;
}

    .tnc-content h2 {
        margin-top: 40px;
        margin-bottom: 9px;
        color: #2D2D2D;
        font-size: 34px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .tnc-content p {
        color: #2D2D2D;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }


/* t and c code END */

.congratsScreen {
    display: flex;
    align-items: center;
    height: 100vh;
}

.FieldError {
    border: 0.5px solid var(--Red, #ED0000);
}

.errorMessage {
    position: relative;
    color: rgba(255, 51, 51, 0.80);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.32px;
    padding-left: 20px;
    margin-top: 4px;
}

    .errorMessage::before {
        content: "";
        display: inline-block;
        background-image: url('../images/errorMessage-img.svg');
        background-size: 16px 16px;
        width: 16px;
        height: 16px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 4px;
    }

.notFoundMessage {
    width: 50%;
}





/* Workman-comensation code END */

/*.Login-right-column {
    padding: 60px;
}*/

.travelInsWrap {
    flex-wrap: wrap;
}

.congratsScreen {
    display: flex;
    align-items: center;
    height: 100%;
}

.notFoundMessage {
    width: 100%;
}






.back-to-login-wrap {
    margin-top: 20px;
    text-align: center;
}

.back-to-login-btn {
    background: none;
    border: none;
    color: #1a237e;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

    .back-to-login-btn:hover {
        background-color: rgba(26, 35, 126, 0.08);
        color: #131b5e;
    }

    .back-to-login-btn i {
        font-size: 16px;
    }

.otp-btn-active {
    opacity: 1;
    cursor: pointer;
    background-color: #0d6efd;
    color: #fff;
    pointer-events: auto;
}


.otp-btn-inactive,
.OTP-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ccc;
    color: #666;
    pointer-events: none;
}

#lockedMsgLine2 {
    margin-left: 0px !important;
    color: #055eac;
    font-weight: 600;
    font-size: 22px;
}

#lockedMsgLine1 {
    color: grey;
    font-weight: 500;
    margin-top: 4px !important;
}

.inputboxes {
    background: #083058;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #D0D0DD;
}


/* ===================== STEPPER   corrected, collision-proof ===================== */

.stepper-wrapper {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 0 8px !important;
    margin-top: 10px !important;
    background: none !important;
}

/* background line + fill line, sit behind circles, span between first and last circle centers */
.stepper-line-bg,
.stepper-line-fill {
    position: absolute !important;
    top: calc(var(--stepper-circle-size) / 2 - 1.5px) !important; /* vertically centers on the circles */
    height: 3px !important;
    z-index: 0 !important;
    border-radius: 2px !important;
    background-image: none !important;
}

.stepper-line-bg {
    left: calc(var(--stepper-circle-size) / 2 + 8px) !important;
    right: calc(var(--stepper-circle-size) / 2 + 8px) !important;
    background-color: var(--stepper-line-bg) !important;
}

.stepper-line-bg,
.stepper-line-fill {
    position: absolute !important;
    top: calc(var(--stepper-circle-size) / 2 - 1.5px) !important;
    height: 3px !important;
    z-index: 0 !important;
    border-radius: 2px !important;
    background-image: none !important;
}

.stepper-line-fill {
    left: calc(var(--stepper-circle-size) / 2 + 8px) !important;
    right: auto !important;
    width: 0 !important;
    background-color: var(--stepper-blue) !important;
    transition: width 0.3s ease !important;
}

.step-item {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    background: none !important;
}

.step-circle {
    width: var(--stepper-circle-size) !important;
    height: var(--stepper-circle-size) !important;
    border-radius: 50% !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    border: 2px solid var(--stepper-blue) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
    box-sizing: border-box !important;
}

    .step-circle img {
        /*             width: 24px !important;
                height: 24px !important; */
        object-fit: contain !important;
    }

/* Active step = fully filled blue circle (own class name, no collision with global .active) */
.step-circle-active {
    /* background-color: var(--stepper-blue) !important;*/
    background-image: none !important;
    border-color: var(--stepper-blue) !important;
}

.step-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--stepper-inactive-text) !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    background: none !important;
}

.step-title-active {
    color: var(--stepper-blue-dark) !important;
    font-weight: 600 !important;
}

.step-date {
    font-size: 12px !important;
    color: #757575 !important;
    min-height: 16px !important; /* reserves space so rows don't jump when a step has no date */
    display: inline-block !important;
}

.loginhead {
    color: var(--loginhead) !important;
    font-weight: 500 !important;
}

.logindescription {
    font-size: 20px !important;
    margin-top: 7px !important;
}

.loginlabels {
    font-size: 17px !important;
}

/*.reset-img {
    margin-left: 90px;
    margin-top: 15%;
}*/

.resetpassworddescription {
    font-size: 20px !important;
    margin-top: 7px !important;
    margin-bottom: 30px !important;
}

.resethead {
    color: var(--loginhead) !important;
    font-weight: 500 !important;
    font-size: 42px;
}

.reset-form-box
 {
    display: flex;
    flex-direction: column;
}

.loginbtnimage {
    width: 15px;
    height: 15px;
    background-image: url('img/Get Started button.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
    right: 14px;
}

.logintext {
    font-weight: 400;
    font-size: 14px;
    padding-left: 27px;
    position: relative;
    right: 12px;
}

.inputfields {
    background-color: #f0f8ff !important;
}

.reset-leftcolumnbg {
    background-color: #f0f6fd !important;
    height: 100vh !important;
}

.leftcolumnbg {
    background-color: #f0f6fd !important;
    height: auto !important;
    overflow:hidden;
}
/*.loginresponsiveimages {
    margin-left: 90px;
    margin-top: 27%;
}*/
.loginlogo {
    right: 8% !important;
}

.cardmessage.messagedata {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    white-space: nowrap;
    
}

    /*.cardmessage.messagedata .message-icon {
    flex-shrink: 0;*/ /* keeps the icon from shrinking/wrapping oddly */
    /*width: 18px;*/ /* adjust to your actual icon size */
    /*height: 18px;
}*/

    .cardmessage.messagedata .message {
        white-space: nowrap;
    }

input:focus-visible {
    outline-color: #86b7fe;
}

.rc-icon {
    font-size: 17px;
    line-height: 1;
    color: #333;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    bottom: 8px;
}

.copyReference {
    cursor: pointer !important;
}

.reset-password-link {
    color: #1a237e;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.stripstyle {
    width: 15% !important;
}

#resendBtn {
    font-size: 13px;
    margin-bottom: 0px;
}

.verifybutton {
    width: 160px !important;
    position: relative;
    left: 396px;
    bottom: 50px;
}

.otp-modal-content {
    border-radius: 16px;
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}

.otp-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    margin-left: 96% !important;
    z-index: 5;
}

.otp-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #e8ecff;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .otp-icon-circle i {
        font-size: 28px;
        color: #2f3ba0; /* match your brand navy */
    }

.otp-input {
    width: 55px;
    height: 55px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    border: 1px solid #ced4da;
    border-radius: 10px;
}

    .otp-input:focus {
        border-color: #2f3ba0;
        box-shadow: 0 0 0 0.2rem rgba(47, 59, 160, 0.15);
        outline: none;
    }

.otpboxes {
    background-color: aliceblue !important;
}

.timercolor {
    color: #1875fd !important;
}

.complaintResendBtn {
    font-size: 13px;
    margin-bottom: 0px;
}

.text-muted {
    text-wrap-mode: nowrap;
}

.messageotp {
    position: relative;
    right: 18px;
}

.emailfield {
    width: 75% !important;
}

#sendOtpBtn:disabled,
#sendOtpBtn.disabled {
    background-color: #adb5bd !important;
    border-color: #adb5bd !important;
    color: #fff !important;
    opacity: 1 !important;
    cursor: not-allowed;
}

.email-verify-group {
    flex-wrap: nowrap;
    border-radius: 8px;
    overflow: hidden; /* clips content to the rounded outer edge */
}

    .email-verify-group .emailfield {
        border-top-left-radius: 8px !important;
        border-bottom-left-radius: 8px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-right: none;
    }

    .email-verify-group .verifybutton {
        position: static !important;
        width: auto !important;
        flex: 0 0 auto;
        white-space: nowrap;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-top-right-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
    }

        /* Fix the square focus ring on the button */
        .email-verify-group .verifybutton:focus,
        .email-verify-group .verifybutton:focus-visible {
            outline: none;
            box-shadow: none; /* the wrapper's overflow:hidden will clip any square ring anyway */
        }

    /* Optional: give the whole group a focus glow instead, so keyboard users still see feedback */
    .email-verify-group:focus-within {
        box-shadow: 0 0 0 3px rgba(13, 27, 62, 0.35);
        border-radius: 8px;
    }

.locked-panel {
    text-align: center;
    padding: 10px 4px 4px;
}

.locked-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px auto 20px;
}

    .locked-icon-wrap i {
        font-size: 92px;
        color: #00aeef; /* swap freely � icon styling not the focus here */
    }

.locked-panel h2 {
    font-weight: 700;
    font-size: 26px;
    color: #1a1a1a;
    margin: 0 0 14px;
}

.locked-message {
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
    color: #6b7280;
    margin: 0 0 18px;
}

.modalstyle {
    margin-bottom: 25px;
    margin-top: 25px;
    margin-left: 7px;
}

#lockedTitle {
    font-weight: bold !important;
}

.work-footer {
    height: 54px !important;
    padding-top: 20px;
    padding-bottom: 20px;
    background: #005BAA;
    color: #fff;
}

    .work-footer h4 {
        font-size: 14px !important;
    }

.swal-button--cancel {
    background-color: #dc3545 !important;
    color: #fff !important;
}

    .swal-button--cancel:hover {
        background-color: #c82333 !important;
    }
/**Styles used for Reset Password Page Start***/
.login-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: white;
    height: calc(100vh - 54px);
}

.leftcolumnbg img {
    width: auto !important;
    height: 100%;
    max-width: none;
    min-width: 100% !important;
}

.login-right {
    padding: 50px 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.login-input {
    width: 100%;
    height: 55px;
    /* border: #f0f8ff !important; */
    border-radius: 10px;
    padding: 0 15px;
    margin-bottom: 6px;
    border-radius: 8px;
    border: 1px solid #D0D0DD;
}


.login-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: #00AEEF;
    color: white;
    font-size: 18px;
    font-weight: 500;
}

.password-container {
    margin-bottom: 14px;
}

.validation-msg {
    display: block;
    min-height: 18px;
    font-size: 13px;
    margin-top: 2px;
}

    .validation-msg i {
        margin-right: 4px;
    }

/* ---- OTP card UI ---- */
.otp-card {
    background: #eaf2ff;
    border-radius: 14px;
    /*         padding: 24px 20px;
*/ text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* Send-OTP (pre-send) view */
.reset-otp-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #dbe9ff;
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 12px;
}

.otp-verify-title {
    font-weight: 700;
    font-size: 17px;
    color: #1f2937;
    margin-bottom: 6px;
    position: relative;
    top: 10px;
}

.otp-instruction {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 16px;
}

.otp-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    top: 10px;
}

    .otp-send-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }

/* Verify (post-send) view */
.otp-check-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #d7f5e3;
    color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 10px;
}

.otp-sent-text {
    color: #6b7280;
    font-size: 14px;
    position: relative;
    top: 10px;
}

.otp-email-highlight {
    color: #0d6efd;
    font-weight: 600;
}

.OTPBoxContainer .resetBocContainer {
    margin: 14px 0;
}

.OTPBoxContainer .resetBoxContainer .otp-input {
    width: 56px;
    height: 56px;
    text-align: center;
    font-size: 22px;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
    background: #fff;
}

.OTPBoxContainer .resetBocContainer .otp-input:focus {
    border-color: #0d6efd;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.15);
}

.otp-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    margin-top: 15px;
}

.otp-timer-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d6efd;
    display: inline-block;
}

#timer {
    font-weight: 700;
    color: #0d6efd;
}

.otp-resend-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    width: 100%;
}

.resend-link {
    color: #0d6efd;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

    .resend-link.disabled {
        color: #9ca3af;
        pointer-events: none;
        cursor: not-allowed;
        text-decoration: none;
    }

.resetpassbtn {
    color: #1a237e !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

doc-error-dnone {
    display: none;
}
/**Styles Used for Reset Password End**/









    @media (max-width: 380px) {
        .mainLogo {
            margin-top: 10px;
            height: 30px;
        }
    }

    @media (max-width: 600px) {
        .illustrator-sec img {
            max-width: 100px;
        }

            .illustrator-sec img:last-child {
                max-width: 100px;
                right: -20px;
            }
    }

    @media (max-width: 767px) {
        .upload-box {
            height: auto;
        }

        .card {
            padding: 20px;
        }

        .Login-main-container {
            padding: 30px;
        }

        .Login-right-column {
            padding: 50px 15px;
        }

        .verify-banner-wrapper {
            position: absolute;
            top: 90px;
            right: -25px;
            z-index: 1000;
            max-width: 292px;
        }

        .verify-banner .verify-banner-text {
            white-space: normal;
        }

        .verify-banner {
            background-color: rgba(219, 234, 254, 1);
        }

        .reference-card {
            padding: 18px 20px;
            width: 250px;
        }

        .ref-number {
            font-size: 14px;
        }

        .success-header {
            flex-direction: column;
        }

        .copy-text {
            display: none;
        }
    }

    @media (max-width: 789px) {

        .OTPBoxContainer {
            width: 100%;
        }

        .OTPMain {
            padding: 27px 50px;
            width: 100%;
        }

        .otp-input {
            width: 40px;
            height: 40px;
            font-size: 24px;
        }

        .OTPerrorMessage {
            font-size: 12px;
        }

        .OTP-heading {
            font-size: 18px;
            margin-top: 6px;
        }

        .OTP-description {
            font-size: 12px;
            margin-top: 7px;
        }

        .OTP-timer {
            font-size: 12px;
        }

        .OTP-timer-left {
            font-size: 12px;
        }

        .OTP-submit {
            margin-top: 21px;
            font-size: 14px;
        }

        .OTP-resend {
            font-size: 12px;
            margin-top: 19px;
        }

        .OTP-footer {
            padding: 10px;
        }

            .OTP-footer p {
                font-size: 16px;
            }

        .OTP-vector {
            width: 173px;
            object-fit: contain;
        }

        /*.logoContainer {
        display: flex;
        justify-content: center;
    }

    .mainLogo {
        width: 75px;
        margin-top: 24px;
    }*/

        .raiseacomplaintpage {
            padding: 30px 15px 15px 15px;
        }

        .wrapper {
            padding: 0 5px;
        }

        .card {
            padding: 20px;
        }

        .homebtn {
            width: auto !important;
        }

        div.fc-container .fc-chip {
            max-width: 177px !important;
        }


        /* login code */

        .Login-container {
            grid-template-columns: 1fr;
        }

        .Login-left-column {
            order: -1;
        }

        .Login-right-column {
            padding: 16px;
        }

        .loginHeading {
            font-size: 28px;
            margin-top: 20px;
        }

        .logindesc {
            font-size: 18px;
            margin-top: 5px;
        }

        .Login-form .loginLabel {
            font-size: 14px;
            margin-top: 16px;
            margin-bottom: 8px;
        }

        .Login-form input {
            padding: 16px 12px;
        }

            .login-form input::placeholder {
                font-size: 12px;
            }

        .rememberMe {
            font-size: 14px;
        }

        .forgotPass {
            font-size: 14px;
        }

        .socialLogin {
            padding: 14px 20px;
        }

            .socialLogin p {
                font-size: 12px;
            }

            .socialLogin img {
                width: 16px;
                height: 16px;
            }

        .signupLink p {
            font-size: 12px;
        }

            .signupLink p a {
                font-size: 12px;
            }

        .LoginNav {
            top: 0;
        }

        .viewMoreBtn2 {
            padding: 8px 20px;
        }

            .viewMoreBtn2 p {
                font-size: 14px;
            }

            .viewMoreBtn2 img {
                width: 15px;
            }

        .custom-container {
            padding: 16px;
        }

        .walletHeading h1 {
            margin-top: 30px;
            font-size: 28px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        .wallet-insurance-list-heading h2 {
            color: #223A74;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

        .wallet-insurance-list-heading p {
            color: var(--Font-sub-heading, #232323);
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

        .wallet-insurance-list-heading {
            flex-wrap: wrap;
        }

            .wallet-insurance-list-heading h2 {
                margin-bottom: 8px;
            }

        .wallet-insurance-option-card h2 {
            overflow: hidden;
            color: var(--Dark, #080808);
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14.687px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin-top: 10px;
            margin-bottom: 17px;
        }

        .wallet-insurance-option-card button {
            padding: 6px 16px;
            font-size: 9.346px;
            line-height: normal;
        }

        .wallet-insurance-details {
            padding: 16px;
        }

        .companyName h2 {
            color: #000;
            font-size: 12.492px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        .wallet-wc-name-info h2 {
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: 31.229px;
            /* 173.496% */
        }

        .wallet-wc-name-info p {
            color: var(--Font-sub-heading, #232323);
            font-family: Roboto;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

        .wallet-insurance-details-table-header h2 {
            color: var(--Color, #223A74);
            font-family: Roboto;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: 14.574px;
            /* 121.447% */
        }

        .wallet-insurance-detail-table-list h3 {
            color: var(--Color, #223A74);
            font-family: Roboto;
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 14.574px;
            /* 121.447% */
        }

        .wallet-insurance-detail-table-list p {
            color: var(--grey-logo, #A09F9F);
            font-family: Roboto;
            font-size: 10px;
            font-style: normal;
            font-weight: 400;
            line-height: 14.574px;
            /* 145.737% */
        }

        .wallet-wc-details {
            margin-bottom: 30px;
            margin-top: 30px;
        }

        .wallet-wc-status p {
            color: #FFF;
            text-align: center;
            font-family: Roboto;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            padding: 5px 10px;
        }

        .wallet-expiring-list-container {
            padding: 0px 12px;
        }

        .wallet-insurance-option-container {
            padding: 12px;
        }

        .expiring-heading {
            color: #223A74;
            font-family: Roboto;
            font-size: 12px;
            font-style: normal;
            font-weight: 600;
            line-height: 17.305px;
            /* 144.204% */
        }

        .timeInput {
            color: var(--Orange-600, #EF4207);
            text-align: center;
            font-family: Roboto;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        .timeHeading {
            color: var(--grey-logo, #A09F9F);
            text-align: center;
            font-family: Roboto;
            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

        .expiring-date-container h4 {
            color: var(--Color, #223A74);
            font-family: Roboto;
            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: 17.305px;
            /* 173.045% */
        }

        .expiring-date-container p {
            color: var(--grey-logo, #A09F9F);
            font-family: Roboto;
            font-size: 10px;
            font-style: normal;
            font-weight: 500;
            line-height: 17.305px;
            /* 173.045% */
        }

        .blogMobileHide {
            display: none;
        }

        .mobileCategories {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: scroll;
            width: 100%;
            white-space: nowrap;
            gap: 16px;
            padding-bottom: 10px;
        }

        .category-list-container .list ul li {
            border-radius: 10px;
            padding: 12px 16px !important;
            border: 0.5px solid var(--grey-logo, #A09F9F);
            font-size: 14px !important;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            width: 100% !important;
        }

            .category-list-container .list ul li.active {
                background: var(--cta-Gradient, linear-gradient(90deg, #EFA94A 0%, #FF5E63 100%));
                color: #FFF;
            }

        .category-list-container {
            padding: 0px;
            border: none;
            margin-bottom: 27px;
        }

            .category-list-container .headings h2 {
                color: var(--Font-sub-heading, #232323);
                font-size: 22px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
                margin-bottom: 24px;
            }

        .blogHeader h1 {
            color: #FFF;
            font-size: 28px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

        .blogHeader {
            padding: 16px 0px;
        }

        .blog-pop-container {
            margin-top: 20px;
        }

        .blog-searchBar input {
            padding: 16px 12px 16px 40px;
            color: var(--grey-logo, #A09F9F);
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .searchIcon {
            left: 12px;
            width: 15px;
            height: 15px;
        }

        .blogcard p {
            display: none;
        }

        .blogcard h2 {
            color: var(--Font-sub-heading, #232323);
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

        .mobileBlogCardContainer {
            flex-wrap: nowrap;
            overflow-x: scroll;
        }

        .page-number {
            color: #000;
            font-size: 11.2px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            padding: 8px;
        }

            .page-number.active {
                color: #fff;
            }

        .pagination {
            gap: 16px;
            justify-content: space-between;
        }

        .page-pn {
            padding: 8px;
        }

        .topPostsCard {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 24px;
        }

            .topPostsCard img {
                width: 30%;
            }

            .topPostsCard h2 {
                width: 70%;
                color: var(--Font-sub-heading, #232323);
                font-size: 12px;
                font-style: normal;
                font-weight: 500;
                line-height: normal;
            }

        .topPostsHeading h2 {
            color: var(--Font-sub-heading, #232323);
            margin-top: 40px;
            font-size: 22px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

        .mobileBlogDisplay {
            display: block;
        }

        .pagination {
            margin-top: 32px;
            margin-bottom: 64px;
        }

        .blog-detail-heading .Headingtag {
            padding: 8px 24px;
            color: var(--Font-sub-heading, #232323);
            text-align: center;
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin-bottom: 24px;
        }

        .blog-detail-heading h1 {
            color: var(--Font-sub-heading, #232323);
            text-align: center;
            font-size: 24px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            margin-bottom: 24px;
        }

        .blog-detail-date p {
            color: var(--grey-logo, #A09F9F);
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }

        .back-option p {
            font-size: 14px;
        }

        .blogCover {
            margin-bottom: 24px;
        }

        .blog-detail-heading {
            margin-bottom: 35px;
        }

        .blogContent p {
            color: #2D2D2D;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 23px;
            /* 153.333% */
            margin-bottom: 20px;
        }

        .blogContent h2 {
            color: #2D2D2D;
            font-size: 22px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

        .tnc-tabs {
            display: none;
        }

        .tnc-heading {
            flex-direction: column;
        }

            .tnc-heading h1 {
                color: var(--Font-sub-heading, #232323);
                text-align: center;
                font-size: 28px;
                font-style: normal;
                font-weight: 600;
                line-height: normal;
            }

        .tnc-content h2 {
            color: #2D2D2D;
            font-family: Roboto;
            font-size: 22px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            margin-top: 20px;
        }

        .tnc-content {
            margin-top: 20px;
            margin-bottom: 20px;
        }
    }

    @media (max-width: 1280px) {
        .illustrator-sec img {
            max-width: 200px;
        }

            .illustrator-sec img:last-child {
                max-width: 200px;
                right: -20px;
            }

        .numberPlaceCenter {
            max-width: 100%;
            margin-bottom: 24px;
            height: 50px;
            gap: 12px;
            padding: 5px 7px;
        }

        .carPlace {
            max-width: 100%;
        }

        .plateinput {
            font-size: 17px;
        }
    }

    @media (max-width: 445px) {
    .stepper-line-bg, .stepper-line-fill {
        top: 18px !important;
    }

    .step-date, .step-title {
        font-size: 12px !important;
    }

    .step-circle img {
        width: 35px !important;
    }

    .step-circle {
        width: 39px !important;
        height: 39px !important;
    }
}

@media (max-width: 415px) {

    .stepper-line-bg, .stepper-line-fill {
        top: 18px !important;
    }

    .step-date, .step-title {
        font-size: 11px !important;
    }

    .step-circle img {
        width: 35px !important;
    }

    .step-circle {
        width: 39px !important;
        height: 39px !important;
    }
}

@media (max-width: 395px) {

    .stepper-line-bg, .stepper-line-fill {
        top: 18px !important;
    }

    .step-date, .step-title {
        font-size: 11px !important;
    }

    .step-circle img {
        width: 35px !important;
    }

    .step-circle {
        width: 39px !important;
        height: 39px !important;
    }
}

@media (max-width: 386px) {

    .stepper-line-bg, .stepper-line-fill {
        top: 15px !important;
    }

    .stepper-container,
    .steps-wrapper {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    .step {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        text-align: center !important;
        position: relative !important;
        z-index: 1 !important;
    }

    .step-circle {
        width: 32px !important;
        height: 32px !important;
        margin: 0 auto 4px auto !important;
        overflow: visible !important;
    }

        .step-circle img {
            width: 28px !important;
        }

    .step-title {
        font-size: 11px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: center !important;
        max-width: 60px !important;
    }

    .step-date {
        font-size: 8px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }
}