/* Importing fonts from Google */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* Reseting */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body {
	background: #ecf0f3;
	overflow: hidden;
}

.wrapper {
	margin: 30px 20px;
	padding: 40px 15px 15px 15px;
	max-width: 350px;
	min-height: 500px;
}

@media (min-width : 380px) {
	.wrapper {
		max-width: 350px;
		min-height: 500px;
		margin: 80px auto;
		margin-top: 20px;
		padding: 40px 30px 30px 30px;
		background-color: #ecf0f3;
		border-radius: 15px;
		box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #fff;
	}
}

@media (max-width: 379px) {
	.wrapper {
		border: none;
		background-color: transparent;
		box-shadow: none;
		/* Also remove box-shadow for consistency */
		padding: 0;
		/* Remove padding for mobile */
		display: block !important;
		/* Ensure it's always visible on mobile */
	}
}

.logo {
	width: 100%;
	margin: auto;
}

.logo img {
	width: 100%;
	height: 30%;
	object-fit: cover;
	border-radius: 50%;
	/* box-shadow: 0px 0px 3px #5f5f5f, 0px 0px 0px 5px #ecf0f3, 8px 8px 15px
		#a7aaa7, -8px -8px 15px #fff; */
}

.wrapper .name {
	font-weight: 600;
	font-size: 1.4rem;
	letter-spacing: 1.3px;
	padding-left: 10px;
	color: #555;
}

@media (min-width : 380px) {
	.wrapper .form-field input {
		/*  width: 100%;
	    display: block; */
		border: none;
		outline: none;
		background: none;
		font-size: 1rem;
		color: #666;
		padding: 10px 15px 10px 10px;
		box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
	}
}

.wrapper .form-field {
	padding-left: 10px;
	margin-bottom: 20px;
	border-radius: 20px;
	box-shadow: inset 8px 8px 8px #cbced1, inset -8px -8px 8px #fff;
}

.wrapper .form-field .fas {
	color: #555;
}

.wrapper .btn {
	box-shadow: none;
	width: 100%;
	height: 40px;
	background-color: #03A9F4;
	color: #fff;
	border-radius: 25px;
	box-shadow: 3px 3px 3px #b1b1b1, -3px -3px 3px #fff;
	letter-spacing: 1.3px;
}

.wrapper .btn:hover {
	background-color: #039BE5;
}

.wrapper a {
	text-decoration: none;
	font-size: 0.8rem;
	color: #03A9F4;
}

.wrapper a:hover {
	color: #039BE5;
}

/*Splash Screen for Login*/
.splash-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #333;
	color: #fff;
}

.typewriter-text h1 {
	text-align: center;
	font-size: 60px;
	font-weight: 500;
	overflow: hidden;
	/* Hide overflow content */
	border-right: 0.15em solid white;
	/* Typing cursor effect */
	white-space: nowrap;
	/* Keep text on one line */
	margin: 0;
	padding: 0;
	letter-spacing: 0.15em;
	/* Adjust spacing between characters */
	animation: typing 3s steps(30) forwards;
	/* Typing animation */

}

.typewriter-text h3 {
	text-align: center;
	font-size: 30px;
	font-weight: 400;
	overflow: hidden;
	/* Hide overflow content */
	border-right: 0.15em solid white;
	/* Typing cursor effect */
	white-space: nowrap;
	/* Keep text on one line */
	margin: 0;
	padding: 0;
	letter-spacing: 0.15em;
	/* Adjust spacing between characters */
	animation: typing 3s steps(30) forwards;
	/* Typing animation */
}

@keyframes typing {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

.fade-out-div {
	padding: 20px;
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	transition: opacity 1s ease-out;
}

.fade-in-div {
	padding: 20px;
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	display: none;
	/* Hide the element by default */
}

.hidden {
	opacity: 0 !important;
	pointer-events: none;
}

.visible {
	opacity: 1 !important;
}

#watermark-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	background-repeat: repeat;
	background-size: 400px 400px;
	/* Adjusted for better spacing and visibility */
}

/* Password Requirements Styling */
.password-requirements {
	background-color: #f8f9fa;
	border-radius: 10px;
	padding: 15px;
	box-shadow: inset 2px 2px 5px #cbced1, inset -2px -2px 5px #fff;
}

.requirement-item {
	font-size: 0.85rem;
	margin-bottom: 8px;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	gap: 8px;
}

.requirement-item i {
	font-size: 1rem;
	transition: all 0.3s ease;
}

.requirement-item span {
	transition: color 0.3s ease;
}

/* Password Strength Meter */
.password-strength {
	background-color: #f8f9fa;
	border-radius: 10px;
	padding: 12px;
	box-shadow: inset 2px 2px 5px #cbced1, inset -2px -2px 5px #fff;
}

.password-strength .progress {
	border-radius: 10px;
	overflow: hidden;
	background-color: #e9ecef;
}

.password-strength .progress-bar {
	transition: width 0.4s ease, background-color 0.4s ease;
}

#passwordStrengthText {
	display: block;
	margin-top: 5px;
	font-weight: 500;
}

/* Toggle Password Button */
.toggle-password {
	background: transparent !important;
	border: none !important;
	padding: 5px 8px !important;
	color: #666;
	cursor: pointer;
	transition: color 0.3s ease;
	z-index: 10;
	width: auto !important;
	height: auto !important;
	box-shadow: none !important;
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
}

.toggle-password:hover {
	color: #03A9F4;
	background: transparent !important;
}

.toggle-password:focus {
	outline: none;
	box-shadow: none !important;
}

/* Ensure form-field has relative positioning for absolute button */
.form-field.position-relative {
	position: relative;
}

/* Adjust input padding for toggle button */
.form-field input.pe-5 {
	padding-right: 45px !important;
	width: 100%;
}

/* Animation for requirement changes */
@keyframes pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

.requirement-item i.fa-check-circle {
	animation: pulse 0.3s ease;
}