@import url("variable.css");

.container-inner {
	width: 100%;
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
}

.container-inner-blog-detail {
	width: 100%;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* ========================================================
===========================================================
===========================================================
=========================== blog ==========================
===========================================================
===========================================================
=========================================================== */
/* main section ----------------- header */
.top-bar {
	width: 100%;
}

.top-bar .container-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.top-bar-left {
	display: flex;
	align-items: center;
	gap: 3px;
}

/* =========================
   Language Dropdown
   ========================= */

.language-dropdown {
	position: relative;
}

.language-button {
	display: flex;
	align-items: center;
	gap: 5px;

	padding: 8px 10px;

	border: 0;
	background: transparent;
	cursor: pointer;
}

.language-chevron {
	transition: transform 0.2s ease;
}

/* =========================
   Popover
   ========================= */

.language-popover {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;

	min-width: fit-content;

	padding: 6px 0;

	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;

	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);

	display: none;

	z-index: 1000;
}

.language-dropdown.is-open .language-popover {
	display: block;
}

.language-dropdown.is-open .language-chevron {
	transform: rotate(180deg);
}

/* =========================
   Language Options
   ========================= */

.language-option {
	display: block;

	width: 100%;

	padding: 8px 14px;

	border: 0;
	background: transparent;

	text-align: left;

	cursor: pointer;
}

.language-option:hover {
	text-decoration-line: underline;
}

/* =========================
   Login
   ========================= */

.login {
	text-decoration: none;
}

/* high-contrast  */
.high-contrast-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

/* Toggle */

.contrast-toggle {
	position: relative;

	width: 16px;
	height: 9px;

	padding: 0;

	border: 1px solid #d1d5db;
	border-radius: 999px;

	background-color: #e5e7eb;

	cursor: pointer;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

/* Circle */

.contrast-toggle-thumb {
	position: absolute;

	top: 1px;
	left: 1px;

	width: 6px;
	height: 6px;

	border-radius: 50%;

	background-color: #ffffff;

	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);

	transition: transform 0.2s ease;
}

/* ON */

.contrast-toggle.active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.contrast-toggle.active .contrast-toggle-thumb {
	transform: translateX(7px);
}
/* high-contrast  */

/* main - header */

.site-header {
	position: fixed;
	top: 0;
	background-color: var(--color-background);
	border-bottom: 1px solid var(--color-border);
	width: 100%;

	width: 100%;

	z-index: 1000;
}

.site-header .container-inner {
	position: relative;
}

/* =====================================================
MAIN NAVIGATION
===================================================== */

.main-navigation {
	display: flex;

	align-items: center;

	gap: var(--navigation-gap);

	min-height: var(--navigation-height);
}

/* =====================================================
NAV BUTTONS
===================================================== */

.nav-trigger {
    text-wrap: nowrap;
}

.nav-trigger,
.nav-search-trigger {
	display: inline-flex;

	gap: 6px;
	align-items: center;

	justify-content: center;

	min-height: 40px;

	padding: 8px 12px;

	border: 0;

	border-radius: var(--navigation-radius);

	background-color: transparent;

	color: var(--color-text);

	cursor: pointer;

	line-height: 1;

	transition: all var(--transition-normal);
	:is(& > *) {
		transition: all var(--transition-normal);
	}
}

.nav-trigger:hover,
.nav-search-trigger:hover {
	background-color: var(--color-background-secondary);
}

.nav-trigger[aria-expanded="true"],
.nav-search-trigger[aria-expanded="true"] {
	background-color: var(--color-background-secondary);
	:is(& > *) {
		&:last-child {
			rotate: 90deg;
		}
	}
}

/* =====================================================
GET STARTED BUTTON
===================================================== */

.btn-icon {
	background: #f1f1f1;
	height: 32px;
	aspect-ratio: 1 / 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 99999px;
	color: var(--color-primary-button);
}

.mobile-get-started.has-icon {
	justify-content: space-between !important;
	gap: 16px !important;
	padding: 4px 4px 4px 16px !important;
}
.get-started-btn.has-icon {
	justify-content: space-between !important;
	gap: 16px !important;
	padding: 4px 4px 4px 16px !important;
}
.get-started-btn {
	display: flex;
	gap: 8px;
	align-items: center;
	color: #f1f1f1 !important;
	justify-content: center;
	min-height: 40px;
	margin-left: 4px;

	padding: 8px 16px;

	border-radius: 9999px;

	background-color: var(--color-primary-button);

	text-decoration: none;

	line-height: 1;

	transition:
		opacity var(--transition-fast),
		transform var(--transition-fast);
}

