@charset "utf-8";
/* CSS Document */

/* 

	Template Name : Ulkmor - Blog Article HTML Template
	Author : Rainbow Design
	
*/

/* Medium Devices, Desktops */
@media (max-width: 1024px) {
.article-row__body {
    padding: 20px;
}
.article-row .article-row__body .article-row__title{
	line-height:20px;
}
.article-row .article-row__body .article-row__title a{
	font-size:16px;
}
}

/* Medium Devices, Desktops */
@media (max-width: 991px) {
.box-comment .box-comment {
    margin-left: 0px;
}
.filter1 li span{
	padding: 6px 10px 6px 10px;
}
.featured-post-carousel-2 .owl-nav {
    bottom: 0px !important;
    left: 51%;
}
.article-spotlight__body {
    padding: 0px 0px 0px 0px;
}
.article-spotlight__body time{
	font-size: 12px;
	margin-bottom: 0px;
}
.article-spotlight__body h2 a{
	font-size: 16px;
	margin-bottom: 10px;
}
}
/* below lg breakpoint: mobile single-line nav is fully styled inline in nav.html
   (sticky pinned, brand | user | toggler). Keep this in sync so it wins every load. */
@media (max-width: 991.98px) {
	/* Mobile pinning = position:sticky, same as desktop. No spacer/padding-top needed
	   because sticky keeps its own flow space. */
	#siteHeader {
		position: sticky !important;
		top: 0 !important;
	}
	.header-lover {
		position: static;
	}
	/* row--gutter-lg sets --bs-gutter-x:40px, making .row's negative margin
	   (-20px) exceed .container's default padding (12px) -> .row overflows
	   8px each side and creates a mobile horizontal scrollbar. On mobile, drop
	   the gutter back to Bootstrap's default (24px) so the negative margin
	   (-12px) matches the container padding and nothing overflows. Desktop
	   keeps the wide 40px gutter. */
	.row--gutter-lg {
		--bs-gutter-x: 24px;
	}
	/* Desktop-only rule: .header-lover.is-fixed is position:fixed. On mobile keep
	   it harmless and never let it pin just the nav row. */
	.header-lover.is-fixed {
		position: static !important;
		animation: none !important;
		background: rgba(255, 255, 255, .42) !important;
		-webkit-backdrop-filter: blur(12px) !important;
		backdrop-filter: blur(12px) !important;
		border-bottom: 1px solid var(--glass-border) !important;
	}
	.header-lover .navbar {
		flex-wrap: wrap;
		align-items: center;
	}
	/* the whole logo+ad block sits on the left of the top line */
	.header-lover .navbar > .header-middle {
		flex: 0 1 auto;
		width: auto;
		order: 0;
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
		overflow: hidden;
	}
	.header-lover .navbar > .header-middle .logo-brand {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
	}
	.header-lover .navbar > .header-middle .navbar-brand {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	/* keep the ad banner visible but cap its size so it still fits on the same line */
	.header-middle .advertisement-banner {
		flex: 0 0 auto;
		max-height: 34px;
		margin: 0;
	}
	.header-middle .advertisement-banner img {
		height: 34px;
		width: auto;
		max-width: 120px;
		object-fit: contain;
	}
	/* hamburger + user on the right of the same line */
	.header-lover .navbar-toggler {
		order: 1;
		margin-left: auto;
		display: inline-block;
		flex: 0 0 auto;
	}
	.header-lover .navbar > .qk-user {
		order: 2;
		flex: 0 0 auto;
		margin-left: 8px;
	}
	.header-lover .navbar > .navbar-collapse {
		order: 3;
		width: 100%;
		flex: 0 0 auto;
	}
	/* hide the inline search box inside the collapsed menu on mobile */
	.header-lover .navbar-collapse > .qk-search {
		display: none !important;
	}
	/* on mobile the menu drops down as a vertical list inside a clear card container */
	/* apply the container styles during .collapsing too, so the look stays consistent
	   through the open/close animation (no flash of the unstyled state) */
	.header-lover .navbar-collapse.show,
	.header-lover .navbar-collapse.collapsing {
		margin-top: 10px;
		padding: 6px 8px;
		background: rgba(255, 255, 255, .82);
		-webkit-backdrop-filter: blur(16px);
		backdrop-filter: blur(16px);
		border: 1px solid var(--glass-border);
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
	}
	.header-lover .navbar-collapse.show .navbar-nav,
	.header-lover .navbar-collapse.collapsing .navbar-nav {
		width: 100%;
	}
	.header-lover .navbar .nav-item .nav-link {
		padding: 12px 12px;
		border-radius: 8px;
	}
	/* reset the desktop-only left padding so items don't stick to the edge */
	.header-lover .navbar .nav-item:first-child .nav-link {
		padding-left: 12px;
	}
	.header-lover .navbar-nav .nav-item + .nav-item .nav-link {
		border-top: 1px solid var(--glass-border);
	}
	.header-lover .navbar .nav-item.active .nav-link {
		background: rgba(124, 58, 237, .10);
	}
}
/* Small Devices, Tablets */
@media (max-width: 767px) {
.header-lover {
	padding: 10px 0px;
}
/* ad banner stays visible on phones; its size is capped in the <=991.98px block above */
.header-lover .header-middle .navbar-brand {
	font-size: 1.2rem !important;
}
/* navbar top row = logo+ad | hamburger | user ; keep it on a single non-wrapping line */
.header-lover .navbar {
	display: flex;
	flex: 1 1 100%;
	min-width: 0;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
}
.header-lover .navbar > .header-middle {
	order: 0;
	flex: 0 1 auto;
	width: auto;
	min-width: 0;
	overflow: hidden;
}
.header-lover .navbar > .navbar-toggler {
	order: 1;
	margin-left: auto;
	flex: 0 0 auto;
}
.header-lover .navbar > .qk-user {
	order: 2;
	flex: 0 0 auto;
	margin-left: 8px;
}
/* hide search box on phones */
.header-lover .navbar-collapse > .qk-search {
	display: none !important;
}
.header-lover .navbar > .qk-user .qk-signin,
.header-lover .navbar > .qk-user .user-dropdown-toggle {
	white-space: nowrap;
}

.header-upper-links {
	text-align: center;
}
.header-social {
	text-align: center;
	margin-top: 10px;
}
.header-newsletter-link a {
	font-size: 20px;
	padding: 4px 12px;
}
.header-lover .navbar .nav-item .nav-link {
	padding: 8px 10px;
}
.header-newsletter-link {
	top: 2px;
	transform: none;
}
/* menu is a single horizontal scrolling row (set in <=991.98px block) */
.header-lover .dropdown-toggle:after {
	position: relative;
	transform: none;
	top: 0;
}
.article-row {
	flex-direction: column;
	padding: 0;
}
.article-row__media {
	flex: 1 1 auto;
	max-width: 100%;
	width: 100%;
}
.article-row .article-row__media {
	display: block;
	width: 100%;
}
.article-video iframe{
	height:250px;
}
.filter1 li span {
    padding: 6px 8px 6px 8px;
    font-size: 10px;
}
.featured-post-carousel-2 .owl-nav{
	position: relative;
	left: 0;
	display: inline-block;
	margin-bottom:20px;
}
.featured-post-carousel-2 .owl-nav .owl-prev, .featured-post-carousel-2 .owl-nav .owl-next{
	margin: 0 6px 0 0px;
}
}
/* Extra Small Devices, Mobile */
@media (max-width: 575px) {
.logo-brand {
	text-align: center;
}
.featured-post-carousel .owl-nav .owl-prev, .featured-post-carousel .owl-nav .owl-next {
	width: 30px;
	font-size: 10px !important;
	height: 30px;
	line-height: 30px !important;
}
.article-hero .article-hero__body .article-hero__title {
	line-height: 22px;
}
.article-hero .article-hero__body .article-hero__title a {
	font-size: 20px;
}
.article-row__body {
	padding: 15px;
}
.article-row-group {
	padding: 15px !important;
}
.article-meta.justify-content-end{
	justify-content: left !important;
}
.article-body blockquote {
    padding: 15px 15px 15px 15px;
}
.article-body blockquote i {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
}
}