<div class="noice-overlay hero-banner-1">
    <section class="main-banner overflow-hidden sm:pt-157 pt-100 bg-linear-(--banner-gradient) z-0 xl:h-[calc(100vh_+_100px)] 2xl:min-h-1000 sm:min-h-800 min-h-600 max-h-1200">
        <div class="container-fluid z-2 relative">
            <h1 class="text-center text-black font-base">
                <span class="2xl:text-10xl xl:text-8xl text-7xl">{{ @$args['text_1'] }}</span>
                <span class="xl:text-4xl text-lg [writing-mode:tb-rl]">{{ @$args['text_2'] }}</span>
                <span class="5xl:!text-15xl/[300px] text-[15vw] leading-[15.5vw] font-title font-semibold">{{ @$args['text_3'] }}</span>
                @if(isset($args['description']) && $args['description'] != '')
                <span class="sm:text-2xl text-xl font-normal break-keep sm:max-w-450 px-10 max-w-330 inline-block relative before:content-[''] before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-60 before:w-13 before:bg-left-bracket before:bg-no-repeat after:content-[''] after:absolute after:right-0 after:top-1/2 after:-translate-y-1/2 after:h-60 after:w-13 after:bg-right-bracket after:bg-no-repeat">{{ $args['description'] }}</span>
                @endif
                <span class="5xl:!text-15xl/[300px] text-[15vw] leading-[15.5vw] font-title font-semibold">{{ @$args['text_4'] }}</span>
                <span class="2xlxl:text-7xl xl:text-6xl text-4xl">{{ @$args['text_5'] }}</span>
            </h1>
            @if(isset($args['social_link']) && $args['social_link'] == "1")
            <ul class="absolute bottom-0 3xl:-right-50 right-0 xl:block hidden">
                {!! get_social_icons('','rotate-180 [writing-mode:tb-rl] mb-30','',false, true) !!}
            </ul>
            @endif
        </div>
        <img src="{{ theme_asset('images/background/bg1.png') }}" alt="bg1" class="absolute z-1 animate-move w-114 h-89 3xl:bottom-[40%] bottom-[30%] right-[10%] mix-blend-hard-light max-xl:hidden">
        <img src="{{ theme_asset('images/background/bg2.png') }}" alt="bg2" class="absolute z-1 animate-move w-127 h-148 3xl:top-[12%] top-[5%] left-[20%] mix-blend-luminosity max-xl:hidden">
        <img src="{{ theme_asset('images/background/bg3.png') }}" alt="bg3" class="absolute z-1 animate-move w-86 h-83 top-[50%] left-[5%] mix-blend-luminosity max-xl:hidden">
        <img src="{{ theme_asset('images/background/bg4.png') }}" alt="bg4" class="absolute z-1 animate-move w-80 h-88 top-[12%] right-[40%] mix-blend-luminosity max-xl:hidden">
    </section>
</div>