<footer class="main-footer animation">
  <!-- Nested Container Starts -->
  <div class="container">
    <!-- Nested Row Starts -->
    <div class="row">
      <!-- Subscribe Col Starts -->
      <div class="col-md-6 col-sm-7 col-xs-12">
        <!-- Foot Col Starts -->
        <div class="foot-col">
          <!-- Foot Col Head Starts -->
          <h6 class="foot-col-head hidden-xs">Stay Connected With Our Email Updates</h6>
          <h6 class="foot-col-head hidden visible-xs">Newsletter</h6>
          <!-- Foot Col Head Ends -->
          <!-- Foot Col Body Starts -->
          <div class="foot-col-body">
            <div id="foot-newsletter" class="foot-newsletter input-group mt-xs-0">
              <label for="foot-newsletter-email-label" class="sr-only">Email:</label>       
              <input type="text" name="foot-newsletter-email" onblur="javascript:if(this.value=='')this.value='Enter Your Email Address';" onfocus="javascript:if(this.value=='Enter Your Email Address')this.value='';" class="form-control rounded-0">
              <span class="input-group-btn">
                <button type="button" class="btn rounded-0 animation">Subscribe</button>
              </span>
            </div>
          </div>
          <!-- Foot Col Body Ends -->
        </div>
        <!-- Foot Col Ends -->
      </div>
      <!-- Subscribe Col Ends -->
      <!-- Social Media Col Starts -->
      <div class="col-lg-3 col-md-4 col-sm-5 col-xs-12 col-lg-offset-3 col-md-offset-2">
        <!-- Foot Col Starts -->
        <div class="foot-col">
          <!-- Foot Col Head Starts -->
          <h6 class="foot-col-head">Follow Us</h6>
          <!-- Foot Col Head Ends -->
          <!-- Foot Col Body Starts -->
          <div class="foot-col-body">
            <!-- Social Media Links Starts -->
            <ul class="list-unstyled list-inline foot-sm-links animation mt-xs-0">
              <li class="animation rounded-circle"><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li class="animation rounded-circle"><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li class="animation rounded-circle"><a href="#"><i class="fa fa-linkedin"></i></a></li>
              <li class="animation rounded-circle"><a href="#"><i class="fa fa-skype"></i></a></li>
              <li class="animation rounded-circle"><a href="#"><i class="fa fa-pinterest"></i></a></li>
            </ul>
            <!-- Social Media Links Ends -->
          </div>
          <!-- Foot Col Body Ends -->
        </div>
        <!-- Foot Col Ends -->
      </div>
      <!-- Social Media Col Ends -->
    </div>
    <!-- Nested Row Ends -->
    <!-- Divider Starts -->
    <hr class="hr-1 hidden-xs">
    <!-- Divider Ends -->
    <!-- Footer Links Wrap Starts -->
    <div class="footer-links-wrap">
      <!-- Nested Row Starts -->
      <div class="row">
        <!-- Information Column Starts -->
        <div class="col-md-2 col-sm-3 col-xs-12">
          <!-- Foot Col Starts -->
          <div class="foot-col">
            <!-- Foot Col Head Starts -->
            <h6 class="foot-col-head">Information</h6>
            <!-- Foot Col Head Ends -->
            <!-- Foot Col Body Starts -->
            <div class="foot-col-body">
              <!-- Footer Links Starts -->
              <ul class="list-unstyled footer-links mb-xs-0 mb-sm-0">
                <li><a href="#">About Us</a></li>
                <li><a href="#">Delivery Information</a></li>
                <li><a href="#">Privacy Policy</a></li>
                <li><a href="#">Terms &amp; Conditions</a></li>
              </ul>
              <!-- Footer Links Ends -->
            </div>
            <!-- Foot Col Body Ends -->
          </div>
          <!-- Foot Col Ends -->
        </div>
        <!-- Information Column Ends -->
        <!-- My Account Column Starts -->
        <div class="col-md-2 col-sm-3 col-xs-12">
          <!-- Foot Col Starts -->
          <div class="foot-col">
            <!-- Foot Col Head Starts -->
            <h6 class="foot-col-head">My Account</h6>
            <!-- Foot Col Head Ends -->
            <!-- Foot Col Body Starts -->
            <div class="foot-col-body">
              <!-- Footer Links Starts -->
              <ul class="list-unstyled footer-links mb-xs-0 mb-sm-0">
                <li><a href="#">My Account</a></li>
                <li><a href="#">Order History</a></li>
                <li><a href="#">Wish List</a></li>
                <li><a href="#">Newsletter</a></li>
              </ul>
              <!-- Footer Links Ends -->
            </div>
            <!-- Foot Col Body Ends -->
          </div>
          <!-- Foot Col Ends -->
        </div>
        <!-- My Account Column Ends -->
        <!-- Extras Column Starts -->
        <div class="col-md-2 col-sm-3 col-xs-12">
          <!-- Foot Col Starts -->
          <div class="foot-col">
            <!-- Foot Col Head Starts -->
            <h6 class="foot-col-head">Extras</h6>
            <!-- Foot Col Head Ends -->
            <!-- Foot Col Body Starts -->
            <div class="foot-col-body">
              <!-- Footer Links Starts -->
              <ul class="list-unstyled footer-links mb-xs-0 mb-sm-0">
                <li><a href="#">Brands</a></li>
                <li><a href="#">Gift Certificates</a></li>
                <li><a href="#">Affiliate</a></li>
                <li><a href="#">Specials</a></li>
              </ul>
              <!-- Footer Links Ends -->
            </div>
            <!-- Foot Col Body Ends -->
          </div>
          <!-- Foot Col Ends -->
        </div>
        <!-- Extras Column Ends -->
        <!-- Customer Services Column Starts -->
        <div class="col-md-2 col-sm-3 col-xs-12">
          <!-- Foot Col Starts -->
          <div class="foot-col">
            <!-- Foot Col Head Starts -->
            <h6 class="foot-col-head">Customer Service</h6>
            <!-- Foot Col Head Ends -->
            <!-- Foot Col Body Starts -->
            <div class="foot-col-body">
              <!-- Footer Links Starts -->
              <ul class="list-unstyled footer-links mb-xs-0 mb-sm-0">
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Returns</a></li>
                <li><a href="#">Site Map</a></li>
              </ul>
              <!-- Footer Links Ends -->
            </div>
            <!-- Foot Col Body Ends -->
          </div>
          <!-- Foot Col Ends -->
        </div>
        <!-- Customer Services Column Ends -->
        <!-- Spacer Starts For Small Screen Starts -->
        <div class="col-xs-12 hidden visible-sm">
          <hr class="hr-1">
        </div>
        <!-- Spacer Starts For Small Screen Ends -->
        <!-- Contact Us Column Starts -->
        <div class="col-md-4 col-xs-12">
          <!-- Foot Col Starts -->
          <div class="foot-col last">
            <!-- Foot Col Head Starts -->
            <h6 class="foot-col-head">Contact Us</h6>
            <!-- Foot Col Head Ends -->
            <!-- Foot Col Body Starts -->
            <div class="foot-col-body">
              <!-- Footer Contact Links Starts -->
              <ul class="list-unstyled footer-contact-links mb-xs-0 mb-sm-0">
                <li><i class="fa fa-map-marker"></i> Sampath book shop, No 49 Colombo, Kurunegala</li>
                <li><i class="fa fa-phone"></i> +94 37 2222696,  +94 77 9508500</li>
                <li><i class="fa fa-clock-o"></i> Hours: 7 Days a week - 9:00 am to 7:00 pm</li>
                <li><i class="fa fa-envelope-o"></i> <a href="mailto:E-mail : sampathbay@gmail.com">E-mail : sampathbay@gmail.com</a></li>
              </ul>
              <!-- Footer Contact Links Ends -->
            </div>
            <!-- Foot Col Body Ends -->
          </div>
          <!-- Foot Col Ends -->
        </div>
        <!-- Contact Us Column Ends -->
      </div>
      <!-- Nested Row Ends -->
    </div>
    <!-- Footer Links Wrap Ends -->
  </div>
  <!-- Nested Container Ends -->
  <!-- Copyright Starts -->
  <div class="copyright">
    <!-- Nested Container Starts -->
    <div class="container text-center-xs text-center-sm">
      <!-- Nested Row Starts -->
      <div class="row">
        <!-- Copyright Text Starts -->
        <div class="col-md-6 col-xs-12">
          <p class="copyright-text mb-lg-0 mb-md-0">Powered By <a href="http://www.opencart.com/">Sampathbay</a><br /> Your Store &copy; 2021.</p>
        </div>
        <!-- Copyright Text Ends -->
        <!-- Payment Gateway Starts -->
        <div class="col-md-6 col-xs-12">
          <ul class="list-unstyled list-inline mb-0 text-right-lg text-right-md">
            <li><img src="image/images/images.png" alt="PayPal" width="100%"></li>
          </ul>
        </div>
        <!-- Payment Gateway Ends -->
      </div>
      <!-- Nested Row Ends -->
    </div>
    <!-- Nested Container Ends -->
  </div>
  <!-- Copyright Ends -->
