<div class="page-services">
    <div class="container">
        <div class="row">

            @foreach ($services as $key => $data)

            <div class="col-lg-3">
                <!-- Service Item Start -->
                <div class="service-item wow fadeInUp" data-wow-delay="0.2s">
                    <div class="icon-box">
                        <img src="{{ asset('images/service/' . $data->icon) }}" alt="">
                    </div>
                    <div class="service-content">
                        <h3><a href="{{ route('service-details', $data->id) }}">{{ $data->title }}</a></h3>
                        <p>{{ $data->short_description }}</p>
                    </div>
                    <div class="service-btn">
                        <a href="{{ route('service-details', $data->id) }}" class="readmore-btn">read more</a>
                    </div>
                </div>
                <!-- Service Item End -->
            </div>

            @endforeach

        </div>
    </div>
</div>