/* =========================================================
   DIGBANG — FAQ CATEGORIES
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.db-faq-categories {

	width: 100%;

	margin: 88px 0 0;

	padding: 0;

	direction: rtl;

}


/* =========================================================
   INNER
   هم‌تراز با HERO
========================================================= */

.db-faq-categories__inner {

	width: 1320px;

	max-width: calc(100% - 120px);

	margin: 0 auto;

	padding: 0;

	box-sizing: border-box;

}


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

.db-faq-categories__nav {

	display: flex;

	align-items: flex-end;

	width: 100%;

	margin: 0;

	padding: 0;

	direction: rtl;

	box-sizing: border-box;

}


/* =========================================================
   STATIC CATEGORY LABEL
========================================================= */

.db-faq-categories__label {

	flex: 0 0 auto;

	margin: 0 60px 0 0;

	padding: 0 0 24px;

	color: #3D3631;

	font-family: "Vazirmatn", sans-serif;

	font-size: 18px;

	font-weight: 700;

	line-height: 1.5;

	white-space: nowrap;

}


/* =========================================================
   TABS WRAPPER
========================================================= */

.db-faq-categories__tabs {

	position: relative;

	display: flex;

	align-items: flex-end;

	/*
	مهم:
	کل فضای باقی‌مانده تا لبه چپ کانتینر
	*/
	flex: 1 1 auto;

	min-width: 0;

	margin: 0 48px 0 0;

	padding: 0;

	gap: 48px;

	direction: rtl;

	box-sizing: border-box;

}


/* =========================================================
   FULL GRAY LINE
   از اولین تب تا تراز چپ HERO
========================================================= */

.db-faq-categories__tabs::before {

	content: "";

	position: absolute;

	right: 0;

	bottom: 0;

	left: 0;

	height: 5px;

	background: #DFDFDF;

	border-radius: 999px;

	z-index: 1;

}


/* =========================================================
   TAB
========================================================= */

.db-faq-categories__tab {

	position: relative;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	flex: 0 0 auto;

	margin: 0;

	padding: 0 0 24px;

	background: transparent;

	border: 0;

	outline: 0;

	color: #8E7D71;

	font-family: "Vazirmatn", sans-serif;

	font-size: 18px;

	font-weight: 400;

	line-height: 1.5;

	text-align: center;

	white-space: nowrap;

	cursor: pointer;

	appearance: none;

	-webkit-appearance: none;

	z-index: 2;

	transition: color .2s ease;

}


/* =========================================================
   ACTIVE / TAB LINE
========================================================= */

.db-faq-categories__tab::after {

	content: "";

	position: absolute;

	right: 0;

	bottom: 0;

	width: 100%;

	height: 5px;

	background: transparent;

	border-radius: 999px;

	z-index: 3;

}


/* =========================================================
   ACTIVE TAB
========================================================= */

.db-faq-categories__tab.is-active {

	color: #CC5200;

	font-weight: 700;

}


.db-faq-categories__tab.is-active::after {

	background: #CC5200;

}


/* =========================================================
   INACTIVE TAB
========================================================= */

.db-faq-categories__tab:not(.is-active) {

	color: #8E7D71;

	font-weight: 400;

}


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

.db-faq-categories__tab:hover {

	color: #CC5200;

}


/* =========================================================
   OLD DIVIDER
========================================================= */

.db-faq-categories__divider {

	display: none;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1399px) {

	.db-faq-categories__inner {

		width: calc(100% - 64px);

		max-width: none;

	}

}


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

@media (max-width: 767px) {

	.db-faq-categories {

		margin-top: 56px;

	}


	.db-faq-categories__inner {

		width: calc(100% - 32px);

		max-width: none;

	}


	.db-faq-categories__nav {

		overflow-x: auto;

		overflow-y: hidden;

		scrollbar-width: none;

		-webkit-overflow-scrolling: touch;

	}


	.db-faq-categories__nav::-webkit-scrollbar {

		display: none;

	}


	.db-faq-categories__label {

		margin-right: 16px;

		padding-bottom: 16px;

		font-size: 14px;

	}


	.db-faq-categories__tabs {

		flex: 1 0 auto;

		min-width: max-content;

		margin-right: 32px;

		gap: 32px;

	}


	.db-faq-categories__tab {

		padding-bottom: 16px;

		font-size: 14px;

	}


	.db-faq-categories__tabs::before,
	.db-faq-categories__tab::after {

		height: 3px;

	}

}