@extends('web.layouts.container')

@section('content')

    <section class="about about_pg section">
        <div class="container">
            <div class="row align-items-center justify-content-between">
                <div class="col-lg-5 order-last order-lg-first mt-4 mt-lg-0">
                    <div class="img">
                        <img src="{{asset($abouts[0]['meta'][0])}}" alt="">
                        <img src="{{asset($abouts[0]['meta'][1])}}" alt="">
                    </div>
                </div>

                <div class="col-lg-6">
                    <p class="info about_first_section_desc">
                        <h2 class="title mb-5 color-primary">{{$abouts[0]['title']}}</h2>
                        {!! $abouts[0]['description'] !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Start about_vid -->
    <section class="about_vid section text-center">
        <div class="container about_second_section_desc">
            <div class="section-head mb-4">
                <h2 class="title">{{$abouts[1]['title']}}</h2>
            </div>
            {!! $abouts[1]['description'] !!}
            <a href="{{$abouts[1]['meta'][0]}}" class="vid_icon" data-fancybox> <i class="fa-solid fa-play fs-4"></i> </a>
        </div>
    </section>
@endsection

@section('inner_js')
    <script>
        $(document).ready(function () {
           $('.about_first_section_desc p').addClass('text');
           $('.about_second_section_desc p').addClass('p');
        });
    </script>
@endsection