body {
        font-family: Georgia, 'Times New Roman', Times, serif;
        background: linear-gradient(135deg, #637d9bff, #538bc2ff);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-image: url(bg.jpg);
        background-size: cover;
    }

    .container {
        background: #f5f6f7a2; /* silver tone */
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
        height:auto;
        width: 300px;
        text-align: center;
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
    input.error {
    border: 2px solid red;
    background-color: #ffe6e6;
}
input.success {
    border: 2px solid green;
    background-color: #e6ffe6;
}

    .container:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
    }

    .container img {
        width: 90px;
        display: block;
        margin: 0 auto 15px auto;
    }

    h2 {
        margin-bottom: 9px;
        font-family: Georgia, 'Times New Roman', Times, serif;
        color: #1e2a38; /* navy text */
    }

    .form-title {
        font-family: Georgia, 'Times New Roman', Times, serif;
        margin-bottom: 15px;
        text-align: left;
        color: #2c3e50;
        font-size: 18px;
        font-weight: bold;
    }

    .form-group {
        font-family: Georgia, 'Times New Roman', Times, serif;
        margin-bottom: 15px;
        text-align: left;
        margin-right: 15px;
        color:#2c3e50;
    }

    input, select, button {
        width: 100%;
        padding: 10px;
        margin-top: 5px;
        border-radius: 6px;
        border: 1px solid #ccc;
        font-size: 14px;
        transition: all 0.3s ease;
    }

    input:focus, select:focus {
        border-color: #1e2a38;
        outline: none;
        box-shadow: 0 0 6px rgba(30, 42, 56, 0.4);
    }

    button {
        background: #6487aeff; /* navy */
        color: white;
        border: none;
        cursor: pointer;
        font-weight: bold;
        letter-spacing: 0.5px;
        transition: background 0.3s ease, transform 0.2s ease;
    }

    button:hover {
        background: #2c3e50;
        transform: scale(1.03);
    }

    .toggle {
        margin-top: 12px;
        cursor: pointer;
        color: #1e2a38;
        font-size: 14px;
        transition: color 0.3s ease;
    }

    .toggle:hover {
        color: #007bff; /* subtle hover accent */
    }

    .message {
        margin: 12px 0;
        color: #006d77;
        font-weight: 500;
    }

    /* Password Toggle Styles */
    .password-container {
        position: relative;
        width: 100%;
    }

    .password-container input {
        padding-right: 40px !important;
        box-sizing: border-box;
    }

    .password-toggle-icon {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #666;
        z-index: 10;
        font-size: 1rem;
    }

    script{
        font-family: Georgia, 'Times New Roman', Times, serif\;
    }

#signup-form {
  max-height: 390px;      /* limit height */
  overflow-y: auto;       /* enable vertical scrolling */
  padding-right: 10px;    /* spacing so scrollbar doesn’t overlap text */
  border:  #cccccc00; /* optional border */
  border-radius: 8px;     /* rounded corners */
  background: #ffffff00;       /* white background */

}
#signup-form::-webkit-scrollbar {
  width: 20px; /* scrollbar thickness */
}

#signup-form::-webkit-scrollbar-track {
  background: transparent; /* removes background behind scrollbar */
}

#signup-form::-webkit-scrollbar-thumb {
  background-color: #1a6de3; /* orange scroll handle */
  border-radius: 10px;
}

#signup-form {
  scrollbar-width: thin;            /* for Firefox */
  scrollbar-color: #396db7 transparent;
}