.get-started-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

/* =====================================================
MEGA MENU
===================================================== */
.nav-item-wrapper {
    position: relative;
    display: inline-flex;
}

.simple-menu {
    position: absolute;
    top: calc(100% + 13px);
    left: 0;
    min-width: 200px;
    max-width: 300px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
  	box-shadow: 0 0px 4px rgba(0, 0, 0, 0.08);
    padding: 8px;
    display: none;
    flex-direction: column;
    z-index: 1100;
}

.simple-menu.is-open {
    display: flex;
}

.simple-menu-item {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: #333;
    text-decoration: none;
    transition: background 0.15s ease;
}

.simple-menu-item:hover {
    background: #f2f2f2;
}
.mega-menu {
	position: absolute;

	top: 100%;

	left: 50%;
	right: 50%;

	width: 100%;

	max-width: 1050px;

	display: none;

	padding: var(--mega-menu-padding);

	border: 1px solid var(--color-border);

	box-shadow: 0 0px 4px rgba(0, 0, 0, 0.08);

	opacity: 0;

	background: var(--color-background);

	transform: translateY(-5px) translateX(-50%);

	transition:
		opacity var(--transition-normal),
		transform var(--transition-normal);

	z-index: 1100;
}

/* Open state */

.mega-menu.is-open {
	display: block;

	opacity: 1;

	transform: translateY(0) translateX(-50%);
}

/* =====================================================
MEGA MENU GRID
===================================================== */

.mega-menu-grid {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	gap: var(--mega-menu-gap);
}

/* =====================================================
MEGA MENU ITEM
===================================================== */

.mega-menu-item {
	display: flex;

	flex-direction: column;

	gap: 5px;

	min-height: 100px;

	padding: 16px;

	border-radius: var(--navigation-radius);

	color: var(--color-text);

	text-decoration: none;

	transition: background-color var(--transition-fast);
}

.mega-menu-item:hover {
	background-color: var(--color-background-secondary);

	color: var(--color-text);
}

/* =====================================================
MEGA MENU TITLE
===================================================== */

.mega-menu-title {
	line-height: 1.4;
}

/* =====================================================
MEGA MENU CAPTION
===================================================== */

.mega-menu-caption {
	color: var(--color-text-muted);

	line-height: 1.5;
}

/* =====================================================
SEARCH PANEL
===================================================== */

.search-panel {
	position: absolute;

	top: 100%;

	left: 0;

	width: 100%;

	display: none;

	padding: 20px;

	background-color: var(--color-background);
	border: 1px solid var(--color-border);

	border-radius: 0;

	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

	z-index: 1100;

	opacity: 0;

	transform: translateY(-5px);

	transition:
		opacity var(--transition-normal),
		transform var(--transition-normal);
}

.search-panel.is-open {
	display: block;

	opacity: 1;

	transform: translateY(0);
}

/* =====================================================
SEARCH FORM
===================================================== */

.search-form {
	width: 100%;
}

/* =====================================================
SEARCH INPUT
===================================================== */

.search-input {
	display: block;

	width: 100%;

	min-height: 48px;

	padding: 10px 16px;

	border: 1px solid var(--color-border);

	border-radius: var(--navigation-radius);

	outline: none;

	background-color: var(--color-background);

	color: var(--color-text);

	line-height: 1.5;

	transition:
		border-color var(--transition-fast),
		box-shadow var(--transition-fast);
}

.search-input::placeholder {
	color: var(--color-text-muted);
}

.search-input:focus {
	border-color: var(--color-primary);

	box-shadow: 0 0 0 3px rgba(37, 226, 164, 0.15);
}

/* =====================================================
ACCESSIBILITY
===================================================== */

.nav-trigger:focus-visible,
.nav-search-trigger:focus-visible,
.get-started-btn:focus-visible,
.mega-menu-item:focus-visible {
	outline: 2px solid var(--color-primary);

	outline-offset: 2px;
}

.search-input:focus-visible {
	outline: none;
}

.rotate {
	transition-duration: 300ms;
}

/* main - header */

/* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* =====================================================
   MOBILE NAVIGATION
   ===================================================== */

.mobile-header,
.mobile-navigation {
	display: none;
}

.logo {
	height: 35px;
}

