Team Slider Style 2

HTML

<section class="team-slider-2">
    <div class="ts-container">
        <div class="ts-2-team--cards owl-carousel owl-theme">

            <div class="ts-2-wrap-outer item item-1">
                <div class="ts-2-wrap-inner">
                    <div class="ts-2-profile">
                        <div class="ts-2-img-border-outer">
                            <div class="ts-2-img-border-outer">
                                <div class="ts-2-img-border-inner">
                                    <div class="ts-2-profile-pic">
                                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Ellipse-23.png" alt="" class="ts-2-img">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ts-2-content-box">
                        <div class="ts-2-heading">
                            <h3 class="ts-2-team-heading">
                                Neeraj Chowdhury
                            </h3>
                        </div>
                        <div class="ts-2-sub-heading">
                            <h4 class="ts-2-occ-team">
                                Founder
                            </h4>
                        </div>
                        <div class="ts-2-box-para">
                            <p class="ts-2-teammate-desc">An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.
                            </p>
                        </div>
                    </div>
                </div>
            </div>             
            
            <div class="ts-2-wrap-outer item item-2">
                <div class="ts-2-wrap-inner">
                    <div class="ts-2-profile">
                        <div class="ts-2-img-border-outer">
                            <div class="ts-2-img-border-inner">
                                <div class="ts-2-profile-pic">
                                    <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Ellipse-23.png" alt="" class="ts-2-img">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ts-2-content-box">
                        <div class="ts-2-heading">
                            <h3 class="ts-2-team-heading">
                                Neeraj Chowdhury-2
                            </h3>
                        </div>
                        <div class="ts-2-sub-heading">
                            <h4 class="ts-2-occ-team">
                                Founder-2
                            </h4>
                        </div>
                        <div class="ts-2-box-para">
                            <p class="ts-2-teammate-desc">An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.-2
                            </p>
                        </div>
                    </div>
                </div>
            </div> 

            <div class="ts-2-wrap-outer item item-3">
                <div class="ts-2-wrap-inner">
                    <div class="ts-2-profile">
                        <div class="ts-2-img-border-outer">
                            <div class="ts-2-img-border-outer">
                                <div class="ts-2-img-border-inner">
                                    <div class="ts-2-profile-pic">
                                        <img src="https://nuitwebtek.com/wp-content/uploads/2023/08/Ellipse-23.png" alt="" class="ts-2-img">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ts-2-content-box">
                        <div class="ts-2-heading">
                            <h3 class="ts-2-team-heading">
                                Neeraj Chowdhury-5
                            </h3>
                        </div>
                        <div class="ts-2-sub-heading">
                            <h4 class="ts-2-occ-team">
                                Founder-5
                            </h4>
                        </div>
                        <div class="ts-2-box-para">
                            <p class="ts-2-teammate-desc">An agriculturist by heart, Debjani has accelerated innovation in agriculture with her vision to build Dohna.-5
                            </p>
                        </div>
                    </div>
                </div>
            </div> 

        </div>
    </div>
</section>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.team-slider-2{
    background: #EDE4E3;
  
}
.ts-container{
    padding: 50px 0 50px;
    margin: auto;
}
.ts-2-wrap-outer{
    width: 100%;
    max-width:520px;
    background: #EDE4E3;
    box-shadow: 0px 4px 20px 8px rgba(65, 30, 30, 0.25);
    border-radius: 40px;
    overflow: hidden;
    padding-inline: 30px;
    margin: auto;
}
.ts-2-wrap-inner{
    display: flex;
}
.ts-2-team-heading, .ts-2-teammate-desc{
    text-align: center;
    color: #023F87;
}

.ts-2-team-heading {
    margin-top: 20px;
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0 0 0 85px;
    font-family: 'Bebas Neue';
    margin-bottom: 0;
}

