@props([
    'title' => null,
    'description' => null
])
<div 
    class="relative flex flex-col justify-center items-center px-6 md:px-10 lg:px-16 xl:px-20 py-20 xl:py-28 bg-no-repeat bg-cover bg-center bg-blend-multiply bg-black/80"
    style="background-image: url({{ asset('img/global/bgUp.png') }});">
    
    <div class="absolute inset-0 bg-black/50 bg-repeat" 
        style="background-image: url({{ asset('img/global/bg.png') }});"></div>

    <div class="relative z-40 flex flex-col justify-center space-y-4 text-center max-w-3xl">
    <h1 class="font-semibold text-2xl md:text-3xl xl:text-4xl text-zinc-100">{{ $title }}</h1>
    <p class="text-xs z-40 md:text-sm text-zinc-300 font-light max-w-2xl mx-auto">
        {{ $description }}
    </p>
    </div>
</div>