Portfolio section with Testimonial layout

                                        <style>
        .swiper-slide.swiper-slide-active>.slide\:w-full {
            width: 100%;
        }
       .swiper-slide{
          height:auto!important;
        }
        .swiper-button-prev:after,
        .swiper-rtl .swiper-button-next:after {
            content: "" !important;
        }
        .swiper-wrapper {
            height: 100% !important;
            
        }

        .swiper-button-next:after,
        .swiper-rtl .swiper-button-prev:after {
            content: "" !important;
        }

        .swiper-button-next,
        .swiper-button-prev {
            position: relative !important;
        }
    </style>

<section class="py-12 relative">
        <div class="w-full max-w-7xl px-6 lg:px-8 mx-auto">
            <div class="flex items-center justify-between flex-col sm:flex-row gap-y-4 mb-5">
                <h2 class="font-manrope font-bold text-4xl text-gray-900">Creative Expressions</h2>
                <div class="flex justify-center items-center gap-6">
                    <button
                        class="swiper-button-prev rounded-full w-9 h-9 flex items-center justify-center p-2.5 bg-indigo-200 group transition-all duration-300 hover:bg-indigo-600">
                        <svg class="stroke-indigo-700 transition-all duration-300 group-hover:stroke-white"
                            xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path
                                d="M8.38449 15.1023L3.33337 10.0512M3.33337 10.0512L8.38449 5.00006M3.33337 10.0512H18.3333"
                                stroke="" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </button>
                    <button
                        class="swiper-button-next rounded-full w-9 h-9 flex items-center justify-center p-2.5 bg-indigo-200 group transition-all duration-300 hover:bg-indigo-600">
                        <svg class="stroke-indigo-700 transition-all duration-300 group-hover:stroke-white"
                            xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path
                                d="M11.6155 5.00006L16.6667 10.0512M16.6667 10.0512L11.6155 15.1023M16.6667 10.0512L1.66675 10.0512"
                                stroke="" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </button>
                </div>
            </div>
            <p class="font-normal text-base text-gray-500 max-w-4xl max-sm:text-center">Nisl molestie facilisis
                pellentesque diam nulla nam
                vitae
                sapien. Ac cras aenean auctor molestie aliquet. Cras non bibendum ultricies metus orci proin blandit a
                quis.</p>


        </div>
        <div class="swiper mySwiper mb-10 py-10">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712046.png" alt=""
                            class="w-full h-full  object-cover mx-auto">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712065.png" alt=""
                            class="w-full h-full  object-cover mx-auto">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712095.png" alt=""
                            class="w-full h-full  object-cover mx-auto">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712046.png" alt=""
                            class="w-full h-full object-cover mx-auto">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712065.png" alt=""
                            class="w-full h-full object-cover mx-auto">
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="w-full h-full max-h-[456px]">
                        <img src="https://pagedone.io/asset/uploads/1707712095.png" alt=""
                            class="w-full h-full object-cover mx-auto">
                    </div>
                </div>

            </div>
        </div>

        <button
            class="flex items-center justify-center py-3.5 px-7 rounded-full font-semibold text-base text-white bg-indigo-600 shadow-sm shadow-transparent transition-all duration-300 hover:shadow-indigo-200 hover:bg-indigo-700 w-max mx-auto">View
            More</button>
    </section>

<script>
        var swiper = new Swiper('.mySwiper', {
            pagination: '.swiper-pagination',
            slidesPerView: 2,
            centeredSlides: true,
            paginationClickable: true,
            loop: true,
            spaceBetween: 30,
            slideToClickedSlide: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>