<section
  class="bg-[#F6F6F6] pt-[150px] pb-[50px] px-4"
  data-component-type="Content"
>
  <div class="max-w-[90%] mx-auto text-center">

    <!-- TOP CONTENT -->
    <h1
      class="text-3xl sm:text-4xl lg:text-5xl font-bold text-black leading-tight"
      data-node="hero_heading"
      data-node-type="text"
      data-node-label="Hero Heading"
      data-node-default="Upgrade Your Skills With Expert-Led Courses"
    >
    {{hero_heading}}
    </h1>

    <p
      class="mt-4 text-gray-600 max-w-2xl mx-auto text-base sm:text-lg"
      data-node="hero_description"
      data-node-type="text"
      data-node-label="Hero Description"
      data-node-default="Learn through structured modules built to simplify complex topics and accelerate your growth."
    >
    {{hero_description}}
    </p>

    <!-- BUTTON -->
    <div class="mt-6 flex justify-center">
      <div class="mt-8">
                <button class="flex items-center gap-3 bg-emerald-600 text-white pr-[5px] py-[5px] pl-[20px]
                 rounded-full font-medium hover:bg-emerald-700 transition" data-node="hero_cta_text" data-node-type="text"
                    data-node-label="Hero Button Text" data-node-default="Browse Courses">
                    {{hero_cta_text}}

                    <span class="bg-[#F6F6F6] text-black w-[50px] h-[50px] flex items-center justify-center rounded-full">
                        <img src="{{hero_cta_icon}}" data-node="hero_cta_icon" data-node-type="file"
                            data-node-label="Hero CTA Icon" data-node-default="../assets/arrow.png" alt="Arrow"
                            class="w-[20px] p-[2px] object-cover" />
                    </span>
                </button>
            </div>

    </div>

    <!-- IMAGE SECTION -->
    <div class="mt-12 relative">
      <div class="rounded-xl overflow-hidden shadow-xl">
        <img
          src="{{hero_image}}"
          alt="Hero Image"
          data-node="hero_image"
          data-node-type="file"
          data-node-label="Hero Image"
          data-node-default="../assets/bannerc.png"
          class="w-full h-auto object-cover"
        />
      </div>
    </div>

  </div>
</section>
