.NavBar {
  box-shadow: 0.1875em 0.1875em 1em -0.5em rgba(0, 0, 0, 0.68);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.875em;
  padding: 0px 3.125em;
  justify-content: space-between;
  height: 3.75em;
  background-color: rgba(142, 137, 97, 0.9411764706);
}
.NavBar .Slogan {
  display: flex;
  direction: rtl;
  gap: 0.625em;
  align-items: center;
}
.NavBar .Slogan p {
  color: white;
  font-size: 1.1875em;
  font-weight: bold;
}
.NavBar .Slogan button {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: none;
  border: none;
}
.NavBar .Slogan button > i {
  font-size: 1.25em;
  color: white;
}
.NavBar > ul {
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 1.25em;
}
.NavBar > ul a {
  display: flex;
  gap: 1.25em;
  justify-content: center;
  color: white;
  font-weight: bold;
}
.NavBar > ul a li {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 1.125em;
}
.NavBar > ul a li.active {
  border-bottom: 0.125em solid white;
}

#SideNavBar {
  z-index: 1000;
  position: fixed;
  top: 0px;
  right: 0em;
  width: 0px;
  height: 100vh;
  direction: rtl;
  background-color: #b3ad9a;
  overflow: hidden;
  box-shadow: 0.3125em 0.3125em 1.5625em -0.5em rgba(0, 0, 0, 0.68);
}
#SideNavBar .Container {
  position: absolute;
  padding: 0.625em;
  width: 21.875em;
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  overflow-y: scroll;
}
#SideNavBar .Container p.title {
  direction: ltr;
  font-size: 1.3125em;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
#SideNavBar .Container ul.links {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}
#SideNavBar .Container ul.links li a {
  gap: 0.9375em;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 500;
  color: white;
  font-size: 1.1875em;
}
#SideNavBar .Container ul.links li a i {
  font-size: 0.5em;
}
#SideNavBar ::-webkit-scrollbar {
  width: 7px;
}
#SideNavBar ::-webkit-scrollbar-track {
  background-color: white;
}
#SideNavBar ::-webkit-scrollbar-thumb {
  background-color: #cdcbb1;
}
#SideNavBar.Show {
  animation: Comment_Box_Show 0.5s forwards;
  -webkit-animation: Comment_Box_Show 0.5s forwards;
}
#SideNavBar.Hide {
  animation: Comment_Box_Hide 0.5s forwards;
  -webkit-animation: Comment_Box_Hide 0.5s forwards;
}

@keyframes Comment_Box_Show {
  0% {
    display: none;
    width: 0px;
    filter: opacity(0);
    -webkit-filter: opacity(0);
  }
  100% {
    display: flex;
    width: 21.875em;
    filter: opacity(1);
    -webkit-filter: opacity(1);
  }
}
@keyframes Comment_Box_Hide {
  0% {
    display: flex;
    width: 21.875em;
    filter: opacity(1);
    -webkit-filter: opacity(1);
  }
  100% {
    display: none;
    width: 0px;
    filter: opacity(0);
    -webkit-filter: opacity(0);
  }
}
@media (max-width: 1000px) {
  .NavBar {
    font-size: 0.875em;
  }
}
@media (max-width: 750px) {
  .NavBar {
    font-size: 0.75em;
  }
}
@media (max-width: 600px) {
  .NavBar {
    font-size: 0.6875em;
  }
}
@media (max-width: 450px) {
  .NavBar .Slogan {
    direction: ltr;
    width: 100%;
    justify-content: space-between;
  }
  .NavBar ul {
    display: none;
  }
}
@media (max-width: 550px) {
  #SideNavBar {
    font-size: 12px;
  }
}/*# sourceMappingURL=Header.css.map */