@extends('frontend.layouts.app')

@section('content')
<div class="breadcumb-area style2 bg-smoke4">
  <div class="breadcumb-wrapper" data-bg-src="{{ URL::asset('frontend/assets/img/bg/breadcumb-bg.jpg')}}">
    <div class="container">
      <div class="breadcumb-content">
        <h1 class="breadcumb-title">Our Services</h1>
        <ul class="breadcumb-menu">
          <li><a href="{{ url('/')}}">Home</a></li>
          <li>Our Services</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<section class="position-relative bg-top-center overflow-hidden space-top" id="service-sec">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="title-area service-title-box text-center"><span class="sub-title text-anime-style-2">{{ $service_section->title }}</span>
          <div class="wow fadeInUp" data-wow-delay=".4s">{!! $service_section->description !!}</div>
        </div>
      </div>
    </div>
    <div class="service-area">
      <div class="row gy-30 justify-content-center">
        <div class="col-xl-3 col-md-6">
          <div class="service-box service-style-1 h-100 d-flex flex-column">
            <div class="service-img"><a href="#"><img src="{{ URL::asset('frontend/assets/img/service/sv-1.jpg')}}" alt=""></a></div>
            <div class="service-content flex-grow-1 d-flex flex-column">
              <h3 class="box-title"><a href="#">Web Design & Development</a></h3>
              <p class="service-box_text flex-grow-1">Assessing current IT infrastructure and aligning it with business goals. Developing a roadmap.</p>
              <a class="th-btn style4 mt-auto" href="#">Read More <i class="fa-light fa-arrow-right-long"></i></a>
            </div>
          </div>
        </div>
        @foreach($services as $service)
        <div class="col-xl-3 col-md-6">
          <div class="service-box service-style-1 h-100 d-flex flex-column">
            <div class="service-img"><a href="{{ url('/service-details/'.$service->slug) }}"><img src="{{ asset('uploads/service/images/'.$service->image) }}" alt=""></a></div>
            <div class="service-content flex-grow-1 d-flex flex-column">
              <h3 class="box-title"><a href="{{ url('/service-details/'.$service->slug) }}">{{ $service->name }}</a></h3>
              <p class="service-box_text flex-grow-1">{{ Str::words(strip_tags($service->description), 15, '...') }}</p>
              <a class="th-btn style4 mt-auto" href="{{ url('/service-details/'.$service->slug) }}">Read More <i class="fa-light fa-arrow-right-long"></i></a>
            </div>
          </div>
        </div>
        @endforeach
      </div>
    </div>
  </div>
</section>

<div class="position-relative overflow-hidden space">
  <div class="cta-sec6 theme-bg position-relative overflow-hidden">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-lg-6">
          <div class="cta-area6 text-center text-md-start space position-relative">
            <div class="title-area mb-40">
              <h2 class="sec-title text-white pe-xl-5 me-xl-4 mt-n3 text-anime-style-2"><span class="discount-text">Grab up to 35% off</span>Have any project to work with us</h2>
              <p class="text-white wow fadeInUp" data-wow-delay=".3s">Limited time offer, don't miss the opportunity</p>
            </div>
            <div class="btn-group wow fadeInUp" data-wow-delay=".4s"><a href="{{ url('/contact_us')}}" class="th-btn style5 th-radius th-icon">Contact With Us <i class="fa-light fa-arrow-right-long"></i></a></div>
            <div class="cta6-shape"><img src="{{ URL::asset('frontend/assets/img/shape/cta6-shape.png')}}" alt=""></div>
          </div>
        </div>
      </div>
    </div>
    <div class="shape-mockup" data-bottom="0%" data-right="0"><img src="{{ URL::asset('frontend/assets/img/normal/cta-img-6.jpg')}}" alt=""></div>
  </div>
</div>

@endsection

@section('custom_script')

@endsection