<section data-component-type="Hero" class=" bg-[#F6F6F6] py-[15px] " data-component-slug="ss-education-template-pricing_hero">
  <div class="lg:max-w-[100%] max-w-full flex justify-center mx-auto px-5 pt-[80px] md:pt-[100px] lg:pt-[100px] items-center gap-5 mb-[20px]  ">


  <div class="lg:max-w-[40%] mt-[30px]">
    {{#if show_choose_smart_tag}}
    <div class="p-2 flex justify-center gap-3">
      <div class="bg-[#019D7633] flex gap-3 px-6 py-2 items-center rounded-[10px]">
        <img data-node="choose_smart_tag_icon" data-node-type="file" data-node-label="Tag Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750759/seltrix/templates/ss-education-template/Ellipse%2023.png" src="{{choose_smart_tag_icon}}" class="w-[15px] h-[15px]" alt="Logo">
        <span data-node="choose_smart_tag" data-node-type="text" data-node-label="Tag Label" data-node-default="Choose Smart" class="text-[#019D76] text-center text-[16px] rounded-md font-bold">
          {{choose_smart_tag}}
        </span>
      </div>
    </div>
    {{/if}}

    <h1 data-node="choose_smart_heading" data-node-type="text" data-node-label="Main Heading" data-node-default="Choose a Plan That Scales With You" class="text-[#151515] text-[20px] lg:text-[50px] text-center font-bold rounded-md">
      {{choose_smart_heading}}
    </h1>

    <p data-node="choose_smart_subtext" data-node-type="textarea" data-node-label="Subtext" data-node-default="Find the right learning path tailored to your goals and pace.  Transparent pricing, flexible access, and zero hidden conditions." class="text-[#4A6673] mt-0 pt-[20px] text-[16px] text-center lg:text-[22px]  rounded-md">
      {{choose_smart_subtext}}
    </p>

    <div class="p-2 flex justify-center gap-3">
      <a data-node="choose_smart_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="#" href="{{choose_smart_cta_link}}" class="mt-5 bg-[#019D76] text-[#FFFFFF] font-semibold px-6 py-3 border rounded-[50px] border-transparent hover:bg-[#019D7633] hover:text-[#019D76] hover:border-[#019D7633] transition-all duration-300 shadow-md hover:shadow-lg flex items-center gap-2">
        <span data-node="choose_smart_cta_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Start Your Free Trial">{{choose_smart_cta_text}}</span>
      </a>
    </div>
  </div>
  </div>
</section>