<section class=" bg-cover bg-center  pb-[60px] md:pb-[30px] md:p-[30px]" data-component-type="Content" data-component-slug="sports-template-blogs-search">
    <div>
        <div class="lg:max-w-[90%] max-w-full  lg:mx-auto  
              grid grid-cols-1 md:grid-cols-2 lg:grid-cols-[2fr_1fr]   gap-6 mt-[50px] lg:mt-[80px]">


            <div class="w-full relative flex items-start justify-center  ">

                <div class="w-full relative flex items-center justify-center h-auto">
                    <div class="grid grid-cols-1 md:grid-cols-1 gap-5 lg:w-[95%] md:w-[100%] w-[90%]">

                        <a href="news-detail" class="block m-0 p-0 leading-none ">
                            <div class="  shadow-lg shadow-gray-300 overflow-hidden mb-[15px] ">
                                <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337977/seltrix/templates/sports-template/blog-search/image1.png" class="w-full" alt="image">
                                <div class="w-full p-6 ">

                                    <div class="flex items-center space-x-4 mb-4">

                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337971/seltrix/templates/sports-template/blog-search/Icon.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">Lorem ipsum</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337974/seltrix/templates/sports-template/blog-search/icon3.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">June 19, 2025</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337973/seltrix/templates/sports-template/blog-search/icon2.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">June 19, 2025</span>
                                        </span>

                                    </div>



                                    <h1 class=" text-[#0C0A0A] lg:text-[25px] mb-[20px]">
                                        <b> Lorem ipsum dolor sit amet consectetur.
                                            Vitae erat nibh vel tortor dolor netus nisi lacus.</b>
                                    </h1>


                                    <p class="text-sm font-medium text-[#666666]"> Lorem ipsum dolor sit amet
                                        consectetur.
                                        Vulputate sit mattis posuere neque rhoncus feugiat maecenas. Suspendisse
                                        vestibulum malesuada libero tempus
                                        diam curabitur eget feugiat. Orci cras sagittis amet elit semper pharetra
                                        convallis nunc facilisis. </p>

                                </div>
                            </div>
                        </a>

                        <a href="/news-detail" class="block m-0 p-0 leading-none ">
                            <div class="  shadow-lg shadow-gray-300 overflow-hidden mb-[15px]">
                                <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337978/seltrix/templates/sports-template/blog-search/image2.png" class="w-[100%]" alt="image">
                                <div class="w-full p-6 ">

                                    <div class="flex items-center space-x-4 mb-4">

                                        <span class="flex items-center gap-3 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337971/seltrix/templates/sports-template/blog-search/Icon.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">Lorem ipsum</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337974/seltrix/templates/sports-template/blog-search/icon3.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">June 19, 2025</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337973/seltrix/templates/sports-template/blog-search/icon2.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">June 19, 2025</span>
                                        </span>

                                    </div>




                                    <h1 class=" text-[#0C0A0A] lg:text-[25px] mb-[20px]">
                                        <b> Lorem ipsum dolor sit amet consectetur.
                                            Vitae erat nibh vel tortor dolor netus nisi lacus.</b>
                                    </h1>


                                    <p class="text-sm font-medium text-[#666666]"> Lorem ipsum dolor sit amet
                                        consectetur.
                                        Vulputate sit mattis posuere neque rhoncus feugiat maecenas. Suspendisse
                                        vestibulum malesuada libero tempus
                                        diam curabitur eget feugiat. Orci cras sagittis amet elit semper pharetra
                                        convallis nunc facilisis. </p>

                                </div>
                            </div>
                        </a>
                        <a href="/news-detail" class="block m-0 p-0 leading-none ">
                            <div class="  shadow-lg shadow-gray-300 overflow-hidden mb-[15px]">
                                <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337980/seltrix/templates/sports-template/blog-search/image3.png" class="w-[100%]" alt="image">
                                <div class="w-full p-6 ">

                                    <div class="flex items-center space-x-4 mb-4">

                                        <span class="flex items-center gap-3 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337971/seltrix/templates/sports-template/blog-search/Icon.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">Lorem ipsum</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337974/seltrix/templates/sports-template/blog-search/icon3.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">June 19, 2025</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337973/seltrix/templates/sports-template/blog-search/icon2.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">June 19, 2025</span>
                                        </span>

                                    </div>


                                    <h1 class=" text-[#0C0A0A] lg:text-[25px] mb-[20px]">
                                        <b> Lorem ipsum dolor sit amet consectetur.
                                            Vitae erat nibh vel tortor dolor netus nisi lacus.</b>
                                    </h1>


                                    <p class="text-sm font-medium text-[#666666]"> Lorem ipsum dolor sit amet
                                        consectetur.
                                        Vulputate sit mattis posuere neque rhoncus feugiat maecenas. Suspendisse
                                        vestibulum malesuada libero tempus
                                        diam curabitur eget feugiat. Orci cras sagittis amet elit semper pharetra
                                        convallis nunc facilisis. </p>

                                </div>
                            </div>
                        </a>
                        <a href="/news-detail" class="block m-0 p-0 leading-none ">
                            <div class="  shadow-lg shadow-gray-300 overflow-hidden mb-[15px]">
                                <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337981/seltrix/templates/sports-template/blog-search/image4.png" class="w-[100%]" alt="image">
                                <div class="w-full p-6 ">

                                    <div class="flex items-center space-x-4 mb-4">

                                        <span class="flex items-center gap-3 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337971/seltrix/templates/sports-template/blog-search/Icon.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">Lorem ipsum</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337974/seltrix/templates/sports-template/blog-search/icon3.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">June 19, 2025</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337973/seltrix/templates/sports-template/blog-search/icon2.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">June 19, 2025</span>
                                        </span>

                                    </div>

                                    <h1 class=" text-[#0C0A0A] lg:text-[25px] mb-[20px]">
                                        <b> Lorem ipsum dolor sit amet consectetur.
                                            Vitae erat nibh vel tortor dolor netus nisi lacus.</b>
                                    </h1>

                                    <p class="text-sm font-medium text-[#666666]"> Lorem ipsum dolor sit amet
                                        consectetur.
                                        Vulputate sit mattis posuere neque rhoncus feugiat maecenas. Suspendisse
                                        vestibulum malesuada libero tempus
                                        diam curabitur eget feugiat. Orci cras sagittis amet elit semper pharetra
                                        convallis nunc facilisis. </p>

                                </div>
                            </div>
                        </a>
                        <a href="/news-detail" class="block m-0 p-0 leading-none ">
                            <div class="  shadow-lg shadow-gray-300 overflow-hidden mb-[15px]">
                                <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337982/seltrix/templates/sports-template/blog-search/image5.png" class="w-[100%]" alt="image">
                                <div class="w-full p-6 ">

                                    <div class="flex items-center space-x-4 mb-4">

                                        <span class="flex items-center gap-3 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337971/seltrix/templates/sports-template/blog-search/Icon.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">Lorem ipsum</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337974/seltrix/templates/sports-template/blog-search/icon3.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">June 19, 2025</span>
                                        </span>


                                        <span class="flex items-center gap-4 hover:text-white transition">
                                            <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337973/seltrix/templates/sports-template/blog-search/icon2.png" class="w-[15px] h-[15px]">
                                            <span class="text-[12px] text-[#666666]">June 19, 2025</span>
                                        </span>

                                    </div>

                                    <h1 class=" text-[#0C0A0A] lg:text-[25px] mb-[20px]">
                                        <b> Lorem ipsum dolor sit amet consectetur.
                                            Vitae erat nibh vel tortor dolor netus nisi lacus.</b>
                                    </h1>


                                    <p class="text-sm font-medium text-[#666666]"> Lorem ipsum dolor sit amet
                                        consectetur.
                                        Vulputate sit mattis posuere neque rhoncus feugiat maecenas. Suspendisse
                                        vestibulum malesuada libero tempus
                                        diam curabitur eget feugiat. Orci cras sagittis amet elit semper pharetra
                                        convallis nunc facilisis. </p>

                                </div>
                            </div>
                        </a>

                        <ol class="flex justify-center text-xs font-medium space-x-1 mt-[20px] mb-[20px]">
                          
                            <button class="block lg:w-14 lg:h-14 w-10 h-10 text-center text-white bg-[#940F0F] lg:leading-[56px] leading-10 lg:text-xl">
                                1
                            </button>
                            <button class="block lg:w-14 lg:h-14 w-10 h-10 text-center border-2 border-gray-100   lg:leading-[56px] leading-10 lg:text-xl">
                                2
                            </button>




                            <li>
                                <button class="inline-flex items-center justify-center  lg:w-14 lg:h-14 w-10 h-10 border border-gray-100 ">
                                    <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337975/seltrix/templates/sports-template/blog-search/icon5.png" class="w-[40%]" alt="image">

                                </button>
                            </li>
                        </ol>

                    </div>




                </div>



            </div>

            <div class="w-full relative flex items-start justify-center   md:h-auto lg:h-auto  ">

                <div class="  items-start">

                    <div class="border border-[#E9E9E9] p-[30px] mb-[15px]">


                        <form class="max-w-md mx-auto ">


                            <div class="mb-[20px]">
                                <h1 class="text-[#0C0A0A] lg:text-[20px] font-bold mb-2">Search</h1>

                                <div class="flex w-full">
                                    <div class="flex-1 h-[2px] bg-[#940F0F]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                </div>
                            </div>



                            <label for="search" class="block mb-2.5 text-sm font-medium text-heading sr-only ">Search</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">

                                </div>
                                <input type="search" id="search" class="block w-full p-3 pr-12 bg-[#F6F6F6] text-[#757575] 
                                     border border-[#E9E9E9] text-sm 
                                     placeholder:text-[#757575]
                                     focus:outline-none focus:ring-0 focus:border-[#E9E9E9]" placeholder="Searching" required>
                                <button type="button" class="absolute end-0 bottom-0 text-white 
                                         bg-[#940F0F] hover:bg-brand-strong box-border border
                                         border-transparent focus:ring-4 focus:ring-brand-medium 
                                         shadow-xs font-medium leading-5  text-xs px-3 py-1.5 
                                         focus:outline-none"><svg class="w-5 h-8 text-body" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z"/>
                                    </svg></button>
                            </div>
                        </form>

                    </div>

                    <div class="border  border-[#E9E9E9] p-[30px] items-start">


                        <div class="pb-[20px] pt-[20px]">
                            <h1 class="text-[#0C0A0A] lg:text-[20px] font-bold mb-3">Recent Post</h1>

                            <div class="flex w-full">
                                <div class="flex-1 h-[2px] bg-[#940F0F]"></div>
                                <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                            </div>
                        </div>


                        <ul class="space-y-3">

                            <li>
                                <div class="relative flex flex-row items-start transition-all duration-500
                                    md:flex-row md:max-w-sm mb-3">

                                    <!-- Smaller Image -->
                                    <div class="overflow-hidden md:w-24 h-20">
                                        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337984/seltrix/templates/sports-template/blog-search/post1.png" class="w-full h-full object-cover">
                                    </div>

                                    <!-- Reduced Text & Spacing -->
                                    <div class="px-2 py-1">
                                        <h4 class="text-[#999999] text-[10px] leading-tight">August 16, 2025</h4>

                                        <h1 class="text-[#1C2539] text-[12px] md:text-[12px] lg:text-[17px] font-semibold mt-1 leading-tight">
                                            Lorem ipsum dolor sit amet consectetur.
                                        </h1>
                                    </div>

                                </div>
                            </li>
                            <div class="pb-[10px] pt-[10px]">


                                <div class="flex w-full">
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                </div>
                            </div>

                            <li>
                                <div class="relative flex flex-row items-start transition-all duration-500
                                    md:flex-row md:max-w-sm mb-3">

                                    <!-- Smaller Image -->
                                    <div class="overflow-hidden md:w-24 h-20">
                                        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337985/seltrix/templates/sports-template/blog-search/post2.png" class="w-full h-full object-cover">
                                    </div>

                                    <!-- Reduced Text & Spacing -->
                                    <div class="px-2 py-1">
                                        <h4 class="text-[#999999] text-[10px] leading-tight">August 16, 2025</h4>

                                        <h1 class="text-[#1C2539] text-[12px] md:text-[12px] lg:text-[17px] font-semibold mt-1 leading-tight">
                                            Lorem ipsum dolor sit amet consectetur.
                                        </h1>
                                    </div>

                                </div>
                            </li>

                            <div class="pb-[10px] pt-[10px]">


                                <div class="flex w-full">
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                </div>
                            </div>

                            <li>
                                <div class="relative flex flex-row items-start transition-all duration-500
                                     md:flex-row md:max-w-sm mb-3">

                                    <!-- Smaller Image -->
                                    <div class="overflow-hidden md:w-24 h-20">
                                        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337987/seltrix/templates/sports-template/blog-search/post3.png" class="w-full h-full object-cover">
                                    </div>

                                    <!-- Reduced Text & Spacing -->
                                    <div class="px-2 py-1">
                                        <h4 class="text-[#999999] text-[10px] leading-tight">August 16, 2025</h4>

                                        <h1 class="text-[#1C2539] text-[12px] md:text-[12px] lg:text-[17px] font-semibold mt-1 leading-tight">
                                            Lorem ipsum dolor sit amet consectetur.
                                        </h1>
                                    </div>

                                </div>
                            </li>


                            <div class="pb-[10px] pt-[10px]">


                                <div class="flex w-full">
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                </div>
                            </div>


                            <li>
                                <div class="relative flex flex-row items-start transition-all duration-500
                                      md:flex-row md:max-w-sm mb-3">

                                    <!-- Smaller Image -->
                                    <div class="overflow-hidden md:w-24 h-20">
                                        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337988/seltrix/templates/sports-template/blog-search/post4.png" class="w-full h-full object-cover">
                                    </div>

                                    <!-- Reduced Text & Spacing -->
                                    <div class="px-2 py-1">
                                        <h4 class="text-[#999999] text-[10px] leading-tight">August 16, 2025</h4>

                                        <h1 class="text-[#1C2539] text-[12px] md:text-[12px] lg:text-[17px] font-semibold mt-1 leading-tight">
                                            Lorem ipsum dolor sit amet consectetur.
                                        </h1>
                                    </div>

                                </div>
                            </li>
                            <div class="pb-[10px] pt-[10px]">


                                <div class="flex w-full">
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                    <div class="flex-1 h-[1px] bg-[#E7E7E7]"></div>
                                </div>
                            </div>


                            <li>
                                <div class="relative flex flex-row items-start transition-all duration-500
                                      md:flex-row md:max-w-sm mb-3">

                                    <!-- Smaller Image -->
                                    <div class="overflow-hidden md:w-24 h-20">
                                        <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767337989/seltrix/templates/sports-template/blog-search/post5.png" class="w-full h-full object-cover">
                                    </div>

                                    <!-- Reduced Text & Spacing -->
                                    <div class="px-2 py-1">
                                        <h4 class="text-[#999999] text-[10px] leading-tight">August 16, 2025</h4>

                                        <h1 class="text-[#1C2539] text-[12px] md:text-[12px] lg:text-[17px] font-semibold mt-1 leading-tight">
                                            Lorem ipsum dolor sit amet consectetur.
                                        </h1>
                                    </div>

                                </div>
                            </li>


                        </ul>

                    </div>

                </div>

            </div>

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