@extends('layouts.frontend.app')
@section('content')
    <section class="about style-4 mt-60">
        <div class="integration">
            <div class="row justify-content-center">
                <div class="col-10">
                    <div class="section-head text-center style-4">
                        {!! __('about-info.title') !!}
                    </div>
                    <div class="author text-center ">
                        <span class="color-000 fw-bold text-capitalize font-names">Steve Jobs</span>

                    </div>

                </div>
            </div>
            <div class="container">
                <div class="content mb-100 pb-100 border-1 border-bottom brd-gray">
                    <div class="img">
                        <img src="{{asset('assets/img/about/link-front-gradient.png')}}" alt="" width="140" class="mt-30">
                    </div>
                    <div class="img">
                        <img src="{{asset('assets/img/about/picture-front-color.png')}}" alt="" width="110" class="mt-60">
                    </div>
                    <div class="img">
                        <img src="{{asset('assets/img/about/fav-folder-front-color.png')}}" alt="" width="140" class="mt-20">
                    </div>
                    <div class="img">
                        <img src="{{asset('assets/img/about/location-front-color.png')}}" alt="" width="150" class="mt-80">
                    </div>
                    <div class="img">
                        <img src="{{asset('assets/img/about/target-front-color.png')}}" alt="" width="150">
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/img/about/intg_back.png')}}" width="800" alt="" class="intg-back">
        </div>
    </section>


    <section class="choose-us style-6">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-6 col-md-6">
                    <div class="img">
                        <img src="{{asset('assets/img/choose_us/business_man_graph.webp')}}" alt="Man with Graph" width="800">
                    </div>
                </div>
                <div class="col-12 col-md-6">
                    <div class="info">
                        <div class="section-head mb-20 style-4">
                            <h2> Who <span>We Are</span> </h2>
                        </div>
                        {!! __('about-info.description') !!}
                    </div>
                </div>
            </div>
        </div>
        <img src="assets/img/about/about_bg_2.png" alt="" width="800" height="800" class="bubbles rotate-center">
    </section>
    <section class="about style-4">
        <div class="container">
            <div class="content">
                <div class="row justify-content-center">
                    <div class="col-sm-6">
                        <div class="features-card mb-30 style-5">
                            <div class="icon">
                                <img src="{{asset('assets/img/icons/spyglass-3d.webp')}}" alt="">
                            </div>
                            <div class="info">
                                {!! __('about-info.vision') !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="features-card mb-30 style-5">
                            <div class="icon">
                                <img src="{{asset('assets/img/icons/mission-3d-illustration-icon-png.webp')}}" alt="">
                            </div>
                            <div class="info">
                                {!! __('about-info.mission') !!}
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8 mt-md-5 text-center">
                        <div class="features-card mb-30 style-5">
                            <div class="icon">
                                <img src="{{asset('assets/img/icons/key-icon.webp')}}" alt="">
                            </div>
                            <div class="info">
                                {!! __('about-info.value') !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection