/*---------------------------------------------------*/
/*	FAQ PAGE (faq.html; the page header comes from pricing.css)
/*---------------------------------------------------*/

.grax_tm_faq{
	width: 100%;
	float: left;
	clear: both;
	padding: 80px 0px 60px 0px;
}
.grax_tm_faq .faq_inner{
	max-width: 860px;
	margin: 0px auto;
}
.grax_tm_faq .faq_group{margin-bottom: 56px;}
.grax_tm_faq .faq_group h3{
	color: #000;
	font-family: "Poppins";
	font-weight: 700;
	font-size: 26px;
	letter-spacing: 0px;
	margin: 0px 0px 18px 0px;
}

/* Accordion: native <details>, so answers stay in the page for search engines and work without JavaScript */
.grax_tm_faq .faq_item{
	border: 1px solid #eee;
	border-radius: 14px;
	background-color: #fff;
	margin-bottom: 12px;
	transition: border-color .3s ease, box-shadow .3s ease;
}
.grax_tm_faq .faq_item:hover{border-color: #f3c4c4;}
.grax_tm_faq .faq_item[open]{
	border-color: #e54b4b;
	box-shadow: 0px 14px 34px rgba(229,75,75,.12);
}
.grax_tm_faq .faq_item summary{
	position: relative;
	list-style: none;
	cursor: pointer;
	color: #111;
	font-family: "Poppins";
	font-weight: 600;
	font-size: 17px;
	line-height: 1.45;
	letter-spacing: 0px;
	padding: 20px 70px 20px 26px;
}
.grax_tm_faq .faq_item summary::-webkit-details-marker{display: none;}
.grax_tm_faq .faq_item summary:focus-visible{outline: 2px solid #e54b4b; outline-offset: 2px; border-radius: 14px;}
.grax_tm_faq .faq_item .icon{
	position: absolute;
	right: 22px;
	top: 50%;
	width: 30px;
	height: 30px;
	margin-top: -15px;
	border-radius: 50%;
	background-color: #fff1f1;
	transition: transform .35s ease, background-color .3s ease;
}
.grax_tm_faq .faq_item .icon:before,
.grax_tm_faq .faq_item .icon:after{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background-color: #e54b4b;
	transform: translate(-50%, -50%);
	transition: background-color .3s ease;
}
.grax_tm_faq .faq_item .icon:after{transform: translate(-50%, -50%) rotate(90deg);}
.grax_tm_faq .faq_item[open] .icon{transform: rotate(45deg); background-color: #e54b4b;}
.grax_tm_faq .faq_item[open] .icon:before,
.grax_tm_faq .faq_item[open] .icon:after{background-color: #fff;}
.grax_tm_faq .faq_item .answer{
	padding: 0px 26px 22px 26px;
	animation: faq_open .35s ease;
}
.grax_tm_faq .faq_item .answer p{
	color: #555;
	font-size: 16px;
	line-height: 1.85;
	margin: 0px;
}
.grax_tm_faq .faq_item .answer a{
	color: #e54b4b;
	text-decoration: none;
	border-bottom: 1px solid rgba(229,75,75,.35);
}
.grax_tm_faq .faq_item .answer a:hover{border-bottom-color: #e54b4b;}
.grax_tm_faq .faq_item .answer a[href^="tel:"]{white-space: nowrap;}
@keyframes faq_open{
	from{opacity: 0; transform: translateY(-6px);}
	to{opacity: 1; transform: translateY(0px);}
}
@media (prefers-reduced-motion: reduce){
	.grax_tm_faq .faq_item .answer{animation: none;}
	.grax_tm_faq .faq_item .icon{transition: none;}
}

/* Closing call to action */
.grax_tm_faq .faq_cta{
	text-align: center;
	background-color: #000;
	border-radius: 14px;
	padding: 46px 30px;
}
.grax_tm_faq .faq_cta h3{
	color: #fff;
	font-family: "Poppins";
	font-weight: 600;
	font-size: 26px;
	letter-spacing: 0px;
	margin: 0px 0px 6px 0px;
}
.grax_tm_faq .faq_cta p{
	color: rgba(255,255,255,.8);
	font-family: "Poppins";
	margin: 0px 0px 20px 0px;
}
.grax_tm_faq .faq_cta a{
	display: inline-block;
	background-color: #e54b4b;
	color: #fff;
	font-family: "Poppins";
	font-weight: 600;
	text-decoration: none;
	border-radius: 50px;
	padding: 10px 30px;
	transition: all .3s ease;
}
.grax_tm_faq .faq_cta a:hover{background-color: #fff; color: #000;}

@media (max-width: 768px){
	.grax_tm_faq{padding: 50px 0px 40px 0px;}
	.grax_tm_faq .faq_item summary{font-size: 16px; padding: 18px 62px 18px 20px;}
	.grax_tm_faq .faq_item .answer{padding: 0px 20px 20px 20px;}
}