.overview-faq-wrapper {
	--padding-overview: 36px;
}

.navigation-faq {
	width: 100%;
	background-color: var(--white);
	border-radius: var(--rounded-2xl);
	box-shadow: var(--shadow);
}

.listing-overview-faq {
	--size-gap: 32px;
	--size-padding: 18px;
}

.listing-overview-faq .nav-overview-inner {
	width: 100%;
	min-height: 160px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	padding: var(--size-padding);
	border: 2px solid var(--gray);
	border-radius: var(--rounded-lg);
}

.listing-overview-faq .listing-item--active .nav-overview-inner,
.listing-overview-faq .nav-overview-inner:hover {
	color: var(--orange);
	font-weight: 800;
	border-color: var(--orange);
}

.listing-overview-faq .avatar-nav {
	display: block;
	width: 78px;
	height: 78px;
	object-fit: contain;
	margin-top: auto;
}

.listing-overview-faq .title-nav {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

.heading-faq {
	margin-top: 64px;
	padding: 0 var(--padding-overview);
}

.listing-faq-by-overview {
	margin-top: 32px;
	padding: 0 var(--padding-overview);

}

@media all and (max-width: 1199px) {
	.overview-faq-wrapper {
		--padding-overview: 0px;
	}

	.listing-overview-faq {
		--size-gap: 20px;
		--size-padding: 10px;
	}
}

@media all and (min-width: 601px) {
	.navigation-faq {
		padding: 40px 36px;
	}

	.listing-overview-faq .listing-item {
		width: 25%;
	}
}

@media all and (max-width: 600px) {
	.navigation-faq {
		padding: 32px var(--padding-container);
	}

	.listing-overview-faq .listing-item {
		width: 100%;
	}
}