@if($block->content['section_style'] === 'style_1')
    <section class="relative block px-0 pt-[6.813rem] pb-[7.5rem]">
        @if(isset($block->content['background_type']) && $block->content['background_type'] === 'image')
            <div
                class="absolute top-0 left-0 h-full w-full bg-no-repeat bg-cover bg-[#0f0d1d] bg-blend-luminosity opacity-50 {{ isset($block->content['background_parallax']) && $block->content['background_parallax'] ? 'jarallax' : '' }}"
                style="background-image: url({{ $block->image('image__banner_background') }})"
                @if(isset($block->content['background_parallax']) && $block->content['background_parallax'])
                    data-behavior="parallaxEffect"
                    data-parallax-options='{"speed": 0.2, "imgPosition": "50% 0%" }'
                @endif
            ></div>
        @endif


        @isset($block->content['background_overlay'])
            <div class="overflow-hidden absolute lef-0 top-0 h-full w-full" style="background: {{ hex2rgba($block->content['background_overlay'], .5) }};"></div>
        @endisset

        <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]">
            <div class="w-full">
                <div class="relative block text-center">
                    @if($block->translatedInput('title'))
                        <h2
                            class="mb-[2.875rem] text-[2.188rem] md:text-[3.313rem] lg:text-[3.75rem] leading-[2.813rem] md:leading-[3.938rem] lg:leading-[4.375rem] text-white font-black uppercase -tracking-[0.02em]"
                            @isset($block->content['title_color'])
                                style="color: {{ $block->content['title_color'] }}"
                            @endisset
                        >
                            {!! nl2br($block->translatedInput('title')) !!}
                        </h2>
                    @endif

                    @if(isset($block->content['button']) && $block->translatedInput('button_text'))
                        <a
                            class="relative inline-block border-0 outline-0 py-[1.125rem] px-[3.125rem] bg-[#3c72fc] align-middle text-white text-sm leading-[2.125rem] font-bold uppercase tracking-widest"
                            style="
                                @isset($block->content['button_bg_color']) background-color: {{ $block->content['button_bg_color'] }}; @endisset
                                @isset($block->content['button_color']) color: {{ $block->content['button_color'] }}; @endisset
                            "
                            href="#"
                        >
                            {{ $block->translatedInput('button_text') }}
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </section>
@else
    <section class="relative block py-[6.875rem]">
        @if(isset($block->content['background_type']) && $block->content['background_type'] === 'image')
            <div
                class="absolute top-0 left-0 h-full w-full bg-no-repeat bg-cover bg-[#0f0d1d] bg-blend-luminosity opacity-50 {{ isset($block->content['background_parallax']) && $block->content['background_parallax'] ? 'jarallax' : '' }}"
                style="background-image: url({{ $block->image('image__banner_background') }})"
                @if(isset($block->content['background_parallax']) && $block->content['background_parallax'])
                    data-behavior="parallaxEffect"
                    data-parallax-options='{"speed": 0.2, "imgPosition": "50% 0%" }'
                @endif
            ></div>
        @endif

        @isset($block->content['background_overlay'])
            <div class="overflow-hidden absolute lef-0 top-0 h-full w-full" style="background: {{ hex2rgba($block->content['background_overlay'], .5) }};"></div>
        @endisset

        <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]">
            <div class="flex flex-wrap -mx-[0.938rem]">
                <div class="shrink-0 px-[0.938rem] w-full max-w-full">
                    <div class="relative flex flex-col lg:flex-row justify-center lg:justify-between items-center text-center lg:text-left">
                        <div>
                            @if($block->translatedInput('title'))
                                <h2
                                    class="text-[1.563rem] lg:text-[2.5rem] leading-[2.188rem] leading-[3.125rem] text-white font-black uppercase -tracking-[0.02em]"
                                    @isset($block->content['title_color'])
                                        style="color: {{ $block->content['title_color'] }}"
                                    @endisset
                                >
                                    {!! nl2br($block->translatedInput('title')) !!}
                                </h2>
                            @endif
                        </div>

                        @if(isset($block->content['button']) && $block->translatedInput('button_text'))
                            <div class="mt-[1.875rem] lg:mt-0">
                                <a
                                    class="relative inline-block border-0 outline-0 py-[1.125rem] px-[3.125rem] bg-white align-middle text-[#0f0d1d] text-sm leading-[2.125rem] font-bold uppercase tracking-widest"
                                    style="
                                        @isset($block->content['button_bg_color']) background-color: {{ $block->content['button_bg_color'] }}; @endisset
                                        @isset($block->content['button_color']) color: {{ $block->content['button_color'] }}; @endisset
                                    "
                                    href="#"
                                >
                                    {{ $block->translatedInput('button_text') }}
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif