<section class="w-full 2xl:py-16 ">
    <div class="max-w-[1700px] mx-auto sm:px-6 px-0 lg:px-0">

        <!-- Top Content -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-0 items-start">

            <!-- Left -->
            <div>
                <h2 class="sm:text-[40px] text-[25px] desk:text-[35px] 2xl:text-[60px] md:text-[60px] lg:text-[40px] fo-n font-semibold   text-[#143453] leading-tight">
                    Learn new skills to
                    <span class="text-[#0EB972] underline underline-offset-8 fo-xb ">Advance</span><br>
                    <span class="text-[#0EB972] underline underline-offset-8 fo-xb ">Your</span> career.
                </h2>
            </div>

            <!-- Right -->
            <div class="flex flex-col items-start  lg:items-end gap-6">
                <p class=" text-[#000000] text-[18px] lg:mt-0 mt-4 fm-n leading-relaxed sm:text-right text-left lg:w-[85%]">
                    At Tutera Learning, we help students build the skills they need to succeed.
                    Our tutoring services make learning easy and effective, so you can achieve
                    your academic and career goals with confidence.
                </p>

                <button type='button'
                    onclick="window.location.href='{{ url('about') }}'"
                    class="xl:px-14 px-12 xl:py-4 py-3  2xl:mt-6 cursor-pointer   rounded-full border-[#000000] border-[1.22px] fm-xb bg-[#facc15]  text-[#000000]
               hover:bg-yellow-400 transition font-semibold">
                    Read More
                </button>
            </div>

        </div>

        <!-- Bottom Content -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-5 mt-7 items-stretch">

            <!-- Image -->
            <div class=" overflow-hidden">
                <img src="{{ asset('site/Sites/images/learn-left.png') }}"
                    alt="Tutor"
                    class="w-full 2xl:h-full xldesk:h-[92%] h-full object-cover ">
            </div>

            <!-- Mission & Vision -->
            <div class="flex flex-col 2xl:gap-6 gap-3 2xl:justify-between justify-start">

                <!-- Mission -->
                <div
                    class="relative  p-8 text-white overflow-hidden bg-cover bg-center"
                    style="background-image: url('{{ asset('site/Sites/images/vision.png') }}');">
                    <!-- Overlay -->
                    <!-- <div class="absolute inset-0 bg-[#16b364]/90"></div> -->

                    <div class="relative z-10 flex flex-col items-start gap-4">
                        <div class="2xl:w-[71px] w-[50px] 2xl:h-[71px] h-[50px] rounded-lg bg-yellow-400 flex items-center justify-center">
                            <img
                                src="{{ asset('site/Sites/images/arrow.png') }}"
                                alt="Banner Image" />
                        </div>
                        <div>
                            <h3 class="2xl:text-[40px] text-[25px]  mb-2 fo-n">Our <span class='font-semibold'> Mission </span></h3>
                            <p class="text-[16px] text-[#FFFFFF] fm-n leading-relaxed">
                                Our mission at Tutera Learning is to empower students of all ages
                                with high-quality, personalized education that promotes confidence,
                                curiosity, and a lifelong love for learning. We are committed to
                                providing innovative tutoring solutions that enhance academic
                                performance, bridge learning gaps, and cultivate essential skills.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Vision -->
                <div
                    class="relative  p-10 text-white overflow-hidden bg-cover bg-center"
                    style="background-image: url('{{ asset('site/Sites/images/bg-header.png') }}');">
                    <!-- Overlay -->
                    <!-- <div class="absolute inset-0 bg-[#0b2540]/90"></div> -->

                    <div class="relative  z-10 flex flex-col items-start gap-4">
                        <div class="2xl:w-[71px] w-[50px] 2xl:h-[71px] h-[50px] rounded-lg bg-yellow-400 flex items-center justify-center">
                            <img
                                src="{{ asset('site/Sites/images/glasses.png') }}"
                                alt="Banner Image" />

                        </div>
                        <div>
                            <h3 class="2xl:text-[40px] text-[25px]  mb-2 fo-n">Our <span class='font-semibold'>Vision</span></h3>
                            <p class="text-[16px] text-[#FFFFFF] fm-n leading-relaxed">
                                Our vision is to be a leading force in transforming education by
                                making high-quality tutoring accessible to students worldwide.
                                At Tutera Learning, we envision a future where every learner has
                                the resources and support needed to reach their full potential.
                            </p>
                        </div>
                    </div>
                </div>

            </div>


        </div>

    </div>
</section>