<!-- Start Hero -->
    <section class="relative w-full">
      <div class="sm:px-4 lg:px-11 xl:px-20 2xl:px-52 sm:py-8 mx-auto relative">
        <div
          class="grid md:grid-cols-12 grid-cols-1 items-center pt-10 gap-[10px]"
        >
          <div class="md:col-span-6 mx-4">
            <div class="me-6">
              <h4
                class="font-semibold lg:leading-normal leading-normal text-4xl lg:text-5xl mb-5 text-black"
              >
                Unleash the Power of
                <br />
                <span class="text-blue-600">Our AI Assistant</span>
              </h4>
              <p class="text-slate-400 text-lg max-w-xl">
                Dive into the realm of artificial intelligence, where algorithms
                dream, neural networks learn, and data transforms the ordinary
                into the extraordinary.
              </p>

              <div class="mt-6">
                <a
                  href="#"
                  class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-blue-600 hover:bg-blue-700 border-blue-600 hover:border-blue-700 text-white rounded-md me-2 mt-2"
                >
                  Get Started</a
                >
                <a
                  href="#"
                  class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-transparent hover:bg-blue-600 border-blue-600 text-blue-600 hover:text-white rounded-md mt-2"
                >
                  Read More</a
                >
              </div>
            </div>
          </div>
          <!--end col-->

          <div class="md:col-span-6">
            <img
              class="mx-auto"
              src="https://res.cloudinary.com/djunzsydj/image/upload/v1711055147/tailwindsnippets/components/ay6zhwf0xgrneydlzkoj.png"
              alt=""
            />
          </div>
          <!--end col-->
        </div>
        <!--end grid-->
      </div>
      <!--end container-->
    </section>
    <!--end section-->
    <!-- End Hero -->