/* Existing .main-layout-container remains the same */
.main-layout-container {
    display: flex;
    width: 100vw;
    height: 100vh;
}

.carousel-section {
    flex: 4; /* Takes 4 parts of the available space (e.g., 80% if login is 1 part) */
    position: relative; /* Keep relative for containing elements if needed later */
    overflow: hidden;
    /* IMPORTANT CHANGE: Stack children vertically */
    display: flex;
    flex-direction: column; /* Stack header and video wrapper vertically */
    /* Remove justify-content/align-items here if you want header to stick to top
       and wrapper to fill remaining space */
    background-color: #000;
}

    .carousel-section .lms-menu-header {
        /* ... existing styles ... */
        display: flex;
        justify-content: center; /* CHANGE: This will center all direct children horizontally */
        align-items: center;
        /* Remove `justify-content: space-between;` from .menu-header if it was there */
    }

/*.menu-header .navbar-brand {
        color: white;
        font-weight: bold;
        text-decoration: none;
        font-size: 1.8em;*/ /* Larger font for brand */
/*}*/

.lms-menu-header .navbar-brand {
    /* To push the brand to the left if .menu-header is centering everything,
       give it an auto margin on the right. */
    margin-right: auto;
    /* ... existing styles ... */
}

.lms-menu-header .nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

    .lms-menu-header .nav li {
        margin-top: 15px;
        margin-left: 10px; /* Space between nav items */
        width: 200px;
        color: #62cb31;
    }

.lms-menu-header .nav a {
    color: white;
    text-decoration: none;
    padding: 20px 0;
    transition: color 0.3s ease;
    font-size: 1em;
    text-align: center;
    color: #62cb31 !important;
}

    .lms-menu-header .nav a:hover {
        color: #4CAF50; /* A nice green on hover */
    }

.video-wrapper {
    flex-grow: 1; /* Make the video wrapper take up all available vertical space */
    position: relative; /* Essential for positioning the absolute video children */
    overflow: hidden; /* Hide any overflow from the videos */
    display: flex; /* To help center content within it if desired */
    justify-content: center;
    align-items: center;
}

.carousel-video {
    /* Keep these rules as they are for the full-background effect within video-wrapper */
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    background-size: cover;
    transition: opacity 1s ease-in-out;
    opacity: 0;
    object-fit: cover; /* Keep object-fit: cover for aspect ratio */
}

    .carousel-video.active {
        opacity: 1;
    }

/* Existing .login-section remains the same */
.login-section {
    /*    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 1rem;*/
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #acd354;
    padding: 1rem;
    align-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Your new menu header styles */
/*.menu-header {
    width: 100%;*/ /* Occupy full width of carousel-section */
/*background-color: rgba(0, 0, 0, 0.7);*/ /* Semi-transparent black background */
/*color: white;
    padding: 15px 30px;*/ /* Adjust padding as needed */
/*box-sizing: border-box;*/ /* Include padding in element's total width */
/*z-index: 10;*/ /* Ensure it's above the video if any overlap */
/* Use flexbox for internal navigation layout */
/*display: flex;
    justify-content: space-between;*/ /* Brand left, nav links right */
/*align-items: center;
    min-height: 60px;*/ /* Give it a minimum height */
/*}*/



/* If you are using Bootstrap, remove/adjust the .navbar, .navbar-brand, .nav, .navbar-nav specific styles
   as Bootstrap provides its own, and you'd just apply Bootstrap classes like:
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">...</nav>
   But I've included basic custom styles assuming you want control.
*/

.login-card {
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent background */
    border-radius: 1rem; /* Rounded corners */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
    width: 100%;
    max-width: 400px; /* Limit card width */
    text-align: center;
    /* No need for relative/z-index here as it's in its own flex item */
}

.form-input {
    border-radius: 0.5rem; /* Rounded input fields */
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    width: 100%;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}

    .form-input:focus {
        outline: none;
        border-color: #3b82f6; /* Blue focus ring */
    }

.login-button {
    background-color: #3b82f6; /* Blue button */
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    width: 100%;
}

    .login-button:hover {
        background-color: #2563eb;
        transform: translateY(-2px);
    }

    .login-button:active {
        transform: translateY(0);
    }

.error-message {
    color: #ef4444; /* Red error message */
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.music-button {
    background-color: #10b981; /* Green button */
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    margin-top: 1rem;
    display: inline-block; /* To allow margin-top */
}

    .music-button:hover {
        background-color: #059669;
        transform: translateY(-2px);
    }

    .music-button:active {
        transform: translateY(0);
    }


/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .main-layout-container {
        flex-direction: column; /* Stack video and login vertically */
    }

    .carousel-section {
        flex: 1; /* Video takes less height on mobile */
        min-height: 40vh; /* Ensure video is visible */
    }

    .login-section {
        flex: 1; /* Login section takes remaining height */
        padding: 1.5rem;
    }

    .login-card {
        max-width: 90%; /* Allow login card to be wider on small screens */
    }
}