@extends('frontend.layouts.master')
@section('content')
<div class="service_block">
    <div class="container">
        <div class="row align-items-center justify-content-start">
            <div class="col-md-7 aos-init aos-animate" data-aos="fade-right" data-aos-delay="0"
                data-aos-duration="800">
                <div class="hero-block-content">
                    <h1 class="hero-block-content-title text-white pb-1 m-0">{{$serviceCategory->name}}</h1>
                    <div class="breadcrumb-div">
                        <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{route('frontend.index')}}"
                                        class="breadcrumb-item-link fs-5">Home</a></li>
                                <li class="breadcrumb-item text-white fs-5" aria-current="page">Service</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@if(!empty($service) && ($service)->count() > 0)
<div class="what-we-offer section-block pt-3">
  <div class="container">
     <!-- <div class="row text-center pb-md-4 pb-4">
          <div class="col-md-12">
              <div class="section-header">
                  <h5 class="subtitle m-0">WHAT WE’RE OFFERING</h5>
                  <h3 class="what-offer-title pb-md-4 pb-2">We’re giving all the loan <br>
                      services to you</h3>
              </div>
          </div>
      </div> -->
      <div class="row mt-5 g-3">
        @foreach($service as $services)
          <div class="col-md-3 col-lg-3 col-6 mt-md-3 mt-0 mb-3">
          <a href="{{ route('frontend.service-details.index', $services->slug) }}">
              <div class="service-card-block">
                  <div class="service-card-block-img">
                      <img src="{{ asset($services->image)}}"
                          class="img-fluid">
                      <div class="service-card-block-icon">
                        <i class="bi bi-car-front-fill"></i>
                      </div>
                  </div>
                  <div class="service-card-block-content">
                      <h3 class="service-card-block-content-title">
                          {{ $services->title }}
                      </h3>
                      <p class="service-card-block-content-subtitle">{!! $services->description !!}</p>
                  </div>
              </div>
              </a>
          </div>
          @endforeach
      </div>
  </div>
</div>
@endif
@endsection