{{-- <!--#############About Us############-->
<section class="py-5 bg-white">
    <div class="container py-5">
        <div class="row align-items-center pt-5 gx-lg-5 gy-4">
            <div class="col-lg-7 position-relative wow fadeInUp" data-wow-duration="1.5s">
                <div class="custom-logo-about  ">
                    <img src="{{ $about->image_path }}" class="img-fluid shadow-lg rounded-4"
                        alt="{{ $about->alt_image }}">
                </div>
            </div>
            <div class="col-md-5 wow fadeInUp" data-wow-duration="1s">
                <h2 class="mb-3 fw-bold d-grid text-uppercase text-main">
                    {{ $about->title }}
                </h2>
                <p class="text-muted mb-4 lh-lg fs-5">
                    {!! $about->text !!}
                </p>
            </div>
        </div>
    </div>
</section>
<!--#############Our Mission############-->
@foreach ($about_structs as $about_struct)
    <section class="pt-5 {{ $loop->index % 2 == 0 ? 'bg-section' : 'bg-white' }}">
        <div class="container py-5">
            <div class="row align-items-center py-5 gx-lg-5 gy-4">

                @if ($loop->index % 2 == 0)
                    <!-- الصورة على اليمين -->
                    <div class="col-md-5 wow fadeInUp" data-wow-duration="1s">
                        <h2 class="mb-3 fw-bold d-grid">
                            <span class="text-uppercase mb-2 text-main">{{ $about_struct->name }}</span>
                        </h2>
                        <p class="text-muted mb-4 lh-lg fs-5">
                            {!! $about_struct->text !!}
                        </p>
                    </div>
                    <div class="col-lg-7 position-relative wow fadeInUp" data-wow-duration="1.5s">
                        <div class="custom-logo-about">
                            <img src="{{ $about_struct->icon_path }}" class="img-fluid shadow-lg rounded-4"
                                alt="{{ $about_struct->alt_image }}">
                        </div>
                    </div>
                @else
                    <!-- الصورة على الشمال -->
                    <div class="col-lg-7 position-relative wow fadeInUp" data-wow-duration="1.5s">
                        <div class="custom-logo-about">
                            <img src="{{ $about_struct->icon_path }}" class="img-fluid shadow-lg rounded-4"
                                alt="{{ $about_struct->alt_image }}">
                        </div>
                    </div>
                    <div class="col-md-5 wow fadeInUp" data-wow-duration="1s">
                        <h2 class="mb-3 fw-bold d-grid">
                            <span class="text-uppercase mb-2 text-main">{{ $about_struct->name }}</span>
                        </h2>
                        <p class="text-muted mb-4 lh-lg fs-5">
                            {!! $about_struct->text !!}
                        </p>
                    </div>
                @endif

            </div>
        </div>
    </section>
@endforeach
<!--###################################################Our Mission###################################################--> --}}
<!-- About Section Start -->
<section class="about-section section-padding pt-100">

    <div class="container">
        <div class="about-wrapper">
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="about-image-items">
                        <img src="{{ $about->image_path }}" alt="{{ $about->alt_image }}">
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="about-content">
                        <div class="section-title">
                            <h6 class="wow fadeInUp">{{__('website.Our Company')}}</h6>
                            <h2 class="wow fadeInUp" data-wow-delay=".3s">
                                {{ $about->title }}
                                {{-- <span> Your Business </span> --}}
                            </h2>
                        </div>
                        <p class="mt-3 mt-md-0 wow fadeInUp" data-wow-delay=".5s">
                            {!! $about->text !!}

                        </p>

                        {{-- <div class="about-author">
                            <a href="about.html" class="theme-btn wow fadeInUp" data-wow-delay=".3s">more about
                                us</a>

                        </div> --}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@include('Website.about-partials._statistics')
<!-- Work Process Section Start -->
<section class="work-process-section section-padding fix">
    <div class="container">
        <div class="section-title text-center">
            <h6 class="wow fadeInUp">{{__('website.Mission&Vision')}}</h6>
        </div>
        <div class="work-process-wrapper">
            <div class="row">
                @foreach ($about_structs as $index=>$about_struct)
                    <div class="col-xl-6 col-lg-6 col-ms-6 wow fadeInUp" data-wow-delay=".{{ ($index + 1) * 2 }}s">
                        <div class="work-process-box-items">
                            <div class="content">
                                <h3>{{ $about_struct->name }}</h3>
                                <p>
                                    {!! $about_struct->long_desc !!} </p>
                            </div>
                            <div class="number">
                                {{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>