<section class="hero-section relative h-screen min-h-[600px] bg-blue text-white pt-[88px] lg:pt-28"
section-shade="transparent">
<div class="big-container h-full">
<div
class="relative flex flex-col md:justify-end pt-10 pb-28 md:w-10/12 lg:w-9/12 xl:w-7/12 max-w-[690px] h-full z-10">
<div class="hero-uppertitle uppertitle"
fade
fade-trigger="none">
<i></i>
{{ content.heroSectionSubTitle }}
</div>
<h1 class="hero-title h1 mt-6"
split-direction="bottom"
split-trigger="none">
{{ content.heroSectionTitle }}
</h1>
</div>
</div>
<div
class="absolute md:top-0 bottom-0 left-4 md:left-auto right-0 min-h-[240px] h-[45vh] md:h-auto md:w-10/12 max-w-[1920px] pointer-events-none">
<div class="hero-img-wrapp relative h-full opacity-60 overflow-hidden"
style="clip-path: polygon(0% 0%, 33.3% 0%, 33.3% 100%, 34.3% 100%, 34.3% 12%, 66.6% 12%, 66.6% 100%, 67.6% 100%, 67.6% 23%, 100% 23%, 100% 100%, 0% 100%)">
{% if content.heroSectionImages|length > 0 %}
{% set image = content.heroSectionImages.thumbnails['1700x1000'] %}
<img class="hero-img opacity-0 scale-[1.4] w-full h-full object-cover"
src="{{ content.heroSectionImages.url }}"
alt="Estimation" />
{% endif %}
</div>
</div>
</section>