<section class="w-full py-0 max-w-[90%] mx-auto relative" data-component-type="Content" data-component-slug="portfolio-template-about-cta">
  <!-- CTA BOX -->
  <div class="bg-[#d3ff5b] rounded-2xl p-8 md:p-10 lg:p-20 relative overflow-visible grid grid-cols-1">
    <!-- LEFT CONTENT -->
    <div>
      <h2 class="font-['Cabin'] font-medium text-[#151515] leading-[95%] text-[28px] max-w-full mb-4
       sm:text-[40px] sm:leading-[110%] md:text-[48px] md:leading-[105%] md:mb-6
       lg:text-[50px] lg:leading-[105%] lg:max-w-full
       xl:text-[45px] xl:leading-[105%] xl:max-w-[570px]
       2xl:text-[65px] 2xl:leading-[105%] 2xl:max-w-[740px]" data-node="about_cta_title" data-node-type="text" data-node-label="CTA Title" data-node-default="Let's Build Something That Actually Converts">
        {{about_cta_title}}
      </h2>

      <p class="font-['Cabin'] font-normal text-[16px] leading-[130%] text-[#373737] max-w-full mb-6
       sm:text-[18px] sm:leading-[140%] md:text-[20px] md:leading-[140%] md:mb-8
       lg:text-[22px] lg:leading-[140%] lg:max-w-full
       xl:text-[17px] xl:leading-[140%] xl:max-w-[580px]
       2xl:text-[23px] 2xl:leading-[140%] 2xl:max-w-[740px]" data-node="about_cta_description" data-node-type="textarea" data-node-label="CTA Description" data-node-default="Whether you need clarity in brand positioning, better-performing content, or scalable marketing systems—we're ready to help you build it properly.">
        {{about_cta_description}}
      </p>

      <a class="bg-black w-fit h-fit rounded-xl bg-[#d3ff5b] p-[7.5px_13.5px] md:p-[8.5px_14.5px] flex justify-center items-center gap-3 font-['Cabin'] text-[15px] md:text-xl lg:text-[22px] xl:text-2xl transition-opacity duration-300 hover:opacity-85" data-node="about_cta_button_link" data-node-type="page_links" data-node-label="CTA Button Link" data-node-default="{{about_cta_button_link}}">
        <span data-node="about_cta_button_text" data-node-type="text" data-node-label="CTA Button Text" data-node-default="Get your free consultation">
          {{about_cta_button_text}}
        </span>

        <img src="{{about_cta_button_icon}}" class="h-auto" data-node="about_cta_button_icon" data-node-type="file" data-node-label="CTA Button Arrow Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362126/seltrix/templates/portfolio-template/about-arrow.svg">
      </a>
    </div>

    <!-- RIGHT IMAGE — FLOATING OVERLAP -->
    <img src="{{about_cta_image}}" class="absolute right-20 top-1/3 -translate-y-1/2 w-[736px] h-auto object-contain hidden xl:block 2xl:w-[620px] 2xl:right-[40px] xl:w-[520px] xl:right-[40px]" alt="CTA Image" data-node="about_cta_image" data-node-type="file" data-node-label="CTA Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879960/seltrix/templates/portfolio-template/vacuum.webp">
    <!-- Mobile/Tablet Image -->
    <img src="{{about_cta_image_mobile}}" class="w-full max-w-[420px] sm:max-w-[520px] mt-8 mx-auto block xl:hidden" alt="CTA Image" data-node="about_cta_image_mobile" data-node-type="file" data-node-label="CTA Image Mobile" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879960/seltrix/templates/portfolio-template/vacuum.webp">
  </div>
</section>