/* ----------------------------------------------------------------
Custom CSS

Add all your Custom Styled CSS here for New Styles or
Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/*--- Typography ---*/
:root {
	--bs-body-font-size: 1.2rem;
}

.text-color {
	color: var(--textcolor);
}

.subtext-color {
	color: var(--subtextcolor);
}

#content p {
	text-align: justify;
}

h2 > span:not(.nocolor):not(.badge),
h3 > span:not(.nocolor):not(.badge) {
	color: #d51017;
}

.color,
.fbox-plain .fbox-icon i,
.fbox-content a,
.entry-categories a {
	color: #d51017 !important;
}

/*--- Header ---*/
.menu-item:hover > .menu-link,
.menu-item.current > .menu-link,
.entry-title h2 a:hover,
.entry-title h3 a:hover,
.entry-title h4 a:hover {
	color: #d51017;
}

.menu-link {
	font-size: 1rem;
}

/*--- Banner ---*/
.hero-diagonal::before {
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.85) 30%,
		rgba(0, 0, 0, 0.25) 100%
	);
}

/*--- Footer ---*/
.dark #footer .social-icon.si-borderless,
#footer.dark .social-icon.si-borderless {
	color: rgba(255, 255, 255, 0.9) !important;
}

/*--- Video Card ---*/
.owl-carousel .jumbotron {
	height: 560px;
}

/* 
numbered pagination css
*/
.page-numbers {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: #efefef;
	text-align: center;
	line-height: 30px;
	color: inherit;
	transition: all 0.25s ease;
}

.page-numbers.current,
.page-numbers:hover {
	background-color: #ff8200;
	color: #fff;
}

.fbox-icon {
	width: 4.5rem;
}

.fbox-plain .fbox-icon i {
	font-size: 2rem;
}

/*--- Grid Card ---*/
.card-thumbnail img, .video-thumbnail {
	width: 100%;
	height: 16rem;
	object-fit: cover;
}

#page-title {
	padding: 3rem 0 1.5rem;
}

/*--- Grid Post ---*/
.si-share span {
	margin-right: 1rem;
}

/* .entry-title, .entry-meta, .entry-image, .entry-content {
	width: 875px;
	margin: 0 auto;
} */

/*--- Responsive ---*/
@media (max-width: 545px) {
	.owl-carousel .jumbotron {
		height: 226px;
	}

	.hero-diagonal::before {
		background-image: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.8) 20%,
			rgba(0, 0, 0, 0) 100%
		);
	}

	.video-title {
		transform: translateY(4rem);
	}

	.yoga-video img {
		width: 80%;
		margin: 10%;
	}

	.device-sm #oc-teachers .owl-nav .owl-prev, .device-xs #oc-teachers .owl-nav .owl-prev {
		left: 24px !important;
	}

	.device-sm #oc-teachers .owl-nav .owl-next, .device-xs #oc-teachers .owl-nav .owl-next {
		right: 24px !important;
	}

	.play-icon i {
		width: 54px;
		height: 54px;
		line-height: 54px;
		font-size: 24px;
	}

	.header-size-custom #logo img {
		height: 75px;
	}
}

@media (max-width: 1360px) {
	.entry-title, .entry-meta, .entry-image, .entry-content {
		width: auto;
		margin: 0 auto;
	}
}

@media (max-width: 991px) {
	.desktop-banner {
		display: none;
	}

	.mobile_view {
		height: 43rem;
	}

	.not-animated, [data-animate]:not(.animated) {
		opacity: 1;
	}

	.heading-block h2 {
		font-size: 2rem;
	}
}

@media (min-width: 992px) {
	.menu-container:not(.mobile-primary-menu) {
		justify-content: flex-end;
	}

	.mobile-banner {
		display: none;
	}

	.heading-block h2 {
		font-size: 3rem;
	}
}