/* main section ----------------- header */

/* main section ----------------- main */
.featured-posts-container {
	width: 580px;
	background-color: #f8f5ee;
	flex-shrink: 0;
}

.featured-posts-wrapper {
	align-items: stretch !important;
}

.featured-posts-title {
	padding: 0 0 12px 0;
	margin-bottom: 12px!;
	border-bottom: 3px solid var(--color-primary);
}

.featured-post-meta-card {
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: start;
	gap: 4px;
}
.featured-post-link:hover {
	text-decoration: underline !important;
}
.featured-post {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.featured-post-website {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-bottom: 10px;
	padding-top: 10px;
	gap: 0.5rem;
}

.featured-posts-container-context {
	padding: 24px;
}
.featured-posts-content {
    width: 100% !important;
}

.featured-posts-list {
	padding-top: 12px;
	display: flex;
	flex-direction: column;

	:is(& > *) {
		&:not(*:last-child) {
			border-bottom-style: solid;
			border-bottom-width: 1px;
		}

		& {
			padding: 16px 3px;
		}
	}
}


/* =====================================================
   SERVICES CARD — 12 column grid
   --img-cols + --text-cols باید جمعشون ۱۲ بشه
   ===================================================== */
.featured-post.services-card {
	--img-cols: 4;
	--text-cols: 8;

	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: 16px;
	align-items: stretch;
}

.services-card .services-post-image-wrapper {
	grid-column: span var(--img-cols);
	min-width: 0;
	max-width: none;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.services-card .services-post-image-horizontal-card {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.services-card .horizontal-featured-post-context {
	grid-column: span var(--text-cols);
	min-width: 0;
}


.featured-posts-wrapper {
	padding: 40px 0;
}

/* cards */
.featured-post-context {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: space-between;
}

.horizontal-card {
	display: flex;
	flex-direction: row !important;
	align-items: stretch !important;
}

.featured-post-image-horizontal-card {
	width: 150px;
	max-width: 150px;
}

.horizontal-featured-post-context {
	border-bottom: 2px solid var(--color-border);
	min-height: 100px;
}
.featured-post-image-wrapper {
	display: none;
}

.featured-post-card-link {
	height: 100%;
}
.horizontal-featured-post-title:hover {
	text-decoration: underline !important;
}

.box-marketing {
	width: 292px;
	flex-shrink: 0;
	border: 1px solid var(--color-border);
	height: auto;
	flex: 1;
	border-radius: 10px;
	padding: 40px;
}

.market-wrapper {
	align-items: stretch !important;
}
/* .market-section {
	padding: 40px 0;
} */
.box-marketing-cap {
	text-align: center;
	padding: 16px 0;
}

.header-marketing {
	margin-bottom: 32px;
}

.prime-link {
	position: relative;
	color: var(--color-primary);
	text-decoration: none;
	width: fit-content;
}

.prime-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 100%;
	height: 2px;
	background-color: var(--color-primary);
	transition: bottom var(--transition-fast);
}

.prime-link:hover::after {
	bottom: -2px;
}

.box-by-link {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* cards */

/* carousel */
/* =====================================================
   VIDEO CAROUSEL
   ===================================================== */

.video-carousel {
	position: relative;
	width: 100%;
}

/* =====================================================
   VIEWPORT
   ===================================================== */

.video-carousel-viewport {
	width: 100%;
	overflow: hidden;
	cursor: grab;
	user-select: none;
	touch-action: pan-y;
}

.video-carousel-viewport.is-dragging {
	cursor: grabbing;
}

/* =====================================================
   TRACK
   ===================================================== */

.video-carousel-track {
	display: flex;
	will-change: transform;
	transition: transform 0.35s ease;
}

/*
 * وقتی کاربر drag می‌کند،
 * transition موقتاً حذف می‌شود.
 */

.video-carousel-viewport.is-dragging .video-carousel-track {
	transition: none;
}

/* =====================================================
   CARD
   ===================================================== */

.video-card {
	flex: 0 0 33.333333%;
	min-width: 0;
	padding: 15px;
}

.video-card-link {
	display: flex;
	flex-direction: column;

	height: 100%;

	color: inherit;
	text-decoration: none;
}

/* =====================================================
   IMAGE
   ===================================================== */

.video-card-image-wrapper {
	width: 100%;
	overflow: hidden;
}

.video-card-image {
	display: block;

	width: 100%;
	aspect-ratio: 16 / 9;

	object-fit: cover;
}

/* =====================================================
   CONTENT
   ===================================================== */

.video-card-content {
	display: flex;
	flex-direction: column;

	flex: 1;

	padding-top: 16px;
}

.video-card-title {
	margin: 0;
}

/* =====================================================
   META
   ===================================================== */

.video-card-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 12px;

	margin-top: auto;
	padding-top: 16px;
}

.video-card-watch {
	display: inline-flex;
	align-items: center;

	gap: 6px;
}

.video-card-watch-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* =====================================================
   CAROUSEL HEADER
   ===================================================== */

.video-carousel-header {
	display: flex;
	align-items: center;
	gap: 12px;
}

/* =====================================================
   ARROWS
   ===================================================== */

.video-carousel-button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-surface);
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 99999px;
	border: 0;
	cursor: pointer;
}

