@extends('front.layouts.app')
@section('title', 'Hospitality Services')
@section('content')

<!-- BANNER SECTION -->
<section id="back-top" class="w-100 float-left banner-con sub-banner gallery-banner home-banner position-relative">
    <div class="banner-inner-con position-relative">
        <div class="wrapper2">
            <div class="row">
                <div class="col-lg-7 col-md-7">
                    <div class="banner-title">
                        <h1 class="text-white" data-aos="fade-up" data-aos-duration="600">Hospitality Services</h1>
                        <p class="mb-0" data-aos="fade-up" data-aos-duration="600">
                             {{ strip_tags($descr) ?? 'No description found.' }}
                        </p>
                    </div>
                </div>
                <!--<div class="col-lg-5 col-md-5 order-md-0 order-1">
                    <div class="banner-img">
                        
                     
                        <img src="{{ asset('front/images/it-serve.jpg') }}">
                       
    <br>
                    </div>
                </div>-->
            </div>
        </div>
    </div>
</section>
<!-- BANNER SECTION -->

<!-- CLEANING SERVICES SECTION -->

@foreach($services as $key => $service)
    @php
        $isEven = $key % 2 == 0;

    @endphp

    <section class="w-100 float-left clean-con {{ !$isEven ? 'bg-fafafa service-dots position-relative' : '' }}  ">
        <div class="wrapper2">
            <div class="generic-box {{ !$isEven ? 'service-box2' : 'service-box' }} position-relative d-flex align-items-center {{ !$isEven ? 'flex-row-reverse' : '' }}">

                <!-- Image Column -->
                <div class="generic-box-img col-md-6">
                    <div class="generic-box-img1 position-relative" data-aos="{{ $isEven ? 'fade-right' : 'fade-left' }}" data-aos-duration="600">
                        <figure class="mb-0">
                            <img src="{{ url('uploads/orginal/'.$service->image) }}" alt="{{ $service->name }}" class="img-fluid">
                        </figure>
                    </div>
                </div>

                <!-- Text Column -->
                <div class="generic-box-content col-md-6 position-relative">
                    <h2 data-aos="fade-up" data-aos-duration="600">{{ $service->name }}</h2>
                    <p data-aos="fade-up" data-aos-duration="600"><b>{!! strip_tags(base64_decode($service->description)) !!} </b></p>

                </div>

            </div>
        </div>
    </section>
@endforeach

@endsection