@extends('layout.master')
@section('content')
<main id="main">
   <!-- ======= Breadcrumbs ======= -->
    <div class="breadcrumbs">
      <div class="container">
         <div class="d-flex justify-content-between align-items-center">
            <ol>
               <li><a href="{{route('index')}}" class="text-white">Home</a></li>
               <li>
                  <a href="{{route('services', ['slug' => $service->slug]) }}" class="text-white">{{ $service->title }}</a>
               </li>
            </ol>
         </div>
      </div>
   </div>
   <section id="about" class="about">
      <div class="container-fluid">
         <div class="section-title">
            <h2>{{$service->title}}</h2>
            <p class="fw-bold">{{$service->title_description}}</p>
         </div>
         <div class="row">
            <div class="col-xl-5 col-lg-6 d-flex justify-content-center">
               <img src="{{asset('storage')}}/{{$service->picture}}" class="w-100">
            </div>
            <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
               <h3>{{$service->sub_title}}</h3>
               <h6 class="lh-10">{{$service->sub_title_description}}</h6>
            </div>
         </div>
      </div>
   </section>
   <!-- Benefit Section Start -->
   @if($service->benefit)
      <section id="about" class="about section-bg">
         <div class="container">
            <div class="section-title">
               <h2>{{$service->benefit}}</h2>
               <p class="fw-bold">{{$service->benefit_description}}</p>
            </div>

            <div class="row">
               @if($ServiceBenefits)
                  @foreach($ServiceBenefits as $servicebenefit)
                  <div class="col-md-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center ">
                     
                     <div class="icon-box">
                        <div class="icon less_size"><i class="bx bx-check"></i></div>
                        <h4 class="title less_margin">{{$servicebenefit->points}}</h4>
                     </div>
                  
                     
                  </div>
                  @endforeach
               @endif
            </div>
         </div>
      </section>
   @endif
   <!-- Benefit Section End -->
</main>
<!-- End #main -->
@endsection