<section class="w-full pb-16">
    <div class="mx-auto px-6 lg:px-10">


        <div
            class="rounded-[22px] overflow-hidden border border-white/40 shadow-xl bg-cover bg-center"
            style="background-image: url('{{ asset('site/Sites/images/bg-banner.png') }}');">


            <div class="">
                <div class="grid grid-cols-1 lg:grid-cols-2 items-center  gap-10 px-8 ">


                    <div class="sm:pl-6 lg:pl-12 sm:mt-20 mt-10 xl:mt-0 sm:text-start text-center  sm:ml-12">
                        <p class="sm:text-[20px] text-[15px]  text-gray-700 mb-3 fm-xb uppercase">
                            Welcome to <span class=' text-[#30BEAD]'> Tutera Learning
                            </span>
                        </p>

                        <h1 class="sm:text-[40px] text-[30px] md:text-[40px] fo-xxb  2xl:text-[70px] font-bold text-[#1A2D62] uppercase leading-tight mb-6">
                            VALUABLE 1-1
                            <br> <span class='text-[#202020] font-normal fo-n  '> Learning SEE IT, </span> <br>
                            <span class='text-[#202020]   fo-n  font-normal'> LEARN IT,</span> <span class='text-[#2CC183]'> APPLY IT</span>
                        </h1>
                        <p class='text-[#1A1A1A] lg:text-[17px] desk:text-[20px] sm:text-[20px] text-[15px] fm-n'>Success is the sum of small efforts, repeated day-in and day-out.
                            To accomplish great things, we must not only act, but also dream, not only plan, but also believe and do right preparation. This is the key to success.</p>
                        <button type='button'
                            onclick="window.location.href='{{ url('about') }}'"
                            class="xl:px-14 px-12 xl:py-4 py-3 mt-6  rounded-full cursor-pointer border-[#000000] border-[1.22px] fm-xb bg-[#facc15]  text-[#000000]
               hover:bg-yellow-400 transition font-semibold">
                            Read More
                        </button>
                    </div>



                    <div class="flex justify-center lg:justify-end">
                        <img src="{{ asset('site/Sites/images/banner-image.png') }}"
                            alt="Banner Image"
                            class="max-w-full xl:h-auto h-[20%] sm:w-full w-[80%]  ">
                    </div>

                </div>
            </div>

        </div>

    </div>
</section>