<section class="bg-[#FDFDF9]  py-20 px-5" data-component-type="Content" data-component-slug="home-appliances-template-testimonials">
  <div class="max-w-[90%] mx-auto">
    <!-- HEADER SECTION -->
    <div class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-8 border-b border-[#D4D4D4] pb-8">
      <div class="flex-1">
        {{#if show_section_subtitle}}
        <p class="text-xs  tracking-[0.2em] text-[#2346A7] uppercase mb-2">
          <span data-node="section_subtitle" data-node-type="text" data-node-label="Section Subtitle" data-node-default="Testimonial"><b>{{section_subtitle}}</b></span>
        </p>
        {{/if}} {{#if show_section_title}}
        <h2 class="text-4xl md:text-5xl text-[#1A1A1A] mb-4">
          <span data-node="section_title" data-node-type="text" data-node-label="Section Title" data-node-default="Customer Feedback & Reviews">{{section_title}}</span>
        </h2>

        {{/if}}
       
      </div>

      <div class="flex items-center gap-6">
        <!-- Navigation Buttons -->
        <div class="flex items-center gap-3  p-2 rounded-full">
          <button id="prevBtn" data-slider-prev class="w-10 h-10 rounded-full bg-[#1f1f1f] text-white flex items-center justify-center hover:bg-opacity-80 transition-colors" aria-label="Previous Review">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M15 18l-6-6 6-6"/>
            </svg>
          </button>
          <button id="nextBtn" data-slider-next class="w-10 h-10 rounded-full bg-[#1f1f1f] text-white flex items-center justify-center hover:bg-opacity-80 transition-colors" aria-label="Next Review">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M9 18l6-6-6-6"/>
            </svg>
          </button>
        </div>

       
      </div>
    </div>

    <!-- CAROUSEL -->
    <div class="relative overflow-hidden">
      <div id="carouselContainer" class="flex gap-6 overflow-x-auto scrollbar-hide pb-4" style="scrollbar-width: none; -ms-overflow-style: none">
        <!-- REVIEW 1 -->
        <div class="flex-shrink-0 w-full md:w-[calc(33.333%-16px)] bg-white border border-gray-100 p-8 rounded-sm flex flex-col justify-between min-h-[350px] shadow-sm hover:shadow-md transition-shadow">
          <!-- Star Rating -->
          <div class="mb-6 flex justify-center text-[#F9BF29] text-base tracking-widest">
            <span data-node="review_1_rating" data-node-type="text" data-node-label="Review 1 Rating" data-node-default="★★★★★">{{review_1_rating}}</span>
          </div>

          <!-- Review Text -->
          <div class="mb-8 text-center flex-grow flex items-center justify-center">
            <p class="text-gray-600 leading-relaxed font-sans text-sm">
              <span data-node="review_text_1" data-node-type="text" data-node-label="Review Text 1" data-node-default="Every picture felt alive. The session was relaxed, fun, and beautifully executed, these are the photos I'll treasure forever.">{{review_text_1}}</span>
            </p>
          </div>

          <!-- Footer -->
          <div class="flex items-end justify-between mt-auto pt-6 border-t border-gray-50/50">
            <!-- User Info -->
            <div class="flex items-center gap-4">
              <img data-node="review_1_avatar" data-node-type="file" data-node-label="Review 1 Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046223/seltrix/templates/home-appliances-template/user-1.png" src="{{review_1_avatar}}" class="w-12 h-12 rounded-full object-cover bg-gray-100 border border-gray-100" alt="User">
              <div class="text-left">
                <h4 class="font-bold text-[#1E293B] text-sm mb-0.5 font-sans">
                  <span data-node="review_name_1" data-node-type="text" data-node-label="Review Name 1" data-node-default="Emily Johnson">{{review_name_1}}</span>
                </h4>
                <p class="text-[10px] text-gray-400 uppercase tracking-wider font-sans">
                  <span data-node="review_location_1" data-node-type="text" data-node-label="Review Location 1" data-node-default="USA, California">{{review_location_1}}</span>
                </p>
              </div>
            </div>

            <!-- Quote Icon -->
            <div class="text-[#D0E5F5] transform translate-y-2">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"/>
              </svg>
            </div>
          </div>
        </div>

        <!-- REVIEW 2 -->
        <div class="flex-shrink-0 w-full md:w-[calc(33.333%-16px)] bg-white border border-gray-100 p-8 rounded-sm flex flex-col justify-between min-h-[350px] shadow-sm hover:shadow-md transition-shadow">
          <!-- Star Rating -->
          <div class="mb-6 flex justify-center text-[#F9BF29] text-base tracking-widest">
            <span data-node="review_2_rating" data-node-type="text" data-node-label="Review 2 Rating" data-node-default="★★★★★">{{review_2_rating}}</span>
          </div>

          <!-- Review Text -->
          <div class="mb-8 text-center flex-grow flex items-center justify-center">
            <p class="text-gray-600 leading-relaxed font-sans text-sm">
              <span data-node="review_text_2" data-node-type="text" data-node-label="Review Text 2" data-node-default="Impressive attention to detail. The brand shoot elevated our entire visual identity. Couldn’t have asked for better creativity.">{{review_text_2}}</span>
            </p>
          </div>

          <!-- Footer -->
          <div class="flex items-end justify-between mt-auto pt-6 border-t border-gray-50/50">
            <!-- User Info -->
            <div class="flex items-center gap-4">
              <img data-node="review_2_avatar" data-node-type="file" data-node-label="Review 2 Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046224/seltrix/templates/home-appliances-template/user-2.png" src="{{review_2_avatar}}" class="w-12 h-12 rounded-full object-cover bg-gray-100 border border-gray-100" alt="User">
              <div class="text-left">
                <h4 class="font-bold text-[#1E293B] text-sm mb-0.5 font-sans">
                  <span data-node="review_name_2" data-node-type="text" data-node-label="Review Name 2" data-node-default="John Smith">{{review_name_2}}</span>
                </h4>
                <p class="text-[10px] text-gray-400 uppercase tracking-wider font-sans">
                  <span data-node="review_location_2" data-node-type="text" data-node-label="Review Location 2" data-node-default="Italy">{{review_location_2}}</span>
                </p>
              </div>
            </div>

            <!-- Quote Icon -->
            <div class="text-[#D0E5F5] transform translate-y-2">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"/>
              </svg>
            </div>
          </div>
        </div>

        <!-- REVIEW 3 -->
        <div class="flex-shrink-0 w-full md:w-[calc(33.333%-16px)] bg-white border border-gray-100 p-8 rounded-sm flex flex-col justify-between min-h-[350px] shadow-sm hover:shadow-md transition-shadow">
          <!-- Star Rating -->
          <div class="mb-6 flex justify-center text-[#F9BF29] text-base tracking-widest">
            <span data-node="review_3_rating" data-node-type="text" data-node-label="Review 3 Rating" data-node-default="★★★★★">{{review_3_rating}}</span>
          </div>

          <!-- Review Text -->
          <div class="mb-8 text-center flex-grow flex items-center justify-center">
            <p class="text-gray-600 leading-relaxed font-sans text-sm">
              <span data-node="review_text_3" data-node-type="text" data-node-label="Review Text 3" data-node-default="Professional, patient, and incredibly talented. The results were beyond what I expected. Highly recommended!">{{review_text_3}}</span>
            </p>
          </div>

          <!-- Footer -->
          <div class="flex items-end justify-between mt-auto pt-6 border-t border-gray-50/50">
            <!-- User Info -->
            <div class="flex items-center gap-4">
              <img data-node="review_3_avatar" data-node-type="file" data-node-label="Review 3 Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046223/seltrix/templates/home-appliances-template/user-1.png" src="{{review_3_avatar}}" class="w-12 h-12 rounded-full object-cover bg-gray-100 border border-gray-100" alt="User">
              <div class="text-left">
                <h4 class="font-bold text-[#1E293B] text-sm mb-0.5 font-sans">
                  <span data-node="review_name_3" data-node-type="text" data-node-label="Review Name 3" data-node-default="Samantha Davis">{{review_name_3}}</span>
                </h4>
                <p class="text-[10px] text-gray-400 uppercase tracking-wider font-sans">
                  <span data-node="review_location_3" data-node-type="text" data-node-label="Review Location 3" data-node-default="Paris">{{review_location_3}}</span>
                </p>
              </div>
            </div>

            <!-- Quote Icon -->
            <div class="text-[#D0E5F5] transform translate-y-2">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"/>
              </svg>
            </div>
          </div>
        </div>

        <!-- REVIEW 4 (Hidden initially on some screens but scrollable) -->
        <div class="flex-shrink-0 w-full md:w-[calc(33.333%-16px)] bg-white border border-gray-100 p-8 rounded-sm flex flex-col justify-between min-h-[350px] shadow-sm hover:shadow-md transition-shadow">
          <!-- Star Rating -->
          <div class="mb-6 flex justify-center text-[#F9BF29] text-base tracking-widest">
            <span data-node="review_4_rating" data-node-type="text" data-node-label="Review 4 Rating" data-node-default="★★★★★">{{review_4_rating}}</span>
          </div>

          <!-- Review Text -->
          <div class="mb-8 text-center flex-grow flex items-center justify-center">
            <p class="text-gray-600 leading-relaxed font-sans text-sm">
              <span data-node="review_text_4" data-node-type="text" data-node-label="Review Text 4" data-node-default="Capturing moments that matter. The team made us feel comfortable and the photos are absolutely stunning.">{{review_text_4}}</span>
            </p>
          </div>

          <!-- Footer -->
          <div class="flex items-end justify-between mt-auto pt-6 border-t border-gray-50/50">
            <!-- User Info -->
            <div class="flex items-center gap-4">
              <img data-node="review_4_avatar" data-node-type="file" data-node-label="Review 4 Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046224/seltrix/templates/home-appliances-template/user-2.png" src="{{review_4_avatar}}" class="w-12 h-12 rounded-full object-cover bg-gray-100 border border-gray-100" alt="User">
              <div class="text-left">
                <h4 class="font-bold text-[#1E293B] text-sm mb-0.5 font-sans">
                  <span data-node="review_name_4" data-node-type="text" data-node-label="Review Name 4" data-node-default="Michael Brown">{{review_name_4}}</span>
                </h4>
                <p class="text-[10px] text-gray-400 uppercase tracking-wider font-sans">
                  <span data-node="review_location_4" data-node-type="text" data-node-label="Review Location 4" data-node-default="London">{{review_location_4}}</span>
                </p>
              </div>
            </div>

            <!-- Quote Icon -->
            <div class="text-[#D0E5F5] transform translate-y-2">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"/>
              </svg>
            </div>
          </div>
        </div>

        <!-- REVIEW 5 (Hidden initially on some screens but scrollable) -->
        <div class="flex-shrink-0 w-full md:w-[calc(33.333%-16px)] bg-white border border-gray-100 p-8 rounded-sm flex flex-col justify-between min-h-[350px] shadow-sm hover:shadow-md transition-shadow">
          <!-- Star Rating -->
          <div class="mb-6 flex justify-center text-[#F9BF29] text-base tracking-widest">
            <span data-node="review_5_rating" data-node-type="text" data-node-label="Review 5 Rating" data-node-default="★★★★">{{review_5_rating}}</span>
          </div>

          <!-- Review Text -->
          <div class="mb-8 text-center flex-grow flex items-center justify-center">
            <p class="text-gray-600 leading-relaxed font-sans text-sm">
              <span data-node="review_text_5" data-node-type="text" data-node-label="Review Text 5" data-node-default="Capturing moments that matter. The team made us feel comfortable and the photos are absolutely stunning.">{{review_text_5}}</span>
            </p>
          </div>

          <!-- Footer -->
          <div class="flex items-end justify-between mt-auto pt-6 border-t border-gray-50/50">
            <!-- User Info -->
            <div class="flex items-center gap-4">
              <img data-node="review_5_avatar" data-node-type="file" data-node-label="Review 5 Avatar" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1768046224/seltrix/templates/home-appliances-template/user-2.png" src="{{review_5_avatar}}" class="w-12 h-12 rounded-full object-cover bg-gray-100 border border-gray-100" alt="User">
              <div class="text-left">
                <h4 class="font-bold text-[#1E293B] text-sm mb-0.5 font-sans">
                  <span data-node="review_name_5" data-node-type="text" data-node-label="Review Name 5" data-node-default="Hassan Ali">{{review_name_5}}</span>
                </h4>
                <p class="text-[10px] text-gray-400 uppercase tracking-wider font-sans">
                  <span data-node="review_location_5" data-node-type="text" data-node-label="Review Location 5" data-node-default="New York">{{review_location_5}}</span>
                </p>
              </div>
            </div>

            <!-- Quote Icon -->
            <div class="text-[#D0E5F5] transform translate-y-2">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor">
                <path d="M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017C19.5693 16 20.017 15.5523 20.017 15V9C20.017 8.44772 19.5693 8 19.017 8H15.017C14.4647 8 14.017 8.44772 14.017 9V11C14.017 11.5523 13.5693 12 13.017 12H12.017V5H22.017V15C22.017 18.3137 19.3307 21 16.017 21H14.017ZM5.0166 21L5.0166 18C5.0166 16.8954 5.91203 16 7.0166 16H10.0166C10.5689 16 11.0166 15.5523 11.0166 15V9C11.0166 8.44772 10.5689 8 10.0166 8H6.0166C5.46432 8 5.0166 8.44772 5.0166 9V11C5.0166 11.5523 4.56889 12 4.0166 12H3.0166V5H13.0166V15C13.0166 18.3137 10.3303 21 7.0166 21H5.0166Z"/>
              </svg>
            </div>
          </div>
        </div>


      </div>
    </div>

  
  </div>

  
</section>