<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Owl Carousel CSS -->
    <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">
    <!-- Custom CSS -->
    <style>
        .owl-carousel .item img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        }

        .boxs {
            width: 30%;
            margin-left: 13%;
        }

        .boxs img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        }

        @media (max-width: 768px) {
            .boxs {
                width: 80%;
                margin-left: 10%;
            }

            .owl-carousel .item img {
                display: block;
                width: 81%;
                height: auto;
                border-radius: 10px;
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
                margin-left: 13%;
            }

            .boxs img {
                width: 79%;
                margin-left: 39px;
                margin-top: 20px;
                height: auto;
                border-radius: 10px;
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
            }
        }
    </style>
</head>

<body>
    <section>
        <div class="row my-5">
            <div class="col-md-6 boxs">
                <div class="section-title wow fadeInUp" data-wow-delay="0.1s">
                    <h3 class=" mb-2">Recommendation Letter</h3>
                </div>
                <div class="owl-carousel owl-theme">
                    <div class="item"><img src="./img/doc/DM-JITENDRA-SRIVASTAV.jpg" alt="Slide 1"></div>
                    <div class="item"><img src="./img/doc/DM-JITENDRA-SRIVASTAV.jpg" alt="Slide 2"></div>
                    <div class="item"><img src="./img/doc/DM-JITENDRA-SRIVASTAV.jpg" alt="Slide 3"></div>
                    <div class="item"><img src="./img/doc/DM-JITENDRA-SRIVASTAV.jpg" alt="Slide 4"></div>
                    <div class="item"><img src="./img/doc/DM-JITENDRA-SRIVASTAV.jpg" alt="Slide 5"></div>
                </div>
            </div>
            <div class="col-md-6 boxs">
                <div class="section-title wow fadeInUp" data-wow-delay="0.1s">
                    <h3 class=" mb-2">President Massage</h3>
                </div>
                <img src="./img/doc/DM-JITENDRA-SRIVASTAV.jpg" width="100%" alt="">
            </div>
        </div>
    </section>


    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Owl Carousel JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <!-- Custom JS -->
    <script>
        $(document).ready(function() {
            $(".owl-carousel").owlCarousel({
                loop: true,
                margin: 10,
                nav: false,
                dots: false,
                autoplay: true,
                autoplayTimeout: 3000,
                autoplayHoverPause: true,
                smartSpeed: 2000, // Slower scroll speed
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 1
                    },
                    1000: {
                        items: 1
                    }
                }
            });
        });
    </script>
</body>

</html>