.ts-2-sub-heading{
    margin: 10px 0 0px 85px;
    display: flex;
    justify-content: center;
}
.ts-2-occ-team{
    text-align: center;
    color: #00C9AC;
    font-size: 25px;
    font-family: 'poppins';
    font-weight: 400; 
    border-bottom: 4px solid #FF406F;
}
.ts-2-img-border-inner::before {
    content: '';
    background: #023F87;
    width: 510px;
    height: 400px;
    position: absolute;
    top: -269px;
    left: -333px;
    transform: rotate(45deg);
}
.ts-2-teammate-desc {
    font-size: 16px;
    font-weight: 400;
    padding: 15px 0 15px 50px;
    line-height: 1.6;
    font-family: 'poppins';
    margin-left: 20px;
}
.ts-2-img-border-inner{
    position: relative;
    border-radius: 200px;
}
.ts-2-img {
    position: relative;
    z-index: 99;
    top: 50px;
    left: 20px;
    min-width: 150px;
    max-width: 150px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 200px;
}
.ts-2-profile-pic::before {
    content: '';
    background: #00C9AC;
    width: 180px;
    height: 90px;
    position: absolute;
    top: 34px;
    left: -19px;
    border-radius: 200px 200px 0 0;
    transform: rotate(-45deg);
}
.ts-2-profile-pic::after {
    content: '';
    background: #FF406F;
    width: 184px;
    height: 96px;
    position: absolute;
    top: 120px;
    left: 21px;
    border-radius: 200px 200px 0 0;
    transform: rotate(135deg);
}
.owl-carousel .owl-item {
    padding: 35px;
}
.owl-theme .owl-dots .owl-dot span{
    background: #FF406F;
    opacity: 0.25;
}
.owl-theme .owl-dots .owl-dot.active span{
    background: #FF406F;
    opacity: 1;
 }
.nav-color{
   color: #FF406F;
}
@media(max-width:780px){
    .ts-container{
        max-width: 100%;

    }
}
@media(max-width:580px){


    .ts-container{
        max-width: 100%;
    }
    .ts-2-wrap-outer {
        height: 500px;
        width: 100%;
    }
    .ts-2-wrap-inner {
        display: grid;
        justify-content: center;
    }
    .ts-2-profile{
        display: flex;
        justify-self: center;
    }
    .ts-2-img-border-inner::before {
        top: -387px;
        left: -325px;
        transform: rotate(50deg);
        height: 644px;
    }
    .ts-2-profile-pic::before {
        top: 34px;
        left: 12px;
        transform: rotate(-40deg);
        width: 160px;
        height: 85px;
    }
    .ts-2-profile-pic::after {
        top: 116px;
        left: 46px;
        transform: rotate(140deg);
        width: 160px;
        height: 85px;
    }
    .ts-2-teammate-desc{
        padding: 15px 13px 45px;
        margin-left: 0;
        font-size: 14px;
    }
    .ts-2-content-box{
        margin-top: 15px;
    }
    .ts-2-team-heading {
        padding: 0;
        margin-top: 0;
        letter-spacing: 2px;
        font-size: 20px;
    }
    .ts-container {
        padding: 50px 0 0;
    }
    .owl-carousel .owl-item {
        padding: 48px;
    }
    .ts-2-profile-pic {
        margin-left: 0;
        max-height: 225px;
        min-height: 225px;
        max-width: 225px;
        min-width: 225px;
    }
    .ts-2-img {
        top: 50px;
        left: 42px;
        min-width: 130px;
        max-width: 134px;
    }
    .ts-2-sub-heading {
        margin: 10px 0 0px 0px;
    }
    .ts-2-occ-team {
        font-size: 20px;
    }
}
@media(max-width:420px){
    .ts-2-img {
        top: 55px;
        left: 40px;
        min-width: 132px;
        max-width: 132px;
    }
    .ts-2-profile-pic::before {
        top: 43px;
        left: 11px;
        transform: rotate(-40deg);
        width: 155px;
        height: 80px;
    }
    .ts-2-profile-pic::after {
        top: 119px;
        left: 45px;
        transform: rotate(140deg);
        width: 155px;
        height: 80px;
    }
}

JS

// Carousel customization can be done here
jQuery(document).ready(function(){

let tsTeam2 = jQuery('.ts-2-team--cards.owl-carousel')
tsTeam2.owlCarousel({
    center:true, // To be Commented if items are 2
    loop:true,
    margin:10,
    nav:false,
    navText:["<i class='fa-solid fa-chevron-left nav-color'></i>","<i class='fa-solid fa-chevron-right nav-color'></i>"],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:1
        },
        1000:{
            items:1
        }
    }
});

});

Links

// Used to owl carousel animations
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css">

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

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

<!-- fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/fontawesome.min.css" />

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/animateCSS/1.2.2/jquery.animatecss.min.js"></script>