<div>
<video
    class="hover-video w-full h-auto object-cover cursor-pointer"
    loop
    muted
    playsinline
    webkit-playsinline
    preload="metadata"
>
    <source
        src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/ef-about/Ande_ka_funda.mp4"
        type="video/mp4"
    >
</video>




    <section class="mx-auto px-6 lg:px-20 py-16 lg:py-24">

        <!-- TOP CONTENT -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 items-start">

            <!-- LEFT TITLE -->
            <div class="lg:col-span-4">
                <h2 class="text-[22px] sm:text-[34px] lg:text-[30px]
                       font-bold leading-tight">
                    Built on Trust. <br>
                    Powered for What’s Next.
                </h2>
            </div>
            <div class="lg:col-span-2">
            </div>
            <!-- RIGHT DESCRIPTION -->
            <div class="lg:col-span-6">
                
              <p class="text-justify text-[16px] md:text-[17px] lg:text-[18px] leading-relaxed text-black/80 max-w-[800px]">
                    At Eggfirst, advertising isn’t just what we do: it’s what drives us. 
                    Every campaign reflects our love for the craft and respect for our partners, 
                    making our 21 saal ka safar suhana aur campaigns hamesha yaadgaar.
                    <br>
                    As a creative advertising agency and branding and advertising agency,
                    we’ve delivered 1,500+ campaigns for 180+ semi-urban and rural brands.
                    <br>

                    Rooted in storytelling and powered for the digital era,
                    we stand by one belief:
                    
                        We are “As Good As Our Word.”
                    
                </p>

            </div>

        </div>

        <!-- IMAGE GRID -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 mt-14 lg:mt-20">

            <!-- IMAGE 1 -->
            <div class="overflow-hidden">
                <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/ef-about/img1.JPG" alt="Team Office"
                    class="w-full h-[220px] lg:h-[260px] object-cover">
            </div>

            <!-- IMAGE 2 -->
            <div class="overflow-hidden">
                <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/ef-about/img2.JPG" alt="Team Event"
                    class="w-full h-[220px] lg:h-[260px] object-cover">
            </div>

            <!-- IMAGE 3 -->
            <div class="overflow-hidden">
                <img src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/ef-about/img3.jpg" alt="Office Culture"
                    class="w-full h-[220px] lg:h-[260px] object-cover">
            </div>

        </div>

    </section>



    <section class="bg-[#f58220] w-full">

        <!-- CONTAINER -->
        <div class="mx-auto px-6 lg:px-16 pt-12 pb-10">

            <!-- HEADER -->
            <div class="flex flex-col lg:flex-row justify-between items-start gap-6 mb-8">

                <!-- LEFT TITLE -->
                <h2
                    class="text-white font-extrabold
                       text-[28px] sm:text-[34px] lg:text-[36px]
                       leading-tight tracking-wide">
                    Bharat-first <br> Approach
                </h2>

                <!-- RIGHT TEXT -->
                <p class="text-[16px] md:text-[17px] lg:text-[18px] text-white/90 max-w-lg text-justify">
                    By understanding Bharat deeply, we help brands connect effectively, communicate clearly and grow meaningfully. 
                    From semi-urban areas to rural heartlands, our ideas are rooted in culture, language and real consumer truths, 
                    because growth in Bharat begins with genuine understanding.
                </p>
            </div>

            <!-- IMAGE BLOCK -->
           <!-- IMAGE BLOCK -->
<div class="relative w-full overflow-hidden">

  <video
    class="hover-video w-full h-auto object-cover cursor-pointer"
    loop
    playsinline
    muted
    preload="auto"
>
    <source
        src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/ef-about/Events%20Highlights%202025%20V3%20Low%20Res.mp4"
        type="video/mp4"
    >
</video>


