/* ===============================
   HEADER BASE
================================= */
header.buiness-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  isolation: isolate;
  transition: .4s all;
}

header.buiness-header.header-sticky,
.inner-header {
  background: #fff;
}

header .navbar-brand {
  max-width: 120px;
}

.header-sticky .navbar-brand {
  max-width: 120px;
}

/* ===============================
   NAVIGATION
================================= */
header nav {
  padding-block: 0;
  justify-content: space-between;
  position: relative;
  align-items: center;
  transition: .4s all;
}


header.header-sticky nav {
  padding-block: 1rem;
}

header nav .nav-right {
  display: flex;
  align-items: center;
  column-gap: 5rem;
  margin-top: 0;
}

header nav .menubar {
  display: flex;
  column-gap: 2.7em;
  margin-bottom: 0;
}

.buiness-header nav .menubar li {
  position: relative;
}

/* ===============================
   MENU LINKS
================================= */
.menu-link {
  display: flex;
  padding-block: .5em;
  column-gap: .69em;
  align-items: center;
  font-size: var(--text-16);
  color: #fff;
  position: relative;
}

.menu-item:hover .menu-link {
  color: var(--color-secondary);
}

header .menu-item > a > span {
  color: #fff;
  font-size: var(--text-12);
}

header.buiness-header.header-sticky .menu-item > a > span,
.inner-header .menu-item > a > span {
  color: #231f27;
}

/* Dropdown arrow */
.has-submenu .menu-link::after {
  content: '';
  width: .73em;
  height: .45em;
  background: url(../images/down-angle.svg) no-repeat center;
  background-size: contain;
  filter: brightness(0) invert(1);
  transition: .4s all;
}

.menu-item:hover .menu-link::after {
  filter: none;
}

/* Divider after last menu item */
header nav .menubar .menu-item:last-child .menu-link::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 2.5rem);
  height: 70%;
  width: .1em;
  background: #fff;
  opacity: .39;
  transform: translate(-50%, -50%);
}

/* ===============================
   STICKY HEADER STYLES
================================= */
header.header-sticky .menu-link:after {
  filter: brightness(0);
}

header.header-sticky .hamburger span {
  background: var(--color-black);
}

header.buiness-header.header-sticky svg path,
header.buiness-header.header-sticky svg circle,
header.buiness-header.header-sticky svg line,
.inner-header svg path,
.inner-header svg circle,
.inner-header svg line {
  stroke: #ec3237;
}

/* ===============================
   BUSINESS MENU
================================= */
.buiness-menu {
  border-top: 1px solid rgb(255 255 255 / 9%);
  border-bottom: 1px solid rgb(255 255 255 / 9%);
  padding: 1.5rem 0;
}

header.header-sticky .buiness-menu {
  padding-block: 1rem;
}

header.buiness-header.header-sticky .buiness-menu,
.inner-header .buiness-menu {
  border-top: 1px solid rgb(159 159 159 / 9%);
  border-bottom: 1px solid rgb(159 159 159 / 9%);
}

.buiness-menu ul {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
  padding-left: 0;
}

.buiness-menu ul li a {
  color: #fff;
  font-size: var(--text-15);
  font-weight: 200;
  padding: 5px 11px;
}

.buiness-menu ul li a:hover,
header.buiness-header.header-sticky .buiness-menu ul li a:hover {
  background: #ec3237;
  border-radius: 5px;
  color: #fff;
}

header.buiness-header.header-sticky .buiness-menu ul li a,
.inner-header .buiness-menu ul li a {
  color: #231f27;
}

/* ===============================
   SEARCH INPUT
================================= */
.input-elevated {
  font-size: 15px;
  font-style: italic;
  border: none;
  border-radius: 6px;
  width: 223px;
  padding: .5em 1em .5em 2.5em;
  background: #1c1c1c url(../images/search.svg) no-repeat 10px 9px;
  background-size: 15px;
}

.input-elevated:focus {
  outline: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.16);
}

header:not(.inner-header) .input-elevated {
  background-color: #fff;
  color: var(--color-dark);
}

header.buiness-header.header-sticky .input-elevated,
.inner-header .input-elevated {
  background: #f5f5f5 url(../images/red-search.svg) no-repeat 10px 10px;
  border: 1px solid #ec3237;
}

/* ===============================
   CART
================================= */
.cart-add {
  position: absolute;
  right: -10px;
  top: 3px;
  text-align: center;
}

.cart-add p {
  width: 20px;
  height: 20px;
  font-size: 11px;
  border-radius: 100%;
  background: #ec3237;
  border: 2px solid #000;
  color: #fff;
}

header.buiness-header.header-sticky .cart-add p,
.inner-header .cart-add p {
  border: 2px solid #ec3237;
}

/* ===============================
   INNER HEADER
================================= */
.inner-header ~ main {
  margin-top: 10.5em;
}

.inner-header .dropdown-toggle::after {
  display: none;
}

.inner-header .dropdown-menu {
  top: 100%;
  padding-block: 1rem;
  border: none;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.15));
}

/* ===============================
   RESPONSIVE
================================= */

/* 1700px */
@media (max-width:1700px) {
  header .navbar-brand { max-width: 160px; }
}

/* 1399px */
@media (max-width:1399px) {
  header .navbar-brand { max-width: 145px; }
}

/* 991px */
@media (max-width:991px) {
  .inner-header ~ main { margin-top: 8.5em; }
  header.header-sticky nav { padding-block: 0; }
}

/* 767px */
@media (max-width:767px) {
  header nav .nav-right { column-gap: 3rem; }
  header nav .menubar { column-gap: 1em; }
  header nav .menubar .menu-item:last-child .menu-link::after {
    display: none;
  }
}

/* 480px */
@media (max-width:480px) {
  .header-sticky .navbar-brand { max-width: 140px; }
}

/* 330px */
@media (max-width:330px) {
  header .navbar-brand { max-width: 104px; }
}