#testimonial-area .section-heading h2 {
font-size: 48px;
line-height: 58px;
}
.testi-wrap {
position: relative;
height: 725px;
margin-top: -80px;
}
.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: 0;
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: 160px;
height: 160px;
margin: 0 auto 24px;
position: relative;
}
.client-single.active .client-img:before {
border-radius: 100%;
content: "";
background-color:#ff5a52;
padding: 5px;
width: 160px;
height: 160px;
top: -4px;
left: 0px;
position: absolute;
z-index: -1;
}
.client-single .client-img img {
width: 150px;
border-radius: 50%;
border: 3px solid #002339;
cursor: pointer;
}
.client-single.inactive .client-img img {
width: 100px !important;
} @keyframes waveAnimation {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(5%);
}
} .client-single.inactive {
animation: waveAnimation 2s ease-in-out infinite;
}
.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: 22px;
line-height: 32px;
color: #505b6d;
}
.client-comment span i {
font-size: 60px;
color: #ff5a52;
margin: 40px 0 24px;
display: inline-block;
}
.client-info h3 {
color: #000;
font-weight: 600;
margin-bottom: 4px;
}
.client-info p {
color: #00243b;
text-transform: uppercase;
}
@media only screen and (max-width: 768px) {
.client-single.position-2 {
left:0;
}
.client-single.position-2 {
top:80px;
}
.client-comment {
padding: 0 !important;
margin-top: 20px !important;
}
.client-single {
width: 60px;
}
}
@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: 100px;
}
.client-single.active .client-img::before {
padding: 5px;
width: 108px;
height: 108px;
top: -4px;
left: 6px;
}
.client-single.active .client-img {
width: 120px;
height: 100px;
}
.testi-wrap {
height: 580px;
}
#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 {
max-width: 80px;
}
.client-single.active .client-img::before {
padding: 5px;
width: 88px;
height: 88px;
top: -4px;
left: 16px;
}
.client-single.active .client-img {
width: 120px;
height: 100px;
}
.testi-wrap {
height: 630px;
}
}
@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: -10px;
}
.client-single.position-6 {
top: 328px;
}
.client-single.position-4 {
left: -10px;
}
.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: 80px;
}
.client-single.active .client-img::before {
padding: 5px;
width: 88px;
height: 88px;
top: -4px;
left: 16px;
}
.client-single.active .client-img {
width: 120px;
height: 100px;
}
.testi-wrap {
height: 600px;
}
}
@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: -10px;
}
.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: 80px;
}
.client-single.active .client-img::before {
padding: 5px;
width: 88px;
height: 88px;
top: -4px;
left: 16px;
}
.client-single.active .client-img {
width: 120px;
height: 100px;
}
.testi-wrap {
height: 550px;
}
}
.section-heading.text-center h5, .section-heading.text-center h2, .client-info h3{
font-family: 'clan pro';
color: #002339;
}
.client-comment h3, .client-info p a {
font-family: 'Fira Sans'; 
color: #002339;
font-weight: 400;  
}
.section-heading.text-center h5 {
font-size: 25px;
}