body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    header {
        height: 3rem; /* Example height for the header */
        background-color: #fff; /* Adjust as needed */
        z-index: 10; /* Ensure header is above other elements */
        position: fixed; /* Keep the header fixed at the top */
        top: 0;
        width: 100%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional styling for the header */
    }

    #backgroundimage {
      display: flex; /* Enable flexbox */
      justify-content: center; /* Center horizontally */
      align-items: flex-start; /* Align content near the top */
      height: calc(100vh - 8rem); /* Full viewport height minus header */
      background-repeat: no-repeat;
      background-size: cover;
      background-position: top center;
      padding-top: 10rem; /* Add padding to control top spacing */
  }

  form {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 400px;
    margin: 0 auto; /* Center the form horizontally */
    display: flex; /* Use flexbox to control layout */
    flex-direction: column; /* Stack form contents vertically */
    align-items: center; /* Center form contents horizontally */
    text-align: center;
}



      .form-group {
        width: 15rem; /* Set the desired width */
        margin: 0 auto; /* Center the container horizontally */
        display: flex; /* Use flexbox for layout */
        flex-direction: column; /* Stack child elements vertically */
        align-items: center; /* Horizontally center child elements */
        justify-content: center; /* Vertically center child elements */
        text-align: center; /* Ensure text inside is also centered */
        height: auto; /* Let height adjust automatically based on content */
      }



      h1 {
        font-size: 2rem;
        margin-bottom: 20px;
        color: #333;
      }

      label {
        display: block; /* Ensure label is on its own line */
        font-size: 1rem;
        color: #555;
        margin-bottom: 15px; /* Add space below the label */
        text-align: center; /* Center-align the label text */

      }

      input {
        width: 100%; /* Full-width input box */
        max-width: 300px; /* Set a maximum width for consistency */
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        box-sizing: border-box;
        text-align: center;
        margin: 0 auto 20px; /* Add vertical spacing below the input box */
        display: block; /* Place the input box on a new line */
      }

      input:focus {
        border-color: #007BFF;
        outline: none;
      }

      #loginButton {
        background-color: #4a4a4a;
        border: none;
        color: white;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'Poppins', sans-serif;
        padding: 0.5rem 1.5rem;
        text-decoration: none;
        border-radius: 0.5rem;
        cursor: pointer;
        margin: 0.5rem;
        width: 250px;
        height: 40px;
        font-size: 14px;
        text-decoration: none !important; /* Ensure no underline on active state */
      }

      #loginButton:hover {
        background-color: blue;
        color: white;
        text-decoration: none !important; /* Ensure no underline on hover state */
      }

      #loginButton:active,
      #loginButton:focus {
        background-color: blue;
        transform: translateY(2px);
        text-decoration: none !important; /* Ensure no underline on active state */
        outline: none; /* Remove focus outline */
        box-shadow: none; /* Remove any box-shadow (like blue border) */
        border: none; /* Ensure no border is applied */
      }

      @media (max-width: 768px) {
        #backgroundimage {
            padding-top: 5rem; /* Adjust top spacing for smaller screens */
        }
    }