@if($block->content['section_style'] === 'style_1')
    <section class="relative block bg-[#0f0d1d] pt-[7.5rem] pr-0 pb-[5.625rem] pl-0">
        <div class="absolute top-0 left-0 hidden md:block w-[38.125rem] h-[37.188rem] opacity-[.08]" style="background-image: url({{ asset('assets/site/images/shapes/real-world-shape.png') }})"></div>

        <div class="w-full mx-auto px-[0.938rem] sm:max-w-[540px] md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1200px]">
            @if($block->translatedInput('title') && $block->translatedInput('subtitle') && $block->translatedInput('description'))
                <div class="flex flex-wrap -mx-[0.938rem]">
                    @if ($block->translatedInput('title') || $block->translatedInput('subtitle'))
                        <div class="shrink-0 lg:flex-[0_0_auto] px-[0.938rem] w-full lg:w-6/12 max-w-full">
                            <div class="relative block">
                                <div class="-mt-3 mb-[3.125rem]">
                                    @if($block->translatedInput('title'))
                                        <h2
                                            class="text-[1.625rem] md:text-[3.125rem] lg:text-[2.5rem] xl:text-[3.125rem] leading-9 md:leading-[3.75rem] lg:leading-[3.125rem] xl:leading-[3.75rem] m-0 font-black text-white uppercase mb-2 -tracking-[0.02em]"
                                            @isset($block->content['title_color'])
                                                style="color: {{ $block->content['title_color'] }}"
                                            @endisset
                                        >
                                            {!! nl2br($block->translatedInput('title')) !!}
                                        </h2>
                                    @endif

                                    @if($block->translatedInput('subtitle'))
                                        <span
                                            class="relative inline-block text-lg leading-[1.875rem] text-[#726f84]"
                                            @isset($block->content['subtitle_color'])
                                                style="color: {{ $block->content['subtitle_color'] }}"
                                            @endisset
                                        >
                                            {!! nl2br($block->translatedInput('subtitle')) !!}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($block->translatedInput('description'))
                        <div class="shrink-0 lg:flex-[0_0_auto] px-[0.938rem] w-full lg:w-6/12 max-w-full">
                            <div class="relative block -mt-2.5 ml-0 mb-12">
                                <p
                                    class="text-base leading-[2.125rem] m-0"
                                    @isset($block->content['description_color'])
                                        style="color: {{ $block->content['description_color'] }}"
                                    @endisset
                                >
                                    {!! nl2br($block->translatedInput('description')) !!}
                                </p>
                            </div>
                        </div>
                    @endif
                </div>
            @else
                <div class="relative block z-[2] -mt-3 mb-[3.125rem] text-center">
                    @if($block->translatedInput('title'))
                        <h2
                            class="m-0 font-black uppercase mb-2 text-3xl md:text-[3.125rem] leading-10 md:leading-[3.75rem] -tracking-[0.02em] text-white"
                            @isset($block->content['title_color'])
                                style="color: {{ $block->content['title_color'] }}"
                            @endisset
                        >
                            {!! nl2br($block->translatedInput('title')) !!}
                        </h2>
                    @endif

                    @if($block->translatedInput('subtitle'))
                        <span
                            class="relative inline-block text-center leading-[1.875rem] text-lg text-[#8f8da0]"
                            @isset($block->content['subtitle_color'])
                                style="color: {{ $block->content['subtitle_color'] }}"
                            @endisset
                        >
                            {!! nl2br($block->translatedInput('subtitle')) !!}
                        </span>
                    @endif
                </div>
            @endif

            <div class="flex flex-wrap -mx-[0.938rem]">
                @foreach($services as $service)
                    <div class="shrink-0 lg:flex-[0_0_auto] px-[0.938rem] h-full w-full md:w-6/12 lg:w-4/12 max-w-full wow fadeInUp" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <div class="relative block mb-[1.875rem] pt-[3.375rem] px-[1.875rem] pb-[4.688rem] h-full bg-[#06050c] transition-colors duration-500">
                            <h2 class="mb-5 text-2xl leading-[1.813rem] text-white font-bold uppercase -tracking-[0.02em]">
                                <a class="text-inherit" style="background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 87% / 0px 2px no-repeat;" href="#">
                                    {{ $service->title }}
                                </a>
                            </h2>
                            <a class="relative inline-block text-[#8f8da0] no-underline text-xs leading-[2.125rem] font-bold uppercase tracking-widest before:content-[''] before:absolute before:bottom-0 before:left-0 before:h-0.5 before:w-2.5 before:bg-current before:transition-[width] before:duration-500" href="#">
                                Read More
                            </a>
                            <div class="absolute bottom-[3.25rem] right-[3.75rem]">
                                <span class="block scale-100 origin-center transition-transform	duration-500">
                                    <img class="max-w-full w-16 h-16" src="{{ $service->image('icon') }}">
                                </span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@elseif($block->content['section_style'] === 'style_2')
    <section class="relative block bg-[#f2f4f8] pt-[7.5rem] pb-[5.75rem] px-0">
        <div class="w-full mx-auto px-[0.938rem] sm:max-w-[540px] md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1200px]">
            @if($block->translatedInput('title') && $block->translatedInput('subtitle') && $block->translatedInput('description'))
                <div class="flex flex-wrap -mx-[0.938rem]">
                    @if ($block->translatedInput('title') || $block->translatedInput('subtitle'))
                        <div class="shrink-0 lg:flex-[0_0_auto] px-[0.938rem] w-full lg:w-6/12 max-w-full">
                            <div class="relative block">
                                <div class="-mt-3 mb-[3.125rem]">
                                    @if($block->translatedInput('title'))
                                        <h2
                                            class="text-[1.625rem] md:text-[3.125rem] lg:text-[2.5rem] xl:text-[3.125rem] leading-9 md:leading-[3.75rem] lg:leading-[3.125rem] xl:leading-[3.75rem] m-0 font-black text-[#0f0d1d] uppercase mb-2 -tracking-[0.02em]"
                                            @isset($block->content['title_color'])
                                                style="color: {{ $block->content['title_color'] }}"
                                            @endisset
                                        >
                                            {!! nl2br($block->translatedInput('title')) !!}
                                        </h2>
                                    @endif

                                    @if($block->translatedInput('subtitle'))
                                        <span
                                            class="relative inline-block text-lg leading-[1.875rem] text-[#726f84]"
                                            @isset($block->content['subtitle_color'])
                                                style="color: {{ $block->content['subtitle_color'] }}"
                                            @endisset
                                        >
                                            {!! nl2br($block->translatedInput('subtitle')) !!}
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif

                    @if($block->translatedInput('description'))
                        <div class="shrink-0 lg:flex-[0_0_auto] px-[0.938rem] w-full lg:w-6/12 max-w-full">
                            <div class="relative block -mt-2.5 ml-0 mb-12">
                                <p
                                    class="text-base leading-[2.125rem] m-0"
                                    @isset($block->content['description_color'])
                                        style="color: {{ $block->content['description_color'] }}"
                                    @endisset
                                >
                                    {!! nl2br($block->translatedInput('description')) !!}
                                </p>
                            </div>
                        </div>
                    @endif
                </div>
            @else
                <div class="relative block z-[2] -mt-3 mb-[3.125rem] text-center">
                    @if($block->translatedInput('title'))
                        <h2
                            class="m-0 font-black uppercase mb-2 text-3xl md:text-[3.125rem] leading-10 md:leading-[3.75rem] -tracking-[0.02em] text-white"
                            @isset($block->content['title_color'])
                                style="color: {{ $block->content['title_color'] }}"
                            @endisset
                        >
                            {!! nl2br($block->translatedInput('title')) !!}
                        </h2>
                    @endif

                    @if($block->translatedInput('subtitle'))
                        <span
                            class="relative inline-block text-center leading-[1.875rem] text-lg text-[#8f8da0]"
                            @isset($block->content['subtitle_color'])
                                style="color: {{ $block->content['subtitle_color'] }}"
                            @endisset
                        >
                            {!! nl2br($block->translatedInput('subtitle')) !!}
                        </span>
                    @endif
                </div>
            @endif

            <div class="flex flex-wrap -mx-[0.938rem]">
                @foreach($services as $service)
                    <div class="shrink-0 md:flex-[0_0_auto] px-[0.938rem] w-full md:w-6/12 xl:w-3/12 max-w-full wow fadeInUp animated" data-wow-delay="0ms" data-wow-duration="1500ms">
                        <div class="relative block bg-white shadow-[0_0_30px_0_#0000000a] mb-[3.75rem] pt-[3.125rem] pb-[3.875rem] px-[3.125rem]">
                            <div>
                                <span class="relative inline-block scale-100 transition-all duration-200">
                                    <img class="max-w-full w-16 h-16" src="{{ $service->image('icon') }}">
                                </span>
                            </div>
                            <h3 class="text-xl leading-[2.125rem] font-extrabold uppercase mb-7 mt-3.5 -tracking-[0.02em]">
                                <a class="text-[#0f0d1d] no-underline" style="background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 87% / 0px 2px no-repeat" href="#">
                                    {{ $service->title }}
                                </a>
                            </h3>
                            <p class="text-base leading-[2.125rem] m-0">
                                {!! nl2br($service->short_description) !!}
                            </p>
                            <a class="no-underline h-[4.063rem] w-[4.063rem] absolute -bottom-8 left-[3.125rem] rounded-full bg-white shadow-[0_0_30px_0_#0000000a] text-[#0f0d1d] flex items-center justify-center text-xl leading-[2.125rem] transition-all duration-500">
                                <span class="icon-right-arrow1"></span>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@elseif($block->content['section_style'] === 'style_3')