.video-carousel-button:disabled {
	opacity: 0.5;
	cursor: default;
}

.services-post-image-horizontal-card {
    width: 100%;
    max-width: 218px;
    aspect-ratio: 3/2;
}

.video-carousel-header .video-carousel-viewport {
	flex: 1;
	min-width: 0;
}

/* =====================================================
   DOTS
   ===================================================== */

.video-carousel-dots {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 8px;

	margin-top: 24px;
}

.video-carousel-dot {
	width: 8px;
	height: 8px;

	padding: 0;

	border: 0;
	border-radius: 50%;

	background: currentColor;

	opacity: 0.3;

	cursor: pointer;
}

.video-carousel-dot.is-active {
	opacity: 1;
}

.video-carousel-section {
	background: var(--color-background-secondary);
	padding: 40px 0;
	margin: 40px 0;
}

.title-video-carousel-section {
	text-align: center;
	padding-bottom: 10px;
}

.video-card-meta {
	border-bottom: 2px solid var(--color-border);
	padding-bottom: 2px;
}

/* carousel */

/* services */
.services-post-image-wrapper{
    aspect-ratio: 3/2;
}
.blog-interrupter-card {
	background-color: var(--color-background-secondary);
	border-radius: 16px;
	margin-left: 0px;
	margin-right: 0px;
}

.sub-title-vedio {
	margin-top: 16px;
	margin-bottom: 16px;
}
/* services */

/* website */
.desktop-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(5, 1fr);
}

.desktop-featured-item {
	grid-column: 1;
	grid-row: 1 / 6;
}

.desktop-list-item {
	grid-column: 2;
}
.web-items-inner {
	border-bottom: 2px solid var(--color-border);
}
/* website */

/* explore */
.explore-item {
	border-radius: 12px;
	overflow: hidden;
	padding: 0 !important;
	/* box-shadow: 0 0 20px #f3f3f3; */
	border: 1px solid var(--color-border);
}
.explore-item-context {
	background-color: var(--color-background-secondary);
	padding: 12px;
}

.my-link:hover span:first-child {
	text-decoration: underline;
}

/* explore */

/* subscribe */
.subscribe-section {
	background-color: var(--color-background-secondary);
	padding: 40px 0;
	margin: 40px 0 0 0;
}

/* =====================================================
   LEFT — 60%
   ===================================================== */

.selection-options {
	flex: 0 0 60%;
	min-width: 0;
}

.selection-options-grid {
	display: grid;

	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* =====================================================
   CARD
   ===================================================== */

.selection-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	width: 100%;
	min-width: 0;
	min-height: 170px;
	height: 170px;
	padding: 24px;
	background: #ffffff;
	text-align: left;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

/* =====================================================
   CARD HOVER
   ===================================================== */

.selection-card:hover {
	background-color: #fafafa;
}

/* =====================================================
   CARD SELECTED
   ===================================================== */

.selection-card.is-selected {
	background-color: #fafafa;
	border: 1px solid var(--color-border);
}

/* =====================================================
   LETTER
   ===================================================== */

.selection-card-letter {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	flex: 0 0 40px;

	border-radius: 50%;

	background-color: #f0f0f0;

	font-size: 16px;
	font-weight: 600;
}

/* =====================================================
   PLUS
   ===================================================== */

.selection-card-plus {
	position: absolute;

	top: 19px;
	right: 24px;

	display: flex;

	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	font-size: 28px;
	line-height: 1;
}

/* =====================================================
   CARD CONTENT
   ===================================================== */

.selection-card-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	margin-top: auto;
}

