Testimonial Style 4

HTML

<section id="testim" class="testim">
    <div class="wrap">
        <span id="right-arrow" class="arrow right fa"><svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42" fill="none">
  <path d="M9.17939e-07 21C1.16139e-06 15.4305 2.2125 10.089 6.15076 6.15076C10.089 2.21249 15.4305 -1.16139e-06 21 -9.17939e-07C23.7578 -7.97394e-07 26.4885 0.543182 29.0364 1.59853C31.5842 2.65388 33.8992 4.20073 35.8492 6.15076C37.7993 8.10079 39.3461 10.4158 40.4015 12.9636C41.4568 15.5115 42 18.2422 42 21C42 23.7578 41.4568 26.4885 40.4015 29.0364C39.3461 31.5842 37.7993 33.8992 35.8492 35.8492C31.911 39.7875 26.5695 42 21 42C15.4305 42 10.089 39.7875 6.15076 35.8492C4.20073 33.8992 2.65388 31.5842 1.59853 29.0364C0.543183 26.4885 4.61209e-06 23.7578 9.17939e-07 21ZM4.2 21C4.2 25.4556 5.97 29.7288 9.12061 32.8794C12.2712 36.03 16.5444 37.8 21 37.8C25.4556 37.8 29.7288 36.03 32.8794 32.8794C36.03 29.7288 37.8 25.4556 37.8 21C37.8 16.5444 36.03 12.2712 32.8794 9.12061C29.7288 5.97 25.4556 4.2 21 4.2C16.5444 4.2 12.2712 5.97 9.12061 9.1206C5.97 12.2712 4.2 16.5444 4.2 21ZM16.8 10.5L27.3 21L16.8 31.5L16.8 10.5Z" fill="#A5A5A5"/>
</svg></span>
        
        <span id="left-arrow" class="arrow left fa"><svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 42 42" fill="none">
  <path d="M42 21C42 15.4305 39.7875 10.089 35.8492 6.15076C31.911 2.21249 26.5695 -1.16139e-06 21 -9.17939e-07C18.2422 -7.97394e-07 15.5115 0.543182 12.9636 1.59853C10.4158 2.65388 8.10079 4.20073 6.15076 6.15076C4.20073 8.10079 2.65388 10.4158 1.59853 12.9636C0.54318 15.5115 -1.03848e-06 18.2422 -9.17939e-07 21C-7.97394e-07 23.7578 0.54318 26.4885 1.59853 29.0364C2.65388 31.5842 4.20073 33.8992 6.15076 35.8492C10.089 39.7875 15.4305 42 21 42C26.5695 42 31.911 39.7875 35.8492 35.8492C37.7993 33.8992 39.3461 31.5842 40.4015 29.0364C41.4568 26.4885 42 23.7578 42 21ZM37.8 21C37.8 25.4556 36.03 29.7288 32.8794 32.8794C29.7288 36.03 25.4556 37.8 21 37.8C16.5444 37.8 12.2712 36.03 9.12061 32.8794C5.96999 29.7288 4.2 25.4556 4.2 21C4.2 16.5444 5.96999 12.2712 9.1206 9.12061C12.2712 5.97 16.5444 4.2 21 4.2C25.4556 4.2 29.7288 5.97 32.8794 9.1206C36.03 12.2712 37.8 16.5444 37.8 21ZM25.2 10.5L14.7 21L25.2 31.5L25.2 10.5Z" fill="#A5A5A5"/>
