<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag; ?>
<?php foreach($attributes->onlyProps(['data']) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
} ?>
<?php $attributes = $attributes->exceptProps(['data']); ?>
<?php foreach (array_filter((['data']), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
} ?>
<?php $__defined_vars = get_defined_vars(); ?>
<?php foreach ($attributes as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
} ?>
<?php unset($__defined_vars); ?>
<?php
    $parent = reset($data);
    $child = array_values(array_slice($data, 1));

?>

<!-- Services -->
<section
    class="container relative mx-auto space-y-16 px-2 text-center text-[#424242] md:px-[20px] lg:px-[100px] xl:px-[169px]">
    <!-- Services Header -->
    <?php if(!empty($parent)): ?>
        <div>
            <h1 class="text-[36px] font-medium"><?php echo e($parent['title']); ?></h1>
            <h2 class="text-[14px]">
                <?php echo e($parent['description']); ?>

            </h2>
        </div>
    <?php endif; ?>


    <!-- Services Carousel -->
    <div class="swiper mySwiper pb-5">
        <div class="swiper-wrapper">
            <!-- Card -->
            <?php $__currentLoopData = $child[0]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $child): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <div class="swiper-slide">
                    <a href="<?php echo e(route('service-view', $child->id)); ?>" class="group relative block h-[460px] w-full">
                        <!-- Card image -->
                        <div class="h-[243px] w-full overflow-hidden"
                            style="clip-path: polygon(0% 0%, 250% 0%, 0% 100%, 0% 100%)">
                            <img src="<?php echo e(asset('images/' . $child->image)); ?>" alt="services"
                                class="h-full w-full transition-transform duration-1000 group-hover:scale-110" />
                        </div>

                        <div class="absolute left-[51.5%] top-[30%] h-[297px] w-[95%] -translate-x-1/2 shadow-xl">
                            <div class="relative h-full w-full">
                                <!-- Body content -->
                                <div class="relative h-full w-full bg-[#F8F8F8] px-4 py-2 pt-[110px] text-start text-[#424242] shadow-none"
                                    style="
                        clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
                      ">
                                    <h1 class="mb-2 text-[19px] font-semibold">
                                        <?php echo e($child->title); ?>

                                    </h1>
                                    <p class="line-clamp-4 text-[14px]">
                                        <?php echo e($child->short_des); ?>

                                    </p>

                                    <div class="absolute left-1/2 top-0 h-[102%] w-[130%] -translate-x-1/2 bg-[#F06728] transition-colors duration-1000 group-hover:bg-orange-700"
                                        style="
                          clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 38.5%);
                        ">
                                    </div>
                                </div>
                                <!-- icon -->
                                <div
                                    class="absolute -top-2 right-8 rounded-full border-[7px] border-[#F06728] duration-1000 group-hover:border-orange-700">
                                    <span
                                        class="flex h-[60px] w-[60px] items-center justify-center rounded-full bg-[#F8F8F8] text-2xl transition-transform duration-1000 group-hover:scale-110"><i
                                            class="<?php echo e($child->icone); ?>"></i></span>
                                </div>
                                <!-- footer button -->
                                <div
                                    class="absolute -right-2 bottom-0 flex h-[36px] w-full items-start justify-end overflow-hidden">
                                    <span
                                        class="relative bg-[#F06728] px-8 py-[5px] text-sm text-white shadow-[rgba(0,0,45,0.2)_4px_0px_2px_-0.5px_inset] transition-colors duration-1000 before:absolute before:right-full before:top-0 before:h-0 before:w-0 before:translate-x-[0.2px] before:border-[21px] before:border-t-[55px] before:border-[#F06728] before:border-l-transparent before:border-t-transparent before:transition-colors before:duration-1000 group-hover:bg-orange-700 before:group-hover:border-b-orange-700 before:group-hover:border-r-orange-700"><i
                                            class="fa-solid fa-arrow-right transition-transform duration-1000 group-hover:translate-x-full"></i></span>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

        </div>
        <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper Navigation -->
    <div
        class="swiper-custon-nav absolute left-0 top-1/2 z-10 hidden w-full -translate-y-1/2 justify-between px-4 py-2 text-xl text-orange-500 lg:flex">
        <!-- Left Navigation Button -->
        <span id="card-nav-left"
            class="transition-color cursor-pointer rounded-md bg-[#2F2B2B] px-3 py-1 hover:bg-[#292525]"><i
                class="fa-solid fa-chevron-left"></i></span>
        <!-- Right Navigation Button -->
        <span id="card-nav-right"
            class="transition-color cursor-pointer rounded-md bg-[#2F2B2B] px-3 py-1 hover:bg-[#292525]">
            <i class="fa-solid fa-chevron-right"></i>
        </span>
    </div>
</section>
<?php /**PATH /home/khawajashipping/mrglogisticsbd.com/resources/views/components/frontend/service.blade.php ENDPATH**/ ?>