<section class="bg-[#F6F6F6] py-20" data-component-type="Content">
  <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="../assets/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="../assets/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="../assets/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="../assets/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>
