/* Splash Screen Styles */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #dbcadc;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease-in-out; /* Fade-out animation */
  }
  
  /* Splash Content */
  .splash-content {
    text-align: center;
    animation: fadeIn 1.5s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center align all content */
  }
  
  .splash-logo {
    width: 180px; /* Adjusted logo size */
    animation: logoBounce 2s infinite; /* Bounce effect for the logo */
    margin-bottom: 20px; /* Space between logo and title */
  }
  
  .splash-content h1 {
    font-size: 3rem; /* Bigger font size for the title */
    color: #4c2673; /* Deep purple */
    margin: 10px 0; /* Spacing between title and description */
    animation: textPop 1.5s ease-in-out;
  }
  
  .splash-content p {
    font-size: 1.5rem; /* Slightly larger font for description */
    color: #4c2673;
    margin: 0;
    animation: textPop 1.5s ease-in-out;
  }
  
  /* Loader Animation */
  .loader {
    margin-top: 30px; /* Space between text and loader */
    width: 50px; /* Bigger loader */
    height: 50px; /* Bigger loader */
    border: 4px solid #4c2673; /* Purple loader */
    border-top: 4px solid transparent;
    border-radius: 50%;
    animation: spin 1.2s linear infinite;
  }
  
  /* Animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes logoBounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  
  @keyframes textPop {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  /* Hidden class to fade out the splash screen */
  #splash-screen.hidden {
    opacity: 0; /* Fade to transparent */
    pointer-events: none; /* Disable interactions */
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  
  

/*Ensures a consistent and modern appearance for the entire page with a neutral background*/
body {
    font-family: Arial, sans-serif; /* Sets a clean, readable font */
    background-color: #f0f0f0; /* Light gray background for contrast */
    margin: 0; /* Removes default margin */
    padding: 0; /* Removes default padding */
}

/*Creates a flexible structure for managing the two main sections of the page*/
.container {
    display: flex; /* Enables flexbox for layout management */
    flex-direction: column; /* Stacks sections vertically by default */
    height: 100vh; /* Full viewport height for a balanced layout */
}

/*Ensures both sections adapt dynamically to available space*/
.left-section, .right-section {
    flex: 1; /* Ensures equal space allocation between sections */
    padding: 20px; /* Adds spacing within each section */
}

/*=============================== LEFT SECTION ===================================*/
/* Ensures the left section is visually distinct, with centered content and responsive design*/
.left-section {
    background-color: #4A3E74; /* Purple background for branding */
    color: white; /* Contrasts well with the background */
    display: flex; /* Enables flexbox for alignment */
    flex-direction: column; /* Stacks content vertically */
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
    text-align: center; /* Centers text alignment */
}

.left-section img {
    max-width: 100%; /* Ensures the image is fully responsive */
    height: auto; /* Maintains the aspect ratio */
}

.left-section h2 {
    font-weight: 700; /* Makes the heading bold */
    line-height: 38px; /* Improves readability */
    margin: 20px 0; /* Adds space above and below the heading */
}
/*============================= END OF LEFT SECTION ==========================================*/

/*=============================== RIGHT SECTION==========================================*/
/*Creates a clean and professional space for the login form*/
.right-section {
    background-color: white; /* Clean background for form */
    display: flex; /* Enables flexbox */
    flex-direction: column; /* Stacks content vertically */
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally */
}

.logo {
    max-width: 150px; /* Restricts the logo size */
    margin-bottom: 20px; /* Adds spacing below the logo */
}

form {
    display: flex; /* Uses flexbox for the form layout */
    flex-direction: column; /* Stacks form elements vertically */
    width: 80%; /* Restricts the form width */
}

label {
    margin: 10px 0 5px; /* Adds spacing around labels */
}

input {
    padding: 10px; /* Adds inner spacing for better usability */
    margin-bottom: 10px; /* Adds spacing below each input field */
    border: 1px solid #ccc; /* Light border for inputs */
    border-radius: 25px; /* Rounded corners for modern design */
}

button {
    padding: 10px; /* Adds inner spacing for the button */
    background-color: #4A3E74; /* Purple background matching branding */
    color: white; /* Text color contrasts with the button */
    border: none; /* Removes default border */
    border-radius: 25px; /* Rounded corners for consistency */
    cursor: pointer; /* Changes cursor to pointer on hover */
    margin-top: 20px; /* Adds space above the button */
}

