{% load static %}{% load humanize %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{config.intro_message}} - Buy Airtime and Data for all Network. Make payment for DSTV, GOTV, PHCN and other services</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer-when-downgrade">

    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="static/img/ms-icon-144x144.html">
    <meta name="theme-color" content="#ffffff">

    <meta content="{{config.intro_message}}- Buy Airtime and Data for all Network. Make payment for DSTV, GOTV, PHCN and other services" name="descriptison">

    <meta itemprop="name" content="{{config.intro_message}}- Buy Airtime and Data for all Network. Make payment for DSTV, GOTV, PHCN and other services">
    <meta itemprop="description" content="Buy Cheap Internet Data Plan and Airtime Recharge for Airtel, 9mobile, GLO, MTN, Pay DSTV, GOTV, PHCN and.">
    <meta itemprop="image" content="static/styling/images/bg.html">
    <link rel="stylesheet" href="static/ogbam/w3.css">

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="static/styling/images/bg.html">
    <meta name="twitter:title" content="{{config.intro_message}}- Buy Airtime and Data for all Network. Make payment for DSTV, GOTV, PHCN and other services">
    <meta name="twitter:description" content="Buy Cheap Internet Data Plan and Airtime Recharge for Airtel, 9mobile, GLO, MTN, Pay DSTV, GOTV, PHCN and.">
    <meta name="twitter:image:src" content="static/styling/images/bg.html">

    <!-- Open Graph data -->
    <meta property="og:locale" content="en_US">
    <meta property="og:title" content="{{config.intro_message}}- Buy Airtime and Data for all Network. Make payment for DSTV, GOTV, PHCN and other services">
    <meta property="og:image" content="static/styling/images/bg.html">
    <meta property="og:description" content="Buy Cheap Internet Data Plan and Airtime Recharge for Airtel, 9mobile, GLO, MTN, Pay DSTV, GOTV, PHCN." />
    <meta property="og:site_name" content="{{config.intro_message}}" />
    <meta property="og:url" content="index-2.html">
    <meta property="og:type" content="website">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="author" content="Ayman Fikry" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="description" content="" />

  <!-- Favicons -->
  <link href="/static/tola/img/favicon.png" rel="icon">
  <link href="/static/tola/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Dosis:300,400,500,,600,700,700i|Lato:300,300i,400,400i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="/static/tola/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="/static/tola/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="/static/tola/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="/static/tola/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="/static/tola/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="/static/tola/css/style.css" rel="stylesheet">

  
</head>

