Team Slider Style 3

HTML

<section id="style-3">
<div class="s4-container">
 	<div class="s4-row">
 		<div class="testimonial-box">
 			<div class="s4-box">
 				<div class="s4-background"><img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Vector3.png"></div>
				 <div class="owl-carousel owl-theme animate__fadeIn animate__fadeOut">
				    <div class="item s4-col">
				    	<div class="s4-img">
				    		<img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Ellipse-25.png">
				    		<h2 class="s4-img-head">DEBJANI CHOWDHURY</h2>
				    		<p class="s4-img-desig">Founder</p>
				    	</div>
				    	<div class="s4-content">
				    		<p>An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.</p>
				    	</div>
				     </div>
				    <div class="item s4-col">
				    	<div class="s4-img">
				    		<img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Ellipse-25.png">
				    		<h2 class="s4-img-head">DEBJANI CHOWDHURY</h2>
				    		<p class="s4-img-desig">Founder</p>
				    	</div>
				    	<div class="s4-content">
                            <p>Debjani has accelerated innovation in agriculture with her vision to build Dohna.An agriculturist by heart.</p>
				    	</div>
				    </div>
				    <div class="item s4-col">
				    	<div class="s4-img">
				    	    <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Ellipse-25.png">
				    	    <h2 class="s4-img-head">DEBJANI CHOWDHURY</h2>
				    		<p class="s4-img-desig">Founder</p>
				    	</div>
				    	<div class="s4-content">
				    	    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
				    	 </div>
				    </div>
				    <div class="item s4-col">
				    	<div class="s4-img">
				    	    <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Ellipse-25.png">
				    	    <h2 class="s4-img-head">DEBJANI CHOWDHURY</h2>
				    		<p class="s4-img-desig">Founder</p>
				    	</div>
				    	<div class="s4-content">
				    	<p>An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.</p>
				    	</div>
				    </div>
				</div>
 			</div>
 		</div>
 	</div>
</div>
</section>

CSS

.s4-row{
	padding: 100px 0px;
}
.testimonial-box{
	display: flex;
	position: relative;
}
.testimonial-box .s4-box{
	width: 76%;
	margin: auto;
	position: relative;
}
.testimonial-box .s4-box:after{
content: '';
    border-radius: 40px;
    background: #FBF1F1;
    width: 76%;
    height: 85%;
    position: absolute;
    margin: auto;
    top: 0px;
    left: auto;
    right: 176px;
}
.testimonial-box .s4-box:before{
content: '';
    border-radius: 40px;
background: url('https://nuitwebtek.com/wp-content/uploads/2023/08/Rectangleoverlay.png'), white 50% / cover no-repeat;
mix-blend-mode: multiply;
    width: 76%;
    height: 85%;
    position: absolute;
    margin: auto;
    top: 0px;
    left: auto;
    right: 176px;
    z-index: 1;
}

.testimonial-box .s4-box .s4-col{
display: flex;
}
.testimonial-box .s4-box .s4-col .s4-img{
width: 50%;
padding: 20px;
}

.s4-background{
position: absolute;
    top: -8px;
    left: 96px;
    width: 80%;
    height: 80%;
    z-index: 1;
}
.testimonial-box .s4-box .s4-col .s4-img img{
width: auto;
height: 216px;
margin: auto;
}
.testimonial-box .s4-box .s4-col .s4-img-head{
	text-align: center;
	color: #FFF;
font-family: Bebas Neue;
font-size: 40.06px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 1.602px;
margin: 20px 0px 0px;
}
.testimonial-box .s4-box .s4-col .s4-img-desig{
	text-align: center;
	color: #FFF;
font-family: Poppins;
font-size: 30.929px;
font-style: normal;
font-weight: 600;
line-height: normal;
margin: 0px;
position: relative;
}
.testimonial-box .s4-box .s4-col .s4-img-desig:after{
content: '';
    width: 22%;
    height: 3px;
    background: white;
    bottom: 0px;
    left: 39%;
    position: absolute;
    right: auto;
}
.testimonial-box .s4-box .s4-col .s4-content{
	width: 25%;
	align-self: center;
    color: #023F87;
text-align: center;
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
font-family: Poppins;
font-size: 24x;
font-style: normal;
font-weight: 300;
line-height: normal;
padding: 20px;
}

