/* General Layout */
.login-container {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
}

/* Branding Column */
.brand-column {
    background: #008080; /* Blue background */
    color: white;
    text-align: center;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers content vertically */
    align-items: center;
    width: 100%;
    height: 100vh; /* Makes branding fill the height */
}

/* Logo Styling */
.brand-column img {
    max-width: 80%; /* Ensures it fits within the column */
    height: auto; /* Maintains aspect ratio */
    display: block;
    margin: 0 auto; /* Centers the logo horizontally */
}

/* Login Column */
.login-column {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Centering the Login Box */
.login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; /* Adjust width as needed */
    max-width: 400px;
}

/* Mobile Mode Fixes */
@media (max-width: 768px) {
    .login-container {
        display: block; /* Change flex to block layout */
        height: auto; /* Prevent the blue background issue */
    }
    
    .brand-column {
        display: flex;
        flex-direction: row; /* Keep image and heading in the same row */
        align-items: center; /* Align them vertically */
        justify-content: flex-start; /* Left-align content */
        width: 100%;
        padding: 15px; /* Adjust padding */
        height: auto;
        order: -1; /* Ensure branding stays at the top */
        text-align: left; /* Left-align text */
    }

    .brand-column img {
        max-width: 25%; /* Keep image at 25% of container */
        margin-right: 120px; /* Space between image and heading */
    }
    /* Ensure Login Stays Centered */
    .login-column {
        position: static; /* Remove absolute positioning */
        min-height: 60vh; /* Keep proper vertical spacing */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Fix Login Box Placement */
    .login-box {
        position: relative;
        top: auto;
        left: auto;
        transform: none; /* Remove unnecessary centering */
        margin: 20px auto; /* Ensure proper spacing */
    }
}