/* =====================================================
   TITLE
   ===================================================== */

.selection-card-title {
	display: block;
	min-height: 24px;
}

/* =====================================================
   CAPTION
   ===================================================== */

.selection-card-caption {
	display: -webkit-box;

	overflow: hidden;

	margin-top: 8px;

	min-height: calc(1.5em * 3);
	max-height: calc(1.5em * 3);

	line-height: 1.5;

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* =====================================================
   RIGHT — 40%
   ===================================================== */

.selection-form-wrapper {
	flex: 0 0 70%;
    min-width: 0;
    margin-inline: auto;
}

/* =====================================================
   FORM
   ===================================================== */

.selection-form {
	display: flex;

	flex-direction: column;

	justify-content: center;

	width: 100%;
	height: 100%;

	padding: 40px;
}

.selection-form-content {
	width: 100%;
}

/* =====================================================
   LABEL
   ===================================================== */

.selection-form-label {
	display: block;

	margin-bottom: 8px;
}

/* =====================================================
   INPUT
   ===================================================== */

.selection-form-input {
	display: block;

	width: 100%;

	height: 48px;

	padding: 0 16px;
	border: 1px solid var(--color-border);

	outline: none;
}

.selection-form-input:focus {
	border-color: var(--color-border);
}

/* =====================================================
   SUBMIT
   ===================================================== */

.submit-btn {
	margin-top: 20px;
}

.learn-more-img {
	max-width: 40% !important;
}

.selection-email {
	border-color: var(--color-border);
	border-radius: 16px !important;
}

.get-started-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.selection-layout {
	display: flex;
	border-radius: 16px;
	width: 100%;
	min-height: 400px;
}

/* subscribe */
/* main section ----------------- main */

/* main section ----------------- footer */
.popular-features-list-links {
	display: grid;
	grid-template-rows: repeat(9, minmax(0, 1fr));
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.social-media-footer {
	position: absolute;
	inset-inline-start: 50%;
	inset-inline-end: 50%;
	translate: -50% 3%;
	width: fit-content;
	gap: 40px;
	height: 40px;
	bottom: 0%;
	background: #1f1f1f;
	padding-left: 40px;
	padding-top: 60px;
	padding-right: 40px;
}
.item-footer-link {
	height: fit-content;
}
.item-footer-link a {
	padding: 4px;
	letter-spacing: -0.02rem;
}

.footer-social-link svg {
	fill: #747474;

	width: 26px;
	height: 26px;
}
.footer-social-link:hover svg {
	fill: #d6d6d6;
}

.links-footer {
	display: flex;
	border-bottom: 2px solid var(--color-border-dark);
	position: relative;
}

.columns-footer {
	padding-bottom: 80px;
	columns: 3;
	padding-inline-start: 40px;
	border-left: 2px solid var(--color-border-dark);
	flex-shrink: 0;
}

.columns-footer ul .item-footer-link:not(:first-of-type) {
	margin-top: 8px;
}
.columns-footer ul .item-footer-link:last-of-type {
	margin-bottom: 26px;
}

.title-list {
	margin-bottom: 14px;
}

/* main section ----------------- footer */

/* accordion section */
.accordion-wrapper {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.accordion {
	border-bottom: 1px solid var(--color-border-dark);
	overflow: hidden;
}

.accordion-btn {
	width: 100%;
	text-align: right;
	padding: 15px 20px;
	background: #1f1f1f;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background 0.3s;
}

.accordion-btn:hover {
	opacity: 90;
}

.accordion-btn::after {
	content: "+";
	font-size: 20px;
	transition: transform 0.3s;
}

.accordion-btn.active::after {
	content: "−";
}


.accordion-content ul div li {
	margin-top: 8px;
}
.accordion-content ul {
	padding-bottom: 20px;
}
.accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	padding: 0 20px 00px 20px;
}

.accordion-content p {
	padding: 15px 0;
	margin: 0;
	color: #444;
	line-height: 1.8;
}
/* accordion section */

/*  */
.info-footer-links {
	flex-wrap: wrap !important;
	:is(& > *) {
		padding-inline: 20px;
		margin-block: 20px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		&:not(*:last-child) {
			border-inline-end: 1px solid var(--color-border-dark);
		}
	}
}
.info-footer-link {
	color: var(--color-text-muted) !important;
}
.info-footer-link:hover {
	color: #f1f1f1 !important;
	text-decoration: underline !important;
}

/* ========================================================
===========================================================
===========================================================
=========================== blog ==========================
===========================================================
===========================================================
=========================================================== */

/* ========================================================
===========================================================
===========================================================
======================= blog detail =======================
===========================================================
===========================================================
=========================================================== */

.blog-detail-h3 {
	margin-block: 16px !important;
	text-align: center;
}

.blog-detail-img-1 {
	max-width: 550px;
	max-height: 412px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.blog-detail-herosection {
	background: var(--color-background-secondary);
}

.blog-detail-herosection-inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blog-detail-writter {
	text-decoration: underline 2px;
	text-decoration-color: var(--color-primary);
}

.blog-detail-box-hero {
	background-color: var(--color-background);
	padding: 16px;
	margin-block: 16px;
}
.blog-detail-writter-part {
	margin-top: 16px;
	margin-bottom: 24px;
}

.blog-detail-par {
	margin-block: 18px;
}

.blog-detail-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-detail-box-marketing {
	background-color: var(--color-background-secondary);
	padding: 40px;
}
.blog-detail-box-inner-link {
	border: 1px solid var(--color-border);
	padding: 16px;
}
.vector-logo {
	height: 48px;
	width: 48px;
}
.blog-detail-img-2 {
	max-width: 550px;
	max-height: 516px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
.breadcrumb {
	padding-top: 30px;
	padding-bottom: 10px;
}

.breadcrumb-list {
	max-width: 50%;
}

.blockquote-class {
	position: relative;
	margin: 0;
	padding: 2rem 3rem;
	background: var(--color-background-secondary);
	border-left: 3px solid var(--color-border);
	color: var(--color-text);
	font-style: italic;
	line-height: 1.6;
}

.blockquote-class p {
	margin: 0;
	font-size: 0.95rem;
	position: relative;
	text-align: center;
	padding: 0 16px !important ;
	z-index: 1;
}

.first-quote-svg,
.last-quote-svg {
	position: absolute;
	width: 50px;
	height: 50px;
	color: var(--secondary-300);
	opacity: 0.4;
}

.first-quote-svg {
	top: 1rem;
	left: 1rem;
}
.last-quote-svg {
	bottom: 1rem;
	right: 1rem;
	transform: rotate(180deg);
}

/* ====================================== wrapper ====================================== */
.data-table-wrapper {
	max-width: 960px;
	margin-inline: auto;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	overflow: hidden;
}

.data-table-head-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--color-border);
}

.data-table-heading {
	font-size: 17px;
	font-weight: 600;
	color: var(--color-text);
}

.data-table-add-btn {
	padding: 9px 16px;
	border-radius: 8px;
	background: var(--color-primary-button);
	color: #ffffff;
	font-size: 13px;
	font-weight: 600;
	transition: opacity var(--transition-fast);
}

.data-table-add-btn:hover {
	opacity: 0.85;
}
/* ====================================== wrapper ====================================== */

/* ====================================== table ====================================== */
.data-table-scroll {
	width: 100%;
	overflow-x: auto;
}

.data-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
}

.data-table-th {
	text-align: left;
	padding: 10px 20px;
	background: var(--color-surface-secondary);
	color: var(--color-text-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.data-table-th-actions {
	width: 72px;
}

.data-table-row {
	transition: background var(--transition-fast);
}

.data-table-row:hover {
	background: var(--color-surface);
}

.data-table-row:not(:last-child) .data-table-td {
	border-bottom: 1px solid var(--color-border);
}

.data-table-td {
	padding: 14px 20px;
	font-size: 14px;
	color: var(--color-text);
	vertical-align: middle;
	white-space: nowrap;
}

.data-table-td-title {
	font-weight: 500;
	white-space: normal;
	max-width: 280px;
}

.data-table-td-muted {
	color: var(--color-text-muted);
}
/* ====================================== table ====================================== */

/* ====================================== status ====================================== */
.data-table-status {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	gap: 6px;
	padding: 4px 10px 4px 7px;
	border-radius: 50rem;
	font-size: 12px;
	font-weight: 600;
}



.data-table-scroll {
	scrollbar-width: thin;
	scrollbar-color: #cfcfcf transparent;
}


.data-table-scroll::-webkit-scrollbar {
	height: 5px;
	width: 5px;
}

.data-table-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.data-table-scroll::-webkit-scrollbar-thumb {
	background: #cfcfcf;
	border-radius: 10px;
}

.data-table-scroll::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

.data-table-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.data-table-status-published {
	background: rgba(37, 226, 164, 0.14);
	color: #1a9e73;
}

.data-table-status-draft {
	background: var(--color-surface-secondary);
	color: var(--color-text-muted);
}

.data-table-status-scheduled {
	background: rgba(32, 33, 42, 0.08);
	color: var(--color-primary-button);
}
/* ====================================== status ====================================== */

/* ====================================== chip / author / actions ====================================== */
.data-table-chip {
	display: inline-flex;
	padding: 4px 10px;
	width: 100%;
	justify-content: center;
	border-radius: 6px;
	background: var(--color-surface-secondary);
	color: var(--color-text);
	font-size: 12px;
	font-weight: 500;
}

.data-table-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-primary-button);
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	margin-right: 8px;
	vertical-align: middle;
}

.data-table-author-name {
	font-size: 14px;
	color: var(--color-text);
	vertical-align: middle;
}

.data-table-td-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.data-table-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	color: var(--color-text-muted);
	transition:
		background var(--transition-fast),
		color var(--transition-fast);
}

