<div>
    <section class="breadcumb-section pt-10">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcumb-style1">
                        <div class="breadcumb-list">
                            <a href="{{ route('welcome') }}">Home</a>
                            <a href="#">Categories</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcumb Sections -->
    <section class="breadcumb-section pt-4">
        <div
            class="cta-service-v2 cta-banner mx-auto maxw1700 pt120 pb120 bdrs16 position-relative overflow-hidden d-flex align-items-center mx20-lg px30-lg">
            <img class="left-top-img wow zoomIn" src="{{asset('images/vector-img/left-top.png')}}" alt="">
            <img class="right-bottom-img wow zoomIn" src="{{asset('images/vector-img/right-bottom.png')}}" alt="">
            <img class="service-v1-vector bounce-y d-none d-lg-block"
                src="{{asset('images/vector-img/vector-service-v1.png')}}" alt="">
            <div class="container pt-8 pb-8">
                <div class="row wow fadeInUp">
                    <div class="col-xl-5">
                        <div class="position-relative">
                            <h2>Professional Categories Available</h2>
                            <p class="text mb30">Explore a wide range of professional categories tailored to meet your
                                needs. Whether you're looking for expert advice, hands-on services, or creative
                                solutions, our diverse categories help you connect with skilled professionals who can
                                bring your ideas to life.</p>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="row px-4 py-2">
        <div class="col-lg-12">
            @if($categories)
            <div class="row">
                @foreach ($categories as $cat)
                <div class="col-6 col-md-3 mb-4">
                    <a href="{{route('show.category.services', $cat['slug'])}}">
                        <div class="item">
                            <div class="feature-style1 mb30 bdrs16">
                                <div class="feature-img bdrs16 overflow-hidden">
                                    <img class="w-100" src="{{$cat['thumbnail'] ?? ''}}"
                                        alt="{{ $cat['name'] }}">
                                </div>
                                <div class="feature-content">
                                    <div class="top-area">
                                        <h5 class="text">{{ $cat['name'] }}<br class="d-none d-lg-block"></h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>
    
</div>