@extends('website.layouts.app')
@section('title','Product Detail')
@section('content')
<style>
    .top-breadcrumb, .breadcrumb-items{
        list-style-type: none;
        margin-bottom: 0;
        padding: 10px;
    }
    .breadcrumb-items{
        float: right;
    }
    @media only screen and (max-width: 600px) {
        .top-breadcrumb li {
            list-style: none;
            position: relative;
            left: 0 !important;
        }
        .top-breadcrumb{
            display: flex !important;
            justify-content: center;
            padding-bottom: 0;
        }
        .breadcrumb-items{
            display: flex !important;
            justify-content: center;
            padding-top: 4px;
            float: initial !important;
        }
       /*  .breadcrum {
           
            position: relative;
            padding-top: 0px !important;
            width: 322px;
          }
        }


        @media (max-width: 600px) {
        .breadcrumb-items li{
         width: 114px;
        margin: -24px 0 0 -30px;
        padding-bottom: 10px;
        display: flex;
        justify-content: flex-start;
        flex-direction: row;
       
      }*/
    }
</style>
    <!-- start inner-banner -->
  <section class="" style="background-color: #0d2147;;">
    <div class="container" >
        <div class="row">
            <div class="col-md-6">
            
                  <ol class=" top-breadcrumb d-flex" >
                    <li class="breadcrumb-item text-white "><a href="">{{$service_data->name??''}}</a></li>
                  
                  </ol>
              
            </div>
            <div class="col-md-6">
                
                  <ol class="d-flex breadcrumb-items" >
                    <li class="breadcrumb-item text-white"><a href="{{ action('WebsiteController\HomeController@home') }}"><i class="fa fa-home mr-2"></i></i>Home</a></li>

                    <!-- <li class="breadcrumb-item text-white"><a href="{{ action('WebsiteController\WebsiteController@service') }}">Services</a></li> -->
                    <li class="breadcrumb-item active text-white" aria-current="page"><a href="javascript:void(0);">{{$service_data->name??''}}</a></li>
                  </ol>
                
            </div>
        </div>
    </div>
    </section> 
    <!-- end inner-banner -->
    <!-- start blog -->
    <section class="p-md-5 mb-5 mt-3" id="sub-product">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <p class="text-limit"style="margin-top: 0px;text-align: justify;">{!! $service_data->description ?? '' !!}</p>
                    <div class="row">
                       @foreach($subCategories as $subCategorie)
                        <div class="col-lg-3 col-md-6 col-sm-12 mt-4">
                            <div class="Service_box">
                                    <a href="{{ action('WebsiteController\WebsiteController@services_details', [base64_encode($subCategorie->id)]) }}">
                                    <img src="{{ asset($subCategorie->image_path ?? '') }}" style="width: 100%;" alt="">
                                    <div class="service_content">
                                        <h5 class="color-blue">{{$subCategorie->name??''}} </h5>

                                        
                                    </div>
                                    </a>
                            </div>
                        </div>
                       @endforeach
                        
                        
                    </div>
                  </div>
            </div>
        </div>
    </section>
    <!-- end blog -->
@endsection