@extends('layouts.site')

@section('content')
    <section class="services-layout2 pt-130 pb-90">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-8 offset-lg-2">
                    <div class="heading text-center mb-50">
                        <h3 class="heading__title"> Our Solutions</h3>
                        <h2 class="heading__subtitle">{{ $solutionShortDesc }}</h2>
                    </div><!-- /.heading -->
                </div><!-- /.col-lg-8 -->
            </div><!-- /.row -->
            <div class="row">
                @foreach ($serviceCategories as $serviceCategory)
                    <div class="col-sm-12 col-md-6 col-lg-4">
                        <div class="service-item dlt-scrollbar overflow-y service-item-custom-card solutions-card">
                            <div class="service__content">
                                {{-- <div class="service__icon">
                                    <i class="icon-permission"></i>
                                </div><!-- /.service__icon --> --}}
                                <h4 class="service__title">{{ $serviceCategory->title }}</h4>
                                <p class="service__desc">{{ $serviceCategory->short_desc }}</p>
                                <a href="/{{ $serviceCategory->slug }}" class="btn btn__secondary">
                                    <span>Read More</span>
                                    <i class="icon-arrow-right"></i>
                                </a>
                            </div><!-- /.service-content -->
                        </div><!-- /.service-item -->
                    </div><!-- /.col-lg-4 -->
                    <!-- service item #1 -->
                @endforeach
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section>
@endsection