<section class="bg-[#F6F6F6] py-20" data-component-type="Content" data-component-slug="ss-education-template-learn_through">
  <div class="max-w-[90%] mx-auto px-6 lg:px-10">

    <!-- Heading -->
    <div class="text-center max-w-4xl mx-auto">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-black leading-tight" data-node="learn_heading" data-node-type="text" data-node-label="Main Heading" data-node-default="Learn Through Hands And Expert Feedback That Ensures real growth.">
        {{learn_heading}}
      </h2>

      <!-- Icons inline -->
      <!-- <div class="flex justify-center gap-4 mt-4">
        <span class="w-[50px] h-[50px] bg-[#019D76] rounded-full flex items-center justify-center">
          <img
            src="{{icon_1}}"
            data-node="icon_1"
            data-node-type="file"
            data-node-label="Green Icon"
            data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750820/seltrix/templates/ss-education-template/Vector.png"
            class="w-full p-3 object-cover"
          />
        </span>

        <span class="w-[50px] h-[50px] bg-[#FF8126] rounded-full flex items-center justify-center">
          <img
            src="{{icon_2}}"
            data-node="icon_2"
            data-node-type="file"
            data-node-label="Orange Icon"
            data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750821/seltrix/templates/ss-education-template/vector2.png"
            class="w-full p-3 object-cover"
          />
        </span>

        <span class="w-[50px] h-[50px] bg-[#872BFF] rounded-full flex items-center justify-center">
          <img
            src="{{icon_3}}"
            data-node="icon_3"
            data-node-type="file"
            data-node-label="Purple Icon"
            data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750818/seltrix/templates/ss-education-template/Union.png"
            class="w-full p-3 object-cover"
          />
        </span>
      </div> -->

    </div>

    <!-- Content -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-16 items-center">

      <!-- Image -->
      <div class="xl:w-full xl:h-[600px] overflow-hidden lg:w-[400px]">
        <img src="{{side_image}}" data-node="side_image" data-node-type="file" data-node-label="Side Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750803/seltrix/templates/ss-education-template/sidebg.png" class="rounded-3xl w-full object-cover">
      </div>

      <!-- Text Content -->
      <div class=" rounded-3xl ">

        <div class="bg-[#FAFAFA] p-8">
          <h3 class="font-semibold text-lg text-black" data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Learn From Top Experts">
            {{feature_1_title}}
          </h3>
          <p class="mt-2 text-[#6C6C6C] text-sm" data-node="feature_1_desc" data-node-type="text" data-node-label="Feature 1 Description" data-node-default="Explore immersive learning experiences crafted by industry specialists who understand what modern digital roles truly demand.">
            {{feature_1_desc}}
          </p>
        </div>

        <div class="bg-[#FFFFFF] p-8">
          <h3 class="font-semibold text-lg text-black" data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Grow Your Skills Daily">
            {{feature_2_title}}
          </h3>
          <p class="mt-2 text-[#6C6C6C] text-sm" data-node="feature_2_desc" data-node-type="text" data-node-label="Feature 2 Description" data-node-default="Gain confidence through step-by-step modules enriched with practical examples, real scenarios, and guided exercises. 
            One skill at a time.">
            {{feature_2_desc}}
          </p>
        </div>

        <div class="bg-[#FFFFFF] p-8">
          <h3 class="font-semibold text-lg text-black" data-node="feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Learn Anytime, Anywhere">
            {{feature_3_title}}
          </h3>
          <p class="mt-2 text-[#6C6C6C] text-sm" data-node="feature_3_desc" data-node-type="text" data-node-label="Feature 3 Description" data-node-default="Study at your own pace with seamless access to every course from any device. Whether it’s a quick lesson or a deep-dive session, it fits into your daily routine.">
            {{feature_3_desc}}
          </p>
        </div>

       <div class="bg-[#FFFFFF] p-8">
          <h3 class="font-semibold text-lg text-black" data-node="feature_4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="Built For Your Career">
            {{feature_4_title}}
          </h3>
          <p class="mt-2 text-[#6C6C6C] text-sm" data-node="feature_4_desc" data-node-type="text" data-node-label="Feature 4 Description" data-node-default="Build a job-ready portfolio, earn recognized certifications, and develop abilities employers actively seek. Our curriculum is structured to strengthen your career path.">
            {{feature_4_desc}}
          </p>
        </div>

      </div>
    </div>

  </div>
</section>