<section class="bg-[#F6F6F6] pt-[20px] pb-[30px]" data-component-type="Content" data-component-slug="ss-education-template-Top_Courses_stats">
  <div class="max-w-[90%] mx-auto px-6 lg:px-10">
    <!-- Stats -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6 ">

      <div class="bg-white rounded-3xl py-10 text-center">
        <h4 class="lg:text-4xl text-[22px] text-[20px] text-[16px] font-bold text-black" data-node="stat_1_value" data-node-type="text" data-node-label="Stat 1 Value" data-node-default="300+">
          {{stat_1_value}}
        </h4>
        <p class="mt-2 text-[#6C6C6C] lg:text-sm tex-[12px]" data-node="stat_1_label" data-node-type="text" data-node-label="Stat 1 Label" data-node-default="Completed Lessons">
          {{stat_1_label}}
        </p>
      </div>

      <div class="bg-white rounded-3xl py-10 text-center">
        <h4 class="lg:text-4xl text-[22px] text-[20px] text-[16px] font-bold text-black" data-node="stat_2_value" data-node-type="text" data-node-label="Stat 2 Value" data-node-default="12+">
          {{stat_2_value}}
        </h4>
        <p class="mt-2 text-[#6C6C6C] lg:text-sm tex-[12px]" data-node="stat_2_label" data-node-type="text" data-node-label="Stat 2 Label" data-node-default="Expert Mentors">
          {{stat_2_label}}
        </p>
      </div>

      <div class="bg-white rounded-3xl py-10 text-center">
        <h4 class="lg:text-4xl text-[22px] text-[20px] text-[16px] font-bold text-black" data-node="stat_3_value" data-node-type="text" data-node-label="Stat 3 Value" data-node-default="134+">
          {{stat_3_value}}
        </h4>
        <p class="mt-2 text-[#6C6C6C] lg:text-sm tex-[12px]" data-node="stat_3_label" data-node-type="text" data-node-label="Stat 3 Label" data-node-default="Active Courses">
          {{stat_3_label}}
        </p>
      </div>

      <div class="bg-white rounded-3xl py-10 text-center">
        <h4 class="lg:text-4xl text-[22px] text-[20px] text-[16px] font-bold text-black" data-node="stat_4_value" data-node-type="text" data-node-label="Stat 4 Value" data-node-default="98%">
          {{stat_4_value}}
        </h4>
        <p class="mt-2 text-[#6C6C6C] lg:text-sm tex-[12px]" data-node="stat_4_label" data-node-type="text" data-node-label="Stat 4 Label" data-node-default="Student Satisfaction">
          {{stat_4_label}}
        </p>
      </div>

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