</svg>
</span>
                <ul id="testim-dots" class="dots">
                    <li class="dot active"></li>
                    <li class="dot"></li>
                    <li class="dot"></li>
                </ul>
        
                <div class="bg-element"></div>
        
                <div class="column-1">
                    <div class="row" id="cutomerimage">
                        <div class="ele-img"></div>
                    <img src="assets/images/profile.ng">
                    </div>
                </div>
        
                <div id="testim-content" class="cont">
                    
                     <div class="active">
                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Ellipse9.png" class="prof-image">
                        <!-- <h1 class="testimonial-highlight">#Excellent</h1>                         -->
                       <p class="testimonial-desc">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud Amet minim mollit non deserunt ullamco est sit aliqu</p>
                       <h3 class="testimonial-name"><b>hohn loe</b> - Position</h3>
                       <p class="position">Position</p>
                       <div class="t3-rating">
                      <!-- <img src="assets/images/rating.png" class="t3-rating-img"> -->
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="far fa-star"></i>
                      <i class="far fa-star"></i>
                    </div>                     
                    </div>

                    <div>
                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Ellipse7.png" class="prof-image">
                        <!-- <h1 class="testimonial-highlight">#AWESOME</h1> -->
                        <p class="testimonial-desc">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud Amet minim mollit non deserunt ullamco est sit aliqu</p>
                        <h3 class="testimonial-name"><b>John Doe</b> - Position</h3>
                        <p class="position">Position</p>
                        <div class="t3-rating">
                      <!-- <img src="assets/images/rating.png" class="t3-rating-img"> -->
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="far fa-star"></i>
                      <i class="far fa-star"></i>
                    </div>
                    </div>

                    <div>
                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Ellipse8.png" class="prof-image">                     
                    <p class="testimonial-desc">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud Amet minim mollit non deserunt ullamco est sit aliqu</p>
                    <h3 class="testimonial-name"><b>Sohn Soe</b> - Position</h3>
                    <p class="position">Position</p>
                    <div class="t3-rating">
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="fas fa-star"></i>
                      <i class="far fa-star"></i>
                      <i class="far fa-star"></i>
                    </div>                      
                   </div>
                </div>
          </div>
</section>

CSS

*,
*:after,
*:before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    user-select: none;
    cursor: default;
}


.full-screen {
    width: 100%;
    height: auto;
    font-family: 'Inter', sans-serif !important;
        background: #355ECD;
}

.testimonial-highlight{
   font-size: 65px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
color: #3468DB;
text-align: right;
}


.testimonial-name{
    color: #19158E;
font-size: 33px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
text-align: left;
padding: 20px 0px;
border-bottom: 3px solid #D1CECE;
}
.testimonial-name-effect{
color: #3468DB;
}
.position{
 color: #171E24;
text-align: right;
font-family: 'Inter', sans-serif;
font-size: 21px;
font-style: italic;
font-weight: 500;
line-height: normal;
text-transform: uppercase;
display: none;
}
.testim .wrap {
    position: relative;
    width: 100%;
    max-width: 1020px;
    padding: 40px 20px;
    margin: auto;
    display: flex;
    overflow: hidden;
}

.testim .arrow {
    display: block;
    position: absolute;
    color: #eee;
    cursor: pointer;
    font-size: 2em;
    bottom: 15%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    -webkit-transition: all .3s ease-in-out;    
    -ms-transition: all .3s ease-in-out;    
    -moz-transition: all .3s ease-in-out;    
    -o-transition: all .3s ease-in-out;    
    transition: all .3s ease-in-out;
    padding: 5px;
    z-index: 22222222;
}

.testim .arrow:before {
        cursor: pointer;
}

.testim .arrow:hover {
    color: #8B7DC0;
}
    

.testim .arrow.left {
    right: 425px;
}

.testim .arrow.right {
    right: 100px;
}

.testim .dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 60px;
    display: block;
    z-index: 3333;
    height: 12px;
    right: 57px;
    display: none;
}

.star{
    width: 100%;
height: 32.152px;
flex-shrink: 0;
display: flex;
justify-content: center;
margin: 20px 0px;
}
.testimonial-desc:after{
    content: '';
    background: url('top-com-2.png');
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -126px;
    right: -358px;
    background-repeat: no-repeat;
}
.testimonial-desc:before{
    content: '';
    background: url('top-com-1.png');
    position: absolute;
    top: -49px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    left: -64px;
}
.testim .dots .dot {
    list-style-type: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    background:grey;
    border-radius: 50%;
    border: 1px solid #eee;
    margin: 0 10px;
    cursor: pointer;
    -webkit-transition: all .5s ease-in-out;    
    -ms-transition: all .5s ease-in-out;    
    -moz-transition: all .5s ease-in-out;    
    -o-transition: all .5s ease-in-out;    
    transition: all .5s ease-in-out;
        position: relative;
}

