@extends('layout.app')

@section('content')
    <!-- modal start -->
    <div class="modal micromodal-slide" id="home-modal" aria-hidden="true">
        <div class="modal__overlay" tabindex="-1" data-micromodal-close>
            <div class="modal__container jacket__modal" role="dialog" aria-modal="true" aria-labelledby="home-modal-title">
                <header class="modal__header">
                    <button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
                </header>
                <main class="modal__content" id="home-modal-content">
                    <img src="/img/modal-image.gif" alt="">
                </main>
            </div>
        </div>
    </div>
    <!-- modal close -->

    <!-- service modal start -->
    @include('includes.services.registration')
    @include('includes.services.compliance')
    @include('includes.services.accounting')
    @include('includes.services.taxation')
    @include('includes.services.bank-works')
    @include('includes.services.advisory')
    <!-- service modal start -->

    @include('includes.service-enquiry-modal')

    <!-- hero section start -->
    <section
        data-speed="1200"
        data-autoplay-delay="2900"
        class="sliderMain -type-3 js-sliderMain-type-3 sm:layout-mt-headerBar"
    >
        <!-- container start -->
        <div class="container-fluid h-full px-0 sm:px-20">
            <!-- row start -->
            <div class="row sm:justify-content-center h-full">
                <div
                class="col-xl-3 offset-xl-2 col-lg-4 offset-lg-1 col-md-5 offset-md-1 col-sm-9"
                >
                    <div class="slider__content__wrapper sm:text-center h-full z-3">
                        <div class="slider__content is-active js-slider-content">
                            <div data-split="lines">
                                <p
                                class="slider__subtitle text-sm uppercase tracking-md leading-md mb-32 js-subtitle"
                                >
                                Trusted Business Consultant
                                </p>
                            </div>
                            <div data-split="lines" class="mr-minus-col-2 sm:mr-0">
                                <h1 class="slider__title fw-700 leading-xs js-title">
                                    Your Trusted Partner in Accounting, Bookkeeping & Tax Compliance in Pokhara
                                </h1>
                            </div>
                            <div class="slider__button overflow-hidden mt-32">
                                <div class="js-button py-4">
                                <a
                                    href="{{ route('contact') }}"
                                    class="button -md -black text-white"
                                >
                                    get in touch
                                </a>
                                </div>
                            </div>
                        </div>

                        <div class="slider__content js-slider-content">
                            <div data-split="lines">
                                <p
                                class="slider__subtitle text-sm uppercase tracking-md leading-md mb-32 js-subtitle"
                                >
                                Service Truly Amazing
                                </p>
                            </div>
                            <div data-split="lines" class="mr-minus-col-2 sm:mr-0">
                                <h1 class="slider__title fw-700 leading-xs js-title">
                                Whatever the challenge, we always deliver a solution.
                                </h1>
                            </div>
                            <div class="slider__button overflow-hidden mt-32">
                                <div class="js-button py-4">
                                <a
                                    href="{{ route('contact') }}"
                                    class="button -md -black text-white"
                                >
                                    get in touch
                                </a>
                                </div>
                            </div>
                        </div>

                        <div class="slider__content js-slider-content">
                            <div data-split="lines">
                                <p
                                class="slider__subtitle text-sm uppercase tracking-md leading-md mb-32 js-subtitle"
                                >
                                Training Courses
                                </p>
                            </div>
                            <div data-split="lines" class="mr-minus-col-2 sm:mr-0">
                                <h1 class="slider__title fw-700 leading-xs js-title">
                                Provide professional, personal & high quality account
                                training.
                                </h1>
                            </div>
                            <div class="slider__button overflow-hidden mt-32">
                                <div class="js-button py-4">
                                <a
                                    href="{{ route('contact') }}"
                                    class="button -md -black text-white"
                                >
                                    get in touch
                                </a>
                                </div>
                            </div>
                        </div>

                        <div class="slider__content js-slider-content">
                            <div data-split="lines">
                                <p
                                class="slider__subtitle text-sm uppercase tracking-md leading-md mb-32 js-subtitle"
                                >
                                Our Goals
                                </p>
                            </div>
                            <div data-split="lines" class="mr-minus-col-2 sm:mr-0">
                                <h1 class="slider__title fw-700 leading-xs js-title">
                                Providing top notch accounting solutions.
                                </h1>
                            </div>
                            <div class="slider__button overflow-hidden mt-32">
                                <div class="js-button py-4">
                                <a
                                    href="{{ route('contact') }}"
                                    class="button -md -black text-white"
                                >
                                    get in touch
                                </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div
                class="col layout-pr-headerBar lg:pr-0 col-lg-7 col-md-6 swiper-col"
                >
                    <div class="swiper-container h-100vh">
                        <div class="swiper-wrapper z-2">
                            <div class="swiper-slide overflow-hidden">
                                <div
                                    class="slider__img"
                                    data-swiper-parallax="150"
                                    data-parallax="0.7"
                                    data-swiper-parallax-opacity="0"
                                >
                                    <div
                                        data-parallax-target
                                        class="bg-image swiper-lazy js-image"
                                        data-background="{{ asset('img/headers/home-slider/why-us.jpg') }}"
                                    ></div>
                                </div>

                                <div class="slider__img__cover js-image-cover"></div>

                                <div class="slider__img__bg bg-dark-1"></div>
                            </div>

                            {{-- <div class="swiper-slide overflow-hidden">
                                <div
                                    class="slider__img"
                                    data-swiper-parallax="150"
                                    data-parallax="0.7"
                                    data-swiper-parallax-opacity="0"
                                >
                                    <div
                                        data-parallax-target
                                        class="bg-image swiper-lazy js-image"
                                        data-background="{{ asset('img/headers/home-slider/services.jpg') }}"
                                    ></div>
                                </div>

                                <div class="slider__img__bg bg-dark-1"></div>
                            </div>

                            <div class="swiper-slide overflow-hidden">
                                <div
                                    class="slider__img"
                                    data-swiper-parallax="150"
                                    data-parallax="0.7"
                                    data-swiper-parallax-opacity="0"
                                >
                                    <div
                                        data-parallax-target
                                        class="bg-image swiper-lazy js-image"
                                        data-background="{{ asset('img/headers/home-slider/training_courses.png') }}"
                                    ></div>
                                </div>

                                <div class="slider__img__bg bg-dark-1"></div>
                            </div>

                            <div class="swiper-slide overflow-hidden">
                                <div
                                    class="slider__img"
                                    data-swiper-parallax="150"
                                    data-parallax="0.7"
                                    data-swiper-parallax-opacity="0"
                                >
                                    <div
                                        data-parallax-target
                                        class="bg-image swiper-lazy js-image"
                                        data-background="{{ asset('img/headers/home-slider/goals.png') }}"
                                    ></div>
                                </div>

                                <div class="slider__img__bg bg-dark-1"></div>
                            </div> --}}
                        </div>
                    </div>
                </div>
            </div>
            <!-- row end -->

            <!-- slider nav start -->
            <div class="slider__navs js-slider-nav js-ui">
                <div class="navButton">
                <button
                    type="button"
                    class="navButton__item button -outline-black text-black js-prev"
                >
                    <i class="icon" data-feather="arrow-left"></i>
                </button>
                <button
                    type="button"
                    class="navButton__item button -outline-black text-black mt-12 js-next"
                >
                    <i class="icon" data-feather="arrow-right"></i>
                </button>
                </div>
            </div>
            <!-- slider nav end -->
        </div>
        <!-- container end -->

        <!-- ui-element start -->
        <div class="ui-element -bottom-left sm:d-none js-ui">
            <button
                type="button"
                class="ui-element__scroll text-black js-ui-scroll-button"
            >
                scroll down
                <i class="icon" data-feather="arrow-down"></i>
            </button>
        </div>
        <!-- ui-element end -->
    </section>
    <!-- section end -->

    <!-- services section start -->
    <section class="layout-pt-xl layout-pb-md">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row justify-content-between align-items-end">
                <div class="col-lg-7">
                <div class="sectionHeading -md">
                    <p class="sectionHeading__subtitle">services</p>
                    <h2 class="sectionHeading__title">Wide Range of Services</h2>
                </div>
                </div>

                <div class="col-auto">
                <a
                    href="{{ url('services') }}"
                    class="button -md -outline-black text-black md:mt-24"
                >
                    View All
                </a>
                </div>
            </div>
            <!-- row end -->

            <!-- row start -->
            <div data-anim-wrap class="row x-gap-60 y-gap-48 layout-pt-md">
                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-regular fa-registered d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Registration
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We register company and business firm within short and stipulated time in as per our client&#39;s budget.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('registration')" class="button -icon text-black">
                                Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-regular fa-newspaper d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Compliance
                            </h3>

                            <p class="serviceCard__text mt-16">
                                Business Basket suggests right procedures or help you as
                                per the requirements for the registration.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('compliance')" class="button -icon text-black">
                                Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-file-invoice-dollar d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Accounting
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We provide accounting and book keeping services both on a part-time or full -time basis.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('accounting')" class="button -icon text-black">
                                Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-coins d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Taxation
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We provide various training programs regarding VAT and tax planning. We control extravagant wastage of client&#39;s budget.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('taxation')" class="button -icon text-black">
                                Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-building-columns d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Bank Works
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We offer bank related services such as loan documentation, projection and provisional report along 
                                with consulting which loan is feasible to the clients.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('bank-works')" class="button -icon text-black">
                                Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6">
                    <div class="serviceCard">
                        <div class="serviceCard__content">
                            <div class="d-flex align-items-center ml-minus-4">
                                <div
                                data-anim-child="img-right cover-dark-2"
                                class="px-20 py-20 bg-white shadow-light rounded-full"
                                >
                                <i
                                    class="fa-solid fa-comment-dots d-flex align-items-center justify-content-center text-3xl size-md str-width-md text-accent"
                                ></i>
                                </div>
                            </div>

                            <h3
                                class="serviceCard__title text-2xl fw-500 tacking-none mt-32"
                            >
                                Advisory
                            </h3>

                            <p class="serviceCard__text mt-16">
                                We advise the client regarding start-us, taxation and VAT planning as well as business growth.
                            </p>

                            <div class="mt-20">
                                <a onclick="openServiceModal('advisory')" class="button -icon text-black">
                                Place Order
                                <i
                                    class="icon size-xs str-width-md"
                                    data-feather="arrow-right"
                                ></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- about us section start -->
    <section class="layout-pt-lg layout-pb-md">
        <!-- container start -->
        <div class="container-fluid px-0">
            <!-- row start -->
            <div data-anim-wrap class="row no-gutters align-items-center">
                <div class="col-lg-6 z-1">
                <div data-anim-child="img-right cover-white delay-1">
                    <div class="ratio ratio-1:1" data-parallax="0.7">
                    <div
                        data-parallax-target
                        class="bg-image js-lazy"
                        data-bg="{{ asset('img/backgrounds/about-us.jpg') }}"
                    ></div>
                    </div>
                </div>
                </div>

                <div class="col-xl-3 col-lg-4 z-2 ml-80 md:ml-0 md:mt-48">
                <div class="sectionHeading -xl md:container pt-16">
                    <div data-anim-child="slide-up delay-8">
                    <p class="sectionHeading__subtitle">Business Basket</p>
                    </div>
                    <div
                    data-anim-child="slide-up delay-9"
                    class=""
                    >
                    <h2 class="sectionHeading__title mt-48 md:mt-24">
                        Service<br />
                        Truly Awesome
                    </h2>
                    </div>
                    <div data-anim-child="slide-up delay-10">
                    <p class="mt-56 lg:mt-40 md:mt-20">
                        Situated at the prime location of Pokhara city, Business
                        Basket maintains uniqueness in its brand and service as a
                        leading management institute in town.
                        <br />
                        We are a team of prominent accountant and business
                        consultant who provide legal & accounting solution to
                        startups, growing businesses & private sector from their
                        phase of formation to the phase of liquidation.
                    </p>
                    </div>
                    <div data-anim-child="slide-up delay-11">
                    <a
                        data-barba
                        href="{{ route('about') }}"
                        class="button -md -outline-black text-black mt-56 lg:mt-48 md:mt-32"
                    >
                        About Us
                    </a>
                    </div>
                </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- summary section start -->
    <section class="layout-pt-lg layout-pb-md">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row">
                <div class="col-xl-8 col-lg-10">
                <div>
                    <p class="sectionHeading__subtitle">Summary</p>
                </div>

                <p class="text-3xl md:text-2xl leading-lg text-black mt-24">
                    We have always provided our students and clients with the best
                    that we can offer. Our sheer determination to provide top
                    notch service has helped us to grow exponentially.
                </p>
                </div>

                <div class="col-md-10 layout-pt-md">
                <!-- row start -->
                <div class="row x-gap-40 y-gap-60">
                    <div class="col-lg-3 col-6">
                        <div data-anim="counter delay-1" data-counter="500" data-counter-add="+" class="counter">
                            <h2 class="number -md -left fw-500 js-counter-num">0</h2>
                            <h5 class="text-lg text-dark fw-500 tracking-none mt-20">
                            Business Registered
                            </h5>
                        </div>
                    </div>

                    <div class="col-lg-3 col-6">
                        <div data-anim="counter delay-1" data-counter="100" data-counter-add="+" class="counter">
                            <h2 class="number -md -left fw-500 js-counter-num">0</h2>
                            <h5 class="text-lg text-dark fw-500 tracking-none mt-20">
                            Accounting Projects
                            </h5>
                        </div>
                    </div>

                    <div class="col-lg-3 col-6">
                        <div data-anim="counter delay-1" data-counter="200" data-counter-add="+" class="counter">
                            <h2 class="number -md -left fw-500 js-counter-num">0</h2>
                            <h5 class="text-lg text-dark fw-500 tracking-none mt-20">
                            AMC Customers
                            </h5>
                        </div>
                    </div>

                    <div class="col-lg-3 col-6">
                        <div data-anim="counter delay-1" data-counter="250" data-counter-add="+" class="counter">
                            <h2 class="number -md -left fw-500 js-counter-num">0</h2>
                            <h5 class="text-lg text-dark fw-500 tracking-none mt-20">
                            Training & Placement
                            </h5>
                        </div>
                    </div>
                </div>
                <!-- row end -->
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

    <!-- clients section start -->
    {{-- <section class="layout-pt-lg layout-pb-md">
        <div class="container">
            <div class="row align-items-end justify-content-between">
                <div class="col-xl-5 col-md-7">
                <div class="sectionHeading -md">
                    <p class="sectionHeading__subtitle">Our Clients</p>
                    <h2 class="sectionHeading__title">
                    We've worked with lovely clients
                    </h2>
                </div>
                </div>
            </div>

            <div class="row y-gap-32 layout-pt-md">
                <div class="col-lg-3 col-sm-6">
                <div
                    data-anim="slide-up delay-1"
                    class="clientsItem -hover ratio ratio-3:2 border-dark rounded-4 py-4"
                >
                    <div class="clientsItem__img">
                    <img
                        class="col-7"
                        src="img/clients/dark/1.png"
                        alt="Client"
                    />
                    </div>

                    <div class="clientsItem__content">
                    <h5 class="clientsItem__title text-xl text-white">
                        Sophia & Holden
                    </h5>
                    </div>
                </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                <div
                    data-anim="slide-up delay-1"
                    class="clientsItem -hover ratio ratio-3:2 border-dark rounded-4 py-4"
                >
                    <div class="clientsItem__img">
                    <img
                        class="col-7"
                        src="img/clients/dark/2.png"
                        alt="Client"
                    />
                    </div>

                    <div class="clientsItem__content">
                    <h5 class="clientsItem__title text-xl text-white">
                        Sophia & Holden
                    </h5>
                    </div>
                </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                <div
                    data-anim="slide-up delay-1"
                    class="clientsItem -hover ratio ratio-3:2 border-dark rounded-4 py-4"
                >
                    <div class="clientsItem__img">
                    <img
                        class="col-7"
                        src="img/clients/dark/3.png"
                        alt="Client"
                    />
                    </div>

                    <div class="clientsItem__content">
                    <h5 class="clientsItem__title text-xl text-white">
                        Sophia & Holden
                    </h5>
                    </div>
                </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                <div
                    data-anim="slide-up delay-1"
                    class="clientsItem -hover ratio ratio-3:2 border-dark rounded-4 py-4"
                >
                    <div class="clientsItem__img">
                    <img
                        class="col-7"
                        src="img/clients/dark/4.png"
                        alt="Client"
                    />
                    </div>

                    <div class="clientsItem__content">
                    <h5 class="clientsItem__title text-xl text-white">
                        Sophia & Holden
                    </h5>
                    </div>
                </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                <div
                    data-anim="slide-up delay-1"
                    class="clientsItem -hover ratio ratio-3:2 border-dark rounded-4 py-4"
                >
                    <div class="clientsItem__img">
                    <img
                        class="col-7"
                        src="img/clients/dark/5.png"
                        alt="Client"
                    />
                    </div>

                    <div class="clientsItem__content">
                    <h5 class="clientsItem__title text-xl text-white">
                        Sophia & Holden
                    </h5>
                    </div>
                </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                <div
                    data-anim="slide-up delay-1"
                    class="clientsItem -hover ratio ratio-3:2 border-dark rounded-4 py-4"
                >
                    <div class="clientsItem__img">
                    <img
                        class="col-7"
                        src="img/clients/dark/6.png"
                        alt="Client"
                    />
                    </div>

                    <div class="clientsItem__content">
                    <h5 class="clientsItem__title text-xl text-white">
                        Sophia & Holden
                    </h5>
                    </div>
                </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                <div
                    data-anim="slide-up delay-1"
                    class="clientsItem -hover ratio ratio-3:2 border-dark rounded-4 py-4"
                >
                    <div class="clientsItem__img">
                    <img
                        class="col-7"
                        src="img/clients/dark/7.png"
                        alt="Client"
                    />
                    </div>

                    <div class="clientsItem__content">
                    <h5 class="clientsItem__title text-xl text-white">
                        Sophia & Holden
                    </h5>
                    </div>
                </div>
                </div>

                <div class="col-lg-3 col-sm-6">
                <div
                    data-anim="slide-up delay-1"
                    class="clientsItem -hover ratio ratio-3:2 border-dark rounded-4 py-4"
                >
                    <div class="clientsItem__img">
                    <img
                        class="col-7"
                        src="img/clients/dark/8.png"
                        alt="Client"
                    />
                    </div>

                    <div class="clientsItem__content">
                    <h5 class="clientsItem__title text-xl text-white">
                        Sophia & Holden
                    </h5>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </section> --}}
    <!-- section end -->

    <!-- Ad. start -->
    <div class="sectionVideo h-lg layout-pt-lg layout-pb-md">
        <div data-parallax="0.7" class="h-full">
            <div
            data-parallax-target
            class="bg-image js-lazy"
            data-bg={{ asset('img/general/animation(2).png') }}
            ></div>
        </div>

        <a
            {{-- href="https://www.youtube.com/watch?v=BigfkCeOIZQ" --}}
            href="https://www.youtube.com/watch?v=jnwTLfDYwbs"
            data-cursor
            data-gallery="gallery1"
            class="sectionVideo__btn bg-white text-black js-video-button glightbox"
        >
            <span class="sectionVideo__btn__inner">
                <i class="fa-solid fa-play"></i>
            </span>
        </a>
    </div>
    <!-- section end -->

    <!-- testimonials section start -->
    <section class="layout-pt-lg layout-pb-md">
        <div class="container">
            <div
                class="js-section-slider"
                data-slider-col="base-2 lg-2 md-1 sm-1"
                data-gap="40"
                data-loop
                data-pagination
                data-center
            >
                <div class="row justify-content-between align-items-end">
                    <div class="col-lg-6">
                        <div class="sectionHeading -md">
                        <p class="sectionHeading__subtitle">testimonials</p>
                        <h2 class="sectionHeading__title">Customer Reviews</h2>
                        </div>
                    </div>

                    <div class="col-auto">
                        <a
                        href="{{ route('testimonials') }}"
                        class="button -md -outline-black text-black md:mt-24"
                        >
                        View All
                        </a>
                    </div>
                </div>

                <div data-cursor data-cursor-label="DRAG" class="overflow-hidden js-section-slider layout-pt-md" data-slider-col="base-1 lg-1 md-1 sm-1" data-pagination data-loop>

                    <div class="swiper-wrapper">
                        @foreach ($testimonials as $testimonial)
                            <div class="swiper-slide">
                                <div class="row justify-content-center">
                                    <div class="col-lg-9 col-md-10">
                                    <div class="testimonials text-center">
                                        <p class="testimonials__comment text-3xl md:text-2xl sm:text-xl fw-500 leading-xl text-black">
                                            {{ $testimonial->description }}
                                        </p>

                                        <div class="testimonials__author mt-48">
                                            <div class="size-xl mx-auto mb-20">
                                                <div class="bg-image rounded-full swiper-lazy" data-background="{{ Storage::url($testimonial->person_image_path) }}"></div>
                                            </div>

                                            <h5 class="text-lg capitalize fw-600">{{ $testimonial->person_name }}</h5>
                                            <p class="capitalize">{{ $testimonial->person_occupation }}</p>
                                        </div>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    <div class="pagination -dark js-pagination pb-4 mt-56"></div>
                </div>
            </div>
        </div>
    </section>
    <!-- section end -->

    <!-- blog section start -->
    <section class="layout-pt-lg layout-pb-lg">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row justify-content-between align-items-end">
                <div class="col-md-6">
                <div class="sectionHeading -md">
                    <p class="sectionHeading__subtitle">our blogs</p>
                    <h2 class="sectionHeading__title">Latest blogs</h2>
                </div>
                </div>

                <div class="col-md-auto col-sm-12 sm:mt-24">
                <a
                    href="{{ route('articles.index') }}"
                    class="button -md -outline-black text-black"
                >
                    view all
                </a>
                </div>
            </div>
            <!-- row end -->

            <!-- row start -->
            <div class="row x-gap-48 y-gap-40 layout-pt-sm">
                @foreach ($articles as $article)
                    <div class="col-lg-4 col-md-6">
                        <div data-anim-wrap class="blogCard -type-1 -hover">
                            <a class="blogCard__img" href="{{ route('articles.show', $article) }}">
                                <div data-anim-child="img-right cover-dark-1 delay-1">
                                    <div
                                    class="ratio ratio-4:3 bg-image js-lazy"
                                    data-bg="{{ Storage::url($article->article_image_path) }}"
                                    ></div>
                                </div>
                            </a>

                            <div class="blogCard__content mt-24">
                                <div
                                    data-anim-child="slide-up delay-6"
                                    class="blogCard__info text-dark leading-md text-sm"
                                >
                                    <a class="fw-400 mr-4" href="#">
                                        @foreach ($article->categories as $category)
                                            @if (!$loop->last)
                                                <a href="#">{{ $category->name }}</a>,
                                            @else
                                                <a href="#">{{ $category->name }}</a>
                                            @endif
                                        @endforeach
                                    </a> -
                                    <p class="d-inline-block ml-4">{{ $article->created_at->diffForHumans() }}</p>
                                </div>

                                <div data-anim-child="slide-up delay-7">
                                    <h4
                                    class="blogCard__title text-2xl leading-lg fw-500 mt-12"
                                    >
                                    <a href="{{ route('articles.show', $article) }}">
                                        {{ $article->title }}
                                    </a>
                                    </h4>
                                </div>

                                <div data-anim-child="slide-up delay-8" class="mt-12">
                                    <a
                                        data-barba
                                        href="{{ route('articles.show', $article->slug) }}"
                                        class="button -icon text-black"
                                    >
                                        Read More
                                        <i
                                            class="icon size-xs str-width-md"
                                            data-feather="arrow-right"
                                        ></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->
@endsection

@section('scripts')
    <script>
        MicroModal.init();
        let activeServiceModal = '';

        setTimeout(function () {
            MicroModal.show('home-modal');
        }, 4000)

        function openServiceModal (service) {
            activeServiceModal = service;

            MicroModal.show(service);
        }

        function openServiceEnquiryModal (service, mainService = '') {
            MicroModal.show('enquiry-modal');
            let serviceName = document.querySelector(`#${activeServiceModal} .service__title`).innerText;

            document.querySelector('.service_name').value = `${serviceName}, ${mainService ?? null} ${service}`;
            document.querySelector('.service__enquiry__title').innerText = mainService ? `${service} (${mainService})` : `${service}`;
        }

        let services = document.querySelectorAll('.service');

        services.forEach(service => {
            service.addEventListener('click', () => {
                let chosenService = service.querySelector('.sub-text').innerText;
                let hasMultipleServices = service.parentElement.parentElement.className.includes('has-multiple-services');

                let mainService = '';

                if (hasMultipleServices) {
                    mainService = service.parentElement.parentElement.querySelector('.service__subtitle').innerText;
                }

                MicroModal.close();

                openServiceEnquiryModal(chosenService, mainService);
            })
        })
    </script>
@endsection