.data-table-icon-btn:hover {
	background: var(--color-surface-secondary);
	color: var(--color-text);
}
/* ====================================== chip / author / actions ====================================== */

/* ========================================================
===========================================================
===========================================================
======================= blog detail =======================
===========================================================
===========================================================
=========================================================== */

/* slider */
/* ====================================== slider ====================================== */

.slider-wrapper {
	/* position: relative; */
	overflow: hidden;
}

.slider-carts {
	display: flex;
	align-items: stretch;
	transition: transform 0.4s ease;
	will-change: transform;
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
}

.slider-carts.is-dragging {
	transition: none;
	cursor: grabbing;
}

.slider-cart {
	overflow: hidden;
	max-width: 400px !important;
	padding-inline: 10px;
	flex-shrink: 0;
}

.context-slider {
	padding: 16px;
}

.slider-cart img,
.slider-cart a {
	-webkit-user-drag: none;
}

.slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	border-radius: 999999999px;
	padding: 5px;
	background-color: var(--color-background);
}

.slider-arrow-prev {
	right: -40px;
}

.slider-arrow-next {
	left: -40px;
}

.slider-arrow:disabled {
	pointer-events: none;
	opacity: 0.4;
}

.slider-cart a {
	max-width: 100%;
	border-radius: 0 0 16px 16px;
	background-color: var(--color-background);
}

