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

    <section class="about style-4">
        <div class="content sec-content">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md-6 order-2 order-lg-0">
                        <div class="info">
                            <div class="section-head style-4">
                                {!! __('service-info.service_title_1') !!}
                            </div>
                            <p class="text mb-40">
                                {{ __('service-info.service_description_1') }}
                            </p>

                        </div>
                    </div>
                    <div class="col-md-6 order-0 order-lg-2">
                        <div class="img mb-30 mb-lg-0">
                            <img src="{{asset('assets/img/about/bespoke-software-development.png')}}" alt="image of monitor">
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/img/about/about_s4_bubble2.png')}}" alt="animation image" class="bubble2">
        </div>
        <div class="content trd-content">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md-6">
                        <div class="img mb-30 mb-lg-0">
                            <img src="{{asset('assets/img/about/App-innovation-and-development.png')}}" alt="image of hologram">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info">
                            <div class="section-head style-4">
                                {!! __('service-info.service_title_2') !!}
                            </div>
                            <p class="text mb-40">
                                {{ __('service-info.service_description_2') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/img/about/about_s4_bubble.png')}}" alt="animation image" class="bubble">
        </div>
        <div class="content sec-content">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md-6 order-2 order-lg-0">
                        <div class="info">
                            <div class="section-head style-4">
                                {!! __('service-info.service_title_3') !!}
                            </div>
                            <p class="text mb-40">
                                {{ __('service-info.service_description_3') }}
                            </p>
                        </div>
                    </div>
                    <div class="col-md-6 order-0 order-lg-2">
                        <div class="img mb-30 mb-lg-0">
                            <img src="{{asset('assets/img/about/tailored-software-solutions.png')}}" alt="tailored software solutions image">
                        </div>
                    </div>
                </div>
            </div>
            <img src="assets/img/about/about_s4_bubble2.png" alt="" class="bubble2">
        </div>
        <div class="content trd-content">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md-6">
                        <div class="img mb-30 mb-lg-0">
                            <img src="{{asset('assets/img/about/efficiency-through-software-automation .png')}}" alt="efficiency through software automation image">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info">
                            <div class="section-head style-4">
                                {!! __('service-info.service_title_4') !!}
                            <p class="text mb-40">
                                {{ __('service-info.service_description_4') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/img/about/about_s4_bubble.png')}}" alt="animation image" class="bubble">
        </div>
    </section>
    <!-- ====== end about ====== -->

    <section class="about style-4">

        <div class="content sec-content">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md-6 order-2 order-lg-0">
                        <div class="info">
                            <div class="section-head style-4">
                                {!! __('service-info.service_title_5') !!}
                            </div>
                            <p class="text mb-40">
                                {{ __('service-info.service_description_5') }}
                            </p>


                        </div>
                    </div>
                    <div class="col-md-6 order-0 order-lg-2">
                        <div class="img mb-30 mb-lg-0">
                            <img src="{{asset('assets/img/about/digital-transformation-consultation.png')}}" alt="digital transformation image">
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/img/about/about_s4_bubble2.png')}}" alt="animation image" class="bubble2">
        </div>

        <div class="content trd-content">
            <div class="container">
                <div class="row align-items-center justify-content-between">
                    <div class="col-md-6">
                        <div class="img mb-30 mb-lg-0">
                            <img src="{{asset('assets/img/about/data-analytics-and-business-intelligence.png')}}" alt="data analytics and business intelligence">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info">
                            <div class="section-head style-4">
                                {!! __('service-info.service_title_6') !!}
                            </div>
                            <p class="text mb-40">
                                {{ __('service-info.service_description_6') }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <img src="{{asset('assets/img/about/about_s4_bubble.png')}}" alt="animation image" class="bubble">
        </div>
    </section>
@endsection