button:hover {
    background-color: #6B4DE6; /* Changes color on hover for feedback */
}

a {
    color: #4A3E74; /* Light purple color for links */
    text-decoration: none; /* Removes underline for a cleaner look */
    margin-top: 10px; /* Adds spacing above links */
    text-align: center; /* Centers the link */
}

a:hover {
    text-decoration: underline; /* Adds underline on hover for feedback */
    color: #6B4DE6;

  }

.new-here-container {
    margin-top: 20px; /* Adds space above the container */
    text-align: center; /* Centers content inside the container */
}

.new-here-label {
    display: block; /* Makes the label a block element */
    margin: 10px 0 5px; /* Adds spacing around the label */
    text-align: center; /* Centers the text */
    margin-top: 50px; /* Adds additional space above the label */
}

/* Forgot Password Modal Styles */
.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.1); /* Initial scale for a zoom-in effect */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Modal Content */
.modal-content {
    background-color: #ffffff; /* White background for contrast */
    padding: 2.5rem; /* Adds more padding around the content */
    border-radius: 16px; /* Rounded corners for a soft appearance */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); /* Subtle shadow for depth */
    max-width: 450px; /* Sets a fixed maximum width */
    width: 90%; /* Ensures responsiveness on smaller screens */
    display: flex;
    flex-direction: column; /* Stacks content vertically */
    align-items: center; /* Centers content horizontally */
    text-align: center; /* Centers the text inside the modal */
    position: relative; /* For the close button alignment */
}
/* Modal Heading */
.modal-content h2 {
    font-size: 1.5rem; /* Increases heading size slightly */
    font-weight: bold;
    margin-bottom: 1rem; /* Adds space below the heading */
}

/* Modal Text */
.modal-content p {
    font-size: 1rem;
    margin: 0.5rem 0 1.5rem; /* Adds spacing above and below */
    color: #333; /* Darker text for better readability */
}

/* Input Field in Modal */
.modal-content input {
    width: 100%; /* Makes the input span the width of the modal */
    padding: 12px; /* Adds inner padding */
    margin-bottom: 1rem; /* Adds space below the input field */
    border: 1px solid #ccc; /* Light border for inputs */
    border-radius: 8px; /* Rounded corners */
    font-size: 1rem; /* Readable font size */
    outline: none; /* Removes default browser outline */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

/* Input Field Focus Effect */
.modal-content input:focus {
    border-color: #4A3E74; /* Branding color on focus */
    box-shadow: 0 0 5px rgba(74, 62, 116, 0.5); /* Subtle shadow */
}

/* Button in Modal */
.modal-content button {
    padding: 12px 20px; /* Adds inner padding */
    background-color: #4A3E74; /* Matches branding */
    color: white; /* White text for contrast */
    border: none; /* Removes border */
    border-radius: 8px; /* Rounded corners */
    font-size: 1rem; /* Standard font size */
    font-weight: bold; /* Bold text for emphasis */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover effects */
    width: 100%; /* Ensures the button spans the modal width */
}

/* Button Hover Effect */
.modal-content button:hover {
    background-color: #6B4DE6; /* Brighter purple on hover */
    transform: scale(1.05); /* Slight zoom-in */
}

/* Close Button */
.modal .close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    font-size: 1.5rem;
    color: #333; /* Darker color for visibility */
    background: none; /* No background */
    border: none; /* No border */
}

/* Modal Visibility */
.modal.hidden {
    opacity: 0;
    pointer-events: none;
}

.modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}






/* Media Queries for Responsiveness */
@media (min-width: 768px) {
    .container {
        flex-direction: row; /* Aligns sections side-by-side */
    }

    .left-section, .right-section {
        flex: 1; /* Ensures equal width for both sections */
        padding: 40px; /* Increases padding for larger screens */
    }

    form {
        width: 60%; /* Increases form width for better usability */
    }
}

@media (min-width: 1024px) {
    .left-section img {
        max-width: 80%; /* Restricts the image size for larger screens */
    }

    form {
        width: 50%; /* Restricts form width for better visual balance */
    }
}

@media (max-width: 767px) {
    .left-section h2 {
        font-size: 24px; /* Reduces font size for smaller screens */
        line-height: 32px; /* Adjusts line height for readability */
    }

    .right-section {
        padding: 20px; /* Adds inner spacing for better usability */
    }

    form {
        width: 90%; /* Expands form width for smaller screens */
    }
}