@extends('front.layouts.app')
@section('title', 'Naslovna')
@section('content')
<section class="p-0 overflow-hidden bg-dark-gray full-screen ipad-top-space-margin md-h-auto position-relative cover-background" style="background-image: url('https://craftohtml.themezaa.com/images/demo-elder-care-hero-bg.jpg')">
    <div class="position-absolute left-0px top-150px" data-bottom-top="transform: translateY(-180px)" data-top-bottom="transform: translateY(180px)">
        <img src="https://craftohtml.themezaa.com/images/demo-elder-care-01.png" alt="">
    </div>
    <div class="container h-100">
        <div class="row align-items-center justify-content-center h-100">
            <div class="col-xl-5 col-lg-6 col-md-12 text-center text-lg-start position-relative z-index-1 d-flex flex-column align-items-lg-start align-items-center justify-content-center h-100 md-mt-50px md-mb-20px xs-mb-10px" data-anime='{ "el": "childs", "opacity": [0, 1], "translateY": [30, 0], "staggervalue": 300, "easing": "easeInOutSine" }'>
                <span class="ps-25px pe-25px pt-5px pb-5px mb-35px text-uppercase text-dark-gray fs-14 fw-700 border-radius-100px bg-gradient-white-bottom-transparent d-xl-flex d-inline-block lg-w-100 md-w-auto"><i class="bi bi-heart text-dark-gray icon-small me-10px"></i>Partner vašeg zdravlja!</span>
                <div class="alt-font fs-85 lh-75 mb-15px ls-minus-3px text-dark-gray">U mirnom kraju <span class="fw-700">Zemuna.</span></div>
                <p class="mb-30px w-80 xl-w-100 md-w-75 sm-w-100">Bolnica Analife je najmodernije opremljena bolnica a naši su vrhunski lekari eksperti u svojim oblastima.</p>
                <div>
                  <!-- <a href="{!! url('oblasti') !!}" class="text-decoration-line-bottom-medium primary-font text-dark-gray d-inline-flex sm-mt-15px fw-600">Pogledajte naše usluge</a> -->

                  <a href="{!! url('oblasti') !!}" class="btn btn-large btn-base-color btn-rounded d-inline-block me-20px sm-me-10px right-icon btn-box-shadow btn-switch-text">
                      <span>
                          <span class="btn-double-text" data-text="Pogledajte naše usluge">Pogledajte naše usluge</span>
                          <span><i class="fa-solid fa-arrow-right fs-14"></i></span>
                      </span>
                  </a>
                </div>

            </div>
            <div class="col-xl-7 col-lg-6 pt-30px align-self-lg-end align-self-center" data-anime='{"opacity": [0, 1], "translateY": [30, 0], "staggervalue": 300, "easing": "easeInOutSine" }'>
                <div class="outside-box-right-10 xxl-outside-box-right-7 md-outside-box-right-0">
                    <img src="https://placehold.co/1070x950" alt="">
                </div>
            </div>
        </div>
    </div>
