body {
 margin: 0;
 font-family: 'Inter', 'Arial', sans-serif;
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 15px;
}
.container {
 width: 100%;
 max-width: 1000px;
 background-color: #ffffff;
 border-radius: 20px;
 box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
 overflow: hidden;
 display: flex;
 flex-direction: column;
}
.left-panel {
 flex: 1;
 background: linear-gradient(135deg, #3b82f6, #1e3a8a);
 color: #ffffff;
 padding: 40px;
 text-align: center;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}
.left-panel {
    position: relative;
}

.left-bottom-link {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.login-img {
 width: 100%;
 max-width: 300px;
 height: auto;
 margin-bottom: 20px;
}
.left-panel p {
 font-size: 1rem;
 opacity: 0.9;
}
.left-panel p a {
 color: #ffffff;
 font-weight: bold;
 text-decoration: none;
}
.left-panel p a:hover {
 text-decoration: underline;
}
.right-panel {
 flex: 1;
 padding: 40px;
 display: flex;
 flex-direction: column;
 justify-content: center;
}
.right-panel h2 {
 font-size: 1.8rem;
 font-weight: 700;
 color: #1e3a8a;
 margin-bottom: 15px;
}
.right-panel h2 span {
 color: #3b82f6;
}
.error-message {
 color: #dc2626;
 font-weight: 600;
 margin-bottom: 15px;
}
.success-message {
 color: #16a34a;
 font-weight: 600;
 margin-bottom: 15px;
}
.input-group {
 position: relative;
 margin-bottom: 20px;
}
.form-control {
 border: none;
 border-bottom: 2px solid #1e3a8a;
 border-radius: 0;
 padding: 12px 40px 12px 12px; /* Increased right padding for toggle icon */
 font-size: 1rem;
 color: #333;
 transition: border-color 0.3s ease;
}
.form-control:focus {
 border-color: #3b82f6;
 box-shadow: none;
 outline: none;
}
.password-group {
 position: relative;
}
.password-toggle {
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 cursor: pointer;
 color: #1e3a8a;
 display: block; /* Ensure always visible */
 visibility: visible; /* Explicit visibility */
 z-index: 10; /* Ensure it stays above input */
}
.password-toggle:hover {
 color: #3b82f6;
}
.btn-custom {
 background: linear-gradient(135deg, #3b82f6, #1e3a8a);
 border: none;
 color: #ffffff;
 border-radius: 25px;
 padding: 12px 30px;
 font-size: 1rem;
 font-weight: 600;
 transition: background 0.3s ease;
}
.btn-custom:hover {
 background: linear-gradient(135deg, #1e3a8a, #3b82f6);
}
.form-footer {
 display: flex;
 justify-content: flex-end;
 margin-bottom: 20px;
}
.form-footer a {
 text-decoration: none;
 color: #1e3a8a;
 font-size: 0.9rem;
}
.form-footer a:hover {
 color: #3b82f6;
 text-decoration: underline;
}
.create-account {
 text-align: right;
 margin-top: 0px;
}
.create-account a {
 text-decoration: none;
 color: #1e3a8a;
 font-weight: 600;
}
.create-account a:hover {
 color: #3b82f6;
 text-decoration: underline;
}
/* Responsive Design */
/* Mobile View (up to 576px) */
@media (max-width: 576px) {
 .container {
   max-width: 100%;
   border-radius: 10px;
   margin: 10px;
 }
 .left-bottom-link {
    position: static !important;
    margin-top: 25px !important;
    padding-top: 10px;
  }

  .left-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important;
  }
 .login-img {
   max-width: 200px;
 }
 .left-panel p {
   font-size: 0.9rem;
 }
 .right-panel {
   padding: 20px;
 }
 .right-panel h2 {
   font-size: 1.5rem;
 }
 .form-control {
   font-size: 0.9rem;
   padding: 10px 35px 10px 10px; /* Adjusted for mobile */
 }
 .btn-custom {
   padding: 10px 20px;
   font-size: 0.9rem;
 }
 .password-toggle {
   right: 8px;
 }
}
/* Tablet View (576px to 768px) */
@media (min-width: 576px) and (max-width: 768px) {
 .container {
   max-width: 90%;
   flex-direction: row;
 }
 .left-panel, .right-panel {
   flex: 1;
   padding: 30px;
 }
 .login-img {
   max-width: 250px;
 }
 .right-panel h2 {
   font-size: 1.6rem;
 }
 .form-control {
   padding: 12px 40px 12px 12px;
 }
}
/* Laptop View (768px and above) */
@media (min-width: 768px) {
 .container {
   flex-direction: row;
 }
 .left-panel, .right-panel {
   flex: 1;
   padding: 50px;
 }
 .login-img {
   max-width: 300px;
 }
}