.faq-block {
	background: var(--bg-color);
	position: relative;
}

.faq-block .container {
	max-width: 1190px;
	margin: 0 auto;
	width: 90%;
	padding: 80px 0;
	position: relative;
	z-index: 1;
}

.faq-block .title {
	font: normal var(--f-black) 2.63rem / 1.1 var(--font-sans);
	color: var(--title-color);
	margin-bottom: 35px;
}


.faq-block .sub-title {
	font: normal var(--f-bold) 1.75rem / 1.1 var(--font-sans);
	color: var(--sub-title-color);
	margin-bottom: 25px;
}

.faq-block .content {
	font: normal var(--f-medium) 1.13rem / 1.3 var(--font-sans);
	color: var(--faq-text-color);
	margin-bottom: 60px;
}

.faq-acc-wrapper {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.faq-block .faq-acc-wrapper .item {
	background: var(--faq-bg-color);
	border-radius: 15px;
	padding: 15px 20px;
	cursor: pointer;
	transition: var(--transition);
	--transition: all 0.3s ease-in-out;
}

.faq-block .faq-acc-wrapper .acc-title-wrapper {
	position: relative;
}

.faq-block .faq-acc-wrapper .title {
	font: normal var(--f-medium) 1.75rem / 1.2 var(--font-sans);
	color: var(--faq-text-color);
	margin: 0;
	max-width: 92%;
	transition: var(--transition);
}

.faq-block .faq-acc-wrapper .item.active .title {
	color: var(--faq-title-color);
}

.faq-block .faq-acc-wrapper .content {
	font: normal var(--f-light) 1.13rem / 1.3 var(--font-sans);
	color: var(--faq-text-color);
	max-width: 1096px;
	cursor: auto;
	max-height: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	margin: 0 auto;
	transition: var(--transition);
}

.faq-block .faq-acc-wrapper .content *:last-child{
	margin-bottom: 12px;
}

.faq-block .faq-acc-wrapper .item.active .content {
	max-height: 100dvh;
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	margin: 15px auto 0;
	transition: var(--transition);
}

.faq-block .faq-acc-wrapper .icon {
	border: 2px solid var(--icon-color);
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	transition: var(--transition);
}

.faq-block .faq-acc-wrapper .item.active .icon {
	transform: translateY(-50%) rotate(180deg);
}

.faq-block .faq-acc-wrapper .icon svg {
	width: 10px;
	height: 10px;
}

@media screen and (max-width:1024px) {
	.faq-block .container {
		padding: 70px 0;
	}

	.faq-block .title {
		font: normal var(--f-bold) 2.38rem / 1.1 var(--font-sans);
	}

	.faq-block .sub-title {
		font: normal var(--f-medium) 1.38rem / 1.2 var(--font-sans);
	}

	.faq-block .faq-acc-wrapper .title {
		font: normal var(--f-medium) 1.38rem / 1.2 var(--font-sans);
	}
}

@media screen and (max-width:767px) {
	.faq-block .container {
		padding: 40px 0;
	}

	.faq-block .title {
		font: normal var(--f-bold) 2rem / 1.1 var(--font-sans);
	}
}