<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
.navbar{
    background:#1f2b6c;
}
.navbar .nav-link{
    color:#fff;
    font-weight:600;
    margin:0 15px;
}
.navbar .nav-link:hover{color:#00d084;}

.logo{
    font-size:30px;
    font-weight:bold;
    color:#fff;
}

/* MEGA MENU */
.mega-menu{
    width:100%;
    left:0;
    right:0;
    border:none;
    padding:40px 0;
    top:100%;
}

.dropdown:hover .dropdown-menu{
    display:block;
}

.mega-left{
    padding:40px;
}

.mega-left h2{
    font-weight:bold;
}

.mega-title{
    color:#00d084;
    font-weight:700;
}

.dropdown-item{
    padding:6px 0;
}
</style>
</head>
<body>

<nav class="navbar navbar-expand-lg">
<div class="container">

<a class="logo text-decoration-none" href="./index.php"><img src="./image (1).png" alt="" width="250px"></a>

<button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#menu">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse justify-content-end" id="menu">
<ul class="navbar-nav">

<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#">Products</a>

<div class="dropdown-menu mega-menu bg-white shadow">
<div class="container">
<div class="row">

<!-- LEFT SIDE LIST -->
<div class="col-md-5 p-5 border-end">
<h2 class="fw-bold mb-4">What can we help you with?</h2>

<div class="py-3 border-bottom">
<a style="text-decoration: none;color:black;" href="./onlinepayments.php"><h4>Online Payments</h4></a>
</div>

<div class="py-3 border-bottom">
<a style="text-decoration: none;color:black;" href="./pospayment.php"><h4>In person Payments</h4></a>
</div>

<div class="py-3">
<a style="text-decoration: none;color:black;" href="./optimize.php"><h4>Optimize</h4></a>
</div>
</div>

<!-- RIGHT SIDE BLOG CARDS -->
<div class="col-md-7 p-5">
<div class="d-flex justify-content-between mb-4">
<h2 class="fw-bold">Learn more about Products</h2>
<button class="btn btn-outline-dark"><a href="./moreguidence.php" style="text-decoration: none;">More Products Guides →</a></button>
</div>

<div class="row">

<div class="col-md-4">
<img src="./download.jfif" class="img-fluid rounded mb-2">
<p>Create physical and virtual cards</p>
<a href="#" class="btn btn-primary">Read now →</a>
</div>

<div class="col-md-4">
<img src="./download (1).jfif" class="img-fluid rounded mb-2" height="5px">
<p>Build journeys across sales channels
</p>
<a href="#" class="btn btn-primary">Read now →</a>
</div>

<div class="col-md-4">
<img src="./download.jfif" class="img-fluid rounded mb-2">
<p>Accept payments on your website and in-app</p>
<a href="#" class="btn btn-primary">Read now →</a>
</div>

</div>
</div>

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




<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#">Business</a>

<div class="dropdown-menu mega-menu bg-white shadow">
<div class="container">
<div class="row">

<!-- LEFT SIDE LIST -->
<div class="col-md-5 p-5 border-end">
<h2 class="fw-bold mb-4">What can we help you with?</h2>

<div class="py-3 border-bottom">
<a style="text-decoration: none;color:black;" href="./digitalbusinesses.php"><h4>Digital Business</h4></a>
</div>

<div class="py-3 border-bottom">
<a style="text-decoration: none;color:black;" href="./uplift.php"><h4>Uplift</h4></a>
</div>

<div class="py-3">
<a style="text-decoration: none;color:black;" href="./subscription.php"><h4>Subscription</h4></a>
</div>
</div>

<!-- RIGHT SIDE BLOG CARDS -->
<div class="col-md-7 p-5">
<div class="d-flex justify-content-between mb-4">
<h2 class="fw-bold">Learn more about Business</h2>
<button class="btn btn-outline-dark"><a href="./moreguidence.php" style="text-decoration: none;">More Products Guides →</a></button>
</div>

<div class="row">

<div class="col-md-4">
<img src="./download (1).jfif" class="img-fluid rounded mb-2">
<p>The Regulated Asset Base (RAB) nuclear levy</p>
<a href="#" class="btn btn-primary">Read now →</a>
</div>

<div class="col-md-4">
<img src="./download.jfif" class="img-fluid rounded mb-2">
<p>A guide to utilities for businesses</p>
<a href="#" class="btn btn-primary">Read now →</a>
</div>

<div class="col-md-4">
<img src="./download (1).jfif" class="img-fluid rounded mb-2">
<p>Market-Wide Half Hourly Settlement</p>
<a href="#" class="btn btn-primary">Read now →</a>
</div>

</div>
</div>

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


<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#">Connectivity</a>

<div class="dropdown-menu mega-menu bg-white shadow">
<div class="container">
<div class="row">

<!-- LEFT BIG TEXT -->
<div class="col-md-4 mega-left">
<h2>About</h2>
<p>With our financial technology platform, we help businesses achieve their ambitions faster.</p>
</div>

<!-- COLUMN 1 -->
<div class="col-md-2">
<h6 class="mega-title">Company</h6>
<a class="dropdown-item" href="./ourstory.php">Our Story</a>
<a class="dropdown-item" href="./impact.php">Impact</a>
<a class="dropdown-item" href="./carrer.php">Careers</a>
</div>

<!-- COLUMN 2 -->
<div class="col-md-3">
<h6 class="mega-title">Resources</h6>
<a class="dropdown-item"  href="./FoodBeverage.php">Food & Beverage</a>
<a class="dropdown-item"  href="./travel-industries.php">Travel Industries</a>
<a class="dropdown-item"  href="./parteners.php">Partner With Us</a>
</div>

<!-- COLUMN 3 -->
<div class="col-md-3">
<h6 class="mega-title">Contact</h6>
<a class="dropdown-item" href="./contactus.php">Contact Us</a>
<a class="dropdown-item">Our Offices</a>
</div>

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

</li>

<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#">Resources</a>

<div class="dropdown-menu mega-menu bg-white shadow">
<div class="container">
<div class="row">

<!-- LEFT BIG TEXT -->
<div class="col-md-4 mega-left">
<h2>Resources</h2>
<p>Materials to help you master payments and work with our platform.</p>
</div>

<!-- COLUMN 1 -->
<div class="col-md-2">
<h6 class="mega-title">Documentation</h6>
<a class="dropdown-item" href="./payouts.php">Payouts</a>
<a class="dropdown-item" href="./issuing.php">Issuing</a>
<a class="dropdown-item" href="./capital.php">Capital</a>
</div>

<!-- COLUMN 2 -->
<div class="col-md-3">
<h6 class="mega-title">Indes</h6>
<a class="dropdown-item" href="./unifiedcommerce.php">Unified Commerce</a>
<a class="dropdown-item" href="./authenticate.php">Authenticate</a>
<a class="dropdown-item" href="">Accounts</a>
</div>

<!-- COLUMN 3 -->
<div class="col-md-3">
<h6 class="mega-title">Contact</h6>
<a class="dropdown-item" href="./contactus.php">Contact Us</a>
<a class="dropdown-item">Our Offices</a>
</div>

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

</li>




<li class="nav-item"><a class="nav-link" href="./contactus.php">Contact</a></li>

</ul>
</div>
</div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
