body { display: flex; height: 100vh; margin: 0; overflow: hidden; /* Prevent scrolling */ }
.left-panel { background: linear-gradient(135deg, #1E1671, #1573FF); color: white; width: 40%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; }
.right-panel { flex: 1; display: flex; justify-content: center; align-items: center; background: #f8f9fa; /* Light background color */ position: relative; padding: 40px; border-top-left-radius: 40px; border-bottom-left-radius: 40px; }
/* Visual elements (thin diagonal lines) */
.right-panel::before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(45deg, rgba(21, 115, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(21, 115, 255, 0.05) 50%, rgba(21, 115, 255, 0.05) 75%, transparent 75%, transparent); background-size: 40px 40px; z-index: 1; }
.login-container { width: 100%; max-width: 400px; background: white; border-radius: 12px; padding: 30px; text-align: center; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; animation: fadeIn 1s ease-in-out; }
.illustration { width: 100%; max-width: 180px; margin-bottom: 20px; position: relative; }

  /* Animation */
  @keyframes fadeIn {  0% {
 opacity: 0;
 transform: translateY(20px);
}
 100% {
 opacity: 1;
 transform: translateY(0);
}
}
.form-floating input { border-radius: 0; border: 1px solid #1E1671; transition: border-color 0.3s; }
.form-floating input:focus { border-color: #4EB4FF; box-shadow: none; }
.btn-login { background-color: #1E1671; color: white; border: none; transition: background-color 0.3s ease-in-out; }
.btn-login:hover { background-color: #4EB4FF; }
.logo { width: 250px; margin-bottom: 20px; }
.client-logo { width: 80px; margin-top: 20px; }

  /* Responsive Design */
  @media (max-width: 576px) {
.illustration { max-width: 140px; }
.logo { width: 80px; }
.client-logo { width: 60px; }
.right-panel::before { display: none; }
}