@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
{!! $metaTags['otherMetaTags'] !!}
@endsection
@push('css')
<style>
    #tooltip {
        background-color: #333;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 13px;
    }
</style>
@endpush
@section('content')
<div id="pageWrapper" class="homepage">
    @if ($banners->isNotEmpty())
    <section id="MainBanner" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-touch="false"
             data-bs-interval="4000">
        <div class="carousel-inner">
            @foreach ($banners as $banner)
            <div class="carousel-item{{ $loop->iteration == 1 ? ' active' : '' }}">
                <div class="flxoutBx">
                    <div class="container">
                        <div class="flxB">
                            <div class="lftB">
                                <div class="imgB">
                                    <img src="{{ $banner->image_value }}" width="458" height="458" alt="{{ strip_tags($banner->title) }}"
                                         loading="lazy">
                                    @if ($banner->bannerCoordinates->isNotEmpty())
                                    @foreach ($banner->bannerCoordinates as $bannerCoordinate)
                                    <div class="tooltipBx"
                                         style="left:{{ $bannerCoordinate->x }}%; top:{{ $bannerCoordinate->y }}%">
                                        <div class="pointerBtn coordinateIcon"
                                             data-template="banner-coordinate-{{ $bannerCoordinate->banner_id }}{{ $bannerCoordinate->id }}">
                                            <div class="crcle">
                                                <div class="pls">+</div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="ritB">
                                <div class="txtB">
                                    <div class="nm">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}.
                                    </div>
                                    <h1 class="ttle">{!! $banner->title !!}</h1>
                                    <div class="txt">{{ $banner->subtitle }}</div>
                                    @if ($banner->display_type == 2 && !empty($banner->buttons))
                                    <div class="btnWrap">
                                        @foreach ($banner->buttons as $button)

                                        @if (($button['action_type'] ?? 'url') === 'popup')

                                        <a href="{{ $button['url'] }}"
                                           class="cta-button"
                                           aria-label="{{ $button['label'] }}"
                                           data-label="{{ $button['label'] }}"
                                           data-bs-toggle="modal"
                                           data-bs-target="#OurDealer-Sec"
                                           >
                                            {{ $button['label'] }}
                                        </a>

                                        @else

                                        <a href="{{ $button['url'] }}"
                                           class="cta-button"
                                           aria-label="{{ $button['label'] }}"
                                           data-label="{{ $button['label'] }}">
                                            {{ $button['label'] }}
                                        </a>

                                        @endif

                                        @endforeach
                                    </div>
                                    @endif
                                </div>
                            </div>
                            <div class="bgTxt">{{ $banner->bg_title }}</div>
                            @if ($banner->display_type == 1)
                            <div class="videoBx">
                                <a href="{{ $banner->video_value }}" class="vidBx" data-fancybox="vidGal"
                                   aria-label="Play Video">
                                    <img src="{{ $banner->thumbnail_value }}"
                                         alt="{{ strip_tags($banner->title) }}" width="342" height="205" loading="lazy">
                                    <div class="ico">
                                        <svg viewBox="0 0 16.967 19.592">
                                        <path id="Polygon_{{ $loop->iteration }}"
                                              data-name="Polygon {{ $loop->iteration }}" class="cls-1"
                                              d="M408.217,515.274l-16.967,9.8V505.478Z"
                                              transform="translate(-391.25 -505.478)" />
                                        </svg>
                                    </div>
                                </a>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        @if ($banners->count() > 1)
        <div class="btmFlx">
            <div class="container">
                <div class="flB">
                    <div class="cArrow">
                        <button class="arrow control-prev" type="button" data-bs-target="#MainBanner"
                                data-bs-slide="prev" aria-label="Previous slide">
                            <svg width="16" height="21.391" viewBox="0 0 16 21.391">
                            <path id="Path_14_1" data-name="Path 14"
                                  d="M219.407,11.013l12.283,8.982a.828.828,0,0,1,0,1.42,1.75,1.75,0,0,1-1.942,0l-13.254-9.69a.828.828,0,0,1,0-1.42L229.748.611a1.75,1.75,0,0,1,1.942,0,.828.828,0,0,1,0,1.42Z"
                                  transform="translate(-216.092 -0.317)" />
                            </svg>
                        </button>
                        <button class="arrow control-next" type="button" data-bs-target="#MainBanner"
                                data-bs-slide="next" aria-label="Next slide">
                            <svg width="16" height="21.391" viewBox="0 0 16 21.391">
                            <path id="Path_14_2" data-name="Path 14"
                                  d="M228.778,11.013l-12.283,8.982a.828.828,0,0,0,0,1.42,1.75,1.75,0,0,0,1.942,0l13.254-9.69a.828.828,0,0,0,0-1.42L218.436.611a1.75,1.75,0,0,0-1.942,0,.828.828,0,0,0,0,1.42Z"
                                  transform="translate(-216.092 -0.317)" />
                            </svg>
                        </button>
                    </div>
                    <div class="carousel-count" aria-live="polite">
                        <div class="current-index"></div>/<div class="total-items"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="carousel-indicators">
            <div class="cindi">
                @foreach ($banners as $banner)
                <button type="button" data-bs-target="#MainBanner" data-bs-slide-to="{{ $loop->index }}"
                        {!! $loop->index == 0 ? 'class="active" aria-current="true"' : '' !!} aria-label="Slide {{ $loop->iteration }}">
                    <span></span>
                </button>
                @endforeach
            </div>
        </div>
        @endif
        <a href="#aboutSec" class="scrlDwn" aria-label="Scroll down to about section">
            <div class="txt">SCROLL DOWN</div>
            <div class="ioo">
                <lottie-player src="{{ asset('frontend/images/down.json') }}" background="transparent"
                               speed="1" style="width: 53px; height: 53px;" loop autoplay></lottie-player>
            </div>
        </a>
        <div style="display: none;">
            @foreach ($banners as $banner)
            @if ($banner->bannerCoordinates->isNotEmpty())
            @foreach ($banner->bannerCoordinates as $bannerCoordinate)
            <div class="hoverBx"
                 id="banner-coordinate-{{ $bannerCoordinate->banner_id }}{{ $bannerCoordinate->id }}">
                {{ $bannerCoordinate->content }}
            </div>
            @endforeach
            @endif
            @endforeach
        </div>
    </section>
    @endif
    <section id="aboutSec">
        <div class="container">
            <div class="txtB wow animate__fadeIn animate__animated">
                <h2 class="Btitle wow animate__fadeIn animate__animated">{{ $cms->main_title }}</h2>
                <div class="Mtitle wow animate__fadeIn animate__animated">{{ $cms->title }}</div>
                {!! $cms->description !!}
                <a href="{{ route('about-us') }}" class="cta-button" aria-label="Know More"
                   data-label="DISCOVER MORE">
                    DISCOVER MORE
                </a>
            </div>
        </div>
    </section>
    @if ($features->isNotEmpty())
    <section id="comparisonSec">
        <div class="container">
            <div class="hTtleBx">
                <div class="Btitle wow animate__fadeIn animate__animated">{!! $cms->product_features_title !!}</div>
                <div class="mtitle wow animate__fadeIn animate__animated">{{ $cms->product_features_bg_title }}
                </div>
            </div>
            <div class="flxBx">
                <div class="lftB wow animate__fadeIn animate__animated">
                    <div class="slider--vertical">
                        @foreach ($features as $feature)
                        <div class="item{{ $loop->iteration == 1 ? ' active' : '' }}">
                            <div class="flxBx">
                                <div class="lt">
                                    <div class="num">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}
                                    </div>
                                </div>
                                <div class="rt">
                                    <div class="ttle">{{ $feature->title }}</div>
                                    <div class="txt">{{ $feature->description }}</div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="ritB wow animate__fadeIn animate__animated">
                    <div class="bgImg">
                        <svg viewBox="0 0 654 622">
                        <defs>
                        <style>
                        </style>
                        <linearGradient id="linear-gradient" x1="0.5" x2="0.5"
                                        y2="1" gradientUnits="objectBoundingBox">
                        <stop offset="0" stop-color="#fff" />
                        <stop offset="1" stop-color="#351a55" />
                        </linearGradient>
                        </defs>
                        <path id="Path_101728" data-name="Path 101728" class="cls-1"
                              d="M16,0H638c8.837,0,16,6.844,16,15.287L528.666,606.713c0,8.443-7.163,15.287-16,15.287H128.623c-8.837,0-16-6.844-16-15.287L0,15.287C0,6.844,7.163,0,16,0Z" />
                        </svg>
                    </div>
                    <div class="coparisonBx">
                        <div id="comparison" class="comparison">
                            <figure>
                                <div class="imgBx">
                                    <img src="{{ $cms->product_feature_image_one_value }}"
                                         data-src="{{ $cms->product_feature_image_one_value }}" class="lazy"
                                         loading="lazy" width="746" height="746"
                                         alt="{{ $cms->product_feature_image_one_value }}">
                                </div>
                                <div class="handle" data-slider-id="slider1" style="left: 57%;">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="22.805" height="11.44"
                                         viewBox="0 0 22.805 11.44">
                                    <g id="Group_20810" data-name="Group 20810"
                                       transform="translate(-511.098 -1699.78)">
                                    <g id="layer1" transform="translate(521.98 1418.656)">
                                    <path id="path828"
                                          d="M2.966,281.125a.817.817,0,0,0-.849.817v9.8a.817.817,0,0,0,1.236.7l8.171-4.9a.817.817,0,0,0,0-1.4l-8.171-4.9a.816.816,0,0,0-.388-.116Z"
                                          transform="translate(0 0)" fill="#fff" />
                                    </g>
                                    <g id="layer1-2" data-name="layer1"
                                       transform="translate(511.098 1699.78)">
                                    <path id="path828-2" data-name="path828"
                                          d="M11.073,281.125a.817.817,0,0,1,.849.817v9.8a.817.817,0,0,1-1.236.7l-8.171-4.9a.817.817,0,0,1,0-1.4l8.171-4.9a.816.816,0,0,1,.388-.116Z"
                                          transform="translate(-2.117 -281.124)" fill="#fff" />
                                    </g>
                                    </g>
                                    </svg>
                                </div>
                                <div class="divisor" data-slider-id="slider1"
                                     style="background-image: url('{{ $cms->product_feature_image_two_value }}'); width: 57%;">
                                </div>
                            </figure>
                            <input type="range" min="0" max="100" value="50" id="slider1"
                                   oninput="moveDivisor('slider1')">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    @if ($featuredProducts->isNotEmpty())
    <section id="featureSec">
        <div class="container">
            <div class="flxHead">
                <div class="lftB wow animate__fadeIn animate__animated">
                    <div class="Mtitle wow animate__fadeIn animate__animatede">
                        {{ $cms->featured_product_bg_title }}
                    </div>
                    <div class="Btitle wow animate__fadeIn animate__animated">{{ $cms->featured_product_title }}
                    </div>
                </div>
                <div class="ritB wow animate__fadeIn animate__animated">
                    <div class="navButtons">
                        <div class="item">
                            <button class="OwlPrev customSlideNav" type="button" aria-label="Previous Slide">
                                <div class="icon">
                                    <svg id="ARROW_48" data-name="ARROW 48" xmlns="http://www.w3.org/2000/svg"
                                         width="16" height="21.391" viewBox="0 0 16 21.391">
                                    <path id="Path_14_3" data-name="Path 14"
                                          d="M219.407,11.013l12.283,8.982a.828.828,0,0,1,0,1.42,1.75,1.75,0,0,1-1.942,0l-13.254-9.69a.828.828,0,0,1,0-1.42L229.748.611a1.75,1.75,0,0,1,1.942,0,.828.828,0,0,1,0,1.42Z"
                                          transform="translate(-216.092 -0.317)" />
                                    </svg>
                                </div>
                            </button>
                        </div>
                        <div class="item">
                            <button class="OwlNext customSlideNav" type="button" aria-label="Next Slide">
                                <div class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="21.391"
                                         viewBox="0 0 16 21.391">
                                    <g id="ARROW_48" data-name="ARROW 48"
                                       transform="translate(-5.397 -0.317)">
                                    <path id="Path_14_4" data-name="Path 14"
                                          d="M228.778,11.013l-12.283,8.982a.828.828,0,0,0,0,1.42,1.75,1.75,0,0,0,1.942,0l13.254-9.69a.828.828,0,0,0,0-1.42L218.436.611a1.75,1.75,0,0,0-1.942,0,.828.828,0,0,0,0,1.42Z"
                                          transform="translate(-210.695 0)" />
                                    </g>
                                    </svg>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="featuredSlider owl-carousel wow animate__fadeIn animate__animated">
            @foreach ($featuredProducts as $featuredProduct)
            <div class="item">
                <div class="slideBx">
                    <a href="@productRoute($featuredProduct)" class="ftrBx" aria-label="{{ $featuredProduct->title }}">
                        <div class="imgBx">
                            <img class="hvr" src="{{ $featuredProduct->primary_image_value }}" width="315" height= "425"
                                 alt="{{ $featuredProduct->title }}" loading="lazy">
                            <img class="onhvr" src="{{ $featuredProduct->secondary_image_value }}" width="315" height= "468"
                                 alt="{{ $featuredProduct->title }}" loading="lazy">
                        </div>
                        <div class="txtBx">
                            <div class="txtInb">
                                <div class="tBx">
                                    <div class="ttle">{{ $featuredProduct->title }}</div>
                                    @if ($featuredProduct->subtitle)
                                    <div class="txt">{{ $featuredProduct->subtitle }}</div>
                                    @endif
                                </div>
                                <div class="hideBx">
                                    <p>{{ $featuredProduct->short_description }}</p>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </section>
    @endif
    @if ($useCases->isNotEmpty())
    <section id="useCaseSec">
        <div class="container">
            <div class="flxHead">
                <div class="lftB wow animate__fadeIn animate__animated">
                    <div class="Mtitle wow animate__fadeIn animate__animated">{{ $cms->use_case_title }}</div>
                    <div class="Btitle wow animate__fadeIn animate__animated">{{ $cms->use_case_bg_title }}</div>
                </div>
                <div class="ritB wow animate__fadeIn animate__animated">
                    <div class="navButtons">
                        <div class="item">
                            <button class="OwlPrev customSlideNav" type="button">
                                <div class="icon">
                                    <svg id="ARROW_48" data-name="ARROW 48" xmlns="http://www.w3.org/2000/svg"
                                         width="16" height="21.391" viewBox="0 0 16 21.391">
                                    <path id="Path_14" data-name="Path 14"
                                          d="M219.407,11.013l12.283,8.982a.828.828,0,0,1,0,1.42,1.75,1.75,0,0,1-1.942,0l-13.254-9.69a.828.828,0,0,1,0-1.42L229.748.611a1.75,1.75,0,0,1,1.942,0,.828.828,0,0,1,0,1.42Z"
                                          transform="translate(-216.092 -0.317)" />
                                    </svg>
                                </div>
                            </button>
                        </div>
                        <div class="item">
                            <button class="OwlNext customSlideNav" type="button">
                                <div class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="21.391"
                                         viewBox="0 0 16 21.391">
                                    <g id="ARROW_48" data-name="ARROW 48"
                                       transform="translate(-5.397 -0.317)">
                                    <path id="Path_14" data-name="Path 14"
                                          d="M228.778,11.013l-12.283,8.982a.828.828,0,0,0,0,1.42,1.75,1.75,0,0,0,1.942,0l13.254-9.69a.828.828,0,0,0,0-1.42L218.436.611a1.75,1.75,0,0,0-1.942,0,.828.828,0,0,0,0,1.42Z"
                                          transform="translate(-210.695 0)" />
                                    </g>
                                    </svg>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="CustomeContainer">
            <div class="sliderBx wow animate__fadeIn animate__animated">
                <div class="owl-carousel owl-theme Featureslider">
                    @foreach ($useCases as $useCase)
                    <a href="{{ route('use-case-details', $useCase->slug) }}" class="latestBox"
                       aria-label="{{ $useCase->title }}">
                        <div class="imgBox">
                            <img src="{{ $useCase->image_value }}" width="352" height="450" alt="{{ $useCase->title }}"
                                 loading="lazy">
                        </div>
                        <div class="info">
                            <div class="more">
                                <svg viewBox="0 0 18 37.031">
                                <g id="chairs" transform="translate(0)">
                                <g id="Group_20867" data-name="Group 20867" transform="translate(0)">
                                <path id="Path_101737" data-name="Path 101737"
                                      d="M148.444,215.175l-1.191,1.085-.847.768-1.032.926a7.714,7.714,0,0,0-2.3,3.918,1.626,1.626,0,0,1-1.668,1.271,1.575,1.575,0,0,1-1.562-1.4,5.224,5.224,0,0,1,1.324-4.421l8.471-9.238a6.663,6.663,0,0,0,.5-8.338l-5.771-8.1a6.669,6.669,0,0,1-1.218-3.918,1.622,1.622,0,0,1,1.4-1.588,1.59,1.59,0,0,1,1.8,1.085,11.694,11.694,0,0,0,2.726,4.447l6.776,7.015a7.112,7.112,0,0,1,1.747,3.071.562.562,0,1,1-1.085.291,6.067,6.067,0,0,0-1.456-2.568l-6.8-6.988a12.992,12.992,0,0,1-2.965-4.871.478.478,0,0,0-.582-.344.529.529,0,0,0-.45.5,5.511,5.511,0,0,0,1.006,3.256l5.771,8.1a7.768,7.768,0,0,1-.582,9.741l-8.47,9.238a4.071,4.071,0,0,0-1.032,3.468.5.5,0,0,0,.5.45.507.507,0,0,0,.529-.4,8.821,8.821,0,0,1,2.647-4.474l1.509-1.35.026-.026,8.629-7.941a5.887,5.887,0,0,0,1.853-3.521.562.562,0,1,1,1.112.159,6.461,6.461,0,0,1-.529,1.853l-.529.979a5.933,5.933,0,0,1-.715.9,3.026,3.026,0,0,1-.291.291m-.9.847-5.506,5.03Z"
                                      transform="translate(-139.769 -186.113)" />
                                </g>
                                </g>
                                </svg>
                            </div>
                            <div class="ttxBx">
                                <div class="title">{{ $useCase->title }}</div>
                                <div class="txt">{{ $useCase->short_description }}</div>
                            </div>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @endif
    @if ($seatingSolutions->isNotEmpty())
    <section id="seatingSolutionSec">
        <div class="container">
            <div class="flxBx">
                <div class="lftB wow animate__fadeIn animate__animated">
                    <div class="Btitle wow animate__fadeIn animate__animated">{{ $cms->seating_solution_title }}
                    </div>
                    <div class="Mtitle wow animate__fadeIn animate__animated">
                        {{ $cms->seating_solution_bg_title }}
                    </div>
                </div>
                <div class="ritB wow animate__fadeIn animate__animated">
                    <p>{{ $cms->seating_solution_short_description }}</p>
                </div>
            </div>
        </div>
        <div class="CustomeContainer">
            <div class="sliderBx wow animate__fadeIn animate__animated">
                <div class="owl-carousel owl-theme seatingslider">
                    @foreach ($seatingSolutions as $seatingSolution)
                    <a href="{{ route('seating-solutions-details', $seatingSolution->slug) }}"
                       class="latestBox">
                        <div class="imgBox">
                            <img src="{{ $seatingSolution->image_value }}"
                                 alt="{{ $seatingSolution->title }}" width="352" height="450" loading="lazy">
                        </div>
                        <div class="info">
                            <div class="title">{{ $seatingSolution->title }}</div>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    @endif
    @if ($homeImaginatorObjects->isNotEmpty())
    <section id="wiproSeatingSec">
        <div class="container">
            <div class="seatingBx" id="seatingArea">
                @foreach ($homeImaginatorObjects as $homeImaginatorObject)
                @if ($homeImaginatorObject->homeImaginatorBackgrounds->isNotEmpty())
                <div class="bgImg objectBg" data-id="{{ $homeImaginatorObject->id }}">
                    @foreach ($homeImaginatorObject->homeImaginatorBackgrounds as $homeImaginatorBackground)
                    <a href="{{ $homeImaginatorBackground->image_value }}" class="itm"
                       data-fancybox="itmGal" data-id="ibg-{{ $homeImaginatorBackground->id }}">
                        <div class="info-box" style="opacity:0;">
                            <h6>Tap and pinch to zoom</h6>
                        </div>
                        <picture>
                            <source media="(min-width: 468px)"
                                    srcset="{{ $homeImaginatorBackground->image_value }}" />
                            <img src="{{ $homeImaginatorBackground->image_value }}" width="1920"
                                 height="1080" alt="{{ $homeImaginatorBackground->title }}"
                                 loading="lazy" />
                        </picture>
                    </a>
                    @endforeach
                </div>
                @endif
                @endforeach
                <div class="ttleBx wow animate__fadeIn animate__animated">
                    <div class="Btitle wow animate__fadeIn animate__animated">
                        {{ $cms->seating_imaginator_title }}
                    </div>
                    <div class="Mtitle wow animate__fadeIn animate__animated">
                        {{ $cms->seating_imaginator_bg_title }}
                    </div>
                </div>
                <div class="proDbx wow animate__fadeIn animate__animated">
                    <div class="lftBx">
                        <div class="slider mainSlide">
                            @foreach ($homeImaginatorObjects as $homeImaginatorObject)
                            <div class="gallery_slide{{ $loop->iteration == 1 ? ' active' : '' }}">
                                @if (
                                $homeImaginatorObject->homeImaginatorCoordinates->isNotEmpty() ||
                                $homeImaginatorObject->homeImaginatorBackgrounds->isNotEmpty())
                                <div class="tab-content">
                                    <div class="tab-pane fade show active"
                                         id="pills-{{ $loop->iteration }}" role="tabpanel"
                                         aria-labelledby="pills-{{ $loop->iteration }}-tab"
                                         data-id="{{ $homeImaginatorObject->id }}">
                                        @if ($homeImaginatorObject->product)
                                        <a class="imgB" href="@productRoute($homeImaginatorObject->product)"
                                           aria-label="{{ $homeImaginatorObject->title }}">
                                            <img src="{{ $homeImaginatorObject->image_value }}"
                                                 alt="{{ $homeImaginatorObject->title }}" width="435" height="330"
                                                 loading="lazy">
                                            @if ($homeImaginatorObject->homeImaginatorCoordinates->isNotEmpty())
                                            <div class="pointerBx">
                                                @foreach ($homeImaginatorObject->homeImaginatorCoordinates as $homeImaginatorCoordinate)
                                                <div class="tooltipBx"
                                                     style="left:{{ $homeImaginatorCoordinate->x }}%; top:{{ $homeImaginatorCoordinate->y }}%">
                                                    <div class="pointerBtn coordinateIcon"
                                                         data-template="home-imaginator-coordinate-{{ $homeImaginatorCoordinate->home_imaginator_object_id }}{{ $homeImaginatorCoordinate->id }}">
                                                        <div class="crcle">
                                                            <div class="pls">+</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                            @endif
                                        </a>
                                        @else
                                        <div class="imgB"
                                             aria-label="{{ $homeImaginatorObject->title }}">
                                            <img src="{{ $homeImaginatorObject->image_value }}"
                                                 alt="{{ $homeImaginatorObject->title }}" width="435" height="330"
                                                 loading="lazy">
                                            @if ($homeImaginatorObject->homeImaginatorCoordinates->isNotEmpty())
                                            <div class="pointerBx">
                                                @foreach ($homeImaginatorObject->homeImaginatorCoordinates as $homeImaginatorCoordinate)
                                                <div class="tooltipBx"
                                                     style="left:{{ $homeImaginatorCoordinate->x }}%; top:{{ $homeImaginatorCoordinate->y }}%">
                                                    <div class="pointerBtn coordinateIcon"
                                                         data-template="home-imaginator-coordinate-{{ $homeImaginatorCoordinate->home_imaginator_object_id }}{{ $homeImaginatorCoordinate->id }}">
                                                        <div class="crcle">
                                                            <div class="pls">+</div>
                                                        </div>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                            @endif
                                        </div>
                                        @endif
                                    </div>
                                    @if ($homeImaginatorObject->homeImaginatorBackgrounds->isNotEmpty())
                                    @foreach ($homeImaginatorObject->homeImaginatorBackgrounds as $homeImaginatorBackground)
                                    <div class="tab-pane fade"
                                         id="pills-{{ $loop->parent->iteration }}{{ $loop->iteration }}"
                                         role="tabpanel"
                                         aria-labelledby="pills-{{ $loop->parent->iteration }}{{ $loop->iteration }}-tab">
                                        @if ($homeImaginatorObject->product)
                                        <a class="imgB" href="@productRoute($homeImaginatorObject->product)"
                                           aria-label="{{ $homeImaginatorBackground->title }}">
                                            <img src="{{ $homeImaginatorBackground->image_value }}" width="435" height="330"
                                                 alt="{{ $homeImaginatorBackground->title }}"
                                                 loading="lazy">
                                        </a>
                                        @else
                                        <div class="imgB"
                                             aria-label="{{ $homeImaginatorBackground->title }}">
                                            <img src="{{ $homeImaginatorBackground->image_value }}" width="435" height="330"
                                                 alt="{{ $homeImaginatorBackground->title }}"
                                                 loading="lazy">
                                        </div>
                                        @endif
                                    </div>
                                    @endforeach
                                    @endif
                                </div>
                                @if ($homeImaginatorObject->homeImaginatorBackgrounds->isNotEmpty())
                                <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link remove active"
                                                id="pills-{{ $loop->iteration }}-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#pills-{{ $loop->iteration }}"
                                                type="button" role="tab"
                                                aria-controls="pills-{{ $loop->iteration }}"
                                                aria-selected="true"
                                                data-id="{{ $homeImaginatorObject->id }}">
                                            None
                                        </button>
                                    </li>
                                    @foreach ($homeImaginatorObject->homeImaginatorBackgrounds as $homeImaginatorBackground)
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link"
                                                id="pills-{{ $loop->parent->iteration }}{{ $loop->iteration }}-tab"
                                                data-bs-toggle="pill"
                                                data-bs-target="#pills-{{ $loop->parent->iteration }}{{ $loop->iteration }}"
                                                type="button" role="tab"
                                                aria-controls="pills-{{ $loop->parent->iteration }}{{ $loop->iteration }}"
                                                aria-selected="false"
                                                data-id="{{ $homeImaginatorObject->id }}"
                                                data-background-id="ibg-{{ $homeImaginatorBackground->id }}">
                                            {{ $homeImaginatorBackground->title }}
                                        </button>
                                    </li>
                                    @endforeach
                                </ul>
                                @endif
                                @else
                                @if ($homeImaginatorObject->product)
                                <a class="imgB" href="@productRoute($homeImaginatorObject->product)">
                                    <img src="{{ $homeImaginatorObject->image_value }}" width="435" height="330"
                                         alt="{{ $homeImaginatorObject->title }}" loading="lazy">
                                </a>
                                @else
                                <div class="imgB">
                                    <img src="{{ $homeImaginatorObject->image_value }}" width="435" height="330"
                                         alt="{{ $homeImaginatorObject->title }}" loading="lazy">
                                </div>
                                @endif
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="ritBx">
                        <div class="slider thumbSlide">
                            @foreach ($homeImaginatorObjects as $homeImaginatorObject)
                            <div class="item object" data-id="{{ $homeImaginatorObject->id }}">
                                <button class="imgB">
                                    <img src="{{ $homeImaginatorObject->image_value }}" width="46" height="56"
                                         alt="{{ $homeImaginatorObject->title }}" loading="lazy">
                                </button>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display: none;">
            @foreach ($homeImaginatorObjects as $homeImaginatorObject)
            @if ($homeImaginatorObject->homeImaginatorCoordinates->isNotEmpty())
            @foreach ($homeImaginatorObject->homeImaginatorCoordinates as $homeImaginatorCoordinate)
            <div class="hoverBx"
                 id="home-imaginator-coordinate-{{ $homeImaginatorCoordinate->home_imaginator_object_id }}{{ $homeImaginatorCoordinate->id }}">
                {{ $homeImaginatorCoordinate->content }}
            </div>
            @endforeach
            @endif
            @endforeach
        </div>
    </section>
    @endif
    <div id="ergonomicSec">
        <div class="container">
            <div class="row">
                <div class="col-lg-7">
                    <div class="lftB wow animate__fadeIn animate__animated">
                        <div class="bgIco">
                            <img src="{{ asset('frontend/images/bgico.svg') }}" width="620" height="590" alt="bgico" loading="lazy">
                        </div>
                        <div class="Btitle wow animate__fadeIn animate__animated">
                            {{ $cms->ergonomic_office_chair_title }}
                        </div>
                        <div class="Mtitle wow animate__fadeIn animate__animated">
                            {{ $cms->ergonomic_office_chair_bg_title }}
                        </div>
                        {!! $cms->ergonomic_office_chair_short_description !!}
                        <a href="{{ $cms->ergonomic_office_chair_url }}" class="cta-button"
                           aria-label="EXPLORE MORE" data-label="EXPLORE MORE">
                            EXPLORE MORE
                        </a>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="ritB wow animate__fadeIn animate__animated">
                        {{-- <div class="vidBx">
                            <video class="dsk" poster="{{ $cms->ergonomic_office_chair_video_thumbnail_value }}"
                                   autoplay loop muted playsinline
                                   src="{{ $cms->ergonomic_office_chair_video_value }}"></video>
                        </div> --}}
                        <model-viewer class="cweAnim" poster="{{ $cms->ergonomic_office_chair_video_value }}"
                                      src="{{ $cms->ergonomic_office_chair_video_value }}"
                                      alt="{{ $cms->ergonomic_office_chair_title }}" auto-rotate loading="eager"
                                      camera-controls disable-zoom autoplay background-color="transparent">
                        </model-viewer>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if ($clients->isNotEmpty())
    <section id="clientSec">
        <div class="container">
            <div class="title wow animate__fadeIn animate__animated">{{ $cms->client_title }}</div>
            @foreach ($clients->chunk(ceil($clients->count() / 2)) as $index => $chunk)
            <div class="splide TeamSlide{{ $loop->iteration }}" role="group"
                 aria-label="Team Slide{{ $loop->iteration > 1 ? $loop->iteration : '' }}">
                <div class="splide__track">
                    <ul class="splide__list">
                        @foreach ($chunk as $client)
                        <li class="splide__slide">
                            <div class="imgBx">
                                <img src="{{ $client->image_value }}" alt="{{ $client->name }}" width="209" height="144"
                                     loading="lazy" title="{{ $client->name }}">
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
            </div>
            @endforeach
        </div>
    </section>
    @endif
    @if ($blogs->isNotEmpty())
    <div id="blogSec">
        <div class="container">
            <div class="flxBx wow animate__fadeIn animate__animated">
                <div class="lftBx wow animate__fadeIn animate__animated">
                    <div class="Btitle wow animate__fadeIn animate__animated">{{ $cms->blog_title }}</div>
                    <div class="Mtitle wow animate__fadeIn animate__animated">{{ $cms->blog_bg_title }}</div>
                </div>
                <div class="ritB wow animate__fadeIn animate__animated">
                    <a href="{{ route('blogs') }}" class="more" aria-label="Read all updates">READ ALL
                        UPDATES
                        <div class="ico">
                            <img src="{{ asset('frontend/images/rt.svg') }}" alt="Read all" width="15" height="15" loading="lazy">
                        </div>
                    </a>
                </div>
            </div>
            <div class="flexBlogWrap">
                @php
                $chunkSize = $blogs->count() == 1 ? 1 : 2;
                @endphp
                @foreach ($blogs->chunk($chunkSize) as $index => $chunk)
                <div class="Blckitem">
                    @foreach ($chunk as $innerIndex => $blog)
                    <div class="item">
                        <a href="{{ route('blog-details', $blog->slug) }}"
                           class="blgBx b{{ ($innerIndex % 6) + 1 }}"
                           aria-label="Read more about {{ $blog->title }}">
                            <div class="imGBx">
                                <img src="{{ $blog->listing_page_image_value }}"
                                     alt="{{ $blog->title }}" width="428" height="330" loading="lazy">
                            </div>
                            <div class="txtBx">
                                <div class="title">
                                    {{ $blog->title }}
                                </div>
                                <p>{{ $blog->short_description }}</p>
                                <div class="more">Read More</div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endif
    @if ($faqs->isNotEmpty())
    <section id="faqSec">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="lftB wow animate__fadeIn animate__animated">
                        <div class="title wow animate__fadeIn animate__animated">{!! $cms->faq_title !!}</div>
                        <p>{{ $cms->faq_short_description }}</p>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="ritB wow animate__fadeIn animate__animated">
                        <div class="accordion" id="accr1">
                            @foreach ($faqs as $faq)
                            <div class="accordion-item">
                                <div class="accordion-header" id="hd{{ $loop->iteration }}">
                                    <button class="accordion-button collapsed" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#cd{{ $loop->iteration }}"
                                            aria-expanded="false" aria-controls="cd{{ $loop->iteration }}"
                                            aria-label="{{ $faq->question }}">
                                        {{ $faq->question }}
                                    </button>
                                </div>
                                <div id="cd{{ $loop->iteration }}" class="accordion-collapse collapse"
                                     aria-labelledby="hd{{ $loop->iteration }}" data-bs-parent="#accr1">
                                    <div class="accordion-body">
                                        {!! $faq->answer !!}
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <a href="{{ route('faq') }}" class="cta-button" aria-label="View more FAQs"
                           title="View frequently asked questions" data-label="VIEW MORE">
                            VIEW MORE
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    {{-- <div id="instafeedSec">
        <div class="headBx wow animate__fadeIn animate__animated">
            <div class="txtB wow animate__fadeIn animate__animated">
                <div class="title wow animate__fadeIn animate__animated">{{ $cms->instagram_field_title }}</div>
                @if ($cms->instagram_link)
                <a href="{{ $cms->instagram_link }}" class="instx wow animate__fadeIn animate__animated"
                   target="_blank" aria-label="Visit {{ $cms->instagram_username }} on Instagram">
                    <div class="ico">
                        <img src="{{ asset('frontend/images/instagram.png') }}" width="18" height="18"  alt="instagram" loading="lazy">
                    </div>
                    {{ $cms->instagram_username }}
                </a>
                @endif
                <div class="Ftxt wow animate__fadeIn animate__animated">
                    {{ $cms->instagram_field_short_description }}
                </div>
            </div>
            <div class="bgTxt">{{ $cms->instagram_field_bg_title }}</div>
        </div>
        <div id="instafeed" class="instaSlide owl-carousel wow animate__fadeIn animate__animated">
            @foreach ($instagramFeed as $item)
            <div class="item">
                <a href="{{ $item->permalink }}" class="instaBx" target="_blank"
                   aria-label="{{ $item->caption ?? '' }}">
                    <img src="{{ $item->media_url }}" alt="{{ $item->caption ?? '' }}" loading="lazy">
                </a>
            </div>
            @endforeach
        </div>
    </div> --}}
