/* --- General & Body Styling --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* --- OPTION 2: PASTE THIS CODE IN YOUR CSS FILE --- */
body {
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* Define the gradient and set its size to be much larger than the screen */
    background: linear-gradient(-45deg, #f8d7da, #fcebbd, #d4edda, #cce5ff);
    background-size: 400% 400%;
    /* Call the animation */
    animation: gradientShift 15s ease-in-out infinite;
}

/* The animation that moves the background gradient */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
/* --- Main Login Container --- */
.login-container {
    display: flex;
    width: 950px;
    max-width: 95%;
    min-height: 600px;
    background-color: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    overflow: hidden;
}

/* --- Image Pane (Left Side) --- */
.login-image-pane {
    flex: 1.1;
    position: relative; /* Needed for the absolute-positioned slides */
}

/* --- NEW CSS FOR THE IMAGE SLIDER --- */
.image-slider {
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0; /* All slides are invisible by default */
    animation: imageFade 18s linear infinite; /* 18s total for 3 images */
}

/* Make the first slide visible on page load */
.slide:first-child {
    opacity: 1;
}

/* Stagger the animation for each slide */
.slide:nth-child(2) {
    animation-delay: 6s; /* Starts after the first image's duration */
}
.slide:nth-child(3) {
    animation-delay: 12s; /* Starts after the second image's duration */
}

/* The animation that creates the fade effect */
@keyframes imageFade {
    0% { opacity: 0; }
    10% { opacity: 1; } /* Fade in */
    33% { opacity: 1; } /* Hold */
    43% { opacity: 0; } /* Fade out */
    100% { opacity: 0; }
}


/* --- Form Pane (Right Side) - No changes needed here --- */
.login-form-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 50px;
}

.form-content { width: 100%; }
.logo { display: block; width: 120px; margin: 0 auto 25px; }

.welcome-text { text-align: center; margin-bottom: 30px; }
.welcome-text h2 { color: #1a202c; font-size: 24px; font-weight: 600; }
.welcome-text p { color: #718096; font-size: 15px; }

.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 14px; color: #4a5568; margin-bottom: 8px; font-weight: 500; }
.input-wrapper { position: relative; }
.input-wrapper .icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #a0aec0; }
.input-wrapper input { width: 100%; padding: 12px 15px 12px 45px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 15px; color: #2d3748; transition: border-color 0.3s, box-shadow 0.3s; }
.input-wrapper input::placeholder { color: #a0aec0; }
.input-wrapper input:focus { outline: none; border-color: #f39c12; box-shadow: 0 0 0 3px rgba(243, 156, 18, 0.2); }

.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.year-select { padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 6px; font-family: 'Poppins', sans-serif; font-size: 14px; color: #4a5568; background-color: #fff; }
.forgot-password { font-size: 14px; color: #f39c12; text-decoration: none; font-weight: 500; transition: color 0.3s; }
.forgot-password:hover { color: #e67e22; }

.login-button { width: 100%; padding: 15px; background-color: #f39c12; color: #ffffff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.3s, transform 0.2s; }
.login-button:hover { background-color: #e67e22; transform: translateY(-2px); }
.login-button:active { transform: translateY(0); }

.copyright { text-align: center; margin-top: 30px; font-size: 13px; color: #a0aec0; }

@media (max-width: 850px) {
    .login-container { flex-direction: column; width: 100%; max-width: 450px; height: auto; min-height: auto; margin: 20px; }
    .login-image-pane { display: none; }
    .login-form-pane { padding: 30px; }
}