@font-face {
	font-family: "Vazir";
	src: url(../../fonts/vazir-font-v16.1.0/vazir-font-v16.1.0/Vazir.woff),
		url(../../fonts/vazir-font-v16.1.0/vazir-font-v16.1.0/Vazir.woff2);
}
body {
	direction: rtl;
	font-family: "Vazir";
}
main {
	background-image: url(../../images/login/login_bg.webp);
	background-size: cover;
}

h3 {
	font-family: "Vazir";
}

.login-img img {
	width: 100% !important;
	height: 400px;
}

.login-form {
	background: rgba(255, 255, 255, 0.25); /* نیمه‌شفاف */
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px); /* برای Safari */
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 0; /* اگر لازم داشتی می‌تونی گردش کنی */
}

.form-control {
	background-color: #ffffff00;
	margin-bottom: 0px;
	border: none !important;
}
.yellow-underline {
	border-bottom: 2px solid rgb(215, 190, 1);
	transition: 0.4s;
}
.form-control:focus {
	background-color: #ffffff00;
	box-shadow: none;
}
.form-control:focus + .yellow-underline {
	width: 100% !important;
}
.btn-login {
	border: none;
	border-radius: 10px;
	color: white;
	padding: 5px 12px;
	background: linear-gradient(to left, #090979, #00d4ff);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: 0.4s;
	opacity: 0.6;
  overflow: hidden;
}

.btn-login:hover {
	opacity: 1;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	box-shadow: 0 0 0 1000px #f9f9f900 inset !important; /* رنگ پس‌زمینه دلخواه */
	-webkit-text-fill-color: #000 !important;
	transition: background-color 5000s ease-in-out 0s;
}

a {
	text-decoration: none;
	color: #002e67;
	transition: 0.4s;
}
a:hover {
	color: #004ca8;
	cursor: pointer;
}

@media (max-width: 768px) {
	section.main-login {
		width: 90% !important;
		flex-direction: column;
	}

	.login-img {
		width: 100% !important;
		height: 250px !important;
	}

	.login-img img {
		height: 100% !important;
	}

	.login-form {
		width: 100% !important;
		padding: 20px !important;
		border-left: none !important;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		border-radius: 0 0 10px 10px !important;
	}

	.form-control {
		font-size: 1rem;
	}

	h3 {
		font-size: 1.5rem;
	}

	.btn-login {
		width: 100%;
		font-size: 1.1rem;
	}

	.yellow-underline {
		margin-left: auto;
		margin-right: auto;
		width: 80%;
	}
}
@media (max-width: 480px) {
	main {
		padding: 10px;
	}

	h3 {
		font-size: 1.3rem;
	}

	.btn-login {
		font-size: 1rem;
		padding: 10px;
	}
}