.blinds-video-modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

.blinds-video-modal.active {
	display: block;
}

.blinds-video-modal-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.blinds-video-modal.active .blinds-video-modal-overlay {
	opacity: 1;
}

.blinds-video-modal-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	width: 90%;
	max-width: 800px;
	opacity: 0;
	transition: all 0.3s ease-in-out;
}

.blinds-video-modal.active .blinds-video-modal-content {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

.blinds-video-wrapper {
	border-radius: 10px;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
}

.blinds-video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.blinds-video-modal-close {
	position: absolute;
	top: -34px;
	left: -34px;
	width: 68px;
	height: 68px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	z-index: 1;
	transition: transform 0.3s ease; /* Smooth rotation effect */
}

.blinds-video-modal-close:hover {
	background: none;
	transform: rotate(180deg); /* Rotate 180 degrees */
}

.blinds-video-modal-close svg {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 767px) {
	.blinds-video-modal-close {
		width: 56px;
		height: 56px;
		top: -10px;
		left: -15px;
	}
}