.header-title, .header-subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EEEEEE;
    color: #322C33;
    border-bottom: var(--orange) 16px solid;
    /* padding: 10px 20px; */

}
hr {
    border: 0.5px solid;
    width: 100%;
    /* width: 100%; */
    /* margin: 1em 0; */

}
header ul, header li {
    display: inline;
    margin-right: 15px;
    list-style: none;
    padding: 0;
}
.login-header {
    background-color: #fff;
    /* padding: 10px 20px;
    border-bottom: 1px solid #fff; */
    display: flex;
    /* display: inline-block; */
    justify-content: center;
    align-items: center;
    flex-direction: column; /* stack h1 and h2 vertically */
    gap: 1em; /* space between h1 and h2 */
}

.login-header h1 {
    display: flex;
    color: #322C33;
    font: bold 2em;
}
.login-header h1,
.login-header h2 {
    text-align: center;
}

.login-header h2 {
    display: flex;
    margin-top: 0.5em;    /* space above h2 */
}
main {
    margin-left: 50px; /* width of sidebar + some gap */
    margin-right: 50px; /* width of sidebar + some gap */
    padding: 20px;
    flex-grow: 1; /* allows main to take up remaining space */
    display: flex;
    flex-direction: column; /* stack children vertically */
    /* align-items: center; center children horizontally */
    align-items: center;
    justify-content: center; /* center children vertically */
    min-height: 60vh; /* Optional: ensures some vertical space */
    gap: 0.25em; /* space between children */
    /* background: #322C33; */
    /* min-height: calc(100vh - 60px); full height minus header
    border: 1px solid var(--orange); */
}
.main-inner {
    display: inline-flex;
    flex-direction: column; /* stack children vertically */
    align-items: center; /* center children horizontally */
    max-width: 1000px; /* Optional: limit width for better readability */
}
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the container takes full height */
}
.login-container {
     /* Makes the container stretch to fill available width */
    align-self: stretch;
    background: #EEEEEE;
    border: 4px solid var(--orange);
    padding: 2em;
    display: grid;
    grid-template-columns: 1fr; /* single column layout */
    gap: 1em; /* space between children */
    /* width: 900px;
    max-width: 850px; */
    /* margin: 1em auto; */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    /* width: 800px;  */
    border-radius: 20px;
}
/* .login-header,.login-container {
    width: 100%;
} */
 .login-form {
    width: 100%;
    margin: 0;
    padding: 1em;
    box-sizing: border-box;
 }
.login-container table {
    margin-left: auto;
    margin-right: auto;
    /* width: 100%; */
    border-collapse: separate;
    border-spacing: 0 0.5em;
    width: 60%;
}

.login-container th,
.login-container td {
    font-weight: normal;
    padding: 0.25em;
    /* font-size: 1em; */
    /* text-align: center; */
}
.login-container tbody {
    /* text-align: center;
    align-content: center;
    align-items: center; */
}
.login-container th {
    /* width: 20%; */
    /* text-align: left; */
}

.login-container input[type="text"],
.login-container input[type="password"],
.login-container select,
.login-container textarea {
    /* Makes fields fill the cell/container */
    /* width: 100%;  */
    box-sizing: border-box;
    width: 100%;
    /* padding: 0.5em; */
    font-size: 1em;
    padding: 0.5em;
    border: 1px solid #ccc;
    border-radius: 12px;
}
.login-container button[type="submit"] {
    display: block;
    margin-left: auto;   /* Pushes the button to the right */
    margin-right: auto;
    margin-top: 1em;
    padding: 0.5em 2em;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 32px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    font-size: 1.2em;
}
.right-align-link {
    text-align: center;
    margin: 0.5em 0 0 0;
    font: bold;
}
.logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.logo-container img {
    /* width: 211px;
    height: 88px;
    max-width: 211px;
    max-height: 88px; */
    width: clamp(158px, 316.5px, 422px);
    height: clamp(66px, 132px, 176px);
    object-fit: contain;
    display: block;
    background: transparent; /* optional: ensures no background color */
    margin-left: 1rem;
}
.captcha-row {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo-container img.gi-logo {
    width: clamp(132px, 264px, 316.5px);
    height: clamp(55px, 110px, 132px);
}