<!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">
        <title><?= $pageTitle ?></title>
        <meta name="keywords" content="Masasouq, keywords">
        <meta name="description" content="Masasouq description">
        <meta name="author" content="Masasouq">
        <!-- Favicon -->
        <link rel="apple-touch-icon" sizes="180x180" href="/public/front/assets/images/icons/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/public/front/assets/images/icons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/public/front/assets/images/icons/favicon-16x16.png">
        <link rel="manifest" href="/public/front/assets/images/icons/site.webmanifest">
        <link rel="mask-icon" href="/public/front/assets/images/icons/safari-pinned-tab.svg" color="#666666">
        <link rel="shortcut icon" href="/public/front/assets/images/icons/favicon.ico">
        <meta name="apple-mobile-web-app-title" content="Molla">
        <meta name="application-name" content="Molla">
        <meta name="msapplication-TileColor" content="#cc9966">
        <meta name="msapplication-config" content="/public/front/assets/images/icons/browserconfig.xml">
        <meta name="theme-color" content="#ffffff">
        <link rel="stylesheet" href="/public/front/assets/vendor/line-awesome/line-awesome/line-awesome/css/line-awesome.min.css">
        <!-- Plugins CSS File -->
        <link rel="stylesheet" href="/public/front/assets/css/bootstrap.min.css">
        <link rel="stylesheet" href="/public/front/assets/css/plugins/owl-carousel/owl.carousel.css">
        <link rel="stylesheet" href="/public/front/assets/css/plugins/magnific-popup/magnific-popup.css">
        <link rel="stylesheet" href="/public/front/assets/css/plugins/jquery.countdown.css">
        <!-- Main CSS File -->
        <link rel="stylesheet" href="/public/front/assets/css/style.css">
        <link rel="stylesheet" href="/public/front/assets/css/skins/skin-demo-2.css">
        <link rel="stylesheet" href="/public/front/assets/css/demos/demo-2.css">    

        <?php
        if (($this->session->userdata("lang") == 'ar')) {
            ?>
            <link href="/public/css/style-ar-1.css" rel="stylesheet" type="text/css"/>
            <link href="https://fonts.googleapis.com/css?family=Almarai:300,400&display=swap&subset=arabic" rel="stylesheet">
            <?php
        }
        ?>

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




        <style>

            .header-intro-clearance .dropdown.category-dropdown.show .dropdown-toggle {
                color: #fff;
            }
            .category-dropdown .dropdown-toggle:hover, .category-dropdown .dropdown-toggle:focus{
                background-color: <?= $backgroundColor ?>!important;
                color: #fff;
            }
            .btn-primary {
                color: #fff;
                background-color: <?= $backgroundColor ?>!important;;
                border-color: <?= $backgroundColor ?>!important;;
            }
            /**-- First Color --**/
            .product-price,
            .page-header h1 span,
            .text-primary,
            .menu li:hover>a, .menu li.show>a, .menu li.active>a {
                color: <?= $backgroundColor ?>!important;
            }
            .category-dropdown .dropdown-toggle:hover, .category-dropdown .dropdown-toggle:focus,
            .category-dropdown.show .dropdown-toggle,
            .bg-primary,
            .product-countdown,
            .cart-dropdown .cart-count,
            .wishlist a .wishlist-count,
            .header-bottom .menu>li>a:before {
                background-color: <?= $backgroundColor ?>!important;
            }


            /**-- Second Color --**/
            .product-pager-link:hover, .product-pager-link:focus,
            .cart-dropdown:hover .dropdown-toggle, .cart-dropdown.show .dropdown-toggle, .compare-dropdown:hover .dropdown-toggle, .compare-dropdown.show .dropdown-toggle,
            .wishlist a:hover, .wishlist a:focus,.wishlist a.active,
            .account a:hover, .account a:focus,.account a.active,
            .nav-dashboard .nav-link:hover, .nav-dashboard .nav-link:focus, .nav-dashboard .nav-link.active,
            .sidebar-filter-clear,
            #filter-price-range,
            .btn-product-icon,
            .newsletter-popup-container .banner-title span,
            .footer .widget-about-info a,
            .btn-product span{
                color: <?= $color ?>!important;
            }
            .btn-outline-primary-2 {
                color: <?= $color ?>!important;
                border-color: <?= $color ?>!important;
            }
            .btn-outline-primary-2:hover, .btn-outline-primary-2:focus, .btn-outline-primary-2.focus, .btn-outline-primary-2:not(:disabled):not(.disabled):active, .btn-outline-primary-2:not(:disabled):not(.disabled).active, .show>.btn-outline-primary-2.dropdown-toggle {
                color: #ffffff!important;
                background-color: <?= $color ?>!important;
                border-color: <?= $color ?>!important;
            }
            .btn-product {
                color: <?= $color ?>!important;
                border-color: <?= $color ?>!important;
            }
            .btn-product:hover, .btn-product:focus {
                color: #fff !important;
                background-color:  <?= $color ?>!important;
                border-color:  <?= $color ?>!important;
            }
            .btn-product:hover span, .btn-product:focus span {
                color: #fff!important;
            }
            .btn-product-icon:hover span, .btn-product-icon:focus span,
            .btn-product-icon:hover, .btn-product-icon:focus,
            .category-dropdown:not(.is-on):hover .dropdown-toggle {
                background-color: <?= $color ?>!important;
            }
            .btn-product-icon {
                border-color:  <?= $color ?>!important;
            }
            .btn-product-icon:hover, .btn-product-icon:focus {
                color: #fff !important;
            }

        </style>



    </head>
    <!-- ==== body starts ==== -->
    <body>
        <div class="page-wrapper">



            <header class="header header-2 header-intro-clearance">
                <div class="header-top">
                    <div class="container">
                        <div class="header-left">
                            <p><?= $this->Get_Lang->gl("special_collection_title", $langId) ?></p><a href="#">&nbsp;<?= $this->Get_Lang->gl("read_more", $langId) ?></a>
                        </div><!-- End .header-left -->

                        <div class="header-right">

                            <ul class="top-menu">
                                <li>
                                    <a href="#">Links</a>
                                    <ul>
                                        <li>
                                            <div class="header-dropdown">
                                                <a href="#">USD</a>
                                                <div class="header-menu">
                                                    <ul>
                                                        <li><a href="#">Eur</a></li>
                                                        <li><a href="#">Usd</a></li>
                                                    </ul>
                                                </div><!-- End .header-menu -->
                                            </div>
                                        </li>
                                        <li>



                                            <?php if (($this->session->userdata("lang") == 'ar')) { ?>

                                                <div class="header-dropdown">
                                                    <a href="#">عربي</a>
                                                    <div class="header-menu">
                                                        <ul>
                                                            <li><a class="lang" data-id="en" href="#">English</a></li>
                                                            <li><a class="lang" data-id="tr" href="#">Turkish</a></li>
                                                        </ul>
                                                    </div><!-- End .header-menu -->
                                                </div>

                                            <?php } elseif (($this->session->userdata("lang") == 'tr')) { ?>

                                                <div class="header-dropdown">
                                                    <a href="#">Turkish</a>
                                                    <div class="header-menu">
                                                        <ul>
                                                            <li><a class="lang" data-id="en" href="#">English</a></li>
                                                            <li><a class="lang arabic" data-id="ar" href="#">عربي</a></li>
                                                        </ul>
                                                    </div><!-- End .header-menu -->
                                                </div>

                                            <?php } else { ?>

                                                <div class="header-dropdown">
                                                    <a href="#">English</a>
                                                    <div class="header-menu">
                                                        <ul>
                                                            <li><a class="lang" data-id="tr" href="#">Turkish</a></li>
                                                            <li><a class="lang arabic" data-id="ar" href="#">عربي</a></li>
                                                        </ul>
                                                    </div><!-- End .header-menu -->
                                                </div>

                                            <?php } ?>





                                        </li>
                                        <li><a href="#signin-modal" data-toggle="modal"><?= $this->Get_Lang->gl("sign_in", $langId) ?> / <?= $this->Get_Lang->gl("sign_up", $langId) ?></a></li>
                                    </ul>
                                </li>
                            </ul><!-- End .top-menu -->
                        </div><!-- End .header-right -->

                    </div><!-- End .container -->
                </div><!-- End .header-top -->

                <div class="header-middle">
                    <div class="container">
                        <div class="header-left">
                            <button class="mobile-menu-toggler">
                                <span class="sr-only">Toggle mobile menu</span>
                                <i class="icon-bars"></i>
                            </button>

                            <a href="/" class="logo">
                                <img src="/public/uploads/php/files/logos/<?= $theLogo ?>" alt="Masa Logo" width="105" height="25">
                            </a>
                        </div><!-- End .header-left -->

                        <div class="header-center">
                            <div class="header-search header-search-extended header-search-visible header-search-no-radius d-none d-lg-block">
                                <a href="#" class="search-toggle" role="button"><i class="icon-search"></i></a>
                                <form action="#" method="get">
                                    <div class="header-search-wrapper search-wrapper-wide">
                                        <label for="q" class="sr-only"><?= $this->Get_Lang->gl("Search", $langId) ?></label>
                                        <input type="search" class="form-control" name="q" id="q" placeholder="<?= $this->Get_Lang->gl("Search_product", $langId) ?>" required>
                                        <button class="btn btn-primary" type="submit"><i class="icon-search"></i></button>
                                    </div><!-- End .header-search-wrapper -->
                                </form>
                            </div><!-- End .header-search -->
                        </div>

                        <div class="header-right">
                            <div class="account">
                                <a href="dashboard.html" title="My account">
                                    <div class="icon">
                                        <i class="icon-user"></i>
                                    </div>
                                    <p><?= $this->Get_Lang->gl("Account", $langId) ?></p>
                                </a>
                            </div><!-- End .compare-dropdown -->

                            <div class="wishlist">
                                <a href="wishlist.html" title="Wishlist">
                                    <div class="icon">
                                        <i class="icon-heart-o"></i>
                                        <span class="wishlist-count badge">3</span>
                                    </div>
                                    <p><?= $this->Get_Lang->gl("Wishlist", $langId) ?></p>
                                </a>
                            </div><!-- End .compare-dropdown -->

                            <div class="dropdown cart-dropdown">
                                <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">
                                    <div class="icon">
                                        <i class="icon-shopping-cart"></i>
                                        <span class="cart-count">2</span>
                                    </div>
                                    <p><?= $this->Get_Lang->gl("Cart", $langId) ?></p>
                                </a>

                                <div class="dropdown-menu dropdown-menu-right">
                                    <div class="dropdown-cart-products">
                                        <div class="product">
                                            <div class="product-cart-details">
                                                <h4 class="product-title">
                                                    <a href="product.html">Beige knitted elastic runner shoes</a>
                                                </h4>

                                                <span class="cart-product-info">
                                                    <span class="cart-product-qty">1</span>
                                                    x $84.00
                                                </span>
                                            </div><!-- End .product-cart-details -->

                                            <figure class="product-image-container">
                                                <a href="product.html" class="product-image">
                                                    <img src="/public/front/assets/images/products/cart/product-1.jpg" alt="product">
                                                </a>
                                            </figure>
                                            <a href="#" class="btn-remove" title="Remove Product"><i class="icon-close"></i></a>
                                        </div><!-- End .product -->

                                        <div class="product">
                                            <div class="product-cart-details">
                                                <h4 class="product-title">
                                                    <a href="product.html">Blue utility pinafore denim dress</a>
                                                </h4>

                                                <span class="cart-product-info">
                                                    <span class="cart-product-qty">1</span>
                                                    x $76.00
                                                </span>
                                            </div><!-- End .product-cart-details -->

                                            <figure class="product-image-container">
                                                <a href="product.html" class="product-image">
                                                    <img src="/public/front/assets/images/products/cart/product-2.jpg" alt="product">
                                                </a>
                                            </figure>
                                            <a href="#" class="btn-remove" title="Remove Product"><i class="icon-close"></i></a>
                                        </div><!-- End .product -->
                                    </div><!-- End .cart-product -->

                                    <div class="dropdown-cart-total">
                                        <span><?= $this->Get_Lang->gl("Total", $langId) ?></span>

                                        <span class="cart-total-price">$160.00</span>
                                    </div><!-- End .dropdown-cart-total -->

                                    <div class="dropdown-cart-action">
                                        <a href="/cart" class="btn btn-primary"><?= $this->Get_Lang->gl("view_cart", $langId) ?></a>
                                        <a href="/checkout" class="btn btn-outline-primary-2"><span><?= $this->Get_Lang->gl("Checkout", $langId) ?></span><i class="icon-long-arrow-right"></i></a>
                                    </div><!-- End .dropdown-cart-total -->
                                </div><!-- End .dropdown-menu -->
                            </div><!-- End .cart-dropdown -->
                        </div><!-- End .header-right -->
                    </div><!-- End .container -->
                </div><!-- End .header-middle -->

                <div class="header-bottom sticky-header">
                    <div class="container">
                        <div class="header-left">
                            <div class="dropdown category-dropdown">
                                <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static" title="Browse Categories">
                                   <?= $this->Get_Lang->gl("browse_categories", $langId) ?>
                                </a>

                                <div class="dropdown-menu">
                                    <nav class="side-nav">
                                        <ul class="menu-vertical sf-arrows">
                                            <li class="item-lead"><a href="#">Daily offers</a></li>
                                            <li class="item-lead"><a href="#">Gift Ideas</a></li>
                                            <li><a href="#">Beds</a></li>
                                            <li><a href="#">Lighting</a></li>
                                            <li><a href="#">Sofas & Sleeper sofas</a></li>
                                            <li><a href="#">Storage</a></li>
                                            <li><a href="#">Armchairs & Chaises</a></li>
                                            <li><a href="#">Decoration </a></li>
                                            <li><a href="#">Kitchen Cabinets</a></li>
                                            <li><a href="#">Coffee & Tables</a></li>
                                            <li><a href="#">Outdoor Furniture </a></li>
                                        </ul><!-- End .menu-vertical -->
                                    </nav><!-- End .side-nav -->
                                </div><!-- End .dropdown-menu -->
                            </div><!-- End .category-dropdown -->
                        </div><!-- End .header-left -->

                        <div class="header-center">
                            <nav class="main-nav">
                                <ul class="menu sf-arrows">
                                    <li class="home_link megamenu-container">
                                        <a href="/" class=""><?= $this->Get_Lang->gl("home_page", $langId) ?></a>
                                    </li>
                                    <li class="about_link megamenu-container">
                                        <a href="/about" class=""><?= $this->Get_Lang->gl("about", $langId) ?></a>
                                    </li>
                                    <li class="category_link">
                                        <a href="/category" class="sf-with-ul"><?= $this->Get_Lang->gl("shop", $langId) ?></a>

                                        <div class="megamenu megamenu-md">
                                            <div class="row no-gutters">
                                                <div class="col-md-8">
                                                    <div class="menu-col">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="menu-title">Shop with sidebar</div><!-- End .menu-title -->
                                                                <ul>
                                                                    <li><a href="/category1">Shop List</a></li>
                                                                    <li><a href="/category2">Shop Grid 2 Columns</a></li>
                                                                    <li><a href="/category3">Shop Grid 3 Columns</a></li>
                                                                    <li><a href="/category4">Shop Grid 4 Columns</a></li>
                                                                    <li><a href="/category5"><span>Shop Market<span class="tip tip-new">New</span></span></a></li>
                                                                </ul>

                                                                <div class="menu-title">Shop no sidebar</div><!-- End .menu-title -->
                                                                <ul>
                                                                    <li><a href="/category6"><span>Shop Boxed No Sidebar<span class="tip tip-hot">Hot</span></span></a></li>
                                                                    <li><a href="/category1">Shop Fullwidth No Sidebar</a></li>
                                                                </ul>
                                                            </div><!-- End .col-md-6 -->

                                                            <div class="col-md-6">
                                                                <div class="menu-title">Product Category</div><!-- End .menu-title -->
                                                                <ul>
                                                                    <li><a href="/category2">Product Category Boxed</a></li>
                                                                    <li><a href="/category3"><span>Product Category Fullwidth<span class="tip tip-new">New</span></span></a></li>
                                                                </ul>
                                                                <div class="menu-title">Shop Pages</div><!-- End .menu-title -->
                                                                <ul>
                                                                    <li><a href="/cart">Cart</a></li>
                                                                    <li><a href="/checkout">Checkout</a></li>
                                                                    <li><a href="/wishlist">Wishlist</a></li>
                                                                    <li><a href="/dashboard">My Account</a></li>
                                                                    <li><a href="#">Lookbook</a></li>
                                                                </ul>
                                                            </div><!-- End .col-md-6 -->
                                                        </div><!-- End .row -->
                                                    </div><!-- End .menu-col -->
                                                </div><!-- End .col-md-8 -->

                                                <div class="col-md-4">
                                                    <div class="banner banner-overlay">
                                                        <a href="/category" class="banner banner-menu">
                                                            <img src="/public/front/assets/images/menu/banner-1.jpg" alt="Banner">

                                                            <div class="banner-content banner-content-top">
                                                                <div class="banner-title text-white">Last <br>Chance<br><span><strong>Sale</strong></span></div><!-- End .banner-title -->
                                                            </div><!-- End .banner-content -->
                                                        </a>
                                                    </div><!-- End .banner banner-overlay -->
                                                </div><!-- End .col-md-4 -->
                                            </div><!-- End .row -->
                                        </div><!-- End .megamenu megamenu-md -->
                                    </li>
                                    <li class="product_link">
                                        <a href="/product" class="sf-with-ul"><?= $this->Get_Lang->gl("products", $langId) ?></a>

                                        <div class="megamenu megamenu-sm">
                                            <div class="row no-gutters">
                                                <div class="col-md-6">
                                                    <div class="menu-col">
                                                        <div class="menu-title">Product Details</div><!-- End .menu-title -->
                                                        <ul>
                                                            <li><a href="/products1">Default</a></li>
                                                            <li><a href="/products2">Centered</a></li>
                                                            <li><a href="/products3"><span>Extended Info<span class="tip tip-new">New</span></span></a></li>
                                                            <li><a href="/products4">Gallery</a></li>
                                                            <li><a href="/products5">Sticky Info</a></li>
                                                            <li><a href="/products6">Boxed With Sidebar</a></li>
                                                            <li><a href="/products7">Full Width</a></li>
                                                            <li><a href="/products8">Masonry Sticky Info</a></li>
                                                        </ul>
                                                    </div><!-- End .menu-col -->
                                                </div><!-- End .col-md-6 -->

                                                <div class="col-md-6">
                                                    <div class="banner banner-overlay">
                                                        <a href="category.html">
                                                            <img src="/public/front/assets/images/menu/banner-2.jpg" alt="Banner">

                                                            <div class="banner-content banner-content-bottom">
                                                                <div class="banner-title text-white">New Trends<br><span><strong>spring 2019</strong></span></div><!-- End .banner-title -->
                                                            </div><!-- End .banner-content -->
                                                        </a>
                                                    </div><!-- End .banner -->
                                                </div><!-- End .col-md-6 -->
                                            </div><!-- End .row -->
                                        </div><!-- End .megamenu megamenu-sm -->
                                    </li>

                                    <li class="blog_link megamenu-container">
                                        <a href="/blog" class=""><?= $this->Get_Lang->gl("blog", $langId) ?></a>
                                    </li>
                                    <!--                                    <li class="megamenu-container">
                                                                            <a href="/faq" class=""><?= $this->Get_Lang->gl("faq", $langId) ?></a>
                                                                        </li>-->
                                    <li class="contact_link megamenu-container">
                                        <a href="/contact" class=""><?= $this->Get_Lang->gl("contact_us", $langId) ?></a>
                                    </li>

                                </ul><!-- End .menu -->
                            </nav><!-- End .main-nav -->
                        </div><!-- End .header-center -->

                        <div class="header-right">
                            <i class="la la-lightbulb-o"></i><p>Clearance<span class="highlight">&nbsp;Up to 30% Off</span></p>
                        </div>
                    </div><!-- End .container -->
                </div><!-- End .header-bottom -->
            </header><!-- End .header -->