<section class="text-white pt-28 md:pt-[120px] pb-8 md:pb-20"
section-shade="dark">
<div class="container flex flex-col lg:flex-row lg:justify-between gap-16">
<div class="lg:w-7/12 xl:w-8/12">
<div class="relative w-full h-[335px] md:h-[390px] lg:h-[700px] xl:h-[930px] clip-path-tr-bl overflow-hidden">
{# image size 1730 × 1390 webp ~70-100kb #}
{% if content.singleServiceImage|length > 0 %}
{% set image = content.singleServiceImage.url %}
<img class="absolute object-cover w-full h-full"
zoom-out
zoom-out-trigger="scroll"
src="{{ image }}"
alt="Benefits"
loading="lazy">
{% endif %}
</div>
</div>
<div class="md:w-8/12 lg:w-5/12 xl:w-4/12">
<h2 class="h2"
split-direction="top"
split-trigger="scroll">{{content.singleServiceTitle}}</h2>
<div class="text-sm mt-8"
fade
fade-trigger="scroll">{{content.singleServiceText|raw}}</div>
<div class="mt-12">
<h3 class="title text-2xl"
split-direction="bottom"
split-trigger="scroll">{{content.BenefitsTitle}}</h3>
<ul class="flex flex-col gap-6 mt-6">
{% for item in content.benefits %}
<li class="flex gap-4"
fade
fade-trigger="scroll">
<span class="flex items-center justify-center w-8 h-8 border border-white rounded shrink-0">
<svg class="w-3 h-3">
<use xlink:href="#icon-check"></use>
</svg>
</span>
{{item.BenefitsText}}
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</section>