.testim .dots .dot.active,
.testim .dots .dot:hover {
    background: #8B7DC0;
    border-color: #8B7DC0;
}

.testim .dots .dot.active {
    -webkit-animation: testim-scale .5s ease-in-out forwards;   
    -moz-animation: testim-scale .5s ease-in-out forwards;   
    -ms-animation: testim-scale .5s ease-in-out forwards;   
    -o-animation: testim-scale .5s ease-in-out forwards;   
    animation: testim-scale .5s ease-in-out forwards;   
}
    
.testim .cont {
    position: relative;
}

#testim-content{
    background-color: white;
    border-radius: 0px 25px 25px 0px;
    height: 500px;
    padding: 100px 0px;
    padding-left: 0px;
    padding-right: 40px;
    width: 50%;
}


.testim .cont > div {
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 0 70px 0;
    opacity: 0;
}

.testim .cont > div.inactive {
    opacity: 0;
}
    

.testim .cont > div.active {
    position: relative;
    opacity: 1;
}
    

.testim .cont div .img img {
    display: block;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 50%;
}

.testimonial-desc{
text-align: left;
font-family: 'Inter', sans-serif;
color: #6E7096;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 30.997px; /* 172.207% */
}

 
.column-1{
    width: 50%;
    border-radius: 30px 0px 0px 30px;
    background-color: #fff;
}
.column-1 .row{
    border-radius: 30px 30px 30px 30px;
background: #FFF;
box-shadow: 16px 0px 14px 0px rgba(0, 0, 0, 0.04);
height: 100%;
display: flex;
}
.column-1 .row img{
width: 50%;
height: 50%;
margin: auto;
}
.t3-rating{
    padding: 15px 0px;
}
.t3-rating i{
  text-align:left;
  color: #FFD600;
  font-size: 22px;
}
.testim .arrow.left {
    right: 42%;
}
.testim .arrow.right {
    right: 10%;
}
.prof-image{
    display: none;
}
.testim .cont div.active .img img {
    -webkit-animation: testim-show .5s ease-in-out forwards;            
    -moz-animation: testim-show .5s ease-in-out forwards;            
    -ms-animation: testim-show .5s ease-in-out forwards;            
    -o-animation: testim-show .5s ease-in-out forwards;            
    animation: testim-show .5s ease-in-out forwards;            
}

.testim .cont div.active h2 {
    -webkit-animation: testim-content-in .4s ease-in-out forwards;    
    -moz-animation: testim-content-in .4s ease-in-out forwards;    
    -ms-animation: testim-content-in .4s ease-in-out forwards;    
    -o-animation: testim-content-in .4s ease-in-out forwards;    
    animation: testim-content-in .4s ease-in-out forwards;    
}

.testim .cont div.active p {
    -webkit-animation: testim-content-in .5s ease-in-out forwards;    
    -moz-animation: testim-content-in .5s ease-in-out forwards;    
    -ms-animation: testim-content-in .5s ease-in-out forwards;    
    -o-animation: testim-content-in .5s ease-in-out forwards;    
    animation: testim-content-in .5s ease-in-out forwards;    
}

.testim .cont div.inactive .img img {
    -webkit-animation: testim-hide .5s ease-in-out forwards;            
    -moz-animation: testim-hide .5s ease-in-out forwards;            
    -ms-animation: testim-hide .5s ease-in-out forwards;            
    -o-animation: testim-hide .5s ease-in-out forwards;            
    animation: testim-hide .5s ease-in-out forwards;            
}


.testim .cont div.inactive h2 {
    -webkit-animation: testim-content-out .4s ease-in-out forwards;        
    -moz-animation: testim-content-out .4s ease-in-out forwards;        
    -ms-animation: testim-content-out .4s ease-in-out forwards;        
    -o-animation: testim-content-out .4s ease-in-out forwards;        
    animation: testim-content-out .4s ease-in-out forwards;        
}

