#testimonial-area .section-heading h2 {
	font-size: 48px;
	line-height: 58px;
}

.testi-wrap {
	position: relative;
	height: 725px;
	margin-top: -80px;
	padding: 1rem;
}

.client-single {
	margin-top: 20px;
	text-align: center;
	position: absolute;
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
}

.client-info,
.client-comment {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.client-single.inactive .client-comment,
.client-single.inactive .client-info {
	display: none;
}
.client-single.inactive .client-comment,
.client-single.inactive .client-info {
	opacity: 0;
	visibility: hidden;
}
.client-single.position-1 {
	-webkit-transform: scale(0.65);
	transform: scale(0.65);
}
.client-single.position-2 {
	left: -50px;
	top: 105px;
}
.client-single.position-3 {
	left: -60px;
	top: 240px;
	-webkit-transform: scale(0.4) !important;
	transform: scale(0.4) !important;
}
.client-single.position-4 {
	left: 55px;
	top: 380px;
}
.client-single.position-5 {
	top: 30px;
	right: 55px;
}
.client-single.position-6 {
	top: 225px;
	right: -40px;
}
.client-single.position-7 {
	top: 400px;
	right: 45px;
	-webkit-transform: scale(0.4) !important;
	transform: scale(0.4) !important;
}
.client-single.active {
	top: 10%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 10;
	width: 70%;
}
.client-single.active .client-comment,
.client-single.active .client-info {
	-webkit-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.client-single:not(.active) {
	-webkit-transform: scale(0.55);
	transform: scale(0.55);
	z-index: 99;
}
.client-single.active .client-img {
	width: 176px;
	height: 176px;
	margin: 0 auto 24px;
	position: relative;
	border: 8px solid #d1e9ff;
	border-radius: 50%;
}
.client-single.active .client-img:before {
	border-radius: 100%;
	content: "";
	background-image: -webkit-gradient(linear, left top, left bottom, from(#9d5bfe), to(#3890fe));
	background-image: linear-gradient(180deg, #9d5bfe 0%, #3890fe 100%);
	padding: 5px;
	width: 160px;
	height: 160px;

	margin: auto;
	position: absolute;
	z-index: -1;
}
.client-single .client-img img {
	height: 160px;
	width: 160px;
	margin: auto;
	border-radius: 50%;
	border: 8px solid #d1e9ff;
	cursor: pointer;
}

.client-single.active .client-img img {
	max-width: 160px;
	margin: 0 auto 24px;
	border: 0;
}

.client-comment {
	padding: 0 30px;
}
.client-comment h3 {
	font-size: 1rem;
	font-weight: 500;
	color: #505b6d;
}
.client-comment span i {
	font-size: 60px;
	color: #0084ff;
	margin: 40px 0 24px;
	display: inline-block;
}

.client-info p {
	color: #0084ff;
	font-size: 1.3rem;
	font-weight: 600;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
	}

	.client-comment h3 {
		font-size: 18px;
		line-height: 28px;
	}

	.client-single.active {
		width: 60%;
	}

	.client-single:not(.active) {
		-webkit-transform: scale(0.55);
		transform: scale(0.35);
	}

	.client-single.position-3,
	.client-single.position-7 {
		-webkit-transform: scale(0.3) !important;
		transform: scale(0.3) !important;
	}

	.client-single.active .client-img img {
		max-width: 104px;
		max-height: 104px;
	}

	.client-single.active .client-img::before {
		padding: 5px;
		width: 104px;
		height: 104px;
	}

	.client-single.active .client-img {
		width: 120px;
		height: 120px;
	}

	#testimonial-area {
		padding: 100px 0 0;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
	}

	.client-comment h3 {
		font-size: 14px;
		line-height: 26px;
	}

	.client-single.active {
		width: 60%;
	}

	.client-comment span i {
		font-size: 40px;
	}

	.client-single:not(.active) {
		-webkit-transform: scale(0.55);
		transform: scale(0.35);
	}

	.client-single.position-5,
	.client-single.position-7 {
		right: 0;
	}

	.client-single.position-4 {
		left: 0;
	}

	.client-single.position-3,
	.client-single.position-7 {
		-webkit-transform: scale(0.3) !important;
		transform: scale(0.3) !important;
	}

	.client-single.active .client-img img {
		width: 104px;
		height: 104px;
	}

	.client-single.active .client-img::before {
		padding: 5px;
		width: 104px;
		height: 104px;
	}

	.client-single.active .client-img {
		width: 120px;
		height: 120px;
	}
}
@media only screen and (min-width: 360px) and (max-width: 479px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
		line-height: 40px;
	}

	.client-comment h3 {
		font-size: 14px;
		line-height: 26px;
	}

	.client-single.active {
		width: 80%;
	}

	.client-comment span i {
		font-size: 40px;
	}

	.client-single:not(.active) {
		-webkit-transform: scale(0.25);
		transform: scale(0.25);
	}

	.client-single.position-5,
	.client-single.position-7,
	.client-single.position-6 {
		right: -50px;
	}

	.client-single.position-4 {
		left: -60px;
	}

	.client-single.position-3 {
		left: -75px;
	}

	.client-single.position-3,
	.client-single.position-7 {
		-webkit-transform: scale(0.25) !important;
		transform: scale(0.25) !important;
	}

	.client-single.active .client-img img {
		max-width: 84px;
		max-height: 84px;
	}

	.client-single.active .client-img::before {
		padding: 0px;
		width: 84px;
		height: 84px;
	}

	.client-single.active .client-img {
		width: 100px;
		height: 100px;
	}
}
@media only screen and (min-width: 320px) and (max-width: 359px) {
	#testimonial-area .section-heading h2 {
		font-size: 30px;
	}

	.client-comment h3 {
		font-size: 14px;
		line-height: 26px;
	}

	.client-single.active {
		width: 80%;
	}

	.client-comment span i {
		font-size: 40px;
	}

	.client-single:not(.active) {
		-webkit-transform: scale(0.25);
		transform: scale(0.25);
	}

	.client-single.position-5,
	.client-single.position-7,
	.client-single.position-6 {
		right: -42px;
	}

	.client-single.position-4 {
		left: -60px;
	}

	.client-single.position-3 {
		left: -75px;
	}

	.client-single.position-3,
	.client-single.position-7 {
		-webkit-transform: scale(0.25) !important;
		transform: scale(0.25) !important;
	}

	.client-single.active .client-img img {
		max-width: 84px;
        height: 84px;
	}

	.client-single.active .client-img::before {
		padding: 5px;
		width: 84px;
		height: 84px;
		top: -4px;
		left: 16px;
	}

	.client-single.active .client-img {
		width: 100px;
		height: 100px;
	}
}