@section('title', __('cms/aboutUs.About Us'))

@push('style')
<link rel="stylesheet" href="{{ mix('css/web/cms/aboutUs.css') }}">
@endpush

@push('script')
<script src="{{mix('js/web/cms/aboutUs.js')}}"></script>
@endpush

<x-layout>
    <div class="full_banner banner-inner">
        <div class="main_banner">
            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <div class="banner_hov2">
                            <h1>@Lang('cms/aboutUs.About Us')</h1>
                            <p>{{$banner->title}}</p>
                        </div>
                        <img src="{{Storage::disk('musawer')->url($banner->file)}}" class="d-block w-100" alt="...">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main_packag back-logo-left">
        <div class="container">
            <div class="row packag_sec1">
                <div class="col-md-1"></div>
                <div class="col-md-5 col-sm-12 col-12 position-relative">
                    <h4 class="sub_header5"><span>{{$howItStarted->title}}</span></h4>
                    <div class="main_para_2">{!! $howItStarted->html !!}</div>
                </div>
                <div class="col-md-6 col-sm-12 col-12">
                    <div class="about-img-e1 ">
                        <span class="hove-shape1"></span><span class="hove-shape2"></span><a href="#"></a>
                        <img src="{{Storage::disk('musawer')->url($howItStarted->file)}}" class="w-100">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bgm_section_1 dhthrth" @if($ourPhilosophy->thumbnail && Storage::disk('musawer')->exists($ourPhilosophy->thumbnail)) style="background: url({{Storage::disk('musawer')->url($ourPhilosophy->thumbnail)}});" @endif>
        <div class="container">
            <div class="row packag_sec1 mobile_div_wrap">
                <div class="col-md-1 mobile_wrap_3"></div>
                <div class="col-md-4 col-sm-12 col-12 mobile_wrap_1 philosophy-section">
                    <img src="{{Storage::disk('musawer')->url($ourPhilosophy->file)}}" class="img-fluid">
                </div>
                <div class="col-md-5 col-sm-12 col-12 position-relative mobile_wrap_2">
                    <h4 class="sub_header5">{{$ourPhilosophy->title}}</h4>
                    <div class="main_para_2">{!! $ourPhilosophy->html !!}</div>
                </div>

            </div>
        </div>
    </div>
    <div class="main_packag pb-4">
        <div class="container pb-4 h-100">
            <h1 class="main_head_1">@Lang('cms/aboutUs.Our Services')</h1>
            <div class="row packag_sec1 pt-5 pb-5 row-eq-height h-100">
                <div class="col-lg-12 col-xl-4 col-sm-12 col-12 pt-10 pb-10 pt-lg-0 d-none d-md-block">
                    <h4 class="sub_header5">{{$ourServicePhotography->title}}</h4>
                    <div class="main_para_2">{!! $ourServicePhotography->html !!}</div>
                    <a class="reamore_bt1" href="{{route('web_categories_listing', ['division' => 'photography'])}}"><img src="{{asset('images/web/arrow.png')}}">@Lang('cms/aboutUs.LEARN MORE')</a>
                </div>
                <div class="col-lg-12 col-xl-8 col-sm-12 col-12 pt-xl-5 pt-lg-0 pb-5">
                    <h4 class="sub_header5 d-md-none">{{$ourServicePhotography->title}}</h4>
                    <div class="img-grid-box animate-box fadeInUp animated">
                        <img src="{{Storage::disk('musawer')->url($ourServicePhotography->file)}}" class="img-fluid">
                    </div>
                    <div class="main_para_2 d-md-none">{!! $ourServicePhotography->html !!}</div>
                    <a class="reamore_bt1 d-md-none" href="{{route('web_categories_listing', ['division' => 'photography'])}}"><img src="{{asset('images/web/arrow.png')}}">@Lang('cms/aboutUs.LEARN MORE')</a>
                </div>
            </div>
            <div class="row packag_sec1 mobile_div_wrap">
                <div class="col-xs-12 col-sm-12 col-12 col-md-7 mobile_wrap_1">
                    <h4 class="sub_header5 d-md-none">{{$ourServiceVideoGraphy->title}}</h4>
                    <div style="max-width:800px; margin: 0 auto;" class="embed-responsive embed-responsive-21by9">
                        <div class="img-grid-box animate-box fadeInUp animated">
                            <a href="javascript:void(0)" id="openVideo"><img src="{{Storage::disk('musawer')->url($ourServiceVideoGraphy->thumbnail)}}" class="img-fluid"></a>
                        </div>
                    </div>
                    <div class="main_para_2 d-md-none">{!! $ourServiceVideoGraphy->html !!}</div>
                    <a class="reamore_bt1 d-md-none" href="{{route('web_categories_listing', ['division' => 'videography'])}}"><img src="{{asset('images/web/arrow.png')}}">@Lang('cms/aboutUs.LEARN MORE')</a>
                    <div id="light">
                        <a class="boxclose" id="boxclose"></a>
                        <video id="serviceVideo" width="600" controls>
                            <source src="{{Storage::disk('musawer')->url($ourServiceVideoGraphy->file)}}" type="video/mp4">
                        </video>
                    </div>
                    <div id="fade"></div>
                </div>
                <div class="col-md-4 col-sm-12 col-12 mobile_wrap_2 position-relative d-none d-md-block">
                    <h4 class="sub_header5">{{$ourServiceVideoGraphy->title}}</h4>
                    <div class="main_para_2">{!! $ourServiceVideoGraphy->html !!}</div>
                    <a class="reamore_bt1" href="{{route('web_categories_listing', ['division' => 'videography'])}}"><img src="{{asset('images/web/arrow.png')}}">@Lang('cms/aboutUs.LEARN MORE')</a>
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </div>
</x-layout>