<section class="noice-overlay rocket-section">
    <div class="xl:py-148 sm:py-80 py-40">
        <div class="container">
            <div class="sm:mb-50 mb-20 text-center max-w-900 mx-auto pxl-heading-scroll-effect">
                @if(isset($args['subtitle']) && $args['subtitle'] != '')
                <span class="text-2xl dark:text-white mb-5 block">{{ $args['subtitle'] }}</span>
                @endif
                <h2 class="xl:text-6xl md:text-5xl text-4xl heading-text"> {{ isset($args['title']) ? $args['title'] : '' }}</h2>
                @if(isset($args['description']) && $args['description'] != '')
                <p class="text-lg/50">{{ $args['description'] }}</p>
                @endif
            </div>
            <div class="relative">
                <div class="absolute top-0 left-1/2 -translate-x-1/2 z-0 h-full max-lg:hidden">
                    <svg width="202" height="744" viewBox="0 0 202 744" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_29543_1305)">
                        <path class="dark:stroke-white stroke-black" id="rocket-path" d="M186 -15L50.3294 90.0353C24.7048 109.874 24.4322 148.473 49.7742 168.672L152.943 250.9C178.058 270.917 178.058 309.083 152.943 329.1L49.0571 411.9C23.9423 431.917 23.9423 470.083 49.0572 490.1L152.943 572.9C178.058 592.917 178.058 631.083 152.943 651.1L0 773" stroke-opacity="0.2" stroke-dasharray="10 8"/>
                        </g>
                        <defs>
                        <linearGradient id="paint0_linear_29543_1305" x1="101" y1="-32" x2="101" y2="773" gradientUnits="userSpaceOnUse">
                        <stop offset="0.03" stop-color="white" stop-opacity="0"/>
                        <stop offset="0.159946" stop-color="white"/>
                        <stop offset="0.865591" stop-color="white"/>
                        <stop offset="0.966398" stop-color="white" stop-opacity="0"/>
                        </linearGradient>
                        <clipPath id="clip0_29543_1305">
                        <rect width="202" height="744" fill="white"/>
                        </clipPath>
                        </defs>
                    </svg>
                </div>
            
                <div class="absolute top-0 left-1/2 -translate-x-1/2 z-0 overflow-hidden max-lg:hidden" id="green-path">
                    <svg width="202" height="744" viewBox="0 0 202 744" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_29543_13051)">
                        <path d="M186 -15L50.3294 90.0353C24.7048 109.874 24.4322 148.473 49.7742 168.672L152.943 250.9C178.058 270.917 178.058 309.083 152.943 329.1L49.0571 411.9C23.9423 431.917 23.9423 470.083 49.0572 490.1L152.943 572.9C178.058 592.917 178.058 631.083 152.943 651.1L0 773" stroke="url(#paint0_linear_29541_1283)" stroke-dasharray="10 8"/>
                        </g>
                        <defs>
                        <linearGradient id="paint0_linear_29541_1283" x1="101" y1="-32" x2="101" y2="773" gradientUnits="userSpaceOnUse">
                        <stop offset="0.04" stop-color="var(--primary)" stop-opacity="0"/>
                        <stop offset="0.159946" stop-color="var(--primary)"/>
                        <stop offset="0.865591" stop-color="var(--primary)"/>
                        <stop offset="0.966398" stop-color="var(--primary)" stop-opacity="0"/>
                        </linearGradient>
                        <clipPath id="clip0_29543_13051">
                        <rect width="202" height="744" fill="white"/>
                        </clipPath>
                        </defs>
                    </svg>
                </div>

                <!-- Rocket Image -->
                <img id="rocket" alt="" src="{{ theme_asset('images/rocket.png') }}" class="absolute z-10 max-lg:hidden left-1/2 !top-0 rotate-[140deg]" style="top: 8%;">
            
                <!-- Explosion GIF (hidden initially) -->
                <img id="blast" alt="" src="{{ theme_asset('images/blast.gif') }}" class="size-40 absolute top-0 left-1/2 z-20 hidden">
               
                @if(isset($args['item']))
                @foreach($args['item'] as $key => $value)
                @if($key % 2 == 0)
                <div class="relative anime-row table w-full lg:h-160 lg:mb-0 mb-20 line-left">
                    <div class="xl:w-1/3 lg:w-[40%] w-full lg:absolute top-[30%] xl:left-[9%] left-0">
                        <div style="--num: '{{ $key + 1 }}'" class="card bordergradient rounded-lg relative before:content-[var(--num)] before:absolute before:bottom-0 before:left-30 before:text-6xl/47 before:font-bold before:text-white/5 before:content-counter before:[counter-increment:counter-item]">
                            <div class="py-40 sm:px-30 px-20">
                                <div class="flex sm:gap-22 gap-15">
                                    <div class="h-auto sm:min-w-70 min-w-50">
                                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['icon']) }}" alt="" >
                                    </div>
                                    <div>
                                        <h3 class="sm:text-2xl/[28px] text-xl font-medium mb-9 text-white">
                                            <a class="hover:text-primary" href="{{ @$value['url'] }}">
                                                {{ isset($value['title']) ? $value['title'] : '' }}
                                            </a>
                                        </h3>
                                        <span class="block text-lg font-normal text-primary">{{ isset($value['description']) ? $value['description'] : '' }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute top-[60%] left-[46%]">
                        <span class="lg:block size-60 leading-60 num-circle text-center rounded-full bg-card text-white hidden">{{ $key + 1 }}</span>
                    </div>
                </div>
                @else
                <div class="relative anime-row table w-full lg:h-160 lg:mb-0 mb-20 line-right">
                    <div class="xl:w-1/3 lg:w-[40%] w-full lg:absolute top-[30%] xl:right-[9%] right-0">
                        <div style="--num: '{{ $key + 1 }}'" class="card bordergradient rounded-lg relative before:content-[var(--num)] before:absolute before:bottom-0 before:left-30 before:text-6xl/47 before:font-bold before:text-white/5 before:content-counter before:[counter-increment:counter-item]">
                            <div class="py-40 sm:px-30 px-20">
                                <div class="flex sm:gap-22 gap-15">
                                    <div class="h-auto sm:min-w-64 min-w-50">
                                        <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$value['icon']) }}" alt="" >
                                    </div>
                                    <div>
                                        <h3 class="sm:text-2xl/[28px] text-xl font-medium mb-9 text-white">
                                            <a class="hover:text-primary" href="{{ @$value['url'] }}">
                                                {{ isset($value['title']) ? $value['title'] : '' }}
                                            </a>
                                        </h3>
                                        <span class="block text-lg font-normal text-primary">{{ isset($value['description']) ? $value['description'] : '' }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="absolute top-[60%] right-[46%]">
                        <span class="lg:block size-60 leading-60 num-circle text-center rounded-full bg-card text-white hidden">{{ $key + 1 }}</span>
                    </div>
                </div>
                @endif
                @endforeach
                @endif

            </div>
        </div>
        <img src="{{ theme_asset('images/background/bg3.png') }}" alt="" class="absolute w-64 top-[30%] right-[8%] -z-1 animate-move max-xl:hidden">
        <img src="{{ theme_asset('images/background/bg4.png') }}" alt="" class="absolute w-48 bottom-[24%] left-[8%] -z-1 animate-move max-xl:hidden">
        <img src="{{ theme_asset('images/background/bg9.png') }}" alt="" class="absolute w-35 bottom-[14%] right-[8%] -z-1 animate-move max-xl:hidden">
    </div>
    <img src="{{ theme_asset('images/background/bg6.png') }}" alt="" class="absolute top-[-8%] left-[-47%] -z-1">
    <img src="{{ theme_asset('images/background/bg10.png') }}" alt="" class="absolute top-[-30%] right-[0%] max-xl:w-[60%] -z-1">
</section>
@if(isset($args['bottom_title']) && $args['bottom_title'] != '' || isset($args['redirect_button_text']) && $args['redirect_button_text'] != '')
<section class="noice-overlay bg-bg8 bg-cover bg-no-repeat bg-position-[center_top]">
    <div class="xl:py-82 sm:py-80">
        <div class="container">
            <div class="text-center">
                @if(isset($args['bottom_title']) && $args['bottom_title'] != '')
                <h4 class="text-4xl/35 sm:mb-35 mb-10">{{ $args['bottom_title'] }}</h4>
                @endif
                @if(isset($args['redirect_button_text']) && $args['redirect_button_text'] != '')
                <a href="{{ @$args['redirect_button_url'] }}" class="btn btn-primary style-1 p-2 group button--stroke flairBtn magneticBtn" data-block="button">
                    <span class="button-flair__wrapper">
                        <span class="button-flair"></span>
                    </span>
                    <span class="button__label font-normal xl:ps-25 px-10 inline-flex items-center gap-14">{{ $args['redirect_button_text'] }}</span>
                    <span class="inline-flex justify-center items-center size-32 rounded-full bg-secondary text-white duration-100 group-hover:bg-primary group-hover:text-secondary z-1">
                        <i class="fa-solid fa-arrow-right text-sm"></i>
                    </span>
                </a>
                @endif
            </div>
        </div>
    </div>
</section>
@endif


