<section class="w-full bg-white achievement-sec">
    <div class="max-w-[1700px] mx-auto sm:px-6 px-0 lg:px-0">
        <div class="grid grid-cols-12 sm:gap-8 gap-3 lg:gap-3">
            <div class="col-span-12 text-center mb-5 heading">
                <h4 class="text-[18px] text-[#000000] mb-3 fm-xb uppercase">Some Fun Fact</h4>
                <h2 class="sm:text-[48px] text-[30px] lg:text-[60px] fo-n font-semibold   text-[#143453] leading-tight">Our Great <span class="Underline text-[#0EB972] font-bold underline underline-offset-8 ">Achievement</span></h2>
            </div>
            <div class="lg:col-span-3 sm:col-span-6 col-span-12">
                <div class="flex items-center gap-4 shadow-lg shadow-black/15 p-7 lg:p-5 border border-[#EDEDED]">
                    <!-- Image -->
                    <div class=" overflow-hidden">
                        <img src="{{ asset('Sites/images/achievement/1.png') }}"
                            alt="Tutor"
                            class="w-full object-cover ">
                    </div>
                    <div class="text">
                        <h2 class="text-[#1A2D62] fm-xb sm:text-[42px] text-[30px]">854</h2>
                        <span class="text-[#888888] fm-n text-[18px]">Enrolled Students</span>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-3 sm:col-span-6 col-span-12">
                <div class="flex items-center gap-4 shadow-lg shadow-black/15 p-7 lg:p-5  border border-[#EDEDED]">
                    <!-- Image -->
                    <div class=" overflow-hidden">
                        <img src="{{ asset('Sites/images/achievement/2.png') }}"
                            alt="Tutor"
                            class="w-full h-full object-cover ">
                    </div>
                    <div class="text">
                        <h2 class="text-[#1A2D62] fm-xb sm:text-[42px] text-[30px]">521</h2>
                        <span class="text-[#888888] fm-n text-[18px]">Academic Programs</span>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-3 sm:col-span-6 col-span-12">
                <div class="flex items-center gap-4 shadow-lg shadow-black/15 p-7 lg:p-5 border border-[#EDEDED]">
                    <!-- Image -->
                    <div class=" overflow-hidden">
                        <img src="{{ asset('Sites/images/achievement/3.png') }}"
                            alt="Tutor"
                            class="w-full h-full object-cover ">
                    </div>
                    <div class="text">
                        <h2 class="text-[#1A2D62] fm-xb sm:text-[42px] text-[30px]">163</h2>
                        <span class="text-[#888888] fm-n text-[18px]">Winning Award</span>
                    </div>
                </div>
            </div>
            <div class="lg:col-span-3 sm:col-span-6 col-span-12">
                <div class="flex items-center gap-4 shadow-lg shadow-black/15 p-7 lg:p-5 border border-[#EDEDED]">
                    <!-- Image -->
                    <div class=" overflow-hidden">
                        <img src="{{ asset('Sites/images/achievement/4.png') }}"
                            alt="Tutor"
                            class="w-full h-full object-cover ">
                    </div>
                    <div class="text">
                        <h2 class="text-[#1A2D62] fm-xb sm:text-[42px] text-[30px]">93</h2>
                        <span class="text-[#888888] fm-n text-[18px]">Certified Students</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>