<div>
    <!-- ================= HERO ================= -->
    <section class="bg-[#f58220]">
        <div class="mx-auto px-6 lg:px-16 py-20">
            <h1 class="text-white text-[36px] sm:text-[48px] lg:text-[64px] font-extrabold lg:font-bold leading-tight">
                Services &<br>
                Capabilites
            </h1>
        </div>
    </section>

    <!-- ================= TABS ================= -->
    <section class="bg-white hidden lg:block">
        <div class="mx-auto px-6 lg:px-20 py-10">
            <ul id="serviceTabs"
                class="flex items-center justify-between text-[15px] font-bold leading-relaxed whitespace-nowrap">
    
                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $megaMenuColumns; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $column): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($column): ?>
                        <li>
                            <a class="inline-flex items-center gap-x-2 hover:underline"
                               href="#<?php echo e(\Illuminate\Support\Str::slug($column->name)); ?>">
                                <?php echo e($column->name); ?>

                                <span>↓</span>
                            </a>
                        </li>
                    <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    
            </ul>
        </div>
    </section>


    <!-- ================= SERVICES SECTIONS ================= -->
    <section class="bg-white">
        <div class="mx-auto max-w-8xl">

            <ol class="space-y-24">

                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li class="overflow-y-hidden pt-20 lg:pt-28 <?php echo e($index % 2 == 0 ? 'bg-white' : 'bg-gray-100'); ?> scroll-mt-32"
                        id="<?php echo e(\Illuminate\Support\Str::slug($category->slug)); ?>">

                        <!-- SECTION NUMBER -->
                        <span class="block mb-6 md:mb-8 lg:mb-10 pl-5 md:pl-10 lg:pl-20
                            text-[56px] sm:text-[64px] md:text-[72px] lg:text-[96px]
                            font-bold leading-none tracking-tight text-black">
                            <?php echo e(str_pad($index+1, 2, '0', STR_PAD_LEFT)); ?>

                        </span>

                        <!-- TITLE + DESCRIPTION -->
                        <div class="lg:flex justify-start">

                            <!-- TITLE -->
                            <div class="w-full lg:w-1/2 px-5 md:pl-10 lg:pl-20">
                                <h2 class="text-[22px] sm:text-[26px] md:text-[32px] lg:text-[40px]
                                    font-bold tracking-tight leading-snug text-black">
                                    <?php echo nl2br(e($category->name)); ?>

                                </h2>
                            </div>

                            
                            <!--<div class="w-full lg:w-1/2 mt-6 lg:mt-0 px-5 md:px-10 lg:px-20 lg:pl-0 text-[16px] lg:text-[18px] text-justify">-->
                            <!--    <p><?php echo e($category->description); ?></p>-->
                            <!--</div>-->
                             <!-- CATEGORY DESCRIPTION -->
                            <div
                                class="w-full lg:w-1/2 mt-6 lg:mt-0
                               px-5 md:px-10 lg:px-20 lg:pl-0
                               text-[18px] text-justify">

                                <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($category->pageCms && $category->pageCms->description): ?>
                                    <p class="text-gray-700 leading-relaxed">
                                        <?php echo nl2br(e($category->pageCms->description)); ?>

                                    </p>
                                <?php else: ?>
                                    <p class="text-gray-400 italic">
                                        Description coming soon.
                                    </p>
                                <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

                            </div>

                        </div>

                        <!-- LIST + VIDEO -->
                        <div class="lg:flex justify-start mt-10">

                            <!-- SERVICES LIST -->
                            <div class="w-full lg:w-1/2 text-lg pb-20 px-5 md:px-10 lg:pl-20 lg:pb-0">
                                <ul class="grid gap-y-5">
                                    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $category->services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <li>
                                            <a href="<?php echo e(route('services.category.service', [$category->slug, $service->slug ?? \Illuminate\Support\Str::slug($service->title)])); ?>"
                                               class="text-[16px] leading-relaxed font-normal transition-colors duration-200 hover:text-[#f38121]">
                                                <?php echo e($service->title); ?>

                                            </a>
                                        </li>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
                                </ul>

                                <!-- CTA -->
                                <a href="<?php echo e(route('services.category.view', $category->slug)); ?>"
                                   class="group text-2xl font-bold mt-10 inline-flex items-center gap-x-2
                                   transition-colors duration-200 hover:text-[#f38121]">
                                    Explore Work
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
                                        class="transition-transform duration-300 ease-out group-hover:translate-x-2"
                                        viewBox="0 0 24 24">
                                        <path fill="currentColor"
                                            d="M12.949 4.56152L11.5945 5.97852L16.4357 10.9995H3.3999V12.9995H16.4348L11.5945 18.0215L12.949 19.4385L20.1202 11.9995L12.949 4.56152Z"/>
                                    </svg>
                                </a>
                            </div>

                            <!-- VIDEO -->
                            <div class="w-full lg:w-1/2 relative aspect-3/2 min-h-[300px] lg:min-h-[420px]">
                                <video autoplay muted loop playsinline
                                       class="object-cover object-center h-full w-full absolute top-0">
                                    <source src="<?php echo e($category->video_url); ?>">
                                </video>
                            </div>
                        </div>
                    </li>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

            </ol>
        </div>
    </section>

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

$key = null;

$key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-1583615911-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>
<?php /**PATH /home/eggfirst/public_html/video.eggfirst.com/resources/views/livewire/services/index.blade.php ENDPATH**/ ?>