<section data-component-type="Hero" class="relative min-h-[1120px] md:min-h-[980px] xl:min-h-[1080px] flex items-end" data-component-slug="ss-agriculture-template-about-hero">
    <!-- Background Image -->
    <div class="absolute inset-0 z-0">
        <img data-node="about_hero_bg" data-node-type="file" data-node-label="Hero Background Image" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767357449/seltrix/templates/ss-agriculture-template/about-hero-bg.jpg" src="{{about_hero_bg}}" alt="About Hero Background" class="w-full h-full object-cover">
        <!-- Dark Overlay -->
        <div class="absolute inset-0 bg-black/15"></div>
    </div>

    <!-- Content -->
    <div class="relative z-10 w-full px-4 sm:px-16 pb-12 lg:pb-16">
        <div class="max-w-2xl">
            <!-- Title -->
            <h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight mb-4 ">
                <span data-node="about_hero_title" data-node-type="textarea" data-node-label="Hero Title" data-node-default="Growing Excellence in Every Harvest">{{about_hero_title}}</span>
            </h1>

            <!-- Subtitle -->
            <p class="text-white/90 text-base lg:text-lg leading-relaxed max-w-xl font-['Chivo']">
                <span data-node="about_hero_subtitle" data-node-type="textarea" data-node-label="Hero Subtitle" data-node-default="We combine innovation, sustainable farming practices, and farmer-first expertise to create healthier fields and better food.">{{about_hero_subtitle}}</span>
            </p>
        </div>
    </div>
</section>