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

    <!-- Heading -->
    <div class="text-center max-w-2xl mx-auto">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-black" data-node="top_course_title" data-node-type="text" data-node-label="Top Courses Title" data-node-default="Top Courses To Grow Your Skills">
        {{top_course_title}}
      </h2>

      <p class="mt-4 text-[#6C6C6C] text-base sm:text-lg" data-node="top_course_description" data-node-type="text" data-node-label="Top Courses Description" data-node-default="Build confidence with industry-relevant courses, interactive lessons, and real-world learning designed for digital success.">
        {{top_course_description}}
      </p>
    </div>

    <!-- Course Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-14">

      <!-- Card 1 -->
      <div class="bg-white rounded-3xl lg:p-5 md:p-3 p-5 shadow-sm">
        <img src="{{top_course_1_image}}" data-node="top_course_1_image" data-node-type="file" data-node-label="Course 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750812/seltrix/templates/ss-education-template/top1.png" class="rounded-2xl w-full h-[220px] object-cover">
        <h3 class="mt-5 font-semibold text-lg text-black" data-node="top_course_1_title" data-node-type="text" data-node-label="Course 1 Title" data-node-default="UI/UX Design Essentials">
          {{top_course_1_title}}
        </h3>
        <p class="mt-2 text-[#6C6C6C] text-sm" data-node="top_course_1_desc" data-node-type="text" data-node-label="Course 1 Description" data-node-default="Learn design principles, workflows, and user-focused interface creation.">
          {{top_course_1_desc}}
        </p>
      </div>

      <!-- Card 2 -->
      <div class="bg-white rounded-3xl g:p-5 md:p-3 p-5 shadow-sm">
        <img src="{{top_course_2_image}}" data-node="top_course_2_image" data-node-type="file" data-node-label="Course 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750814/seltrix/templates/ss-education-template/top2.png" class="rounded-2xl w-full h-[220px] object-cover">
        <h3 class="mt-5 font-semibold text-lg text-black" data-node="top_course_2_title" data-node-type="text" data-node-label="Course 2 Title" data-node-default="Data Analytics Foundation">
          {{top_course_2_title}}
        </h3>
        <p class="mt-2 text-[#6C6C6C] text-sm" data-node="top_course_2_desc" data-node-type="text" data-node-label="Course 2 Description" data-node-default="Understand data, interpret insights, and make informed decisions.">
          {{top_course_2_desc}}
        </p>
      </div>

      <!-- Card 3 -->
      <div class="bg-white rounded-3xl lg:p-5  shadow-sm hidden lg:block">
        <img src="{{top_course_3_image}}" data-node="top_course_3_image" data-node-type="file" data-node-label="Course 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750815/seltrix/templates/ss-education-template/top3.png" class="rounded-2xl w-full h-[220px] object-cover">
        <h3 class="mt-5 font-semibold text-lg text-black" data-node="top_course_3_title" data-node-type="text" data-node-label="Course 3 Title" data-node-default="Web Development Basics">
          {{top_course_3_title}}
        </h3>
        <p class="mt-2 text-[#6C6C6C] text-sm" data-node="top_course_3_desc" data-node-type="text" data-node-label="Course 3 Description" data-node-default="Build responsive, functional websites from scratch.">
          {{top_course_3_desc}}
        </p>
      </div>

    </div>

  
  </div>
</section>