.slider-buttons {
	display: flex;
	padding-top: 20px;
	gap: 4px;
	align-items: center;
	justify-content: center;
}

.slider-button {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	padding: 0;
	background-color: #dedede;
}

.slider-section {
	position: relative;
	background-color: var(--color-background-secondary);
}

.slider-button.active {
	background: var(--color-primary-button);
	width: 14px;
	height: 14px;
}
.button-wrapper {
	max-width: fit-content;
	position: relative;
}
.p-blog-cart-slider {
	max-height: 72px;
	height: 72px;
}
/* ====================================== slider ====================================== */
/* slider */






/* new - for mega menu */
.nav-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: var(--navigation-radius);
	color: var(--color-text);
	text-decoration: none;
	line-height: 1;
	transition: all var(--transition-normal);
	text-wrap: nowrap;
}
.nav-link:hover {
	background-color: var(--color-background-secondary);
}

.mega-menu-item .mega-menu-title {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}
.mega-menu-item .mega-menu-title:hover {
	text-decoration: underline;
}

.mega-menu-sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mega-menu-sub-link::before {
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;

  background-color: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 5L16 12L9 19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;

  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 5L16 12L9 19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.mega-menu-sub {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}
.mega-menu-sub-link {
	color: var(--color-text-muted);
	font-size: 14px;
	text-decoration: none;
}
.mega-menu-sub-link:hover {
	color: var(--color-text);
	text-decoration: underline;
}

.mega-menu-all {
	display: inline-block;
	margin-top: 12px;
	padding: 0 16px;
	color: var(--color-primary);
	text-decoration: none;
}
.mega-menu-all:hover {
	text-decoration: underline;
}

a.mobile-nav-item {
	color: inherit;
	text-decoration: none;
}
.mobile-sub-item-nested {
	padding-inline-start: 32px;
	opacity: 0.85;
}



.search-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}
.search-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--navigation-radius);
	color: var(--color-text);
	text-decoration: none;
}
.search-pagination .page-numbers:hover,
.search-pagination .page-numbers.current {
	background-color: var(--color-background-secondary);
}


