<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Refuel - Petrol Pump and Gas Station  HTML5 Template</title>

<link rel="icon" href="assets/img/favicon.png" type="image/jpg" />

<link href="assets/css/bootstrap.min.css" rel="stylesheet">

<link href="assets/css/fontawesome.min.css" rel="stylesheet">

<link href="assets/css/magnific-popup.min.css" rel="stylesheet">

<link href="assets/css/animate.css" rel="stylesheet">

<link href="assets/css/barfiller.css" rel="stylesheet">

<link href="assets/css/owl.carousel.css" rel="stylesheet">

<link href="assets/css/style.css" rel="stylesheet">

<link href="assets/css/responsive.css" rel="stylesheet">
</head>
<body>

<div id="preloader">
<div class="loader">
<div class="loader-rect"></div>
<div class="loader-rect"></div>
<div class="loader-rect"></div>
<div class="loader-rect"></div>
</div>
</div>

<div class="header-top">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="contact-info">
<a href="#" class="mr-3"><i class="fal fa-envelope-open"></i> <span class="__cf_email__" data-cfemail="9bf2f5fdf4dbfee3faf6ebf7feb5f8f4f6">[email&#160;protected]</span> </a>
<a href="#"><i class="fal fa-map-marker-alt"></i> 3008 Park Boulevard, New York, USA</a>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 text-right">
<div class="site-info">
<div class="social-area">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>

<header class="header-area">
<div class="sticky-area">
<div class="navigation">
<div class="container">
<div class="row">
<div class="col-lg-2">
<div class="logo">
<a class="navbar-brand" href="index.html"><img src="assets/img/logo.png" alt></a>
</div>
</div>
<div class="col-lg-9">
<div class="main-menu">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">Home
<i class="far fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li><a href="index.html"><i class="fal fa-minus"></i> Home Demo 01</a></li>
<li><a href="index-2.html"><i class="fal fa-minus"></i> Home Demo 02</a></li>
<li><a href="index-3.html"><i class="fal fa-minus"></i> Home Demo 03</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services
<i class="far fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li><a href="services-1.html"><i class="fal fa-minus"></i> Services 01</a></li>
<li><a href="services-2.html"><i class="fal fa-minus"></i> Services 02</a></li>
<li><a href="single-service.html"><i class="fal fa-minus"></i> Service Details</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pages
<i class="far fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li><a href="404.html"><i class="fal fa-minus"></i> 404 Error</a></li>
<li><a href="choose-us.html"><i class="fal fa-minus"></i> Why Choose Us</a></li>
<li><a href="login.html"><i class="fal fa-minus"></i> Login</a></li>
<li><a href="register.html"><i class="fal fa-minus"></i> Register</a></li>
<li><a href="forgot-password.html"><i class="fal fa-minus"></i> Forgot Password</a></li>
<li><a href="team.html"><i class="fal fa-minus"></i> Our Team</a></li>
<li><a href="price.html"><i class="fal fa-minus"></i> Pricing</a></li>
<li><a href="faq.html"><i class="fal fa-minus"></i> FAQ</a></li>
<li><a href="privacy-policy.html"><i class="fal fa-minus"></i> Privacy Policy</a></li>
<li><a href="term-condition.html"><i class="fal fa-minus"></i> Terms & Conditions</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog
<i class="far fa-angle-down"></i>
</a>
<ul class="sub-menu">
<li><a href="blog-classic.html"><i class="fal fa-minus"></i> Blog Classic</a></li>
<li><a href="blog-grid.html"><i class="fal fa-minus"></i> Blog Grid</a></li>
<li><a href="single-blog.html"><i class="fal fa-minus"></i> Blog Details</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="col-lg-1">
<div class="header-right-content">
<div class="search-box">
<button class="search-btn"><i class="far fa-search"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="search-popup">
<span class="search-back-drop"></span>
<div class="search-inner">
<div class="auto-container">
<div class="upper-text">
<button class="close-search"><span class="far fa-times"></span></button>
</div>
<form method="post" action="#">
<div class="form-group">
<input type="search" name="search-field" placeholder="Search Here..." required>
<button type="submit"><i class="far fa-search"></i></button>
</div>
</form>
</div>
</div>
</div>
</header>


<div class="breadcroumb-area bread-bg" style="background-image: url(assets/img/bread-bg.jpg);">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="breadcroumb-title">
<h1>Services</h1>
<h6><a href="index.html">Home</a> <i class="far fa-dot-circle"></i> Services</h6>
</div>
</div>
</div>
</div>
</div>

<div id="service-2" class="service-area gray-bg section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center ">
<div class="section-title">
<h6>Services</h6>
<h2>Our Best Services</b></h2>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="single-service-wrapper mt-40">
<div class="row no-gutters">
<div class="col-lg-6 col-md-6">
<div class="single-service-bg bg-cover">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="single-service-area">
<div class="service-icon">
<i class="flaticon-petrol"></i>
</div>
<h5>Solid Octane</h5>
<p>There are many variations of passages of variations.</p>
<a href="single-service.html" class="read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="single-service-wrapper mt-40">
<div class="row no-gutters">
<div class="col-lg-6 col-md-6">
<div class="single-service-bg service-bg-2 bg-cover">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="single-service-area">
<div class="service-icon">
<i class="flaticon-diesel"></i>
</div>
<h5>Pure Diesel</h5>
<p>There are many variations of passages of variations.</p>
<a href="single-service.html" class="read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="single-service-wrapper">
<div class="row no-gutters">
<div class="col-lg-6 col-md-6">
<div class="single-service-area">
<div class="service-icon">
<i class="flaticon-gasoline"></i>
</div>
<h5>Light Petrol</h5>
<p>There are many variations of passages of variations.</p>
<a href="single-service.html" class="read-more">Read More</a>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="single-service-bg service-bg-3 bg-cover">
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12">
<div class="single-service-wrapper">
<div class="row no-gutters">
<div class="col-lg-6 col-md-6">
<div class="single-service-area">
<div class="service-icon">
<i class="flaticon-charging-station"></i>
</div>
<h5>CNG Gas</h5>
<p>There are many variations of passages of variations.</p>
<a href="single-service.html" class="read-more">Read More</a>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="single-service-bg service-bg-4 bg-cover">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="pricing-section dark-bg section-padding">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2 text-center">
<div class="section-title">
<h6>Pricing</h6>
<h2>Choose Your Plan</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="single-price-item wow fadeInLeft" data-wow-delay=".2s">
<div class="price-img">
<img src="assets/img/icon/4.png" alt>
</div>
<h4>Petrol</h4>
<p><b>$40</b></p>
<ul>
<li><i class="fal fa-check"></i> <b>Weight</b> - 1 ltr</li>
<li><i class="fal fa-check"></i> <b>City</b> - USA</li>
<li><i class="fal fa-check"></i> <b>Payment</b> - No</li>
<li><i class="fal fa-check"></i> <b>Ticket</b> - Yes</li>
</ul>
<a href="quote.html" class="main-btn">Order Now</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-price-item active wow fadeInUp" data-wow-delay=".4s">
<div class="price-img">
<img src="assets/img/icon/5.png" alt>
</div>
<h4>Diesel</h4>
<p><b>$65</b></p>
<ul>
<li><i class="fal fa-check"></i> <b>Weight</b> - 1 ltr</li>
<li><i class="fal fa-check"></i> <b>City</b> - USA</li>
<li><i class="fal fa-check"></i> <b>Payment</b> - No</li>
<li><i class="fal fa-check"></i> <b>Ticket</b> - Yes</li>
</ul>
<a href="quote.html" class="main-btn">Order Now</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="single-price-item wow fadeInRight" data-wow-delay=".6s">
<div class="price-img">
<img src="assets/img/icon/1.png" alt>
</div>
<h4>Octane</h4>
<p><b>$90</b></p>
<ul>
<li><i class="fal fa-check"></i> <b>Weight</b> - 1 ltr</li>
<li><i class="fal fa-check"></i> <b>City</b> - USA</li>
<li><i class="fal fa-check"></i> <b>Payment</b> - No</li>
<li><i class="fal fa-check"></i> <b>Ticket</b> - Yes</li>
</ul>
<a href="quote.html" class="main-btn">Order Now</a>
</div>
</div>
</div>
</div>
</div>

<div class="client-area pt-50 pb-40">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="logo-carousel owl-carousel">
<div class="single-logo-wrapper">
<div class="logo-inner-item">
<img src="assets/img/client/1.png" alt>
</div>
</div>
<div class="single-logo-wrapper">
<div class="logo-inner-item">
<img src="assets/img/client/2.png" alt>
</div>
</div>
<div class="single-logo-wrapper">
<div class="logo-inner-item">
<img src="assets/img/client/3.png" alt>
</div>
</div>
<div class="single-logo-wrapper">
<div class="logo-inner-item">
<img src="assets/img/client/4.png" alt>
</div>
</div>
<div class="single-logo-wrapper">
<div class="logo-inner-item">
<img src="assets/img/client/5.png" alt>
</div>
</div>
<div class="single-logo-wrapper">
<div class="logo-inner-item">
<img src="assets/img/client/6.png" alt>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<footer class="footer-area wow fadeIn" data-wow-delay=".2s">
<div class="container">
<div class="footer-up">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-12">
<div class="logo">
<img src="assets/img/logo-white.png" alt="fossil-logo">
</div>
<p>There are many variations of pase available but the majority have suffered alteration in some look even slightly believable.</p>
<div class="social-area">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<div class="col-lg-2 offset-lg-1 col-md-6 com-sm-12">
<h5>Quick Browse</h5>
<ul>
<li>
<a href="about.html"> <i class="fal fa-minus"></i> About Us</a>
<a href="blog-classic.html"><i class="fal fa-minus"></i> Contact Us</a>
<a href="services.html"><i class="fal fa-minus"></i> Services</a>
<a href="price.html"><i class="fal fa-minus"></i> Pricing Plan</a>
<a href="faq.html"><i class="fal fa-minus"></i> FAQ</a>
<a href="contact.html"><i class="fal fa-minus"></i> Support</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<h5>Our Services</h5>
<ul>
<li>
<a href="single-service.html"><i class="fal fa-minus"></i> Solid Octane </a>
<a href="single-service.html"><i class="fal fa-minus"></i> Pure Diesel</a>
<a href="single-service.html"><i class="fal fa-minus"></i> Light Petrol</a>
<a href="single-service.html"><i class="fal fa-minus"></i> CNG Gas</a>
<a href="single-service.html"><i class="fal fa-minus"></i> Car Cleaning</a>
<a href="single-service.html"><i class="fal fa-minus"></i> Electric Charging</a>
</li>
</ul>
</div>
<div class="col-lg-3 col-md-6">
<div class="subscribe-form">
<h5>Newsletter</h5>
<p>Subscribe our newsletter to get latest news update</p>
<form action="#">
<input type="email" placeholder="Your email">
<button class="main-btn">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
</div>
</footer>

<div class="footer-bottom">
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-6 col-md-6 col-sm-12">
<p class="copyright-line">© <span id="date"></span> Refuel All rights reserved.</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<p class="privacy"><a href="#">Privacy Policy</a> | <a href="#">Terms & Conditions</a></p>
</div>
</div>
</div>
</div>

<a href="#top" class="go-top"><i class="far fa-level-up"></i></a>

<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="assets/js/jquery-3.6.0.min.js"></script>

<script src="assets/js/bootstrap.bundle.min.js"></script>

<script src="assets/js/wow.min.js"></script>

<script src="assets/js/jquery.waypoints.min.js"></script>

<script src="assets/js/jquery.counterup.min.js"></script>

<script src="assets/js/owl.carousel.min.js"></script>

<script src="assets/js/magnific-popup.min.js"></script>

<script src="assets/js/jquery.sticky.js"></script>

<script src="assets/js/jquery.barfiller.js"></script>

<script src="assets/js/main.js"></script>
</body>
</html>