</footer>


<!--=================================
      Javascript -->

      <script type="text/javascript" src="js/jquery.appear.js"></script>
      <script type="text/javascript" src="js/swiperanimation/SwiperAnimation.min.js"></script>
      <script type="text/javascript" src="js/counter/jquery.countTo.js"></script>
      <script type="text/javascript" src="js/magnific-popup/jquery.magnific-popup.min.js"></script>
      <script type="text/javascript" src="js/shuffle/shuffle.min.js"></script>
      <script type="text/javascript" src="js/typer/jquery.typer.js"></script>
      <script type="text/javascript" src="js/jquery.toast.js"></script>
      <script type="text/javascript" src="js/jquery.validate.min.js"></script>
      <script type="text/javascript" src="js/add-to-cart.js"></script>
      <link rel="stylesheet" href="wp-content/autocomplete/jquery-ui.css" />
      <!--<script src="https://apis.google.com/js/platform.js" async defer></script>-->

<script type="text/javascript">
$(document).ready(function() {
 $('#txtSearch').autocomplete({
   autoFocus: true ,
     source: "connection/search",
     minLength: 2,
     select: function(event, ui) {
     location.href = 'search?key='+$(this).val();
     },
     open: function(event, ui) {
         $(".ui-autocomplete").css("z-index", 1000)
     }
 })
});

</script>