.backdrop {
	display: none; /* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 999;
}

.popup {
	display: none; /* Hidden by default */
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.32); /* Initial smaller size */
	background: linear-gradient(to right, #ffffff 0%, #e9e9e9 100%);
	color: #4b4b4b;
	padding: 5px;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
	z-index: 1000;
	text-align: center;
	transition: transform 0.8s ease-out, opacity 0.8s ease-out; /* Smooth zoom-in and fade-in */
	animation: fadeOut 0.5s;
}

@media screen and (min-width: 450px) {
	.popup {
		transform: translate(-50%, -50%) scale(0.5);
	}
	
}

.popup-header {
	text-align: right;
	position: absolute;
}

.close-btn {
	position: absolute;
	top: 20px;
	right: -1000px; /* Adjusted right position */
	font-size: 34px; /* Size of the cross icon */
	color: rgb(68, 68, 68);
	background: #ffffff;
	border: 2px solid #e2e4d4;
	border-radius: 50%; /* Makes the button circular */
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center; /* Vertically center the icon */
	justify-content: center; /* Horizontally center the icon */
	cursor: pointer;
	z-index: 1000;
	transition: background 0.3s ease, color 0.3s ease;
}

.close-btn:hover {
	background: #3b593d;
	color: #ffffff;
}

/* Keyframe for fade-in and zoom-in */
@keyframes popupAnimation {
	0% {
		transform: translate(-50%, -50%) scale(0.7); /* Start from smaller size */
		opacity: 0; /* Start hidden */
	}
	100% {
		transform: translate(-50%, -50%) scale(1); /* End with normal size */
		opacity: 1; /* Fully visible */
	}
}