@extends('front.layouts.master')

@section('content')
    <section id="inner-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="inner-breadcrumb">
                        <h2>Our Services</h2>
                        <ul>
                            <li class="breadcrumb-item font-medium text-light"><a href="{{ route('front.home') }}">Home</a>
                            </li>
                            <li class="breadcrumb-item font-medium text-light">Our Services</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section id="area-expert" class="mt-4 mt-md-4">
         <div class="container">
             <div class="row">
                 <div class="col-lg-12">
                     <div class="section-title-box text-center wow fadeInUp">
                         <span>{{ $pageContent->service_title ?? 'Our Services' }}</span>
                         <h2>{!! $pageContent->service_description ?? 'Our Areas of Expertise' !!} </h2>
                     </div>
                 </div>
             </div>
            @if (isset($services) && count($services) > 0)
             <div class="row wow fadeInRight">
                    @foreach ($services as $service)
                        <div class="col-lg-3 col-sm-6">
                            <div class="expertise-box text-center">
                                <img src="{{ !empty($service->image) ? asset('uploads/service/' . $service->image) : asset('front/assets/img/heart.png') }}"
                                    class="img-fluid" alt="{{ $service->title }}">
                                <h4>{{ $service->title }}</h4>
                                <p>{{ $service->description }}</p>
                                <div class="read-more-btn">
                                    <div class="read-more">
                                        <a href="#">Read More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
             </div>
            @endif
            
         </div>
     </section>

@endsection