.accordion-container {
	max-width: 1200px;
	margin: 0 auto;
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.accordion-layout {
	display: flex;align-items: flex-start;
}

/* Left Side - Accordion */
.accordion-item {
	border-top: 1px solid #E4E6F9;
	overflow: hidden;
	transition: all 0.3s ease;
}

.accordion-item:last-child{border-bottom: 1px solid #E4E6F9;}

.accordion-header {
	display: flex;
	align-items: center;
	padding: 26px 20px 20px 0;
	background: #ffffff;
	transition: background-color 0.2s ease;
}
.accordion-checkbox {
	appearance: none;
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	margin-right: 12px;
	border:1px solid #5963D9;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	position: relative;
	color: #fff;
}

/* checked state */
.accordion-checkbox:checked {
	background: #5963D9;
	border-color: #fff;
}

/* checkmark */
.accordion-checkbox:checked::after {
     content: '\f00c';
	font-family:fontawesome;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the checkmark */
    font-size: 16px; /* Adjust font size to make sure it's not too big */
    line-height: 1; /* Remove any line height issues */
}



    .accordion-checkbox:checked::after {font-size: 15px;top: 11%; transform: rotate(-10deg); left: 9%; }
}
.accordion-title {
	flex: 1;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

.accordion-arrow {
	width: 20px;
	height: 20px;
	transition: transform 0.3s ease;
	color: #000000;
	cursor: pointer;
	padding: 2px;
}

.accordion-arrow:hover {
	color: #3b82f6;
}

.accordion-item.active .accordion-arrow {
	transform: rotate(180deg);
}

.accordion-content {
	max-height: 0;
	transition: max-height 0.3s ease, padding 0.3s ease;
	background: #ffffff;
}

.accordion-item.active .accordion-content {
	max-height: 300px;
	display:block !important;
	padding: 0 0px 20px 50px;
}

.left_accordion {
	width: 50%;
}

.stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	margin-bottom: 8px;
	font-size: 18px;
	font-weight:400;
	line-height: 150%;
}

.stat-item:last-child {
	margin-bottom: 0;
}

.stat-item.red {
	background-color: #F2191933;
	color: #9A1C1E;
}

.stat-item.lt-orange {
	background-color: #F2641933;
	color: #9A1C1E;
}

.stat-item.warning {
	background-color: #E5B9A233;
	color: #9A1C1E;
}

.stat-text {
	flex: 1;
}

.source-link {
	color: #9A1C1E;
	text-decoration: underline;
	font-size: 14px;
	font-weight: 400;
	cursor: pointer;
}

.source-link:hover {
	color: #b91c1c;
}

/* Right Side - Face Expression with Background */
.face-side {
	flex: 1;
	width:50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding:0 40px;
	position: relative;
	overflow: hidden;
	flex-shrink: 0; 
}

.background-image-container {
	position:relative;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	border-radius: 50%;
	border: 1.28px solid #C8CCF2;
	background-color: #F7F7FF;
	height:420px;
	width:420px;
	margin: 0 auto;
}

.background-image-container:before {
	position:absolute;
	content:'';
	border-radius: 50%;
	border: 1.28px solid #C8CCF2;
	height:298px; width:298px;
}

.background-image {
	width: 66%; z-index:1; position:relative; top:-30px;
}

.face-overlay-container {
	position: absolute;
	bottom:32%;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

.face-container {
	width: 180px;
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.4s ease;
	overflow: hidden;
}

.face-image {object-fit: cover; transition: all 0.4s ease; }

.face-side:after,.face-side:before{
	position:absolute;
	content:'';
	height: 100px;
	width: 80px;
	background-image:url('https://1969772.fs1.hubspotusercontent-na1.net/hubfs/1969772/article-2025/dots.png');
	background-repeat: no-repeat;
	background-size: cover;
}

.face-side:after{left:40px; bottom:0%;}
.face-side:before{right:50px; top:0;}

.face-caption {
	font-size: 18px;
	font-weight: 700;
	color: #000;
	text-align: center;
	transition: all 0.4s ease;
	background: rgba(255, 255, 255, 0.9);
	padding: 19px 30px;
	border-radius: 45px;
	box-shadow: 0px 3px 6px 0px #0000000F;
	position:relative;
	bottom: -106px;
}
.accordion-svg {
    line-height: 1;
}
/* Mobile Responsive */

@media(max-width: 1080px){
	.background-image-container:before{height: 238px; width: 238px;}
	.background-image-container{height: 350px; width: 350px;}
	.face-caption{bottom: -85px;}
	.face-side:before{right:0;}
	.face-side:after {left: 20px; bottom: 0%;}

}

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

	.faqWithFacialExp{padding-top: 80px;}

	.banner_left_subtext, .banner_right_subtext {display:none;}

	.accordion-layout {flex-direction: column;	}

	.service_banner_title h1{font-size: 38.4px;}

	.left_accordion,.face-side { width: 100%;}
	.face-overlay-container{bottom: 145px;}

	.accordion-side {
		border-right: none;
		border-bottom: 1px solid #e5e7eb;
		padding: 20px;
	}

	.face-side {
		padding: 30px 20px;
		min-height: 400px;
	}

	.face-side:before, .face-side:after{ height: 65px;width: 70px; background-size: contain;}

	.face-side:before{top: 40px;}

	.face-container {
		width: 150px;
		height: 150px;
	}

	.face-image {
		width: 120px;
		height: 120px;
	}

	.face-caption {font-size: 16px; bottom: -85px;	}

	.accordion-title {font-size: 15px;}

}
@media (max-width: 600px) {
    .accordion-checkbox { width: 20px; height: 20px; margin-right: 9px; }
}
@media screen and (max-width: 480px) {

	.service_banner_title h1{font-size: 42px;}

	.accordion-side {padding: 15px;}

	.background-image-container { height: 245px; width: 245px; }
	.stat-text{font-size:15px;}
	.background-image-container:before {height: 168px;width: 168px;}
	.background-image{width: 65%;}
	.accordion-header {padding: 24px 0px; gap:6px; justify-content: space-between;}
	.stat-item{ padding: 8px 16px;}
	.accordion-item.active .accordion-content {padding: 0 16px 8px 24px;}
	.accordion-item.active .accordion-content:last-child {padding-bottom: 24px;}

	.face-side {min-height: 350px;}

	.face-side:after, .face-side:before{background-size: 40px 50px;}
	.face-side:after {left: 0px;bottom: 38px;	}
	.face-side:before {right:-20px;}

	.face-container {
		width: 120px;
		height: 120px;
	}

	.face-image {
		width: 100px;
		height: 100px;
	}

	.face-overlay-container{bottom: 140px;}

	.face-caption { bottom: -55px; padding: 6px 12px;	}
}