.env i {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 16px;
        color: #374a74;
    }

    .env1 i {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 16px;
        color: #374a74;
    }

    div#update_password_tip {
        left: 86.5%;
        top: 320px;
        width: 252px !important;
        height: 132px !important;

    }



    .iti.iti--allow-dropdown.iti--separate-dial-code .iti__selected-flag {
        height: 40px !important;
    }

    .iti {
        display: block !important;
        background: transparent !important;
    }

    .my_login .input-field input:focus {
        background-color: #E8F0FE;
    }


    .verified-badge {
        color: #28a745;
        font-weight: bold;
        margin-left: 5px;
    }

    .verified-badge i {
        margin-right: 3px;
    }

    .btn-success.verified {
        background-color: #28a745 !important;
        color: white !important;
        border-color: #28a745 !important;
        pointer-events: none;
        cursor: default;
    }

    .btn-success.verified .verified-badge {
        color: white;
    }


    .login-form-box svg.svg-inline--fa.fa-phone {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 16px;
        color: #374a74;
    }

    .otp-success-message {
        transition: opacity 0.3s ease;
    }

    .otp-success-message.fading {
        opacity: 0;
    }

    .login-form-page {
        width: 80%;
        margin: 0 auto;
        background: #fff;
        border-radius: 18px;
        box-shadow: 0 0 6px #0000000d;
        box-sizing: border-box;
        overflow: hidden;
        padding: 8px 8px;
    }

    #update_password_tip::after {
        content: "\f0d9";
        /* Unicode for the Font Awesome caret-left icon */
        font-family: "Font Awesome 5 Free";
        /* Ensure Font Awesome is loaded */
        font-weight: 900;
        /* Use the correct weight for solid icons */
        width: 40px;
        position: absolute;
        /* Added to place the pseudo-element correctly */
        top: 70px;
        left: -12px;
        font-size: 30px;
        color: #787878;
        box-shadow: #f1f1f1 10px;
    }



    div#update_password_tip {
        padding: 10px;
    }

    p.m-0 {
        font-weight: 600;
    }


    .gg {
        position: absolute;
        top: 70px;
    }

    .login-form-page-right .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 485px !important;
        background: #ccc;
        border-radius: 12px;
    }




    .login-boxes-new2 {
        padding: 0px 0 0 0;
    }


    #particles-js {
        position: fixed;
        /* or absolute if inside a container */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        /* keep it behind everything */
    }

    .login-boxes.login-boxes-new2 {

        z-index: 1;
        background: none;
        width: 100%;
        /* safe to use now */
        margin: 0 auto;
        top: 20px;
        text-align: center;
    }

    .success-modal {
        border-radius: 15px;
        border: none;
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
        position: relative;
        padding: 20px;
    }

    .success-modal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 28px;
        color: #999;
        opacity: 0.8;
        transition: 0.3s;
        z-index: 10;
    }

    .success-modal .close:hover {
        color: #000;
        opacity: 1;
    }

    .success-title {
        font-size: 28px;
        font-weight: 600;
        margin: 15px 0;
        color: #28a745;
    }

    .success-title i {
        margin-right: 10px;
    }

    .success-message {
        font-size: 16px;
        color: #555;
        margin: 10px 0 20px;
    }

    .success-modal .btn-success {
        border-radius: 30px;
        padding: 10px 35px;
        font-size: 16px;
        font-weight: 500;
        box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
        transition: all 0.3s ease-in-out;
    }

    .success-modal .btn-success:hover {
        background-color: #218838;
        box-shadow: 0 5px 15px rgba(40, 167, 69, 0.5);
    }

    .additional-links p {
        margin: 8px 0;
        font-size: 14px;
        color: #444;
    }

    #update_password_tip {
        display: none;
        position: relative;
        margin-top: 15px;
        background: #fff;
        border: 1px solid #787878;
        border-radius: 6px;
        padding: 10px 15px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        width: 100%;
        max-width: 320px;
        text-align: left;
    }

    .continue-bax-btn {
        text-align: center;
    }

    span#email-error {
        color: #ff4e4e;
    }

    span#phone_number-error {
        color: #ff4e4e;
    }

    .btn-outline-success.verified {
        background-color: #28a745 !important;
        color: white !important;
        border-color: #28a745 !important;
    }

    .verified-text {
        color: #28a745;
        font-weight: bold;
    }

    .btn-success:disabled {
        background-color: #6c757d !important;
        border-color: #6c757d !important;
        cursor: not-allowed;
    }

    .btn-secondary {
        background-color: #6c757d;
        border-color: #6c757d;
    }

    .verification-progress {
        margin: 10px 0;
        font-size: 14px;
        color: #666;
    }

    .login-form-box svg.svg-inline--fa.fa-envelope {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 16px;
        color: #374a74;
    }


    .back-button {
        position: relative;
        top: -153px;
        margin-bottom: 10px;
        padding: 6px 14px;
        font-weight: bold;
        background-color: rgb(240, 240, 240);

        /* Light neutral background */
        border: 1px solid #ccc;
        color: #333;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.3s, color 0.3s;
    }

    .back-button:hover {
        background-color: #e0e0e0;
        color: #000;
    }

    .envelope-sec span i.fa-solid.fa-envelope {
        font-size: 45px;
        position: relative;
        color: #374a74;
        background-color: #e9e9e9;
        padding: 15px;
        border-radius: 50%;
    }

    .envelope-sec {
        margin-top: -67px;
    }

    .lock-sec span i.fa-solid.fa-lock {
        font-size: 18px;
        position: absolute;
        top: 12px;
        left: 52%;
        color: #7c7c7c;
    }

    .text-muted-sec {
        background: #e3f2fd;
        color: #1565c0 !important;
        font-weight: bold;
        font-size: 10px !important;
        display: inline-block;
        padding: 3px 7px 4px;
        border-radius: 53px;
        font-style: italic;
        letter-spacing: 0.3px;
    }

    .carousel-indicators li {
        top: 14px;
    }


    /*

    .login-form-page-right .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 550px;
        background: #ccc;
        border-radius: 12px;
    } */


    .login-form-page-right .carousel-inner img {
        width: 100%;
        /* height: 550px; */
        object-fit: cover !important;
        /* fills container without distortion */
        border-radius: 12px;
    }

    .progress-bar {
        background-color: #374a74 !important;
    }

    .btn88 {
        padding: 6px 30px;
        font-size: 14px;
    }

    .login-boxes form h1 span {
        display: block;
        font-size: 22px;
        letter-spacing: 1px;
        position: relative;
        margin-top: 7px;
        margin-bottom: 20px;
    }

    .login-form-page-left .login-form-box .input-field .phon-input {

        background-size: 15px;
    }

    .login-form-box svg.svg-inline--fa.fa-slash.fa-w-20.fa-3x {
        position: absolute;
        top: 12px;
        width: 16px;
        right: 14px;
        color: #ff9f44;
    }


    .h5-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 16px;
        font-size: 14px;
        font-weight: 400;
        background: #374a74;
        color: #fff;
        border-radius: 5px;
        /* pill badge */
        line-height: 1;
    }

    .login-boxes form p {
        color: #000;
        font-size: 16px;
    }

    .login-form-page-left {
        width: 50%;
        display: flex;
        flex-direction: column;
        /* justify-content: center; */
    }

    .login-form-page-right {
        width: 50%;
        background: #0a3b78;
        position: relative;
    }

    .login-form-page {
        display: flex;
        width: 80%;
        max-width: 1100px;
        /* min-height: 550px; */
        margin: 30px auto;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .ho_btn {
        position: relative;
    }

    .ho_btn .bac-button {
        position: absolute;
        top: 12px !important;
        left: 2px !important;
        color: #fff;
    }

    .btn {
        display: inline-block;
        text-decoration: none;
        border-radius: 2px !important;
        transition: all 0.25s ease-in-out;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .inp::placeholder {
        font-size: 14px;
    }

    .flxi .input-field {
        display: flex;
        gap: 10px;
        width: 100%;
        border: 1px solid #d0d0d0;
        border-radius: 5px;

    }


    .flxi .input-field input {
        width: 40%;
        background: none;
        border: none;
        border: 0px solid #d0d0d0;
        margin: 0px;
        padding-left: 9px;
        font-size: 14px;
        color: #43464f;
        font-weight: 500;
        font-family: "arial";
        border-radius: 6px;
        height: 40px;
    }

    /* 
    .login-form-page-right .carousel,
    .login-form-page-right .carousel-inner,
    .login-form-page-right .carousel-item {
        height: 100%;
    } */

    .login-form-page-right img,
    .login-form-page-right video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



    .btm {
        margin-bottom: 0px;
    }

    .login-form-page-left .login-form-box {
        float: left;
        width: 100%;
        /* padding: 8px 20px 0; */
        padding: 20px 20px 20px;
    }


    .in_flx {
        display: flex;
        gap: 10px;
    }

    .btt1 {
        position: absolute;
        right: 110px;
        top: 50%;
        transform: translateY(-50%);
    }

    .btt2 {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    .in_flx .btn-outline-primary:disabled {
        color: #fff !important;
    }


    .flxi .input-field input label {
        font-size: 14px;
        top: 20px !important;
        color: #000000;
    }

    .floating-label {
        position: relative;
    }

    .floating-label .inp {
        width: 100%;
        padding: 14px 12px;
        font-size: 14px;
        border: 1px solid #cfd4dc;
        border-radius: 6px;
        outline: none;
        background: #fff;
    }

    /* Label behaves like placeholder */
    .floating-label label {
        position: absolute;
        top: 50% !important;
        left: 12px;
        transform: translateY(-50%);
        font-size: 14px;
        color: #777;
        pointer-events: none;
        background: #fff;
        padding: 0 5px;
        transition: 0.25s ease;
    }

    /* FLOAT ONLY on focus OR value entered */
    .floating-label .inp:focus+label,
    .floating-label .inp:not(:placeholder-shown)+label {
        top: -7px !important;
        font-size: 12px;
        color: #374a74;
    }

    /* Focus border */
    .floating-label .inp:focus {
        border-color: #374a74;
    }

    .login-boxes form .login-form-box h6.regi a {
        font-size: 15px;
        color: #7c5ac2;
        font-weight: 500;
        float: none;
        display: block;
        margin-top: 10px;
        font-family: "Roboto", serif !important;
    }

    .login-boxes form .login-form-box h6.regi a:hover {
        font-size: 15px;
        color: #000;
    }


    .veri {
        display: flex;
        flex-direction: column;
    }

    .fl {
        display: flex;
        justify-content: space-evenly;
    }



    .btm {
        margin-bottom: 0px;
    }

    .login-form-page-left .login-form-box {
        float: left;
        width: 100%;
        padding: 8px 20px 0;
    }


    .in_flx {
        display: flex;
        gap: 10px;
    }

    .my_login input::placeholder {
        font-size: 12px;
        letter-spacing: 1px;
    }




    .my_login .input-field input {
        margin: 0px 0 0px;
    }

    .login-boxes form {

        text-align: left !important;
    }

    .error.text_error {
        font-size: 13px !important;
        color: red !important;
        letter-spacing: 1px;
    }




    .login-form-box .input-field {
        min-height: 50px;
    }



    #update_password_section {
        margin-top: 10px;
        margin-bottom: 16px;
    }

    /* NEXT button spacing */
    .continue-bax-btn {
        margin-top: 20px;
    }





    .login-form-box svg.svg-inline--fa.fa-slash.fa-w-20.fa-3x {
        position: absolute;
        top: 12px;
        width: 16px;
        right: 14px;
        color: #374a74;
    }

    .login-form-box svg.svg-inline--fa.fa-eye.fa-w-18.fa-2x,
    .login-form-box svg.svg-inline--fa.fa-slash.fa-w-20.fa-3x {
        position: absolute;
        top: 14px;
        width: 16px;
        right: 14px;
        color: #374a74;
    }




    .my_rgr .input-field.two input[type="password"] {
        margin-bottom: 0 !important;
    }



    @media(max-width:480px) {

        .login-form-page-left {
            width: 100%;

        }

        .login-boxes form p {
            color: #000;
            font-size: 12px;
        }

        .back-button {
            position: relative;
            font-size: 10px;
            top: 8px;
            left: 185px;
            color: #fff;
            width: 20px;
            height: 20px;
            padding: 3px;
        }

        .login-boxes form h1 span {
            display: block;
            font-size: 16px;
        }

    }



    .input-field.iti {
        min-height: 50px;
    }


    .forgot h1 span {
        font-size: 20px !important;
    }

    .floating-label1 {
        position: relative;
    }

    .floating-label1 .inp {
        width: 100%;
        padding: 14px 12px;
        font-size: 14px;
        border: 1px solid #d0d0d0;
        border-radius: 5px;
        outline: none;
    }

    .floating-label1 label {
        position: absolute;
        top: 40% !important;
        left: 12px;
        transform: translateY(-50%);
        font-size: 14px;
        color: #777;
        background: #fff;
        padding: 0px 5px;
        pointer-events: none;
        transition: 0.25s ease;

    }

    /* FLOAT ONLY when focused or has value */
    .floating-label1 .inp:focus+label,
    .floating-label1 .inp:not(:placeholder-shown)+label {
        top: -8px !important;
        font-size: 12px;
        color: #374a74;
    }

    .floating-label1 .inp:focus {
        border-color: #374a74;
    }

    .forgot .input-field input:focus {
        background-color: transparent;
    }

    .forgot_flex {
        display: flex;
        justify-content: space-between;


    }

    .for_veri1 {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .for_veri1 .input-field {
        margin-bottom: 0px !important;
    }


    .btb-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 400 !important;
        color: #fff;
        background-color: #374a74;

        border-radius: 2px;
        box-shadow: none;
        transform: none;
        transition: background-color 0.2s ease, color 0.2s ease;
        letter-spacing: 1px;
    }

    .btb-back:hover {
        text-decoration: none !important;
        color: #fff !important;
    }

    .btb-back {
        position: absolute;
        right: 7px;
        top: 40%;
        transform: translateY(-50%);
    }

    .forgot {
        padding-inline: 20px !important;

        padding-top: 40px !important;
    }

    input#phone_identifier {
        background-color: #E8F0FE;
    }

    .lgn:hover {
        color: #7c5ac2;
    }

    .lgn {
        font-size: 15px !important;
        font-weight: 500 !important;
        font-family: "Roboto", serif !important;

    }



    @media(max-width:480px) {


        .forgot {
            padding-inline: 0px !important;
            padding-top: 6px !important;
        }

        .method-selector {
            margin-bottom: 12px !important;
        }

        .login-form-page-left .login-form-box {
            float: left;
            width: 100%;
            padding: 8px 8px 16px;
        }

        label {
            font-size: 12px !important;

        }

        .continue-bax-btn {
            margin-top: 0px;
        }

        .input-field input {
            font-size: 13px;
        }

        .env i {
            font-size: 15px;
        }

        .login-form-page {
            display: flex;
            width: 85%;
        }

        .lgn {
            font-size: 13px !important;

        }

        .zz {
            margin-top: 5px !important;
        }

        .forgot h1 span {
            font-size: 17px !important;

        }

        .vvn {
            margin-top: -10px;
        }

        .vvn1 {
            font-size: 13px;
        }

        .env1 i {
            font-size: 15px;
        }

        #otp_timer {
            font-size: 12px !important;
        }

        #otp_message {
            font-size: 12px !important;
        }

        .btb-back {
            padding: 3px 3px;
            font-size: 10px;
            font-weight: 400 !important;
        }

        .gg {
            font-size: 10px !important;
            top: 33px;
        }


        .verification-info strong {
            font-size: 12px;
        }

        .bmc {
            font-size: 13px !important;
        }

    }







    .lgn {
        color: #7c5ac2 !important;
        letter-spacing: 1px;
    }

    .lgn:hover {
        color: #000 !important;
    }






    .verification-info {
        padding: 14px 18px;
        max-width: 420px;
        margin: auto;
        background-color: #E8F0FE !important;
    }

    .verification-info p {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 13px;
        color: #333;
        margin-bottom: 3px;
    }

    .verification-info p i {
        color: #374a74;
        font-size: 14px;

    }

    .verification-info strong {
        font-weight: 500;
        color: #374a74;
        font-style: italic;
    }

    #display_email,
    #display_phone {
        color: #555;
        word-break: break-all;
        font-weight: 600;
        font-style: italic;
    }