@extends('layout.main')



@section('main-section')
    <div class="content-wrapper">

        <!-- Breadcrumb Start -->
        <div class="breadcrumb-wrap bg-spring">
            <img src="{{ asset('assets/img/breadcrumb/br-shape-1.png') }}" alt="Image" class="br-shape-one xs-none">
            <img src="{{ asset('assets/img/breadcrumb/br-shape-2.png') }}" alt="Image" class="br-shape-two xs-none">
            <img src="{{ asset('assets/img/breadcrumb/br-shape-3.png') }}" alt="Image"
                class="br-shape-three moveHorizontal sm-none">
            <img src="{{ asset('assets/img/breadcrumb/br-shape-4.png') }}" alt="Image"
                class="br-shape-four moveVertical sm-none">

            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-7 col-md-8 col-sm-8">
                        <div class="breadcrumb-title">
                            <h2>About Us</h2>
                            <ul class="breadcrumb-menu list-style">
                                <li><a href="{{ route('home') }}">Home </a></li>
                                <li>About Us</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-4 col-sm-4 xs-none">
                        <div class="breadcrumb-img">
                            <img src="{{ asset('assets/img/breadcrumb/br-shape-5.png') }}" alt="Image"
                                class="br-shape-five animationFramesTwo">
                            <img src="{{ asset('assets/img/breadcrumb/br-shape-6.png') }}" alt="Image"
                                class="br-shape-six bounce">
                            <img src="{{ asset('assets/img/breadcrumb/breadcrumb-1.png') }}" alt="Image">

                        </div>
                    </div>
                </div>

            </div>
        </div>
        <!-- Breadcrumb End -->

        <!-- About Section Start -->
        {{-- <section class="about-wrap style1 ptb-100">
            <div class="container">
                <div class="row gx-5 align-items-center">
                    <div class="col-lg-6">
                        <div class="about-img-wrap">
                            <img src="{{ asset('assets/img/about/about-shape-1.png') }}" alt="Image"
                                class="about-shape-one bounce">
                            <img src="{{ asset('assets/img/about/about-shape-2.png') }}" alt="Image"
                                class="about-shape-two moveHorizontal">
                            <img src="{{ asset('assets/img/about/about-img-1.png') }}" alt="Image" class="about-img">

                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about-content">
                            <!-- Swiper -->
                            <div class="swiper mySwiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="{{ asset('assets/img/about/about-shape-3.png') }}" alt="Image"
                                            class="about-shape-three">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="{{ asset('assets/img/about/about-shape-2.png') }}" alt="Image"
                                            class="about-shape-three">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="{{ asset('assets/img/about/about-shape-1.png') }}" alt="Image"
                                            class="about-shape-three">
                                    </div>
                                </div>
                            </div>

                            <div class="content-title style1">
                                <span>Smart Banking</span>
                                <h2>The Better Way To Save &amp; Invest Online Banking</h2>
                                <p>There are many variations of passages of Lorem Ipsum amet avoilble but majority have
                                    suffered alteration in some form...</p>
                            </div>
                            <ul class="content-feature-list style1 list-style">
                                <li><span><i class="flaticon-tick"></i></span>Cards that work all across the world.</li>
                                <li><span><i class="flaticon-tick"></i></span>Highest Returns on your investments.</li>
                                <li><span><i class="flaticon-tick"></i></span>No ATM fees. No minimum balance. No
                                    overdrafts.</li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </section> --}}
        <!-- About Section End -->


        <section class="shopping-wrap ptb-100">
            <div class="container">
                <div class="row align-items-center">
                    <!-- Carousel Image Column: now on the left -->
                    <div class="col-lg-6 col-12 order-lg-1 order-1">
                        <div class="shopping-img-wrap">
                            <!-- Bootstrap Carousel Start -->
                            <div id="shoppingCarousel" class="carousel slide" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                    <div class="carousel-item active">
                                        <img src="{{ asset('assets/img/about/about1.png') }}" class="d-block w-100"
                                            alt="Slide 1">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="{{ asset('assets/img/about/about2.png') }}" class="d-block w-100"
                                            alt="Slide 2">
                                    </div>
                                    <div class="carousel-item">
                                        <img src="{{ asset('assets/img/about/about3.png') }}" class="d-block w-100"
                                            alt="Slide 3">
                                    </div>
                                </div>
                                <button class="carousel-control-prev" type="button" data-bs-target="#shoppingCarousel"
                                    data-bs-slide="prev">
                                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Previous</span>
                                </button>
                                <button class="carousel-control-next" type="button" data-bs-target="#shoppingCarousel"
                                    data-bs-slide="next">
                                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                    <span class="visually-hidden">Next</span>
                                </button>
                            </div>
                            <!-- Optional decorative shape image -->
                            <img src="{{ asset('assets/img/shopping/shopping-shape-3.png') }}" alt="Shape"
                                class="shopping-shape-three">
                        </div>
                    </div>

                    <!-- Content Column: now on the right -->
                    <div class="col-lg-6 col-12 order-lg-2 order-2">
                        <div class="shopping-content">
                            <img src="{{ asset('assets/img/shopping/shopping-shape-1.png') }}" alt="Shape"
                                class="shopping-shape-one">
                            <img src="{{ asset('assets/img/shopping/shopping-shape-2.png') }}" alt="Shape"
                                class="shopping-shape-two">

                            <div class="content-title style1">
                                <span>Online Banking</span>
                                <h2>Payon – Your Trusted Money Transfer Partner</h2>
                                <p>Our services cover a wide range of financial needs, including money transfers, mobile
                                    recharges, and water bill payments. While many platforms offer similar options, we
                                    ensure a seamless, secure, and hassle-free experience tailored just for you.</p>
                            </div>
                            <ul class="content-feature-list list-style">
                                <li><i class="ri-check-double-line"></i>Secure and instant Money Transfers.</li>
                                <li><i class="ri-check-double-line"></i>Quick Mobile Recharges anytime, anywhere.</li>
                                <li><i class="ri-check-double-line"></i>Pay your Water Bills with ease and convenience.</li>
                            </ul>

                            <a href="#" class="btn style1">Signup Today</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>






        <!-- Service Section Start -->
        <section class="service-wrap bg-albastor pt-100 pb-75">
            <div class="container">
                <div class="row">
                    <div class="col-xl-8 offset-xl-2 col-lg-10 offset-lg-1">
                        <div class="section-title style1 text-center mb-40">
                            <span>Our Services</span>
                            <h2>Providing Services For Last 5 Years With Reputation</h2>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
                        <div class="service-card style1">
                            <span class="service-icon">
                                <img src="{{ asset('assets/img/service/service-icon-1.png') }}" alt="Money Transfer">
                            </span>
                            <h3>Money Transfer</h3>
                            <p>Transfer money securely and instantly with our reliable digital payment platform.</p>
                        </div>
                    </div>

                    <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
                        <div class="service-card style1">
                            <span class="service-icon">
                                <img src="{{ asset('assets/img/service/service-icon-2.png') }}" alt="Mobile Recharge">
                            </span>
                            <h3>Mobile Recharge</h3>
                            <p>Recharge your prepaid mobile quickly and effortlessly at any time.</p>
                        </div>
                    </div>

                    <div class="col-xxl-3 col-xl-4 col-lg-6 col-md-6">
                        <div class="service-card style1">
                            <span class="service-icon">
                                <img src="{{ asset('assets/img/service/service-icon-3.png') }}" alt="Water Bill Payment">
                            </span>
                            <h3>Water Bill Payment</h3>
                            <p>Pay your water bills conveniently with our safe and fast bill payment system.</p>
                        </div>
                    </div>


                </div>
            </div>
        </section>
        <!-- Service Section End -->



    </div>
    <!-- Content Wrapper End -->
@endsection