<section data-component-type="Hero" class="relative min-h-[1120px] md:min-h-[980px] xl:min-h-[680px] overflow-visible" data-component-slug="ss-agriculture-template-services-hero">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Charis+SIL:ital,wght@0,400;0,700;1,400;1,700&family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  <!-- Background Image -->
  <div class="absolute inset-0">
    <img data-node="services_hero_bg" data-node-type="file" data-node-label="Hero Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346791/seltrix/templates/ss-agriculture-template/services-hero-bg.jpg" src="{{services_hero_bg}}" alt="Agriculture landscape" class="w-full h-full object-cover">
    <!-- Overlay for better text readability -->
    <div class="absolute inset-0 bg-gradient-to-r from-black/50 via-black/30 to-transparent"></div>
  </div>

  <!-- Content Container -->
  <div class="relative z-10 px-4 sm:px-16 py-8 sm:py-16 lg:py-24 flex flex-col justify-start">
    <!-- Main Content -->
    <div class="max-w-2xl">
      <!-- Subtitle Badge -->
      <p class="text-white/80 text-sm tracking-widest uppercase mb-6 font-['Manrope']">
        <span data-node="services_subtitle" data-node-type="text" data-node-label="Subtitle Text" data-node-default="WELCOME TO AGRICS FARMING">WELCOME TO AGRICS FARMING</span>
      </p>

      <!-- Main Title -->
      <h1 class="relative text-5xl lg:text-6xl font-bold text-white leading-tight mb-6 font-['Bricolage_Grotesque']">
        <span data-node="services_title_1" data-node-type="text" data-node-label="Title Part 1" data-node-default="Agriculture">Agriculture</span>
        <span class="text-[#D97706]"> & </span>
        <br>
        <span class="relative">
          <span data-node="services_title_2" data-node-type="text" data-node-label="Title Part 2" data-node-default="Eco Farming">Eco Farming
            <!-- Leaf decoration -->
          </span>
          <span class="absolute top-0 -right-8 h-10 w-10">
            <svg width="92" height="55" viewBox="0 0 92 75" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <rect width="92" height="75" fill="url(#pattern0_836_11130)"/>
              <defs>
                <pattern id="pattern0_836_11130" patternContentUnits="objectBoundingBox" width="1" height="1">
                  <use xlink:href="#image0_836_11130" transform="scale(0.0108696 0.0133333)"/>
                </pattern>
                <image id="image0_836_11130" width="92" height="75" preserveAspectRatio="none" xlink:href="data:image/png;base64,[BLOB]"/>
              </defs>
            </svg>
          </span>
        </span>
      </h1>

      <!-- Description -->
      <p class="text-white/80 text-base lg:text-lg leading-relaxed mb-8 max-w-lg font-['Manrope']">
        <span data-node="services_description" data-node-type="textarea" data-node-label="Description" data-node-default="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.">Lorem
          ipsum dolor sit amet, consectetur adipiscing elit. Ut elit
          tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</span>
      </p>

      <!-- CTA Button -->
      {{#if show_services_cta}}
      <div class="flex items-center gap-4">
        <a data-node="services_cta_link" data-node-type="page_links" data-node-label="CTA Link" data-node-default="contact" href="{{services_cta_link}}" class="inline-block bg-[#214B3D] text-white px-8 py-4 text-base font-medium hover:bg-[#b86506] transition-colors rounded-full font-['Chivo']">
          <span data-node="services_cta_text" data-node-type="text" data-node-label="CTA Text" data-node-default="Discover More">Discover More</span>
        </a>
        <!-- Decorative wheat icon -->
        <svg class="w-16 h-10" viewBox="0 0 64 40" fill="none">
          <path d="M8 32C12 28 16 26 20 26C24 26 28 28 32 32" stroke="#D97706" stroke-width="2" stroke-linecap="round"/>
          <ellipse cx="14" cy="20" rx="3" ry="6" fill="#D97706" transform="rotate(-30 14 20)"/>
          <ellipse cx="20" cy="16" rx="3" ry="6" fill="#D97706" transform="rotate(-15 20 16)"/>
          <ellipse cx="26" cy="14" rx="3" ry="6" fill="#D97706"/>
          <ellipse cx="32" cy="16" rx="3" ry="6" fill="#D97706" transform="rotate(15 32 16)"/>
          <ellipse cx="38" cy="20" rx="3" ry="6" fill="#D97706" transform="rotate(30 38 20)"/>
        </svg>
      </div>
      {{/if}}
    </div>

    <!-- Decorative Circle (right side) -->
    <div class="hidden lg:block absolute right-32 top-1/3">
      <div class="w-24 h-24 border-2 border-white/50 rounded-full"></div>
    </div>
  </div>
  <div class="absolute h-fit xl:h-32 bg-white z-1 bottom-0 left-0 right-0">
    <!-- Feature Cards -->
    <div class="w-full relative -top-28 left-0 mt-8 lg:mt-0 -mb-16 lg:mb-0 z-10 p-4">
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 max-w-4xl mx-auto">
        <!-- Feature Card 1 -->
        {{#if show_service_card_1}}
        <div class="bg-white rounded-xl p-6 shadow-lg text-center">
          <p class="text-[#D97706] text-sm font-medium mb-3 font-['Manrope']">
            <span data-node="service_card_1_label" data-node-type="text" data-node-label="Card 1 Label" data-node-default="Feature 01">Feature 01</span>
          </p>
          <h3 class="text-[#2a2622] text-lg font-bold mb-4 font-['Bricolage_Grotesque']">
            <span data-node="service_card_1_title" data-node-type="text" data-node-label="Card 1 Title" data-node-default="We're using a new technology">We're using a new technology</span>
          </h3>
          <div class="flex justify-center">
            <div class="w-24 h-20 rounded-xl overflow-hidden">
              <img data-node="service_card_1_image" data-node-type="file" data-node-label="Card 1 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346788/seltrix/templates/ss-agriculture-template/service-card-1-image.png" src="{{service_card_1_image}}" alt="Feature 1" class="w-full h-full object-cover">
            </div>
          </div>
        </div>
        {{/if}}

        <!-- Feature Card 2 -->
        {{#if show_service_card_2}}
        <div class="bg-white rounded-xl p-6 shadow-lg text-center">
          <p class="text-[#D97706] text-sm font-medium mb-3 font-['Manrope']">
            <span data-node="service_card_2_label" data-node-type="text" data-node-label="Card 2 Label" data-node-default="Feature 02">Feature 02</span>
          </p>
          <h3 class="text-[#2a2622] text-lg font-bold mb-4 font-['Bricolage_Grotesque']">
            <span data-node="service_card_2_title" data-node-type="text" data-node-label="Card 2 Title" data-node-default="Good in smart organic services">Good in smart organic services</span>
          </h3>
          <div class="flex justify-center">
            <div class="w-24 h-20 rounded-xl overflow-hidden">
              <img data-node="service_card_2_image" data-node-type="file" data-node-label="Card 2 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346789/seltrix/templates/ss-agriculture-template/service-card-2-image.png" src="{{service_card_2_image}}" alt="Feature 2" class="w-full h-full object-cover">
            </div>
          </div>
        </div>
        {{/if}}

        <!-- Feature Card 3 -->
        {{#if show_service_card_3}}
        <div class="bg-white rounded-xl p-6 shadow-lg text-center sm:col-span-2 lg:col-span-1 sm:w-[calc((100%-1rem)/2)] lg:w-full sm:mx-auto">
          <p class="text-[#D97706] text-sm font-medium mb-3 font-['Manrope']">
            <span data-node="service_card_3_label" data-node-type="text" data-node-label="Card 3 Label" data-node-default="Feature 03">Feature 03</span>
          </p>
          <h3 class="text-[#2a2622] text-lg font-bold mb-4 font-['Bricolage_Grotesque']">
            <span data-node="service_card_3_title" data-node-type="text" data-node-label="Card 3 Title" data-node-default="Reforming in the systems">Reforming in the systems</span>
          </h3>
          <div class="flex justify-center">
            <div class="w-24 h-20 rounded-xl overflow-hidden">
              <img data-node="service_card_3_image" data-node-type="file" data-node-label="Card 3 Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767346790/seltrix/templates/ss-agriculture-template/service-card-3-image.png" src="{{service_card_3_image}}" alt="Feature 3" class="w-full h-full object-cover">
            </div>
          </div>
        </div>
        {{/if}}
      </div>
    </div>
  </div>
</section>