<section class="bg-[#F6F6F6] pt-[150px] pb-[50px] px-4" data-component-type="Content" data-component-slug="ss-education-template-upgrade_skill">
  <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">
        <a data-node="home_courses_link" data-node-type="page_links" data-node-label="Course button Link 1" href="{{home_courses_link}}" data-node-default="#">
          <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="https://res.cloudinary.com/duukclzsd/image/upload/v1766750744/seltrix/templates/ss-education-template/arrow.png" alt="Arrow" class="w-[20px] p-[2px] object-cover">
            </span>
          </button>
        </a>

      </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="https://res.cloudinary.com/duukclzsd/image/upload/v1766750746/seltrix/templates/ss-education-template/bannerc.png" class="w-full h-auto object-cover">
      </div>
    </div>

  </div>
</section>