/*
 * [logitude_faq] — the Saasland "FAQ Advance" look, values measured on live. The FAQ pages restyle it further
 * through the Additional CSS on #faqs-page (pills, full-width columns), which loads after this file.
 */
.faq_tab .nav { display: block; flex-wrap: wrap; margin: 0; padding-left: 0; border: 0; list-style: none; }
.faq_tab .nav-item { margin: 0; }
.faq_tab .nav-item .nav-link {
	position: relative;
	display: inline-block;
	margin-bottom: 20px;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: #677294;
	font: 400 16px/22px Poppins, sans-serif;
	transition: color .15s ease-in-out, background-color .15s ease-in-out;
}
.faq_tab .nav-item .nav-link::before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #5e2ced; transition: width .2s linear; }
.faq_tab .nav-item .nav-link.active { color: #5e2ced; }
.faq_tab .nav-item .nav-link.active::before { width: 100%; }

/* Every pane stays in the flow box; the hidden ones fade out and step aside, as the old tabs did. */
.faq_content > .tab-pane { display: block; }
.faq_content > .fade { transition: opacity .15s linear; }
.faq_content > .fade:not(.show) { position: absolute; width: 100%; visibility: hidden; opacity: 0; }

.faq_content .card { position: relative; display: flex; flex-direction: column; min-width: 0; border: 0; border-bottom: 1px solid #e4e0ee; border-radius: 0; background: transparent; word-wrap: break-word; }
.faq_content .card .card-header { margin-bottom: 0; padding: 0; border: 0; background: transparent; }
.faq_content .card .card-header .btn {
	position: relative;
	display: block;
	width: 100%;
	padding: 20px 30px 20px 0;
	border: 1px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: #5e2ced;
	font: 500 18px/26px Poppins, sans-serif;
	text-align: left;
	white-space: normal;
	cursor: pointer;
	user-select: none;
	transition: color .15s ease-in-out;
}
.faq_content .card .card-header .btn.collapsed { color: #576370 !important; }

/* Plus / minus drawn with two thin bars (the old icon font is not loaded). */
.faq_content .card .card-header .btn i { position: absolute; top: 50%; right: 0; display: none; width: 20px; height: 20px; transform: translateY(-50%); }
.faq_content .card .card-header .btn i::before,
.faq_content .card .card-header .btn .ti-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.faq_content .card .card-header .btn .ti-plus::after { width: 1.5px; height: 16px; }
.faq_content .card .card-header .btn .ti-minus,
.faq_content .card .card-header .btn.collapsed .ti-plus { display: block; }
.faq_content .card .card-header .btn.collapsed .ti-minus { display: none; }

.faq_content .collapse:not(.show) { display: none; }
.faq_content .collapsing { height: 0; overflow: hidden; transition: height .35s ease; }
.faq_content .card .card-body { flex: 1 1 auto; padding: 0 0 45px; color: #677294; font: 400 15px/26px Poppins, sans-serif; }
.faq_content .card .card-body p:last-child { margin-bottom: 0; }

@media (max-width: 1199px) {
	.faq_area .pr_50 { padding-right: 15px; }
}
@media (max-width: 991px) {
	.faq_tab { margin-bottom: 60px; }
}