</section>




            <section class="pt-0 position-relative">
                <div class="position-absolute top-minus-70px lg-top-minus-50px left-minus-80px xxl-left-minus-40px lg-left-30px lg-w-300px 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="bg-light-turquoise-blue border-radius-8px lg-no-border-radius pt-6 pb-6 md-pt-50px md-pb-50px overflow-hidden position-relative">
                    <div class="container">
                        <div class="row align-items-center">
                            <div class="col-xl-4 col-lg-5 md-mb-30px" data-anime='{"el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 800, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
                                <span class="fs-18 fw-600 text-dark-gray mb-20px d-flex align-items-center"><span class="text-center w-60px h-60px d-flex justify-content-center align-items-center rounded-circle bg-light-sea-green-transparent-light align-middle me-15px"><i class="bi bi bi-shield-check text-base-color fs-22"></i></span>Sertifikovani doktori</span>
                                <h2 class="fw-800 text-dark-gray ls-minus-2px">Naša odeljenja</h2>
                                <p class="mb-30px">Lorem ipsum is simply dummy text printing typesetting industry's standard.</p>
                                <a href="demo-medical-treatments.html" class="btn btn-medium btn-switch-text btn-dark-gray btn-round-edge">
                                    <span>
                                        <span class="btn-double-text" data-text="All treatments">Sva odeljenja i usluge</span>
                                    </span>
                                </a>
                            </div>
                            <div class="col-xl-8 ps-5 col-lg-7">
                                <div class="outside-box-right-25 sm-outside-box-right-0" data-anime='{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 100, "staggervalue": 150, "easing": "easeOutQuad" }'>
                                    <div class="swiper magic-cursor ps-15px md-ps-0" data-slider-options='{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "autoplay": { "delay": 4000, "disableOnInteraction": false },  "pagination": { "el": ".slider-four-slide-pagination-1", "clickable": true, "dynamicBullets": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }'>
                                        <div class="swiper-wrapper pt-30px pb-20px">
                                            <!-- start slider item -->
                                            <div class="swiper-slide">
                                                <!-- start features box item -->
                                                <div class="icon-with-text-style-02 transition-inner-all">
                                                    <div class="feature-box bg-white text-start hover-box dark-hover border-radius-6px p-15 xl-p-12 box-shadow-medium">
                                                        <div class="feature-box-icon feature-box-icon-rounded w-110px h-110px bg-light-turquoise-blue rounded-circle mb-20px">
                                                            <img src="images/demo-medical-icon-01.svg" class="w-50px" alt="">
                                                        </div>
                                                        <div class="feature-box-content">
                                                            <span class="d-block text-dark-gray fs-19 fw-700 mb-5px">Primary care</span>
                                                            <p class="text-light-opacity">Lorem ipsum is simply dummy text of simply printing typesetting.</p>
                                                            <a href="demo-medical-treatments.html" class="btn btn-extra-large btn-link text-dark-gray border-bottom-0 left-icon fw-700"><i class="feather icon-feather-plus-circle icon-extra-medium ms-0"></i>Detaljnije</a>
                                                        </div>
                                                        <div class="feature-box-overlay bg-base-color border-radius-6px"></div>
                                                    </div>
                                                </div>
                                                <!-- end features box item -->
                                            </div>
                                            <!-- end slider item -->
                                            <!-- start slider item -->
                                            <div class="swiper-slide">
                                                <!-- start features box item -->
                                                <div class="icon-with-text-style-02 transition-inner-all">
                                                    <div class="feature-box bg-white text-start hover-box dark-hover border-radius-6px p-15 xl-p-12 box-shadow-medium">
                                                        <div class="feature-box-icon feature-box-icon-rounded w-110px h-110px bg-light-turquoise-blue rounded-circle mb-20px">
                                                            <img src="images/demo-medical-icon-02.svg" class="w-50px" alt="">
                                                        </div>
                                                        <div class="feature-box-content">
                                                            <span class="d-block text-dark-gray fs-19 fw-700 mb-5px">Cardiology</span>
                                                            <p class="text-light-opacity">Lorem ipsum is simply dummy text of simply printing typesetting.</p>
                                                            <a href="demo-medical-treatments.html" class="btn btn-extra-large btn-link text-dark-gray border-bottom-0 left-icon fw-700"><i class="feather icon-feather-plus-circle icon-extra-medium ms-0"></i>Know more</a>
                                                        </div>
                                                        <div class="feature-box-overlay bg-base-color border-radius-6px"></div>
                                                    </div>
                                                </div>
                                                <!-- end features box item -->
                                            </div>
                                            <!-- end slider item -->
                                            <!-- start slider item -->
                                            <div class="swiper-slide">
                                                <!-- start features box item -->
                                                <div class="icon-with-text-style-02 transition-inner-all">
                                                    <div class="feature-box bg-white text-start hover-box dark-hover border-radius-6px p-15 xl-p-12 box-shadow-medium">
                                                        <div class="feature-box-icon feature-box-icon-rounded w-110px h-110px bg-light-turquoise-blue rounded-circle mb-20px">
                                                            <img src="images/demo-medical-icon-03.svg" class="w-50px" alt="">
                                                        </div>
                                                        <div class="feature-box-content">
                                                            <span class="d-block text-dark-gray fs-19 fw-700 mb-5px">General surgery</span>
                                                            <p class="text-light-opacity">Lorem ipsum is simply dummy text of simply printing typesetting.</p>
                                                            <a href="demo-medical-treatments.html" class="btn btn-extra-large btn-link text-dark-gray border-bottom-0 left-icon fw-700"><i class="feather icon-feather-plus-circle icon-extra-medium ms-0"></i>Know more</a>
                                                        </div>
                                                        <div class="feature-box-overlay bg-base-color border-radius-6px"></div>
                                                    </div>
                                                </div>
                                                <!-- end features box item -->
                                            </div>
                                            <!-- end slider item -->
                                            <!-- start slider item -->
                                            <div class="swiper-slide">
                                                <!-- start features box item -->
                                                <div class="icon-with-text-style-02 transition-inner-all">
                                                    <div class="feature-box bg-white text-start hover-box dark-hover border-radius-6px p-15 xl-p-12 box-shadow-medium">
                                                        <div class="feature-box-icon feature-box-icon-rounded w-110px h-110px bg-light-turquoise-blue rounded-circle mb-20px">
                                                            <img src="images/demo-medical-icon-04.svg" class="w-50px" alt="">
                                                        </div>
                                                        <div class="feature-box-content">
                                                            <span class="d-block text-dark-gray fs-19 fw-700 mb-5px">Blood test</span>
                                                            <p class="text-light-opacity">Lorem ipsum is simply dummy text of simply printing typesetting.</p>
                                                            <a href="demo-medical-treatments.html" class="btn btn-extra-large btn-link text-dark-gray border-bottom-0 left-icon fw-700"><i class="feather icon-feather-plus-circle icon-extra-medium ms-0"></i>Know more</a>
                                                        </div>
                                                        <div class="feature-box-overlay bg-base-color border-radius-6px"></div>
                                                    </div>
                                                </div>
                                                <!-- end features box item -->
                                            </div>
                                            <!-- start slider item -->
                                            <!-- start slider item -->
                                            <div class="swiper-slide">
                                                <!-- start features box item -->
                                                <div class="icon-with-text-style-02 transition-inner-all">
                                                    <div class="feature-box bg-white text-start hover-box dark-hover border-radius-6px p-15 xl-p-12 box-shadow-medium">
                                                        <div class="feature-box-icon feature-box-icon-rounded w-110px h-110px bg-light-turquoise-blue rounded-circle mb-20px">
                                                            <img src="images/demo-medical-icon-02.svg" class="w-50px" alt="">
                                                        </div>
                                                        <div class="feature-box-content">
                                                            <span class="d-block text-dark-gray fs-19 fw-700 mb-5px">Cardiology</span>
                                                            <p class="text-light-opacity">Lorem ipsum is simply dummy text of simply printing typesetting.</p>
                                                            <a href="demo-medical-treatments.html" class="btn btn-extra-large btn-link text-dark-gray border-bottom-0 left-icon fw-700"><i class="feather icon-feather-plus-circle icon-extra-medium ms-0"></i>Know more</a>
                                                        </div>
                                                        <div class="feature-box-overlay bg-base-color border-radius-6px"></div>
                                                    </div>
                                                </div>
                                                <!-- end features box item -->
                                            </div>
                                            <!-- start slider item -->
                                            <div class="swiper-slide">
                                                <!-- start features box item -->
                                                <div class="icon-with-text-style-02 transition-inner-all">
                                                    <div class="feature-box bg-white text-start hover-box dark-hover border-radius-6px p-15 xl-p-12 box-shadow-medium">
                                                        <div class="feature-box-icon feature-box-icon-rounded w-110px h-110px bg-light-turquoise-blue rounded-circle mb-20px">
                                                            <img src="images/demo-medical-icon-03.svg" class="w-50px" alt="">
                                                        </div>
                                                        <div class="feature-box-content">
                                                            <span class="d-block text-dark-gray fs-19 fw-700 mb-5px">General surgery</span>
                                                            <p class="text-light-opacity">Lorem ipsum is simply dummy text of simply printing typesetting.</p>
                                                            <a href="demo-medical-treatments.html" class="btn btn-extra-large btn-link text-dark-gray border-bottom-0 left-icon fw-700"><i class="feather icon-feather-plus-circle icon-extra-medium ms-0"></i>Know more</a>
                                                        </div>
                                                        <div class="feature-box-overlay bg-base-color border-radius-6px"></div>
                                                    </div>
                                                </div>
                                                <!-- end features box item -->
                                            </div>
                                            <!-- end slider item -->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 mt-5 align-items-center justify-content-center" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 800, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }'>
                            <!-- start content box item -->
                            <div class="col md-mb-40px border-end xs-border-end-0 border-color-transparent-dark-very-light">
                                <div class="d-flex flex-column flex-md-row justify-content-center align-items-center text-center text-md-start">
                                    <div class="flex-shrink-0 me-25px sm-me-0">
                                        <h2 class="mb-0 text-dark-gray fw-800 ls-minus-2px">4.98</h2>
                                    </div>
                                    <div>
                                        <div class="fs-18 lh-32 last-paragraph-no-margin text-dark-gray">
                                            <i class="bi bi-star-fill text-dark-gray"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
                                        </div>
                                        <span class="fs-18 lh-26 d-block fw-600 text-dark-gray">2,488 rating.</span>
                                    </div>
                                </div>
                            </div>
                            <!-- end content box item -->
                            <!-- start content box item -->
                            <div class="col md-mb-40px border-end md-border-end-0 border-color-transparent-dark-very-light">
                                <div class="d-flex flex-column flex-md-row justify-content-center align-items-center text-center text-md-start">
                                    <div class="flex-shrink-0 me-25px sm-me-0">
                                        <h2 class="mb-0 text-dark-gray fw-800 ls-minus-2px">98<sup class="fs-30">%</sup></h2>
                                    </div>
                                    <div>
                                        <span class="fs-18 text-dark-gray lh-26 d-block fw-600">Genuine positive<br/> feedback.</span>
                                    </div>
                                </div>
                            </div>
                            <!-- end content box item -->
                            <!-- start content box item -->
                            <div class="col text-dark-gray fw-600">
                                <div class="d-flex flex-column flex-md-row justify-content-center align-items-center text-center text-md-start">
                                    <div class="flex-shrink-0 me-25px sm-me-0">
                                        <h2 class="mb-0 text-dark-gray fw-800 ls-minus-2px">200<sup class="fs-30">+</sup></h2>
                                    </div>
                                    <div>
                                        <span class="fs-18 lh-26 d-block fw-600">Daily patients<br>consulted.</span>
                                    </div>
                                </div>
                            </div>
                            <!-- end content box item -->
                        </div>
                    </div>
                </div>
            </section>
@endsection

@push('scripts')

@endpush