<body>

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top">
    <div class="container d-flex align-items-center justify-content-between">

      <a href="index.html" class="logo">{{config.intro_message}}</a>
      <!-- Uncomment below if you prefer to use text as a logo -->
      <!-- <h1 class="logo"><a href="index.html">Butterfly</a></h1> -->

      <nav id="navbar" class="navbar">
        <ul>
          <li><a class="nav-link scrollto active" href="#hero">Home</a></li>
          <li><a class="nav-link scrollto" href="#about">About</a></li>
          <li><a class="nav-link scrollto" href="#services">Services</a></li>
          <li><a class="nav-link scrollto " href="#portfolio">Features</a></li>
          <li><a class="nav-link scrollto" href="#pricing">Pricing</a></li>
          {% if user.is_authenticated %}   
          <li><a class="nav-link scrollto" href="/profile">Dashboard</a></li>
          <li><a class="nav-link scrollto" href="/logout">Logout</a></li>
          {% else %}
          <li><a class="nav-link scrollto" href="/signup">Register</a></li>
          <li><a class="nav-link scrollto" href="/login">Login</a></li>
          {% endif %}
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex align-items-center">

    <div class="container">
      <div class="row">
        <div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
          <h1>Welcome to {{config.intro_message}}</h1>
          <h2>{{config.intro_message_content}}</h2>
          <div>
            {% if user.is_authenticated %}
            <a href="/profile" class="btn-get-started scrollto">Dashboard</a>
            <a href="/logout" class="btn-get-started scrollto">Logout</a>
            {% else %}
            <a href="/signup" class="btn-get-started scrollto">Register</a>
            <a href="/login" class="btn-get-started scrollto">Login</a>
            {% endif %}
          </div>
        </div>
        <div class="col-lg-6 order-1 order-lg-2 hero-img">
          <img src="/static/tola/img/butterfly_image_1.png" class="img-fluid" alt="">
        </div>
      </div>
    </div>


  </section><!-- End Hero -->

  <main id="main">

    <!-- ======= About Section ======= -->
    <section id="about" class="about">
      <div class="container">

        <div class="row">
          <div class="col-xl-5 col-lg-6 d-flex justify-content-center video-box align-items-stretch position-relative">
            <a href="https://www.youtube.com/watch?v=jDDaplaOz7Q" class="glightbox mb-4"></a>
          </div>

          <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
            <h3>About</h3>
            <p>{{config.about_website}}</p>

            <div class="icon-box">
              <div class="icon"><i class="bi bi-hdd-stack"></i></div>
              <h4 class="title"><a href="">We are Automated</a></h4>
              <p class="description">We utilize cutting-edge technology to operate our services. Our delivery and wallet funding are fully automated, ensuring that any service you purchase is delivered to you instantly.</p>
            </div>

            <div class="icon-box">
              <div class="icon"><i class="bi bi-code"></i></div>
              <h4 class="title"><a href="">We are Reliable</a></h4>
              <p class="description">Our platform is fully optimized for reliability and dependability, ensuring you receive 100% value for every transaction.</p>
            </div>

            <div class="icon-box">
              <div class="icon"><i class="bi bi-calendar-check"></i></div>
              <h4 class="title"><a href="">24/7 Support!</a></h4>
              <p class="description">Our customers are our top priority, and their satisfaction is paramount to us. Our customer service is just a click away.</p>
            </div>

          </div>
        </div>

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

    <!-- ======= Counts Section ======= -->
    <section id="counts" class="counts">
      <div class="container">

        <div class="text-center title">
          <h3>What we have achieved so far</h3>
        </div>

        <div class="row counters position-relative">

          <div class="col-lg-3 col-6 text-center">
            <span data-purecounter-start="0" data-purecounter-end="232" data-purecounter-duration="1" class="purecounter"></span>
            <p>Clients</p>
          </div>

          <div class="col-lg-3 col-6 text-center">
            <span data-purecounter-start="0" data-purecounter-end="521" data-purecounter-duration="1" class="purecounter"></span>
            <p>Projects</p>
          </div>

          <div class="col-lg-3 col-6 text-center">
            <span data-purecounter-start="0" data-purecounter-end="1463" data-purecounter-duration="1" class="purecounter"></span>
            <p>Hours Of Support</p>
          </div>

          <div class="col-lg-3 col-6 text-center">
            <span data-purecounter-start="0" data-purecounter-end="15" data-purecounter-duration="1" class="purecounter"></span>
            <p>Hard Workers</p>
          </div>

        </div>

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

    <!-- ======= Clients Section ======= -->
    <section id="clients" class="clients">
      <div class="container">

        <div class="row no-gutters clients-wrap clearfix wow fadeInUp">

          <div class="col-lg-3 col-md-4 col-6">
            <div class="client-logo">
              <img src="/static/tola/img/clients/client-1.png" class="img-fluid" alt="">
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-6">
            <div class="client-logo">
              <img src="/static/tola/img/clients/client-2.png" class="img-fluid" alt="">
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-6">
            <div class="client-logo">
              <img src="/static/tola/img/clients/client-3.png" class="img-fluid" alt="">
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-6">
            <div class="client-logo">
              <img src="/static/tola/img/clients/client-4.png" class="img-fluid" alt="">
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-6">
            <div class="client-logo">
              <img src="/static/tola/img/clients/client-5.png" class="img-fluid" alt="">
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-6">
            <div class="client-logo">
              <img src="/static/tola/img/clients/client-6.png" class="img-fluid" alt="">
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-6">
            <div class="client-logo">
              <img src="/static/tola/img/clients/client-7.png" class="img-fluid" alt="">
            </div>
          </div>

          <div class="col-lg-3 col-md-4 col-6">
            <div class="client-logo">
              <img src="/static/tola/img/clients/client-8.png" class="img-fluid" alt="">
            </div>
          </div>

        </div>

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

    <!-- ======= Services Section ======= -->
    <section id="services" class="services section-bg">
      <div class="container">

        <div class="section-title">
          <h2>Services</h2>
        </div>

        <div class="row">
          <div class="col-lg-4 col-md-6">
            <div class="icon-box">
              <div class="icon"><i class="bi bi-wifi" style="color: #ff689b;"></i></div>
              <h4 class="title">Buy Data</h4>
              <p class="description">Start enjoying this very low rate dataplan for your internet browsing Databundle</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="icon-box">
              <div class="icon"><i class="bi bi-telephone" style="color: #e9bf06;"></i></div>
              <h4 class="title">Airtime Top Up</h4>
              <p class="description">Making an Online recharge has become very easy and safe on {{config.intro_message}}.</p>
            </div>
          </div>

          <div class="col-lg-4 col-md-6" data-wow-delay="0.1s">
            <div class="icon-box">
              <div class="icon"><i class="bi bi-phone-vibrate" style="color: #3fcdc7;"></i></div>
              <h4 class="title">Cable Subscription</h4>
              <p class="description">instantly Activate Cable Subscription with favourable discount compare to others.</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6" data-wow-delay="0.1s">
            <div class="icon-box">
              <div class="icon"><i class="bi bi-lightbulb" style="color:#41cf2e;"></i></div>
              <h4 class="title">Utility Bills Payment</h4>
              <p class="description">We've made bill and utilities payment more convenient to meet your needs.</p>
            </div>
          </div>

          <div class="col-lg-4 col-md-6" data-wow-delay="0.2s">
            <div class="icon-box">
              <div class="icon"><i class="bi bi-envelope" style="color: #d6ff22;"></i></div>
              <h4 class="title">Bulk SMS</h4>
              <p class="description">Get your sms in bulk at convenient rates, all you have to do is SIGN UP NOW.</p>
            </div>
          </div>
        </div>

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

    <!-- ======= Portfolio Section ======= -->
    <section id="portfolio" class="portfolio">
      <div class="container">

        <div class="section-title">
          <h2>Features</h2>
        </div>

        <div class="row">
          <div class="col-xl-5 col-lg-6 d-flex justify-content-center align-items-stretch">
            <img style="width: 100%;" src=".//static/tola/img/butterfly image 4.jpg" alt="">
          </div>

          <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
            <h1>JOIN AS AN AGENT</h1>
            <p>
              Join our network of exceptional entrepreneurs partnering with [website-name]. Bring the [website-name] "easy-payments" experience to your community and earn commissions for every transaction you facilitate. Our referral program offers top incentives to foster entrepreneurial and managerial skills, support growth and development, and empower students on college campuses and youths worldwide. We also aim to promote technology through the use of ICT tools in our society.
            </p>
            <div>
              <a href="#hero" class="btn-features">Join us now</a>
            </div>
          </div>
        </div>

        <div class="row feature-two">
          <div class="col-xl-5 col-lg-6 d-flex justify-content-center align-items-stretch">
            <img style="width: 100%;" src=".//static/tola/img/butterfly image 3.jpg" alt="">
          </div>

          <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
            <h1>WE OFFER OUTSTANDING SERVICES</h1>
            <p>
              Some things are hard, but making payments shouldn't be. [{{config.intro_message}}] lets you pay for services from the comfort of your home or office. Enjoy total convenience, fast service delivery, and easy payments at your fingertips. Our goal is to provide affordable and reliable services (data, cable subscriptions, airtime, etc.) to our partners. All our services and transactions are automated, ensuring prompt delivery without delays.            
            </p>
            <div>
              <a href="/profile" class="btn-features">Get started</a>
            </div>
          </div>
        </div>

        
        <div class="row feature-two">
          <div class="col-xl-5 col-lg-6 d-flex justify-content-center align-items-stretch">
            <img style="width: 100%;" src=".//static/tola/img/carbon(13).png" alt="">
          </div>

          <div class="col-xl-7 col-lg-6 icon-boxes d-flex flex-column align-items-stretch justify-content-center py-5 px-lg-5">
            <h1>INTEGRATE OUR API</h1>
            <p>
              Are you a developer? Integrate our well-documented API and earn from serving hundreds of thousands of customers. No matter how huge or complex your vision, you can build it with [website name]            
            </p>
            <div>
              <a href="/profile" class="btn-features">View Documentation</a>
            </div>
          </div>
        </div>

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

    <section id="pricing" class="pricing section">

      <!-- Section Title -->
      <div class="container section-title" data-aos="fade-up">
        <h2>Pricing</h2>
        <p>Our pricing</p>
      </div><!-- End Section Title -->

      <div class="container">

        <div class="row gy-3">

          <div class="col-xl-3 col-lg-6" data-aos="fade-up" data-aos-delay="100">
            <div class="pricing-item">
              <h3>MTN</h3>
              <img src=".//static/tola/img/MTN IMAGE.webp" alt="">
              <table class="table table-all table-responsive table-stripped">
                        
                <tbody>
                    {% for plans in plan %}
                    <tr>
                    <td style="color: black; font-size:16px; font-weight: bolder;"> {{plans.plan_size}}{{plans.plan_Volume}} </td>
                    <td style="color: black; font-size:16px;  font-weight: bolder;"><i> &#8358;{{plans.plan_amount}}</i></td>
                    <td style="color: black; font-size:12px;  font-weight: bolder;"><i>{{plans.month_validate}}</i></td>
                    </tr>
{% endfor %}			
              </tbody></table>
              <div class="btn-wrap">
                <a href="/profile" class="btn-buy">Buy Now</a>
              </div>
            </div>
          </div><!-- End Pricing Item -->

          <div class="col-xl-3 col-lg-6" data-aos="fade-up" data-aos-delay="200">
            <div class="pricing-item">
              <h3>AIRTEL</h3>
              <img src=".//static/tola/img/AIRTEL IMG.png" alt="">
              <table class="table table-all table-responsive table-stripped">
                            

                            
                <tbody>{% for plans in plan_4 %}
                    <tr>
                    <td style="color: black; font-size:16px; font-weight: bolder;"> {{plans.plan_size}}{{plans.plan_Volume}} </td>
                    <td style="color: black; font-size:16px;  font-weight: bolder;"><i> &#8358;{{plans.plan_amount}}</i></td>
                    <td style="color: black; font-size:12px;  font-weight: bolder;"><i>{{plans.month_validate}}</i></td>
                    </tr>
                {% endfor %}
                  
                </tbody></table>
              <div class="btn-wrap">
                <a href="/profile" class="btn-buy">Buy Now</a>
              </div>
            </div>
          </div><!-- End Pricing Item -->

          <div class="col-xl-3 col-lg-6" data-aos="fade-up" data-aos-delay="400">
            <div class="pricing-item">
              <h3>GLO</h3>
              <img src=".//static/tola/img/GLO IMG.jpeg" alt="">
              <table class="table table-all table-responsive table-stripped">
                            
                <tbody>{% for plans in plan_2 %}
                <tr>
                <td style="color: black; font-size:16px; font-weight: bolder;"> {{plans.plan_size}}{{plans.plan_Volume}} </td>
                <td style="color: black; font-size:16px;  font-weight: bolder;"><i> &#8358;{{plans.plan_amount}}</i></td>
                <td style="color: black; font-size:12px;  font-weight: bolder;"><i>{{plans.month_validate}}</i></td>
                </tr>
            {% endfor %}</tbody></table>
              <div class="btn-wrap">
                <a href="/profile" class="btn-buy">Buy Now</a>
              </div>
            </div>
          </div><!-- End Pricing Item -->

          <div class="col-xl-3 col-lg-6" data-aos="fade-up" data-aos-delay="400">
            <div class="pricing-item">
              <!-- <span class="advanced">Advanced</span> -->
              <h3>9MOBILE</h3>
              <img style="border-radius: 100%;" src=".//static/tola/img/9MOBILE IMG.jpeg" alt="">
              <table class="table table-all table-responsive table-stripped"><tbody>{% for plans in plan_3 %}
                <tr>
                <td style="color: black; font-size:16px; font-weight: bolder;"> {{plans.plan_size}}{{plans.plan_Volume}} </td>
                <td style="color: black; font-size:16px;  font-weight: bolder;"><i> &#8358;{{plans.plan_amount}}</i></td>
                <td style="color: black; font-size:12px;  font-weight: bolder;"><i>{{plans.month_validate}}</i></td>
                </tr>
            {% endfor %}
            </tbody></table>
              <div class="btn-wrap">
                <a href="/profile" class="btn-buy">Buy Now</a>
              </div>
            </div>
          </div><!-- End Pricing Item -->

        </div>

      </div>

    </section><!-- /Pricing Section -->

  </main><!-- End #main -->

  <!-- ======= Footer ======= -->
  <footer id="footer">

    

    <div class="footer-top" style="background-color: rgba(73, 181, 231, 0.1);">
      <div class="container">
        <div class="row">

          <div class="col-lg-3 col-md-6 footer-contact">
            <h3>{{config.intro_message}}</h3>
            <p>
              {{config.address}} <br>
              <strong>Phone:</strong> {{config.phone_number}}<br>
              <strong>Email:</strong> {{config.support_mail}}<br>
            </p>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Useful Links</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="#about">About Us</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#services">Service</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#pricing">Pricing</a></li>
            </ul>
          </div>

          <div class="col-lg-3 col-md-6 footer-links">
            <h4>Our Services</h4>
            <ul>
              <li><i class="bx bx-chevron-right"></i> <a href="#services">Buy Data</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#services">Airtime pop up</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#services">Utility Bills</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#services">Cable Subscription</a></li>
              <li><i class="bx bx-chevron-right"></i> <a href="#services">Bulk sms</a></li>
            </ul>
          </div>

          <!-- <div class="col-lg-3 col-md-6 footer-links">
            <h4>Our Social Networks</h4>
            <p>Cras fermentum odio eu feugiat lide par naso tierra videa magna derita valies</p>
            <div class="social-links mt-3">
              <a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>
              <a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>
              <a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>
              <a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>
              <a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>
            </div>
          </div> -->

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

    <div class="container py-4">
      <div class="copyright">
        &copy; Copyright <strong><span>{{config.intro_message}}</span></strong>. All Rights Reserved
      </div>
      <div class="credits">
        
        Developed by <a href="https://msorgdevelopers.com">Msorg Developers</a>
      </div>
    </div>
  </footer><!-- End Footer -->

  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="/static/tola/vendor/purecounter/purecounter_vanilla.js"></script>
  <script src="/static/tola/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="/static/tola/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="/static/tola/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="/static/tola/vendor/swiper/swiper-bundle.min.js"></script>
  <script src="/static/tola/vendor/php-email-form/validate.js"></script>

  <!-- Template Main JS File -->
  <script src="/static/tola/js/main.js"></script>

</body>

</html>