!-- Page content start here-->
        <div class="page-content  header-clear-medium">

        <div class="card card-style mt-0 header-cover">
            <div class="header-cover header-body" data-card-height="280">
                    <div class="text-center mb-0 pt-3 mt-2 mb-4">
                            
                                    <h1 class=" font-25 color-white mb-2">Hi, Sunusi Habib</h1>
                                   
                                    <div id="openEyeDiv" style="">
                                        <h4 class="text-center text-white font-30">₦  *****
                                        <span id="hideEye"><i class="fa fa-eye" style="margin-left:20px;" aria-hidden="true"></i></span>
                                        </h4>
                                    </div>
                                    
                                    <div id="hideEyeDiv" style="display: none;">
                                        <h4 class="text-center text-white font-30">₦3 
                                        <span id="openEye" style="display: none;"><i class="fa fa-eye-slash" style="margin-left:20px;" aria-hidden="true"></i></span>
                                        </h4>
                                    </div>
                                    
                                    <h1 class=" font-20 color-white mb-2">Wallet Balance</h1>
                                    
                                    <h2 class="text-center mt-3">
                                        <a href="fund-wallet" class="btn fund-btn">  
                                            <span class="fund"><i class="fa fa-plus font-2"></i></span>
                                            <b>Add Funds</b>
                                        </a>
                                    </h2>
                    </div>
            </div>
        </div>
                
        <div class="card card-style mt-n3 notop">
            <div class="content mb-3 mt-3">
             

                <div class="row text-center mb-0">
                    
                <a href="buy-airtime" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#FC3232; color:#fff;">
                            <i class="fa fa-mobile font-18"></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Airtime</p>
                    </a>

                    <a href="buy-data" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#FC3232; color:#fff;">
                            <i class="fa fa-wifi font-18 "></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Data</p>
                    </a>

                    <a href="cable-tv" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#FC3232; color:#fff;">
                            <i class="fa fa-tv font-18 "></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Cable TV</p>
                    </a>

                    <a href="electricity" class="col-3 mt-2"> 
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#FC3232; color:#fff;">
                            <i class="fa fa-bolt font-18 "></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Electricity</p>
                    </a>

                    <a href="exam-pins" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#162578; color:#fff;">
                            <i class="fa fa-graduation-cap font-18 "></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Exam Pins</p>
                    </a>
                    
                    <a href="buy-data-pin" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#162578; color:#fff;">
                            <i class="fa fa-barcode font-18"></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Data Pin</p>
                    </a>

                    <a href="recharge-pin" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#162578; color:#fff;">
                            <i class="fa fa-print font-18"></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Card Print</p>
                    </a>

                    <a href="https://play.google.com/store/apps/details?id=com.amnatdata&pcampaignid=web_share" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#162578; color:#fff;">
                            <i class="fa fa-rocket font-18"></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Our App</p>
                    </a>
                    
                    <a href="alpha-topup" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#FC3232; color:#fff;">
                            <i class="fa fa-bolt font-18 "></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Alpha Topup</p>
                    </a>
                    
                    <a href="airtime-2-cash" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#FC3232; color:#fff;">
                            <i class="fa fa-retweet font-18"></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Air2Cash</p>
                    </a>

                    <a href="transactions" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#FC3232; color:#fff;">
                            <i class="fa fa-list-alt font-18"></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">History</p>
                    </a>

                    <a href="#agent-upgrade-modal" id="upgrade-agent-btn" data-menu="agent-upgrade-modal" class="col-3 mt-2">
                        <span class="icon icon-l shadow-l rounded-sm" style="background:#FC3232; color:#fff;">
                            <i class="fa fa-user-secret font-18"></i>
                        </span>
                        <p class="mb-0 pt-1 font-12">Agent</p>
                    </a>
                    
                    
                </div>
            </div>
        </div>
        
        <div class="mt-n3 splide single-slider slider-no-arrows slider-no-dots splide--loop splide--ltr splide--draggable is-active mb-1" id="single-slider-1" style="visibility: visible;">
            <div class="splide__arrows"><button class="splide__arrow splide__arrow--prev" type="button" aria-controls="single-slider-1-track" aria-label="Go to last slide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40"><path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path></svg></button><button class="splide__arrow splide__arrow--next" type="button" aria-controls="single-slider-1-track" aria-label="Next slide"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40"><path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path></svg></button></div>
            <div class="splide__track col-lg-6 col-md-6" id="single-slider-1-track">
                    <div class="splide__list" id="single-slider-1-list" style="transform: translateX(-624px);">
                            
                            <div class="splide__slide splide__slide--clone" aria-hidden="true" tabindex="-1" style="width: 312px;">
                                <div class="card card-style bg-20" data-card-height="130" style="height: 130px;">
                                    <img class="img-fluid" style="height: 130px;" src="../../assets/img1/img2.png" />
                                </div>
                            </div>
                           
                            <div class="splide__slide" id="single-slider-1-slide02" aria-hidden="true" tabindex="-1" style="width: 312px;">
                               <div class="card card-style bg-20" data-card-height="130" style="height: 130px;">
                                    <img class="img-fluid" style="height: 130px;" src="../../assets/img1/img1.png" />
                                </div>
                            </div>
                            
                            <div class="splide__slide" id="single-slider-1-slide03" aria-hidden="true" tabindex="-1" style="width: 312px;">
                               <div class="card card-style bg-20" data-card-height="130" style="height: 130px;">
                                    <img class="img-fluid" style="height: 130px;" src="../../assets/img1/img3.png" />
                                </div>
                            </div>
                            
                            <div class="splide__slide" id="single-slider-1-slide04" aria-hidden="true" tabindex="-1" style="width: 312px;">
                               <div class="card card-style bg-20" data-card-height="130" style="height: 130px;">
                                    <img class="img-fluid" style="height: 130px;" src="../../assets/img1/img1.png" />
                                </div>
                            </div>
                            
                    </div>
            </div>
        </div>