<section data-component-type="Hero" class=" m-[2%]" data-component-slug="ss-technology-template-second_hero">

    <div class="bg-[#E2FC80] rounded-[40px] relative overflow-hidden text-center flex flex-col
     justify-center items-center min-h-[1000px] md:min-h-[900px] lg:min-h-[800px] xl:min-h-[800px]">
        
       

  <div class=" hidden md:block absolute top-0 left-0 -translate-y-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full border-[60px] border-[#96D649]/20 pointer-events-none"></div>
  <div class="hidden md:block absolute top-0 right-0 -translate-y-1/2 translate-x-1/3 w-[500px] h-[500px] rounded-full border-[50px] border-[#96D649]/20 pointer-events-none"></div>


        <!-- Content Container -->
        <div class="relative z-20 max-w-[90%] mx-auto flex flex-col items-center">
            <!-- Badge -->
            <div class="inline-flex items-center bg-white rounded-full px-5 py-2.5 mb-8 shadow-sm">
                 <img src="{{hero2_badge_icon}}" data-node="hero2_badge_icon" data-node-type="file" data-node-label="Badge Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956630/seltrix/templates/ss-technology-template/bagfe.png" alt="icon" class="w-5 h-5 mr-2.5">
                <span class="text-[#003D33] font-bold text-sm tracking-wide" data-node="hero2_badge_text" data-node-type="text" data-node-default="Experience Seamless Banking">
                    {{hero2_badge_text}}
                </span>
            </div>

            <!-- Heading -->
            <h1 class="text-[#003D33] font-bold lg:max-w-[70%] text-4xl md:text-6xl lg:text-[76px] leading-[1.1] mb-8 tracking-tight" data-node="hero2_heading" data-node-type="textarea" data-node-default="Finance That Works the Way You Do">
                {{hero2_heading}}
            </h1>

            <!-- Description -->
            <p class="text-[#1A4D43] text-lg md:text-xl max-w-2xl mx-auto mb-10 leading-relaxed font-medium" data-node="hero2_description" data-node-type="textarea" data-node-default="Built for modern users and growing organizations, we simplified money management and delivers real control over finances">
                {{hero2_description}}
            </p>

            <!-- CTA -->
            <div class="mb-12">
                <a href="{{hero2_cta_link}}" data-node="hero2_cta_link" data-node-type="text" data-node-default="#" class="inline-block">
                    <span class="bg-[#003D33] text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-[#002a23] transition-all shadow-lg hover:shadow-xl transform hover:-translate-y-1 block" data-node="hero2_cta_text" data-node-type="text" data-node-default="Start Your Free Account">
                        {{hero2_cta_text}}
                    </span>
                </a>
            </div>

            <!-- Social Proof -->
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16 md:mb-24">
                <div class="flex -space-x-3">
                    <img src="{{hero2_avatar1}}" data-node="hero2_avatar1" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956679/seltrix/templates/ss-technology-template/p1.jpg" class="w-12 h-12 rounded-full border-[3px] border-[#D3F976]" alt="User">
                    <img src="{{hero2_avatar2}}" data-node="hero2_avatar2" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956681/seltrix/templates/ss-technology-template/p2.jpg" class="w-12 h-12 rounded-full border-[3px] border-[#D3F976]" alt="User">
                    <img src="{{hero2_avatar3}}" data-node="hero2_avatar3" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956683/seltrix/templates/ss-technology-template/p3.jpg" class="w-12 h-12 rounded-full border-[3px] border-[#D3F976]" alt="User">
                    <img src="{{hero2_avatar4}}" data-node="hero2_avatar4" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956686/seltrix/templates/ss-technology-template/p4.jpg" class="w-12 h-12 rounded-full border-[3px] border-[#D3F976]" alt="User">
                     <img src="{{hero2_avatar5}}" data-node="hero2_avatar5" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956687/seltrix/templates/ss-technology-template/p5.jpg" class="w-12 h-12 rounded-full border-[3px] border-[#D3F976]" alt="User">
                </div>
                <div class="text-left ml-2">
                    <div class="flex items-center text-[#003D33] font-bold text-base mb-0.5">
                        <span data-node="hero2_rating_val" data-node-type="text" data-node-default="4.5/5">4.5/5</span>
                            <img src="{{hero_rating_icon}}" data-node="hero_rating_icon" data-node-type="file" data-node-label="star Icon" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956720/seltrix/templates/ss-technology-template/star.png" alt="icon" class="w-5 h-5 ml-2.5">
                    </div>
                    <div class="text-[#003D33] text-sm font-semibold opacity-90" data-node="hero2_trust_text" data-node-type="text" data-node-default="1m+ Users Trust Our Product">
                        {{hero2_trust_text}}
                    </div>
                </div>
            </div>
            
             <!-- Bottom Features Row (Centered inside content) -->
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12 text-left w-full lg:w-[50%] border-t border-[#003D33]/10 pt-8 mt-auto px-4 md:px-0">
                <div class="pl-4 border-l-2 border-[#003D33]">
                    <h4 class="text-[#003D33] font-bold text-lg leading-tight" style="max-width: 150px;" data-node="hero2_feat1_title" data-node-type="text" data-node-default="Secure by solid Design">
                        {{hero2_feat1_title}}
                    </h4>
                </div>
                <div class="pl-4 border-l-2 border-[#003D33]">
                    <h4 class="text-[#003D33] font-bold text-lg leading-tight" style="max-width: 150px;" data-node="hero2_feat2_title" data-node-type="text" data-node-default="Built for future Scaling">
                        {{hero2_feat2_title}}
                    </h4>
                </div>
                <div class="pl-4 border-l-2 border-[#003D33]">
                    <h4 class="text-[#003D33] font-bold text-lg leading-tight" style="max-width: 150px;" data-node="hero2_feat3_title" data-node-type="text" data-node-default="Always Compliance Ready">
                        {{hero2_feat3_title}}
                    </h4>
                </div>
            </div>

        </div>


        <!-- Phone Mockups (Absolute positioned to frame content) -->
        <div class="hidden xl:block absolute bottom-[0] left-[40px] w-[380px]   z-10 pointer-events-none">
            <img src="{{hero2_phone_left}}" data-node="hero2_phone_left" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956701/seltrix/templates/ss-technology-template/sec1.png" alt="App Interface" class="xl:w-[350px] h-auto drop-shadow-2xl">
        </div>

        <div class="hidden xl:block absolute bottom-[0] right-[10px]  w-[380px]  z-10 pointer-events-none">
             <img src="{{hero2_phone_right}}" data-node="hero2_phone_right" data-node-type="file" data-node-default="https://res.cloudinary.com/duukclzsd/image/upload/v1767956703/seltrix/templates/ss-technology-template/sec2.png" alt="App Interface" class="xl:w-[350px] h-auto drop-shadow-2xl">
        </div>

    </div>
</section>