<section class="lg:pb-90 pt-90 hover-wrapper">
    <div class="container">
        <div class="max-w-600 mx-auto text-center sm:mb-50 mb-20">
            @if(isset($args['subtitle']) && $args['subtitle'] != '')
            <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
            @endif
            <h2 class="xl:text-7xl lg:text-6xl sm:text-5xl text-4xl headline">{!! isset($args['title']) ? $args['title'] : '' !!}</h2>
            @if(isset($args['description']) && $args['description'] != '')
            <p class="text-lg/50">{{ $args['description'] }}</p>
            @endif
        </div>
        <div class="grid grid-cols-12 gap-20">
            @if(!empty($args['item']))
            @php
                $count = count($args['item']);
                $mid1 = floor(($count - 1) / 2); 
                $mid2 = $mid1 + 1;              
            @endphp

            @foreach($args['item'] as $key => $value)

                @php
                    $cardClass = ($key == $mid1 || $key == $mid2)
                        ? ''                
                        : 'lg:pt-50';        
                @endphp

                <div class="lg:col-span-3 sm:col-span-6 col-span-12">
                    <div class="relative {{ $cardClass }}">
                        <div class="card dark:bg-card bg-white sm:min-h-408 rounded-2xl text-center relative z-1 overflow-hidden duration-500 before:content-[''] before:absolute before:-top-150 before:-right-150 before:size-360 before:pointer-events-none before:opacity-30 dark:before:bg-[url('../images/background/bg4-light.svg')] before:bg-[url('../images/background/bg4.svg')] before:bg-no-repeat before:bg-top-right before:-z-1 before:duration-500 after:content-[''] after:absolute after:-bottom-10 after:left-1/2 after:-translate-x-1/2 after:size-20 dark:after:bg-bodybg after:bg-bglight after:rounded-full after:pointer-events-none group-hover:after:animate-rotate fancybox hover-active">
                            <div class="flex-1 px-30 pb-40 pt-50">
                                <h4 class="text-5xl">[{{ $key + 1 }}]</h4>
                            </div>
                            <div class="px-30 py-40">
                                <h5 class="text-2xl mb-5">{{ isset($value['title']) ? $value['title'] : '' }}</h5>
                                <p class="text-lg/24 text-textlight">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    <div class="absolute -bottom-[28%] left-0 -translate-1/2 max-lg:hidden -z-1">
                        <img src="{{ theme_asset('images/arrow-dark.png') }}" alt="" class="dark:block hidden">
                        <img src="{{ theme_asset('images/arrow-light.png') }}" alt="" class="dark:hidden block">
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </div>
    </div>
</section>