@extends('front.layouts.app')
@section('content')

    <nav aria-label="breadcrumb" class="pagebtitle">
        <div class="container">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('front.home') }}"><i class="far fa-home"></i></a></li>
                <li class="breadcrumb-item active" aria-current="page">About Us</li>
            </ol>
        </div>
    </nav>



    <section class="aboutinner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h2 class="heading " data-aos="fade-up">{{ $content['about_us_title'] }}</h2>
                    <p>{!! $content['about_us_detail'] !!}</p>
                </div>
                <div class="col-md-6">
                    <figure>
                        <img src="{{ $about->about_us_image }}" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
            <div class="row align-items-center flex-row-reverse mt-5">
                <div class="col-md-6">
                    <h2 class="heading " data-aos="fade-up">{{ $content['our_mission_title'] }}</h2>
                    <p>{!! $content['our_mission_detail'] !!}
                    </p>
                </div>
                <div class="col-md-6">
                    <figure>
                        <img src="{{ $about->our_mission_image }}" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>


    <!-- INSTA SECTION -->
    <section class="insta-section">
        <div class="container-fluid">
            <h2 class="heading text-center mb-4" data-aos="fade-up">Follow Us On Instagram</h2>
            <div class="row">
                <div class="col-md-3">
                    <div class="row">
                        <div class="col-12">
                            <figure>
                                <a href="{{ asset('images/insta1.webp') }}" data-fancybox="insta images">
                                    <img src="{{ asset('images/insta1.webp') }}" class="img-fluid" alt="" data-aos="zoom-out">
                                </a>
                            </figure>
                        </div>
                        <div class="col-12">

                            <figure>
                                <a href="{{ asset('images/insta2.webp') }}" data-fancybox="insta images">
                                    <img src="{{ asset('images/insta2.webp') }}" class="img-fluid" alt="" data-aos="zoom-out">
                                </a>
                            </figure>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <figure>
                        <a href="{{ asset('images/insta3.webp') }}" data-fancybox="insta images">
                            <img src="{{ asset('images/insta3.webp') }}" class="img-fluid" alt="" data-aos="zoom-out">
                        </a>
                    </figure>
                </div>
                <div class="col-md-5">
                    <div class="row">
                        <div class="col-md-6">
                            <figure>
                                <a href="{{ asset('images/insta4.webp') }}" data-fancybox="insta images">
                                    <img src="{{ asset('images/insta4.webp') }}" class="img-fluid" alt="" data-aos="zoom-out">
                                </a>
                            </figure>
                        </div>
                        <div class="col-md-6">
                            <figure>
                                <a href="{{ asset('images/insta5.webp') }}" data-fancybox="insta images">
                                    <img src="{{ asset('images/insta5.webp') }}" class="img-fluid" alt="" data-aos="zoom-out">
                                </a>
                            </figure>
                        </div>
                        <div class="col-12">
                            <figure>
                                <a href="{{ asset('images/insta6.webp') }}" data-fancybox="insta images">
                                    <img src="{{ asset('images/insta6.webp') }}" class="img-fluid" alt="" data-aos="zoom-out">
                                </a>
                            </figure>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <!-- !@INSTA SECTION -->


@endsection