<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<title>Kababi - Restaurant HTML Template</title>
<meta name="author" content="themesflat.com">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body class="counter-scroll header-fixed">
<div id="loading-overlay">
<div class="loader"></div>
</div>
<div id="wrapper">
<div id="page" class="clearfix">
<header id="site-header">
<div id="site-header-inner" class="container-fluid">
<div class="wrap-inner flex">
<div id="site-logo" class="cleafix">
<a href="" class="logo">
<img src="static/picture/logo.png" alt="">
</a>
</div>
<div class="mobile-button">
<span></span>
</div>
<nav id="main-nav" class="main-nav">
<ul id="menu-primary-menu" class="menu">
<li class="menu-item menu-item-has-children menu-item-has-children-active current-menu-item">
<a href="#">Home</a>
<ul class="sub-menu">
<li class="menu-item current-item"><a href="">Home 1</a></li>
<li class="menu-item"><a href="home2.html">Home 2</a></li>
<li class="menu-item"><a href="home3.html">Home 3</a></li>
</ul>
</li>
<li class="menu-item ">
<a href="about.html">About</a>
</li>
<li class="menu-item menu-item-has-children ">
<a href="about.html">Page</a>
<ul class="sub-menu">
<li class="menu-item"><a href="our-chefs.html">Our Chefs</a></li>
<li class="menu-item"><a href="our-menu.html">Our Menu</a></li>
<li class="menu-item"><a href="our-menu2.html">Our Menu2</a></li>
<li class="menu-item"><a href="reservation.html">Reservation</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#">Shop</a>
<ul class="sub-menu">
<li class="menu-item"><a href="our-shop.html">Our Shop</a></li>
<li class="menu-item"><a href="shop-details.html">Shop Details</a></li>
</ul>
</li>
<li class="menu-item ">
<a href="contact.html">Contact</a>
</li>
</ul>
</nav>
<div class="header-contact">
<span class="address">
+012 (345) 6789
</span>
</div>
<div class="flat-button">
<a href="reservation.html" class="tf-button color-text color-style1">book a table</a>
</div>
</div>
</div>
</header>
<section class="page-title">
<div class="slider">
<div class="img-bg2">
<img src="static/picture/img_bg2.png" alt="">
</div>
<div class="swiper-container mainslider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slider-item">
<div class="container-fluid">
<div class="page-tittle-slider distance">
<div class="heading-tittle">
<h1 class="title color-style4 margin-6 margin-bt30">Best <br>Quality<br>Foods
</h1>
<div class="flat-button">
<a href="our-menu.html" class="tf-button color-text color-style2">explore our menu</a>
</div>
</div>
<div class="wrap-video">
<a href="javascript:;" class="popup-youtube">
<i class="fas fa-play"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slider-item">
<div class="container-fluid">
<div class="page-tittle-slider ">
<div class="heading-tittle">
<h1 class="title color-style4 margin-6 margin-bt30">Best <br>Quality<br>Foods
</h1>
<div class="flat-button">
<a href="our-menu.html" class="tf-button color-text color-style2">explore our menu</a>
</div>
</div>
<div class="wrap-video">
<a href="javascript:;" class="popup-youtube">
<i class="fas fa-play"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-button-next btn-slide-next"></div>
<div class="swiper-button-prev btn-slide-prev active"></div>
</div>
</div>
</section>
<section class="tf-section wrap-category">
<div class="overlay-bg-style01"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 cleafix">
<div class="content-heading-wrap">
<div class="tf-heading-bg color-style1 cleafix">
<h2 class="heading-bg-style">CATEGORY</h2>
</div>
<div class="tf-heading text-center">
<h4 class="tf-title wow zoomIn animated" data-wow-delay="0.3ms" data-wow-duration="1200ms">choose your best category</h4>
<p class="tf-sub-heading">Best foods for you & family</p>
</div>
</div>
</div>
<div class="flat-tabs">
<ul class="menu-tab">
<li class="col-box col-16">
<div class="tf-icon-box tf-iconbox-category wow fadeInUp animated" data-wow-delay="0.3ms" data-wow-duration="500ms">
<div class="icon-wrap margin-bt-2">
<i class="flaticon-cheeseburger"></i>
</div>
<h6 class="heading">
Cheeseburger
</h6>
<div class="btn-icon-box">
<a class="color-style2" href="our-shop.html"><i class="fal fa-arrow-right"></i></a>
</div>
</div>
</li>
<li class="col-box col-16">
<div class="tf-icon-box tf-iconbox-category wow fadeInUp animated" data-wow-delay="0.3ms" data-wow-duration="700ms">
<div class="icon-wrap margin-bt-2">
<i class="flaticon-pizza"></i>
</div>
<h6 class="heading">
Pizza Slice
</h6>
<div class="btn-icon-box">
<a class="color-style2" href="our-shop.html"><i class="fal fa-arrow-right"></i></a>
</div>
</div>
</li>
<li class="col-box col-16 active">
<div class="tf-icon-box tf-iconbox-category wow fadeInUp animated" data-wow-delay="0.3ms" data-wow-duration="900ms">
<div class="icon-wrap margin-bt-2">
<i class="flaticon-coffee-cup"></i>
</div>
<h6 class="heading">
Coffee-Cup
</h6>
<div class="btn-icon-box">
<a class="color-style2" href="our-shop.html"><i class="fal fa-arrow-right"></i></a>
</div>
</div>
</li>
<li class="col-box col-16">
<div class="tf-icon-box tf-iconbox-category wow fadeInUp animated" data-wow-delay="0.3ms" data-wow-duration="1100ms">
<div class="icon-wrap margin-bt-2">
<i class="flaticon-chicken-leg"></i>
</div>
<h6 class="heading">
Chicken-Leg
</h6>
<div class="btn-icon-box">
<a class="color-style2" href="our-shop.html"><i class="fal fa-arrow-right"></i></a>
</div>
</div>
</li>
<li class="col-box col-16">
<div class="tf-icon-box tf-iconbox-category wow fadeInUp animated" data-wow-delay="0.3ms" data-wow-duration="1300ms">
<div class="icon-wrap margin-bt-2">
<i class="flaticon-drink"></i>
</div>
<h6 class="heading">
Energy Drink
</h6>
<div class="btn-icon-box">
<a class="color-style2" href="our-shop.html"><i class="fal fa-arrow-right"></i></a>
</div>
</div>
</li>
<li class="col-box col-16">
<div class="tf-icon-box tf-iconbox-category wow fadeInUp animated" data-wow-delay="0.3ms" data-wow-duration="1500ms">
<div class="icon-wrap margin-bt-2">
<i class="flaticon-shrimp"></i>
</div>
<h6 class="heading">
Shrimp
</h6>
<div class="btn-icon-box">
<a class="color-style2" href="our-shop.html"><i class="fal fa-arrow-right"></i></a>
</div>
</div>
</li>
</ul>
<div class="content-tab style2">
<div class="content-inner">
<div class="wrap-img-food-inner flex">
<div class="img-food-1">
<img src="static/picture/imgfood1.png" alt="images">
</div>
<div class="img-food-2">
<img class="img-style-bg" src="static/picture/imgfood2.jpg" alt="images">
</div>
<div class="img-food-3">
<img src="static/picture/imgfood3.png" alt="images">
</div>
</div>
</div>
<div class="content-inner">
<div class="wrap-img-food-inner flex">
<div class="img-food-1">
<img src="static/picture/imgfood1.png" alt="images">
</div>
<div class="img-food-2">
<img class="img-style-bg" src="static/picture/imgfood2.jpg" alt="images">
</div>
<div class="img-food-3">
<img src="static/picture/imgfood3.png" alt="images">
</div>
</div>
</div>
<div class="content-inner">
<div class="wrap-img-food-inner flex">
<div class="img-food-1">
<img src="static/picture/imgfood1.png" alt="images">
</div>
<div class="img-food-2">
<img class="img-style-bg" src="static/picture/imgfood2.jpg" alt="images">
</div>
<div class="img-food-3">
<img src="static/picture/imgfood3.png" alt="images">
</div>
</div>
</div>
<div class="content-inner">
<div class="wrap-img-food-inner flex">
<div class="img-food-1">
<img src="static/picture/imgfood1.png" alt="images">
</div>
<div class="img-food-2">
<img class="img-style-bg" src="static/picture/imgfood2.jpg" alt="images">
</div>
<div class="img-food-3">
<img src="static/picture/imgfood3.png" alt="images">
</div>
</div>
</div>
<div class="content-inner">
<div c