/* *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Graphik Web', 'Montserrat', 'Avenir', sans-serif; }
body, html { height: 100%; width: 100%; display: flex; flex-direction: column; background: white; } */

body { font-family: 'Graphik Web', 'Montserrat', 'Avenir', sans-serif; background: #f4f4f4; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; }
.login-container { width: 100%; max-width: 400px; padding: 20px; }
.login-box { background: #ffffff; padding: 30px; border-radius: 8px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); text-align: center; }


.header { width: 100%; height: 80px; display: flex; align-items: center; justify-content: left; background: white; border-bottom: 0px solid #e98404; padding: 0 20px; position: fixed; top: 0; left: 0; z-index: 1000; }
.header .logo { width: 60px; margin-right: 15px; }
.header h1 { letter-spacing: 1px; font-family: 'Graphik Web', 'Montserrat', 'Avenir', sans-serif; font-size: 28px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #002060; }
.container { flex: 1; display: flex; width: 100%; margin-top: 80px; }
.logo { width: 80px; margin-bottom: 10px; }
h2 { color: #002060; font-size: 24px; font-weight: 600; margin-bottom: 10px; }
h2 .highlight { color: #e98404; }
.error { background: #ffcccc; color: #d8000c; padding: 10px; margin-bottom: 15px; border-radius: 5px; font-weight: 500; }

input { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 14px; transition: 0.3s ease-in-out; }
input:focus { border-color: #002060; outline: none; }
.footer { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); text-align: center; width: 100%; padding: 6px 0; background-color:white; color: #002060; font-size: 14px; }

/* .login-eye, .register-eye, .reset-paswrd-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; font-size: 18px; color: #888; }
.login-eye:hover, .register-eye:hover, .reset-paswrd-eye:hover { color: #333; } */

/* @media (max-width: 480px) { .form-group { max-width: 100%; } .form-group input { font-size: 14px; padding: 10px 35px 10px 10px; } .login-eye { font-size: 16px; } .form-group a { font-size: 12px; } } */
@media (max-width: 768px) { .login-container { width: 90%; } .form-group input { font-size: 14px; padding: 10px; } .login-button { font-size: 16px; padding: 10px; } }

.login-eye { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer;color: #888; }
.login-eye:hover { color: #333; }
.login-button { width: 100%; padding: 12px; background: #002060; color: white; border: none; border-radius: 5px; font-size: 18px; cursor: pointer; margin-top: 15px; font-weight: 600; transition: 0.3s; }
.login-button:hover { background: #e98404; }
.login-footer { text-align: center; margin-top: 15px; font-size: 14px; }
.login-footer a { color: #002060;; text-decoration: none; font-weight: bold; }
.login-footer a:hover {  color: #fc8c04; text-decoration: underline; }
@media (max-width: 480px) { .login-box { width: 90%; padding: 20px; } .form-group input { font-size: 12px; padding: 8px; } .login-button { font-size: 14px; padding: 8px; } }

.form-group a { font-size: 14px; color: #002060; text-decoration: none; margin-top: 5px; align-self: flex-start; }
.form-group a:hover { text-decoration: underline; }
.form-group { text-align: left; margin-bottom: 20px; }
.form-group label { font-weight: bold; color: #002060; font-size: 14px; }
.form-group input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.form-group input { width: calc(100% - 24px); max-width: 350px; padding: 12px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; outline: none; font-family: 'Graphik Web', 'Montserrat', 'Avenir', sans-serif; display: block; margin: 0 auto; }
.password-wrapper { position: relative; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; }
.modal-content { background: white; padding: 20px; border-radius: 5px; text-align: center; width: 80%; max-width: 500px; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); }
.ok-button { width: 15%; padding: 8px; background-color: #28214c; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 15px; transition: background-color 0.3s ease; }
.ok-button:hover { background-color: #fc8c04; }