<section class="w-full bg-black mx-auto max-w-[90%] pt-5 md:pt-28 pb-0 md:pb-28 lg:pb-36 text-center" data-component-type="Content" data-component-slug="portfolio-template-services">
  <!-- LABEL -->
  <div class="inline-block py-3 px-6 md:py-3.5 md:px-8 font-['Cabin'] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] text-white rounded-[13px] bg-white/[0.07] backdrop-blur-[13px]" data-node="services_label" data-node-type="text" data-node-default="Services">
    {{services_label}}
  </div>

  <!-- HEADING -->
  <h2 class="font-['Cabin'] text-[28px] sm:text-[36px] md:text-[44px] lg:text-[56px] font-medium leading-[110%] md:leading-[110%] text-white mt-8 md:mt-10 mb-12 md:mb-20" data-node="services_heading" data-node-type="text" data-node-default="End-to-end Execution, grounded in strategy.">
    {{services_heading}}
  </h2>

  <!-- SERVICES GRID -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-7 justify-items-center">
    <!-- SERVICE 1 -->
    <div class="w-full h-auto flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]">
      <div class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0">
        <img data-node="service1_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362067/seltrix/templates/portfolio-template/Brand%20Strategy.svg" data-node-type="file" data-node-label="Service 1 Icon" src="{{service1_icon}}" class="w-12">
      </div>

      <div>
        <div class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[22px] lg:text-[24px] font-normal text-white text-left leading-[110%]" data-node="service1_title" data-node-type="text" data-node-default="Brand Strategy">
          {{service1_title}}
        </div>

        <div class="font-['Cabin'] text-[12px] sm:text-[13px] md:text-[14px] lg:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]" data-node="service1_desc" data-node-type="text" data-node-default="Positioning, messaging frameworks, and audience clarity.">
          {{service1_desc}}
        </div>
      </div>
    </div>

    <!-- SERVICE 2 -->
    <div class="w-full h-auto flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]">
      <div class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0">
        <img data-node="service2_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362123/seltrix/templates/portfolio-template/Web%20Copywriting.svg" data-node-type="file" data-node-label="Service 2 Icon" src="{{service2_icon}}" class="w-12">
      </div>

      <div>
        <div class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[22px] lg:text-[24px] font-normal text-white text-left leading-[110%]" data-node="service2_title" data-node-type="text" data-node-default="Web Copywriting">
          {{service2_title}}
        </div>

        <div class="font-['Cabin'] text-[12px] sm:text-[13px] md:text-[14px] lg:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]" data-node="service2_desc" data-node-type="text" data-node-default="Conversion-focused copy that shortens decision time.">
          {{service2_desc}}
        </div>
      </div>
    </div>

    <!-- SERVICE 3 -->
    <div class="w-full h-auto flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]">
      <div class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0">
        <img data-node="service3_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362075/seltrix/templates/portfolio-template/Content%20Marketing.svg" data-node-type="file" data-node-label="Service 3 Icon" src="{{service3_icon}}" class="w-12">
      </div>

      <div>
        <div class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[22px] lg:text-[24px] font-normal text-white text-left leading-[110%]" data-node="service3_title" data-node-type="text" data-node-default="Content Marketing">
          {{service3_title}}
        </div>

        <div class="font-['Cabin'] text-[12px] sm:text-[13px] md:text-[14px] lg:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]" data-node="service3_desc" data-node-type="text" data-node-default="Search-led content built to compound traffic and trust.">
          {{service3_desc}}
        </div>
      </div>
    </div>

    <!-- SERVICE 4 -->
    <div class="w-full h-auto flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]">
      <div class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0">
        <img data-node="service4_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362109/seltrix/templates/portfolio-template/Performance%20Marketing.svg" data-node-type="file" data-node-label="Service 4 Icon" src="{{service4_icon}}" class="w-12">
      </div>

      <div>
        <div class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[22px] lg:text-[24px] font-normal text-white text-left leading-[110%]" data-node="service4_title" data-node-type="text" data-node-default="Performance Marketing">
          {{service4_title}}
        </div>

        <div class="font-['Cabin'] text-[12px] sm:text-[13px] md:text-[14px] lg:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]" data-node="service4_desc" data-node-type="text" data-node-default="Paid campaigns optimized for ROI, not vanity metrics.">
          {{service4_desc}}
        </div>
      </div>
    </div>

    <!-- SERVICE 5 -->
    <div class="w-full h-auto flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]">
      <div class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0">
        <img data-node="service5_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362117/seltrix/templates/portfolio-template/Social%20Media%20Strategy.svg" data-node-type="file" data-node-label="Service 5 Icon" src="{{service5_icon}}" class="w-12">
      </div>

      <div>
        <div class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[22px] lg:text-[24px] font-normal text-white text-left leading-[110%]" data-node="service5_title" data-node-type="text" data-node-default="Social Media Strategy">
          {{service5_title}}
        </div>

        <div class="font-['Cabin'] text-[12px] sm:text-[13px] md:text-[14px] lg:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]" data-node="service5_desc" data-node-type="text" data-node-default="Content systems designed for reach, relevance, and recall.">
          {{service5_desc}}
        </div>
      </div>
    </div>

    <!-- SERVICE 6 -->
    <div class="w-full h-auto flex items-center gap-4 p-3 md:p-2.5 rounded-2xl bg-white/[0.08] backdrop-blur-[13px]">
      <div class="w-20 h-20 md:w-24 md:h-24 p-4 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center shrink-0">
        <img data-node="service6_icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362063/seltrix/templates/portfolio-template/Analytics_Optimization.svg" data-node-type="file" data-node-label="Service 6 Icon" src="{{service6_icon}}" class="w-12">
      </div>

      <div>
        <div class="font-['Cabin'] text-[18px] sm:text-[20px] md:text-[22px] lg:text-[24px] font-normal text-white text-left leading-[110%]" data-node="service6_title" data-node-type="text" data-node-default="Analytics & Optimization">
          {{service6_title}}
        </div>

        <div class="font-['Cabin'] text-[12px] sm:text-[13px] md:text-[14px] lg:text-[16px] text-[#7E7E7E] text-left mt-1 leading-[130%]" data-node="service6_desc" data-node-type="text" data-node-default="Tracking what matters and improving what converts.">
          {{service6_desc}}
        </div>
      </div>
    </div>
  </div>
</section>