{{--SERVICES--}}
<section class="services-layout2 pb-90">
    <div class="bg-img"><img src="assets/images/backgrounds/3-1.jpg" alt="banner"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <h2 class="heading__subtitle color-gray">İnşaat endüstrisi için 10+ yıldır profesyonel çözümler üretiyoruz.</h2>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-6">
                <h3 class="heading__title color-white mb-50">Hizmetlerimiz</h3>
            </div><!-- /.col-lg-6 -->
        </div><!-- /.row -->
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div class="slick-carousel"
                     data-slick='{"slidesToShow": 4, "slidesToScroll": 1, "arrows": false, "dots": true, "responsive": [ {"breakpoint": 992, "settings": {"slidesToShow": 2}}, {"breakpoint": 767, "settings": {"slidesToShow": 2}}, {"breakpoint": 480, "settings": {"slidesToShow": 1}}]}'>

                    @foreach($services as $item)
                        <div class="service-item">
                            <div class="service-item__content">
                                <div class="service-item__icon">
                                    <img class="img-fluid" src="assets/images/services/{{ $item->slug }}.jpeg" alt="...">
                                </div><!-- /.service-item__icon -->
                                <h4 class="service-item__title">{{ $item->name }}</h4>
                                <p class="service-item__desc">{{ $item->description }}</p>
{{--
                                <a href="#" class="btn btn__secondary">
                                    <i class="icon-arrow-right"></i>
                                    <span>Daha fazla bilgi</span>
                                </a>
--}}
                            </div>
                        </div>
                    @endforeach

                </div><!-- /.col-lg-12 -->
            </div>
        </div><!-- /.row -->
    </div><!-- /.container -->
</section>