/*live search*/
.live-search-results {
	margin-top: 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--navigation-radius);
	background-color: var(--color-background);
	overflow: hidden;
}
.live-search-results[hidden] {
	display: none;
}
.live-search-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.live-search-item + .live-search-item {
	border-top: 1px solid var(--color-border);
}
.live-search-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	color: var(--color-text);
	text-decoration: none;
}
.live-search-link:hover {
	background-color: var(--color-background-secondary);
}
.live-search-title {
	line-height: 1.4;
}
.live-search-all {
	display: block;
	padding: 12px 16px;
	border-top: 1px solid var(--color-border);
	color: var(--color-primary);
	text-decoration: none;
}
.live-search-all:hover {
	background-color: var(--color-background-secondary);
}
.live-search-status {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px;
	color: var(--color-text-muted);
}
.live-search-spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--color-border);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: live-search-spin 0.7s linear infinite;
}
@keyframes live-search-spin {
	to {
		transform: rotate(360deg);
	}
}

.nav-logo {
    flex-shrink: 0 !important;
}
.nav-scroll {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 16px;
    padding-right: 5px;
    padding-left: 5px;
    overflow-y: auto;
}
.nav-left {
	flex: 1 1 0;
	min-width: 0;
	justify-content: flex-start;
}
.nav-right {
    flex-shrink: 0;
}


.live-search-list > .live-search-item {
    width: 100% !important;
}


.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}
.cat-card-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cat-card-body{
    margin-top: 12px;
    padding-inline: 12px;
}

.mobile-sub-items {
    max-height: 70svh;
      overflow-y: auto;
}

.mobile-navigation-level.mobile-main-level{
    max-height: 70svh;
      overflow-y: auto;
}


/* ====================================== author page ====================================== */
.author-hero {
	background: var(--color-background-secondary);
	padding: 56px 0 0;
}
 
.author-hero-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 40px 56px;
	padding-bottom: 48px;
}
 
.author-avatar {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: var(--color-surface);
	border: 4px solid var(--color-background);
	box-shadow:
		0 0 0 3px var(--color-primary),
		var(--bs-box-shadow);
}
 
.author-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-width: 0;
}
 
.author-role {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(37, 226, 164, 0.16);
	font-family: "Figtree", sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
 
.author-name {
	overflow-wrap: anywhere;
}
 
.author-bio {
	max-width: 640px;
	text-transform: none; /* قانون سراسری capitalize روی متن بیو اعمال نشه */
}
 
.author-topics {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
 
.author-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
 
.author-chip {
	display: inline-flex;
	padding: 6px 14px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	background: var(--color-background);
	transition:
		border-color var(--transition-normal),
		background var(--transition-normal);
}
 
.author-chip:hover {
	border-color: var(--color-primary);
	background: rgba(37, 226, 164, 0.1);
}
 
.author-socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
 
.author-social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: var(--color-background);
	transition:
		background var(--transition-normal),
		border-color var(--transition-normal);
}
 
.author-social-link svg {
	fill: var(--color-text);
	transition: fill var(--transition-normal);
}
 
.author-social-link:hover {
	background: var(--color-primary-button);
	border-color: var(--color-primary-button);
}
 
.author-social-link:hover svg {
	fill: #fff;
}
 
.author-stats {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-auto-flow: column;
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	background: var(--color-background);
}
 
.author-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px 28px;
}
 
.author-stat + .author-stat {
	border-inline-start: 1px solid var(--color-border);
}
 
.author-stat-value {
	font-family: "Figtree", sans-serif;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
}
 
.author-empty {
	padding-block: 24px;
}
 
/* اسلایدرِ تمام‌عرض (صفحه‌ی نویسنده) */
.slider-heading {
	margin-bottom: 28px;
}
 
.slider-wide {
	width: 100%;
}
 
.slider-wide .button-wrapper {
	max-width: 100%;
	width: 100%;
}
 
/* فلش‌ها داخل کادر باشن تا از صفحه بیرون نزنن */
.slider-wide .slider-arrow {
	border: 1px solid var(--color-border);
	box-shadow: var(--bs-box-shadow-sm);
}
 
.slider-wide .slider-arrow-prev {
	right: 8px;
}
 
.slider-wide .slider-arrow-next {
	left: 8px;
}
/* ====================================== author page ====================================== */