<section data-component-type="Features" class="w-full bg-black overflow-hidden" data-component-slug="mobile-launch-template-effortless-slider">
  <div class="w-full px-[16px] lg:px-[96px] py-24">
    <div id="featureSlider" class="relative max-w-[1728px] mx-auto select-none">
      <div id="sliderTrack" class="flex gap-12 cursor-grab">
        <div class="slide-item flex-shrink-0 w-[80%]">
          <div class="bg-[#060606] rounded-[16px] h-auto md:h-[720px] flex flex-col md:flex-row items-start md:items-center justify-between px-6 md:px-20 py-10 pb-0 md:py-0 overflow-hidden">
            <div class="w-full md:max-w-[560px] flex flex-col gap-6 md:h-full md:py-16 md:justify-between">
              <h2 class="font-['DM Sans'] font-medium text-[24px] sm:text-[32px] md:text-[48px] leading-[110%] text-white" data-node="slide_1_title" data-node-type="text" data-node-default="Effortless Performance That Feels Instant">
                {{slide_1_title}}
              </h2>

              <p class="font-['DM Sans'] text-[14px] sm:text-[16px] md:text-[24px] leading-[140%] md:leading-[100%] text-[#6D6D6D]" data-node="slide_1_desc" data-node-type="text" data-node-default="Smooth multitasking, fast app launches, and zero lag where it matters, whether you’re working, streaming, or switching between both.">
                {{slide_1_desc}}
              </p>
            </div>

            <img src="{{slide_1_image}}" class="feature-img feature-img-1 mt-8 md:mt-0" data-node="slide_1_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767161304/seltrix/templates/mobile-launch-template/effortless%20perf.webp">
          </div>
        </div>

        <div class="slide-item flex-shrink-0 w-[80%]">
          <div class="bg-[#060606] rounded-[16px] h-auto md:h-[720px] flex flex-col md:flex-row items-start md:items-center justify-between px-6 md:px-20 py-10 pb-0 md:py-0 overflow-hidden">
            <div class="w-full md:max-w-[560px] flex flex-col gap-6 md:h-full md:py-16 md:justify-between">
              <h2 class="font-['DM Sans'] font-medium text-[24px] sm:text-[32px] md:text-[48px] leading-[110%] text-white" data-node="slide_2_title" data-node-type="text" data-node-default="Smart Design, Built for Everyday Use">
                {{slide_2_title}}
              </h2>

              <p class="font-['DM Sans'] text-[14px] sm:text-[16px] md:text-[24px] leading-[140%] md:leading-[100%] text-[#6D6D6D]" data-node="slide_2_desc" data-node-type="text" data-node-default="Clean aesthetics meet practical ergonomics. Lightweight, durable, and comfortable in hand, no gimmicks, just thoughtful design that works.">
                {{slide_2_desc}}
              </p>
            </div>

            <img src="{{slide_2_image}}" class="feature-img feature-img-2 mt-8 md:mt-0" data-node="slide_2_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767161341/seltrix/templates/mobile-launch-template/smart-design.webp">
          </div>
        </div>

        <div class="slide-item flex-shrink-0 w-[80%]">
          <div class="bg-[#060606] rounded-[16px] h-auto md:h-[720px] flex flex-col md:flex-row items-start md:items-center justify-between px-6 md:px-20 py-10 pb-0 md:py-0 overflow-hidden">
            <div class="w-full md:max-w-[560px] flex flex-col gap-6 md:h-full md:py-16 md:justify-between">
             
              <h2 class="font-['DM Sans'] font-medium text-[24px] sm:text-[32px] md:text-[48px] leading-[110%] text-white" data-node="slide_3_title" data-node-type="text" data-node-default="Effortless Performance That Feels Instant">
                {{slide_3_title}}
              </h2>


              <p class="font-['DM Sans'] text-[14px] sm:text-[16px] md:text-[24px] leading-[140%] md:leading-[100%] text-[#6D6D6D]" data-node="slide_3_desc" data-node-type="text" data-node-default="Smooth multitasking, fast app launches, and zero lag where it matters, whether you’re working, streaming, or switching between both.">
                {{slide_3_desc}}
              </p>
            </div>

             <img src="{{slide_3_image}}" class="feature-img feature-img-2 mt-8 md:mt-0" data-node="slide_3_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767161341/seltrix/templates/mobile-launch-template/smart-design.webp">
          </div>
        </div>

        <div class="slide-item flex-shrink-0 w-[80%]">
          <div class="bg-[#060606] rounded-[16px] h-auto md:h-[720px] flex flex-col md:flex-row items-start md:items-center justify-between px-6 md:px-20 py-10 pb-0 md:py-0 overflow-hidden">
            <div class="w-full md:max-w-[560px] flex flex-col gap-6 md:h-full md:py-16 md:justify-between">
              <h2 class="font-['DM Sans'] font-medium text-[24px] sm:text-[32px] md:text-[48px] leading-[110%] text-white" data-node="slide_4_title" data-node-type="text" data-node-default="Effortless Performance That Feels Instant">
                {{slide_4_title}}
              </h2>

              <p class="font-['DM Sans'] text-[14px] sm:text-[16px] md:text-[24px] leading-[140%] md:leading-[100%] text-[#6D6D6D]" data-node="slide_4_desc" data-node-type="text" data-node-default="Clean aesthetics meet practical ergonomics. Lightweight, durable, and comfortable in hand, no gimmicks, just thoughtful design that works.">
                {{slide_4_desc}}
              </p>
            </div>
            <img src="{{slide_4_image}}" class="feature-img feature-img-2 mt-8 md:mt-0" data-node="slide_4_image" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767161341/seltrix/templates/mobile-launch-template/smart-design.webp">
          </div>
        </div>
      </div>

      <div class="flex justify-center gap-3 mt-10">
        <span class="indicator h-[4px] w-[32px] bg-white rounded-full"></span>
        <span class="indicator h-[4px] w-[12px] bg-[#444] rounded-full"></span>
        <span class="indicator h-[4px] w-[12px] bg-[#444] rounded-full"></span>
        <span class="indicator h-[4px] w-[12px] bg-[#444] rounded-full"></span>
      </div>
    </div>
  </div>

  





</section>