<section class="relative block pt-[7.5rem] pb-[4.875rem] px-0"></section>
    <div class="w-full mx-auto px-[0.938rem] sm:max-w-[540px] md:max-w-[720px] lg:max-w-[960px] xl:max-w-[1200px]">
        @if($block->translatedInput('title') && $block->translatedInput('subtitle') && $block->translatedInput('description'))
            <div class="flex flex-wrap -mx-[0.938rem]">
                @if ($block->translatedInput('title') || $block->translatedInput('subtitle'))
                    <div class="shrink-0 lg:flex-[0_0_auto] px-[0.938rem] w-full lg:w-6/12 max-w-full">
                        <div class="relative block">
                            <div class="-mt-3 mb-[3.125rem]">
                                @if($block->translatedInput('title'))
                                    <h2
                                        class="text-[1.625rem] md:text-[3.125rem] lg:text-[2.5rem] xl:text-[3.125rem] leading-9 md:leading-[3.75rem] lg:leading-[3.125rem] xl:leading-[3.75rem] m-0 font-black text-[#0f0d1d] uppercase mb-2 -tracking-[0.02em]"
                                        @isset($block->content['title_color'])
                                            style="color: {{ $block->content['title_color'] }}"
                                        @endisset
                                    >
                                        {!! nl2br($block->translatedInput('title')) !!}
                                    </h2>
                                @endif

                                @if($block->translatedInput('subtitle'))
                                    <span
                                        class="relative inline-block text-lg leading-[1.875rem] text-[#726f84]"
                                        @isset($block->content['subtitle_color'])
                                            style="color: {{ $block->content['subtitle_color'] }}"
                                        @endisset
                                    >
                                        {!! nl2br($block->translatedInput('subtitle')) !!}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif

                @if($block->translatedInput('description'))
                    <div class="shrink-0 lg:flex-[0_0_auto] px-[0.938rem] w-full lg:w-6/12 max-w-full">
                        <div class="relative block -mt-2.5 ml-0 mb-12">
                            <p
                                class="text-base leading-[2.125rem] m-0"
                                @isset($block->content['description_color'])
                                    style="color: {{ $block->content['description_color'] }}"
                                @endisset
                            >
                                {!! nl2br($block->translatedInput('description')) !!}
                            </p>
                        </div>
                    </div>
                @endif
            </div>
        @else
            <div class="relative block z-[2] -mt-3 mb-[3.125rem] text-center">
                @if($block->translatedInput('title'))
                    <h2
                        class="m-0 font-black uppercase mb-2 text-3xl md:text-[3.125rem] leading-10 md:leading-[3.75rem] -tracking-[0.02em] text-white"
                        @isset($block->content['title_color'])
                            style="color: {{ $block->content['title_color'] }}"
                        @endisset
                    >
                        {!! nl2br($block->translatedInput('title')) !!}
                    </h2>
                @endif

                @if($block->translatedInput('subtitle'))
                    <span
                        class="relative inline-block text-center leading-[1.875rem] text-lg text-[#8f8da0]"
                        @isset($block->content['subtitle_color'])
                            style="color: {{ $block->content['subtitle_color'] }}"
                        @endisset
                    >
                        {!! nl2br($block->translatedInput('subtitle')) !!}
                    </span>
                @endif
            </div>
        @endif

        <ul class="text-center pt-0 relative block">
            @foreach($services as $key => $service)
                <li class="relative inline-block max-w-[17.75rem] w-full text-center py-0 px-[2.188rem] mb-[1.875rem] @if($key !== 0) md:before:absolute md:before:top-0 md:before:left-0 md:before:bottom-3 md:before:content-[''] md:before:w-px md:before:bg-[#e6e9ef] @endif wow fadeInUp animated" data-wow-delay="0ms" data-wow-duration="1500ms">
                    <div class="relative w-28 h-28 my-0 mx-auto rounded-full bg-white shadow-[0_10px_60px_0_#00000012] flex items-center justify-center transition-all z-[1]">
                        <img class="max-w-full w-16 h-16" src="{{ $service->image('icon') }}">
                    </div>
                    <h3 class="text-lg font-bold leading-6 uppercase mt-[1.625rem] mb-[0.938rem] -tracking-[0.02em]">{{ $service->title }}</h3>
                    <p class="text-base m-0 mx-auto max-w-[16.875rem]">{!! nl2br($service->short_description) !!}</p>
                </li>
            @endforeach
        </ul>
    </div>
@endif