/*========================================================================

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

========================================================================*/

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

	Table of contents
	
	01. Common
	02. Header
	03. Featured post
	04. Grid style
	05. List style
	06. Sidebar
	07. Carousel arrow style
	08. Instagram
	09. Footer
	10. Advertisement
	11. Inner page title
	12. Single post
	13. Comment box
	14. Send comment form
	15. Login, Register box
	16. Contact us
	17. About us
	18. Counter
	19. 404 page
	20. Faq
	21. Post video item
	22. Gallery
	23. Privacy Terms
	
----------------------------------*/

/* ===================================
	Design Tokens
=================================== */
:root {
	--color-primary: #dc3545;
	--color-primary-dark: #c42332;
	--color-accent: #667eea;
	--color-accent-2: #764ba2;
	--color-dark: #212425;
	--color-dark-2: #2d3031;
	--color-surface: #1f2024;
	--color-bg: #ffffff;
	--color-bg-soft: #f8f9fa;
	--color-bg-mute: #f5f5f5;
	--color-heading: #333333;
	--color-text: #6c6d74;
	--color-muted: #999999;
	--color-border: rgba(0, 0, 0, .1);
	--color-border-soft: rgba(0, 0, 0, .06);
	--radius-sm: 8px;
	--radius: 10px;
	--radius-lg: 14px;
	--radius-xl: 16px;
	--radius-pill: 999px;
	--shadow-sm: 0 2px 10px rgba(0, 0, 0, .06);
	--shadow: 0 10px 30px rgba(0, 0, 0, .08);
	--shadow-lg: 0 18px 48px rgba(0, 0, 0, .12);
	--ease: cubic-bezier(.4, 0, .2, 1);
	--transition: all .3s var(--ease);
	--font-base: 'Lato', sans-serif;

	/* spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 40px;
	--space-8: 48px;
	--space-9: 72px;
	--space-10: 96px;

	/* type scale */
	--text-xs: .75rem;
	--text-sm: .875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.375rem;
	--text-2xl: 1.75rem;
	--text-3xl: 2.25rem;
	--text-4xl: 3rem;

	/* surface / layers */
	--surface: #ffffff;
	--surface-soft: #f7f8fa;
	--surface-mute: #eef0f3;
	--on-surface: var(--color-heading);
	--on-surface-soft: var(--color-text);
	--border: var(--color-border);
	--border-strong: rgba(0, 0, 0, .14);

	/* brand gradient */
	--gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));

	/* ----- aliases kept compatible with profile.html tokens ----- */
	--bg-primary: var(--surface);
	--bg-secondary: var(--surface-soft);
	--bg-tertiary: var(--surface-mute);
	--bg-hover: #f0f1f4;
	--border-color: var(--border);
	--text-primary: var(--color-heading);
	--text-secondary: var(--color-text);
	--text-muted: var(--color-muted);
	--primary-color: var(--color-primary);
	--primary-dark: var(--color-primary-dark);
	--gradient-hover: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
	--radius-md: 12px;
	--radius-full: 999px;
	--shadow-md: 0 12px 32px rgba(0, 0, 0, .1);
	--shadow-xl: 0 26px 60px rgba(0, 0, 0, .16);
	--font-family: var(--font-base);
	--font-size-xs: var(--text-xs);
	--font-size-sm: var(--text-sm);
	--font-size-base: var(--text-base);
	--font-size-lg: var(--text-lg);
	--font-size-xl: var(--text-xl);
	--font-size-2xl: var(--text-2xl);
	--font-size-3xl: var(--text-3xl);
	--transition-fast: .15s ease;
	--transition-normal: .3s ease;
	--error-color: #e74c3c;
	--success-color: #27ae60;
}

/* Theme Font Use */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/* font-family: 'Lato', sans-serif; */

/* ===================================
	01. Common
=================================== */

/* 博客分页器样式 */
.blog-pagination {
    margin-top: 40px !important;
    margin-bottom: 20px !important;
}

.blog-pagination .pagination {
    gap: 8px;
}

.blog-pagination .page-item {
    margin: 0 !important;
}

.blog-pagination .page-link {
    border-radius: 12px !important;
    border: 2px solid #e9ecef !important;
    background: #fff !important;
    color: #495057 !important;
    font-weight: 500 !important;
    font-family: 'Lato', sans-serif !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
}

.blog-pagination .page-link:hover:not(.active) {
    border-color: #667eea !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    color: #667eea !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3) !important;
}

.blog-pagination .page-item.active .page-link {
    border: none !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4) !important;
    transform: scale(1.05) !important;
}

.blog-pagination .page-item.disabled .page-link {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* ===================================
    分类页面分页器样式
=================================== */
#category-pagination {
    margin-top: 40px !important;
    margin-bottom: 20px !important;
}

#category-pagination .pagination-container {
    width: 100%;
}

#category-pagination .pagination {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    flex-wrap: wrap;
}

#category-pagination .pagination-list {
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

#category-pagination .pagination-item {
    margin: 0;
}

#category-pagination .pagination-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    min-width: 44px;
    height: 44px;
    border-radius: 12px !important;
    border: 2px solid #e9ecef !important;
    background: #fff !important;
    color: #495057 !important;
    font-weight: 500 !important;
    font-family: 'Lato', sans-serif !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    font-size: 14px;
}

#category-pagination .pagination-link:hover:not(.current):not(.disabled) {
    border-color: #667eea !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%) !important;
    color: #667eea !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3) !important;
    text-decoration: none;
}

#category-pagination .pagination-item.active .pagination-link.current,
#category-pagination .pagination-link.current {
    border: none !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4) !important;
    transform: scale(1.05) !important;
}

#category-pagination .pagination-item .pagination-link.disabled,
#category-pagination .pagination-link.disabled {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

#category-pagination .pagination-link.prev,
#category-pagination .pagination-link.next {
    font-size: 18px;
}

#category-pagination .pagination-link.prev.disabled,
#category-pagination .pagination-link.next.disabled {
    transform: none !important;
}

/* 悬停动画效果 */
#category-pagination .pagination-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
    pointer-events: none;
}

#category-pagination .pagination-link:hover::before {
    left: 100%;
}

/* 移动端优化 */
@media (max-width: 767px) {
    .blog-pagination {
        margin-top: 30px !important;
        margin-bottom: 15px !important;
    }

    .blog-pagination .pagination {
        gap: 4px;
        justify-content: center;
    }

    .blog-pagination .page-link {
        padding: 8px 10px !important;
        min-width: 32px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        font-weight: 500 !important;
    }

    .blog-pagination .page-item {
        margin: 0 1px !important;
    }

    /* 移动端隐藏文字只显示图标 */
    .blog-pagination .page-btn-previous span,
    .blog-pagination .page-btn-next span {
        display: none !important;
    }

    .blog-pagination .page-btn-previous i,
    .blog-pagination .page-btn-next i {
        margin: 0 !important;
    }

    /* 分类页面分页器移动端优化 */
    #category-pagination {
        margin-top: 30px !important;
        margin-bottom: 15px !important;
    }

    #category-pagination .pagination {
        gap: 4px;
    }

    #category-pagination .pagination-link {
        padding: 8px 12px !important;
        min-width: 36px !important;
        height: 36px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
    }

    /* 博客卡片移动端优化 */
    .blog-list .col-lg-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .blog-list .article-card__media img {
        height: 280px !important;
    }

    .blog-list .article-card__body {
        padding: 15px !important;
    }

    .blog-list .article-card__title {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .blog-list .article-card__body p {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
}

/* 平板端优化 */
@media (min-width: 768px) and (max-width: 991px) {
    .blog-pagination .page-link {
        padding: 10px 14px !important;
        min-width: 42px !important;
        font-size: 13px !important;
    }

    .blog-pagination .pagination {
        gap: 7px;
    }

    /* 分类页面分页器平板端优化 */
    #category-pagination .pagination-link {
        padding: 9px 14px !important;
        min-width: 40px !important;
        height: 40px !important;
        font-size: 13px !important;
    }

    #category-pagination .pagination {
        gap: 6px;
    }
}

/* 悬停动画效果 */
.blog-pagination .page-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.blog-pagination .page-link:hover::before {
    left: 100%;
}

/* ===================================
    空数据样式
=================================== */
.empty-data-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    border: 2px dashed #dee2e6;
    text-align: center;
    min-height: 400px;
}

.empty-data-icon {
    margin-bottom: 24px;
    font-size: 80px;
    color: #667eea;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.empty-data-title {
    font-size: 28px;
    font-weight: 700;
    color: #495057;
    margin-bottom: 16px;
    font-family: 'Lato', sans-serif;
}

.empty-data-description {
    font-size: 16px;
    color: #6c757d;
    margin-bottom: 32px;
    max-width: 480px;
    line-height: 1.6;
    font-family: 'Lato', sans-serif;
}

.empty-data-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
    font-family: 'Lato', sans-serif;
}

.empty-data-button i {
    margin-right: 8px;
    font-size: 14px;
}

