:root {
  --nav-container-background: #fdf0cd;
  --nav-scrolled-container-background: #fdf0cd;
  --nav-modal-container-background: #fdf0cd;
  --nav-logo-max-width: 100%;
  --nav-logo-max-height: 251px;
  --nav-item-font-family: "ADLaM Display";
  --nav-item-font-size: 20px;
  --nav-item-font-weight: 500;
  --nav-item-padding: 10px 15px;
  --nav-item-text: #ed1c24;
  --nav-item-background: transparent;
  --nav-item-border-bottom: #cccccc;
  --nav-item-border-top: #a0a0a0;
  --nav-item-hover-text: #ed1c24;
  --nav-item-hover-background: transparent;
  --nav-item-hover-border-left: #333333;
  --nav-item-hover-border-right: transparent;
  --nav-modal-logo-max-width: 50%;
  --nav-modal-item-font-size: 18px;
  --nav-modal-item-font-weight: 700;
  --nav-modal-item-padding: 15px 20px;
  --nav-floating-logo-min-height: 75px;
  --nav-floating-logo-max-height: 75px;
  --nav-floating-logo-horizontal: 20px;
  --nav-floating-logo-vertical: 0;
}

/* ========== Base ========== */
#main {
 background: url("../images/background-img.png") no-repeat center center;
}
body {
  font-family: 'Alata', 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  background-size: cover;
  background-color: #fcf8ed;
}

body.scrolled .kcnavigation-container {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

body.scrolled .kcnavigation .logo img {
  max-height: var(--nav-floating-logo-max-height);
}

.container {
marging-top: 10px;
}

/* ========== Navigation ========== */
.kcnavigation-container {
  background: var(--nav-container-background);
  transition: all 150ms cubic-bezier(0.19, 1, 0.22, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0);
}

.kcnavigation .logo img {
  max-height: var(--nav-logo-max-height);
  max-width: var(--nav-logo-max-width);
  transition: all 150ms cubic-bezier(0.19, 1, 0.22, 1);
}

.kcnavigation a,
.kcnavigation-modal a {
  font-family: var(--nav-item-font-family);
  font-size: var(--nav-item-font-size);
  font-weight: var(--nav-item-font-weight);
  padding: var(--nav-item-padding);
  color: var(--nav-item-text);
  background: var(--nav-item-background);
  text-transform: uppercase;
}
.kcnavigation a:hover,
.kcnavigation-modal a:hover {
  color: #ed1c24;
}

/* Nav active links */
.nav .parentCategory.active > a,
.nav-pills > .active > a {
  color: #ed1c24;
}

/* ========== Typography ========== */
.top_heading_strip {
  color: #ed1c24;
  font-family: "ADLaM Display";
}

.content-header {
  font-family: "ADLaM Display";
  font-size: 25px;
  color: #ed1c24;
}

/* ========== Menu Grid ========== */
#menu .item_name {
  color: #000;
}

#menu .category_name {
  color: #ed1c24;
}

.menu-grid .item:hover {
  color: #fff;
  background-color: #ed1c24;
}
.basket-sections{
background-color:  var(--nav-container-background);
}

/* ========== Order Buttons ========== */
a:hover,
a:active {
  color: #ed1c24;
}
#menu-canvas > ng-include.menu-nav-container > div > ul > li > a {
  background-color: var(--nav-container-background);
}
.order-type-button {
  color: #000;
  /*border-color: #ed1c24;*/
  transform: scale(1.2);
  z-index: 2;
}

.order-type-button:hover span {
  color: #000;
  border-color: #ed1c24;
  background: #000;
  transform: scale(1.2);
  z-index: 2;
}

/* ========== Home Buttons ========== */
.home-buttons-grid,
.row-fluid { 
 background: var(--nav-container-background);
padding: 25px;
margin-top: 10px;
}
.home-buttons-grid .home-button-container:nth-of-type(1) .home-button,
.home-buttons-grid .home-button-container:nth-of-type(4) .home-button {
  background-color: #000;
  color: #fff;
}

.home-button-tag {
  opacity: 1;
  visibility: visible;
  display: inline-block;
}

.home-button-tag span {
  color: var(--home-button-text-color, #fff); /* fallback if undefined */
}
/* ========== MENU ITEMS CONTAINER ========== */

#menu-canvas > div.view-container > div > div.menu-categories-container > div:nth-child(1) > div.menu-categories-items-container >  a:hover {
background-color: var(--nav-item-text);
}
form {
    margin: 0 0 20px;
    background-color: #fdf0cd;
    padding: 10px;
}
#menu-canvas > div.view-container > div > div.menu-categories-container {
background-color: #fdf0cd;
    padding: 10px;
}

/* ========== Footer ========== */
footer {
  text-align: center;
  color: white;
  background: #000;
}