/*------------ FAQ CSS ------------*/

/*------ Hero Header ------*/
#faq-hero {
	background: rgb(18,0,12);
	background: linear-gradient(70deg, rgba(18,0,12,1) 0%, rgba(18,0,12,1) 30%, rgba(89,0,64,0.05) 100%), url("../images/banners/bv-inner-hero-bg-FAQs.jpg") no-repeat center center /cover;
}

/*------ Intro ------*/

.intro p {
	font-size:1.125rem;
	line-height: 1.625rem;
	margin: 2rem 0 6rem;
}
.intro h3 {
	margin: 4.313rem 0 3.813rem;
}

/*------ Accordion ------*/

.accordion h4 {
	text-transform: none;
	margin-bottom: 2.188rem;
}
.accordion p {
	margin-bottom: 0;
}
.accordion-item {
	border: 2px solid #C0C0C0;
	border-radius: 10px;
	margin-bottom: 1.5rem;
	padding: 1.688rem 2.5rem;
	position: relative;
}
.accordion-item-header {
	font-weight: 600;
	display: flex;
	position: relative;
	cursor: pointer;
}
.accordion-item-header,
.accordion-item-body-content {
	font-size: 1.125rem;
	line-height: 1.5rem;
}
.accordion-item-header::after {
	content: "";
	background: url("../images/Icon-akar-circle-plus.svg") no-repeat center center /contain;
	top: -4px;
	right: 0;
	position: absolute;
	width: 1.875rem;
	height: 1.875rem;
	text-align: right;
	transition: all 0.35s;
}
.accordion-item-header.active-item::after {
	content: "";
	background: url("../images/Icon-akar-circle-open.svg") no-repeat center center /contain;
	top: -4px;
	right: 0;
	position: absolute;
	width: 1.875rem;
	height: 1.875rem;
	text-align: right;
}
.accordion-item-body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}
.accordion-item li {
	padding: 0.5rem 0;
}

 
/*------------ Responsive ------------*/

/* RETINA */
@media (-webkit-min-device-pixel-ratio: 2),(-moz-device-pixel-ratio: 2), (min-resolution: 192dppx) { 
	#faq-hero {
		background-image:  linear-gradient(70deg, rgba(18,0,12,1) 0%, rgba(18,0,12,1) 30%, rgba(89,0,64,0.05) 100%), url("../images/banners/bv-inner-hero-bg-FAQs@2x.jpg");
	}
}

/* max-width: 992px */
@media (max-width: 992px) {
	.accordion-item-header {
		padding-right: 2.25rem;
	}
}

/* max-width: 600px */
@media (max-width: 600px) {	
	.inner-hero {
		background-position: 70% center !important;
	}
}

/* max-width: 560px */
@media (max-width: 560px) {
	.accordion-item {
		padding: 1.688rem 1.5rem;
	}
}

/* max-width: 480px */
@media (max-width: 480px) {	
	.inner-hero {
		background-position: 80% center !important;
	}
	.intro p {
		margin-bottom: 5rem;
	}	
	.accordion-item {
		padding: 1.688rem 1rem;
	}
}