.empty-data-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    text-decoration: none;
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* 移动端优化 */
@media (max-width: 767px) {
    .empty-data-container {
        padding: 60px 24px;
        min-height: 300px;
    }

    .empty-data-icon {
        font-size: 60px;
        margin-bottom: 20px;
    }

    .empty-data-title {
        font-size: 22px;
        margin-bottom: 12px;
    }

    .empty-data-description {
        font-size: 14px;
        margin-bottom: 24px;
        padding: 0 16px;
    }

    .empty-data-button {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/* 平板端优化 */
@media (min-width: 768px) and (max-width: 991px) {
    .empty-data-container {
        padding: 70px 32px;
        min-height: 350px;
    }

    .empty-data-icon {
        font-size: 70px;
    }

    .empty-data-title {
        font-size: 24px;
    }

    .empty-data-description {
        font-size: 15px;
    }
}

/* 加载状态样式 */
.blog-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    flex-direction: column;
}

.blog-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

/* 错误状态样式 */
.blog-error {
    text-align: center;
    padding: 3rem 1rem;
    background: #f8f9fa;
    border-radius: 12px;
    border: 2px dashed #e9ecef;
}

.blog-error i {
    font-size: 3rem;
    color: #dc3545;
    margin-bottom: 1rem;
}

.blog-error h4 {
    color: #dc3545;
    margin-bottom: 1rem;
}

.blog-error .btn {
    margin-top: 1rem;
    padding: 10px 24px;
    border-radius: 8px;
}
::selection {
	background-color: #4c454c;
	color: #fff;
}
::-moz-selection {
 background-color: #4c454c;
 color: #fff;
}
img {
	max-width: 100%;
}
body {
	font-size: 14px;
	font-family: 'Lato', sans-serif;
	color: #6C6D74;
	letter-spacing: 0.5px;
}
p {
	line-height: 24px;
	font-size: 14px;
	color: #8A8A93;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	color: #333;
	padding: 0px;
	letter-spacing: 1px;
	font-family: 'Lato', sans-serif;
}
h1 {
	font-size: 60px;
	font-weight: 700;
}
h2 {
	font-size: 36px;
	font-weight: 700;
}
h3 {
	font-size: 26px;
	font-weight: 700;
}
h4 {
	font-size: 24px;
	font-weight: 700;
	line-height: 22px;
}
h5 {
	font-size: 18px;
	font-weight: 700;
}
h6 {
	font-size: 16px;
	font-weight: 700;
}
ul, li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
a{
	text-decoration:none;
}
a:hover {
	text-decoration: none;
}
a:hover, a:focus, a:active {
	text-decoration: none;
}
.dropcap {
	font-size: 24px;
	line-height: 45px;
	display: inline-block;
	border-radius: 100%;
	float: left;
	width: 45px;
	height: 45px;
	color: #fff;
	text-align: center;
	margin: 0 12px 0 0;
	background-color: #dc3545;
	position: relative;
	text-transform: uppercase;
}
/* --- Top Scroll --- */
.scroll-top {
	display: none;
	position: fixed;
	bottom: 2px;
	text-align: center;
	right: 2%;
	width: 30px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	color: #fff;
	background-color: #dc3545;
	text-decoration: none;
	border-radius: 4px;
	z-index: 9999;
}
.scroll-top:hover {
	color: #fff!important;
	text-decoration: none;
	background-color: #c42332;
}
/* --- Buttons --- */
.btn.btn--primary {
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 12px 20px;
	font-size: 12px;
	font-weight: 600;
	line-height: 22px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	background-color: #dc3545;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.btn.btn--primary:hover {
	text-decoration: none;
	color: #fff;
	background-color: #383338;
}
/* --- Loading --- */
#preloader {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	width: 100%;
	text-align: center;
	height: 100%;
	vertical-align: middle;
	height: 100%;
	overflow: visible;
	background-color: #fff;
}
#preloader .spinner-grow {
	top: 50%;
	position: relative;
}
/* --- block title --- */
.section-heading {
	border-bottom: 1px dashed rgba(0,0,0,0.1);
	border-radius: 10px;
	overflow: hidden;
}
.section-heading h2 {
	font-weight: 600;
	font-size: 18px;
	line-height: 24px;
	padding: 12px 0px;
	position: relative;
	border-top: 4px solid;
	text-transform: uppercase;
	display: flex;
	align-items: center;
}
.section-heading__more a {
	display: inline-block;
	border: 1px solid rgba(0,0,0,0.1);
	padding: 2px 12px;
	font-size: 10px;
	background-color: rgba(0,0,0,0.1);
	color: #333;
	border-radius: 6px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.section-heading__more a:hover {
	background-color: #dc3545;
	color: #fff;
}
/* ===================================
	02. Header
=================================== */
/* header upper */
header {
	background-color: #212425;
}
.header-upper {
	padding: 10px 0px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}
/* header upper links */
.header-upper-links li {
	position: relative;
	padding-right: 12px;
	margin-right: 8px !important;
}
.header-upper-links li:last-child {
	padding-right: 0px;
	margin-right: 0px !important;
}
.header-upper-links li:last-child:after {
	display: none;
}
.header-upper-links li:after {
	position: absolute;
	content: "";
	width: 1px;
	height: 12px;
	right: 0px;
	top: 50%;
	background-color: #cecece;
	transform: translateY(-50%);
}
.header-upper-links li a {
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.header-upper-links li a:hover {
	color: #dc3545;
}
.languages-block .dropdown button {
	padding: 0px;
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 1px;
	align-items: center;
	display: flex;
}
.languages-block .dropdown button img {
	padding-right: 6px;
}
.languages-block .dropdown .dropdown-menu {
	border-radius: 0px;
	padding: 0;
}
.languages-block .dropdown .dropdown-menu .dropdown-item {
	padding: 10px 14px;
	color: #333;
	border-bottom: 1px solid rgba(0,0,0,.15);
}
.languages-block .dropdown .dropdown-menu .dropdown-item:last-child {
	border-bottom: 0px;
}
/* header lover */
.header-lover-center {
	position: relative;
}
/* header upper social */
.header-lover {
	position: sticky;
	top: 0;
	z-index: 1030;
	border-top: 1px solid rgba(255,255,255,0.2);
	border-bottom: 1px solid rgba(255,255,255,0.2);
	background-color: #2d3031;
}
/* JS fixed fallback (guaranteed sticky) */
.header-lover.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
/* hero page title (homepage H1) */
.hero-title {
	font-size: 2.4rem;
	font-weight: 700;
	color: #2d3031;
	margin: 0 0 8px;
	line-height: 1.2;
}
.hero-subtitle {
	font-size: 1.05rem;
	color: #666;
	margin: 0;
}
/* nav search box */
.qk-search {
	margin-left: 1rem;
	flex: 0 1 auto;
	align-items: stretch;
}
.qk-search .form-control {
	min-width: 150px;
	max-width: 220px;
	height: 40px;
	box-sizing: border-box;
	border-radius: 20px 0 0 20px;
	border: 1px solid rgba(255,255,255,0.35);
	background: rgba(255,255,255,0.95);
	color: #2d3031;
}
.qk-search .form-control::placeholder {
	color: #777;
}
.qk-search .form-control:focus {
	background: #fff;
	border-color: #dc3545;
	box-shadow: none;
}
.qk-search .btn {
	height: 40px;
	box-sizing: border-box;
	border-radius: 0 20px 20px 0;
	border-color: #dc3545;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 .9rem;
}
.qk-search .bi {
	fill: #fff;
}
/* div 模拟按钮的禁用态（原生 div 无 disabled 属性，统一用 class 控制） */
.is-disabled,
.btn.is-disabled,
.btn-auth.is-disabled {
	pointer-events: none;
	opacity: .65;
	cursor: not-allowed;
}
@media (max-width: 991.98px) {
	.qk-search {
		margin: 12px 0 0;
		width: 100%;
	}
	.qk-search .form-control {
		flex: 1 1 auto;
		max-width: none;
	}
}
.header-social li {
	margin-right: 0px !important;
	padding-left: 4px;
}
.header-social li:first-child {
	padding-left: 0;
}
.header-social li a {
	color: #fff;
	width: 30px;
	height: 30px;
	line-height: 30px;
	display: inline-block;
	text-align: center;
	font-size: 12px;
	border-radius: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.header-social li a:hover {
	color: #dc3545;
}
/* header search */
.header-search {
	position: relative;
}
.header-search a {
	background-color: #dc3545;
	color: #fff !important;
}
.header-search .dropdown-menu {
	width: 250px;
}
.header-lover .navbar-brand {
	padding: 0;
	margin: 0;
}
.header-middle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 1 auto;
	min-width: 0;
	gap: 20px;
	padding: 10px 0px;
}
.header-middle .logo-brand {
	flex: 0 0 auto;
}
.header-middle .navbar-brand {
	padding: 0px;
	margin: 0px;
}
.header-middle .advertisement-banner {
	flex: 0 1 auto;
	max-width: 460px;
}
.header-middle .advertisement-banner img {
	max-width: 100%;
	height: auto;
	display: block;
}
/* navbar itself is the flex row holding logo+ad, toggler, user, menu */
.header-lover .navbar {
	padding: 0px 0px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.header-lover .navbar .nav-item .nav-link {
	font-size: 13px;
	color: #fff;
	padding: 20px 18px;
	font-weight: 400;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.header-lover .dropdown-toggle:after {
	content: "\f078";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	border: 0px;
	font-size: 10px;
	top: 50%;
	position: absolute;
	margin-left: 6px;
	transform: translateY(-50%);
}
.header-lover .navbar .nav-item:first-child .nav-link {
	padding-left: 0px;
}
.header-lover .navbar .nav-item .nav-link:hover, .header-lover .navbar .nav-item.active a {
	color: #dc3545;
}
.header-lover .navbar .nav-item.active .dropdown-menu .dropdown-item {
	color: #212529;
}
.header-lover .navbar .nav-item.active .dropdown-menu .dropdown-item:hover {
	color: #dc3545;
}
.header-lover .navbar-toggler span {
	background-color: #2D2E33;
}
.header-lover .dropdown-menu {
	margin: 0px;
	border: 1px solid rgba(255,255,255,0.1);
	border-top: 2px solid #dc3545;
	padding: 0;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
}
.header-lover .dropdown-menu .dropdown-item {
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding: 10px 20px 10px 20px;
	position: relative;
	font-size: 13px;
	background-color: #212425;
	color: #fff;
	font-weight: 400;
	text-transform: uppercase;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.header-lover .dropdown-menu .dropdown-item:last-child {
	border-bottom: 0px;
}
.header-lover .dropdown-menu .dropdown-item:hover {
	color: #fff;
	background-color: #dc3545;
}
.header-lover .navbar .nav-item.active .dropdown-menu .dropdown-item {
	color: #fff;
}
.header-lover .navbar .nav-item.active .dropdown-menu .dropdown-item:hover {
	color: #fff;
}
/* header newsletter link */
.header-newsletter-link {
	position: absolute;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
}
.header-newsletter-link a {
	font-size: 16px;
	font-weight: 400;
	color: #fff;
	padding: 6px 16px;
	border: 2px solid #dc3545;
	border-radius: 8px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.header-newsletter-link a:hover {
	background-color: #dc3545;
}
.header-newsletter-link a i {
	font-size: 18px;
	margin-right: 6px;
}
.nav-btn a {
	padding: 20px 14px !important;
}
.nav-btn a span {
	color: #fff;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	display: inline-block;
	border-radius: 100%;
	background-color: #dc3545;
}
/*Navbar Toogle*/
.navbar-toggler {
	border: none;
	padding: 10px 6px;
	background-color: #f5f5f5;
	outline: none !important;
}
.navbar-toggler span {
	display: block;
	width: 22px;
	height: 2px;
	border-radius: 1px;
	background: #fff;
}
.navbar-toggler span + span {
	margin-top: 4px;
	width: 18px;
}
.navbar-toggler span + span + span {
	width: 10px;
}
 @media screen and (min-width: 768px) {
/* shows the dropdown menu on hover */
.navbar .dropdown:hover .dropdown-menu, .navbar .dropdown .dropdown-menu:hover {
	display: block!important;
}
}
/* ===================================
	03. Featured post
=================================== */
.article-hero {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.article-hero:before {
	content: " ";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
	bottom: 0;
	left: 0;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#999999+0,000000+73&0+0,0.9+73 */
	background: -moz-linear-gradient(top, rgba(153,153,153,0) 0%, rgba(0,0,0,0.9) 73%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(153,153,153,0) 0%, rgba(0,0,0,0.9) 73%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(153,153,153,0) 0%, rgba(0,0,0,0.9) 73%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00999999', endColorstr='#e6000000', GradientType=0 ); /* IE6-9 */
}
.article-hero .article-hero__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.article-hero .article-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.article-hero:hover .article-hero__media img {
	transform: scale(1.06);
}
.article-hero .article-hero__media .article-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 4px 12px;
	display: inline-block;
	border-radius: var(--radius-pill);
	background: var(--gradient-primary);
	color: #04121a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	z-index: 2;
}
.article-hero .article-hero__body {
	position: absolute;
	bottom: 15px;
	left: 15px;
	padding-right: 15px;
	z-index: 2;
}
.article-hero .article-hero__body .article-hero__title a {
	color: #fff;
	font-weight: 400;
}
.article-hero .article-hero__body .article-meta li {
	color: #fff;
	position: relative;
	margin-right: 16px;
	padding-right: 20px;
}
.article-hero .article-hero__body .article-meta li:last-child {
	margin-right: 0px;
	padding-right: 0px;
}
.article-hero .article-hero__body .article-meta li:before {
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 100%;
	background-color: #fff;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
}
.article-hero .article-hero__body .article-meta li:last-child:before {
	display: none;
}
.featured-post-carousel .owl-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	margin-top: 0px;
	width: 100%;
}
.featured-post-carousel .owl-nav .owl-prev {
	float: left;
	margin: 0 0 0 15px;
	width: 40px;
	height: 40px;
	background-color: rgba(255,255,255,0.2) !important;
	border: 0 !important;
	color: #fff !important;
	text-align: center;
	line-height: 40px !important;
	border-radius: 6px;
	font-size: 12px !important;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.featured-post-carousel .owl-nav .owl-next {
	float: right;
	margin: 0 15px 0 0;
	color: #fff !important;
	width: 40px;
	height: 40px;
	font-size: 12px !important;
	background-color: rgba(255,255,255,0.2) !important;
	border: 0 !important;
	text-align: center;
	line-height: 40px !important;
	border-radius: 6px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.featured-post-carousel .owl-nav .owl-prev:hover, .featured-post-carousel .owl-nav .owl-next:hover {
	background-color: #dc3545 !important;
}
.featured-post-carousel.owl-carousel .owl-item img {
	width: 100% !important;
}
/* featured post area 2 */
.article-spotlight__media {
	border-radius: 10px;
	overflow: hidden;
}
.article-spotlight__body h6 a {
	display: inline-block;
	border-radius: 6px;
	font-size: 10px;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: #fff;
	font-weight: 300;
	padding: 6px 10px;
}
.article-spotlight__body {
	padding: 42px 30px 40px 56px;
}
.article-spotlight__body time {
	color: #b5b5b5;
	display: block;
	font-size: 12px;
	line-height: 15px;
	margin-bottom: 20px;
}
.article-spotlight__body h2 a {
	font-size: 24px;
	font-weight: 600;
	font-style: normal;
	margin-bottom: 14px;
	color: #333;
	display: inline-block;
	margin-bottom: 15px;
}
.featured-post-carousel-2 .owl-nav {
	position: absolute;
	bottom: 40px;
	left: 56%;
}
.featured-post-carousel-2 .owl-nav .owl-prev, .featured-post-carousel-2 .owl-nav .owl-next {
	float: left;
	margin: 0 0 0 6px;
	width: 40px;
	height: 40px;
	background-color: rgba(255,255,255,1) !important;
	border: 0 !important;
	color: #333 !important;
	text-align: center;
	line-height: 40px !important;
	border-radius: 6px;
	font-size: 12px !important;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.featured-post-carousel-2 .owl-nav .owl-prev:hover, .featured-post-carousel-2 .owl-nav .owl-next:hover {
	background-color: #dc3545 !important;
	color: #fff !important;
}
.featured-post-carousel-2.owl-carousel .owl-item img {
	width: auto !important;
}
/* ===================================
	04. Grid style
=================================== */
/* grid style 1 */
.article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.article-card:hover {
	transform: translateY(-6px);
	border-color: var(--border-strong);
	box-shadow: var(--shadow), var(--glow);
}
.article-card .article-card__media {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}
.article-card .article-card__media:before { display: none; }
.article-card .article-card__media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.article-card:hover .article-card__media img {
	transform: scale(1.07);
}
.article-card .article-card__media .article-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 12px;
	display: inline-block;
	border-radius: var(--radius-pill);
	background: var(--gradient-primary);
	color: #04121a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	z-index: 2;
	box-shadow: var(--shadow-sm);
}
.article-card .article-card__body .article-card__title a {
	color: var(--color-heading);
	font-weight: 700;
}
.article-card .article-card__body .article-meta li,
.article-card .article-card__body .article-meta span {
	color: var(--color-muted);
	font-size: 12px;
}
/* grid style 2 */
.article-card.article-card--bordered {
	position: relative;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 10px;
	overflow: hidden;
}
.article-card.article-card--bordered .article-card__media {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.article-card.article-card--bordered .article-card__media:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: -1;
	bottom: 0;
	left: 0;
	opacity: 0;
	background-color: rgba(0,0,0,0.4);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	pointer-events: none;
}
.article-card.article-card--bordered .article-card__media:after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: -1;
	bottom: 0;
	left: 0;
	background-size: 100% auto;
	background-image: url(../img/curve.svg);
	background-position: center bottom;
	background-repeat: no-repeat;
	pointer-events: none;
}
.article-card.article-card--bordered:hover .article-card__media:before {
	opacity: 1;
}
.article-card.article-card--bordered .article-card__media .article-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 4px 10px;
	display: inline-block;
	border-radius: 6px;
	color: #fff;
	font-size: 12px;
	z-index: 2;
}
.article-card.article-card--bordered .article-card__body {
	padding: 0px 15px 15px 15px;
}
.article-card.article-card--bordered .article-card__body .article-card__title a {
	color: #333;
	font-weight: 400;
}
.article-card.article-card--bordered .article-card__body .article-meta {
	border-top: 1px dashed rgba(0,0,0,0.1);
	padding-top: 15px;
}
.article-card.article-card--bordered .article-card__body .article-meta li {
	color: #999;
	position: relative;
	margin-right: 16px;
	padding-right: 20px;
}
.article-card.article-card--bordered .article-card__body .article-meta li:last-child {
	margin-right: 0px;
	padding-right: 0px;
}
.article-card.article-card--bordered .article-card__body .article-meta li:before {
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 100%;
	background-color: #333;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
}
.article-card.article-card--bordered .article-card__body .article-meta li:last-child:before {
	display: none;
}
/* --- Card inner layout (unified) --- */
.article-card__media img,
.article-card__media a > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 18px 20px;
	flex: 1;
}
.article-card__body p {
	margin: 0;
	color: var(--color-text);
	font-size: 14px;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.article-card__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.4;
	font-weight: 700;
}
.article-card__title a {
	color: var(--color-heading);
	transition: var(--transition);
}
.article-card__title a:hover {
	color: var(--color-primary);
}
/* meta (<span> in markup) */
.article-card .article-card__body .article-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.article-card .article-card__body .article-meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
/* horizontal variant (narrow columns) */
.article-card--horizontal {
	flex-direction: row;
}
.article-card--horizontal .article-card__media {
	flex: 0 0 132px;
	aspect-ratio: 4 / 3;
}
.article-card--horizontal .article-card__body {
	padding: 14px 16px;
	gap: 8px;
}
.article-card--horizontal .article-card__title {
	font-size: 15px;
	line-height: 1.35;
}
/* ===================================
	05. List style
=================================== */
/* list style 1 */
.article-row {
	position: relative;
	display: table;
	background-color: #1f2024;
	border-radius: 10px;
	overflow: hidden;
	padding: 10px;
}
.article-row .article-row__media {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	display: table-cell;
	vertical-align: middle;
	width: 50%;
}
.article-row__body {
	padding: 30px;
}
.article-row .article-row__media:before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
	bottom: 0;
	left: 0;
	opacity: 0;
	background-color: rgba(0,0,0,0.4);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.article-row:hover .article-row__media:before {
	opacity: 1;
}
.article-row .article-row__media .article-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 4px 10px;
	display: inline-block;
	border-radius: 6px;
	color: #fff;
	font-size: 12px;
	z-index: 2;
}
.article-row .article-row__body .article-row__title a {
	color: #fff;
	font-weight: 400;
}
.article-row .article-row__body .article-meta li {
	color: #dc3545;
	position: relative;
	margin-right: 16px;
	padding-right: 20px;
}
.article-row .article-row__body .article-meta li:last-child {
	margin-right: 0px;
	padding-right: 0px;
}
.article-row .article-row__body .article-meta li:before {
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 100%;
	background-color: #333;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
}
.article-row .article-row__body .article-meta li:last-child:before {
	display: none;
}
/* listing post */
.article-row-group {
	border-radius: 10px;
}
.article-mini {
	display: flex;
	align-items: center;
}
.article-mini {
	display: flex;
	align-items: center;
	gap: 14px;
}
.article-mini .article-mini__media {
	flex: 0 0 100px;
	max-width: 100px;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
}
.article-mini .article-mini__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-mini .article-mini__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.article-mini .article-mini__title {
	margin: 0;
}
.article-mini .article-mini__title a {
	color: #fff;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	transition: var(--transition);
}
.article-mini .article-mini__title a:hover {
	color: var(--color-primary);
}
.article-mini .article-mini__meta {
	margin: 0;
}
.article-mini .article-mini__meta a {
	text-transform: uppercase;
	color: #999;
	font-size: 12px;
	display: inline-block;
	font-weight: 300;
}
/* listing post-2 */
.article-mini.article-mini--bordered {
	display: flex;
	align-items: center;
	gap: 14px;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 10px;
	overflow: hidden;
}
.article-mini.article-mini--bordered .article-mini__media {
	flex: 0 0 90px;
	max-width: 90px;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	overflow: hidden;
}
.article-mini.article-mini--bordered .article-mini__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-mini.article-mini--bordered .article-mini__body {
	padding: 15px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.article-mini.article-mini--bordered .article-mini__body .article-badge {
	padding: 4px 10px;
	display: inline-block;
	border-radius: 6px;
	color: #fff;
	font-size: 10px;
}
.article-mini.article-mini--bordered .article-mini__title {
	margin: 0;
}
.article-mini.article-mini--bordered .article-mini__title a {
	color: var(--color-heading);
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	transition: var(--transition);
}
.article-mini.article-mini--bordered .article-mini__title a:hover {
	color: #dc3545;
}
.article-mini.article-mini--bordered .article-mini__meta {
	margin: 0;
}
.article-mini.article-mini--bordered .article-mini__meta a {
	text-transform: uppercase;
	color: #999;
	font-size: 12px;
	display: inline-block;
	font-weight: 300;
}
/* ===================================
	06. Sidebar
=================================== */
/* sidebar title */
.widget-title {
	position: relative;
	margin-bottom: 20px;
}
.widget-title h3 {
	position: relative;
	color: #333;
	font-size: 26px;
	font-weight: 600;
	line-height: 20px;
	display: inline-block;
	text-transform: capitalize;
}
/* sidebar about box */
.widget-about {
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 10px;
	overflow: hidden;
}
.widget-about .widget-about__text {
	padding: 30px;
}
/* sidebar social icon */
.widget-social {
	position: relative;
	margin-bottom: 48px;
}
.widget-social li {
	display: inline-block;
	text-align: center;
	margin: 2px;
	padding: 25px 0;
	width: 31.95%;
	margin-right: 0px;
	border-radius: 10px;
}
.widget-social li a {
	font-size: 20px;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	position: relative;
	display: inline-block;
	color: #fff;
}
.widget-social li a span {
	font-size: 12px;
	width: 100%;
	display: inline-block;
}
.facebook-color {
	background-color: #2f58a1;
}
.twitter-color {
	background-color: #069cd5;
}
.pinterest-color {
	background-color: #da0d32;
}
.linkedin-color {
	background-color: #0076b8;
}
.instagram-color {
	background-color: #35475c;
}
.google-plus-color {
	background-color: #ec453e;
}
/* sidebar subscribe */
.widget-subscribe {
	position: relative;
	padding: 30px;
	background-color: #1f2024;
	border-radius: 10px;
}
.widget-subscribe form input {
	width: 100%;
	border-radius: 10px;
	background-color: #fff;
	color: #333;
	border: 0px;
	height: 50px;
	padding: 10px;
}
.widget-subscribe form button {
	width: 100%;
	border: 0px;
	border-radius: 10px;
	background-color: #dc3545;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 600;
	height: 50px;
	padding: 10px;
	margin-top: 4px;
}
/* trending box */
.widget-trending {
	border-radius: 10px;
	overflow: hidden;
	background-color: #f5f5f5;
}
.widget-trending li {
	padding: 20px 20px 20px 20px;
	border-bottom: 1px dashed rgba(0,0,0,0.1);
}
.widget-trending li:last-child {
	border-bottom: 0px;
}
.widget-trending li .item-info {
	font-size: 14px;
	color: #999;
	margin-bottom: 8px;
	font-style: italic;
}
.widget-trending li h4 a {
	color: #333;
	font-size: 16px;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
.widget-trending li h4 a:hover {
	color: #dc3545;
}
/* sidebar top news box */
.widget-topnews {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.widget-topnews .widget-topnews__text {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 100%;
	left: 0px;
	right: 0px;
	margin: auto;
	transform: translateY(-50%);
	text-align: center;
}
.widget-topnews .widget-topnews__text .sidebar-center {
	text-align: center;
	background-color: rgba(255,255,255,0.9);
	display: inline-block;
	border-radius: 10px;
	margin: auto;
	padding: 25px;
	-webkit-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.5);
	-moz-box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.5);
	box-shadow: 0px 0px 0px 10px rgba(255,255,255,0.5);
}
.widget-topnews .widget-topnews__text .heading-title-small {
	font-size: 12px;
	font-weight: 600;
}
.widget-topnews .widget-topnews__text .heading-title a {
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	color: #333;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
.widget-topnews .widget-topnews__text .heading-title a:hover {
	color: #dc3545;
}
/* tags list */
.tag-cloud {
	display: inline-block;
}
.tag-cloud li {
	float: left;
}
.tag-cloud li a {
	background-color: #efefef;
	color: #000;
	font-weight: 400;
	line-height: 100%;
	border-radius: 6px;
	margin: 0 5px 5px 0;
	display: inline-block;
	font-size: 14px;
	padding: 8px 10px;
	text-transform: capitalize;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.tag-cloud li a:hover {
	background-color: #dc3545;
	color: #fff;
}
/* category widget */
.widget-categories li {
	margin-bottom: 15px;
}
.widget-categories li a {
	position: relative;
	color: #000;
	font-size: 15px;
	justify-content: space-between;
	align-items: center;
	display: flex;
	margin-bottom: 1px;
	background-color: #ffffff;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.widget-categories li a:hover, .widget-categories li a:hover span {
	color: #dc3545;
}
.widget-categories li a span {
	float: right;
	font-size: 11px;
	text-align: center;
	color: #84858a;
	border-radius: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.widget-categories li:last-child {
	margin-bottom: 0px;
}
/* subCategory */
.widget-subcategories li a {
	color: #000;
	padding: 4px 10px;
	display: inline-block;
	margin-bottom: 4px;
	border-radius: 4px;
	background-color: #ccc;
	font-size: 12px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.widget-subcategories li a:hover, .widget-subcategories li.active a {
	color: #fff;
	background-color: #dc3545;
}
/* ===================================
	07. Carousel arrow style
=================================== */
/* carousel arrow style 1 */
.carousel-arrow-style-1 .owl-nav {
	text-align: center;
	position: absolute;
	top: -78px;
	right: 0;
}
.carousel-arrow-style-1 .owl-nav > button {
	margin: 0px 0px 0px 2px !important;
	background: none;
	border: 1px solid #dedede !important;
	color: #999;
	width: 26px;
	height: 26px;
	line-height: 22px;
	padding: 0;
	border-radius: 4px !important;
	display: inline-block;
	text-align: center;
	font-size: 14px;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
.carousel-arrow-style-1 .owl-nav > button:hover {
	background-color: #dc3545 !important;
	border-color: #dc3545 !important;
}
/* ===================================
	08. Instagram
=================================== */
.instagram-item {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.instagram-item a {
	display: block;
	position: relative;
}
.instagram-item .insta-tag {
	position: absolute;
	top: 15px;
	left: 0px;
	right: 0px;
	width: 100%;
	text-align: center;
	z-index: 2;
	opacity: 0;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
.instagram-item .insta-tag span {
	border-radius: 6px;
	color: #fff;
	font-size: 12px;
	padding: 4px 10px;
	background-color: #dc3545;
}
.instagram-item .instagram-item-actionbox {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	left: 0px;
	bottom: 0px;
	background-color: rgba(0,0,0,0.4);
	opacity: 0;
	transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}
.instagram-item .instagram-item-actionbox ul li {
	color: #fff;
	font-size: 14px;
}
.instagram-item:hover .instagram-item-actionbox, .instagram-item:hover .insta-tag {
	opacity: 1;
}
/* ===================================
	09. Footer
=================================== */
footer {
	background-color: #212425;
}
.footer-top .footer-title {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	margin: 0 0 30px;
	text-transform: uppercase;
}
/* footer social */
.footer-social a {
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	background-color: #3c3c3c;
	border-radius: 100%;
	margin-right: 6px;
	color: #fff;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.footer-social a:hover {
	background-color: #dc3545;
}
/* footer link */
.footer-link li {
	position: relative;
	margin-bottom: 12px;
}
.footer-link li a {
	color: #ccc;
	font-size: 12px;
	padding-left: 20px;
	position: relative;
	font-family: 'Montserrat', sans-serif;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.footer-link li a:before {
	position: absolute;
	content: "";
	width: 10px;
	height: 2px;
	background-color: #666;
	top: 50%;
	transform: translateY(-50%);
	left: 0px;
}
.footer-link li a:hover {
	color: #dc3545;
}
/* footer contact us */
.footer-contact-us {
	background-color: #343737;
	padding: 20px 20px;
	border-top: 4px solid #dc3545;
}
.footer-contact-us li {
	margin-bottom: 15px;
	color: #ccc;
	border-bottom: 1px solid rgba(255,2552,255,0.1);
	padding-bottom: 15px;
}
.footer-contact-us li:last-child {
	margin-bottom: 0px;
	border-bottom: 0px;
	padding-bottom: 0px;
}
.footer-contact-us li p.footer-contact-title {
	text-transform: capitalize;
	font-weight: 600;
	font-size: 14px;
	color: #ffffff;
	margin: 0 0 8px;
}
.footer-contact-us li a {
	color: #ccc;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.footer-contact-us li a:hover {
	color: #dc3545;
}
/* copyright footer */
.copyright-footer {
	border-top: 1px dashed rgba(255,255,255,0.1);
}
/* footer light */
.footer-light {
	background-color: #f8f9fa;
}
.footer-light .footer-top .footer-title {
	color: #000;
	border-bottom: 1px solid rgba(0,0,0,0.1);
}
.footer-light .footer-link li a {
	color: #333;
}
.footer-light .footer-link li a:hover {
	color: #dc3545;
}
.footer-light .copyright-footer {
	border-top: 1px dashed rgba(0,0,0,0.1);
	background-color: #eee;
}
/* ===================================
	10. Advertisement
=================================== */
.header-middle .advertisement-banner{
	text-align:right;
}
.advertisement-banner {
	border-radius: 10px;
	overflow: hidden;
	text-align:center;
}
.advertisement-banner img{
	border-radius: 10px;
}
/* ===================================
	11. Inner page title
=================================== */
.inner-page-title-bg {
	background-image: url(../img/bg/inner-page-title-bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
	position: relative;
	z-index:0;
}
.inner-page-title-bg:before {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.8);
	z-index:-1;
}
.inner-page-title {
	position: relative;
}
.inner-page-title .breadcrumb li {
	display: inline-block;
	font-size: 14px;
	margin: 0px;
	color: #fff;
}
.inner-page-title .breadcrumb-item + .breadcrumb-item:before {
	content: "-";
}
.inner-page-title .breadcrumb li a {
	color: #dc3545;
}
.inner-page-title .page-main-title {
	color: #fff;
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.2;
	margin: .5rem 0 0;
}
/* ===================================
	12. Single post
=================================== */
.article-title {
	font-size: 28px;
	line-height: 38px;
}
/* single post img */
.article-cover {
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
.article-cover__badge {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 4px 10px;
	display: inline-block;
	border-radius: 6px;
	color: #fff;
	font-size: 12px;
	background-color: #dc3545;
	z-index: 2;
}
.article-cover__badge--bottom {
	position: absolute;
	bottom: 25px;
	left: 25px;
	padding: 4px 10px;
	display: inline-block;
	border-radius: 6px;
	color: #fff;
	font-size: 12px;
	background-color: #dc3545;
	z-index: 2;
}
.article-cover__badge:hover, .article-cover__badge--bottom:hover {
	color: #fff;
}
/* single post video iframe */
.article-video {
	position: relative;
}
.article-video iframe {
	width: 100%;
	height: 400px;
	border: 0px;
	border-radius: 10px;
	overflow: hidden;
}
/* post single meta */
.article-meta-bar {
	border-bottom: 1px solid #eee;
}
.article-meta li {
	color: #999;
	position: relative;
	margin-right: 16px;
	padding-right: 14px;
}
.article-meta li:last-child {
	margin-right: 0px;
	padding-right: 0px;
}
.article-meta li:before {
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 100%;
	background-color: #333;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
}
.article-meta li:last-child:before {
	display: none;
}
/* blockquote */
.article-body blockquote {
	background-color: #dc3545;
	border-radius: 10px;
	overflow: hidden;
	padding: 15px 15px 15px 100px;
	position: relative;
}
.article-body blockquote i {
	position: absolute;
	top: 50%;
	left: 25px;
	color: rgba(255,255,255,0.3);
	font-size: 50px;
	transform: translateY(-50%);
}
.article-body blockquote p {
	font-size: 18px;
	font-style: italic;
	line-height: 30px;
	color: #fff;
}
/* single post liststyle */
.article-list li {
	padding-bottom: 8px;
}
.article-list li i {
	color: #dc3545;
	padding-right: 6px;
}
/* options tags */
.tag-cloud li {
	display: inline-block;
	font-size: 12px;
	color: #000;
}
.tag-cloud li:last-child {
	padding-right: 0px;
}
.tag-cloud li a {
	background-color: #efefef;
	color: #000;
	font-weight: 400;
	line-height: 100%;
	border-radius: 6px;
	margin: 0 0px 5px 0;
	display: inline-block;
	padding: 8px 10px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.tag-cloud li a:hover {
	background-color: #dc3545;
	color: #fff;
}
/* share post */
.share-list li {
	display: inline-block;
	font-size: 12px;
	color: #000;
}
.share-list li:first-child {
	padding-right: 6px;
	font-weight: 600;
}
.share-list li:last-child {
	padding-right: 0px;
}
.share-list li a {
	color: #fff;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-weight: 400;
	margin: 0 0px 5px 0;
	display: inline-block;
	border-radius: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.share-list li a i {
	color: #fff;
	padding-right: 0px;
}
/* ===================================
	13. Comment box
=================================== */
.box-comment {
	margin-bottom: 40px;
}
.box-comment:last-child {
	margin-bottom: 0px;
}
.box-comment .box-comment {
	margin-left: 40px;
	margin-top: 40px;
}
.box-comment .box-comment:last-child {
	margin-bottom: 0px;
}
.box-comment figure {
	margin: 0 20px 0 0;
}
.box-comment figure img {
	border-radius: 100%;
	border: 1px dashed rgba(0,0,0,0.4);
}
.box-comment h6 {
	font-size: 18px;
	display: inline-block;
}
.box-comment h6 span {
	font-size: 12px;
	color: #6C6D74;
	font-weight: 300;
	width: 100%;
	display: inline-block;
	font-style: italic;
}
.box-comment h6 span span.current-year {
	width: auto;
	display: inline-block;
}
.box-comment .review-text {
	width: 100%;
}
.box-comment .review-text a {
	float: right;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	background-color: #333;
	color: #fff;
	border-radius: 100%;
	font-size: 12px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.box-comment .review-text a:hover {
	background-color: #dc3545;
}
.box-comment p {
	margin-bottom: 0px;
}
/* ===================================
	14. Send comment form
=================================== */
.send-comment-form input {
	background-color: #f7f6f4;
	border: 1px dashed rgba(0,0,0,0.3);
	border-radius: 10px;
	font-size: 14px;
	height: 50px;
}
.send-comment-form textarea {
	background-color: #f7f6f4;
	border: 1px dashed rgba(0,0,0,0.3);
	border-radius: 10px;
	font-size: 14px;
}
/* ===================================
	15. Login, Register box
=================================== */
.sign-in-up-box input[type="email"], .sign-in-up-box input[type="password"], .sign-in-up-box input[type="text"] {
	background-color: #f7f6f4;
	border: 1px dashed rgba(0,0,0,0.3);
	border-radius: 10px;
	font-size: 14px;
	height: 50px;
}
.forgot-password {
	color: #333;
	text-decoration: underline;
	font-weight: 700;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.forgot-password:hover {
	color: #dc3545;
	text-decoration: underline;
}
.no-account a {
	color: #333;
	text-decoration: underline;
	font-weight: 700;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.no-account a:hover {
	color: #dc3545;
}
/* benefits liststyle */
.benefits-liststyle li {
	padding-bottom: 8px;
}
.benefits-liststyle li:last-child {
	padding-bottom: 0px;
}
.benefits-liststyle li i {
	color: #dc3545;
	padding-right: 6px;
}
/* ===================================
	16. Contact us
=================================== */
/* map box */
.map-box iframe {
	width: 100%;
	height: 300px;
	border-radius: 10px;
	overflow: hidden;
	border: 0px;
}
/* contact info */
.contact-info p {
	margin-bottom: 0px;
}
.contact-info li {
	margin-bottom: 20px;
}
.contact-info li h5 {
	padding-bottom: 8px;
}
.contact-info li h5 i {
	color: #dc3545;
	padding-right: 6px;
	font-size: 16px;
}
.contact-info li:last-child {
	margin-bottom: 0px;
}
.contact-info li a {
	color: #8A8A93;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.contact-info li a:hover {
	color: #dc3545;
}
/* contact form */
.contact-form input {
	background-color: #f7f6f4;
	border: 1px dashed rgba(0,0,0,0.3);
	border-radius: 10px;
	font-size: 14px;
	height: 50px;
}
.contact-form textarea {
	background-color: #f7f6f4;
	border: 1px dashed rgba(0,0,0,0.3);
	border-radius: 10px;
	font-size: 14px;
}
.help-block.with-errors ul {
	color: #721c24;
	background-color: #f8d7da;
	border-color: #f5c6cb;
	padding: 10px;
}
/* ===================================
	17. About us
=================================== */
.about-img {
	border-radius: 10px;
	overflow: hidden;
}
.icon-list-style li {
	font-size: 14px;
	padding-bottom: 10px;
}
.icon-list-style li:last-child {
	padding-bottom: 0px;
}
.icon-list-style li i {
	font-size: 13px;
	color: #dc3545;
}
/* ===================================
	18. Counter
=================================== */
.single-count-item {
	border: 2px solid rgba(0,0,0,0.1);
	border-radius: 10px;
	padding: 25px 15px;
	text-align: center;
}
.single-count-item h3 {
	font-size: 16px;
	font-weight: 400;
	padding-bottom: 0px;
	text-transform: capitalize;
	color: #333;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.single-count-item span {
	color: #dc3545 !important;
	font-size: 50px;
	line-height: 36px;
	position: relative;
	padding-bottom: 18px;
	margin-bottom: 0px;
	font-weight: 600;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
/* ===================================
	19. 404 page
=================================== */
.error-text h2 {
	font-size: 50px;
	padding: 10px 0px;
	font-weight: 600;
}
/* ===================================
	20. Faq
=================================== */
.faq-box .accordion-item .accordion-header .accordion-button .fa-times-circle {
	display: inline-block;
	color: #dc3545;
}
.faq-box .accordion-item .accordion-header .accordion-button.collapsed .fa-times-circle {
	display: none;
}
.faq-box .accordion-item .accordion-header .accordion-button.collapsed .fa-chevron-down {
	display: inline-block;
}
.faq-box .accordion-item .accordion-header .accordion-button .fa-chevron-down {
	display: none;
}
.faq-box .accordion-item .accordion-header .accordion-button {
	position: relative;
}
.faq-box .accordion-item .accordion-header .accordion-button:after{
	display:none;
}
.faq-box .accordion-item .accordion-header i {
	position: absolute;
	right: 25px;
	top: 50%;
	transform: translateY(-50%);
}
.faq-box .accordion-item .accordion-header {
	background-color: transparent;
}
.faq-box .accordion-item .accordion-header .accordion-button.collapsed {
	color: #333 !important;
	padding: 20px 20px !important;
	font-size: 14px;
	background-color: #f7f6f4;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align:left;
}
.faq-box .accordion-item {
	margin-bottom: 10px;
	border: 1px dashed rgba(0,0,0,0.3) !important;
	border-radius: 10px !important;
}
.faq-box .accordion-item:last-child {
	margin-bottom: 0px;
}
.faq-box .accordion-item .accordion-header {
	padding: 0px;
	border-bottom: 0;
}
.faq-box .accordion-item .accordion-body {
	line-height: 24px;
	padding: 25px 25px 25px 25px;
	color: #333;
	margin-top: 1px;
	background-color: #f5f5f5;
}
.faq-box .accordion-item .accordion-header .accordion-button {
	color: #dc3545 !important;
	padding: 20px !important;
	font-size: 14px;
	font-weight: 600;
	background-color: #f5f5f5;
	border-bottom: 1px dashed rgba(0,0,0,0.3) !important;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align:left;
}
.faq-box .accordion-item .accordion-body ul {
	margin-left: 15px;
}
.faq-box .accordion-item .accordion-body ul li {
	list-style: circle;
}
/* ===================================
	21. Post video item
=================================== */
.post-video-item {
	position: relative;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
}
.post-video-item:after {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: rgba(0,0,0,0.6);
	z-index: 0;
}
.post-video-item .image {
	overflow: hidden;
}
.post-video-item .image img {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.post-video-item:hover .image img {
	transform: scale(1.1);
}
.post-video-item .article-badge {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 4px 10px;
	display: inline-block;
	border-radius: 6px;
	background-color: #dc3545;
	color: #fff;
	font-size: 12px;
	z-index: 2;
}
.post-video-item .link-box {
	position: absolute;
	top: 18px;
	right: 15px;
	line-height: 20px;
	z-index: 1;
}
.post-video-item .link-box a {
	font-size: 20px;
	color: #fff;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.post-video-item .link-box a:hover {
	color: #dc3545;
}
/* ===================================
	22. Gallery
=================================== */
.gallery-item {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}
.gallery-item:before {
	position: absolute;
	content: "";
	width: 30px;
	height: 30px;
	background-color: transparent;
	border-left: 2px solid #dc3545;
	border-top: 2px solid #dc3545;
	top: 15px;
	border-radius: 10px 0px 10px 0px;
	left: 15px;
	z-index: 9;
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.gallery-item:after {
	position: absolute;
	content: "";
	width: 30px;
	height: 30px;
	background-color: transparent;
	border-right: 2px solid #dc3545;
	border-bottom: 2px solid #dc3545;
	bottom: 15px;
	border-radius: 10px 0px 10px 0px;
	right: 15px;
	z-index: 9;
	opacity: 0;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.gallery-item:hover:after, .gallery-item:hover:before {
	opacity: 1;
}
.gallery-item .article-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	padding: 4px 10px;
	display: inline-block;
	border-radius: 6px;
	background-color: #dc3545;
	color: #fff;
	font-size: 12px;
	z-index: 2;
}
.gallery-item img {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.gallery-item .thumb-overlay {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0);
	text-align: center;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.gallery-item:hover img {
	transform: scale(1.1);
}
.gallery-item .thumb-overlay a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	justify-content: center;
	color: #fff;
	font-size: 22px;
	transform: scale(0);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.gallery-item:hover .thumb-overlay {
	background-color: rgba(0,0,0,0.6);
}
.gallery-item:hover .thumb-overlay a {
	transform: scale(1);
}
#gallerylist .gallerydiv {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	display: none;
}
/* ========== filter 1 ========== */
.filter1 li span {
	cursor: pointer;
	padding: 6px 20px 6px 20px;
	display: inline-block;
	position: relative;
	font-size: 12px;
	border-top: 1px solid rgba(0,0,0,0);
	border-bottom: 1px solid rgba(0,0,0,0);
}
.filter1 li span:after {
	position: absolute;
	content: "";
	width: 8px;
	background-color: #ccc;
	height: 8px;
	border-radius: 100%;
	top: 50%;
	right: -7px;
	transform: translateY(-50%);
	opacity: 0.5;
}
.filter1 li:last-child span:after {
	display: none;
}
.filter1 li span.active {
	border-bottom: 1px solid #dc3545;
	color: #dc3545;
	font-weight: 600;
}
/* ===================================
	23. Privacy Terms
=================================== */
.privacy-policy-content h3 {
	color: #dc3545;
	font-size: 22px;
}
.privacy-policy-content p {
	margin-bottom: 0px;
}
.privacy-policy-content ul li {
	padding-bottom: 8px;
}
.privacy-policy-content ul li:last-child {
	padding-bottom: 0px;
}
.privacy-policy-content ul li i {
	color: #dc3545;
	padding-right: 6px;
}
/* ===================================
	24. Article meta info (author / views / shares / comments / date)
=================================== */
.meta-author,
.meta-views,
.meta-shares,
.meta-comments,
.meta-date {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-right: 16px;
	padding-right: 20px;
	font-size: 13px;
	color: #999;
}
.meta-author:last-child,
.meta-views:last-child,
.meta-shares:last-child,
.meta-comments:last-child,
.meta-date:last-child {
	margin-right: 0px;
	padding-right: 0px;
}
.meta-author:before,
.meta-views:before,
.meta-shares:before,
.meta-comments:before,
.meta-date:before {
	position: absolute;
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 100%;
	background-color: #999;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
}
.meta-author:last-child:before,
.meta-views:last-child:before,
.meta-shares:last-child:before,
.meta-comments:last-child:before,
.meta-date:last-child:before {
	display: none;
}
.meta-author i,
.meta-views i,
.meta-shares i,
.meta-comments i,
.meta-date i {
	margin-right: 6px;
	color: #dc3545;
}
/* featured post (on image overlay) */
.article-hero .article-hero__body .article-meta .meta-author,
.article-hero .article-hero__body .article-meta .meta-views,
.article-hero .article-hero__body .article-meta .meta-shares,
.article-hero .article-hero__body .article-meta .meta-comments,
.article-hero .article-hero__body .article-meta .meta-date {
	color: #fff;
}
.article-hero .article-hero__body .article-meta .meta-author:before,
.article-hero .article-hero__body .article-meta .meta-views:before,
.article-hero .article-hero__body .article-meta .meta-shares:before,
.article-hero .article-hero__body .article-meta .meta-comments:before,
.article-hero .article-hero__body .article-meta .meta-date:before {
	background-color: #fff;
}
.article-hero .article-hero__body .article-meta .meta-author i,
.article-hero .article-hero__body .article-meta .meta-views i,
.article-hero .article-hero__body .article-meta .meta-shares i,
.article-hero .article-hero__body .article-meta .meta-comments i,
.article-hero .article-hero__body .article-meta .meta-date i {
	color: #fff;
}
/* list style 1 */
.article-row .article-row__body .article-meta .meta-author,
.article-row .article-row__body .article-meta .meta-views,
.article-row .article-row__body .article-meta .meta-shares,
.article-row .article-row__body .article-meta .meta-comments,
.article-row .article-row__body .article-meta .meta-date {
	color: #dc3545;
}
.article-row .article-row__body .article-meta .meta-author:before,
.article-row .article-row__body .article-meta .meta-views:before,
.article-row .article-row__body .article-meta .meta-shares:before,
.article-row .article-row__body .article-meta .meta-comments:before,
.article-row .article-row__body .article-meta .meta-date:before {
	background-color: #dc3545;
}

/* --- Row inner layout (unified, replaces inline styles) --- */
.article-row {
	display: flex;
	gap: 20px;
	padding: 16px;
}
.article-row__media {
	flex: 0 0 320px;
	max-width: 320px;
	aspect-ratio: 16 / 10;
}
.article-row__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.article-row__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	justify-content: center;
}
.article-row__body p {
	margin: 0;
	color: var(--color-text);
	font-size: 14px;
	line-height: 1.65;
}
.article-row__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.35;
	font-weight: 700;
}
.article-row__title a {
	color: var(--color-heading);
	transition: var(--transition);
}
.article-row__title a:hover {
	color: var(--color-primary);
}

/* ===================================
	Modern enhancements (design tokens)
=================================== */
.article-card,
.article-row,
.article-mini,
.article-hero__media,
.widget-about,
.widget-social,
.widget-subscribe,
.widget-topnews,
.widget-trending,
.widget-categories {
	transition: var(--transition);
}

.article-card {
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}
.article-card:hover {
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}
.article-card--bordered {
	border: 1px solid var(--color-border-soft);
	box-shadow: none;
}
.article-card--bordered:hover {
	box-shadow: var(--shadow-sm);
}

.article-card__media,
.article-row__media,
.article-mini__media,
.article-hero__media {
	border-radius: var(--radius);
	overflow: hidden;
}
.article-card__media img,
.article-row__media img,
.article-mini__media img,
.article-hero__media img {
	transition: var(--transition);
}
.article-card:hover .article-card__media img,
.article-row:hover .article-row__media img,
.article-mini:hover .article-mini__media img {
	transform: scale(1.05);
}

.article-row,
.article-mini {
	background: var(--color-bg);
	border-radius: var(--radius);
	overflow: hidden;
}
.article-mini--bordered,
.article-row--bordered {
	border: 1px solid var(--color-border-soft);
}

.article-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--radius-pill);
	background-color: var(--color-primary);
	color: #fff;
	font-size: 12px;
	line-height: 1.6;
}

.section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2px solid var(--color-border);
	padding-bottom: 12px;
	margin-bottom: 24px;
}
.section-heading h2,
.section-heading h3,
.section-heading h4 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	position: relative;
}
.section-heading h2:after,
.section-heading h3:after,
.section-heading h4:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -14px;
	width: 48px;
	height: 2px;
	background: var(--color-primary);
}
.section-heading__more {
	font-size: 13px;
	color: var(--color-muted);
	transition: var(--transition);
}
.section-heading__more:hover {
	color: var(--color-primary);
}

.widget-about,
.widget-social,
.widget-subscribe,
.widget-topnews,
.widget-trending,
.widget-categories {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 24px;
	background: var(--color-bg);
}

.btn--primary {
	display: inline-block;
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	transition: var(--transition);
}
.btn--primary:hover {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

/* ===================================
	Global base & design system
=================================== */
body {
	font-family: var(--font-base);
	color: var(--color-text);
	background: var(--color-bg);
	font-size: 15px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	color: var(--color-heading);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 var(--space-5);
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }
a {
	color: var(--color-heading);
	text-decoration: none;
	transition: var(--transition);
}
a:hover { color: var(--color-primary); }
p { margin: 0 0 var(--space-4); line-height: 1.7; }

.container {
	max-width: 1280px;
	padding-left: 20px;
	padding-right: 20px;
}
.section-padding { padding: var(--space-9) 0; }

/* ---------- Section heading (centered variant) ---------- */
.section-heading--center {
	justify-content: center;
	text-align: center;
}
.section-heading--center h3:after,
.section-heading--center h4:after {
	left: 50%;
	transform: translateX(-50%);
}

/* ---------- Breadcrumb ---------- */
.wp-breadcrumb {
	background: var(--surface-soft);
	border-radius: var(--radius);
	padding: var(--space-4) var(--space-5);
	margin-bottom: var(--space-6);
}
.wp-breadcrumb .breadcrumb {
	margin: 0;
	padding: 0;
	background: transparent;
}
.wp-breadcrumb .breadcrumb-item,
.wp-breadcrumb .breadcrumb-item a {
	color: var(--color-muted);
	font-size: var(--text-sm);
}
.wp-breadcrumb .breadcrumb-item a:hover { color: var(--color-primary); }
.wp-breadcrumb .breadcrumb-item.active { color: var(--color-heading); }
.wp-breadcrumb .breadcrumb-item + .breadcrumb-item:before {
	color: var(--color-muted);
}

/* ---------- Inner page title (content pages) ---------- */
.inner-page-title {
	position: relative;
	padding: 56px 0;
	background: linear-gradient(180deg, rgba(34, 211, 238, .08), rgba(168, 85, 247, .08)), var(--color-dark);
	color: #fff;
	border-bottom: 2px solid transparent;
	border-image: var(--gradient-primary) 1;
	margin-bottom: var(--space-7);
}
.inner-page-title-bg {
	background-size: cover;
	background-position: center;
}
.inner-page-title .container { position: relative; z-index: 1; }
.inner-page-title h2 {
	color: #fff;
	margin: 0;
	font-size: var(--text-3xl);
}
.inner-page-title .breadcrumb-item,
.inner-page-title .breadcrumb-item a { color: rgba(255,255,255,.85); }
.inner-page-title .breadcrumb-item.active { color: #fff; }
.inner-page-title .breadcrumb-item + .breadcrumb-item:before { color: rgba(255,255,255,.6); }

/* ---------- Buttons ---------- */
.btn {
	border-radius: var(--radius-pill);
	padding: 10px 22px;
	font-weight: 600;
	transition: var(--transition);
}
.btn--primary {
	display: inline-block;
	background: var(--gradient-primary);
	border: 0;
	color: #fff;
	box-shadow: 0 8px 20px rgba(220,53,69,.28);
}
.btn--primary:hover {
	background: var(--gradient-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(220,53,69,.36);
}
.btn-outline {
	border: 1px solid var(--color-border);
	background: transparent;
	color: var(--color-heading);
}
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ---------- Alerts ---------- */
.error-message,
.alert {
	border: 0;
	border-radius: var(--radius);
	padding: 14px 18px;
	font-size: var(--text-sm);
	display: flex;
	align-items: center;
	gap: 8px;
}
.error-message { color: #fff; background: var(--error-color); }
.alert-danger { background: #fdecea; color: #c0392b; }
.alert-success { background: #eafaf1; color: #1e8449; }
.alert-info { background: #eaf2fd; color: #21618c; }

/* ---------- Forms ---------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
	width: 100%;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 11px 16px;
	font-size: var(--text-sm);
	color: var(--color-heading);
	background: var(--surface);
	transition: var(--transition);
}
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(220,53,69,.15);
}
label { font-size: var(--text-sm); color: var(--color-heading); font-weight: 600; margin-bottom: 6px; display: inline-block; }
.form-privacy-text { font-size: var(--text-xs); color: var(--color-muted); margin-top: 12px; }
.form-privacy-text a { color: var(--color-primary); }

/* ---------- Pagination ---------- */
.category-pagination .pagination {
	gap: 8px;
}
.category-pagination .page-item .page-link {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--color-heading);
	min-width: 42px;
	text-align: center;
	padding: 9px 12px;
	transition: var(--transition);
}
.category-pagination .page-item .page-link:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.category-pagination .page-item.active .page-link {
	background: var(--gradient-primary);
	border-color: transparent;
	color: #fff;
}
.category-pagination .page-item.disabled .page-link { color: var(--color-muted); }

/* ---------- Badge helpers ---------- */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-danger { background-color: var(--color-primary) !important; }
.bg-success { background-color: #2ecc71 !important; }
.bg-warning { background-color: #f39c12 !important; }
.bg-info { background-color: #3498db !important; }

/* ---------- Footer ---------- */
.site-footer {
	background:
		linear-gradient(180deg, rgba(34, 211, 238, .06), transparent 40%),
		var(--color-dark);
	color: rgba(255,255,255,.7);
	margin-top: var(--space-10);
	border-top: 1px solid var(--color-border);
}
.site-footer a { color: rgba(255,255,255,.7); }
.site-footer a:hover { color: #fff; }
.footer-top {
	padding: var(--space-9) 0 var(--space-8);
}
.footer-top .container {
	max-width: 1320px;
	width: 100%;
	margin: 0 auto;
	padding-left: var(--space-6);
	padding-right: var(--space-6);
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: var(--space-8);
}
/* brand column */
.footer-brand { max-width: 360px; }
.footer-logo {
	display: inline-block;
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -.02em;
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin-bottom: 14px;
}
.footer-desc {
	font-size: var(--text-sm);
	line-height: 1.7;
	color: rgba(255,255,255,.55);
	margin-bottom: 18px;
}
.footer-social { display: flex; gap: 12px; }
.footer-social a {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: transparent;
	color: rgba(255,255,255,.7);
	font-size: 14px;
	transition: var(--transition);
}
.footer-social a:hover {
	background: var(--gradient-primary);
	color: #04121a;
	border-color: transparent;
	box-shadow: var(--glow);
	transform: translateY(-2px);
}
/* link columns with divider */
.footer-link { position: relative; }
.footer-link + .footer-link:before {
	content: "";
	position: absolute;
	left: calc(var(--space-8) / -2);
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: var(--color-border);
}
.footer-contact-us .footer-title,
.footer-link .footer-title {
	color: #fff;
	font-size: var(--text-base);
	font-weight: 700;
	letter-spacing: .02em;
	margin-bottom: var(--space-5);
	position: relative;
	padding-bottom: 12px;
	text-transform: uppercase;
}
.footer-contact-us .footer-title:after,
.footer-link .footer-title:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 42px;
	height: 2px;
	background: var(--gradient-primary);
	border-radius: 2px;
}
.footer-link ul { list-style: none; padding: 0; margin: 0; }
.footer-link ul li { margin-bottom: 11px; }
.footer-link ul li a {
	font-size: var(--text-sm);
	display: inline-block;
	transition: var(--transition);
}
.footer-link ul li a:hover {
	color: var(--color-primary);
	transform: translateX(4px);
}
.copyright-footer {
	border-top: 1px solid var(--color-border);
	padding: var(--space-5) 0;
	font-size: var(--text-sm);
	text-align: center;
	color: rgba(255,255,255,.45);
}
.copyright-footer .container {
	max-width: 1320px;
	width: 100%;
	margin: 0 auto;
	padding-left: var(--space-6);
	padding-right: var(--space-6);
}
.copyright-footer a { color: #fff; }

/* ---------- Footer 移动端优化 ---------- */
/* 防止 grid 子项因最小内容宽度撑破视口 */
.footer-top .container > * { min-width: 0; }
@media (max-width: 991.98px) {
	.footer-top .container {
		grid-template-columns: 1fr 1fr;
	}
	.footer-brand {
		grid-column: 1 / -1;
		max-width: 100%;
	}
	/* 平板下隐藏列间竖线分隔，避免错位/溢出 */
	.footer-link + .footer-link:before { display: none; }
}
@media (max-width: 575.98px) {
	.footer-top .container {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
	.footer-brand { max-width: 100%; }
	.footer-social { flex-wrap: wrap; }
	.footer-top { padding: var(--space-7) 0 var(--space-6); }
	.copyright-footer .container {
		padding-left: var(--space-4);
		padding-right: var(--space-4);
	}
	.copyright-footer p { word-break: break-word; }
}

/* ---------- Tag cloud ---------- */
.tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tag-cloud a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-pill);
	font-size: var(--text-sm);
	color: var(--color-text);
	transition: var(--transition);
}
.tag-cloud a:hover {
	background: var(--gradient-primary);
	border-color: transparent;
	color: #fff;
}

/* ===================================
	Navigation & user area (migrated + modernized)
=================================== */
.header-lover {
	background: rgba(10, 15, 26, .92);
	border-bottom: 1px solid rgba(34, 211, 238, .35);
	box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
/* pinning only on desktop; on mobile the .is-fixed class must NOT use position:fixed
   (it jumps with the mobile URL bar). Mobile pinning is handled by #siteHeader sticky. */
@media (min-width: 992px) {
	.header-lover.is-fixed {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1080;
		box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
	}
}
.header-middle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--space-6);
}
.navbar-brand {
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -.02em;
}
.navbar-brand:hover { color: #fff; }
.navbar-nav .nav-link {
	color: rgba(255, 255, 255, .88);
	font-weight: 600;
	padding: 10px 14px;
	position: relative;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link { color: #fff; }
.navbar-nav .nav-link:after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 4px;
	height: 2px;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--ease);
}
.navbar-nav .nav-link:hover:after,
.navbar-nav .nav-item.active .nav-link:after { transform: scaleX(1); }
.navbar-toggler { border-color: rgba(255, 255, 255, .6); }
.navbar-toggler span { background: #fff; }

.qk-search { gap: 0; }
.qk-search .form-control {
	border-radius: var(--radius-pill) 0 0 var(--radius-pill);
	border: 0;
	height: 42px;
}
.qk-search .qk-search-btn {
	border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
}

.qk-user {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: auto;
	gap: 10px;
}
.qk-signin {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .5rem .9rem;
	border-radius: var(--radius-pill);
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-weight: 600;
	font-size: .85rem;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.2;
	transition: var(--transition);
}
.qk-signin:hover { background: rgba(255, 255, 255, .28); color: #fff; }

.user-dropdown { position: relative; }
.user-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .45rem .7rem;
	border-radius: var(--radius);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
	transition: background .2s;
}
.user-dropdown-toggle:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.user-dropdown-toggle .bi { fill: #fff; color: #fff; }
.user-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 190px;
	margin-top: .5rem;
	padding: .5rem;
	background: #fff;
	color: #2a2d33;
	border: 1px solid #ffd0d5;
	border-radius: var(--radius);
	box-shadow: 0 10px 30px rgba(220, 53, 69, .14);
	list-style: none;
	z-index: 1060;
}
.user-dropdown.open .user-dropdown-menu { display: block; }
.user-dropdown.open .user-dropdown-toggle .bi:last-child { transform: rotate(180deg); }
.user-dropdown-menu .user-dropdown-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem .75rem;
	border-radius: var(--radius-sm);
	color: #2a2d33;
	font-size: .92rem;
	font-weight: 500;
	text-decoration: none;
}
.user-dropdown-menu .user-dropdown-item .bi { color: var(--color-primary); flex: none; }
.user-dropdown-menu .user-dropdown-item:hover { background: #fff5f5; color: var(--color-primary); }
.user-dropdown-menu .user-dropdown-item:hover .bi { color: var(--color-primary-dark); }
.user-dropdown-divider { margin: .4rem .5rem; border: 0; border-top: 1px solid #eee; }

/* ---------- Alert additions (migrated from header.html inline) ---------- */
.error-message-container {
	background-color: #fff3cd;
	border-bottom: 1px solid #ffeaa7;
	padding: 10px 0;
}
.alert-warning {
	color: #856404;
	background-color: #fff3cd;
	border-color: #ffeaa7;
}
.alert i.fa-exclamation-triangle { margin-right: 8px; }

/* ===================================
	DARK TECH THEME OVERRIDE
	(overrides the light tokens above; all component
	 rules reference these custom properties)
=================================== */
:root {
	/* ===== Glassmorphism: light frosted-glass palette over a colorful gradient ===== */
	--glass-bg: rgba(255, 255, 255, .5);
	--glass-bg-strong: rgba(255, 255, 255, .66);
	--glass-bg-soft: rgba(255, 255, 255, .4);
	--glass-border: rgba(255, 255, 255, .55);
	--glass-border-strong: rgba(255, 255, 255, .75);
	--glass-blur: 18px;
	--glass-shadow: 0 10px 34px rgba(31, 38, 135, .14);
	--glass-shadow-sm: 0 6px 18px rgba(31, 38, 135, .10);
	--glass-shadow-lg: 0 22px 60px rgba(31, 38, 135, .20);

	--color-primary: #7c3aed;
	--color-primary-dark: #6d28d9;
	--color-accent: #ec4899;
	--color-accent-2: #6366f1;
	--color-dark: #0f172a;
	--color-dark-2: #1e293b;
	--color-surface: rgba(255, 255, 255, .5);
	--color-bg: transparent;
	--color-bg-soft: rgba(255, 255, 255, .4);
	--color-bg-mute: rgba(255, 255, 255, .6);
	--color-heading: #1e293b;
	--color-text: #475569;
	--color-muted: #64748b;
	--color-border: rgba(255, 255, 255, .55);
	--color-border-soft: rgba(255, 255, 255, .4);

	--gradient-primary: linear-gradient(135deg, #7c3aed, #ec4899);
	--gradient-hover: linear-gradient(135deg, #ec4899, #7c3aed);
	--gradient-soft: linear-gradient(135deg, rgba(124, 58, 237, .14), rgba(236, 72, 153, .14));

	--surface: rgba(255, 255, 255, .5);
	--surface-soft: rgba(255, 255, 255, .4);
	--surface-mute: rgba(255, 255, 255, .6);
	--on-surface: #1e293b;
	--on-surface-soft: #475569;
	--border: rgba(255, 255, 255, .55);
	--border-strong: rgba(255, 255, 255, .75);

	/* compat aliases (profile/login) */
	--bg-primary: rgba(255, 255, 255, .5);
	--bg-secondary: rgba(255, 255, 255, .4);
	--bg-tertiary: rgba(255, 255, 255, .6);
	--bg-hover: rgba(255, 255, 255, .72);
	--border-color: var(--border);
	--text-primary: var(--color-heading);
	--text-secondary: var(--color-text);
	--text-muted: var(--color-muted);
	--primary-color: var(--color-primary);
	--primary-dark: var(--color-primary-dark);

	--shadow-sm: 0 4px 14px rgba(31, 38, 135, .10);
	--shadow: 0 12px 34px rgba(31, 38, 135, .16);
	--shadow-lg: 0 24px 64px rgba(31, 38, 135, .20);
	--shadow-md: 0 14px 38px rgba(31, 38, 135, .16);
	--shadow-xl: 0 32px 80px rgba(31, 38, 135, .24);
	--error-color: #ef4444;
	--success-color: #10b981;

	--glow: 0 0 24px rgba(124, 58, 237, .30);
	--glow-purple: 0 0 24px rgba(236, 72, 153, .30);
}

/* ---- base surfaces: colorful gradient canvas ----
   IMPORTANT: body must NOT use background-attachment:fixed. On mobile browsers
   (iOS/Android) body{background-attachment:fixed} turns body into an implicit
   scrolling/positioning context, which silently breaks position:sticky for child
   elements (#siteHeader). body stays a normal scroll context (background-attachment
   defaults to scroll). */
html { min-height: 100%; }
body {
	min-height: 100%;
	color: var(--color-text);
	/* overflow-x: clip hides any horizontal overflow without turning body into a
	   scroll container - unlike overflow-x:hidden, clip does NOT break
	   position:sticky on child elements (#siteHeader). Prevents the mobile
	   horizontal scrollbar. */
	overflow-x: clip;
	background:
		radial-gradient(46rem 46rem at 12% 6%, rgba(124, 58, 237, .38), transparent 58%),
		radial-gradient(42rem 42rem at 88% -4%, rgba(236, 72, 153, .32), transparent 58%),
		radial-gradient(50rem 50rem at 86% 88%, rgba(59, 130, 246, .34), transparent 58%),
		radial-gradient(40rem 40rem at 8% 96%, rgba(16, 185, 129, .24), transparent 58%),
		linear-gradient(135deg, #eef2ff 0%, #fdf2f8 48%, #ede9fe 100%);
	background-repeat: no-repeat;
}
::selection { background: var(--color-primary); color: #04121a; }
hr { border-color: var(--color-border); }

/* ---- cards ---- */
.article-card { background: var(--color-surface); }
.article-badge { color: #04121a; font-weight: 700; }
.article-card .article-card__body .article-card__title a { color: var(--color-heading); }
.article-card .article-card__body .article-card__title a:hover { color: var(--color-primary); }
.article-card__body p { color: var(--color-text); }
.article-card:hover { box-shadow: var(--shadow), var(--glow); }
.article-meta li,
.article-meta li a { color: var(--color-muted); }
.article-meta li:before { background: var(--color-muted); }

/* ---- section heading neon accent ---- */
.section-heading h2:after,
.section-heading h3:after,
.section-heading h4:after { background: var(--gradient-primary); }

/* ---- footer accents -> neon ---- */
.footer-social a:hover { background: var(--color-primary); }
.footer-link li a:hover { color: var(--color-primary); }
.footer-link li a:before { background: var(--color-primary); }
.footer-contact-us { border-top-color: var(--color-primary); }
.footer-contact-us li a:hover { color: var(--color-primary); }
.footer-top .footer-title:after { background: var(--gradient-primary); }

/* ---- widgets (sidebar) ---- */
.widget-about,
.widget-social,
.widget-subscribe,
.widget-topnews,
.widget-trending,
.widget-categories {
	background: var(--color-surface);
	border: 1px solid var(--color-border-soft);
}
.widget {
	background: var(--color-surface);
}
.widget-title,
.widget-title h3 { color: var(--color-heading); }
.widget-title:after { background: var(--gradient-primary); }
.widget-categories li a { color: var(--color-text); }
.widget-categories li a:hover { color: var(--color-primary); }
.widget-trending li h4 a { color: var(--color-heading); }
.widget-trending li h4 a:hover { color: var(--color-primary); }
.widget-subscribe form input {
	background: var(--color-bg-soft);
	color: var(--color-heading);
	border-color: var(--color-border);
}
.widget-subscribe form button { background: var(--gradient-primary); color: #04121a; }

/* ---- user dropdown (dark) ---- */
.user-dropdown-menu {
	background: var(--color-surface);
	color: var(--color-heading);
	border-color: var(--color-border);
}
.user-dropdown-menu .user-dropdown-item { color: var(--color-heading); }
.user-dropdown-menu .user-dropdown-item:hover {
	background: rgba(34, 211, 238, .12);
	color: var(--color-primary);
}
.user-dropdown-divider { border-top-color: var(--color-border); }

/* ---- alerts (dark) ---- */
.alert-danger { background: rgba(255, 107, 129, .12); color: #ff9aa6; }
.alert-success { background: rgba(52, 211, 153, .12); color: #6ee7b7; }
.alert-info { background: rgba(34, 211, 238, .12); color: #7dd3fc; }
.error-message-container {
	background: rgba(255, 107, 129, .1);
	border-bottom-color: rgba(255, 107, 129, .22);
}
.alert-warning {
	background: rgba(251, 191, 36, .12);
	color: #fcd34d;
	border-color: rgba(251, 191, 36, .25);
}

/* ---- blockquote / content ---- */
.article-body blockquote {
	border-left: 3px solid var(--color-primary);
	background: var(--color-bg-soft);
	color: var(--color-heading);
}
.article-body blockquote i,
.article-body blockquote p { color: var(--color-heading); }

/* ---- legacy pagination ---- */
.blog-pagination .page-link { color: var(--color-heading); border-color: var(--color-border); }
.blog-pagination .page-item.active .page-link {
	background: var(--gradient-primary);
	border-color: transparent;
	color: #04121a;
}
.blog-pagination .page-link:hover:not(.active) {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

/* ---- navbar legacy bits ---- */
.navbar-toggler { background-color: rgba(255, 255, 255, .12); }
.header-newsletter-link a { border-color: var(--color-primary); }
.header-newsletter-link a:hover { background: var(--color-primary); }
.nav-btn a span { background: var(--color-primary); }

/* ---- sticky sidebar (relayout) ---- */
.layout-sidebar { position: sticky; top: 90px; }
.row--gutter-lg { --bs-gutter-x: 40px; }

/* ---- nav frosted when fixed ---- */
.header-lover.is-fixed {
	backdrop-filter: blur(12px);
	background: rgba(10, 15, 26, .82);
}

/* ---- light surface helpers must not break dark theme ---- */
.bg-light,
.bg-white,
.bg-dark { background: transparent !important; }

/* ---- tech hero ---- */
.hero-area { padding: 10px 0 10px; text-align: center; }
.hero-title {
	font-size: clamp(2rem, 5vw, 3.4rem);
	font-weight: 800;
	letter-spacing: -.02em;
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	margin: 0;
}
.hero-subtitle { color: var(--color-muted); font-size: 1.05rem; margin-top: 10px; }
.featured-post-area { padding-top: 10px; padding-bottom: 10px; }

/* ---- widget about image (drop inline) ---- */
.sidebar-about-img img { width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--radius); }

/* ---- neon divider for section headings ---- */
.section-heading { position: relative; padding-bottom: 14px; }

/* ===================================
	DETAIL / SINGLE / COMMENT / EMPTY (dark)
=================================== */
.page-main-title { color: var(--color-heading); font-size: var(--text-3xl); }

.article-cover { position: relative; overflow: hidden; border-radius: var(--radius); }
.article-cover img { width: 100%; display: block; border-radius: var(--radius); }
.single-article-badge {
	position: absolute;
	left: 16px;
	bottom: 16px;
	background: var(--gradient-primary);
	color: #04121a;
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 700;
}
.article-title { color: var(--color-heading); font-size: var(--text-3xl); }
.single-article-meta-box { border-bottom: 1px solid var(--color-border); }
.single-article-meta li,
.single-article-meta li a { color: var(--color-muted); }
.article-content { color: var(--color-text); }
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4 { color: var(--color-heading); margin: 1.2em 0 .5em; }
.article-content a { color: var(--color-primary); }
.article-content img { border-radius: var(--radius); }

/* recommended widget */
.recommended-item { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; }
.recommended-thumb { flex: 0 0 84px; }
.recommended-thumb img { width: 84px; height: 64px; object-fit: cover; border-radius: var(--radius); display: block; }
.recommended-title { margin: 0 0 4px; font-size: 15px; }
.recommended-title a { color: var(--color-heading); }
.recommended-title a:hover { color: var(--color-primary); }
.recommended-date { color: var(--color-muted); font-size: 12px; }

/* comment system (dark) */
.comment-rating-label { color: var(--color-muted); }
.comment-rating .fa-star { color: #34405a; }
.comment-rating .fa-star.active { color: #ffb400; }
#commentContent {
	background: var(--color-bg-soft);
	color: var(--color-heading);
	border-color: var(--color-border);
}
#commentContent:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(34, 211, 238, .15); }
.comment-login-hint { color: var(--color-muted); }
.comment-login-hint a { color: var(--color-primary); }
.comment-item { border-bottom-color: var(--color-border); }
.comment-avatar { background: var(--gradient-primary); }
.comment-name { color: var(--color-heading); }
.comment-date { color: var(--color-muted); }
.comment-text { color: var(--color-text); }
.comment-empty { color: var(--color-muted); }
.comment-toast { background: rgba(0, 0, 0, .85); }

/* empty data */
.empty-data-container {
	text-align: center;
	padding: 60px 20px;
	background: var(--color-surface);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-lg);
}
.empty-data-icon i { font-size: 46px; color: var(--color-primary); }
.empty-data-title { color: var(--color-heading); margin: 16px 0 8px; }
.empty-data-description { color: var(--color-text); max-width: 420px; margin: 0 auto 20px; }
.empty-data-button {
	display: inline-block;
	background: var(--gradient-primary);
	color: #04121a;
	padding: 10px 22px;
	border-radius: var(--radius-pill);
	font-weight: 700;
}
.empty-data-button:hover { color: #04121a; filter: brightness(1.08); }

/* ---- hero / spotlight titles must stay light on dark overlay ---- */
.article-hero__body .article-hero__title a,
.article-spotlight__body h2 a { color: #fff; }
.article-hero__body .article-hero__title a:hover,
.article-spotlight__body h2 a:hover { color: var(--color-primary); }
.article-spotlight__body time { color: #b5b5b5; }

/* ---- search box (nav) ---- */
.qk-search .form-control {
	background: var(--color-bg-soft);
	color: var(--color-heading);
	border: 0;
}
.qk-search .form-control::placeholder { color: var(--color-muted); }
.qk-search .form-control:focus {
	background: var(--color-bg-soft);
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}

/* ---- carousel nav arrows (neon) ---- */
.featured-post-carousel-2 .owl-nav .owl-prev,
.featured-post-carousel-2 .owl-nav .owl-next {
	background-color: var(--color-surface) !important;
	color: var(--color-primary) !important;
	border: 1px solid var(--color-border) !important;
}
.featured-post-carousel-2 .owl-nav .owl-prev:hover,
.featured-post-carousel-2 .owl-nav .owl-next:hover {
	background-color: var(--color-primary) !important;
	color: #04121a !important;
}

/* ---- list-row + bordered mini titles (dark readable) ---- */
.article-row .article-row__body .article-row__title a { color: var(--color-heading); }
.article-row .article-row__body .article-row__title a:hover { color: var(--color-primary); }

/* ============================================================
   GLASSMORPHISM OVERRIDE LAYER
   Frosted translucent surfaces over the colorful gradient canvas.
   ============================================================ */
.glass,
.article-card,
.article-row,
.article-mini,
.article-mini--bordered,
.article-card--bordered,
.article-card--horizontal,
.article-row-group,
.widget,
.widget-about,
.widget-social,
.widget-subscribe,
.widget-topnews,
.widget-trending,
.widget-categories,
.widget-subcategories,
.article-body,
.send-comment,
.sidebar,
.article-cover,
.post-video-item,
.gallery-item,
.instagram-item,
.inner-page-title,
.box-comment,
.contact-info,
.map-box,
.single-count-item,
.empty-data-container,
.sign-in-up-box,
.user-dropdown-menu,
.site-footer {
	background: var(--glass-bg) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
	backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
	border: 1px solid var(--glass-border) !important;
	box-shadow: var(--glass-shadow) !important;
}
.article-card--bordered { background: var(--glass-bg-strong) !important; }

/* ---- header / nav : frosted bar, dark text ---- */
header { background: transparent !important; }
.header-upper { background: transparent !important; }
.header-lover {
	background: rgba(255, 255, 255, .42) !important;
	border-bottom: 1px solid var(--glass-border) !important;
}
.header-lover.is-fixed { background: rgba(255, 255, 255, .6) !important; }
.navbar-brand,
.navbar-brand .brand-text { color: var(--color-heading) !important; }
.navbar-nav .nav-link { color: var(--color-text) !important; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link { color: var(--color-primary) !important; }
.navbar-nav .nav-link:after { background: var(--color-primary) !important; }
.header-social li a { color: var(--color-text) !important; }
.header-social li a:hover { color: #fff !important; background: var(--gradient-primary) !important; }
.qk-search .form-control {
	background: rgba(255, 255, 255, .7) !important;
	color: var(--color-heading) !important;
	border: 1px solid var(--glass-border) !important;
}
.qk-search .form-control:focus {
	background: rgba(255, 255, 255, .82) !important;
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .22) !important;
}
.qk-search-btn,
.btn-danger.qk-search-btn {
	background: var(--gradient-primary) !important;
	border: 0 !important;
	color: #fff !important;
}
.qk-signin {
	background: rgba(255, 255, 255, .6) !important;
	color: var(--color-heading) !important;
	border: 1px solid var(--glass-border) !important;
}
.qk-signin:hover { color: #fff !important; background: var(--gradient-primary) !important; }
.user-dropdown-toggle { color: var(--color-heading) !important; }
.user-dropdown-menu {
	background: rgba(255, 255, 255, .78) !important;
	color: var(--color-heading) !important;
	border: 1px solid var(--glass-border) !important;
	-webkit-backdrop-filter: blur(16px) !important;
	backdrop-filter: blur(16px) !important;
}
.user-dropdown-menu .user-dropdown-item { color: var(--color-text) !important; }
.user-dropdown-menu .user-dropdown-item:hover {
	background: rgba(124, 58, 237, .12) !important;
	color: var(--color-primary) !important;
}
.navbar-toggler {
	background: rgba(15, 23, 42, .08) !important;
	border: 1px solid var(--glass-border) !important;
}
.navbar-toggler span { background: var(--color-heading) !important; }

/* ---- buttons ---- */
.btn--primary,
.btn.btn--primary {
	background: var(--gradient-primary) !important;
	border: 0 !important;
	color: #fff !important;
}
.btn--primary:hover { background: var(--gradient-hover) !important; }
.btn-outline { border: 1px solid var(--border) !important; color: var(--color-heading) !important; }
.btn-outline:hover { color: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.empty-data-button { background: var(--gradient-primary) !important; color: #fff !important; }

/* ---- forms / inputs ---- */
.form-control,
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"], input[type="number"],
textarea, select {
	background: rgba(255, 255, 255, .7) !important;
	color: var(--color-heading) !important;
	border: 1px solid var(--glass-border) !important;
}
.form-control:focus, textarea:focus, select:focus {
	background: rgba(255, 255, 255, .84) !important;
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, .2) !important;
}
.form-control::placeholder { color: var(--color-muted) !important; }
.sign-in-up-box .btn { background: var(--gradient-primary) !important; color: #fff !important; border: 0 !important; }

/* ---- pagination ---- */
.blog-pagination .page-link,
#category-pagination .pagination-link {
	background: rgba(255, 255, 255, .6) !important;
	color: var(--color-heading) !important;
	border: 2px solid var(--glass-border) !important;
}
.blog-pagination .page-item.active .page-link,
#category-pagination .pagination-link.active {
	background: var(--gradient-primary) !important;
	color: #fff !important;
	border-color: transparent !important;
}
.blog-pagination .page-link:hover,
#category-pagination .pagination-link:hover { color: var(--color-primary) !important; }

/* ---- footer (light frosted) ---- */
.site-footer {
	background: rgba(255, 255, 255, .34) !important;
	color: var(--color-text) !important;
	-webkit-backdrop-filter: blur(20px) saturate(160%) !important;
	backdrop-filter: blur(20px) saturate(160%) !important;
}
.footer-desc { color: var(--color-muted) !important; }
.footer-title { color: var(--color-heading) !important; }
.footer-link ul li a,
.footer-link a { color: var(--color-text) !important; }
.footer-link ul li a:hover,
.footer-link a:hover { color: var(--color-primary) !important; }
.footer-social a {
	color: var(--color-heading) !important;
	border: 1px solid var(--glass-border) !important;
}
.footer-social a:hover { color: #fff !important; background: var(--gradient-primary) !important; }
.copyright-footer {
	color: var(--color-muted) !important;
	border-top: 1px solid var(--glass-border) !important;
}

/* ---- section & widget headings (dark) ---- */
.section-heading h2,
.section-heading h3,
.section-heading h4,
.section-heading a { color: var(--color-heading) !important; }
.widget-title h3 { color: var(--color-heading) !important; }
.widget-categories li a,
.widget-categories li a span.count,
.widget-trending li h4 a,
.widget-topnews li h4 a { color: var(--color-heading) !important; }
.widget-categories li a:hover,
.widget-trending li h4 a:hover,
.widget-topnews li h4 a:hover { color: var(--color-primary) !important; }
.widget-trending li .post-date,
.widget-topnews li .post-date { color: var(--color-muted) !important; }
.tag-cloud a {
	color: var(--color-text) !important;
	background: rgba(255, 255, 255, .42) !important;
	border: 1px solid var(--glass-border) !important;
}
.tag-cloud a:hover { color: #fff !important; background: var(--gradient-primary) !important; }

/* ---- article body / inner page title ---- */
.article-body,
.article-body p,
.article-body li { color: var(--color-text) !important; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { color: var(--color-heading) !important; }
.article-body a { color: var(--color-primary) !important; }
.article-body blockquote {
	background: var(--gradient-soft) !important;
	border-left: 3px solid var(--color-primary) !important;
	color: var(--color-heading) !important;
}
.article-body blockquote i,
.article-body blockquote p,
.article-body blockquote a { color: var(--color-heading) !important; }
.article-body blockquote a:hover { color: var(--color-primary) !important; }
.inner-page-title {
	background: var(--glass-bg) !important;
	color: var(--color-heading) !important;
	border-bottom: 1px solid var(--glass-border) !important;
	-webkit-backdrop-filter: blur(18px) saturate(160%) !important;
	backdrop-filter: blur(18px) saturate(160%) !important;
}
.inner-page-title h2,
.inner-page-title .breadcrumb-item,
.inner-page-title .breadcrumb-item a,
.inner-page-title .breadcrumb-item.active,
.inner-page-title .breadcrumb-item + .breadcrumb-item::before { color: var(--color-heading) !important; }
.inner-page-title .breadcrumb-item a:hover { color: var(--color-primary) !important; }

/* ---- faq (frosted) ---- */
.faq-box .accordion-item {
	background: rgba(255, 255, 255, .45) !important;
	border: 1px solid var(--glass-border) !important;
}
.faq-box .accordion-item .accordion-header .accordion-button {
	background: rgba(255, 255, 255, .62) !important;
	color: var(--color-heading) !important;
}
.faq-box .accordion-item .accordion-header .accordion-button:not(.collapsed) {
	background: var(--gradient-primary) !important;
	color: #fff !important;
}
.faq-box .accordion-item .accordion-body {
	background: rgba(255, 255, 255, .4) !important;
	color: var(--color-text) !important;
}

/* ---- contact / comments ---- */
.contact-info h3,
.contact-info .contact-title { color: var(--color-heading) !important; }
.box-comment .comment-meta .comment-author,
.box-comment .comment-meta h4 { color: var(--color-heading) !important; }

/* ---- misc accents ---- */
.scroll-top { background: var(--gradient-primary) !important; }

/* ============================================================
   MAGAZINE / EDITORIAL HOMEPAGE
   Big lead card + compact side list, strong hierarchy.
   ============================================================ */
.lead-card .article-card__media { aspect-ratio: 16 / 9; }
.lead-card .article-card__body { padding: 22px 24px 26px; }
.lead-title {
	font-size: clamp(1.25rem, 2.4vw, 1.85rem);
	line-height: 1.22;
	font-weight: 800;
	letter-spacing: -.01em;
	margin-bottom: 12px;
}
.lead-title a { color: var(--color-heading); }
.lead-title a:hover { color: var(--color-primary); }
.lead-excerpt {
	font-size: .96rem;
	line-height: 1.6;
	color: var(--color-text);
	margin: 0 0 16px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* glass panel wrapper for side lists / category blocks */
.glass-panel {
	background: var(--glass-bg) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
	backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
	border: 1px solid var(--glass-border) !important;
	border-radius: var(--radius-lg);
	box-shadow: var(--glass-shadow) !important;
	padding: 20px 20px 12px;
}
.side-list__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--glass-border);
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-primary);
}
.side-list__title::before {
	content: "";
	width: 24px;
	height: 3px;
	border-radius: 3px;
	background: var(--gradient-primary);
}

/* compact list (thumbnail + title + meta) */
.compact-list { list-style: none; margin: 0; padding: 0; }
.compact-item {
	display: flex;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--color-border-soft);
}
.compact-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.compact-item__thumb {
	flex: 0 0 104px;
	width: 104px;
	height: 76px;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--glass-shadow-sm);
}
.compact-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s var(--ease);
}
.compact-item:hover .compact-item__thumb img { transform: scale(1.1); }
.compact-item__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.compact-item__title {
	font-size: .94rem;
	line-height: 1.35;
	font-weight: 700;
	margin: 0 0 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.compact-item__title a { color: var(--color-heading); }
.compact-item__title a:hover { color: var(--color-primary); }
.compact-item__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	font-size: .78rem;
	color: var(--color-muted);
}
.compact-item__meta .meta-date,
.compact-item__meta .meta-views { display: inline-flex; align-items: center; gap: 4px; }

/* category block (glass panel with lead + compact list) */
.cat-block { display: flex; flex-direction: column; height: 100%; }
.cat-block .article-card {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.cat-lead .article-card__media { aspect-ratio: 16 / 9; }
.cat-lead .article-card__body { padding: 14px 2px 16px; }
.cat-block .compact-list { margin-top: 4px; }
.cat-block__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: 10px;
	padding-top: 12px;
	border-top: 1px solid var(--glass-border);
	width: 100%;
	font-size: .85rem;
	font-weight: 700;
	color: var(--color-primary);
	transition: gap .25s var(--ease);
}
.cat-block__more:hover { gap: 11px; color: var(--color-primary-dark); }

/* tighten editorial meta spacing inside lead cards */
.lead-card .article-meta { font-size: .8rem; color: var(--color-muted); }

/* ===== Hero Section (.hero / .hero-content) ===== */
.hero {
	position: relative;
	padding: clamp(2.75rem, 6vw, 4.25rem) 0;
	
	text-align: center;
	background: var(--gradient-primary);
	border-radius: var(--radius, 16px);
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}
/* subtle dot-grid texture overlay */
.hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px);
	background-size: 22px 22px;
	opacity: .55;
	pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-content {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 1rem;
}
.hero-content h1 {
	margin: 0;
	font-size: clamp(1.9rem, 4.5vw, 3.25rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .2);
}
/* accent line under the heading */
.hero-content h1:after {
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	margin: 1.1rem auto 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .85);
}