<section class="w-full max-w-[90%] mx-auto py-0 md:py-32 lg:py-0 pb-16" data-component-type="Content" data-component-slug="portfolio-template-services-service">
  <!-- TAG -->
  <div class="w-full flex justify-center mb-8">
    <div class="inline-block py-2.5 px-5 md:px-6 rounded-xl font-['Cabin'] text-[24px] font-normal text-white bg-[rgba(10,10,10,0.65)] backdrop-blur-[18px] border border-white/[0.12]" data-node="services_top_tag" data-node-type="text" data-node-default="Our Services">
      {{services_top_tag}}
    </div>
  </div>

  <!-- TITLE -->
  <h2 class="font-['Cabin'] text-[28px] md:text-[56px] font-medium text-center leading-[100%] text-white" data-node="services_title" data-node-type="text" data-node-default="End-to-end marketing services grounded in strategy.">
    {{services_title}}
  </h2>

  <!-- DESCRIPTION -->
  <p class="max-w-[780px] mx-auto my-6 mb-10 text-center font-['Cabin'] text-[20px] md:text-[24px] font-normal text-[#7E7E7E] leading-[130%]" data-node="services_description" data-node-type="textarea" data-node-default="Our services are designed to move audiences from attention to action. Each service can stand alone or combine into a full growth engine.">
    {{services_description}}
  </p>

  <!-- CTA -->
  <a class="mx-auto mb-20 w-fit bg-[#D3FF5B] rounded-xl font-['Cabin'] font-medium text-black flex items-center justify-center gap-2 px-4 py-2 md:px-5 md:py-2.5 text-[15px] md:text-xl lg:text-[22px] xl:text-2xl transition-opacity duration-300 hover:opacity-85" data-node="services_cta_link" data-node-type="page_links" data-node-default="#" data-node-label="Services CTA Link" href="{{services_cta_link}}">
    <span data-node="services_cta_text" data-node-type="text" data-node-default="Request a Strategy Call" data-node-label="Services CTA Text">
      {{services_cta_text}}
    </span>
    <img src="https://res.cloudinary.com/duukclzsd/image/upload/v1767362090/seltrix/templates/portfolio-template/Hero%20btn%20arrw.svg" width="36">
  </a>

  <!-- ROW 1 -->
  <div class="w-full flex flex-col xl:flex-row justify-center gap-6 mb-6">
    <!-- CARD 1 -->
    <div class="w-full xl:w-[563px] h-auto xl:h-[528px] p-6 md:p-8 rounded-2xl border border-white/[0.12] bg-white/[0.05] backdrop-blur-[22px] flex flex-col justify-start gap-5 relative overflow-hidden">
      <div class="w-20 h-20 md:w-24 md:h-24 p-5 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center">
        <img src="{{service_1_icon}}" class="w-10 h-10 md:w-12 md:h-12" data-node="service_1_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362067/seltrix/templates/portfolio-template/Brand%20Strategy.svg">
      </div>

      <div class="mt-3 font-['Cabin'] text-[24px] md:text-[28px] lg:text-[36px] font-medium text-white" data-node="service_1_title" data-node-type="text" data-node-default="Brand Strategy">
        {{service_1_title}}
      </div>

      <p class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[130%] mt-auto" data-node="service_1_desc" data-node-type="textarea" data-node-default="We define what your brand stands for, who it's speaking to, and why it should be chosen. This aligns messaging, visuals, and growth decisions across every channel.">
        {{service_1_desc}}
      </p>
    </div>

    <!-- CARD 2 -->
    <div class="w-full xl:w-[563px] h-auto xl:h-[528px] p-6 md:p-8 rounded-2xl border border-white/[0.12] bg-white/[0.05] backdrop-blur-[22px] flex flex-col justify-start gap-5 relative overflow-hidden">
      <div class="w-20 h-20 md:w-24 md:h-24 p-5 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center">
        <img src="{{service_2_icon}}" class="w-10 h-10 md:w-12 md:h-12" data-node="service_2_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362123/seltrix/templates/portfolio-template/Web%20Copywriting.svg">
      </div>

      <div class="mt-3 font-['Cabin'] text-[24px] md:text-[28px] lg:text-[36px] font-medium text-white" data-node="service_2_title" data-node-type="text" data-node-default="Web Copywriting">
        {{service_2_title}}
      </div>

      <p class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[130%] mt-auto" data-node="service_2_desc" data-node-type="textarea" data-node-default="Clear, friction-free messaging built to guide users toward action and shorten buying decisions.">
        {{service_2_desc}}
      </p>
    </div>

    <!-- CARD 3 -->
    <div class="w-full xl:w-[563px] h-auto xl:h-[528px] p-6 md:p-8 rounded-2xl border border-white/[0.12] bg-white/[0.05] backdrop-blur-[22px] flex flex-col justify-start gap-5 relative overflow-hidden">
      <div class="w-20 h-20 md:w-24 md:h-24 p-5 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center">
        <img src="{{service_3_icon}}" class="w-10 h-10 md:w-12 md:h-12" data-node="service_3_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362112/seltrix/templates/portfolio-template/SEO.svg">
      </div>

      <div class="mt-3 font-['Cabin'] text-[24px] md:text-[28px] lg:text-[36px] font-medium text-white" data-node="service_3_title" data-node-type="text" data-node-default="SEO & Content Marketing">
        {{service_3_title}}
      </div>

      <p class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[130%] mt-auto" data-node="service_3_desc" data-node-type="textarea" data-node-default="Search-driven strategy focused on intent, authority building, and sustainable organic traffic.">
        {{service_3_desc}}
      </p>
    </div>
  </div>

  <!-- ROW 2 -->
  <div class="w-full flex flex-col xl:flex-row justify-center gap-6">
    <!-- CARD 4 -->
    <div class="w-full xl:w-[854px] h-auto xl:h-[528px] p-6 md:p-8 rounded-2xl border border-white/[0.12] bg-white/[0.05] backdrop-blur-[22px] flex flex-col justify-start gap-5 relative overflow-hidden">
      <div class="w-20 h-20 md:w-24 md:h-24 p-5 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center">
        <img src="{{service_4_icon}}" class="w-10 h-10 md:w-12 md:h-12" data-node="service_4_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362109/seltrix/templates/portfolio-template/Performance%20Marketing.svg">
      </div>

      <div class="mt-3 font-['Cabin'] text-[24px] md:text-[28px] lg:text-[36px] font-medium text-white" data-node="service_4_title" data-node-type="text" data-node-default="Performance Marketing">
        {{service_4_title}}
      </div>

      <p class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[130%] mt-auto" data-node="service_4_desc" data-node-type="textarea" data-node-default="Paid campaigns optimized for conversions, cost efficiency, and scalable revenue outcomes.">
        {{service_4_desc}}
      </p>
    </div>

    <!-- CARD 5 -->
    <div class="w-full xl:w-[854px] h-auto xl:h-[528px] p-6 md:p-8 rounded-2xl border border-white/[0.12] bg-white/[0.05] backdrop-blur-[22px] flex flex-col justify-start gap-5 relative overflow-hidden">
      <div class="w-20 h-20 md:w-24 md:h-24 p-5 md:p-6 rounded-xl bg-white/[0.15] flex items-center justify-center">
        <img src="{{service_5_icon}}" class="w-10 h-10 md:w-12 md:h-12" data-node="service_5_icon" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362117/seltrix/templates/portfolio-template/Social%20Media%20Strategy.svg">
      </div>

      <div class="mt-3 font-['Cabin'] text-[24px] md:text-[28px] lg:text-[36px] font-medium text-white" data-node="service_5_title" data-node-type="text" data-node-default="Social Media Strategy">
        {{service_5_title}}
      </div>

      <p class="font-['Cabin'] text-[18px] md:text-[20px] lg:text-[24px] font-normal text-[#7E7E7E] leading-[130%] mt-auto" data-node="service_5_desc" data-node-type="textarea" data-node-default="Platform-specific content systems designed for reach, relevance, and brand recall.">
        {{service_5_desc}}
      </p>
    </div>
  </div>
</section>