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

    <!-- Top Label -->
    <div class="flex justify-center">
    <span class="px-4 py-2 rounded-full border border-[#E9E9E9] text-sm font-medium" data-node="testimonial_label" data-node-type="text" data-node-label="Section Label" data-node-default="What Our Students Say">
        {{testimonial_label}}
      </span>
    </div>

<!-- Stars -->
<div class="flex justify-center mt-4 gap-1 text-orange-400">
  
  <img src="{{star1}}" data-node="star1" data-node-type="file" data-node-label="Star 1" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750768/seltrix/templates/ss-education-template/gold_star.png" class="w-[20px] h-[20px]">

  <img src="{{star2}}" data-node="star2" data-node-type="file" data-node-label="Star 2" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750768/seltrix/templates/ss-education-template/gold_star.png" class="w-[20px] h-[20px]">

  <img src="{{star3}}" data-node="star3" data-node-type="file" data-node-label="Star 3" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750768/seltrix/templates/ss-education-template/gold_star.png" class="w-[20px] h-[20px]">

  <img src="{{star4}}" data-node="star4" data-node-type="file" data-node-label="Star 4" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750768/seltrix/templates/ss-education-template/gold_star.png" class="w-[20px] h-[20px]">

  <img src="{{star5}}" data-node="star5" data-node-type="file" data-node-label="Star 5" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750768/seltrix/templates/ss-education-template/gold_star.png" class="w-[20px] h-[20px]">

</div>

 

    <div class="relative w-full max-w-5xl mx-auto overflow-hidden">
  <!-- SLIDES WRAPPER -->
  <div id="slider" class="flex transition-transform duration-500 ease-in-out">
    <!-- Slide 1 -->
    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6] h-64">
        <p class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]" data-node="testimonial_1" data-node-type="text" data-node-label="Testimonial 1" data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories.">
            {{testimonial_1}}
          </p>

    </div>

    <!-- Slide 2 -->
    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6]  h-64">
      <p class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]" data-node="testimonial_2" data-node-type="text" data-node-label="Testimonial 2" data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories.">
            {{testimonial_2}}
          </p>
    </div>

    <!-- Slide 3 -->
    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6]  h-64">
         <p class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]" data-node="testimonial_3" data-node-type="text" data-node-label="Testimonial 3" data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories.">
            {{testimonial_3}}
          </p>
    </div>

    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6]  h-64">
        <p class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]" data-node="testimonial_4" data-node-type="text" data-node-label="Testimonial 4" data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories.">
            {{testimonial_4}}
          </p>
    </div>


    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6]  h-64">
       <p class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]" data-node="testimonial_5" data-node-type="text" data-node-label="Testimonial 5" data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories.">
            {{testimonial_5}}
          </p>
    </div>

    <div class="min-w-full flex items-center justify-center bg-[#F6F6F6]  h-64">
      <p class="text-lg sm:text-xl lg:text-2xl text-black leading-relaxed text-center px-4 w-[80%]" data-node="testimonial_6" data-node-type="text" data-node-label="Testimonial 6" data-node-default="Real experiences from learners who transformed their skills and their careers with our guidance. From promotions to freelance success stories.">
            {{testimonial_6}}
          </p>
    </div>
  </div>

  <!-- PREV BUTTON -->
  <button onclick="prevSlide()" class="absolute left-4 top-1/2 -translate-y-1/2  text-white px-3 py-3 rounded-full bg-[#E9E9E9] ">
      <b>  <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1766750779/seltrix/templates/ss-education-template/left.png" class="w-[20px] h-[20px] p-[2px]"></b> 
  </button>

  <!-- NEXT BUTTON -->
  <button onclick="nextSlide()" class="absolute right-4 top-1/2 -translate-y-1/2 bg-[#E9E9E9] text-white px-3 py-3 rounded-full">
     <b>  <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1766750801/seltrix/templates/ss-education-template/right.png" class="w-[20px] h-[20px] p-[2px]"></b> 
  </button>
</div>



    <!-- User Tabs -->
   <div class="mt-12 max-w-[90%] mx-auto">
   <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-6 lg:grid-cols-3 mx-auto gap-4 justify-center px-4">

  <!-- User 1 -->
  <div data-index="0" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-emerald-600 text-white min-w-[160px]">
    <img src="{{user_1_image}}" data-node="user_1_image" data-node-type="file" data-node-label="User 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750825/seltrix/templates/ss-education-template/w2.png" class="w-8 h-8 rounded-full">
    <span class="text-sm font-medium" data-node="user_1_name" data-node-type="text" data-node-label="User 1 Name" data-node-default="Sarah Thomas">
      {{user_1_name}}
    </span>
  </div>

  <!-- User 2 -->
  <div data-index="1" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-white min-w-[160px]">
    <img src="{{user_2_image}}" data-node="user_2_image" data-node-type="file" data-node-label="User 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750826/seltrix/templates/ss-education-template/w3.png" class="w-8 h-8 rounded-full">
    <span class="text-sm font-medium" data-node="user_2_name" data-node-type="text" data-node-label="User 2 Name" data-node-default="Meera Patel">
      {{user_2_name}}
    </span>
  </div>

  <!-- User 3 -->
  <div data-index="2" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-white min-w-[160px]">
    <img src="{{user_3_image}}" data-node="user_3_image" data-node-type="file" data-node-label="User 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750828/seltrix/templates/ss-education-template/w4.png" class="w-8 h-8 rounded-full">
    <span class="text-sm font-medium" data-node="user_3_name" data-node-type="text" data-node-label="User 3 Name" data-node-default="Aarav Mehta">
      {{user_3_name}}
    </span>
  </div>

  <!-- User 4 -->
  <div data-index="3" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-white min-w-[160px]">
    <img src="{{user_4_image}}" data-node="user_4_image" data-node-type="file" data-node-label="User 4 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750829/seltrix/templates/ss-education-template/w5.png" class="w-8 h-8 rounded-full">
    <span class="text-sm font-medium" data-node="user_4_name" data-node-type="text" data-node-label="User 4 Name" data-node-default="Rohan Kumar">
      {{user_4_name}}
    </span>
  </div>

  <!-- User 5 -->
  <div data-index="4" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-white min-w-[160px]">
    <img src="{{user_5_image}}" data-node="user_5_image" data-node-type="file" data-node-label="User 5 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750831/seltrix/templates/ss-education-template/w6.png" class="w-8 h-8 rounded-full">
    <span class="text-sm font-medium" data-node="user_5_name" data-node-type="text" data-node-label="User 5 Name" data-node-default="Priya Nair">
      {{user_5_name}}
    </span>
  </div>

  <!-- User 6 -->
  <div data-index="5" class="user-tab flex flex-col items-center gap-3 px-5 py-3 rounded-xl bg-white min-w-[160px]">
    <img src="{{user_6_image}}" data-node="user_6_image" data-node-type="file" data-node-label="User 6 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1766750834/seltrix/templates/ss-education-template/w7.png" class="w-8 h-8 rounded-full">
    <span class="text-sm font-medium" data-node="user_6_name" data-node-type="text" data-node-label="User 6 Name" data-node-default="Aditya Roy">
      {{user_6_name}}
    </span>
  </div>

</div>

</div>


  </div>
</section>