#style-3 .testimonial-box .owl-carousel .owl-nav{
	position: relative;
}
#style-3 .testimonial-box .owl-carousel .owl-dots{
	position: absolute;
    right: 29%;
    bottom: 10px;
}
#style-3 .testimonial-box .owl-carousel .owl-next span,.owl-carousel .owl-prev span{
	font-size: 42px;
    background: #E64B3E;
    border-radius: 39px;
    width: 60px;
    height: 60px;
    display: block;
    position: absolute;
    color: white;
    bottom: -29%;
}
#style-3 .testimonial-box .owl-carousel .owl-next span{
	right: 17%;
}
#style-3 .testimonial-box .owl-carousel .owl-prev span{
	right: 44%;
}

@media (min-width: 768px) and (max-width: 1024px){
.testimonial-box .s4-box .s4-col {
display: block;    
}
.testimonial-box .s4-box .s4-col .s4-img {
    width: 100%;
}
.testimonial-box .s4-box .s4-col .s4-content{
    width: 60%;
    margin: auto;
    padding-left: 57px;
}
.testimonial-box .s4-box:before {
    left: 85px;
    right: auto;
    height: 100%;
}
.testimonial-box .s4-box:after {
    left: 88px;
    right: auto;
    height: 100%;
}
.s4-background {
    top: -54px;
    left: 76px;
    width: 100%;
    height: 79%;
}
.s4-background img{
    transform: rotate(90deg);
    width: 79%;
}
.testimonial-box .owl-carousel .owl-next span, .owl-carousel .owl-prev span {
    bottom: 0%; 
    top: 140%;
}
.testimonial-box .owl-carousel .owl-prev span {
    left: 24%;
}
.testimonial-box .owl-carousel .owl-next span {
    right: 19%;
}
.testimonial-box .owl-carousel .owl-dots {
    bottom: -49px; 
    right: 40%;
}
}

@media only screen and (max-width: 600px) {
.testimonial-box .s4-box .s4-col {
display: block;    
}
.testimonial-box .s4-box .s4-col .s4-img {
    width: 100%;
    padding: 0px;
}
.testimonial-box .s4-box .s4-col .s4-img img{
   height: 175px;
}
.testimonial-box .s4-box .s4-col .s4-content{
    width: 90%;
    margin: auto;
    padding: 20px 6px 0px 6px;
    font-size: 18px;
}
.testimonial-box .s4-box .s4-col .s4-img-head{
    line-height: 0px;
    font-size: 30px;
    margin: 30px 0px;
}
.testimonial-box .s4-box .s4-col .s4-img-desig{
    font-size: 22px;
}
.testimonial-box .s4-box:before {
    left: 85px;
    right: auto;
    height: 100%;
}
.testimonial-box .s4-box:after {
    left: 88px;
    right: auto;
    height: 100%;
}
.s4-background {
    top: 26px;
    left: 6px;
    width: 100%;
    height: 79%;
}
.s4-background img{
    transform: rotate(90deg);
    width: 100%;
}
.testimonial-box .owl-carousel .owl-next span, .owl-carousel .owl-prev span {
    bottom: 0%; 
    top: 13%;
    font-size: 35px;
    width: 50px;
    height: 50px;
}
.testimonial-box .owl-carousel .owl-prev span {
    left: 11%;
}
.testimonial-box .owl-carousel .owl-next span {
    right: 1%;
}
.testimonial-box .owl-carousel .owl-dots {
    bottom: -49px; 
    right: 40%;
}
.s4-row {
    padding: 7px 0px;
}
.testimonial-box .s4-box:before {
    left: 4px;
    top: 49px;
    width: 100%;
    height: 87%;
}
.testimonial-box .s4-box:after {
    right: auto;
    height: 87%;
    width: 100%;
    left: 5px;
    top: 34px;
}
.testimonial-box .owl-carousel .owl-dots {
    bottom: -27px;
    right: 27%;
}
} 

@media only screen and (min-width: 400px) and (max-width: 767px){
.s4-background {
    top: -3px;
}
}

JS

 jQuery(document).ready(function(){
    let teamSlider3 = jQuery('.testimonial-box .owl-carousel');
     
   teamSlider3.owlCarousel({
       animateOut: 'animate__fadeOut',
        animateIn: 'animate__fadeIn',
        loop:true,
        margin:10,
        nav:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:1
            },
            1000:{
                items:1
            }
        }
    })
     
});

Links

<!-- owl carousel cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/>

<!-- animate.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css"/>

<!-- google fonts -->
<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=Bebas+Neue&family=Poppins:wght@300&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

Scripts

<!-- jquery-script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<!-- owl-carousel script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>