@extends('frontend.layouts.main-en')

@section('styles')
    <!-- AOS Animation CSS -->
    <link href="{{ asset('build/frontend/assets/css/aos.css') }}" rel="stylesheet" />
    <!-- Style CSS -->
    <link rel="stylesheet" href="{{ asset('build/frontend/assets/css/style.css') }}" />

    <!-- Swiper Slider -->
    <link rel="stylesheet" href="{{ asset('build/frontend/assets/css/swiper-bundle.min.css') }}" />
@endsection

@section('content')
    <div class="-mt-[82px] flex-grow overflow-x-hidden lg:-mt-[106px]">
        <div
            class="bg-[url(../build/frontend/assets/images/inner-page-hero-bg.png)] bg-cover bg-bottom bg-no-repeat pt-[82px] lg:pt-[106px]">
            <div class="relative">
                <div class="container">
                    <div class="relative w-full py-14 md:my-14 md:inline-block md:py-0 lg:my-[128px]">
                        <div class="heading relative mb-8 text-center lg:mb-0 lg:w-1/2 ltr:lg:text-left rtl:lg:text-right">
                            <h6>Member of the Supervisory Board</h6>
                            <h4 class="!text-white">Milovan Popović</h4>
                            <ul class="items-center justify-center pt-6 sm:flex lg:justify-start">
                                <li class="flex items-center justify-center">
                                </li>
                                <li>
                                </li>
                                <li>
                                </li>
                            </ul>
                        </div>
                        <div class="top-0 mt-6 ltr:right-0 rtl:left-0 md:mt-0 lg:absolute" data-aos="fade-left"
                            data-aos-duration="1000">
                            <img src="{{ asset('') }}build/frontend/assets/images/team/milovan-popovic.jpg"
                                alt="blog-detail-hero"
                                class="mx-auto h-80 rounded-[32px] object-cover sm:h-[400px] sm:w-[445px]" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <section class="bg-gradient-to-t from-white to-transparent py-14 dark:bg-none md:py-[100px]">
            <div class="container">
                <div class="prose max-w-full dark:prose-invert">
                    <h2>&nbsp;</h2>

                    <p>Milovan Popović has 30 years of experience in the financial and auditing sectors, of which 20 years were
                    in exectuive positions. He has been a member of the management and audit boards of several financial
                    institutions. Since 2004, he has held the position of managing partner of the auditing firm BDO for
                    Serbia, Montenegro, and the Republic of Srpska.</p>
                    <p>He graduated and obtained a master's degree from the
                    Faculty of Economics and Business in Belgrade. In addition to academic studies, he has continuously
                    enhanced his expertise by attending numerous seminars and training programs both in the country and
                    abroad. He holds an internationally recognized Certified Public Accountant (CPA) certificate issued by
                    the American Institute of Certified Public Accountants.</p>
                    <p>His expertise also includes risk identification
                    and assessment, financial statement analysis, and providing advice for improving business processes and
                    financial management.</p>
                    <p>At Eclectica Capital a.d., he serves as a member of the Supervisory Board.</p>

                </div>
            </div>
        </section>

        @include('frontend.pages.en.team-slider')

    </div>
@endsection

@section('scripts')
    <!-- AOS Animation JS -->
    <script src="{{ asset('build/frontend/assets/js/aos.js') }}"></script>
    <!-- Custom Js -->
    <script src="{{ asset('build/frontend/assets/js/custom.js') }}"></script>


    <!-- Swiper Slider JS -->
    <script src="{{ asset('build/frontend/assets/js/swiper-bundle.min.js') }}"></script>

    <script>
        // Logo Slider
        var logoSwiper = new Swiper('.logo-slider', {
            loop: true,
            slidesPerView: 'auto',
            spaceBetween: 10,
            speed: 4000,
            autoplay: {
                delay: 0,
                disableOnInteraction: false,
            },
            breakpoints: {
                320: {
                    slidesPerView: 1.7,
                },
                600: {
                    slidesPerView: 2,
                },
                1000: {
                    slidesPerView: 3,
                },
                1142: {
                    slidesPerView: 5,
                },
            },
        });
    </script>
@endsection