body {
    font-family: Arial, sans-serif;
    background-color: white;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.error {
    color: red;
    font-size: 12px;
    margin-top: -5px;
    display: inline;
}
a {
    text-decoration: none !important;
}
/* Login Page CSS */
@media (max-width: 480px){

/* =============== SIGNUP CONTAINER =============== */
.signup-container {
    padding: 15px;
    border-radius: 10px;
    width: 100%;
    height: auto;
    position: absolute;
    top: 30px;
}

/* Signup Inputs – Same as Login */
.signup-container input {
    width: 70%;
    padding: 20px;
    border: 2px solid #595959;
    background: #ebebeb;
    font-size: 16px;
    font-weight: 600;
    border-radius: 32px;
    padding-left: 59px;
}

/* Placeholder same as login */
.signup-container input::placeholder {
    color: black;
}

/* Focus effect same as login */
.signup-container input:focus{
    border: 0.5px solid rgba(0, 0, 255, 0.35);
    outline: none;
}

/* Mobile + OTP sections layout */
#mobile-section,
#otp-section {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: center;
}

/* Signup OTP input same UI */
input#otp {
    padding: 20px !important;
}

/* Signup Button – Same layout as login */
.signup-container button {
    width: 90%;
    padding: 20px;
    background: linear-gradient(to right, #c3a743, #174928) !important;
    color: #fff;
    border: none;
    border-radius: 32px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

/* Signup bottom login link */
.signup-container .login-link {
    text-align: center;
    margin-top: 15px;
    font-size: 18px;
}

.signup-container .login-link a {
    text-decoration: none;
    color: #251b66;
    font-weight: 800;
}

.signup-container .login-link a:hover {
    text-decoration: underline;
}

/* Icon + input row same as login */
.Mobile_No {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
    position: relative;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

/* Signup icons same as login */
.signup-container .login-image {
    position: absolute;
    left: 8%;
    padding: 7px;
    border-radius: 15px;
}

/* Signup Logo same as login */
.logo{
    display: flex;
    justify-content: center;
    margin-bottom: 34px;
}

.logo > img{
    width: 50%;
    height: 50%;
    border-radius: 30%;
}

/* Signup Text same style as login heading */
.signup_text{
    color: #2d4a3a;
    font-size: 28px;
    text-align: left;
    margin: 0 8%;
    font-weight: 600;
}

/* ===== LOGIN SAME CODE STAYS BELOW (unchanged) ===== */

.login-container {
    width: 100%;
    height: auto;
    position: absolute;
    top: 30px;
}

.login_box_M {
    background: transparent;
    padding: 0px;
    margin: 10px auto;
}

.login-container input {
    width: 70%;
    padding: 20px;
    border: 2px solid #595959;
    border-radius: 10px;
    padding-left: 59px;
    background: #ebebeb;
    font-size: 16px;
    font-weight: 600;
}

form#loginForm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 23px;
    margin-top: 30px;
}

.login-container button {
    width: 90%;
    padding: 20px;
    background: linear-gradient(to right, #c3a743, #174928);
    color: #fff;
    border: none;
    border-radius: 32px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 20px;
}

.login-container .signup-link {
    text-align: center;
    margin-top: 10px;
    font-size: 18px;
}

.login-container .signup-link a {
    text-decoration: none;
    color: #251b66;
    font-weight: 800;
}

.login-image {
    position: absolute;
    left: 5%;
    padding: 7px;
    border-radius: 15px;
}

.login_text{
    color: #2d4a3a;
    font-size: 28px;
    text-align: left;
    margin: 0 8%;
    font-weight: 600;
}

}


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

    /* ---------------- SIGNUP SECTION ---------------- */
    .signup-container {
        padding: 15px;
        border-radius: 10px;
        width: 100%;
        height: auto;
        position: absolute;
        top: 30px;
    }

    .signup-container input {
                width: 100%;
        padding: 20px;
        border-radius: 10px;
        padding-left: 65px;
        background: #ebebeb;
        border: 2px solid #595959;
        font-size: 20px;
        font-weight: 600;
    }

    #mobile-section,
    #otp-section{
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }
        .login_box_M {
        background: transparent;
        padding: 0px;
        margin: 10px auto;
    }

    div#otp-section{
        margin-top: 5% !important;
    }

    input#otp,
    input#mobile{
        padding: 16px !important;
    }

    button#send-otp-button{
        width: 95% !important;
    }

    .signup-container button {
        width: 100%;
        padding: 20px;
        background: #fb7f16 !important;
        color: white;
        border: none;
        border-radius: 32px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }

    .signup-container .login-link {
        text-align: center;
        margin-top: 10px;
        font-size: 18px;
    }

    .signup-container .login-link a {
        text-decoration: none;
        color: #251b66;
        font-weight: 600;
    }

    .signup-container input:focus{
        border: 0.5px solid rgba(0, 0, 255, 0.341);
        outline: none;
    }


    /* ---------------- LOGIN SECTION ---------------- */
    .login-container {
        padding: 15px;
        border-radius: 10px;
        width: 80%;
        height: auto;
        position: absolute;
        top: 30px;
    }

    .login-container input {
               width: 100%;
        padding: 20px;
        border-radius: 10px;
        padding-left: 65px;
        background: #ebebeb;
        border: 2px solid #595959;
        font-size: 20px;
        font-weight: 600;
    }

    form#loginForm {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 23px;
        margin-top: 34px;
    }

    .login-container input:focus{
        border: 0.5px solid rgba(0, 0, 255, 0.341);
        outline: none;
    }

    .login-container button {
        width: 100%;
        padding: 20px;
        background: linear-gradient(to right, #c3a743, #174928);
        color: white;
        border: none;
        border-radius: 32px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        margin-left: 20px;
    }

    .login-container .signup-link {
        text-align: center;
        margin-top: 10px;
        font-size: 18px;
    }

    .login-container .signup-link a {
        text-decoration: none;
        color: #251b66;
        font-weight: 600;
    }

    .Mobile_No {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: nowrap;
        position: relative;
        align-items: center;
        margin-bottom: 10px;
        justify-content: center;
    }

    .login-image {
        position: absolute;
        left: 12px;
        fill: green;
        padding: 7px;
        border-radius: 15px;
    }

    .logo{
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .logo > img{
        width: 50%;
        height: 50%;
        border-radius: 30%;
    }

    .login_text{
        color: #2d4a3a;
        font-size: 28px;
        text-align: left;
        font-weight: 600;
    }
}




@media (min-width: 769px) and (max-width: 1199px){

    /* ---------------- SIGNUP SECTION ---------------- */
    .signup-container {
        padding: 15px;
        border-radius: 10px;
        width: 70%;
        height: auto;
        position: absolute;
        top: 30px;
        margin: 0 auto;
    }

    .signup-container input {
        width: 100%;
        padding: 18px;
        border-radius: 35px;
        padding-left: 50px;
        background: #ebebeb;
        border: 2px solid #595959;
        font-size: 16px;
        font-weight: 600;
    }

    #mobile-section,
    #otp-section{
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    div#otp-section{
        margin-top: 5% !important;
    }

    input#otp,
    input#mobile{
        padding: 18px !important;
    }

    button#send-otp-button{
        width: 100% !important;
    }

    .signup-container button {
        width: 100%;
        padding: 14px;
        background: #fb7f16 !important;
        color: white;
        border: none;
        border-radius: 32px;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
    }

    .signup-container .login-link {
        text-align: center;
        margin-top: 10px;
        font-size: 20px;
    }

    .signup-container .login-link a {
        text-decoration: none;
        color: #251b66;
        font-weight: 600;
    }

    .signup-container input:focus{
        border: 1px solid rgba(0, 0, 255, 0.341);
        outline: none;
    }

    .dp_boss_logo{
        width: 40%;
        height: auto;
    }


    /* ---------------- LOGIN SECTION ---------------- */
    .login-container {
        padding: 15px;
        border-radius: 10px;
        width: 60%;
        height: auto;
        position: absolute;
        top: 30px;
        margin: 0 auto;
    }

    .login-container input {
        width: 100%;
        padding: 20px;
        border-radius: 10px;
        padding-left: 40px;
        background: #ebebeb;
        border: 2px solid #595959;
        font-size: 16px;
        font-weight: 600;
    }

    .login-container input:focus{
        border: 1px solid rgba(0, 0, 255, 0.341);
        outline: none;
    }

    .login-container button {
        width: 80%;
        padding: 14px;
        background: linear-gradient(to right, #c3a743, #174928);
        color: #fff;
        border: none;
        border-radius: 32px;
        font-size: 22px;
        font-weight: 600;
        cursor: pointer;
    }

    .login-container .signup-link {
        text-align: center;
        margin-top: 10px;
        font-size: 20px;
    }

    .login-container .signup-link a {
        text-decoration: none;
        color: #251b66;
        font-weight: 600;
    }

    .Mobile_No {
        display: flex;
        flex-direction: row;
        width: 100%;
        flex-wrap: nowrap;
        margin-bottom: 10px;
        align-items: center;
        position: relative;
    }

    .login-image {
        position: absolute;
        left: 15px;
        padding: 7px;
        border-radius: 15px;
    }

    .logo{
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .logo > img{
        width: 40%;
        height: auto;
        border-radius: 30%;
    }

    .login_text{
        color: #2d4a3a;
        font-size: 32px;
        text-align: center;
        font-weight: 600;
    }
}


/* Forgot password css */
.forgot-password-container {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 80%;
    height: auto;
    position: absolute;
    top: 30px;
}
.forgot-password-container input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 0px 5px 5px 0;
    font-size: 10px;
}
.forgot-password-container input:focus {
    border: 0.5px solid rgba(0, 0, 255, 0.341);
    outline: none;
}
.forgot-password-container button {
    width: 100%;
    padding: 8px;
    background-color: black;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
}
.forgot-password-container .login-link {
    text-align: center;
    margin-top: 10px;
    font-size: 10px;
}
.forgot-password-container .login-link a {
    text-decoration: none;
    color: rgb(139, 139, 33);
}
.forgot-password-container .login-link a:hover {
    text-decoration: underline;
}
.forgot-password-container .Mobile_No {
    display: flex;
    flex-direction: row;
}
#Get_OTP{
    margin-top: 15px;
}
.forgot-password-container .login-image {
    background-color: #A5BFCC;
    align-items: center;
    padding: 9px;
    border-radius: 5px 0 0 5px;
}
.forgot-password-container .logo {
    display: flex;
    justify-content: center;
    margin-bottom: -50px;
}
.forgot-password-container .login_text {
   color: black;
    font-size: 24px;
    text-align: center;
    font-weight: 600;
}

