:root {
   	--primary: #294378;
   	--primary-light: #294378;
   	--primary-dark: #488ed3;
   	--accent: #ffab00;
   	--bg: #f5f7fa;
   	--card: #ffffff;
   	--text: #333;
   	--muted: #9e9e9e;
   	--error: #e53935;
   }

   * {
   	box-sizing: border-box;
   	margin: 0;
   	padding: 0;
   }

   body {
   	background: url("../img/login-background.jpg");
   	background-size: cover;
   	background-position: center;
   	font-family: 'Poppins', sans-serif;
   	height: 100vh;
   	display: flex;
   	align-items: center;
   	justify-content: center;
   	overflow: hidden;
   	position: relative;
	padding: 10px;
   }

   body::before {
   	content: '';
   	position: absolute;
   	top: 0;
   	left: 0;
   	width: 100%;
   	height: 100%;
   	backdrop-filter: blur(2px);
   	background: rgba(0, 0, 0, 0.2);
   	z-index: 1;
   }

   .login-wrapper {
   	width: 100%;
   	max-width: 360px;
   	padding: 28px 24px;
   	background: var(--card);
   	border-radius: 16px;
   	box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .15);
   	z-index: 2;
   	position: relative;
   	opacity: 0;
   	transform: translateY(20px);
   	animation: fadeIn 0.6s ease-out forwards;
   }

   @keyframes fadeIn {
   	to {
   		opacity: 1;
   		transform: translateY(0);
   	}
   }

   .brand {
   	text-align: center;
   	margin-bottom: 10px;
   }

   .brand svg {
   	width: 40px;
   	height: 40px;
   	fill: var(--primary);
   }

   .brand h1 {
   	font-size: 22px;
   	font-weight: 600;
   	color: var(--primary-dark);
   	letter-spacing: 1.5px;
   }

   .brand p {
   	font-size: 13px;
   	color: var(--muted);
   }

   .form-group {
   	margin-bottom: 16px;
   }

   .form-group label {
   	display: block;
   	font-size: 12px;
   	font-weight: 500;
   	color: var(--text);
   	margin-bottom: 6px;
   }

   .form-group input,
   .form-group select {
   	width: 100%;
   	padding: 8px 14px;
   	border: 1px solid #e0e0e0;
   	border-radius: 8px;
   	font-size: 14px;
   	transition: .3s;
   }

   .form-group input:focus,
   .form-group select:focus {
   	border-color: var(--primary-light);
   	box-shadow: 0 0 0 3px rgba(46, 125, 50, .15);
   	outline: none;
   }

   .btn-login {
   	width: 100%;
   	padding: 12px;
   	border: none;
   	border-radius: 8px;
   	/* background: linear-gradient(135deg, var(--primary-light), var(--primary)); */
	background: linear-gradient(135deg, #1d2d5f 0%, #4f8cca 100%);
   	color: #fff;
   	font-size: 15px;
   	font-weight: 600;
   	letter-spacing: 1px;
   	cursor: pointer;
   	transition: .3s;
	margin-top: 10px;
   }

   .btn-login:hover {
   	background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   	box-shadow: 0 6px 18px -6px rgba(46, 125, 50, .6);
   }

   .error-box {
   	background: rgba(229, 57, 53, .08);
   	border: 1px solid var(--error);
   	color: var(--error);
   	padding: 10px 12px;
   	border-radius: 6px;
   	font-size: 13px;
   	margin-bottom: 16px;
   	text-align: center;
   }

   .forgot {
   	text-align: center;
   	margin-top: 16px;
   }

   .forgot a {
   	color: var(--primary);
   	font-size: 12px;
   	text-decoration: none;
   	font-weight: 500;
   }

   .forgot a:hover {
   	text-decoration: underline;
   }

   /* Captcha styles */
   .captcha-container {
   	display: flex;
   	align-items: center;
   	gap: 8px;
   }

   .captcha-input {
   	flex: 1;
   }

   .captcha-input input {
   	width: 100%;
   }

   .captcha-reload button {
   	border: 1px solid #e0e0e0;
   	background: #fff;
   	color: var(--primary);
   	transition: .3s;
   }

   .captcha-reload button:hover {
   	border-color: var(--primary-light);
   	background: var(--primary-light);
   	color: #fff;
   }

   /* Password toggle */
   .password-wrapper {
   	position: relative;
   }

   .password-wrapper input {
   	padding-right: 40px;
   }

   .toggle-password {
   	position: absolute;
   	right: 12px;
   	top: 50%;
   	transform: translateY(-50%);
   	background: none;
   	border: none;
   	color: var(--muted);
   	cursor: pointer;
   	font-size: 16px;
   }

   .toggle-password:hover {
   	color: var(--primary);
   }

   .text-center{
	text-align: center;
   }
   /* Footer */
   .footer {
   	position: absolute;
   	bottom: 10px;
   	right: 10px;
   	color: #fff;
   	font-size: 14px;
   	text-align: center;
   	z-index: 3;
   }

   .footer span {
   	font-weight: 500;
   }

   .footer a {
   	color: #99c0ff;
   	text-decoration: none;
   	font-weight: 600;
   }

   .footer a:hover {
   	text-decoration: underline;
   }
   .error-text{
	font-size: 11px;
  text-indent: 10px;
  color: #d42424;
  letter-spacing: 0.5px;
  font-weight: 500;
   }
.d-none{
	display: none;
}
   .loader {
    width: 15px;
    height: 15px;
    border: 3px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }