@font-face {
  font-family: montserrat_medium;
  src: url(/fonts/Montserrat-Medium.woff2?c0eae82d207026ba4426ca2376e6b9ec);
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: montserrat_regular;
  src: url(/fonts/Montserrat-Regular.woff2?fcb334ae86289352c6f629c17e80ea74);
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: montserrat_bold;
  src: url(/fonts/Montserrat-Bold.woff2?9f00bc2d8a7beeda093a8be562bb18c9);
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: montserrat_thin;
  src: url(/fonts/Montserrat-thin.woff2?438db3e97a2899f3cad1dc6e6a7e1175);
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: elmessiri_bold;
  src: url(/fonts/ElMessiri-Bold.ttf?a0a67ec03d4e0dfec526129925c96f41);
  font-weight: 700;
  font-style: normal;
}

.header {
  width: 100%;
  position: fixed;
  z-index: 1000;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: end;
  height: auto;
}

.header .header_bar {
  z-index: 10;
  margin: 0 auto;
  width: 100%;
  padding: 15px 27px;
  background-color: var(--background-color);
  position: relative;
}

.header .header_bar nav {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header .header_bar nav .element_header-item ul {
  display: flex;
  align-items: center;
  grid-gap: 0 30px;
}

.header .header_bar nav .element_header-item ul .logo_li {
  width: 100%;
  max-width: 60px;
}

.header .header_bar nav .element_header-item ul .logo_li a {
  width: 100%;
}

.header .header_bar nav .element_header-item ul .logo_li a img {
  width: 100%;
  height: auto;
}

.header .header_bar nav .element_header-item ul li {
  list-style: none;
  transition: all 0.2s ease-in;
}

.header .header_bar nav .element_header-item ul li:hover {
  opacity: 0.7;
}

.header .header_bar nav .element_header-item ul li a {
  font-size: 16px;
  color: var(--color-one);
}

.header .header_bar nav .element_header-item ul li.header-menu-btn-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 24px;
  background-color: var(--color-one);
  border-radius: 12px;
  cursor: pointer;
}

.header .header_bar nav .element_header-item ul li.header-menu-btn-link i,
.header .header_bar nav .element_header-item ul li.header-menu-btn-link span {
  color: var(--background-color);
}

@media (max-width: 1000px) {
  .header .header_bar nav .element_header-item ul .navigator-route {
    display: none;
  }

  .header .header_bar nav .element_header-item ul .logo_li {
    width: 100%;
    max-width: 40px;
  }

  .header .header_bar nav .element_header-item ul .logo_li a {
    width: 100%;
  }

  .header .header_bar nav .element_header-item ul .logo_li a img {
    width: 100%;
    height: auto;
  }
}

.header .header_bar nav .element_header-item .button_box {
  display: flex;
  align-items: center;
  gap: 5px;
}

.header .header_bar nav .element_header-item .button_box .item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--color-one);
  padding: 15px;
  border-radius: 12px;
  background-color: #F5F5F7;
  cursor: pointer;
  transition: all 0.2s ease-in;
}

.header .header_bar nav .element_header-item .button_box .item span {
  font-size: 16px;
}

.header .header_bar nav .element_header-item .button_box .item:hover {
  background-color: #C9C9CB;
}

.header .header_bar nav .element_header-item .button_box .item.active {
  background-color: var(--color-one);
  color: var(--background-color);
}

@media (max-width: 1000px) {
  .header .header_bar nav .element_header-item .button_box .cart {
    display: none;
  }

  .header .header_bar nav .element_header-item ul .header-menu-btn-link {
    display: none !important;
  }
}