<style>
    .typed-cursor {
        color: white;
    }
</style>
<nav class="px-3 py-2 bg-red-500 w-full h-20 sticky top-0 z-30 duration-300 border-b">
    <div class="h-full max-w-6xl mx-auto flex items-center justify-between gap-2">
        <a href="<?php echo e(route('welcome')); ?>" class="flex h-full gap-2 items-center">
            <img src="<?php echo e(asset('logo.jpg')); ?>" alt="Logo" class="animate-bounce rounded-full h-full">
            <div class="flex items-center gap-0.5">
                <h1 class="text-white text-xl font-semibold" id="mec"></h1>
            </div>
        </a>

        <ul class="hidden md:flex items-center gap-5 text-white text-lg ">
            <li class="">
                <a href="<?php echo e(route('welcome')); ?>"
                    class="relative after:absolute after:rounded-md after:h-1 after:-bottom-1  after:left-0
                hover:text-gray-800 after:bg-gray-100 transition ease-in-out duration-150
                <?php echo e(Route::currentRouteName() === 'welcome' ? 'text-white after:bg-gray-100 after:w-8' : ''); ?>

                ">Home</a>
            </li>
            <li class="">
                <a href="<?php echo e(route('about-us')); ?>"
                    class="relative after:absolute after:rounded-md after:h-1 after:-bottom-1  after:left-0
                hover:text-gray-800 after:bg-gray-100 transition ease-in-out duration-150
                <?php echo e(Route::currentRouteName() === 'about-us' ? 'text-white after:bg-gray-100 after:w-8' : ''); ?>

                ">About</a>
            </li>

            <li class="relative">
                <button id="dropdown-nav-menu-trigger" class="flex items-baseline gap-2">
                    Services
                    <i class="fa fa-caret-down"></i>
                </button>

                <ul id="dropdown-nav-menu"
                    class="invisible absolute min-w-[250px] bg-white border shadow-sm rounded-md text-black right-0">
                    <li class="">
                        <a href="<?php echo e(route('admissions')); ?>"
                            class="relative after:absolute after:rounded-md after:h-1 after:-bottom-1  after:left-0
                hover:text-gray-800 after:bg-gray-100 transition ease-in-out duration-150 flex items-center gap-2 text-red-500 p-2
                <?php echo e(Route::currentRouteName() === 'admissions' ? 'text-gray-800 after:bg-gray-800 after:w-8' : ''); ?>

                ">
                            <i class="fa fa-caret-right"></i>
                            Admissions
                        </a>
                    </li>

                    <li class="">
                        <a href="https://wwww.oretetimaralodge.com" target="_blank"
                            class="relative after:absolute after:rounded-md after:h-1 after:-bottom-1  after:left-0
                hover:text-gray-800 after:bg-gray-100 transition ease-in-out duration-150 flex items-center gap-2 text-red-500 p-2
                <?php echo e(Route::currentRouteName() === 'admissions' ? 'text-gray-800 after:bg-gray-100 after:w-8' : ''); ?>

                ">
                            <i class="fa fa-caret-right"></i>
                            Oreteti Mara Lodge
                        </a>
                    </li>
                </ul>
            </li>

            <script>
                const dropdownNavMenuTrigger = document.getElementById('dropdown-nav-menu-trigger')
                const dropdownNavMenu = document.getElementById('dropdown-nav-menu')

                dropdownNavMenuTrigger.addEventListener('click', toggleNavDropdownMenu)

                function toggleNavDropdownMenu() {
                    dropdownNavMenu.classList.toggle('invisible')
                }
            </script>

            <li class="">
                <a href="<?php echo e(route('gallery')); ?>"
                    class="relative after:absolute after:rounded-md after:h-1 after:-bottom-1  after:left-0
                hover:text-gray-800 after:bg-gray-100 transition ease-in-out duration-150
                <?php echo e(Route::currentRouteName() === 'gallery' ? 'text-white after:bg-gray-100 after:w-8' : ''); ?>

                ">Gallery</a>
            </li>
            <li class="">
                <a href="<?php echo e(route('contact-us')); ?>"
                    class="relative after:absolute after:rounded-md after:h-1 after:-bottom-1  after:left-0
                hover:text-gray-800 after:bg-gray-100 transition ease-in-out duration-150
                <?php echo e(Route::currentRouteName() === 'contact-us' ? 'text-white after:bg-gray-100 after:w-8' : ''); ?>

                ">Contact</a>
            </li>
        </ul>

        <ul class="">
            <li class="">
                <?php if (isset($component)) { $__componentOriginal71c6471fa76ce19017edc287b6f4508c = $component; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.secondary-button','data' => ['dataAos' => 'flip-right','dataAosDelay' => '50','dataAosDuration' => '1000','class' => 'hidden md:block']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? (array) $attributes->getIterator() : [])); ?>
<?php $component->withName('secondary-button'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag && $constructor = (new ReflectionClass(Illuminate\View\AnonymousComponent::class))->getConstructor()): ?>
<?php $attributes = $attributes->except(collect($constructor->getParameters())->map->getName()->all()); ?>
<?php endif; ?>
<?php $component->withAttributes(['data-aos' => 'flip-right','data-aos-delay' => '50','data-aos-duration' => '1000','class' => 'hidden md:block']); ?>
                    <a href="<?php echo e(route('admissions')); ?>" class="">
                        <i class="fa fa-pen"></i>
                        Enrol
                    </a>
                 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal71c6471fa76ce19017edc287b6f4508c)): ?>
<?php $component = $__componentOriginal71c6471fa76ce19017edc287b6f4508c; ?>
<?php unset($__componentOriginal71c6471fa76ce19017edc287b6f4508c); ?>
<?php endif; ?>
            </li>

            <li class="">
                <?php if (isset($component)) { $__componentOriginal71c6471fa76ce19017edc287b6f4508c = $component; } ?>
<?php $component = Illuminate\View\AnonymousComponent::resolve(['view' => 'components.secondary-button','data' => ['dataAos' => 'flip-right','dataAosDelay' => '50','dataAosDuration' => '1000','id' => 'mobile-menu-trigger','class' => 'md:hidden']] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? (array) $attributes->getIterator() : [])); ?>
<?php $component->withName('secondary-button'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag && $constructor = (new ReflectionClass(Illuminate\View\AnonymousComponent::class))->getConstructor()): ?>
<?php $attributes = $attributes->except(collect($constructor->getParameters())->map->getName()->all()); ?>
<?php endif; ?>
<?php $component->withAttributes(['data-aos' => 'flip-right','data-aos-delay' => '50','data-aos-duration' => '1000','id' => 'mobile-menu-trigger','class' => 'md:hidden']); ?>
                    <i class="fa fa-bars"></i>
                 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal71c6471fa76ce19017edc287b6f4508c)): ?>
<?php $component = $__componentOriginal71c6471fa76ce19017edc287b6f4508c; ?>
<?php unset($__componentOriginal71c6471fa76ce19017edc287b6f4508c); ?>
<?php endif; ?>
            </li>
        </ul>
    </div>
</nav>

<script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script>

<script>
    var typed = new Typed('#mec', {
        strings: ['Maasai', 'Education', 'Center'],
        typeSpeed: 100,
        smartBackspace: true, // Default value
        loop: true,
    });
</script>
<?php /**PATH K:\Laravel\MEC\resources\views/layouts/navbar.blade.php ENDPATH**/ ?>