/* FAQs Page Styles */

.faqs-page-container,
.faqs-page-container * {
	box-sizing: border-box;
}

.faqs-page-container {
	background-color: #f7f6f4;
	width: 100%;
	overflow: visible;
}

/* Hero Section */
.faqs-hero {
	position: relative;
	height: 512px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #EFF1F4;

}

.faqs-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}

.faqs-hero-overlay {
	position: absolute;
	inset: 0;
/* 	background: linear-gradient(90deg, rgba(0,0,0,0.65) 6.18%, rgba(0,0,0,0.3) 64.44%); */
	z-index: 2;
}

.faqs-hero-content {
	position: relative;
	z-index: 3;
	max-width: 580px;
	color: #eff1f4;
}

.faqs-hero-title {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;

	line-height: 1.2;
	letter-spacing: 1.2px;
	margin-bottom: 13px;
	max-width: 37%;
	color: #EFF1F4;
	text-transform: capitalize;
}

.faqs-hero-desc {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	max-width: 38%;
}

/* Main FAQ Body Section */
.faqs-body-section {
	background-color: #eff1f4;
	width: 100%;
}

.faqs-body-container {
	max-width: 1240px;
	margin: 0 auto;
	padding: 120px 0;
	display: flex;
	align-items: flex-start;
	gap: 120px;
}

/* Sticky TOC Sidebar */
.faqs-sidebar {
	width: 320px;
	position: -webkit-sticky;
	position: sticky;
	top: 120px;
	flex-shrink: 0;
	align-self: flex-start;
	z-index: 10;
}

.faqs-toc ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 32.5px;
}

.faqs-toc-link {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: -0.36px;
	color: #456793;
	text-decoration: none;
	text-transform: capitalize;
	transition: color 0.3s ease, padding-left 0.3s ease;
	display: block;
	cursor: pointer;
}

.faqs-toc-link:hover,
.faqs-toc-link.active {
	color: #0a1628;
}

.faqs-toc-link.active {
	padding-left: 8px;
	border-left: 2px solid #0a1628;
}

/* FAQs Content Wrapper */
.faqs-content-wrapper {
	flex: 1;
	max-width: 800px;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.faqs-section-group {
	scroll-margin-top: 140px; /* Accounts for sticky headers during scroll */
}

.faqs-section-title {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 28px;
	color: #0a1628;
	line-height: 1.2;
	letter-spacing: -0.56px;
	margin: 0 0 0px 0;
	text-transform: capitalize;
}

.faqs-accordion-list {
	display: flex;
	flex-direction: column;
}

.faqs-accordion-item {
	border-bottom: 1px solid #cfdaeb;
	padding: 24px 0;
	transition: border-color 0.3s ease;
}

.faqs-accordion-item:last-child {
	border-bottom: none;
}

.faqs-accordion-toggle {
	width: 100%;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	text-align: left;
	outline: none;
	color: #0a1628;
	gap: 20px;
}

.faqs-accordion-question {
	font-family: 'DM Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	letter-spacing: -0.36px;
	transition: color 0.3s ease;
	text-transform: capitalize;
}

.faqs-accordion-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #456793;
	transition: transform 0.3s ease, color 0.3s ease;
}

.faqs-accordion-toggle:hover .faqs-accordion-question {
	color: #456793;
}

.faqs-accordion-toggle:hover .faqs-accordion-icon {
	color: #0a1628;
}

/* Expanded Accordion Style */
.faqs-accordion-item.expanded {
	border-color: #0a1628;
}

.faqs-accordion-item.expanded .faqs-accordion-question {
	color: #0a1628;
}

.faqs-accordion-item.expanded .faqs-accordion-icon svg path:nth-child(2){
	display: none;
}

.faqs-accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
}

.faqs-accordion-content-inner {
	padding-top: 5px;
	padding-right: 40px;
}

.faqs-accordion-content-inner p {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #456793;
	line-height: 1.5;
	margin: 0;
}

/* Contact CTA Section */
.faqs-contact-cta {
	background: transparent;
	padding: 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top:  0px;
	border: none;
	border-radius: 0;
	gap: 16px;
}

.faqs-contact-text {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: #0a1628;
	margin: 0;
}

.faqs-contact-btn {
	display: inline-block;
	background-color:#0A1628;
	border: 1px solid #0A1628;
	color: #EFF1F4;
	font-family: 'DM Sans', sans-serif;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	padding: 12px 24px;
	letter-spacing: -0.28px;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	border-radius: 0px;
	text-transform: capitalize;
}

.faqs-contact-btn:hover {
	background-color:#15243C !important;
	border-color:#15243C !important;
	
}

@media only screen and (max-width: 1366px){

	.faqs-hero-title{
		max-width: 55%;
	}
	.faqs-hero-desc{
		max-width: 55%;
	}

}

/* Responsive Adjustments */
@media (max-width: 1200px) {
	.faqs-body-container {
		padding: 80px 40px;
		gap: 40px;
	}

	.faqs-sidebar {
		width: 260px;
	}
}

@media (max-width: 992px) {
	.faqs-body-container {
		flex-direction: column;
		padding: 60px 40px;
		gap: 40px;
	}

	.faqs-sidebar {
		width: 100%;
		position: -webkit-sticky;
		position: sticky;
		top: 64px; /* Adjust based on sticky header height */
		background-color: #eff1f4;
		padding: 16px 0;
		margin-bottom: 20px;
		border-bottom: 1px solid #cfdaeb;
		z-index: 100;
	}

	.faqs-toc ul {
		flex-direction: row;
		overflow-x: auto;
		gap: 16px;
		padding: 0 10px;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	/* Hide scrollbars for a clean look */
	.faqs-toc ul::-webkit-scrollbar {
		display: none;
	}

	.faqs-toc ul {
		scrollbar-width: none;
	}

	.faqs-toc-link {
		white-space: nowrap;
		font-size: 14px;
		padding: 8px 16px !important;
		background-color: #f7f6f4 !important;
		border: 1px solid #cfdaeb !important;
		border-radius: 20px;
		scroll-snap-align: start;
		transition: border-color 0.2s ease;
	}

	.faqs-toc-link.active {
		/*         background-color: #0a1628 !important;
		color: #ffffff !important; */
		border-color: #0a1628 !important;
		transition: border-color 0.2s ease;

	}

	.faqs-content-wrapper {
		max-width: 100%;
		gap:  0px;
	}

	/*     .faqs-section-group {
	scroll-margin-top: 350px;
	scroll-padding-top: 300px;
}
	*/

	.faqs-section-group{
		margin-top: 30px;
	}
	.faqs-section-group{
		scroll-margin-top: 0px;
	}

}

@media (max-width: 768px) {
	.faqs-hero {


		height: 400px;
	}

	.faqs-hero-title {
		font-size: 36px;
	}

	.faqs-body-container {
		padding: 40px 20px;
	}

	.faqs-section-title {
		font-size: 24px;
		margin-bottom: 16px;
	}

	.faqs-accordion-question {
		font-size: 18px;
	}

	.faqs-accordion-content-inner p {
		font-size: 16px;
	}

	.faqs-contact-cta {
		flex-direction: column;
		text-align: center;
		gap: 16px;
		padding: 0;
	}
}

@media only screen and (max-width: 767px) {
	.faqs-hero-title {
		max-width: 100%;
	}

	.faqs-hero-desc {
		max-width: 100%;
	}

	.faqs-body-container{
		gap: 0;
	}

}
