@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">
                                {!! __('product-info.product_title_1') !!}
                            </div>

                            {!! __('product-info.product_description_1') !!}

                        </div>

                    </div>

                    <div class="col-md-6 order-0 order-lg-2">

                        <div class="img mb-30 mb-lg-0">

                            <img src="assets/img/about/design-1.webp" alt="">

                        </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="assets/img/about/design-11.webp" alt="">

                        </div>

                    </div>

                    <div class="col-md-6">

                        <div class="info">

                            <div class="section-head style-4">

                                {!! __('product-info.product_title_2') !!}

                            </div>
                            {!! __('product-info.product_description_2') !!}
                        </div>

                    </div>

                </div>

            </div>

            <img src="assets/img/about/about_s4_bubble.png" alt="" 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">

                                {!! __('product-info.product_title_3') !!}

                            </div>

                            <p class="text mb-40">
                                {!! __('product-info.product_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="assets/img/about/design-3.webp" alt="">

                        </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="assets/img/about/design-9.webp" alt="">

                        </div>

                    </div>

                    <div class="col-md-6">

                        <div class="info">

                            <div class="section-head style-4">

                                {!! __('product-info.product_title_4') !!}

                            </div>

                            {!! __('product-info.product_description_4') !!}

                        </div>

                    </div>

                </div>

            </div>

            <img src="assets/img/about/about_s4_bubble.png" alt="" 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">

                                {!! __('product-info.product_title_5') !!}

                            </div>

                            {!! __('product-info.product_description_5') !!}


                        </div>

                    </div>

                    <div class="col-md-6 order-0 order-lg-2">

                        <div class="img mb-30 mb-lg-0">

                            <img src="assets/img/about/design-7.webp" alt="">

                        </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="assets/img/about/design-8.webp" alt="">

                        </div>

                    </div>

                    <div class="col-md-6">

                        <div class="info">

                            <div class="section-head style-4">

                                {!! __('product-info.product_title_6') !!}

                            </div>

                            {!! __('product-info.product_description_6') !!}

                        </div>

                    </div>

                </div>

            </div>

            <img src="assets/img/about/about_s4_bubble.png" alt="" 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">

                                {!! __('product-info.product_title_7') !!}

                            </div>

                            {!! __('product-info.product_description_7') !!}


                        </div>

                    </div>

                    <div class="col-md-6 order-0 order-lg-2">

                        <div class="img mb-30 mb-lg-0">

                            <img src="assets/img/about/design-10.webp" alt="">

                        </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="assets/img/about/design-4.webp" alt="">

                        </div>

                    </div>

                    <div class="col-md-6">

                        <div class="info">

                            <div class="section-head style-4">

                                {!! __('product-info.product_title_8') !!}

                            </div>

                            {!! __('product-info.product_description_8') !!}

                        </div>

                    </div>

                </div>

            </div>

            <img src="assets/img/about/about_s4_bubble.png" alt="" class="bubble">

        </div>

    </section>

@endsection