</div>
@endsection
@push('js')
<!-- TOUCH_SWIPE-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- owl carousel  -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<!-- SPLIDE  -->
<script src="//cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
<script
    src="//cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js">
</script>
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
<!-- glb -->
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/src/focus-visible.min.js"></script>
<script>
        // SCROLL MAGIC
        $("#MainBanner").swipe({
            swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
                if (direction == 'left')
                    $(this).carousel('next');
                if (direction == 'right')
                    $(this).carousel('prev');
            },
            allowPageScroll: "vertical"
        })
        // GLB 
        document.addEventListener("DOMContentLoaded", function () {
            const tag = document.createElement("script");
            tag.src = "https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js";
            tag.type = "module";
            document.head.appendChild(tag);
        });
        $(document).ready(function () {
            var totalItems = $('.carousel-item').length;
            var currentIndex = $('.carousel-item.active').index() + 1;

            updateCarouselCount(currentIndex, totalItems);

            $('#MainBanner').on('slid.bs.carousel', function () {
                currentIndex = $('.carousel-item.active').index() + 1;
                updateCarouselCount(currentIndex, totalItems);
            });

            function updateCarouselCount(index, total) {
                $('.current-index').text(pad(index, 2));
                $('.total-items').text(pad(total, 2));
            }

            function pad(number, digits) {
                number = number.toString();
                while (number.length < digits) {
                    number = '0' + number;
                }
                return number;
            }
        });

        var features = "{{ $features->count() }}";
        if (features > 0) {
            $(function () {
                var lis_count = $('#comparisonSec .slider--vertical .item').length;
                var active_li_index = 0;

                setInterval(function () {
                    if ($('#comparisonSec .slider--vertical .item.active').index() == lis_count - 1)
                        active_li_index = 0;
                    else
                        active_li_index++;

                    $('#comparisonSec .slider--vertical .item.active').removeClass('active');
                    $('#comparisonSec .slider--vertical .item').eq(active_li_index).addClass('active');
                }, 4000);
            })
        }

        function moveDivisor(sliderId) {
            var slider = document.getElementById(`${sliderId}`);
            var divisor = document.querySelector(`.divisor[data-slider-id="${sliderId}"]`);
            var handle = document.querySelector(`.handle[data-slider-id="${sliderId}"]`);

            var sliderValue = slider.value;
            var width = 100 - sliderValue;

            handle.style.left = slider.value + "%";
            divisor.style.width = slider.value + "%";

        }

        $(document).ready(function () {
            var featuredSlider = $('.featuredSlider');
            $('.featuredSlider').owlCarousel({
                loop: false,
                rewind: true,
                autoplay: true,
                autoplayTimeout: 3500,
                autoplayHoverPause: false,
                responsiveClass: true,
                nav: false,
                dots: false,
                items: 1,
                margin: 5,
                responsive: {
                    478: {
                        items: 1.6,
                        margin: 20,
                    },
                    576: {
                        items: 2,
                        margin: 20,
                    },
                    768: {
                        items: 3,
                        margin: 25,
                    },
                    992: {
                        items: 4,
                        margin: 25,
                    },
                    1560: {
                        items: 5,
                        margin: 30,
                    },
                    1661: {
                        items: 5,
                        margin: 40,
                    }
                }
            });

            $('#featureSec .customSlideNav.OwlNext').click(function () {
                featuredSlider.trigger('next.owl.carousel');
            });

            $('#featureSec .customSlideNav.OwlPrev').click(function () {
                featuredSlider.trigger('prev.owl.carousel');
            });
        });
        $('.mainSlide').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            asNavFor: '.thumbSlide'
        });

        $('.thumbSlide').slick({
            asNavFor: '.mainSlide',
            slidesToShow: 5,
            infinite: true,
            slidesToScroll: 1,
            dots: false,
            vertical: true,
            centerMode: true,
            centerPadding: '0px',
            arrows: true,
            focusOnSelect: true,
            prevArrow: "<button type='button' class='slick-prev pull-left' aria-label='Previous Slide'></button>",
            nextArrow: "<button type='button' class='slick-next pull-right' aria-label='Next Slide'></button>",
            responsive: [{
                    breakpoint: 1560,
                    settings: {
                        slidesToShow: 4,
                    }
                },
                {
                    breakpoint: 1200,
                    settings: {
                        slidesToShow: 3,
                    }
                },
                {
                    breakpoint: 576,
                    settings: {
                        slidesToShow: 4,
                        vertical: false,
                    }
                },
                {
                    breakpoint: 468,
                    settings: {
                        slidesToShow: 3,
                        vertical: false,
                    }
                }
            ]
        });

        function changeClass(className) {
            const seatingArea = document.getElementById('seatingArea');
            seatingArea.className = 'seatingBx ' + className; // Reset class and add the new one
        }
        $(document).ready(function () {
            var Featureslider = $('.Featureslider');

            Featureslider.owlCarousel({
                loop: true,
                nav: false,
                dots: false,
                autoplay: false,
                rewind: true,
                smartSpeed: 500,
                autoplayTimeout: 3500,
                items: 1,
                autoplayHoverPause: true,
                margin: 10,
                responsive: {
                    468: {
                        items: 1,
                        margin: 15,
                    },
                    600: {
                        items: 1,
                        margin: 20,
                    },
                    992: {
                        items: 2.2,
                        margin: 25,
                    },
                    1441: {
                        items: 2.2,
                        margin: 26,
                    }
                },
            });

            function updateFirstActiveItem() {
                Featureslider.find('.owl-item').removeClass('firstactiveitem');
                Featureslider.find('.owl-item.active').first().addClass('firstactiveitem');
            }

            updateFirstActiveItem();
            Featureslider.on('translated.owl.carousel', updateFirstActiveItem);


            $('#useCaseSec .customSlideNav.OwlNext').click(function () {
                Featureslider.trigger('next.owl.carousel');
            });

            $('#useCaseSec .customSlideNav.OwlPrev').click(function () {
                Featureslider.trigger('prev.owl.carousel');
            });
        });
        $(document).ready(function () {
            var ftSlider = $('.seatingslider');

            ftSlider.owlCarousel({
                loop: true,
                nav: true,
                dots: false,
                autoplay: false,
                rewind: true,
                smartSpeed: 500,
                autoplayTimeout: 3500,
                items: 1,
                autoplayHoverPause: true,
                margin: 10,
                responsive: {
                    468: {
                        items: 2,
                        margin: 15,
                    },
                    576: {
                        items: 2.6,
                        margin: 15,
                    },
                    768: {
                        items: 3,
                        margin: 20,
                    },
                    1000: {
                        items: 3.9,
                        margin: 19,
                    }
                },
            });

            function updateFirstActiveItem() {
                ftSlider.find('.owl-item').removeClass('firstactiveitem');
                ftSlider.find('.owl-item.active').first().addClass('firstactiveitem');
            }
            updateFirstActiveItem();
            ftSlider.on('translated.owl.carousel', updateFirstActiveItem);
        });

        $(document).ready(function () {
            var countdown = 5;
            var interval;

            // Check if the modal has been shown during the current session
            if (sessionStorage.getItem('modalShown') !== 'true') {
                function updateCountdown() {
                    $('#countdown').text(countdown);
                    if (countdown === 0) {
                        clearInterval(interval);
                        closeModal();
                    } else {
                        countdown--;
                    }
                }

                function closeModal() {
                    $('#HomePopModal').removeClass('show').attr('aria-hidden', 'true');
                    $('#closeModalButton').off('click', closeModal);
                    $(document).off('keydown', trapFocus);
                    // Set modalShown to true so it doesn't show again in the same session
                    sessionStorage.setItem('modalShown', 'true');
                }

                function trapFocus(event) {
                    var focusableElements = $('#HomePopModal').find(
                            'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
                            );
                    var firstElement = focusableElements[0];
                    var lastElement = focusableElements[focusableElements.length - 1];
                    if (event.key === 'Tab') {
                        if (event.shiftKey) {
                            if (document.activeElement === firstElement) {
                                event.preventDefault();
                                lastElement.focus();
                            }
                        } else {
                            if (document.activeElement === lastElement) {
                                event.preventDefault();
                                firstElement.focus();
                            }
                        }
                    }
                }

                $('#HomePopModal').addClass('show').attr('aria-hidden', 'false');
                $('#closeModalButton').on('click', closeModal);
                $(document).on('keydown', trapFocus);
                interval = setInterval(updateCountdown, 1000);
            }
        });

        $(document).ready(function () {
            var closeModalButton = $('.HomePopModal .btn-close');
            var modal = $('.HomePopModal');
            closeModalButton.on('click', function () {
                modal.removeClass('show').attr('aria-hidden', 'true');
                $(document).off('keydown', trapFocus);
            });

            function trapFocus(event) {
                var focusableElements = modal.find(
                        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
                var firstElement = focusableElements[0];
                var lastElement = focusableElements[focusableElements.length - 1];
                if (event.key === 'Tab') {
                    if (event.shiftKey) {
                        if (document.activeElement === firstElement) {
                            event.preventDefault();
                            lastElement.focus();
                        }
                    } else {
                        if (document.activeElement === lastElement) {
                            event.preventDefault();
                            firstElement.focus();
                        }
                    }
                }
            }
        });

        var clients = "{{ $clients->count() }}";
        document.addEventListener('DOMContentLoaded', function () {
            const initSplide = (selector, rtl = false) => new Splide(selector, {
                    type: 'loop',
                    perPage: 6,
                    cover: true,
                    pauseOnHover: false,
                    pauseOnFocus: false,
                    autoWidth: false,
                    updateOnMove: true,
                    gap: '20px',
                    drag: false,
                    pagination: false,
                    arrows: false,
                    direction: rtl ? 'rtl' : 'ltr',
                    breakpoints: {
                        992: {
                            perPage: 5,
                            gap: '15px'
                        },
                        768: {
                            perPage: 4,
                            gap: '15px'
                        },
                        480: {
                            perPage: 2,
                            gap: '10px',
                            height: 'auto',
                            autoScroll: {
                                speed: 0.5
                            }
                        },
                    },
                    autoScroll: {
                        speed: 1
                    },
                }).mount(window.splide.Extensions);

            if (clients > 0)
                initSplide('.TeamSlide1');
            if (clients > 1)
                initSplide('.TeamSlide2', true);
        });

        // Instafeed configuration
        // $('#instafeed').owlCarousel({
        //     loop: $('#instafeed .item').length > 1,
        //     autoplay: true,
        //     autoplayTimeout: 3500,
        //     autoplayHoverPause: true,
        //     nav: false,
        //     dots: false,
        //     margin: 7,
        //     responsive: {
        //         468: {
        //             items: 2
        //         },
        //         700: {
        //             items: 3
        //         },
        //         992: {
        //             items: 5
        //         }
        //     }
        // });

        tippy('.coordinateIcon', {
            content(reference) {
                const id = reference.getAttribute('data-template');
                const template = document.getElementById(id);
                return template.innerHTML;
            },
            allowHTML: true,
            theme: 'light-border',
            animation: 'perspective',
            touch: true,
            // trigger: 'click',
            interactive: true,
        });

        $(document).ready(function () {
            $('.item.object').on('click', function () {
                $('#seatingArea').removeClass('open');
                $('.bgImg.objectBg').removeClass('active');
                $('.objectBg .itm').removeClass('active');
                $('.nav-link').removeClass('active');
                var id = $(this).data('id');
                $('.nav-link.remove[data-id="' + id + '"]').addClass('active');
                $('.tab-pane.fade').removeClass('active show');
                $('.tab-pane.fade[data-id="' + id + '"]').addClass('active show');
            });

            $('.nav-link').on('click', function () {
                if (!$(this).hasClass('remove')) {
                    $('#seatingArea').addClass('open');
                    $('.bgImg.objectBg').removeClass('active');
                    $('.objectBg .itm').removeClass('active');
                    var id = $(this).data('id');
                    var backgroundId = $(this).data('background-id');
                    $('.bgImg.objectBg[data-id="' + id + '"]').addClass('active');
                    $('.objectBg .itm[data-id="' + backgroundId + '"]').addClass('active');
                    $('.objectBg .itm[data-id="' + backgroundId + '"] .info-box')
                            .css('opacity', '1')
                            .delay(3000)
                            .queue(function (next) {
                                $(this).css('opacity', '0');
                                next();
                            });
                } else {
                    $('#seatingArea').removeClass('open');
                    $('.bgImg.objectBg').removeClass('active');
                    $('.objectBg .itm').removeClass('active');
                }
            });
        });
</script>
@endpush