/* ===== GOOGLE FONT IMPORT ===== */

                body{
                    font-family: 'Nunito Sans', sans-serif !important;
                }
            /* ===== MAIN WRAPPER ===== */
            .login-wrapper {
                display: flex;
                height: 100vh;
                width: 100%;
            }

        

            /* TEXT TOP-RIGHT */
            .overlay-content {
                position: absolute;
                top: 40px;
                left: 40px;   /* changed from right → left */
                color: #fff;
                z-index: 2;
                max-width: 430px;
                text-align: left; /* changed */
            }


            .overlay-content h2 {
                font-size: 34px;
                font-weight: 700;
                margin-bottom: 8px;
                color: #fff;
            }

            .overlay-content p {
                font-size: 15px;
                opacity: 0.9;
            }

            /* ===== LOGIN FORM SECTION (TRANSPARENT) ===== */
            .login-form-section {
                position: absolute;
                right: 0;
                top: 0;
                height: 100%;
                width: 45%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: transparent; /* IMPORTANT */
                z-index: 3;
            }

            /* LOGIN CARD */
            .login-card {
                width: 100%;
                max-width: 520px;   /* increased */
                border-radius: 16px;
                background-color: #07122C !important;
                box-shadow: 0 25px 60px rgba(0,0,0,0.35);
                
            }


            .login-card .card-body {
                padding: 3rem !important; /* bigger feel */
                background-color: #07122C;
                /* border-radius: 16px; */
                border: 1px solid #2E4352;
            }

            .fw-semibold{
                color: #fff !important;
            }
            .login-card .text-muted{
                color: #fff !important;
            }

            .form-label{
                color: #fff !important;
            }
            .btn-primary:hover {
                background-color: rgb(29 150 212) !important;
                border-color: rgb(29 150 212) !important;
            }
            .btn-primary {
                background-color: rgb(29 150 212) !important;
                border-color: rgb(29 148 210) !important;
            }

            /* ===== MOBILE RESPONSIVE ===== */
            @media (max-width: 991px) {
                .login-form-section {
                    width: 100%;
                    padding: 20px;
                }

                .overlay-content {
                    display: none;
                }
            }
/* ===== INPUT FIELD (NO BORDER) ===== */
.custom-input-field,
.custom-input-field.form-control {
    background-color: #0F1B36 !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    height: 50px;
    padding-right: 45px;
    border-radius: 8px;
}

/* PLACEHOLDER */
.custom-input-field::placeholder {
    color: rgba(255,255,255,0.6) !important;
}

/* FOCUS STATE */
.custom-input-field:focus {
    background-color: #0F1B36 !important;
    color: #ffffff !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* CHROME AUTOFILL FIX */
input.custom-input-field:-webkit-autofill,
input.custom-input-field:-webkit-autofill:hover,
input.custom-input-field:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0F1B36 inset !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
}

/* ===== INPUT WRAPPER ===== */
.custom-input {
    position: relative;
    background-color: #0F1B36 !important;
}

/* ===== ICON ===== */
.input-icon,
.input-icon-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* BUTTON RESET */
.input-icon-btn {
    background: transparent;
    border: none !important;
    padding: 0;
    cursor: pointer;
}

/* ICON HOVER */
.input-icon-btn:hover i {
    color: #ffffff;
}


/* Keep your existing styles unchanged above */

/* ===== TABLET & SMALLER DESKTOP (≤ 1199px) ===== */
@media (max-width: 1199px) {
    .login-form-section {
        width: 55%;                /* Give form a bit more space as screen shrinks */
        padding: 30px 20px;
    }

    .login-card {
        max-width: 480px;          /* Slightly smaller card */
    }

    .overlay-content {
        left: 30px;
        max-width: 380px;
        font-size: 0.95em;         /* subtle text size reduction */
    }

    .overlay-content h2 {
        font-size: 28px;
    }
}

/* ===== TABLET & PORTRAIT iPad (≤ 991px) ===== */
@media (max-width: 991px) {
    .login-wrapper {
        flex-direction: column;    /* Optional: you can keep row or switch to column */
        /* If you want background to still feel split → keep row and let form overlay fully */
    }

    .login-form-section {
        width: 100%;
        position: relative;        /* no longer absolute in some cases */
        padding: 40px 25px;        /* generous padding on tablets */
        background: rgba(7, 18, 44, 0.92);   /* subtle tint if background image is visible underneath */
    }

    .login-card {
        max-width: 460px;
        margin: 0 auto;            /* center the card */
    }

    .overlay-content {
        display: none;             /* your original behavior - good choice */
    }

    .card-body {
        padding: 2.5rem !important;   /* slightly less padding than desktop */
    }
}

/* ===== LARGE PHONES & SMALL TABLETS (≤ 767px) ===== */
@media (max-width: 767px) {
    .login-form-section {
        padding: 30px 20px;
    }

    .login-card {
        max-width: 100%;           /* full width on small screens */
    }

    .card-body {
        padding: 2rem !important;
    }

    .overlay-content h2 {
        font-size: 26px;           /* just in case you decide to show it sometimes */
    }
}

/* ===== VERY SMALL PHONES (≤ 576px) ===== */
@media (max-width: 576px) {
    .login-form-section {
        padding: 25px 15px;
    }

    .card-body {
        padding: 1.75rem !important;
    }

    .btn-lg {
        padding: 0.75rem 1.5rem;   /* slightly smaller button */
        font-size: 1rem;
    }

    .form-label {
        font-size: 0.95rem;
    }

    input.custom-input-field {
        height: 46px;
        font-size: 0.95rem;
    }
}