<section class="w-full py-24 md:py-32 lg:py-40 max-w-[90%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-20 items-center relative overflow-hidden bg-cover bg-center bg-no-repeat" style="background-image: url('./assets/about-background.png')" data-component-type="Content" data-component-slug="portfolio-template-about-hero">
  <!-- LEFT CONTENT -->
  <div class="relative z-[2]">
    <div class="inline-block py-2.5 px-6 font-['Cabin'] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-normal text-white rounded-xl bg-white/[0.07] border border-white/[0.12] backdrop-blur-[18px] mb-6" data-node="about_hero_tag" data-node-type="text" data-node-label="About Hero Tag" data-node-default="Our works">
      {{about_hero_tag}}
    </div>

    <h1 class="font-['Cabin'] text-[28px] sm:text-[36px] md:text-[48px] lg:text-[64px] font-medium leading-[105%] md:leading-[100%] text-white mb-6" data-node="about_hero_title" data-node-type="text" data-node-label="About Hero Title" data-node-default="We build high performance working systems.">
      {{about_hero_title}}
    </h1>

    <p class="font-['Cabin'] text-[16px] sm:text-[18px] md:text-[20px] lg:text-[24px] font-normal leading-[140%] text-[#7e7e7e] max-w-[640px] mb-8" data-node="about_hero_desc" data-node-type="textarea" data-node-label="About Hero Description" data-node-default="A team focused on structure, strategy, and measurable growth that helps brands cut through noise with clear positioning, high-impact copy, and performance-driven marketing systems. Everything we build is designed to convert, scale, and last.">
      {{about_hero_desc}}
    </p>

    <a class="w-fit h-12 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 text-black transition-opacity duration-300 hover:opacity-85" data-node="about_hero_cta_link" data-node-type="page_links" data-node-label="About Hero CTA Link" data-node-default="{{about_hero_cta_link}}">
      <span data-node="about_hero_cta_text" data-node-type="text" data-node-label="About Hero CTA Text" data-node-default="Get your free consultation">
        {{about_hero_cta_text}}
      </span>

      <img src="{{about_hero_cta_arrow}}" class="h-auto" data-node="about_hero_cta_arrow" data-node-type="file" data-node-label="CTA Arrow Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767362090/seltrix/templates/portfolio-template/Hero%20btn%20arrw.svg">
    </a>
  </div>

  <!-- RIGHT IMAGE -->
  <div class="relative z-[2]">
    <img src="{{about_hero_image}}" class="w-full rounded-xl object-cover" alt="About Hero Image" data-node="about_hero_image" data-node-type="file" data-node-label="About Hero Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1765879894/seltrix/templates/portfolio-template/Rectangle.webp">
  </div>
</section>