</div>

           
 <!-- WHAT SETS US APART -->
            <div class="mt-14">

                <!-- TITLE -->
                <h3 class="text-white font-semibold capitalize text-[28px] py-6">
                    What sets us apart
                </h3>

                <!-- LIST -->
                <div class="divide-y divide-white/40">

                    <!-- ITEM 01 -->
                    <div class="grid grid-cols-12 gap-4 py-9 items-center">

                        <!-- NUMBER -->
                        <div class="col-span-12 lg:col-span-1 text-white/80 text-[18px]">
                            01
                        </div>


                        <!-- TITLE -->
                        <div class="col-span-12 lg:col-span-5">
                            <h4
                                class="text-white font-bold uppercase
                   text-[28px] lg:text-[32px]
                   leading-tight">
                                Creative Excellence
                            </h4>
                        </div>

                        <!-- DESCRIPTION -->
                        <div class="col-span-12 lg:col-span-6">
                            <p class="text-white/90 text-[16px] md:text-[17px] lg:text-[18px]">
                                We don’t think inside boxes. We break them, rebuild them and turn ideas into impact.
                            </p>

                        </div>

                    </div>


                    <!-- ITEM 02 -->
                    <div class="grid grid-cols-12 gap-4 py-9 items-center">
                        <div class="col-span-12 lg:col-span-1 text-white/80 text-[18px]">02</div>

                        <div class="col-span-12 lg:col-span-5">
                            <h4 class="text-white font-bold uppercase text-[28px] lg:text-[32px] leading-tight">
                                Fuelled by Researched Insights
                            </h4>
                        </div>

                        <div class="col-span-12 lg:col-span-6">
                            <p class="text-white/90 text-[16px] md:text-[17px] lg:text-[18px]">
                                Every bold idea we launch is backed by on-ground truths
                                and real consumer insight.
                            </p>
                        </div>
                    </div>

                    <!-- ITEM 03 -->
                    <div class="grid grid-cols-12 gap-4 py-9 items-center">
                        <div class="col-span-12 lg:col-span-1 text-white/80 text-[18px]">03</div>

                        <div class="col-span-12 lg:col-span-5">
                            <h4 class="text-white font-bold uppercase text-[28px] lg:text-[32px] leading-tight">
                                Semi-Urban and Rural Expertise
                            </h4>
                        </div>

                        <div class="col-span-12 lg:col-span-6">
                            <p class="text-white/90 text-[16px] md:text-[17px] lg:text-[18px]">
                                We understand Bharat where it actually lives:
                                beyond metros, beyond stereotypes.
                            </p>
                        </div>
                    </div>

                    <!-- ITEM 04 -->
                    <div class="grid grid-cols-12 gap-4 py-9 items-center">
                        <div class="col-span-12 lg:col-span-1 text-white/80 text-[18px]">04</div>

                        <div class="col-span-12 lg:col-span-5">
                            <h4 class="text-white font-bold uppercase text-[28px] lg:text-[32px] leading-tight">
                                Enabling Growth <br>at Scale
                            </h4>
                        </div>

                        <div class="col-span-12 lg:col-span-6">
                            <p class="text-white/90 text-[16px] md:text-[17px] lg:text-[18px]">
                                From first spark to nationwide momentum,
                                we build brands ready to grow big and grow right.
                            </p>
                        </div>
                    </div>

                    <!-- ITEM 05 -->
                    <div class="grid grid-cols-12 gap-4 py-9 items-center">
                        <div class="col-span-12 lg:col-span-1 text-white/80 text-[18px]">05</div>

                        <div class="col-span-12 lg:col-span-5">
                            <h4 class="text-white font-bold uppercase text-[28px] lg:text-[32px] leading-tight">
                                Digitally Innovative
                            </h4>
                        </div>

                        <div class="col-span-12 lg:col-span-6">
                            <p class="text-white/90 text-[16px] md:text-[17px] lg:text-[18px]">
                                Built for the now. Ready for what’s next.
                            </p>
                        </div>
                    </div>

                    <!-- ITEM 06 -->
                    <div class="grid grid-cols-12 gap-4 py-9 items-center">
                        <div class="col-span-12 lg:col-span-1 text-white/80 text-[18px]">06</div>

                        <div class="col-span-12 lg:col-span-5">
                            <h4 class="text-white font-bold uppercase text-[28px] lg:text-[32px] leading-tight">
                                AI-Ready Workflow
                            </h4>
                        </div>

                        <div class="col-span-12 lg:col-span-6">
                            <p class="text-white/90 text-[16px] md:text-[17px] lg:text-[18px]">
                                We uplift ideas with AI and open a box of possibilities every day. 
                            </p>
                        </div>
                    </div>


                </div>
            </div>
        </div>


    </section>

    <?php if (isset($component)) { $__componentOriginal7408f4ba6e47d1aac4219dca3d02a727 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal7408f4ba6e47d1aac4219dca3d02a727 = $attributes; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.our-team','data' => []] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('our-team'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\Illuminate\View\AnonymousComponent::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal7408f4ba6e47d1aac4219dca3d02a727)): ?>
<?php $attributes = $__attributesOriginal7408f4ba6e47d1aac4219dca3d02a727; ?>
<?php unset($__attributesOriginal7408f4ba6e47d1aac4219dca3d02a727); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal7408f4ba6e47d1aac4219dca3d02a727)): ?>
<?php $component = $__componentOriginal7408f4ba6e47d1aac4219dca3d02a727; ?>
<?php unset($__componentOriginal7408f4ba6e47d1aac4219dca3d02a727); ?>
<?php endif; ?>

    <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('contact-form', []);

$key = null;

$key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-1803313924-0', null);

$__html = app('livewire')->mount($__name, $__params, $key);

echo $__html;

unset($__html);
unset($__name);
unset($__params);
unset($__split);
if (isset($__slots)) unset($__slots);
?>
</div>


<script>
document.addEventListener('DOMContentLoaded', () => {

    const videos = document.querySelectorAll('.hover-video');
    let activeVideo = null;
    let soundUnlocked = false;

    // 🔓 Unlock sound on first user interaction
    const unlockSound = () => {
        soundUnlocked = true;
        document.removeEventListener('click', unlockSound);
        document.removeEventListener('touchstart', unlockSound);
    };

    document.addEventListener('click', unlockSound);
    document.addEventListener('touchstart', unlockSound);

    videos.forEach(video => {

        video.muted = true;

        // DESKTOP HOVER
        video.addEventListener('mouseenter', () => {
            if (window.innerWidth < 1024) return;

            if (activeVideo && activeVideo !== video) {
                activeVideo.pause();
                activeVideo.muted = true;
            }

            activeVideo = video;

            if (soundUnlocked) {
                video.muted = false; // 🔊 sound allowed now
            }

            video.play().catch(() => {});
        });

        video.addEventListener('mouseleave', () => {
            if (window.innerWidth < 1024) return;
            video.pause();
        });

        // CLICK PLAY
        video.addEventListener('click', () => {

            if (activeVideo && activeVideo !== video) {
                activeVideo.pause();
                activeVideo.muted = true;
            }

            activeVideo = video;

            if (soundUnlocked) {
                video.muted = false;
            }

            if (video.paused) {
                video.play().catch(() => {});
            }
        });

        // PAUSE WHEN OUT OF VIEW
        const observer = new IntersectionObserver(
            ([entry]) => {
                if (!entry.isIntersecting) {
                    video.pause();
                    video.muted = true;
                }
            },
            { threshold: 0.25 }
        );

        observer.observe(video);
    });
});
</script>





<?php /**PATH /home/eggfirst/public_html/video.eggfirst.com/resources/views/livewire/about-us.blade.php ENDPATH**/ ?>