<!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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="Ansonika">
<title>Allaia | Bootstrap eCommerce Template - ThemeForest</title>
<!-- Favicons-->
<link rel="shortcut icon" href="http://demo.demohuo.top/modals/65/6563/demo/img/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" type="image/x-icon" href="http://demo.demohuo.top/modals/65/6563/demo/img/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon" type="image/x-icon" sizes="72x72" href="http://demo.demohuo.top/modals/65/6563/demo/img/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon" type="image/x-icon" sizes="114x114" href="http://demo.demohuo.top/modals/65/6563/demo/img/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon" type="image/x-icon" sizes="144x144" href="http://demo.demohuo.top/modals/65/6563/demo/img/apple-touch-icon-144x144-precomposed.png">
<!-- GOOGLE WEB FONT -->
<link rel="preconnect" href="https://fonts.gstatic.com/">
<script>
!function(e,n,t){"use strict";var o="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap",r="__3perf_googleFonts_c2536";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
</script>
<!-- BASE CSS -->
<link href="static/css/bootstrap.custom.min.css" rel="stylesheet">
<link href="static/css/style.css" rel="stylesheet">
<!-- SPECIFIC CSS -->
<link href="static/css/product_page.css" rel="stylesheet">
</head>
<body>
<div id="page">
<header class="version_1">
<div class="layer"></div><!-- Mobile menu overlay mask -->
<div class="main_header">
<div class="container">
<div class="row small-gutters">
<div class="col-xl-3 col-lg-3 d-lg-flex align-items-center">
<div id="logo">
<a href="index.html"><img src="static/picture/logo.svg" alt="" width="100" height="35"></a>
</div>
</div>
<nav class="col-xl-6 col-lg-7">
<a class="open_close" href="javascript:void(0);">
<div class="hamburger hamburger--spin">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
</a>
<!-- Mobile menu button -->
<div class="main-menu">
<div id="header_menu">
<a href="index.html"><img src="static/picture/logo_black.svg" alt="" width="100" height="35"></a>
<a href="#" class="open_close" id="close_in"><i class="ti-close"></i></a>
</div>
<ul>
<li class="submenu">
<a href="javascript:void(0);" class="show-submenu">Home</a>
<ul>
<li><a href="index.html">Slider</a></li>
<li><a href="index-2.html">Video Background</a></li>
<li><a href="index-3.html">Vertical Slider</a></li>
<li><a href="index-4.html">GDPR Cookie Bar</a></li>
</ul>
</li>
<li class="megamenu submenu">
<a href="javascript:void(0);" class="show-submenu-mega">Pages</a>
<div class="menu-wrapper">
<div class="row small-gutters">
<div class="col-lg-3">
<h3>Listing grid</h3>
<ul>
<li><a href="listing-grid-1-full.html">Grid Full Width</a></li>
<li><a href="listing-grid-2-full.html">Grid Full Width 2</a></li>
<li><a href="listing-grid-3.html">Grid Boxed</a></li>
<li><a href="listing-grid-4-sidebar-left.html">Grid Sidebar Left</a></li>
<li><a href="listing-grid-5-sidebar-right.html">Grid Sidebar Right</a></li>
<li><a href="listing-grid-6-sidebar-left.html">Grid Sidebar Left 2</a></li>
<li><a href="listing-grid-7-sidebar-right.html">Grid Sidebar Right 2</a></li>
</ul>
</div>
<div class="col-lg-3">
<h3>Listing row & Product</h3>
<ul>
<li><a href="listing-row-1-sidebar-left.html">Row Sidebar Left</a></li>
<li><a href="listing-row-2-sidebar-right.html">Row Sidebar Right</a></li>
<li><a href="listing-row-3-sidebar-left.html">Row Sidebar Left 2</a></li>
<li><a href="listing-row-4-sidebar-extended.html">Row Sidebar Extended</a></li>
<li><a href="product-detail-1.html">Product Large Image</a></li>
<li><a href="">Product Carousel</a></li>
<li><a href="product-detail-3.html">Product Sticky Info</a></li>
</ul>
</div>
<div class="col-lg-3">
<h3>Other pages</h3>
<ul>
<li><a href="cart.html">Cart Page</a></li>
<li><a href="checkout.html">Check Out Page</a></li>
<li><a href="confirm.html">Confirm Purchase Page</a></li>
<li><a href="account.html">Create Account Page</a></li>
<li><a href="track-order.html">Track Order</a></li>
<li><a href="help.html">Help Page</a></li>
<li><a href="help-2.html">Help Page 2</a></li>
<li><a href="leave-review.html">Leave a Review</a></li>
</ul>
</div>
<div class="col-lg-3 d-xl-block d-lg-block d-md-none d-sm-none d-none">
<div class="banner_menu">
<a href="#0">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-src="static/picture/banner_menu.jpg" width="400" height="550" alt="" class="img-fluid lazy">
</a>
</div>
</div>
</div>
<!-- /row -->
</div>
<!-- /menu-wrapper -->
</li>
<li class="submenu">
<a href="javascript:void(0);" class="show-submenu">Extra Pages</a>
<ul>
<li><a href="header-2.html">Header Style 2</a></li>
<li><a href="header-3.html">Header Style 3</a></li>
<li><a href="header-4.html">Header Style 4</a></li>
<li><a href="header-5.html">Header Style 5</a></li>
<li><a href="404.html">404 Page</a></li>
<li><a href="sign-in-modal.html">Sign In Modal</a></li>
<li><a href="contacts.html">Contact Us</a></li>
<li><a href="about.html">About 1</a></li>
<li><a href="about-2.html">About 2</a></li>
<li><a href="modal-advertise.html">Modal Advertise</a></li>
<li><a href="modal-newsletter.html">Modal Newsletter</a></li>
</ul>
</li>
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="javascript:;" target="_parent">Buy Template</a>
</li>
</ul>
</div>
<!--/main-menu -->
</nav>
<div class="col-xl-3 col-lg-2 d-lg-flex align-items-center justify-content-end text-right">
<a class="phone_top" href="tel://9438843343"><strong><span>Need Help?</span>+94 423-23-221</strong></a>
</div>
</div>
<!-- /row -->
</div>
</div>
<!-- /main_header -->
<div class="main_nav inner Sticky">
<div class="container">
<div class="row small-gutters">
<div class="col-xl-3 col-lg-3 col-md-3">
<nav class="categories">
<ul class="clearfix">
<li><span>
<a href="#">
<span class="hamburger hamburger--spin">
<span class="hamburger-box">
<span