@extends('front.layout.app')
@section('content')
    <section class="main-slider main-slider--inner p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-slide">
                <div class="slide-inner bg-image"
                     data-background="{{ $page->cmsImages('background_banner_image') ?? '' }}">
                    <div class="container">
                        <div class="row justify-content-center">
                            <div class="col-lg-6">
                                <div class="slideOne">
                                    <h2>{{ $content['about_banner_title'] }}</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="about-section">
        <div class="container">
            <div class="row">
                <div class="col-md-3" data-aos="fade-up">
                    <figure class="aboutimg">
                        <img src="{{ $page->cmsImages('about_sec_img') ?? '' }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-9" data-aos="fade-up">
                    <div class="aboutcntnt">
                        <h2>{{ $content['about_sec_sub_title'] }}</h2>
                        <p class="paraa paraa--letter">{{ $content['about_sec_des'] }}</p>
                        <p>{{ $content['about_sec_2nd_des'] }}</p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center flex-row-reverse mt-5">
                <div class="col-md-6" data-aos="fade-up">

                    <figure class="aboutimg">
                        <img src="{{ $page->cmsImages('about_sec_img_2') ?? '' }}" class="img-fluid" alt="">
                    </figure>

                    {{--                <div class="swiper aboutSlider">--}}
                    {{--                    <div class="swiper-wrapper">--}}
                    {{--                        <div class="swiper-slide">--}}
                    {{--                            <figure class="aboutimg">--}}
                    {{--                                <img src="{{ asset('front/images/aboutimg7.webp') }}" class="img-fluid" alt="">--}}
                    {{--                            </figure>--}}
                    {{--                        </div>--}}
                    {{--                        <div class="swiper-slide">--}}
                    {{--                            <figure class="aboutimg">--}}
                    {{--                                <img src="{{ asset('front/images/aboutimg8.webp') }}" class="img-fluid" alt="">--}}
                    {{--                            </figure>--}}
                    {{--                        </div>--}}
                    {{--                        <div class="swiper-slide">--}}
                    {{--                            <figure class="aboutimg">--}}
                    {{--                                <img src="{{ asset('front/images/aboutimg9.webp') }}" class="img-fluid" alt="">--}}
                    {{--                            </figure>--}}
                    {{--                        </div>--}}
                    {{--                        <div class="swiper-slide">--}}
                    {{--                            <figure class="aboutimg">--}}
                    {{--                                <img src="{{ asset('front/images/aboutimg10.webp') }}" class="img-fluid" alt="">--}}
                    {{--                            </figure>--}}
                    {{--                        </div>--}}
                    {{--                    </div>--}}
                    {{--                </div>--}}
                </div>
                <div class="col-md-6" data-aos="fade-up">
                    <div class="aboutcntnt">
                        <p class="size--lg">
                            <em>{{ $content['about_sec_3rd_des'] }}</em>
                        </p>
                        <p>{{ $content['about_sec_4th_des'] }}</p>
                    </div>
                </div>
                <div class="col-12" data-aos="fade-up">
                    <div class="aboutcntnt mt-5">
                        <h2>{{ $content['about_sec_2_heading'] }}</h2>
                        <p class="paraa">
                            <em>{{ $content['about_sec_2_desc'] }}</em>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection