<section data-component-type="Content" data-component-slug="ss-education-template-learning_build">
  <div class="bg-[#F6F6F6] py-10">
    <div class="max-w-[90%] mx-auto bg-white rounded-2xl overflow-hidden shadow-sm">

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-3 md:gap-6 items-center p-[20px] lg:p-[1px]  md:p-[30px]">

        <!-- LEFT CONTENT -->
        <div class="px-6 sm:px-10 lg:px-14">

          <h2 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-black mb-4" data-node="learning_heading" data-node-type="text" data-node-label="Section Heading" data-node-default="Learning Built Around Real Progress">
            {{learning_heading}}
          </h2>

          <p class="text-[#4A6673] mb-8 max-w-lg" data-node="learning_description" data-node-type="text" data-node-label="Section Description" data-node-default="Our programs are crafted with clarity, guidance, and hands-on depth. Every lesson pushes you closer to real-world mastery.">
            {{learning_description}}
          </p>

          <!-- FEATURES -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">

            <div>
              <h4 class="font-semibold text-black mb-1" data-node="feature_1_title" data-node-type="text" data-node-label="Feature 1 Title" data-node-default="Structured Paths">
                {{feature_1_title}}
              </h4>
              <p class="text-sm text-[#4A6673]" data-node="feature_1_desc" data-node-type="text" data-node-label="Feature 1 Description" data-node-default="Clear modules that guide your growth.">
                {{feature_1_desc}}
              </p>
            </div>

            <div>
              <h4 class="font-semibold text-black mb-1" data-node="feature_2_title" data-node-type="text" data-node-label="Feature 2 Title" data-node-default="Practical Learning">
                {{feature_2_title}}
              </h4>
              <p class="text-sm text-[#4A6673]" data-node="feature_2_desc" data-node-type="text" data-node-label="Feature 2 Description" data-node-default="Concepts rooted in real scenarios.">
                {{feature_2_desc}}
              </p>
            </div>

            <div>
              <h4 class="font-semibold text-black mb-1" data-node="feature_3_title" data-node-type="text" data-node-label="Feature 3 Title" data-node-default="Expert Insight">
                {{feature_3_title}}
              </h4>
              <p class="text-sm text-[#4A6673]" data-node="feature_3_desc" data-node-type="text" data-node-label="Feature 3 Description" data-node-default="Knowledge shaped by industry leaders.">
                {{feature_3_desc}}
              </p>
            </div>

            <div>
              <h4 class="font-semibold text-black mb-1" data-node="feature_4_title" data-node-type="text" data-node-label="Feature 4 Title" data-node-default="Outcome Focused">
                {{feature_4_title}}
              </h4>
              <p class="text-sm text-[#4A6673]" data-node="feature_4_desc" data-node-type="text" data-node-label="Feature 4 Description" data-node-default="Skills designed to create momentum.">
                {{feature_4_desc}}
              </p>
            </div>

          </div>
        </div>

        <!-- RIGHT IMAGE -->
        <div class="h-full flex items-center justify-center lg:justify-end">
          <img src="{{learning_image}}" data-node="learning_image" data-node-type="file" data-node-label="Learning Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750777/seltrix/templates/ss-education-template/learning_build.png" alt="Learning Card" class="w-full max-w-md rounded-xl shadow-md object-cover">
        </div>

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