<?php $__env->startSection('main'); ?>

    <header class="mb-10 ">
        <div class="owl-carousel header-carousel relative owl-loaded owl-drag">

            <?php $__currentLoopData = $sliders; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $slider): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="max-h-[calc(100vh-9rem)] owl-carousel-item relative">
                    <img class="w-full md:h-[calc(100vh-9rem)] h-[50vh] object-cover"
                         src="<?php echo e(asset('uploads/'.$slider->image)); ?>" alt="Image Slider">
                    <div class="absolute top-0 left-0 w-full h-full flex items-center"
                         style="background: rgba(53, 53, 53, .7);">
                        <div class="w-full">
                            <div class="flex items-center justify-center w-full ">
                                <div class="lg:w-8/12 text-center mx-auto">
                                    <h5 class="text-white text-sm md:text-lg uppercase mb-2 animated slideInDown">
                                        Welcome To:
                                    </h5>
                                    <h1 class="text-3xl md:text-7xl text-white animated slideInDown mb-3">
                                        <?php echo e($slider->title); ?>

                                    </h1>
                                    <p class="text-sm text-white mb-3 pb-2"><?php echo e($slider->description); ?></p>
                                    <div class="flex items-center justify-center">
                                        <div class="mt-5 relative w-fit rounded-2xl group  bg-red-500 text-white">
                                            <div
                                                class="absolute w-4 h-full bg-red-600 rounded-2xl duration-300 group-hover:w-full"></div>
                                            <button
                                                class="px-8 py-4 flex relative items-center gap-2 z-10 font-dosis tracking-widest">
                                                <a href="<?php echo e(route('admissions')); ?>" class="flex relative items-center gap-2">
                                                    <i class="fa fa-pen"></i>
                                                    Enrol
                                                </a>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

    </header>

    <section class="mb-10  min-h-[12rem] relative p-3 flex items-center">
        <ul class="w-full max-w-6xl mx-auto gap-5 grid md:grid-cols-3">
            <li class="w-full">
                <div class="flex mb-3 items-center justify-between w-full">
                    <div class="rounded-md bg-green-500 w-16 h-16 flex items-center justify-center">
                        <i class="fa fa-tree text-3xl text-white"></i>
                    </div>
                    <span class="text-7xl font-semibold text-gray-200 font-mija">01</span>
                </div>
                <h1 class="text-xl font-semibold text-green-500 font-mija">Wonderful Environment</h1>
            </li>
            <li class="w-full">
                <div class="flex mb-3 items-center justify-between w-full">
                    <div class="rounded-md bg-red-500 w-16 h-16 flex items-center justify-center">
                        <i class="fa fa-utensils text-3xl text-white"></i>
                    </div>
                    <span class="text-7xl font-semibold text-gray-200 font-mija">02</span>
                </div>
                <h1 class="text-xl font-semibold text-red-500 font-mija">A Hotel School</h1>
            </li>
            <li class="w-full">
                <div class="flex mb-3 items-center justify-between w-full">
                    <div class="rounded-md bg-black w-16 h-16 flex items-center justify-center">
                        <i class="fa fa-certificate text-3xl text-white"></i>
                    </div>
                    <span class="text-7xl font-semibold text-gray-200 font-mija">03</span>
                </div>
                <h1 class="text-xl font-semibold text-black-500 font-mija">Certification</h1>
            </li>
        </ul>
    </section>

    <section class="mb-10  bg-slate-100">

        <div class="w-full min-h-[80vh] md:min-h-[calc(100vh-5rem)] grid grid-cols-1 md:grid-cols-2">
            <img src="<?php echo e(asset('uploads/IMG_1703346728_658702281a389.jpg')); ?>" alt="About us image" class="h-full w-full
            object-cover">
            <div class="h-full w-full px-3 py-5 md:p-5 flex gap-5 flex-col justify-center">
                <div class="flex">
                    <h1 class="md:text-5xl text-4xl text-red-500 font-semibold font-mija relative pe-20 after:right-0 after:absolute
                    after:w-16 after:rounded-md after:h-2 after:bottom-0 after:bg-red-500">About Us</h1>
                </div>
                <p class="">
                    Lorem ipsum dolor sit amet consectetur adipiscing elit nisl orci blandit, dapibus aenean maecenas
                    aliquet natoque pretium magnis euismod accumsan nibh, convallis eget egestas lacus praesent
                </p>

                <ul class="grid grid-cols-2 gap-2">
                    <li class="py-3 px-2 flex">
                        <div class="w-full flex gap-2">
                            <div class="h-12 w-12 bg-white rounded-md flex items-center justify-center">
                                <i class="fa fa-graduation-cap text-2xl"></i>
                            </div>
                            <div class="flex flex-col">
                                <span class="font-semibold font-mija text-xl">20</span>
                                <h1 class="">Graduations</h1>
                            </div>
                        </div>
                    </li>
                    <li class="py-3 px-2 flex">
                        <div class="w-full flex gap-2">
                            <div class="h-12 w-12 bg-white rounded-md flex items-center justify-center">
                                <i class="fa fa-people-group text-2xl"></i>
                            </div>
                            <div class="flex flex-col">
                                <span class="font-semibold font-mija text-xl">300</span>
                                <h1 class="">Graduates</h1>
                            </div>
                        </div>
                    </li>
                    <li class="py-3 px-2 flex">
                        <div class="w-full flex gap-2">
                            <div class="h-12 w-12 bg-white rounded-md flex items-center justify-center">
                                <i class="fa fa-list text-2xl"></i>
                            </div>
                            <div class="flex flex-col">
                                <span class="font-semibold font-mija text-xl">10</span>
                                <h1 class="">Courses</h1>
                            </div>
                        </div>
                    </li>
                    <li class="py-3 px-2 flex">
                        <div class="w-full flex gap-2">
                            <div class="h-12 w-12 bg-white rounded-md flex items-center justify-center">
                                <i class="fa fa-chalkboard-teacher text-2xl"></i>
                            </div>
                            <div class="flex flex-col">
                                <span class="font-semibold font-mija text-xl">12</span>
                                <h1 class="">Teaching Staff</h1>
                            </div>
                        </div>
                    </li>
                </ul>

                <div class="flex">
                    <div class="mt-5 relative w-fit rounded-2xl group  bg-red-500 text-white">
                        <div class="absolute w-4 h-full bg-red-600 rounded-2xl duration-300 group-hover:w-full"></div>
                        <button class="px-8 py-4 flex relative items-center gap-2 z-10 font-dosis tracking-widest">
                            <a href="<?php echo e(route('about-us')); ?>" class="flex relative items-center gap-2">
                                Read More
                                <i class="fa fa-caret-right"></i>
                            </a>
                        </button>
                    </div>
                </div>

            </div>
        </div>

    </section>

    <section class="mb-10 py-10">
        <div class="flex flex-col gap-5 pb-14 items-center justify-center">
            <h1 class="md:text-5xl text-4xl text-red-500 font-semibold font-mija relative px-20 after:right-0 after:absolute
                    after:w-16 after:rounded-md after:h-2 after:bottom-0 after:bg-red-500 before:left-0 before:absolute
                    before:w-16 before:rounded-md before:h-2 before:bottom-0 before:bg-red-500">Courses</h1>
            <span class="">Courses Offered</span>
        </div>
        <ul class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 max-w-7xl mx-auto p-3">
            <?php $__currentLoopData = $courses; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $course): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <li class="group border rounded-md shadow-sm">
                    <a href="<?php echo e(route('single-course', $course->id)); ?>" class="">
                        <div class="relative rounded-md">
                            <img src="<?php echo e(asset('uploads/'.$course->image)); ?>" alt="Image"
                                 class="rounded-md w-full h-60 object-cover">
                            <div
                                class="absolute top-0 left-0 bottom-0 w-full h-0 duration-300 group-hover:h-60 right-0 bg-black/10 z-[2] rounded-md"></div>
                        </div>
                        <div class="flex gap-2 items-center py-10 px-3">
                            <i class="<?php echo e($course->icon); ?> text-5xl"></i>
                            <div class="">
                                <h1 class="font-mija text-xl font-semibold duration-300 group-hover:text-red-500"><?php echo e($course->title); ?></h1>
                                <span class="text-gray-400"><?php echo e($course->caption); ?></span>
                            </div>
                        </div>
                    </a>
                </li>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </ul>
    </section>

    <section class="mb-10  bg-slate-100 py-10">
        <div class="p-3 max-w-7xl mx-auto min-h-[calc(100vh-5rem)] grid grid-cols-1 md:grid-cols-2 gap-3 items-center">

            <div class="h-full flex flex-col justify-center gap-3">
                <span class="uppercase text-xl">The Latest News</span>
                <h1 class="md:text-5xl w-fit text-4xl text-red-500 font-semibold font-mija relative pe-20 after:right-0 after:absolute
                    after:w-16 after:rounded-md after:h-2 after:bottom-0 after:bg-red-500">Stay Updated</h1>
                <p class="text-gray-800">Discover whats happening in Maasai Education Center and Oreteti Mara Lodge</p>
            </div>


            <div class="">
                <div class="owl-carousel news-carousel relative owl-loaded owl-drag">

                    <?php $__currentLoopData = $news; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $nw): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class=" owl-carousel-item relative p-2">
                            <img src="<?php echo e(asset('uploads/'.$nw->image)); ?>" alt="<?php echo e($nw->slug); ?>"
                                 class="h-52 object-cover w-full rounded-md">
                            <div class="flex flex-col py-2">
                                <h1 class="text-red-500 font-semibold font-dosis tracking-widest"><?php echo e($nw->title); ?></h1>
                                <span class="text-sm text-gray-800"><?php echo e($nw->caption); ?></span>
                            </div>
                        </div>

                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div>

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

    <section class="mb-10 py-10">
        <div class="flex max-w-7xl mx-auto p-3 flex-col gap-5 pb-14 items-center justify-center">
            <h1 class="md:text-5xl text-4xl text-red-500 font-semibold font-mija relative px-20 after:right-0 after:absolute
                    after:w-16 after:rounded-md after:h-2 after:bottom-0 after:bg-red-500 before:left-0 before:absolute
                    before:w-16 before:rounded-md before:h-2 before:bottom-0 before:bg-red-500">Oreteti</h1>
            <span class="text-center">Oreteti Mara Lodge: Doing Well By Doing Good</span>

            <p class="text-center font-dosis tracking-wider leading-8">
                Set like a shining star in the authentic forest of <b>Oloirien</b> (wild olive tree) – Kenya, on the top
                of the Oloololo escarpment, located near Lolgorian and with a 10 minutes drive from “the big five”
                wildlife in the magnificent Maasai Mara, our lodges are wrapped around by native trees meeting the
                sweeping bush grass in the seasonal path of the awe-inspiring Great Migration, the Oreteti Mara Lodge
                reflects the spirit of ancient Maasai land.
                <br>
                Maasai Mara, a remarkable National Game Reserve which many safari travellers deem the finest game
                reserve on the continent of Africa!
            </p>

            <a href="https://www.oretetimaralodge.com" target="_blank" class="">
                <img src="<?php echo e(asset('uploads/IMG_1703346727_65870227bb9e2.webp')); ?>" alt="Logo Lodge"
                     class="max-w-lg sm:w-full w-11/12 mx-auto">
            </a>

            <div class="grid md:grid-cols-2 gap-2 w-full">

                <a href="https://www.oretetimaralodge.com/service-sliders" target="_blank" class="rounded-md overflow-hidden relative w-full group flex h-80 bg-no-repeat
                 bg-cover" style="background-image: url(<?php echo e(asset('uploads/IMG_1703374867_658770134ee94.webp')); ?>)">
                    <div class="absolute bottom-0 left-0 right-0 h-10 bg-black/40 group-hover:h-80 duration-300"></div>
                    <div class="absolute top-0 left-0 right-0 h-80 bg-black/10"></div>
                    <h1 class="text-white bottom-0 left-0 m-2 z-10 relative mt-auto font-dosis font-semibold tracking-widest uppercase">
                        Rooms</h1>
                </a>

                <a href="https://www.oretetimaralodge.com/rooms" target="_blank" class="rounded-md overflow-hidden relative w-full group flex h-80 bg-no-repeat
                bg-cover" style="background-image: url(<?php echo e(asset('uploads/IMG_1703374867_65877013c62bc.webp')); ?>)">
                    <div class="absolute bottom-0 left-0 right-0 h-10 bg-black/40 group-hover:h-80 duration-300"></div>
                    <div class="absolute top-0 left-0 right-0 h-80 bg-black/10"></div>
                    <h1 class="text-white bottom-0 left-0 m-2 z-10 relative mt-auto font-dosis font-semibold tracking-widest uppercase">
                        Experience Our Excursions</h1>
                </a>

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

    <section class="mb-10  bg-slate-100">

        <div class="w-full min-h-[80vh] md:min-h-[calc(100vh-5rem)] grid grid-cols-1 md:grid-cols-2">
            <img src="<?php echo e(asset('uploads/IMG_1703346728_65870228be539.webp')); ?>" alt="Image of our Founders" class="h-full w-full
            object-cover">
            <div class="h-full w-full px-3 py-5 md:p-5 flex gap-5 flex-col justify-center">
                <div class="flex">
                    <h1 class="md:text-5xl text-4xl text-red-500 font-semibold font-mija relative pe-20 after:right-0 after:absolute
                    after:w-16 after:rounded-md after:h-2 after:bottom-0 after:bg-red-500">Our Founders</h1>
                </div>
                <span class="font-semibold font-dosis tracking-widest text-xl">Mariska & Adri</span>

                <p class="font-dosis tracking-wider leading-6 text-gray-800">
                    Lorem ipsum dolor sit amet consectetur adipiscing elit, porta tortor tempor interdum nam vestibulum
                    ac non, turpis laoreet donec nec quisque mus. Ridiculus convallis feugiat condimentum libero
                    parturient dapibus vehicula nullam, dis cum semper vel neque porta potenti, imperdiet montes commodo
                    tempus sed arcu nisi. Vestibulum curae integer egestas ligula laoreet eget semper faucibus purus
                    orci, magna nullam tellus magnis senectus viverra aliquam pretium gravida pellentesque, parturient
                    quisque massa ultrices
                </p>
            </div>
        </div>

    </section>


    <section class="mb-10 py-10">
        <div class="flex flex-col gap-5 pb-14 items-center justify-center">
            <h1 class="md:text-5xl text-4xl text-red-500 font-semibold font-mija relative px-20 after:right-0 after:absolute
                    after:w-16 after:rounded-md after:h-2 after:bottom-0 after:bg-red-500 before:left-0 before:absolute
                    before:w-16 before:rounded-md before:h-2 before:bottom-0 before:bg-red-500">Our Staff</h1>
            <span class="">Our Staff</span>
        </div>

        <div class="max-w-7xl mx-auto">
            <div class="owl-carousel staff-carousel relative owl-loaded owl-drag">

                <?php $__currentLoopData = $staffs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $staff): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class=" owl-carousel-item relative p-2">
                        <div class="flex w-full items-center justify-center">
                            <img src="<?php echo e(asset('uploads/'.$staff->image)); ?>" alt="<?php echo e($staff->slug); ?>"
                                 class="h-40 w-40  object-cover rounded-full" style="width: fit-content !important;">
                        </div>

                        <div class="flex flex-col py-2 items-center">
                            <h1 class="text-red-500 font-semibold font-dosis tracking-widest"><?php echo e($staff->name); ?></h1>
                            <span class="text-sm text-gray-800"><?php echo e($staff->occupation); ?></span>
                        </div>
                    </div>

                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

        </div>

    </section>


    <section class="mb-10 py-10">
        <div class="flex flex-col gap-5 pb-14 items-center justify-center">
            <h1 class="md:text-5xl text-4xl text-red-500 font-semibold font-mija relative px-16 after:right-0 after:absolute
                    after:w-14 after:rounded-md after:h-2 after:bottom-0 after:bg-red-500 before:left-0 before:absolute
                    before:w-14 before:rounded-md before:h-2 before:bottom-0 before:bg-red-500">Testimony</h1>
            <span class="">Peoples' Opinions</span>
        </div>

        <div class="max-w-7xl mx-auto">
            <div class="owl-carousel testimonial-carousel relative owl-loaded owl-drag">

                <?php $__currentLoopData = $testimonies; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $testimony): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="testimonial-item text-center">
                        <img class="p-2 mx-auto mb-3 rounded-full" src="<?php echo e(asset('uploads/'. $testimony->image)); ?>"
                             style="width: 120px; height: 120px;">
                        <div class="testimonial-text text-center p-4">
                            <p class="text-gray-400"><?php echo e($testimony->testimony); ?></p>
                            <h5 class="mb-1 font-semibold text-xl"><?php echo e($testimony->name); ?></h5>
                            <span class="fst-italic text-red-500"><?php echo e($testimony->occupation); ?></span>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

        </div>

    </section>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.template', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH I:\Laravel\mec\resources\views/welcome.blade.php ENDPATH**/ ?>