<section class="lg:pt-280 pt-180 lg:pb-0 pb-70 z-1 bg-light dark:bg-bodybg">
    <div class="container relative z-1">
        <div class="grid grid-cols-12 gap-20">
            <div class="col-span-12">
                <div class="mb-70 text-center mx-auto max-w-718">
                    @if(isset($args['subtitle']) && $args['subtitle'] != '')
                    <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                    @endif
                    <h2 class="lg:text-5xxl sm:text-4xxl text-2xxl font-medium headline2">{!! isset($args['title']) ? $args['title'] : '' !!}</h2>
                    @if(isset($args['description']) && $args['description'] != '')
                    <p class="text-lg/50">{{ $args['description'] }}</p>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="container-full">
        <div class="grid grid-cols-12 gap-20">
            <div class="col-span-12">
                <div class="relative">
                    <div class="relative -z-2 bg-primary mask-[url(../images/background/bg17.png)] mask-cover">
                        <img class="mix-blend-darken" src="{{ theme_asset('images/background/bg17.png') }}" alt="">
                    </div>
                    @if(isset($args['item']))
                    @foreach($args['item'] as $key => $value)
                    @if($key == 0)
                    <div class="absolute sm:w-45 w-25 left-[21%] sm:top-[46%] top-[82%] -translate-x-1/2 -translate-y-100 wow zoomIn" data-wow-delay="0.5s">
                        <div class="flex flex-col items-center gap-10 relative z-1 group">
                            <span class="py-6.5 px-15.5 bg-white text-dark rounded-lg sm:text-base text-sm font-bold duration-500 group-hover:bg-primary max-lg:opacity-0 max-lg:invisible max-lg:group-hover:visible max-lg:group-hover:opacity-100">{{ isset($value['title']) ? $value['title'] : '' }}</span>
                            <span class="sm:size-45 size-25 flex items-center justify-center rounded-full bg-white text-dark duration-500 sm:text-lg text-2xs font-bold">01</span>
                            <div class="absolute top-full left-1/2 transform -translate-x-1/2 sm:min-w-250 min-w-150 mt-6 bg-white rounded-2lg sm:px-20 sm:py-24 px-10 py-14 opacity-0 invisible duration-500 group-hover:visible group-hover:opacity-100">
                                <p class="text-dark sm:text-base text-xs font-medium">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    </div>
                    @elseif($key == 1)
                    <div class="absolute sm:w-45 w-25 left-[30.5%] sm:top-[61%] top-[101%] -translate-x-1/2 -translate-y-100 wow zoomIn" data-wow-delay="0.8s">
                        <div class="flex flex-col items-center gap-10 relative z-1 group">
                            <span class="py-6.5 px-15.5 bg-white text-dark rounded-lg sm:text-base text-sm font-bold duration-500 group-hover:bg-primary max-lg:opacity-0 max-lg:invisible max-lg:group-hover:visible max-lg:group-hover:opacity-100">{{ isset($value['title']) ? $value['title'] : '' }}</span>
                            <span class="sm:size-45 size-25 flex items-center justify-center rounded-full bg-white text-dark duration-500 sm:text-lg text-2xs font-bold">02</span>
                            <div class="absolute top-full left-1/2 transform -translate-x-1/2 sm:min-w-250 min-w-150 mt-6 bg-white rounded-2lg sm:px-20 sm:py-24 px-10 py-14 opacity-0 invisible duration-500 group-hover:visible group-hover:opacity-100">
                                <p class="text-dark sm:text-base text-xs font-medium">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    </div>
                    @elseif($key == 2)
                    <div class="absolute sm:w-45 w-25 left-[39.5%] sm:top-[37%] top-[71%] -translate-x-1/2 -translate-y-100 wow zoomIn" data-wow-delay="1.1s">
                        <div class="flex flex-col items-center gap-10 relative z-1 group">
                            <span class="py-6.5 px-15.5 bg-white text-dark rounded-lg sm:text-base text-sm font-bold duration-500 group-hover:bg-primary max-lg:opacity-0 max-lg:invisible max-lg:group-hover:visible max-lg:group-hover:opacity-100">{{ isset($value['title']) ? $value['title'] : '' }}</span>
                            <span class="sm:size-45 size-25 flex items-center justify-center rounded-full bg-white text-dark duration-500 sm:text-lg text-2xs font-bold">03</span>
                            <div class="absolute top-full left-1/2 transform -translate-x-1/2 sm:min-w-250 min-w-150 mt-6 bg-white rounded-2lg sm:px-20 sm:py-24 px-10 py-14 opacity-0 invisible duration-500 group-hover:visible group-hover:opacity-100">
                                <p class="text-dark sm:text-base text-xs font-medium">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    </div>
                    @elseif($key == 3)
                    <div class="absolute sm:w-45 w-25 left-[49%] sm:top-[54.5%] top-[89%] -translate-x-1/2 -translate-y-100 wow zoomIn" data-wow-delay="1.4s">
                        <div class="flex flex-col items-center gap-10 relative z-1 group">
                            <span class="py-6.5 px-15.5 bg-white text-dark rounded-lg sm:text-base text-sm font-bold duration-500 group-hover:bg-primary max-lg:opacity-0 max-lg:invisible max-lg:group-hover:visible max-lg:group-hover:opacity-100">{{ isset($value['title']) ? $value['title'] : '' }}</span>
                            <span class="sm:size-45 size-25 flex items-center justify-center rounded-full bg-white text-dark duration-500 sm:text-lg text-2xs font-bold">04</span>
                            <div class="absolute top-full left-1/2 transform -translate-x-1/2 sm:min-w-250 min-w-150 mt-6 bg-white rounded-2lg sm:px-20 sm:py-24 px-10 py-14 opacity-0 invisible duration-500 group-hover:visible group-hover:opacity-100">
                                <p class="text-dark sm:text-base text-xs font-medium">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    </div>
                    @elseif($key == 4)
                    <div class="absolute sm:w-45 w-25 left-[58.5%] sm:top-[26%] top-[61%] -translate-x-1/2 -translate-y-100 wow zoomIn" data-wow-delay="1.7s">
                        <div class="flex flex-col items-center gap-10 relative z-1 group">
                            <span class="py-6.5 px-15.5 bg-white text-dark rounded-lg sm:text-base text-sm font-bold duration-500 group-hover:bg-primary max-lg:opacity-0 max-lg:invisible max-lg:group-hover:visible max-lg:group-hover:opacity-100">{{ isset($value['title']) ? $value['title'] : '' }}</span>
                            <span class="sm:size-45 size-25 flex items-center justify-center rounded-full bg-white text-dark duration-500 sm:text-lg text-2xs font-bold">05</span>
                            <div class="absolute top-full left-1/2 transform -translate-x-1/2 sm:min-w-250 min-w-150 mt-6 bg-white rounded-2lg sm:px-20 sm:py-24 px-10 py-14 opacity-0 invisible duration-500 group-hover:visible group-hover:opacity-100">
                                <p class="text-dark sm:text-base text-xs font-medium">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    </div>
                    @elseif($key == 5)
                    <div class="absolute sm:w-45 w-25 left-[67.5%] sm:top-[50%] top-[83%] -translate-x-1/2 -translate-y-100 wow zoomIn" data-wow-delay="2.0s">
                        <div class="flex flex-col items-center gap-10 relative z-1 group">
                            <span class="py-6.5 px-15.5 bg-white text-dark rounded-lg sm:text-base text-sm font-bold duration-500 group-hover:bg-primary max-lg:opacity-0 max-lg:invisible max-lg:group-hover:visible max-lg:group-hover:opacity-100">{{ isset($value['title']) ? $value['title'] : '' }}</span>
                            <span class="sm:size-45 size-25 flex items-center justify-center rounded-full bg-white text-dark duration-500 sm:text-lg text-2xs font-bold">06</span>
                            <div class="absolute top-full left-1/2 transform -translate-x-1/2 sm:min-w-250 min-w-150 mt-6 bg-white rounded-2lg sm:px-20 sm:py-24 px-10 py-14 opacity-0 invisible duration-500 group-hover:visible group-hover:opacity-100">
                                <p class="text-dark sm:text-base text-xs font-medium">{{ isset($value['description']) ? $value['description'] : '' }}</p>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                    @endif
                    <div class="absolute md:right-[5%] md:top-[-15%] xs:right-[-5%] right-[-12%] top-[-38%] -translate-x-1/2 -z-1">
                        <img src="{{ theme_asset('images/rocket2.png') }}" alt="" class="lg:animate-rocketLaunch xl:w-auto sm:w-210 w-130">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>