@extends('layouts.app')
@section('meta_title'){{$settings->meta_title}}@endsection
@section('meta_desc'){{$settings->meta_description}}@endsection
@section('meta_author'){{ env('APP_NAME') }}@endsection
@section('meta_keyword'){{$settings->meta_keywords}}@endsection
@section('canonical'){{url()->current()}}@endsection
@section('css')
@endsection
@section('content')


    <!-- start section -->
    @livewire('slider')
    <!-- end section -->

    <!-- start section -->
    @livewire('about')
    <!-- end section -->




    <section class="big-section bg-dark-gray">
        <div class="container">

            <div class="row align-items-center">
                <div class="col-12 position-relative swiper-light-pagination">
                    <div class="swiper swiper-initialized swiper-horizontal swiper-backface-hidden" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 30, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 1600, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.swiper-pagination-bullets-03&quot;, &quot;clickable&quot;: true, &quot;dynamicBullets&quot;: false }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-02&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-02&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;992&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;480&quot;: { &quot;slidesPerView&quot;: 2 }, &quot;320&quot;: { &quot;slidesPerView&quot;: 1 } }, &quot;effect&quot;: &quot;slide&quot; }">
                        <div class="swiper-wrapper align-items-center" id="swiper-wrapper-105a06434d1072aa90" aria-live="off" style="transition-duration: 0ms; transform: translate3d(-2033.33px, 0px, 0px); transition-delay: 0ms;">

                            <div class="swiper-slide" style="width: 376.667px; margin-right: 30px;" role="group" aria-label="2 / 8" data-swiper-slide-index="1">
                                <img class="w-100" src="{{ asset('uploads/1-3758.jpg') }}" alt="" data-no-retina="">
                            </div><div class="swiper-slide" style="width: 376.667px; margin-right: 30px;" role="group" aria-label="3 / 8" data-swiper-slide-index="2">
                                <img class="w-100" src="{{ asset('uploads/1-3759.jpg') }}" alt="" data-no-retina="">
                            </div><div class="swiper-slide" style="width: 376.667px; margin-right: 30px;" role="group" aria-label="4 / 8" data-swiper-slide-index="3">
                                <img class="w-100" src="{{ asset('uploads/1-3761.jpg') }}" alt="" data-no-retina="">
                            </div><div class="swiper-slide" style="width: 376.667px; margin-right: 30px;" role="group" aria-label="5 / 8" data-swiper-slide-index="4">
                                <img class="w-100" src="{{ asset('uploads/1-3762.jpg') }}" alt="" data-no-retina="">
                            </div><div class="swiper-slide swiper-slide-prev" style="width: 376.667px; margin-right: 30px;" role="group" aria-label="6 / 8" data-swiper-slide-index="5">
                                <img class="w-100" src="{{ asset('uploads/1-3763.jpg') }}" alt="" data-no-retina="">
                            </div><div class="swiper-slide swiper-slide-active" style="width: 376.667px; margin-right: 30px;" role="group" aria-label="7 / 8" data-swiper-slide-index="6">
                                <img class="w-100" src="{{ asset('uploads/1-3764.jpg') }}" alt="" data-no-retina="">
                            </div><div class="swiper-slide swiper-slide-next" role="group" aria-label="8 / 8" style="width: 376.667px; margin-right: 30px;" data-swiper-slide-index="7">
                                <img class="w-100" src="{{ asset('uploads/1-3765.jpg') }}" alt="" data-no-retina="">
                            </div><div class="swiper-slide" style="width: 376.667px; margin-right: 30px;" role="group" aria-label="1 / 8" data-swiper-slide-index="0">
                                <img class="w-100" src="{{ asset('uploads/1-3767.jpg') }}" alt="" data-no-retina="">
                            </div></div>
                        <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div>
                    <!-- start slider navigation -->
                    <div class="slider-one-slide-prev-02 bg-transparent border border-2 border-color-transparent-white-very-light h-50px w-50px swiper-button-prev slider-navigation-style-03" tabindex="0" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-105a06434d1072aa90"><i class="fa-solid fa-arrow-left text-white"></i></div>
                    <div class="slider-one-slide-next-02 bg-transparent border border-2 border-color-transparent-white-very-light h-50px w-50px swiper-button-next slider-navigation-style-03" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-105a06434d1072aa90"><i class="fa-solid fa-arrow-right text-white"></i></div>
                    <!-- end slider navigation -->
                    <!-- start slider pagination -->
                    <div class="swiper-pagination swiper-pagination-bullets-03 swiper-pagination-style-01 swiper-pagination-clickable swiper-pagination-bullets position-static mt-40px sm-mt-25px swiper-pagination-horizontal"><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 5"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 6"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 7" aria-current="true"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 8"></span></div>
                    <!-- end slider pagination -->
                </div>
            </div>
        </div>
    </section>


    <section class="position-relative" data-parallax-background-ratio="0.1" style="background-image: url('{{ asset('uploads/1-3758.jpg') }}');">
        <div class="opacity-extra-medium bg-dark-gray"></div>
        <div class="container">
            <div class="row justify-content-center align-items-center min-h-200px">
                <div class="col-12 col-xl-8 col-lg-10 position-relative text-center parallax-scrolling-style-1">
                    <span class="fw-500 text-white text-uppercase mb-5px d-inline-block ls-1px">@lang('layout.post-text-title')</span>
                    <h4 class="text-white mx-auto alt-font fw-500 mb-40px ls-minus-2px">@lang('layout.post-text-title2')</h4>
                    <p class="text-white">@lang('layout.post-text')</p>

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

    <section class="bg-dark-midnight-blue">
        <div class="container">
            <h4 class="text-center text-white">@lang('layout.post-text-title3')</h4>
            <div class="row align-items-stretch">
                <div class="col-md-8 col-12 d-flex mb-3 mb-md-0">
                    <figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px w-100 h-100">
                        <a class="stretched-link" href="javascript:void(0);">
                            <img src="{{ asset('uploads/1-3758.jpg') }}" class="w-100 h-100 object-fit-cover" alt="" data-no-retina="">
                        </a>
                    </figure>
                </div>
                <div class="col-md-4 col-12 d-flex mb-3 mb-md-0">
                    <figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px w-100 h-100">
                        <a class="stretched-link" href="javascript:void(0);">
                            <img src="{{ asset('uploads/1-3759.jpg') }}" class="w-100 h-100 object-fit-cover" alt="" data-no-retina="">
                        </a>
                    </figure>
                </div>
            </div>
        </div>
    </section>





    <section class="position-relative overflow-hidden p-0">
        <div class="container">
            <div class="row align-items-center h-450px lg-h-550px md-h-400px text-center justify-content-center">
                <div class="col-12 position-relative">
                    <h3 class="text-white fw-600  text-shadow-extra-large">@lang('layout.post-text-title6')</h3>
                    <p class="text-white">@lang('layout.post-text2')</p>
                </div>
            </div>
        </div>
        <video loop="" autoplay=""  playsinline controls="" muted class="html-video" poster="images/background-video-bg.jpg">
            <source type="video/mp4" src="{{ asset('uploads/LiraWebVideo720p.mov') }}" />
        </video>
    </section>


    <section class="bg-dark-midnight-blue">
        <div class="container">
            <div class="row">
                <h1 class="text-center text-white">@lang('layout.gallery')</h1>
                <div class="col-md-12 mb-40px sm-mb-30px">
                    <div class="swiper" data-slider-options='{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-04", "prevEl": ".slider-one-slide-prev-04" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 1 }, "768": { "slidesPerView": 1 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }'>
                        <div class="swiper-wrapper align-items-center">
                            <!-- start carousal item -->
                            <div class="swiper-slide">
                                <img src="{{ asset('uploads/1-3765.jpg') }}" alt="" />
                            </div>
                            <!-- end carousal item -->
                            <!-- start carousal item -->
                            <div class="swiper-slide">
                                <img src="{{ asset('uploads/1-3769.jpg') }}" alt="" />
                            </div>
                            <!-- end carousal item -->
                            <!-- start carousal item -->
                            <div class="swiper-slide">
                                <img src="{{ asset('uploads/1-3767.jpg') }}" alt="" />
                            </div>
                            <!-- end carousal item -->
                        </div>
                        <!-- start slider navigation -->
                        <div class="slider-one-slide-prev-04 text-white w-100px sm-w-70px swiper-button-prev slider-navigation-style-02"><i class="fa-solid fa-arrow-left icon-small"></i></div>
                        <div class="slider-one-slide-next-04 text-white w-100px sm-w-70px swiper-button-next slider-navigation-style-02"><i class="fa-solid fa-arrow-right icon-small"></i></div>
                        <!-- end slider navigation -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    @livewire('contact')


@section('js')
@endsection

@endsection