@extends("Site.Layouts.blank")
@section ("content")


    <section class="relative">

        <!-- *=*=*=*=*=*=*=*=*=* Section Banner *=*=*=*=*=*=*=*=*=* -->
        <div class="w-full relative overflow-x-hidden overflow-y-hidden">
            <img class="w-full  min-h-[320px] md:h-auto object-cover " src="{{$setting['Services_page_banner']}}" alt="banner">
            <div class="left_bottom-absolute min-w-full">
                <div class="Banner_text-wrapper">
                    <h1> @lang('site.Services') </h1>
                </div>
            </div>
        </div>

    </section>


    <!-- *=*=*=*=*=*=*=*=*=* Section Services List *=*=*=*=*=*=*=*=*=* -->

    <section style="background-image: url({{asset('site_assets/images/services/background.webp')}}) ;  background-color: #D1D1D1; " class="bg-contain bg-no-repeat  pt-24  relative"   id="Services_list">

{{--        <img src="{{asset('site_assets/images/services/side2.webp')}}" alt="side image" class="absolute " style="inset: 1703px 0 auto auto" > <!-- hidden sm:block -->--}}
{{--        <img src="{{asset('site_assets/images/services/side1.webp')}}" alt="side image" class="absolute " style="inset: auto auto 378px 0" > <!-- hidden sm:block -->--}}

        <div class="sm:w-11/12 md:w-4/5 lg:w-[70%] mx-auto">
            @foreach($Services as $key => $service)
                <div class="Services_list_item   md:flex   mb-8 md:mb-auto" id="Service_{{ \Str::slug($service->name) }}">
                    <div class="flex-1  flex flex-col justify-center gap-5 items-center md:items-start" data-aos="fade-up">
                        <img src="{{$service->icon}}" alt="{{$service->name}}" class="w-16">
                        <h2 class="text-[25px] font-light text-primary">{{$service->name}}</h2>
                        <p class="lg:leading-loose px-2 md:px-0"> {{$service->description}} </p>
                    </div>
                    <div class="Service_img_wrapper  flex-1 flex">
                        <img src="{{$service->image}}" alt="{{$service->name}}" class="h-80 md:h-auto" @if($key%2==0) data-aos="fade-up-left" @else data-aos="fade-up-right" @endif  >
                    </div>
                </div>
            @endforeach
        </div>
        <br><br><br>
    </section>


    <!-- *=*=*=*=*=*=*=*=*=* Section CONTACT US *=*=*=*=*=*=*=*=*=* -->
    @include('Site._contact_us')

@endsection


@section("script")
    <script>

    </script>
@endsection