/* ----------------------------------------------------------------

	Custom CSS



	Add all your Custom Styled CSS here for New Styles or

	Overwriting Default Theme Styles for Better Handling Updates

-----------------------------------------------------------------*/



/*Home CSS Start*/

#video-slider-mute {

	position: absolute;

	top: auto;

	left: auto;

	right: 20px;

	bottom: 10px;

	width: 40px;

	height: 40px;

	background-color: var(--cnvs-contrast-0);

	color: var(--cnvs-contrast-1000);

	font-size: 1.25rem;

	border: 0;

}

#video-slider-mute i {

	position: relative;

	left: 1px;

}

#video-slider-mute i:nth-of-type(2),

#video-slider-mute.video-muted i:nth-of-type(1) {

	display: none;

}

#video-slider-mute.video-muted i:nth-of-type(2) {

	display: block;

}

.block-expand-categories h1,

.block-expand-categories h2,

/*	.block-expand-categories h3 { font-family: Playfair Display, serif !important; }*/

.block-expand-categories .expand-category {

	--height: 50vh;

	--responsive-height: 60px;

	--hover-flex: 1.8;

	position: relative;

	background-position: center center;

	background-size: cover;

	min-height: var(--responsive-height);

	cursor: pointer;

	overflow: hidden;

	/* Ensure the overlay and content fit within the container */

}

.block-expand-categories .expand-category .overlay {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: #2581be;
/*	background-color: #214653;*/

	opacity: 0.6;

	z-index: 1;

	transition: background-color 0.3s ease;

}

.block-expand-categories .expand-category .overlay.no-opacity {

	opacity: 0;

}

.block-expand-categories .expand-category h4 {

	position: absolute;

	top: 50%;

	left: 0;

	right: 0;

	text-align: center;

	margin: 0;

	transform: translateY(-50%);

	z-index: 2;

	/* Ensure the text is above the overlay */

	color: white;

	/* Ensure the text is visible */

}

.block-expand-categories .expand-category h3 {

	position: relative;

	z-index: 2;

	/* Ensure the text is above the overlay */

	color: white;

	/* Ensure the text is visible */

}

.block-expand-categories .video-category video {

	width: 100%;

	height: 100%;

	object-fit: cover;

	z-index: 0;

	/* Ensure the video is below the overlay and text */

}

/* Larger Device */

@media (min-width: 992px) {

	.block-expand-categories .expand-category {

		height: var(--height);

		flex: 1;

		transition: flex 1s ease;

		-webkit-backface-visibility: hidden;

		transform: translate3d(0, 0, 0);

	}



	.block-expand-categories .expand-category:nth-child(2) {

		flex: 1.8;

		/* Increase the flex value for the center image */

	}



	.block-expand-categories:not(.on-click) .expand-category:hover,

	.block-expand-categories.on-click .expand-category.active {

		flex: var(--hover-flex);

	}



	.block-expand-categories .expand-category h4 {

		opacity: 1;

		top: auto;

		bottom: 10px;

		transform: none;

		transition: opacity .4s ease;

	}



	.block-expand-categories:hover .expand-category:not(.active):not(:hover) h4,

	.block-expand-categories.on-click .expand-category:not(.active) h4 {

		opacity: 0;

	}

}

/* Hover effect for the overlay */

.block-expand-categories .expand-category:hover .overlay {

	opacity: 0;

}



.block-expand-categories .expand-category:hover h3 {

	/* opacity: 0; */

	background: #2280bd;
/*	background: #214653;*/

	opacity: 0.6;

	padding: 10px !important;

	font-size: 17px;

}

.loader-bg {
	width: 100%;
	height: 100%;
	background: #4d505280;
	position: fixed;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999999999;
}
.loader-bg h3 {
	position: fixed;
	color: #ff5e31;
	font-size: 24px;
}
.loader {
	width: 8em;
	height: 8em;
	font-size: 22px;
	box-sizing: border-box;
	border-top: 0.3em solid #505050;
	border-radius: 50%;
	position: relative;
	animation: rotating 2s ease-in-out infinite;
	--direction: 1;
}
.loader span {
	position: absolute;
	color: #FF5E31;
	width: inherit;
	height: inherit;
	text-align: center;
	line-height: 10em;
	font-family: sans-serif;
	animation: rotating 2s linear infinite;
}
.loader::before,
.loader::after {
	content: '';
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	box-sizing: border-box;
	top: -0.2em;
}
.loader:::before {
	border-top: 0.3em solid dodgerblue;
	transform: rotate(120deg);
}
.loader::after {
	border-top: 0.3em solid #ff5e31;
	transform: rotate(240deg);
}
@keyframes rotating {
	50% {
		transform: rotate(calc(180deg));
	}
	100% {
		transform: rotate(calc(360deg));
	}
}