<section data-component-type="Content">

  <div class="py-[120px] bg-[#F6F6F6] ">
    <div class=" max-w-[90%] mx-auto">



      <div class="text-center  lg:flex-row flex flex-col justify-between mb-12 pt-[40px]">
        <h2 data-node="pricing_heading" data-node-type="text" data-node-label="Heading Text"
          data-node-default="Where Ambition Meets Skill-Powered Growth"
          class="text-3xl text-start md:text-4xl xl:text-[60px] font-semibold text-[#000000] ">
          {{pricing_heading}}
        </h2>
        <p data-node="pricing_subtext" data-node-type="textarea" data-node-label="Subtext"
          data-node-default="We create learning experiences that turn curiosity into capability. Built for learners who want progress that actually sticks."
          class="mt-3 text-[#6C6C6C] text-sm md:text-base text-end">
          {{pricing_subtext}}
        </p>
      </div>

      <div class="w-full">
        <img data-node="stats_image" data-node-type="file" data-node-label="Customer Stats Image"
          data-node-default="../assets/communityimg.png" src="{{stats_image}}" alt="Team working"
          class="w-full rounded-2xl object-cover" />
      </div>

      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-10 mt-12 text-start">
        <div>
          <h3 data-node="stat_1_value" data-node-type="text" data-node-label="Stat 1 Value"
            data-node-default="A Community Growing Strong Every Day."
            class="text-3xl xl:text-[40px] font-semibold text-[#000000]">
            {{stat_1_value}}
          </h3>

        </div>

        <div>
          <h3 data-node="stat_2_value" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="300+"
            class="text-3xl xl:text-[40px] font-semibold text-[#000000]">
            {{stat_2_value}}
          </h3>
          <p data-node="stat_2_desc" data-node-type="textarea" data-node-label="Stat 2 Description"
            data-node-default="Expert-Led Lessons" class="text-[#6C6C6C]  mt-2">
            {{stat_2_desc}}
          </p>
        </div>

        <div>
          <h3 data-node="stat_3_value" data-node-type="text" data-node-label="Stat 3 Value" data-node-default="12+"
            class="text-3xl font-semibold text-[#000000]">
            {{stat_3_value}}
          </h3>
          <p data-node="stat_3_desc" data-node-type="textarea" data-node-label="Stat 3 Description"
            data-node-default="Categories Covered" class="text-[#6C6C6C] mt-2">
            {{stat_3_desc}}
          </p>
        </div>


        <div>
          <h3 data-node="stat_4_value" data-node-type="text" data-node-label="Stat 4 Value" data-node-default="134+"
            class="text-3xl font-semibold text-[#000000]">
            {{stat_4_value}}
          </h3>
          <p data-node="stat_4_desc" data-node-type="textarea" data-node-label="Stat 4 Description"
            data-node-default="Career-Ready Resources" class="text-[#6C6C6C] mt-2">
            {{stat_4_desc}}
          </p>
        </div>
      </div>

    </div>
  </div>
</section>