<section>
    <div class="container-full">
        <div class="flex flex-wrap items-center services-wrapper">
            <div class="service-card active">
                <div class="relative service-img after:content-[''] after:absolute after:top-0 after:left-0 after:size-full after:bg-black after:duration-500 after:opacity-30 lg:h-800 h-500">
                    <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['left_image']) }}" alt="" class="object-cover size-full">
                </div>
                <div class="absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 sm:w-538 w-300 max-w-full duration-500 content">
                    @if(isset($args['left_title']) && $args['left_title'] != '')
                    <h3 class="text-7xxl/[1] mb-35 text-white">{{ $args['left_title'] }}</h3>
                    @endif
                    <div class="h-20 relative after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-1 after:block after:bg-linear-(--divider-gradient)"></div>
                    @if(isset($args['left_description']) && $args['left_description'] != '')
                    <p class="sm:text-xl/30 text-lg text-white mt-15">{{ $args['left_description'] }}</p>
                    @endif
                </div>
                @if(isset($args['left_title']) && $args['left_title'] != '')
                <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 duration-500 service-text">
                    <h4 class="md:text-[190px]/[1] text-8xl text-white/30 font-bold uppercase">{{ $args['left_title'] }}</h4>
                </div>
                @endif
            </div>
            <div class="service-card">
                <div class="relative service-img after:content-[''] after:absolute after:top-0 after:left-0 after:size-full after:bg-black after:duration-500 after:opacity-30 lg:h-800 h-500">
                    <img src="{{ DzHelper::getStorageImage('storage/magic-editor/'.@$args['right_image']) }}" alt="" class="object-cover size-full">
                </div>
                <div class="absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 sm:w-538 w-300 max-w-full duration-500 content">
                    @if(isset($args['right_title']) && $args['right_title'] != '')
                    <h3 class="text-7xxl/[1] mb-35 text-white">{{ $args['right_title'] }}</h3>
                    @endif
                    <div class="h-20 relative after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-1 after:block after:bg-linear-(--divider-gradient)"></div>
                    @if(isset($args['right_description']) && $args['right_description'] != '')
                    <p class="sm:text-xl/30 text-lg text-white mt-15">{{ $args['right_description'] }}</p>
                    @endif
                </div>
                @if(isset($args['right_title']) && $args['right_title'] != '')
                <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 duration-500 service-text">
                    <h4 class="md:text-[190px]/[1] text-8xl text-white/30 font-bold uppercase">{{ $args['right_title'] }}</h4>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>