@extends('front.layouts.app')
@section('title', 'Oblasti i usluge')

@section('content')



        <!-- start page title -->
        <section class="p-0 pt-2 ipad-top-space-margin page-title-big-typography bg-gradient-blue-transparent-second ">
            <div class="container">
                <div class="row align-items-center justify-content-center h-350px">
                    <div class="col-auto text-center page-title-double-large">
                        <h1 class="alt-font text-dark-gray fw-700 ls-minus-1px mb-0">Oblasti i usluge</h1>
                    </div>

                </div>
            </div>
        </section>
        <!-- end page title -->



            <section class="pt-0">
                <div class="position-absolute top-10px lg-top-minus-80px left-minus-80px lg-left-15px opacity-1 w-350px z-index-1 d-none d-lg-inline-block"><img src="images/demo-medical-pattern.svg" alt="" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)"></div>
                <div class="container">


                    <div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center mb-6" data-anime='{"el": "childs", "translateY": [15, 0], "perspective": [1200,1200], "scale": [1.05, 1], "rotateX": [30, 0], "opacity": [0,1], "duration": 800, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }'>
                        @foreach ($departments as $department)
                        <!-- start features box item -->
                        <div class="col icon-with-text-style-04 transition-inner-all mb-30px">
                            <div class="feature-box hover-box dark-hover border-radius-6px bg-white box-shadow-quadruple-large box-shadow-large-hover p-15 lg-p-11 last-paragraph-no-margin">
                                <div class="feature-box-icon feature-box-icon-rounded w-110px h-110px bg-light-turquoise-blue rounded-circle mb-20px">
                                    <a href="{{ route('departments.show', $department->slug) }}"><img src="https://craftohtml.themezaa.com/images/demo-elder-care-09.png" class="w-50px" alt="{{ $department->title }}"></a>
                                </div>
                                <div class="feature-box-content">
                                    <span class="d-block fs-18 fw-700 mb-5px"><a href="{{ route('departments.show', $department->slug) }}">{{ $department->title }}</a></span>
                                    <a href="{{ route('departments.show', $department->slug) }}" class="btn btn-base-color btn-box-shadow btn-small btn-switch-text btn-rounded mt-5px">
                                        <span>
                                            <span class="btn-double-text" data-text="Saznaj više">Saznaj više</span>
                                        </span>
                                    </a>
                                </div>
                                <div class="feature-box-overlay bg-base-color border-radius-6px"></div>
                            </div>
                        </div>
                        <!-- end features box item -->
                         @endforeach

                    </div>

                </div>
            </section>

@endsection

@push('scripts')

@endpush