@extends('layouts.front-layout')
@section('title', 'Services')
@section('content')

    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{$get_single_services->getMedia('services_top_banner_image')->first()->getUrl()}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>{{$pageData['Services']['top_title']}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->
    <section class="aboutSection">
        <div class="container">
            @foreach($services as $key => $service)
                <div class="row align-items-center {{ $key % 2 == 0 ? '' : 'flex-row-reverse' }}">
                    <div class="col-md-6" data-aos="fade-up">
                        <figure class="imgabt2">
                            <img src="{{ optional($service->getMedia('services_image')->first())->getUrl() }}" class="img-fluid" alt="">
                        </figure>
                    </div>
                    <div class="col-md-6" data-aos="fade-up">
                        <div class="aboutcntnt">
                            <h2 class="mainHead">{{ $service->title }}</h2>
                            <p>{!!  $service->description  ?? '' !!}</p>
                        </div>
                    </div>
                </div>
                @if(!$loop->last)
                    <div class="mt-5"></div> <!-- Add spacing between sections -->
                @endif
            @endforeach
        </div>
    </section>

@endsection