<?php
// We need to use sessions, so you should always start sessions using the below code.
session_start();

$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'custbahd_customassistname';
$DATABASE_PASS = 'Rwatangabo1son';
$DATABASE_NAME = 'custbahd_customassist';
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_errno()) {
  exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
// We don't have the password or email info stored in sessions so instead we can get the results from the database.
$stmt = $con->prepare('SELECT username, email, image FROM maryl_accounts ORDER BY id = ? ASC LIMIT 1');
// In this case we can use the account ID to get the account info.
$stmt->bind_param('i', $_SESSION['id']);
$stmt->execute();
$stmt->bind_result($username, $email, $image);
$stmt->fetch();
$stmt->close();

?>




<?php

require_once("../../db/dbcontroller.php");
$db_handle = new DBController();
if(!empty($_GET["action"])) {
switch($_GET["action"]) {
  case "add":
    if(!empty($_POST["quantity"])) {
      $productByCode = $db_handle->runQuery("SELECT * FROM shop WHERE code='" . $_GET["code"] . "'");
      $itemArray = array($productByCode[0]["code"]=>array('name'=>$productByCode[0]["name"], 'code'=>$productByCode[0]["code"], 'quantity'=>$_POST["quantity"], 'type'=>$productByCode[0]["type"], 'price'=>$productByCode[0]["price"], 'image'=>$productByCode[0]["image"]));
      $productByCode = $db_handle->runQuery("SELECT * FROM shop WHERE code='" . $_GET["code"] . "'");
      $itemArray = array($productByCode[0]["code"]=>array('name'=>$productByCode[0]["name"], 'code'=>$productByCode[0]["code"], 'quantity'=>$_POST["quantity"], 'type'=>$productByCode[0]["type"], 'price'=>$productByCode[0]["price"], 'image'=>$productByCode[0]["image"]));

      
      if(!empty($_SESSION["cart_item"])) {
        if(in_array($productByCode[0]["code"],array_keys($_SESSION["cart_item"]))) {
          foreach($_SESSION["cart_item"] as $k => $v) {
              if($productByCode[0]["code"] == $k) {
                if(empty($_SESSION["cart_item"][$k]["quantity"])) {
                  $_SESSION["cart_item"][$k]["quantity"] = 0;
                }
                $_SESSION["cart_item"][$k]["quantity"] += $_POST["quantity"];
              }
          }
        } else {
          $_SESSION["cart_item"] = array_merge($_SESSION["cart_item"],$itemArray);
        }
      } else {
        $_SESSION["cart_item"] = $itemArray;
      }
    }
  break;
  case "remove":
    if(!empty($_SESSION["cart_item"])) {
      foreach($_SESSION["cart_item"] as $k => $v) {
          if($_GET["code"] == $k)
            unset($_SESSION["cart_item"][$k]);        
          if(empty($_SESSION["cart_item"]))
            unset($_SESSION["cart_item"]);
      }
    }
  break;
  case "empty":
    unset($_SESSION["cart_item"]);
  break;  
}
}
?>


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Maryl House Accounts Profile</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,700;0,800;1,200;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
        <link href="lib/flaticon/font/flaticon.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="../../css/animate.css">
    
    <link rel="stylesheet" href="../../css/owl.carousel.min.css">
    <link rel="stylesheet" href="../../css/owl.theme.default.min.css">
    <link rel="stylesheet" href="../../css/magnific-popup.css">
    
    <link rel="stylesheet" href="../../css/flaticon.css">

    <link href="../../style.css" type="text/css" rel="stylesheet" />


    <!--Icons-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

      <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/animated-icons/icons/menu-arrow/menu-arrow.json">

      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">



    <!--Animations-->
    <link rel="stylesheet" type="text/css" href="../../css/Attention/blink.css">
    <link rel="stylesheet" type="text/css" href="../../css/Attention/bounce.css">
    <link rel="stylesheet" type="text/css" href="../../css/Attention/flicker.css">
    <link rel="stylesheet" type="text/css" href="../../css/Attention/jello.css">
    <link rel="stylesheet" type="text/css" href="../../css/Attention/pulsate.css">
    <link rel="stylesheet" type="text/css" href="../../css/Attention/shake.css">
    <link rel="stylesheet" type="text/css" href="../../css/Attention/vibrate.css">
    <link rel="stylesheet" type="text/css" href="../../css/Attention/wobble.css">
    <link rel="stylesheet" type="text/css" href="../../css/Background/background.css">
    <link rel="stylesheet" type="text/css" href="../../css/Bounce/bounce.css">
    <link rel="stylesheet" type="text/css" href="../../css/Text/blur-out.css">
    <link rel="stylesheet" type="text/css" href="../../css/Text/flicker-glow.css">
    <link rel="stylesheet" type="text/css" href="../../css/Text/focus-in.css">
    <link rel="stylesheet" type="text/css" href="../../css/Text/tracking-in.css">
    <link rel="stylesheet" type="text/css" href="../../css/Text/tracking-out.css">
    <link rel="stylesheet" href="../../css/style.css">


    <style type="text/css">
.wrap {
  position: relative;
  z-index: 0;
  width: 100%;
  background: dodgerblue;
}

.btn {
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 500; }
  .btn:hover, .btn:active, .btn:focus {
    outline: none; }
  .btn.btn-primary {
    background: dodgerblue !important;
    border: 1px solid dodgerblue !important;
    color: #fff !important; }
    .btn.btn-primary:hover {
      border: 1px solid dodgerblue;
      background: transparent;
      color: #b7472a; }
    .btn.btn-primary.btn-outline-primary {
      border: 1px solid #b7472a;
      background: transparent;
      color: #b7472a; }
      .btn.btn-primary.btn-outline-primary:hover {
        border: 1px solid transparent;
        background: dodgerblue;
        color: #fff; }
  .btn.btn-white {
    background: #fff !important;
    border: 1px solid #fff !important;
    color: #000000 !important; }
    .btn.btn-white:hover {
      border: 1px solid #b7472a;
      background: transparent;
      color: #b7472a; }
    .btn.btn-white.btn-outline-white {
      border: 1px solid white !important;
      background: transparent !important;
      color: #fff !important; }
      .btn.btn-white.btn-outline-white:hover {
        border: 1px solid dodgerblue !important;
        background: dodgerblue !important;
        color: #fff !important; }


.ftco-intro {
  background: black; }
  .ftco-intro .intro {
    z-index: 0;
    position: relative; }


/*Category/Sort image*/
.sort .img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin: 0 auto;
  margin-bottom: 20px;
  position: relative;
  z-index: 0; }
  .sort .img:after {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    content: '';
    border: 1px solid dodgerblue;
    z-index: -1;
    border-radius: 50%;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -ms-transition: all 0.6s ease;
    transition: all 0.6s ease; }
  .sort .img:hover:after {
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.4); }


/*******************************/
/******** Carousel CSS *********/
/*******************************/
.carousel {
    position: relative;
    width: 100%;
    min-height: 400px;
    max-height: 800px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.carousel .carousel-inner,
.carousel .carousel-item {
    position: relative;
    width: 100%;
    height: 100%;
    
}

.carousel .carousel-item::after {
    position: absolute;
    content: "";
    width: 100%;
    min-height: 400px;
    max-height: 800px;
    top: 0;
    left: 0;
    
}

.carousel .carousel-caption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 90%;
    height: 100%;
    border-radius: 10px;
    border-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.4);  
    z-index: 1; 
}

.carousel-caption p {
    margin-top: 15%;
    font-size: 50px;
      color: white;
      font-weight: 700;
      font-style: italic;
      width: 100%;
}

.carousel .carousel-caption h1 {
    color: #ffffff;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 100px;
}

.carousel .carousel-caption .btn {
    padding: 15px 35px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: dodgerblue;
    background: transparent;
    border: 2px solid #ffffff;
    border-radius: 0;
    transition: .3s;
}

.carousel .carousel-caption .btn:hover {
    color: #030f27;
    background: #fdbe33;
    border-color: #fdbe33;
}

@media (max-width: 767.98px) {
    .carousel .carousel-caption h1 {
        font-size: 40px;
        font-weight: 700;
    }
    
    .carousel .carousel-caption p {
        font-size: 50px;
    }
    
    .carousel .carousel-caption .btn {
        padding: 12px 30px;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: 0;
    }  

}

@media (max-width: 575.98px) {
    .carousel .carousel-caption h1 {
        font-size: 30px;
        font-weight: 500;
    }
    
    .carousel .carousel-caption p {
        font-size: 50px;
    }
    
    .carousel .carousel-caption .btn {
        padding: 10px 25px;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0;
    }
}

.carousel .animated {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
}


.carousel .carousel-item img {
  width: 90%;
  min-height: 400px;
    max-height: 800px;
    border-radius: 10px;
    
}

/*Carousel end*/


/*ftco*/
.ftco-section {
  padding: 6em 0;
  position: relative; }
  @media (max-width: 700px) {
    .ftco-section {
      padding: 6em 0; } }

.ftco-no-pt {
  padding-top: 0; }

.ftco-no-pb {
  padding-bottom: 0; 
}

.cat {
  margin-left: 5%;
}




/*Image text two*/
.image-text-two {
  font-weight: bold;
  position: absolute;
  color: white;
  text-align: center;
  width: 100%;
  min-height: 100%;
  max-height: 100%;
  top: 0;
  left: 0;
  font-size: 92px;
  padding: 30px 0;
  border-color: rgba(0, 0, 0, 0.3);
    background: rgba(0, 0, 0, 0.4);
}

.image-text-two > h2 {
    margin-top: 5%;
    font-size: 60px;
    letter-spacing: 0;
    text-transform: uppercase;
    -webkit-text-fill-color: white;
    color: white;
}

.image-text-two h6 {
    margin-top: 20%;
    font-size: 80px;
      color: white;
      line-height: 1.1;
      font-weight: 700;
      font-style: italic;
}

.image-text-two h5 {
    color: #fff;
    font-size: 25px;
    margin-top: -10px;
}
    
.image-text-two a {
  background: dodgerblue;
  border-radius: 10px;

    color: white;
    
}



/*Dropdown item*/
.dropdown-item {
  display: block;
  margin-left: 20px;
  clear: both;
  font-weight: 400;
  color: white;
  white-space: nowrap;
  border: 0; 
}

 .dropdown-item i {
  margin-right: 20px;
 }
  
  .dropdown-item:first-child {
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px); }
  .dropdown-item:last-child {
    border-bottom-right-radius: calc(0.25rem - 1px);
    border-bottom-left-radius: calc(0.25rem - 1px); }
  .dropdown-item:hover, .dropdown-item:focus {
    color: dodgerblue;
    text-decoration: none; }
  .dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #007bff; }
  .dropdown-item.disabled, .dropdown-item:disabled {
    color: #6c757d;
    pointer-events: none;
    background-color: transparent; }



.dropdown-item input[type=text] {
  float: left;
  margin-left:-10px;
  width: 70%;
  padding: 5px 15px;
  border: 1px solid dodgerblue;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  outline: none;
}


.dropdown-item input[type=submit] {
  float: left;
  padding: 5px 15px;
  border: 1px solid;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}



/*Product item*/

form input[type=submit] {
  background: dodgerblue;
  color: white;
}

/*Dropdown*/
.navbar1 {
  overflow: hidden;
  color: dodgerblue;
  background-color: none;   
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}

.navbar1 a {
  float: left;
  font-size: 16px;
  color: dodgerblue;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.subnav1 {
  float: left;
  overflow: hidden;
}

.subnav1 .subnavbtn1 {
  font-size: 16px;  
  border: none;
  outline: none;
  color: dodgerblue;
  padding: 8px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar1 a:hover, .subnav1:hover .subnavbtn1 {
  color: black;
}

.subnav-content1 {
  display: none;
  position: absolute;
  left: 0;
  background-color: red;
  width: 100%;
  z-index: 1;
}

.subnav-content1 a {
  float: left;
  color: white;
  text-decoration: none;
}

.subnav-content1 a:hover {
  background-color: #eee;
  color: black;
}

.subnav1:hover .subnav-content1 {
  display: block;
}




/*Product*/
#pdt_img {
  height: 100%;
}

#pdt_img img{
  width: 100%;
  height: 100%;
  border: 0px;
  border-radius: 8px;
}

#pdt_text {
  
}

.product {
  width: 100%;
  display: block;
  margin-bottom: 40px;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease; }

  .product img {
    display: block;
    border-radius: 4px;
    min-height: 350px;
    max-height: 550px;
    position: relative;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 0; }
    .product .img:after {
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      content: '';
      background: #000000;
      opacity: 0;
      border-radius: 4px;
      -moz-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      -webkit-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
      transition: all 0.6s ease; }
    .product .img .desc {
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      -webkit-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
      transition: all 0.3s ease;
      opacity: 0; }
      .product .img .desc .meta-prod a {
        margin: 0 2px;
        width: 60px;
        height: 60px;
        border: 1px solid rgba(255, 255, 255, 0.5); }
        .product .img .desc .meta-prod a span {
          color: #fff; }
  .product .text {
    padding: 20px;
    position: relative; }
    .product .text .sale, .product .text .seller, .product .text .new {
      position: absolute;
      top: -200%;
      left: 4px;
      font-size: 12px;
      padding: 0 10px;
      color: #fff;
      border-radius: 10px;
      border: 1px solid rgba(255, 255, 255, 0.5);
    }
    .product .text .sale {
      background: dodgerblue; }
    .product .text .seller {
      color: black;
      background: skyblue; }
    .product .text .new {
      background: #01d28e; }
    .product .text h2 {
      font-size: 22px;
      text-transform: capitalize;
      font-weight: 300; }
    .product .text .category {
      font-style: italic;
      color: dodgerblue; }
    .product .text .price {
      font-style: italic;
      color: #000000; }
      .product .text .price.price-sale {
        color: #cccccc;
        text-decoration: line-through; }
  

.product-select {
  font-size: 18px; }

.bootstrap-select .bs-ok-default:after {
  color: dodgerblue;
  font-size: 12px;
  margin-top: 5px; }

.prod-img-bg {
  background: #fff;
  -webkit-box-shadow: inset 0px 0px 101px 21px rgba(0, 0, 0, 0.09);
  -moz-box-shadow: inset 0px 0px 101px 21px rgba(0, 0, 0, 0.09);
  box-shadow: inset 0px 0px 101px 21px rgba(0, 0, 0, 0.09);
  height: 100%;
  display: block; }

.product-details h3 {
  font-size: 30px;
  font-weight: 400; }

.product-details .price span {
  font-size: 30px;
  color: #000000; }

.product-details button i {
  color: #000000; }

.product-details .quantity-left-minus {
  background: transparent;
  padding: 0 15px; }

.product-details .quantity-right-plus {
  background: transparent;
  padding: 0 15px; }

.product-details button, .product-details .form-control {
  height: 40px !important;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: dodgerblue;
  padding: 10px 20px;
  background: transparent !important;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
  font-size: 14px; }
  .product-details button:hover, .product-details button:focus, .product-details .form-control:hover, .product-details .form-control:focus {
    text-decoration: none;
    outline: none; }

.product-details .form-group {
  position: relative; }
  .product-details .form-group .form-control {
    padding-right: 40px;
    color: #000000;
    background: transparent !important; }
    .product-details .form-group .form-control::-webkit-input-placeholder {
      /* Chrome/Opera/Safari */
      color: #4d4d4d; }
    .product-details .form-group .form-control::-moz-placeholder {
      /* Firefox 19+ */
      color: #4d4d4d; }
    .product-details .form-group .form-control:-ms-input-placeholder {
      /* IE 10+ */
      color: #4d4d4d; }
    .product-details .form-group .form-control:-moz-placeholder {
      /* Firefox 18- */
      color: #4d4d4d; }
  .product-details .form-group .icon {
    position: absolute;
    top: 50%;
    right: 20px;
    font-size: 14px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #000000; }
    .product-details .form-group .icon span {
      color: #000000; }
    @media (max-width: 767.98px) {
      .product-details .form-group .icon {
        right: 10px; } }
  .product-details .form-group .select-wrap {
    position: relative; }
    .product-details .form-group .select-wrap select {
      font-size: 13px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      text-transform: uppercase;
      letter-spacing: 2px; }



.quantity1 {
  padding: 5px 5px;
  border: 0px solid dodgerblue;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.quantity {
  padding: 5px 5px;
  border: 1px solid dodgerblue;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.seller1 { 
   position: absolute;
   margin-top: -30px;
}

.text-center input[type=submit] {
  padding: 5px 15px;
  border: 0px solid;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}




/*Info slide*/
.welcome_area {
  
}



.single_slide {
    position: relative;
    padding: 30px;
    z-index: 1;
}

.info-text {
  font-weight: bold;
  position: absolute;
  color: white;
  text-align: center;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  font-size: 92px;
  text-transform: uppercase;

    background-color: rgba(23, 24, 24, 0.7);
}

.info-text > h2 {
    font-size: 60px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: white;
}

.info-text h6 {
    margin-top: 20px;
    font-size: 14px;
    color: white;
}

.info-text h5 {
    color: white;
    font-size: 25px;
    margin-top: -10px;
}
    
.info-text a {
    color: white;
    
}

.head {
    text-align: center;
    color: purple;
    width: 100%;
}


.welcome_area .owl-carousel {
  position: relative; 
}

 .welcome_area .owl-carousel .owl-item {
    opacity: .4; 
  }

 .welcome_area   .owl-carousel .owl-item.active {
      opacity: 1; 
}

 .welcome_area .owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%; 
  }

   .welcome_area .owl-carousel .owl-nav .owl-prev,
    .owl-carousel .owl-nav .owl-next {
      position: absolute;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      margin-top: -10px;
      -moz-transition: all 0.7s ease;
      -o-transition: all 0.7s ease;
      -webkit-transition: all 0.7s ease;
      -ms-transition: all 0.7s ease;
      transition: all 0.7s ease;
      opacity: 0; 
    }

   .welcome_area   .owl-carousel .owl-nav .owl-prev span:before,
      .owl-carousel .owl-nav .owl-next span:before {
        font-size: 30px; 
  }

  .welcome_area  .owl-carousel .owl-nav .owl-prev {
      left: 0;
   }

  .welcome_area  .owl-carousel .owl-nav .owl-next {
      right: 0; 
    }

 .welcome_area .owl-carousel .owl-dots {
    text-align: center; 
  }

   .welcome_area .owl-carousel .owl-dots .owl-dot {
      width: 10px;
      height: 10px;
      margin: 5px;
      border-radius: 50%;
      background: none;
      position: relative; 
    }

     .welcome_area .owl-carousel .owl-dots .owl-dot:after {
        position: absolute;
        top: -2px;
        left: -2px;
        right: 0;
        bottom: 0;
        width: 14px;
        height: 14px;
        content: '';
        border: 0px solid dodgerblue;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%; 
      }

     .welcome_area .owl-carousel .owl-dots .owl-dot.active {
        background: skyblue; 
      }

 .welcome_area .owl-carousel:hover .owl-nav .owl-prev,
  .owl-carousel:hover .owl-nav .owl-next {
    opacity: 1; 
  }

 .welcome_area .owl-carousel:hover .owl-nav .owl-prev {
    left: -25px; 
  }

 .welcome_area .owl-carousel:hover .owl-nav .owl-next {
    right: -25px; 
  }



/*Brands carousels*/
 
.brands .owl-carousel {
  position: relative; 
}

 .brands .owl-carousel .owl-item {
    opacity: .4; 
  }

 .brands   .owl-carousel .owl-item.active {
      opacity: 1; 
}

 .brands .owl-carousel .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%; 
  }

   .brands .owl-carousel .owl-nav .owl-prev,
    .owl-carousel .owl-nav .owl-next {
      position: absolute;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      margin-top: -10px;
      -moz-transition: all 0.7s ease;
      -o-transition: all 0.7s ease;
      -webkit-transition: all 0.7s ease;
      -ms-transition: all 0.7s ease;
      transition: all 0.7s ease;
      opacity: 0; 
    }

   .brands   .owl-carousel .owl-nav .owl-prev span:before,
      .owl-carousel .owl-nav .owl-next span:before {
        font-size: 30px; 
  }

  .brands  .owl-carousel .owl-nav .owl-prev {
      left: 0;
   }

  .brands  .owl-carousel .owl-nav .owl-next {
      right: 0; 
    }

 .brands .owl-carousel .owl-dots {
    text-align: center; 
  }

   .brands .owl-carousel .owl-dots .owl-dot {
      width: 10px;
      height: 10px;
      margin: 5px;
      border-radius: 50%;
      background: none;
      position: relative; 
    }

     .brands .owl-carousel .owl-dots .owl-dot:after {
        position: absolute;
        top: -2px;
        left: -2px;
        right: 0;
        bottom: 0;
        width: 14px;
        height: 14px;
        content: '';
        border: 0px solid dodgerblue;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%; 
      }

     .brands .owl-carousel .owl-dots .owl-dot.active {
        background: skyblue; 
      }

 .brands .owl-carousel:hover .owl-nav .owl-prev,
  .owl-carousel:hover .owl-nav .owl-next {
    opacity: 1; 
  }

 .brands .owl-carousel:hover .owl-nav .owl-prev {
    left: -25px; 
  }

 .brands .owl-carousel:hover .owl-nav .owl-next {
    right: -25px; 
  }



</style>


  </head>
  <body>


    <div class="wrap">
      <div class="container">
        <div class="row">
          
          <div class="col-md-6 d-flex justify-content-md-end">
            <div class="social-media mr-4">
              <p class="mb-0 d-flex">
                <a href="https://facebook.com" class="d-flex align-items-center justify-content-center"><span class="fa fa-facebook"><i class="sr-only">Facebook</i></span></a>
                <a href="https://instagram.com" class="d-flex align-items-center justify-content-center"><span class="fa fa-instagram"><i class="sr-only">Twitter</i></span></a>
                <a href="https://twitter.com" class="d-flex align-items-center justify-content-center"><span class="fa fa-twitter"><i class="sr-only">Instagram</i></span></a>
                <a href="https://whatsapp.com" class="d-flex align-items-center justify-content-center"><span class="fa fa-whatsapp"><i class="sr-only">WhatsApp</i></span></a>
              </p>
            </div>
            <div class="reg">
            
            <?php
                require_once('../db.php');
                $result = $conn->prepare("SELECT * FROM maryl_accounts ORDER BY id LIMIT 1");
                $result->execute();
                for($i=0; $row = $result->fetch(); $i++){
                $id=$row['id'];
              ?>
                <p class="mb-0">
                  <?php if($_SESSION['name'] != ""): ?>
                <a href="profile"> <?php echo $_SESSION['name']; ?> </a>
                 <a href="../logout.php"><i class="fas fa-sign-out-alt"></i> </a>
                  <?php else: ?>
                 <a href="../login">Login</a> | <a href="../register">Register</a> 
                  <?php endif; ?>
                
                    </p>                           
                    
                <?php } ?>
            
              
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
      <div class="container">
        <a class="navbar-brand" href="../../index.php">Maryl <span>House</span> </a>




<div class="order-lg-last btn-group">

          <a href="#" class="dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

            <i class="fa fa-search"> </i>
            
          </a>
          <div class="dropdown-menu dropdown-menu-right">


            <div class="dropdown-item d-flex align-items-start" href="#">
              
              <form action="../../search/index.php" method="post">
        <input type="text" name="valueToSearch" placeholder="Wines, Liquors, Beers..">
        <input type="submit" name="search" value="Search">
        </form>

            </div>          
            

          </div>
        </div>





 <!--Shopping cart-->

        <!--Cart icon start-->
<?php
if(isset($_SESSION["cart_item"])){
    $total_quantity = 0;
    $total_price = 0;
?>  

<?php   
    foreach ($_SESSION["cart_item"] as $item){
        $item_price = $item["quantity"]*$item["price"];
    ?>
        
        <?php
        $total_quantity += $item["quantity"];
        $total_price += ($item["price"]*$item["quantity"]);
    }
    ?>

<!--Cart icon with quantity start-->
        <div class="order-lg-last btn-group">

          <a href="#" class="btn-cart dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="flaticon-shopping-bag"></span>
            <div class="d-flex justify-content-center align-items-center"><small><?php echo $total_quantity; ?></small></div>
          </a>

          <div class="dropdown-menu dropdown-menu-right">


<div class="dropdown-item">
<a href="../../cart">Proceed <span class="ion-ios-arrow-round-forward"></span></a>

<a href="index.php?action=empty" style="float:right;color:#d00000">Empty Cart</a> </div>

            <div class="dropdown-item" href="#">


<?php
if(isset($_SESSION["cart_item"])){
    $total_quantity = 0;
    $total_price = 0;
?>  



<?php   
    foreach ($_SESSION["cart_item"] as $item){
        $item_price = $item["quantity"]*$item["price"];
    ?>

        <div style="margin-left:-30px"><?php echo "<img src='../../admin/shop/images/".$item['image']."' width='30%'>"; ?></div>
              <div class="" style="float: right;margin-top:-80px;">
                <b text-align="center"><?php echo $item["name"]; ?></b>
  <p class="mb-0"><span class="quantity1 ml-3">Quantity: <?php echo $item["quantity"]; ?> <span style="color:#d00000">*</span> <?php echo "UGX ".number_format ($item["price"]); ?></span> <br>
    <a href="#" class="price"> <span style="color:#d00000">TOTAL:</span> <strong><?php echo "UGX ".number_format($item_price); ?></strong></a> 
  <a href="index.php?action=remove&code=<?php echo $item["code"]; ?>" class="btnRemoveAction"><img src="../../icon-delete.png" alt="Remove Item" /></a></p>
              </div> <hr>
            

<?php
        $total_quantity += $item["quantity"];
        $total_price += ($item["price"]*$item["quantity"]);
    }
    ?>

</div> </div>


<?php
} else {
?>
<div class="no-records">Your Cart is Empty <a href="../../shop"> Start Shopping</a></div>
<?php 
}
?>

 </div> 



        
<!--Cart icon with quantity end-->


<?php
} else {
?>

<!--Cart icon without quantity-->


<div class="order-lg-last btn-group">

          <a href="#" class="btn-cart dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="flaticon-shopping-bag"></span>
          </a>
          <div class="dropdown-menu dropdown-menu-right">


            <div class="dropdown-item d-flex align-items-start" href="#">
              
              <i>Your Cart is Empty</i> <a href="../../shop">Start Shopping</a>
            </div>          
            

          </div>
        </div>








<!--Cart icon without quantity end-->

<?php 
}
?>


<!--Shopping Cart icon end-->







<!--Responsive menu-->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="oi oi-menu"></span> Menu
        </button>

        <div class="collapse navbar-collapse" id="ftco-nav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active"><a href="../../index.php" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="../../shop" class="nav-link">Shop</a></li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Categories</a>
              <div class="dropdown-menu" aria-labelledby="dropdown04" style="
  background: rgba(0, 0, 0, 0.4);">
                <a class="dropdown-item" href="../../category/wine/">Wine</a>
                <a class="dropdown-item" href="../../category/gin/">Gin</a>
                <a class="dropdown-item" href="../../category/vodka/">Vodka</a>
                <a class="dropdown-item" href="../../category/liquer/">Liquer</a>
                <a class="dropdown-item" href="../../category/tequila/">Tequila</a>
                <a class="dropdown-item" href="../../category/rum/">Rum</a>
                <a class="dropdown-item" href="../../category/whiskey/">Whiskey</a>
              </div>
            </li>
            <li class="nav-item"><a href="../../about" class="nav-link">About</a></li>
            <li class="nav-item"><a href="../../contact" class="nav-link">Contact</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- END nav -->
    
    
    <div class="hero-wrap" style="background-image: url('../../images/bg_4.jpg');" data-stellar-background-ratio="0.5">
      <div class="overlay"></div>
      <div class="container">
        <div class="row no-gutters slider-text align-items-center justify-content-center">
          <div class="col-md-8 ftco-animate d-flex align-items-end">
            <div class="text w-100 text-center">
              <h1 class="mb-4">Contact <span>Us</span>.</h1>
              <p><a href="../../shop" class="btn btn-primary py-2 px-4">Go To Shelf</a> </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <section class="ftco-section bg-light">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-md-12">
						<div class="wrapper px-md-4">
							<div class="row mb-5">
								<div class="col-md-3">
									<div class="dbox w-100 text-center">
				        		<div class="icon d-flex align-items-center justify-content-center">
				        			<img src="../image/default.png" width="100px" height="100px"> <br> 
				        		</div>
				        		<div class="text">
					            <p><span>Name:</span> <?php echo $_SESSION['name']; ?></p>
					          </div>
				          </div>
								</div>
								<div class="col-md-3">
									<div class="dbox w-100 text-center">
				        		<div class="icon d-flex align-items-center justify-content-center">
				        			<span class="fa fa-phone"></span>
				        		</div>
				        		<div class="text">
					            <p><span>Phone:</span> <a href="tel://1234567920">+256 0000 000 000</a></p>
					          </div>
				          </div>
								</div>
								<div class="col-md-3">
									<div class="dbox w-100 text-center">
				        		<div class="icon d-flex align-items-center justify-content-center">
				        			<span class="fa fa-paper-plane"></span>
				        		</div>
				        		<div class="text">
					            <p><span>Email:</span> <a href="mailto:info@yoursite.com"><?=$email;?></a></p>
					          </div>
				          </div>
								</div>
								<div class="col-md-3">
									<div class="dbox w-100 text-center">
				        		<div class="icon d-flex align-items-center justify-content-center">
				        			<span class="fa fa-globe"></span>
				        		</div>
				        		<div class="text">
					            <p><span>Website</span> <a href="#">https://marylhouse.com</a></p>
					          </div>
				          </div>
								</div>
							</div>
							<div class="row no-gutters">
								<div class="col-md-7">
									<div class="contact-wrap w-100 p-md-5 p-4">
										<h3 class="mb-4">Contact Us</h3>
										<form method="POST" id="contactForm" name="contactForm" class="contactForm">
											<div class="row">
												<div class="col-md-6">
													<div class="form-group">
														<label class="label" for="name">Full Name</label>
														<input type="text" class="form-control" name="name" id="name" placeholder="Name">
													</div>
												</div>
												<div class="col-md-6"> 
													<div class="form-group">
														<label class="label" for="email">Email Address</label>
														<input type="email" class="form-control" name="email" id="email" placeholder="Email">
													</div>
												</div>
												<div class="col-md-12">
													<div class="form-group">
														<label class="label" for="subject">Subject</label>
														<input type="text" class="form-control" name="subject" id="subject" placeholder="Subject">
													</div>
												</div>
												<div class="col-md-12">
													<div class="form-group">
														<label class="label" for="#">Message</label>
														<textarea name="message" class="form-control" id="message" cols="30" rows="4" placeholder="Message"></textarea>
													</div>
												</div>
												<div class="col-md-12">
													<div class="form-group">
														<input type="submit" value="Send Message" class="btn btn-primary">
														<div class="submitting"></div>
													</div>
												</div>
											</div>
										</form>
									</div>
								</div>
								<div class="col-md-5 order-md-first d-flex align-items-stretch">
									<div id="map" class="map"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

    <footer class="ftco-footer">
      <div class="container">
        <div class="row mb-5">
          <div class="col-sm-12 col-md">
            <div class="ftco-footer-widget mb-4">
              <h2 class="ftco-heading-2 logo"><a href="#">Maryl Wine & Liqour House</a></h2>
             
              <ul class="ftco-footer-social list-unstyled mt-2">
                
                <li class="ftco-animate"><a href="https://facebook.com"><span class="fa fa-facebook" style="color: dodgerblue;font-size: 20px;"></span></a></li>
                <li class="ftco-animate"><a href="https://instagram.com"><span class="fa fa-instagram" style="color: dodgerblue;font-size: 20px;"></span></a></li>
                <li class="ftco-animate"><a href="https://twitter.com"><span class="fa fa-twitter" style="color: dodgerblue;font-size: 20px;"></span></a></li>
                <li class="ftco-animate"><a href="https://whatsapp.com"><span class="fa fa-whatsapp" style="color: dodgerblue;font-size: 20px;"></span></a></li>
              </ul>
            </div>
          </div>
          
          <div class="col-sm-12 col-md">
            <div class="ftco-footer-widget mb-4 ml-md-4">
              <h2 class="ftco-heading-2">Information</h2>
              <ul class="list-unstyled">
                <li><a href="../../about"><span class="fa fa-chevron-right mr-2"></span>About us</a></li>
                <li><a href="../../terms"><span class="fa fa-chevron-right mr-2"></span>Terms of use</a></li>
                <li><a href="../../privacy"><span class="fa fa-chevron-right mr-2"></span>Privacy</a></li>
                <li><a href="../../blog"><span class="fa fa-chevron-right mr-2"></span>Blog</a></li>
              </ul>
            </div>
          </div>
         
          <div class="col-sm-12 col-md" style="float: left;">
            <div class="ftco-footer-widget mb-4">
              <h2 class="ftco-heading-2">Contact Information</h2>
              <div class="block-23 mb-3">
                <ul>
                  <li><span class="icon fa fa-map marker"></span><span class="text">Kampala, Uganda</span></li>
                  <li><a href="tel:256392392210"><span class="icon fa fa-phone"></span><span class="text">+256 392 3929 210</span></a></li>
                  <li><a href="mailto:info@marylhouse.com"><span class="icon fa fa-paper-plane pr-4"></span><span class="text">info@marylhouse.com</span></a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container-fluid px-0 py-5 bg-black">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
    
              <p class="mb-0" style="color: rgba(255,255,255,.5);">
    Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | <a href="#" target="_blank">Maryl Wine & Liqour House</a>
    </p> <br>

    <p class="mb-0" style="color: rgba(255,255,255,.5);">
    Powered by | <a href="https://customassistinc.com" target="_blank">Custom Assist Inc.</a>
    </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
    
  

  <!-- loader -->
  <div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"/><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"/></svg></div>


  <script src="../../js/jquery.min.js"></script>
  <script src="../../js/jquery-migrate-3.0.1.min.js"></script>
  <script src="../../js/popper.min.js"></script>
  <script src="../../js/bootstrap.min.js"></script>
  <script src="../../js/jquery.easing.1.3.js"></script>
  <script src="../../js/jquery.waypoints.min.js"></script>
  <script src="../../js/jquery.stellar.min.js"></script>
  <script src="../../js/owl.carousel.min.js"></script>
  <script src="../../js/jquery.magnific-popup.min.js"></script>
  <script src="../../js/jquery.animateNumber.min.js"></script>
  <script src="../../js/scrollax.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
  <script src="../../js/google-map.js"></script>
  <script src="../../js/main.js"></script>
    
  </body>
</html>