@extends('layouts.master')
@section('content')
    <!-- Breadcum Start -->
    @include('components.breadcum')
    <!-- Breadcum End -->
    <!-- Services Details Start -->
    <section class="services-details v1 pt-50 pb-50 pt-md-70 pb-md-70 pt-xl-100 pb-xl-100">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 order-xl-1">
                    <div class="service-details-content">
                        <div class="services-details-title wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                            data-wow-duration="0.8s">
                            <h6 class="text-para-2 text-xl-6 text-bold">
                                {{-- <span class="text-para-2 text-lg-3 f-letter">W</span> --}}
                                We take immense pride in our ability to transform concepts and blueprints into tangible,
                                extraordinary structures. Our portfolio is a testament to our unwavering commitment to
                                excellence.
                            </h6>

                        </div>
                        <div class="big-img mt-30 wow animate__fadeInUp" data-wow-delay="0.3s" data-wow-offset="20"
                            data-wow-duration="0.8s">
                            <img src="{{ asset('uploads/services/' . $service->image) }}" alt="service-details">
                        </div>
                        <p class="text-para-2 text-para-xl-1 mt-30 wow animate__fadeInUp" data-wow-delay="0.1s"
                            data-wow-offset="20" data-wow-duration="0.8s">{!! $service->description !!}</p>

                    </div>
                </div>
                <div class="col-xl-4">
                    <div class="sidebar__wrapper">
                        <div class="sidebar__widget wow animate__fadeInUp" data-wow-delay="0.1s" data-wow-offset="20"
                            data-wow-duration="0.8s">
                            <div class="sidebar__widget-head">
                                <h5 class="text-5 text-bold">Services Categories</h5>
                            </div>
                            <div class="sidebar__widget-content">
                                <div class="categories-widget">
                                    <ul>
                                        @foreach ($serviceCategories as $serviceCategory)
                                            <li><a href="{{ route('services', ['category' => $serviceCategory->slug]) }}">{{ $serviceCategory->name }}
                                                    <i class="my-icon icon-arrow-right"></i></a>
                                            </li>
                                        @endforeach

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Services Details End -->
@endsection