@extends('front.template.header')
@section('content')
<div id="content" class="site-content ">
            
            <!----icon box---->
            <section class="icon-box-section position-relative z_99">
               <!--===============spacing==============-->
               <div class="pd_top_90"></div>
               <!--===============spacing==============-->
               <div class="container">
                  <div class="row">

                      @foreach ($services as $service)
                     <div class="col-xl-3 col-lg-6 col-md-12 col-sm-12 mb-sm-5 mb-md-5 mb-lg-5 mb-xl-0">
                        <div class="icon_box_all style_five">
                           <div class="icon_content">
                              <!-- <div class="icon">
                                 <span class="icon-support"></span>
                              </div> -->
                              <div class="img-area">
                                 <img class="" src="{{ asset('storage/services/'.$service->service_image) }}" alt="image">
                              </div>
                              <!-- <small>01</small> -->
                              <div class="text_box">
                                 <h2>{{$service->title}}</h2>
                                 <p>{{$service->subtitle}}</p>
                              </div>
                              <div class="hover_content">
                                 <div class="content">
                                    <div class="inner">
                                       <!-- <p>The less water you use, the less runoff and wastewater that
                                          eventually end up in the ocean.</p> -->
                                       <a href="{{ route('services.detail', $service->id) }}" class="read_more">Get started<span
                                             class="icon-right-arrow-long"></span></a>
                                    </div>
                                 </div>
                              </div>
                           </div>
                           <a href="{{ route('services.detail', $service->id) }}" class="hover-link"></a>
                        </div>
                              <!--===============spacing==============-->
                              <div class="pd_bottom_20"></div>
                              <!--===============spacing==============-->
                     </div>
                      @endforeach


                   
                 

             
                  

                  </div>
               </div>
            </section>
            <!----icon box end---->
      </div>
      @endsection