@media (min-width: 1200px){

    /* ----------- LOGIN CONTAINER ---------- */
    .login-container {
        padding: 25px;
        border-radius: 15px;
        width: 450px;
        height: auto;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        background: transparent;
    }

    .logo{
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }

    .dp_boss_logo{
        width: 35%;
        height: auto;
    }

    .login_text{
        color: #2d4a3a;
        font-size: 32px;
        text-align: center;
        font-weight: 700;
        margin-bottom: 20px;
    }

    /* INPUT FIELD */
    .login-container input {
        width: 350px;
        padding: 20px;
        font-size: 18px;
        border-radius: 35px;
        background: #ebebeb;
        border: 2px solid #595959;
        padding-left: 50px;
        font-weight: 600;
    }

    .login-container input:focus{
        border: 1px solid rgba(0,0,255,0.3);
        outline: none;
    }

    /* MOBILE NO INPUT WRAPPER */
    .Mobile_No{
        width: 350px;
        position: relative;
        display: flex;
        flex-direction: row;
        margin-bottom: 15px;
        align-items: center;
    }

    .login-image{
        position: absolute;
        left: 15px;
        padding: 7px;
        border-radius: 15px;
        /* background: orange; */
    }

    /* BUTTON */
    .login-container button{
        width: 350px;
        padding: 16px;
        border-radius: 32px;
        border: none;
        font-size: 22px;
        font-weight: 600;
        background: linear-gradient(to right,#c3a743,#174928);
        color: #fff;
        cursor: pointer;
        margin-top: 15px;
    }

    .login-container .signup-link{
        margin-top: 10px;
        font-size: 18px;
        text-align: center;
    }

    .login-container .signup-link a{
        color: #251b66;
        font-weight: 600;
        text-decoration: none;
        font-size: 18px;
    }
}

/*@media (max-width: 374px){*/

    /* ---------------- SIGNUP ---------------- */
/*    .signup-container{*/
/*        padding: 10px;*/
/*        border-radius: 10px;*/
/*        width: 100%;*/
/*        position: absolute;*/
/*        top: 20px;*/
/*    }*/

/*    .signup-container input{*/
/*        width: 100%;*/
/*        padding: 15px;*/
/*        font-size: 14px;*/
/*        border-radius: 35px;*/
/*        background: #ebebeb;*/
/*        border: 2px solid #595959;*/
/*        padding-left: 50px;*/
/*        font-weight: 600;*/
/*    }*/

/*    #mobile-section,*/
/*    #otp-section{*/
/*        display: flex !important;*/
/*        flex-direction: row !important;*/
/*        width: 100% !important;*/
/*    }*/

/*    .signup-container button{*/
/*        width: 75%;*/
/*        padding: 10px;*/
/*        background: #fb7f16 !important;*/
/*        border-radius: 32px;*/
/*        font-size: 14px;*/
/*        color: #fff;*/
/*        margin-top: 10px;*/
/*    }*/

/*    .signup-container .login-link{*/
/*        text-align: center;*/
/*        font-size: 16px;*/
/*        margin-top: 10px;*/
/*    }*/

/*    .signup-container .login-link a{*/
/*        color: #251b66;*/
/*        font-weight: 600;*/
/*        text-decoration: none;*/
/*    }*/

    /* ---------------- LOGIN SECTION ---------------- */
/*    .login-container{*/
/*        width: 100%;*/
/*        padding: 0 !important;*/
/*        top: 20px;*/
/*        position: absolute;*/
/*    }*/

/*    .login-container input{*/
/*        width: 90%;*/
/*        padding: 15px;*/
/*        border-radius: 35px;*/
/*        background: #ebebeb;*/
/*        border: 2px solid #595959;*/
/*        padding-left: 50px;*/
/*        font-size: 14px;*/
/*        font-weight: 600;*/
/*    }*/

/*    form#loginForm{*/
/*        display: flex;*/
/*        flex-direction: column;*/
/*        align-items: center;*/
/*        gap: 20px;*/
/*        margin-top: 20px;*/
/*    }*/

/*    .login-container button{*/
/*        width: 75%;*/
/*        padding: 12px;*/
/*        border-radius: 32px;*/
/*        background: linear-gradient(to right,#c3a743,#174928);*/
/*        color: #fff;*/
/*        font-size: 16px;*/
/*        font-weight: 600;*/
/*    }*/

/*    .Mobile_No{*/
/*        width: 90%;*/
/*        display: flex;*/
/*        position: relative;*/
/*    }*/

/*    .login-image{*/
/*        position: absolute;*/
/*        left: 10px;*/
/*        background: orange;*/
/*        padding: 6px;*/
/*        border-radius: 15px;*/
/*    }*/

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

/*    .login_text{*/
/*        font-size: 18px;*/
/*        font-weight: 600;*/
/*        text-align: center;*/
/*    }*/
/*}*/

@media (min-width: 1200px){
    
    /* Signup Container Inputs */
    .signup-container input {
        width: 250px;
        padding: 16.3px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
    }

    /* Signup Button */
    .signup-container button {
        width: 75%;
        padding: 10px;
        background: #fb7f16 !important;
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 14px;
        cursor: pointer;
    }

    /* Signup Page Login Link */
    .signup-container .login-link a {
        text-decoration: none;
        color: #251b66;
        font-weight: 600;
    }

    /* Login Form Alignments */
    form#loginForm {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 23px;
        margin-top: 34px;
    }

    /* Login link center align */
    .login-link {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
}