.testim .cont div.inactive p {
    -webkit-animation: testim-content-out .5s ease-in-out forwards;    
    -moz-animation: testim-content-out .5s ease-in-out forwards;    
    -ms-animation: testim-content-out .5s ease-in-out forwards;    
    -o-animation: testim-content-out .5s ease-in-out forwards;    
    animation: testim-content-out .5s ease-in-out forwards;    
}

@-webkit-keyframes testim-scale {
    0% {
        -webkit-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -webkit-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -webkit-box-shadow: 0px 0px 10px 5px #342d51;        
        box-shadow: 0px 0px 10px 5px #342d51;        
    }

    100% {
        -webkit-box-shadow: 0px 0px 0px 0px #342d51;        
        box-shadow: 0px 0px 0px 0px #342d51;        
    }
}

@-moz-keyframes testim-scale {
    0% {
        -moz-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -moz-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -moz-box-shadow: 0px 0px 10px 5px #342d51;        
        box-shadow: 0px 0px 10px 5px #342d51;        
    }

    100% {
        -moz-box-shadow: 0px 0px 0px 0px #342d51;        
        box-shadow: 0px 0px 0px 0px #342d51;        
    }
}

@-ms-keyframes testim-scale {
    0% {
        -ms-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -ms-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -ms-box-shadow: 0px 0px 10px 5px #342d51;        
        box-shadow: 0px 0px 10px 5px #342d51;        
    }

    100% {
        -ms-box-shadow: 0px 0px 0px 0px #342d51;        
        box-shadow: 0px 0px 0px 0px #342d51;        
    }
}

@-o-keyframes testim-scale {
    0% {
        -o-box-shadow: 0px 0px 0px 0px #eee;
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        -o-box-shadow: 0px 0px 10px 5px #eee;        
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        -o-box-shadow: 0px 0px 10px 5px #342d51;        
        box-shadow: 0px 0px 10px 5px #342d51;        
    }

    100% {
        -o-box-shadow: 0px 0px 0px 0px #342d51;        
        box-shadow: 0px 0px 0px 0px #342d51;        
    }
}

@keyframes testim-scale {
    0% {
        box-shadow: 0px 0px 0px 0px #eee;
    }

    35% {
        box-shadow: 0px 0px 10px 5px #eee;        
    }

    70% {
        box-shadow: 0px 0px 10px 5px #342d51;        
    }

    100% {
        box-shadow: 0px 0px 0px 0px #342d51;        
    }
}

