<section class="bg-[#F6F6F6] pt-[30px] pb-[20px]" data-component-type="Content">
  <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 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="../assets/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 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="../assets/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 p-5 shadow-sm">
        <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="../assets/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>
