=<!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>

    <!--Favicon-->
    <link rel="icon" href="assets/img/favicon.png" type="image/jpg" />
    <!-- Bootstrap CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome CSS-->
    <link href="assets/css/fontawesome.min.css" rel="stylesheet">
   <!-- Magnific Popup CSS-->
    <link href="assets/css/magnific-popup.min.css" rel="stylesheet">
    <!-- Animate CSS-->
    <link href="assets/css/animate.css" rel="stylesheet">
    <!-- Bar Filler CSS -->
    <link href="assets/css/barfiller.css" rel="stylesheet">
    <!-- Owl Carousel CSS -->
    <link href="assets/css/owl.carousel.css" rel="stylesheet">
    <!-- Style CSS -->
    <link href="assets/css/style.css" rel="stylesheet">
    <!-- Responsive CSS -->
    <link href="assets/css/responsive.css" rel="stylesheet">

</head>

<body>

    <!-- Pre-Loader -->
    <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>

    <!-- Header Top Area -->

    <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> info@example.com </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 Area -->

    <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>
        <!-- Search Dropdown Area -->
        <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>
     <!-- Search Dropdown Area -->

     <!-- Breadcroumb Area -->
 	<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>Choose Us</h1>
                        <h6><a href="index.html">Home</a> <i class="far fa-dot-circle"></i> Choose Us</h6>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- About Section-->

 	<div id="about-3" class="about-area section-padding">
        <div class="container">
            <div class="row">

                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="about-bg wow fadeInUp" data-wow-delay=".3s">
                        <img src="assets/img/about/about.jpg" alt="">
                    </div>
                </div>

                <div class="col-lg-6 col-md-12 col-sm-12">
                    <div class="info-content-area">
                        <div class="section-title">
                            <h6>Let's to Know Us</h6>
                            <h2>Best Refuel <b>Service</b> For You</h2>
                        </div>
                        <p>
                            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.
                        </p>
                    </div>

                    <div class="row">
                        <div class="col-lg-11">
                            <div class="progress-bar-area">
                                <div class="single-bar-item">
                                    <h4>Fuel Service </h4>
                                    <div id="bar1" class="barfiller">
                                        <span class="tip">80%</span>
                                        <span class="fill" data-percentage="80"></span>
                                    </div>
                                </div>

                                <div class="single-bar-item">
                                    <h4>CNG Gas Service</h4>
                                    <div id="bar2" class="barfiller">
                                        <span class="tip">50%</span>
                                        <span class="fill" data-percentage="50"></span>
                                    </div>
                                </div>

                                <div class="single-bar-item">
                                    <h4>Car Service</h4>
                                    <div id="bar3" class="barfiller">
                                        <span class="tip">60%</span>
                                        <span class="fill" data-percentage="60"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <p>
                        It is a long established fact that a reader will  the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters
                    </p>


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


    <!-- Choose Area -->

    <div class="choose-us-area section-padding">
        <div class="overlay-2"></div>
        <div class="container">
            <div class="row">
                <div class="offset-lg-2 col-lg-8 text-center">
                    <div class="section-title">
                        <h6>Choose</h6>
                        <h2>Why Choose Us</h2>
                    </div>
                </div>
            </div>
            <div class="choose-us-wrapper wow fadeInUp" data-wow-delay=".2s">
                <div class="row no-gutters">
                    <div class="col-lg-3 col-md-6 col-12">
                        <div class="choose-us-inner">
                            <div class="choose-us-icon">
                                <i class="fal fa-thermometer-full"></i>
                            </div>
                            <h5>100% Pure Fuel</h5>
                            <p>There are many variations of passages of Lorem Ipsum available.</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-12">
                        <div class="choose-us-inner">
                            <div class="choose-us-icon">
                                <i class="fal fa-meteor"></i>
                            </div>
                            <h5>Perfect Meter</h5>
                            <p>There are many variations of passages of Lorem Ipsum available.</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-12">
                        <div class="choose-us-inner">
                            <div class="choose-us-icon">
                                <i class="fal fa-hands-usd"></i>
                            </div>
                            <h5>Law Price Rate</h5>
                            <p>There are many variations of passages of Lorem Ipsum available.</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-12">
                        <div class="choose-us-inner">
                            <div class="choose-us-icon">
                                <i class="fal fa-user-headset"></i>
                            </div>
                            <h5>24/7 Support</h5>
                            <p>There are many variations of passages of Lorem Ipsum available.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="spacer">
        <div class="spacer-bg sky-bg bg-cover">
        </div>
    </div>

    <!-- Client Area -->

    <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 Area -->

    <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>

    <!-- Footer Bottom Area-->
    <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>

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





   <!-- jquery -->
   <script src="assets/js/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap JS -->
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <!-- Wow JS -->
    <script src="assets/js/wow.min.js"></script>
    <!-- Way Points JS -->
    <script src="assets/js/jquery.waypoints.min.js"></script>
    <!-- Counter Up JS -->
    <script src="assets/js/jquery.counterup.min.js"></script>
    <!-- Owl Carousel JS -->
    <script src="assets/js/owl.carousel.min.js"></script>
    <!-- Magnific Popup JS -->
    <script src="assets/js/magnific-popup.min.js"></script>
    <!-- Sticky JS -->
    <script src="assets/js/jquery.sticky.js"></script>
    <!-- Progress Bar JS -->
    <script src="assets/js/jquery.barfiller.js"></script>
    <!-- Main JS -->
    <script src="assets/js/main.js"></script>

</body>

</html>