@-webkit-keyframes testim-content-in {
    from {
        opacity: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -webkit-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-moz-keyframes testim-content-in {
    from {
        opacity: 0;
        -moz-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -moz-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-ms-keyframes testim-content-in {
    from {
        opacity: 0;
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -ms-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@-o-keyframes testim-content-in {
    from {
        opacity: 0;
        -o-transform: translateY(100%);
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        -o-transform: translateY(0);        
        transform: translateY(0);        
    }
}

@keyframes testim-content-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);        
    }
}

@-webkit-keyframes testim-content-out {
    from {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -webkit-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-moz-keyframes testim-content-out {
    from {
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -moz-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-ms-keyframes testim-content-out {
    from {
        opacity: 1;
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        -ms-transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@-o-keyframes testim-content-out {
    from {
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
        transform: translateY(-100%);        
    }
}

@keyframes testim-content-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    
    to {
        opacity: 0;
        transform: translateY(-100%);        
    }
}

@-webkit-keyframes testim-show {
    from {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
}

@-moz-keyframes testim-show {
    from {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
}

@-ms-keyframes testim-show {
    from {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
}

@-o-keyframes testim-show {
    from {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
}

@keyframes testim-show {
    from {
        opacity: 0;
        transform: scale(0);
    }
    
    to {
        opacity: 1;
        transform: scale(1);       
    }
}

@-webkit-keyframes testim-hide {
    from {
        opacity: 1;
        -webkit-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
}

@-moz-keyframes testim-hide {
    from {
        opacity: 1;
        -moz-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -moz-transform: scale(0);
        transform: scale(0);
    }
}

@-ms-keyframes testim-hide {
    from {
        opacity: 1;
        -ms-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -ms-transform: scale(0);
        transform: scale(0);
    }
}

@-o-keyframes testim-hide {
    from {
        opacity: 1;
        -o-transform: scale(1);       
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        -o-transform: scale(0);
        transform: scale(0);
    }
}

@keyframes testim-hide {
    from {
        opacity: 1;
        transform: scale(1);       
    }
    
    to {
        opacity: 0;
        transform: scale(0);
    }
}
#cutomerimage{
    position: relative;
}

#cutomerimage img{
    z-index: 5;
}
#cutomerimage:after{
    content: "";
    background-color:#106FEC ;
    width: 205px;
height: 209px;
position: absolute;
top: 48px;
    left: 47px;
border-radius: 60%;
z-index: 1;
}
#cutomerimage:before{
    content: "";
    background-color:#3787EF; ;
   width: 296.448px;
height: 296.448px;
position: absolute;
top: 86px;
    left: 77px;
border-radius: 60%;
z-index: 2;
}
.column-1 .ele-img:before{
    content: "";
    background-color:#fff; ;
 width: 114.627px;
height: 122.532px;
position: absolute;
    bottom: 98px;
    right: 114px;
border-radius: 60%;
z-index: 3;
box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
@media all and (max-width: 300px) {
    body {
        font-size: 14px;
    }
}

@media all and (max-width: 500px) {
    .testim .arrow {
        font-size: 1.5em;
    }
    
    .testim .cont div p {
        line-height: 25px;
    }
    #cutomerimage:before {
    content: "";
    background-color: #3787EF;
    width: 230px;
    height: 230px;
    position: absolute;
    top: -22px;
    left: 44px;
    border-radius: 60%;
    z-index: 2;
}
#cutomerimage:after {
    content: "";
    background-color: #106FEC;
    width: 205px;
    height: 209px;
    position: absolute;
    top: -37px;
    left: 89px;
    border-radius: 60%;
    z-index: 1;
}
.column-1 .ele-img:before {
    content: "";
    background-color: #fff;
    width: 114.627px;
    height: 122.532px;
    position: absolute;
    bottom: -6px;
    right: 51px;
    border-radius: 60%;
    z-index: 3;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
}
@media only screen and (max-width:1024px){

.cont::before{
    left: 15px;
}
}

@media only screen and (min-width:768px) and (max-width:1023px){
#testim-content{
    min-height: 531px;
    width: 61%;
}
.column-1{
    width: 40%;
}
.column-1 .row img{
    width: 92%;
    height: auto;
}
.testimonial-desc:after{
    right: -350px;
}
#cutomerimage:before {
    content: "";
    background-color: #3787EF;
    width: 230px;
    height: 230px;
    position: absolute;
    top: 109px;
    left: 8px;
    border-radius: 60%;
    z-index: 2;
}
#cutomerimage:after {
    content: "";
    background-color: #106FEC;
    width: 205px;
    height: 209px;
    position: absolute;
    top: 107px;
    left: 47px;
    border-radius: 60%;
    z-index: 1;
}
.column-1 .ele-img:before {
    content: "";
    background-color: #fff;
    width: 114.627px;
    height: 122.532px;
    position: absolute;
    bottom: 98px;
    right: 34px;
    border-radius: 60%;
    z-index: 3;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
    .testim .arrow.right {
    right: 14%;
}
.testim .arrow.left {
    right: 47%;
}
    .testim .arrow{
    bottom: 20%;
    }
}

@media only screen and (min-width:480px) and (max-width:767px){
#testim-content{
    min-height:  512px;
    padding: 69px 46px;
}
.cont::after{
  top: -35px;
left: -29px;  
scale: 0.8;
}
.column-1 .row img{
    width: 92%;
}
.testimonial-desc:after{
    right: -331px;
}
.testim .arrow.left {
    right: 49%;
}
.testim .arrow.right {
    right: 10%;
}
#cutomerimage:before {
    content: "";
    background-color: #3787EF;
    width: 230px;
    height: 230px;
    position: absolute;
    top: 109px;
    left: 8px;
    border-radius: 60%;
    z-index: 2;
}
#cutomerimage:after {
    content: "";
    background-color: #106FEC;
    width: 205px;
    height: 209px;
    position: absolute;
    top: 107px;
    left: 47px;
    border-radius: 60%;
    z-index: 1;
}
.column-1 .ele-img:before {
    content: "";
    background-color: #fff;
    width: 114.627px;
    height: 122.532px;
    position: absolute;
    bottom: 98px;
    right: 34px;
    border-radius: 60%;
    z-index: 3;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
      .testim .arrow{
    bottom: 20%;
    }
}
@media only screen and (min-width:607px) and (max-width:767px){
.testimonial-highlight{
    font-size: 43px;
}
.testimonial-desc{
    font-size: 14px;
}
.testimonial-name{
    font-size: 24px;
}
.position{
    font-size: 16px;
}
#testim-content{
  min-height: 539px;
    padding: 32px 46px;  
}
    .testim .arrow.right {
    right: 14%;
}
.testim .arrow.left {
    right: 47%;
}
       .testim .arrow{
    bottom: 20%;
    }
}
@media only screen and (min-width:479px) and (max-width:607px){
    .testimonial-desc{
        height: 206px;
        overflow: hidden;
        display: flex;
  flex-direction:column;
    }
    .testimonial-desc::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}
.testim .wrap{
    display: block;
}
.column-1{
    width: 100%;
    border-radius: 30px 30px 0px 0px;
}
.column-1 .row{
    display: flex;
    justify-content: center;
}
.column-1 .row img{
    width: 50%;
    height: 50%;
    align-self: center;
    margin: auto;
}
#testim-content{
    width: 100%;
    padding: 69px 46px;
       border-radius: 0px 0px 30px 30px;
       min-height: 567px;
}
.testimonial-desc::-webkit-scrollbar
{
    width: 12px;
    background-color: #F5F5F5;
}

.testimonial-desc::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #D62929;
}
.testimonial-name{
text-align: center;
margin-left: 0px;
padding: 0px;
    line-height: 5rem;
}
.full-screen {
        background: #ffffff;
}
.column-1 .row{
box-shadow: 0px 0px 0px 0px #fff;
}
.star{
margin: 0px 0px;
}
.testim .arrow {
    top: auto;
    bottom: 76px;
}
.testim .arrow.right {
    right: 14%;
}
.testim .arrow.left {
    right: 47%;
}
       .testim .arrow{
    bottom: 20%;
    }
}

@media only screen and (max-width:480px){
    .testimonial-highlight{
        font-size: 30px;
    }
    .testimonial-name{
        font-size: 30px;
    }
    .testimonial-desc{
        height: 206px;
        display: flex;
  flex-direction:column;
  text-align: center;
    }
    .cont::after{
        scale: 0.7;
        top: -40px;
    left: -37px;
    }
    .column-1{
    width: 100%;
    border-radius: 30px 30px 0px 0px;
}
.testim .wrap{
    display: block;
}
.column-1 .row{
    display: flex;
    justify-content: center;
}
.column-1 .row img{
    width: 60%;
    height: 60%;
}
#testim-content{
    width: 100%;
    padding: 24px 38px;
       border-radius: 0px 0px 30px 30px;
       height: 425px;
}
.testim .arrow {
    top: auto;
    bottom: 76px;
}
.testimonial-name{
text-align: center;
margin-left: 0px;
padding: 0px;
    line-height: 5rem;
    border-bottom: 0px;
}
.full-screen {
        background: #ffffff;
}
.testimonial-name:after{
    content: '';
    background-color: #D1CECE;
    width: 50%;
    height: 3px;
    position: absolute;
   bottom: 39%;
    right: 75px;
}
.column-1 .row{
box-shadow: 0px 0px 0px 0px #fff;
}
.star{
margin: 0px 0px;
}
.testimonial-desc:after{
    content: '';
    background: url('top-com-2.png');
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -186px;
    right: -254px;
    background-repeat: no-repeat;
}
.testimonial-desc:before{
    content: '';
    background: url('top-com-1.png');
    position: absolute;
    top: -49px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    left: -42px;
}
.testim .arrow.left {
    right:78%;
}
.testim .arrow.right {
    right: 12%;
}
}

