<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!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.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
<title>index</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg ">
<div class="container ">
<a class="navbar-brand" href="#"><img src="images/logo.png" class="img-fluid" alt="logo"></a>
<button class="navbar-toggler" href="#offcanvasExample" role="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample" >
<span class="toggle-btn"> <i class="fa-solid fa-bars"></i></span>
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExample"><img src="images/logo.png" class="img-fluid" alt="logo"></h5>
<button type="button" class="close-btn" data-bs-dismiss="offcanvas" aria-label="Close"><span class=""><i class="fa-solid fa-x"></i></span></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link px-3 dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Tracking</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Shipping Calculator</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link px-3 dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="country-icon"><img src="images/global.png" class="img-fluid" alt="global"></span>
Select country
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
</ul>
<div class="right-nav nav-item">
<div class="search-icon">
<a href="javascript:;" class="nav-link"><span><i class="fa-solid fa-magnifying-glass"></i></span></a>
</div>
<ul>
<li class="nav-item">
<a class="nav-link "href="#">Login </a>
</li>
<li class="nav-item">
<a class="nav-link "href="#"> Sign up</a>
</li>
</ul>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto mb-2 mb-lg-0">
<li class="nav-item dropdown">
<a class="nav-link px-3 dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Tracking</a>
</li>
<li class="nav-item">
<a class="nav-link px-3"href="#">Shipping Calculator</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link px-3 dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="country-icon"><img src="images/global.png" class="img-fluid" alt="global"></span>
Select country
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
</ul>
<div class="right-nav">
<div class="search-icon nav-item">
<a href="javascript:;" class="nav-link"><span><i class="fa-solid fa-magnifying-glass"></i></span></a>
</div>
<ul>
<li class="nav-item">
<a class="nav-link "href="#">Login </a>
</li>
<li class="nav-item">
<a class="nav-link"href="#"> Sign up</a>
</li>
</ul>
</div>
</nav>
</header>
<section class="main-banner py-100">
<div class="container">
<div class="inner-banner">
<div class="row">
<div class="col-lg-6">
<div class="banner-text" data-aos="fade-right">
<h1>Putting smiles on your faces</h1>
<p>We provide customized e-commerce, shipping and logistics solutions from the US, UK, Canada and China to Africa for individuals, small and large businesses.</p>
<a href="javascript:;" class="common-btn">Get Started<span><i class="fa-solid fa-arrow-right-long"></i></span></a>
</div>
</div>
<div class="col-lg-6">
<div class="banner-image" data-aos="fade-down">
<figure>
<img src="images/banner.png" class="img-fluid" alt="banner">
</figure>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-services">
<div class="container">
<div class="row">
<div class="col-12">
<div class="service-heading text-center">
<h2 data-aos="fade-right">Explore our various services</h2>
<p data-aos="fade-left">We want to bring the world to your doorstep. From placing a request to communications, to payment: Aquantuo helps you transport freight faster, cheaper, safer, and easier, so you can stay focused on your business and family</p>
</div>
</div>
</div>
<div class="slide-tab">
<div class="slider-btn">
<ul class="tab-slider">
<li>
<a class="tab-btn active" href="#Online-Purchases">Online Purchases</a>
</li>
<li>
<a class="tab-btn" href="#Buy-For-Me">Buy For Me</a>
</li>
<li>
<a class="tab-btn" href="#Door-To-Door">Door To Door</a>
</li>
<li>
<a class="tab-btn" href="#Fulfilment">Fulfilment</a>
</li>
<li>
<a class="tab-btn" href="#Local-Delivery">Local Delivery</a>
</li>
<li>
<a class="tab-btn" href="#Online-Purchases">Online Purchases</a>
</li>
<li>
<a class="tab-btn" href="#Buy-For-Me">Buy For Me</a>
</li>
</ul>
</div>
<div class=" main-tab-data">
<div class="m-t-d container" id="Online-Purchases">
<div class="inner-tab-data">
<div class="row">
<div class="col-lg-6">
<div class="t-data-left">
<h5>Online Purchases</h5>
<p>Have you fund something you need online but the store wont’t ship to Africa?</p>
<p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p>
<ul>
<li>
<span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span>
Get your Aquantuo address
</li>
<li>
<span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span>
Shop
</li>
<li>
<span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span>
Ship to us
</li>
<li>
<span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span>
Pay
</li>
<li>
<span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span>
Delivered to you
</li>
</ul>
<div class="read-more-btn">
<a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="tab-right-image">
<figure>
<img src="images/tab-image.png" class="img-fluid" alt="tab-image">
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="m-t-d container" style="display: none;" id="Buy-For-Me">
<div class="inner-tab-data">
<div class="row">
<div class="col-lg-6">
<div class="t-data-left">
<h5>Buy For Me</h5>
<p>Have you fund something you need online but the store wont’t ship to Africa?</p>
<p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p>
<ul>
<li>
<span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span>
Get your Aquantuo address
</li>
<li>
<span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span>
Shop
</li>
<li>
<span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span>
Ship to us
</li>
<li>
<span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span>
Pay
</li>
<li>
<span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span>
Delivered to you
</li>
</ul>
<div class="read-more-btn">
<a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="tab-right-image">
<figure>
<img src="images/tab-image4.jpg" class="img-fluid" alt="tab-image">
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="m-t-d container" style="display: none;" id="Door-To-Door">
<div class="inner-tab-data">
<div class="row">
<div class="col-lg-6">
<div class="t-data-left">
<h5>Door To Door</h5>
<p>Have you fund something you need online but the store wont’t ship to Africa?</p>
<p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p>
<ul>
<li>
<span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span>
Get your Aquantuo address
</li>
<li>
<span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span>
Shop
</li>
<li>
<span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span>
Ship to us
</li>
<li>
<span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span>
Pay
</li>
<li>
<span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span>
Delivered to you
</li>
</ul>
<div class="read-more-btn">
<a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="tab-right-image">
<figure>
<img src="images/tab-image2.jpg" class="img-fluid" alt="tab-image">
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="m-t-d container" style="display: none;" id="Fulfilment">
<div class="inner-tab-data">
<div class="row">
<div class="col-lg-6">
<div class="t-data-left">
<h5>Fulfilment</h5>
<p>Have you fund something you need online but the store wont’t ship to Africa?</p>
<p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p>
<ul>
<li>
<span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span>
Get your Aquantuo address
</li>
<li>
<span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span>
Shop
</li>
<li>
<span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span>
Ship to us
</li>
<li>
<span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span>
Pay
</li>
<li>
<span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span>
Delivered to you
</li>
</ul>
<div class="read-more-btn">
<a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="tab-right-image">
<figure>
<img src="images/tab-image1.jpg" class="img-fluid" alt="tab-image">
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="m-t-d container" style="display: none;" id="Local-Delivery">
<div class="inner-tab-data">
<div class="row">
<div class="col-lg-6">
<div class="t-data-left">
<h5>Local Delivery</h5>
<p>Have you fund something you need online but the store wont’t ship to Africa?</p>
<p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p>
<ul>
<li>
<span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span>
Get your Aquantuo address
</li>
<li>
<span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span>
Shop
</li>
<li>
<span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span>
Ship to us
</li>
<li>
<span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span>
Pay
</li>
<li>
<span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span>
Delivered to you
</li>
</ul>
<div class="read-more-btn">
<a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="tab-right-image">
<figure>
<img src="images/tab-image3.jpg" class="img-fluid" alt="tab-image">
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="m-t-d container" style="display: none;" id="Online-Purchases">
<div class="inner-tab-data">
<div class="row">
<div class="col-lg-6">
<div class="t-data-left">
<h5>Online Purchases</h5>
<p>Have you fund something you need online but the store wont’t ship to Africa?</p>
<p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p>
<ul>
<li>
<span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span>
Get your Aquantuo address
</li>
<li>
<span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span>
Shop
</li>
<li>
<span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span>
Ship to us
</li>
<li>
<span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span>
Pay
</li>
<li>
<span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span>
Delivered to you
</li>
</ul>
</div>
</div>
<div class="col-lg-6">
<div class="tab-right-image">
<figure>
<img src="images/tab-image.png" class="img-fluid" alt="tab-image">
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="m-t-d container" style="display: none;" id="Buy-For-Me">
<div class="inner-tab-data">
<div class="row">
<div class="col-lg-6">
<div class="t-data-left">
<h5>Buy For Me</h5>
<p>Have you fund something you need online but the store wont’t ship to Africa?</p>
<p>We understand you frustrations and we can help. Shop yor favourite online stores and we’ll deliver to your door</p>
<ul>
<li>
<span><img src="images/check-tick.png" class="img-fluid" alt="check-tick"></span>
Get your Aquantuo address
</li>
<li>
<span><img src="images/bag-tick.png" class="img-fluid" alt="bag-tick"></span>
Shop
</li>
<li>
<span><img src="images/truck-tick.png" class="img-fluid" alt="truck-tick"></span>
Ship to us
</li>
<li>
<span><img src="images/card-tick.png" class="img-fluid" alt="card-tick"></span>
Pay
</li>
<li>
<span><img src="images/box-tick.png" class="img-fluid" alt="box-tick"></span>
Delivered to you
</li>
</ul>
<div class="read-more-btn">
<a href="javascript:;" class="read-more">Read more<span><i class="fa-solid fa-arrow-right-long"></i></span></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="tab-right-image">
<figure>
<img src="images/tab-image4.jpg" class="img-fluid" alt="tab-image">
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-counter">
<div class="container">
<div class="inner-counter" >
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<div class="project-count">
<div class="item" data-number="15" style="visibility: visible;">
<div class="puls-num Customers">
<span class="plus">+</span>
<p id="number1" class="number">15</p>
<span class="k">K</span>
</div>
<p class="count-text">Customers</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="project-count">
<div class="item" data-number="120" style="visibility: visible;">
<div class="puls-num Shippments">
<span class="plus">+</span>
<p id="number2" class="number">120</p>
<span class="k">K</span>
</div>
<p class="count-text">Shippments</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="project-count">
<div class="item" data-number="15" style="visibility: visible;">
<div class="puls-num Partners">
<span class="plus">+</span>
<p id="number3" class="number">15</p>
</div>
<p class="count-text">Partners</p>
</div>
</div>
</div>
<div class="col-12 col-md-6 col-lg-3">
<div class="project-count">
<div class="item" data-number="500" style="visibility: visible;">
<div class="puls-num Weight">
<span class="plus ">+</span>
<p id="number4" class="number">500</p>
<span class="k">K</span>
</div>
<p class="count-text">Weight of goods moved</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="why-choose py-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="w-c-heading text-center" data-aos="fade-down">
<h2 >Why Choose Us?</h2>
<p>No two companies are alike. So when you want to ship, choose the company synonymous with trust in the shipping and logistics space, Aquantuo! Here is why:</p>
</div>
</div>
</div>
<div class="choose-box">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="inner-box" data-aos="fade-right">
<figure>
<img src="images/smileys.png" class="img-fluid" alt="smileys">
</figure>
<h6>Great customer experience</h6>
<p>We provide an exceptional customer experience</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="inner-box" data-aos="fade-down">
<figure>
<img src="images/shield-security.png" class="img-fluid" alt="shield-security">
</figure>
<h6>Speed and Safety</h6>
<p>We are fast, reliable and safe</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="inner-box" data-aos="fade-left">
<figure>
<img src="images/wallet-search.png" class="img-fluid" alt="wallet-search">
</figure>
<h6>Cost effective</h6>
<p>Our rates are low, competitive and transparent</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="inner-box" data-aos="fade-right">
<figure>
<img src="images/3d-rotate.png" class="img-fluid" alt="3d-rotate">
</figure>
<h6>Stress free</h6>
<p>We handle customs clearance and all applicable taxes for you</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="inner-box" data-aos="fade-down">
<figure>
<img src="images/scan.png" class="img-fluid" alt="scan">
</figure>
<h6>Ease of tracking</h6>
<p>We provide details on your packages to include reliable tracking</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="inner-box" data-aos="fade-left">
<figure>
<img src="images/truck-icon.png" class="img-fluid" alt="truck-icon">
</figure>
<h6>Destination Delivery</h6>
<p>We deliver to your door – business and residential</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-map pb-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="map-heading text-center" data-aos="fade-left">
<h2>Where we are available</h2>
<p>Aquantuo has offices in the USA, UK, Canada, China, Ghana, Kenya, Uganda and Nigeria, but has a network of affiliates to serve your global needs.</p>
</div>
</div>
</div>
<div class="inner-map">
<div class="row">
<div class="col-12">
<div class="map-frame">
<iframe src="https://www.google.com/maps/d/embed?mid=1hjs3mIoZBblBP_CvxiP4w38STiY&hl=en_US&ehbc=2E312F"></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-ship pb-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="ship-heading text-center" data-aos="fade-down">
<h2>Ship To and From Anywhere</h2>
<p>We want to bring the world to your doorstep. From placing a request to communications, to payment: Aquantuo helps you transport freight faster, cheaper, safer, and easier, so you can stay focused on your business and family</p>
</div>
</div>
</div>
<div class="inner-ship">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="ship-i-box" data-aos="fade-right">
<figure>
<img src="images/Ship.png" class="img-fluid" alt="Ship">
</figure>
<p>By Sea</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="ship-i-box" data-aos="fade-down">
<figure>
<img src="images/Truck.png" class="img-fluid" alt="Truck">
</figure>
<p>By Land</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="ship-i-box" data-aos="fade-left">
<figure>
<img src="images/Plane.png" class="img-fluid" alt="Plane">
</figure>
<p>By Air</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="main-mobile-app">
<div class="container">
<div class="row inner-mob">
<div class="col-lg-6">
<div class="mobile-content">
<h2>Get our mobile app</h2>
<p>Start your request now by downloading our free app from the App Store of Google Play</p>
<div class="mob-both-btn">
<a href="javascript;:" class="app-store"><img src="images/App-store.png" class="img-fluid" alt="App-store"></a>
<a href="javascript;:" class="play-store"><img src="images/Play-store.png" class="img-fluid" alt="Play-store"></a>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="mob-image">
<figure>
<img src="images/iphone.png" class="img-fluid" alt="iphone">
</figure>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="inner-footer">
<div class="footer-column">
<div class="footer-logo">
<figure>
<img src="images/logo.png" class="img-fluid" alt="footer-logo">
</figure>
</div>
</div>
<div class="footer-column">
<div class="footer-heading">
<h6>About Us</h6>
<ul>
<li>
<a href="javascript:">What is Aquantuo</a>
</li>
<li>
<a href="javascript:">Why Choose Us</a>
</li>
<li>
<a href="javascript:">Membership Program</a>
</li>
<li>
<a href="javascript:">Become A Transporter</a>
</li>
<li>
<a href="javascript:">Press</a>
</li>
<li>
<a href="javascript:">Blog</a>
</li>
<li>
<a href="javascript:">Reviews</a>
</li>
<li>
<a href="javascript:">Careers</a>
</li>
</ul>
</div>
</div>
<div class="footer-column">
<div class="footer-heading">
<h6>Services</h6>
<ul>
<li>
<a href="javascript:">Online Purchase</a>
</li>
<li>
<a href="javascript:">Buy For Me</a>
</li>
<li>
<a href="javascript:">Door - To - Door</a>
</li>
<li>
<a href="javascript:">Fulfilment</a>
</li>
<li>
<a href="javascript:">Local Delivery</a>
</li>
</ul>
</div>
</div>
<div class="footer-column">
<div class="footer-heading">
<h6>Help</h6>
<ul>
<li>
<a href="javascript:">How it Works</a>
</li>
<li>
<a href="javascript:">How to Guides</a>
</li>
<li>
<a href="javascript:">FAQ</a>
</li>
<li>
<a href="javascript:">Prohibited items</a>
</li>
<li>
<a href="javascript:">Privacy Policy</a>
</li>
<li>
<a href="javascript:">Terms and Conditions</a>
</li>
<li>
<a href="javascript:">Insurance, Claim and Return Policy</a>
</li>
<li>
<a href="javascript:">Shipping Tools</a>
</li>
<li>
<a href="javascript:">Sitemap</a>
</li>
</ul>
</div>
</div>
<div class="footer-column">
<div class="footer-heading">
<h6>Contacts</h6>
<ul>
<li>
<a href="javascript:">Ghana</a>
</li>
<li>
<a href="javascript:">Kenya</a>
</li>
<li>
<a href="javascript:">Nigeria</a>
</li>
<li>
<a href="javascript:">Rwanda</a>
</li>
<li>
<a href="javascript:">Uganda</a>
</li>
<li>
<a href="javascript:">USA/UK/Canada/China</a>
</li>
<li>
<a href="javascript:">Zambia</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
AOS.init({
offset: 20,
delay: 200,
duration: 1000,
});
</script>
<script>
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 400,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('#number1').jQuerySimpleCounter({end: 15,duration: 3000});
$('#number2').jQuerySimpleCounter({end: 120,duration: 3000});
$('#number3').jQuerySimpleCounter({end: 15,duration: 2000});
$('#number4').jQuerySimpleCounter({end: 500,duration: 2500});
$('.tab-slider').slick({
dots: false,
infinite: false,
speed: 300,
slidesToShow: 5,
slidesToScroll: 1,
prevArrow:"<img class='a-left control-c prev slick-prev' src='images/arrow-left.png'>",
nextArrow:"<img class='a-right control-c next slick-next' src='images/arrow-right.png'>",
responsive: [
{
breakpoint: 1199,
settings: {
slidesToShow: 4,
slidesToScroll: 1,
infinite: true,
dots: false
}
},
{
breakpoint: 991,
settings: {
slidesToShow: 3,
slidesToScroll: 1
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
var selector = '.tab-btn';
$(selector).on('click', function(event){
event.preventDefault();
$(selector).removeClass('active');
$(this).addClass('active');
$('.m-t-d').hide();
var idr=$(this).attr('href');
$(idr).show();
});
</script>
</body>
</html>
/*font-family: 'Roboto', sans-serif;*/
@font-face {
font-family: 'Nexa Demo';
src: url('../fonts/NexaDemo-Light.woff2') format('woff2'),
url('../fonts/NexaDemo-Light.woff') format('woff');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Nexa Demo';
src: url('../fonts/NexaDemo-Bold.woff2') format('woff2'),
url('../fonts/NexaDemo-Bold.woff') format('woff');
font-weight: bold;
font-style: normal;
font-display: swap;
}
html{
scroll-behavior: smooth;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: 'Roboto', sans-serif;
}
a, a:hover{
text-decoration: none;
transition: all ease-in-out 0.3s;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
}
p, ul, li, figure{
margin: 0;
list-style: none;
padding: 0;
}
img{
max-width: 100%;
}
.py-100{
padding-top: 100px;
padding-bottom: 100px;
}
.pb-100{
padding-bottom: 100px;
}
a,
input,
select,
textarea,p {
margin: 0;
padding: 0;
}
h2{
color: #000;
font-size: 42px;
font-weight: bold;
font-family: 'Nexa Demo';
margin-bottom: 22px;
}
/*---------------------------- header css start ----------------------*/
header a.navbar-brand img {
max-width: 202px;
}
header {
background: #066277;
}
header .navbar-nav .nav-item .nav-link, header .right-nav .nav-item .nav-link {
color: #FFF;
font-size: 16px;
font-family: 'Nexa Demo';
font-weight: 300;
font-style: normal;
}
header .offcanvas-header .offcanvas-title img {
max-width: 180px;
}
ul.navbar-nav li.nav-item.dropdown a .country-icon {
width: 20px;
display: inline-block;
height: auto;
}
.right-nav ul li.nav-item a.nav-link {
padding-left: 15px;
padding-right: 5px;
}
.right-nav ul li.nav-item {
position: relative;
}
.right-nav ul li.nav-item:after {
content: '/';
color: #fff;
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 20px;
left: 0;
display: inline-block;
}
.right-nav ul li.nav-item:first-child::after {
display: none;
}
.right-nav ul {
display: flex;
align-items: center;
}
.right-nav {
display: flex;
align-items: center;
}
.offcanvas-header .close-btn {
border: 0;
background: transparent;
top: 15px;
position: absolute;
right: 15px;
color: #ffffff;
background: #00bdff;
padding: 5px 10px;
}
.navbar-toggler {
background-color: #fff !important;
}
.offcanvas {
background-color: #000000;
}
.navbar-toggler:focus {
box-shadow: none !important;
}
/*---------------------------- header css End ----------------------*/
/*---------------------------- banner css start ----------------------*/
.main-banner {
background: #066277;
}
.main-banner .inner-banner {
max-width: 1180px;
margin: 0 auto;
}
.main-banner .inner-banner .banner-text {
padding-top: 80px;
}
.main-banner .inner-banner .banner-text h1 {
color: #FFF;
font-size: 72px;
font-weight: bold;
font-family: 'Nexa Demo';
}
.main-banner .inner-banner .banner-text p {
color: #FFF;
font-size: 20px;
line-height: 31px;
letter-spacing: 0.2px;
margin-top: 20px;
margin-bottom: 40px;
padding-right: 91px;
font-family: 'Roboto', sans-serif;
}
.common-btn {
display: inline-block;
border-radius: 100px;
background: #40B9EA;
padding: 16px 34px;
color: #FFF;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.main-banner .inner-banner .banner-text a span {
margin-left: 8px;
}
/*---------------------------- banner css End ----------------------*/
/*---------------------------- services css start ----------------------*/
.main-services {
padding-top: 50px;
}
.main-services .service-heading {
margin-bottom: 80px;
}
.main-services .service-heading p {
color: #2A2A2A;
text-align: center;
font-size: 20px;
line-height: 26px;
max-width: 934px;
margin: 0 auto;
}
.main-services .slide-tab {
max-width: 1152px;
margin: 0 auto;
}
.main-services .slide-tab .tab-slider {
margin-bottom: 50px;
}
.main-services .slide-tab .tab-slider {
margin-bottom: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.main-services .slide-tab .tab-slider .tab-btn.active, .main-services .slide-tab .tab-slider .show>.tab-btn {
border-radius: 100px;
background: #02111B;
color: #FFF;
font-size: 17px;
font-weight: bold;
font-family: 'Nexa Demo';
padding: 15px 30px;
display: flex;
justify-content: center;
}
.main-services .slide-tab .tab-slider .tab-btn {
padding: 15px 30px;
color: #2A2A2A;
font-size: 17px;
font-weight: bold;
font-family: 'Nexa Demo';
display: flex;
justify-content: center;
}
.tab-right-image img {
border-radius: 34px 0;
}
.slider-btn .slick-list.draggable {
padding: 0 20px;
}
.slider-btn .slick-prev {
left: -35px;
}
.slider-btn .slick-next {
right: -35px;
}
.main-tab-data .inner-tab-data .t-data-left {
padding-top: 50px;
}
.main-tab-data .inner-tab-data .t-data-left h5 {
color: #000;
font-size: 36px;
font-weight: bold;
font-family: 'Nexa Demo';
line-height: 44px;
margin-bottom: 16px;
}
.main-tab-data .inner-tab-data .t-data-left p {
color: #2A2A2A;
font-size: 16px;
margin-bottom: 25px;
}
.main-tab-data .inner-tab-data .t-data-left ul {
margin-top: 10px;
display: inline-block;
}
.main-tab-data .inner-tab-data .t-data-left ul li {
margin-bottom: 50px;
position: relative;
}
.main-tab-data .inner-tab-data .t-data-left ul li:last-child {
margin-bottom: 0px;
}
.main-tab-data .inner-tab-data .t-data-left ul li span {
margin-right: 24px;
display: inline-block;
}
.main-tab-data .inner-tab-data .t-data-left ul li:after {
content: '';
position: absolute;
display: inline-block;
border: 2px dashed #7f9499;
width: 2px;
height: 35px;
left: 22px;
bottom: -44px;
}
.main-tab-data .inner-tab-data .t-data-left ul li:last-child::after {
display: none;
}
.main-tab-data .read-more-btn {
margin-top: 40px;
}
.main-tab-data .read-more-btn .read-more {
color: #40B9EA;
font-size: 18px;
font-weight: bold;
font-family: 'Nexa Demo';
}
.main-tab-data .read-more-btn .read-more span {
margin-left: 8px;
display: inline-block;
}
.main-services .slide-tab .slick-next, .main-services .slide-tab .slick-prev {
width: 40px !important;
height: 40px !important;
}
/*---------------------------- services css End ----------------------*/
/*---------------------------- counter css start ----------------------*/
.main-counter {
padding-top: 100px;
}
.main-counter .inner-counter {
max-width: 800px;
margin: 0 auto;
}
.main-counter .inner-counter .project-count {
text-align: center;
}
.main-counter .inner-counter .project-count .item .puls-num {
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
font-weight: bold;
font-family: 'Nexa Demo';
}
.main-counter .inner-counter .project-count .item .Customers {
color: #066277;
}
.main-counter .inner-counter .project-count .item .Shippments {
color: #A568ED;
}
.main-counter .inner-counter .project-count .item .Partners {
color: #0EAD69;
}
.main-counter .inner-counter .project-count .item .Weight {
color: #326CE7;
}
.main-counter .inner-counter .project-count .item .count-text {
color: #2A2A2A;
font-size: 20px;
padding: 0 20px;
}
/*---------------------------- counter css End ----------------------*/
/*---------------------------- why-choose css start ----------------------*/
.why-choose {
padding-bottom: 60px;
}
.why-choose .w-c-heading p {
color: #2A2A2A;
text-align: center;
font-size: 18px;
line-height: 24px;
max-width: 860px;
margin: 0 auto;
}
.why-choose .w-c-heading {
margin-bottom: 33px;
}
.why-choose .choose-box, .main-ship .inner-ship {
max-width: 1140px;
margin: 0 auto;
}
.why-choose .choose-box .inner-box {
border-radius: 12px;
background: #F7F7F7;
padding: 24px 32px;
}
.why-choose .choose-box .inner-box figure {
width: 68px;
height: 68px;
display: inline-flex;
background: #E3E4E5;
border-radius: 10px;
align-items: center;
justify-content: center;
}
.why-choose .choose-box .inner-box h6 {
color: #02111B;
font-size: 18px;
font-weight: bold;
/* font-family: 'Nexa Demo';*/
margin-top: 16px;
margin-bottom: 12px;
}
.why-choose .choose-box .inner-box p {
color: #2A2A2A;
font-size: 16px;
line-height: 24px;
min-height: 48px;
}
/*---------------------------- why-choose css End ----------------------*/
/*---------------------------- map css start ----------------------*/
.main-map .map-heading p {
color: #2A2A2A;
text-align: center;
font-size: 20px;
line-height: 26px;
max-width: 934px;
margin: 0 auto;
}
.main-map .map-heading {
padding-bottom: 123px;
}
.main-map .inner-map {
max-width: 1147px;
margin: 0 auto;
}
.main-map .inner-map .map-frame iframe {
width: 100%;
height: 509px;
filter: grayscale(1);
}
/*---------------------------- map css End ----------------------*/
/*---------------------------- ship css start ----------------------*/
.main-ship .inner-ship{
margin-top: 42px;
}
.main-ship .inner-ship .ship-i-box {
position: relative;
}
.main-ship .ship-heading p {
color: #2A2A2A;
text-align: center;
font-size: 20px;
line-height: 26px;
max-width: 934px;
margin: 0 auto;
}
.main-ship .inner-ship .ship-i-box p {
position: absolute;
top: 32px;
left: 32px;
display: inline-block;
color: #FFF;
font-size: 32px;
font-weight: bold;
font-family: 'Nexa Demo';
}
/*---------------------------- ship css End ----------------------*/
/*---------------------------- mobile-app css start ----------------------*/
.main-mobile-app {
padding-bottom: 136px;
}
.main-mobile-app .inner-mob {
border-radius: 25px;
background: linear-gradient(337deg, #40B9EA 1.98%, #40B9EA 43.74%, rgba(0, 80, 134, 0.97) 88.33%);
padding-top: 68px;
}
.main-mobile-app .inner-mob .mob-image {
text-align: center;
}
.main-mobile-app .inner-mob .mobile-content {
padding-left: 170px;
padding-top: 100px;
}
.main-mobile-app .inner-mob .mobile-content h2 {
color: #FFF;
font-size: 48px;
font-weight: bold;
font-family: 'Nexa Demo';
margin-bottom: 0;
}
.main-mobile-app .inner-mob .mobile-content p {
color: #FFF;
font-size: 18px;
font-weight: 300;
font-style: normal;
margin-top: 24px;
margin-bottom: 40px;
}
.main-mobile-app .inner-mob .mobile-content .mob-both-btn .app-store {
margin-right: 27px;
}
/*---------------------------- mobile-app css End ----------------------*/
/*---------------------------- footer css start ----------------------*/
footer {
background: #02111B;
padding: 75px 0;
}
footer .inner-footer {
display: flex;
max-width: 1180px;
margin: 0 auto;
flex-wrap: wrap;
}
footer .inner-footer .footer-column {
width: 20%;
}
footer .inner-footer .footer-column .footer-heading h6 {
color: #FFF;
font-size: 18px;
font-weight: bold;
font-family: 'Nexa Demo';
margin-bottom: 45px;
padding-top: 20px;
}
footer .inner-footer .footer-column ul li {
margin-bottom: 22px;
padding-right: 65px;
}
footer .inner-footer .footer-column ul li:last-child {
margin-bottom: 0px;
}
footer .inner-footer .footer-column ul li a {
color: #FFF;
font-size: 16px;
}
footer .inner-footer .footer-column ul li a:hover {
color: #00bdff;
}
/*---------------------------- footer css End ----------------------*/
@media (min-width:1280px){
.container{
max-width: 1332px !important;
}
}
@media (min-width:992px) and (max-width:1299px){
.why-choose .choose-box .inner-box h6 {
font-size: 17px;
}
.why-choose .choose-box .inner-box p {
font-size: 14px;
}
}
@media (min-width:992px){
.why-choose .choose-box .inner-box:nth-child(n+1),
.why-choose .choose-box .inner-box:nth-child(n+2), .why-choose .choose-box .inner-box:nth-child(n+3) {
margin-bottom: 40px;
}
}
@media (max-width:1399px){
.main-mobile-app .inner-mob .mobile-content {
padding-left: 90px;
padding-top: 100px;
}
}
@media (max-width:1199px){
header .navbar-nav .nav-item .nav-link, header .right-nav .nav-item .nav-link {
padding-right: 10px !important;
padding-left: 10px !important;
}
.main-banner .inner-banner .banner-text h1 {
font-size: 60px;
}
.main-banner .inner-banner .banner-text p {
padding-right: 0px;
}
.main-banner .inner-banner .banner-text {
padding-top: 0;
}
footer .inner-footer .footer-column {
width: 25%;
}
.main-mobile-app .inner-mob .mobile-content {
padding-left: 12px;
padding-top: 100px;
}
.main-map .map-heading {
padding-bottom: 50px;
}
.main-services .slide-tab .tab-slider .tab-btn {
padding: 10px 10px;
font-size: 16px;
}
.main-services .slide-tab .tab-slider .tab-btn.active, .main-services .slide-tab .tab-slider .show>.tab-btn {
padding: 10px 10px;
font-size: 16px;
}
.main-tab-data .inner-tab-data .t-data-left ul li:after {
height: 20px;
bottom: -30px;
}
.main-tab-data .inner-tab-data .t-data-left ul li {
margin-bottom: 35px;
position: relative;
}
}
@media (max-width:1099px){
.main-services .slide-tab .tab-slider {
margin-bottom: 50px !important;
max-width: 850px;
margin: 0 auto;
}
}
@media (max-width:991px){
.py-100 {
padding-top: 50px;
padding-bottom: 50px;
}
.pb-100{
padding-bottom: 50px;
}
.main-banner .inner-banner .banner-image {
padding-top: 20px;
}
.why-choose .choose-box .inner-box {
margin-bottom: 20px;
}
.main-ship .inner-ship .ship-i-box {
position: relative;
margin-bottom: 20px;
}
footer .inner-footer .footer-column {
width: 33.33%;
}
.main-mobile-app {
padding-bottom: 50px;
}
.main-mobile-app .inner-mob .mobile-content {
margin-bottom: 20px;
padding-top: 0;
}
.why-choose {
padding-bottom: 40px;
}
.main-map .inner-map .map-frame iframe {
height: 400px;
}
.main-tab-data .inner-tab-data .t-data-left {
padding-top: 20px;
margin-bottom: 20px;
}
.main-tab-data .read-more-btn {
margin-top: 20px;
}
}
@media (max-width:767px){
.why-choose .choose-box .inner-box p {
min-height: auto;
}
h2 {
font-size: 35px;
margin-bottom: 15px;
}
.main-ship .ship-heading p {
font-size: 16px;
line-height: 22px;
max-width: 100%;
}
.why-choose .w-c-heading p {
font-size: 16px;
line-height: 22px;
max-width: 100%;
}
.main-ship .inner-ship .ship-i-box img {
width: 100%;
}
.main-ship .inner-ship .ship-i-box p {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
footer .inner-footer .footer-column {
width: 50%;
}
footer .inner-footer .footer-column ul li {
margin-bottom: 10px;
padding-right: 0;
}
footer .inner-footer .footer-column .footer-heading h6 {
margin-bottom: 20px;
padding-top: 20px;
}
.main-tab-data .inner-tab-data .t-data-left {
padding-top: 20px;
}
.main-services .service-heading {
margin-bottom: 50px;
}
.main-services .service-heading p {
font-size: 16px;
line-height: 24px;
max-width: 100%;
}
.main-counter {
padding-top: 50px;
}
.main-counter .inner-counter {
max-width: 100%;
margin: 0 auto;
}
.main-map .map-heading p {
font-size: 16px;
line-height: 26px;
max-width: 100%;
}
.slider-btn .slick-next, .slider-btn .slick-prev {
top: 180%;
}
.slider-btn .slick-prev {
left: 3%;
}
.slider-btn .slick-next {
right: 3%;
}
}
@media (max-width:575px){
.py-100 {
padding-top: 30px;
padding-bottom: 30px;
}
.pb-100{
padding-bottom: 30px;
}
.main-mobile-app .inner-mob .mobile-content h2 {
color: #FFF;
font-size: 40px;
}
.why-choose {
padding-bottom: 10px;
}
.main-tab-data .inner-tab-data .t-data-left ul li span {
margin-right: 10px;
display: inline-block;
}
.main-tab-data .inner-tab-data .t-data-left h5 {
color: #000;
font-size: 30px;
margin-bottom: 10px;
}
.main-tab-data .inner-tab-data .t-data-left p {
margin-bottom: 10px;
}
.slider-btn .slick-next {
right: 35%;
}
.slider-btn .slick-prev {
left: 35%;
}
}
@media (max-width:425px){
.main-banner .inner-banner .banner-text h1 {
font-size: 40px;
}
.main-banner .inner-banner .banner-text p {
font-size: 16px;
line-height: 27px;
margin-bottom: 20px;
}
footer .inner-footer .footer-column {
width: 100%;
}
.main-mobile-app .inner-mob .mobile-content h2 {
color: #FFF;
font-size: 35px;
}
.main-mobile-app .inner-mob .mobile-content {
padding-left: 0px;
}
.main-mobile-app .inner-mob .mobile-content p {
margin-top: 10px;
margin-bottom: 20px;
}
}
