@php
    $howItWorksContent = getContent('how_it_works.content', true);
    $howItWorksElement = getContent('how_it_works.element', orderById: true);
@endphp
<section class="process-section my-120">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-5">
                <div class="section-title text-center">
                    <span class="btn btn--base btn--section animate" data-direction="down">{{ __($howItWorksContent?->data_values?->heading ?? '') }}</span>
                    <h2 class="main-title animate" data-direction="down">{{ __($howItWorksContent?->data_values?->subheading ?? '') }}</h2>
                    <p class="sub-title animate" data-direction="down">{{ __($howItWorksContent?->data_values?->short_details ?? '') }}</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="process-content mt-60">
                    @foreach ($howItWorksElement as $key => $howItWork)
                        <div class="process-content__item animate" data-direction="left">
                            <svg stroke="hsl(var(--white)/.2)" stroke-width="2" class="text-line" width="100%">
                                <text x="50%" dominant-baseline="middle" text-anchor="middle" y="65%">0{{ $key + 1 }}</text>
                            </svg>
                            <h6>{{ __($howItWork?->data_values?->title ?? '') }}</h6>
                            <p> {{ __($howItWork?->data_values?->short_description ?? '') }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>