JS

 // vars
'use strict'
var testim = document.getElementById("testim"),
    testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),
    testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),
    customerimage = document.getElementById("customerimage"),
    testimLeftArrow = document.getElementById("left-arrow"),
    testimRightArrow = document.getElementById("right-arrow"),
    testimSpeed = 4500,
    currentSlide = 0,
    currentActive = 0,
    testimTimer,
        touchStartPos,
        touchEndPos,
        touchPosDiff,
        ignoreTouch = 30;
;
console.log(customerimage);
window.onload = function() {

     const x = document.querySelector('#cutomerimage img');
    const y = document.querySelector('#testim-content .active img').src;

    x.src = y;  

    // Testim Script
    function playSlide(slide) {
        for (var k = 0; k < testimDots.length; k++) {
            testimContent[k].classList.remove("active");
            testimContent[k].classList.remove("inactive");
            testimDots[k].classList.remove("active");
        }

        if (slide < 0) {
            slide = currentSlide = testimContent.length-1;
        }

        if (slide > testimContent.length - 1) {
            slide = currentSlide = 0;
        }

        if (currentActive != currentSlide) {
            testimContent[currentActive].classList.add("inactive");            
        }
        testimContent[slide].classList.add("active");
        testimDots[slide].classList.add("active");

        currentActive = currentSlide;
    
        clearTimeout(testimTimer);
        testimTimer = setTimeout(function() {
            playSlide(currentSlide += 1);
        }, testimSpeed)
    }

    testimLeftArrow.addEventListener("click", function() {
        playSlide(currentSlide -= 1);

        const x = document.querySelector('#cutomerimage img');
        const y = document.querySelector('#testim-content .active img').src;

        x.src = y;



    })

    testimRightArrow.addEventListener("click", function() {
        playSlide(currentSlide += 1);
        const x = document.querySelector('#cutomerimage img');
        const y = document.querySelector('#testim-content .active img').src;

        x.src = y;  
    })    

    for (var l = 0; l < testimDots.length; l++) {
        testimDots[l].addEventListener("click", function() {
            playSlide(currentSlide = testimDots.indexOf(this));
        })
    }

    playSlide(currentSlide);

    // keyboard shortcuts
    document.addEventListener("keyup", function(e) {
        switch (e.keyCode) {
            case 37:
                testimLeftArrow.click();
                break;
                
            case 39:
                testimRightArrow.click();
                break;

            case 39:
                testimRightArrow.click();
                break;

            default:
                break;
        }
    })
        
        testim.addEventListener("touchstart", function(e) {
                touchStartPos = e.changedTouches[0].clientX;
        })
    
        testim.addEventListener("touchend", function(e) {
                touchEndPos = e.changedTouches[0].clientX;
            
                touchPosDiff = touchStartPos - touchEndPos;
            
                console.log(touchPosDiff);
                console.log(touchStartPos); 
                console.log(touchEndPos);   

            
                if (touchPosDiff > 0 + ignoreTouch) {
                        testimLeftArrow.click();
                } else if (touchPosDiff < 0 - ignoreTouch) {
                        testimRightArrow.click();
                } else {
                    return;
                }
            
        })
}

Links

<!-- font inter -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@600;500;700&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Scripts

<script src="https://use.fontawesome.com/1744f3f671.js"></script>

Testimonial Style 4

hohn loe - Position

John Doe - Position

Sohn Soe - Position

HTML

CSS

JS

Links

Scripts