.topbar {
  position: fixed;
  display: flex;
  z-index: 1000;

  top: 0;
  left: 0;
  right: 0;

  height: 70px;

  color: white;

  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
  box-shadow: 0;
  transition: 0.3s all ease-out;
}
.topbar.active {
  color: black;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 26px rgba(0, 0, 0, 0.05);
}

.topbar .topbar-inner {
  position: relative;
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin: 0 auto;

  width: 100%;
  max-width: 1000px;
  height: 100%;

  padding: 0 40px;
}

.topbar a {
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}

.topbar .topbar-mobileaction {
  position: relative;
  display: none;
}

.topbar .topbar-logo {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  height: 100%;
}

.topbar .topbar-logo img {
  position: relative;
  display: flex;

  height: 100px;

  padding: 0 100px;

  object-fit: contain;
  object-position: center center;
}

.topbar .topbar-nav {
  position: relative;
  display: flex;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  align-items: center;
  justify-content: flex-start;

  flex-direction: row;

  height: 100%;
}

.topbar .topbar-nav-item {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: column;

  height: 50px;
}
.topbar .topbar-nav-item a {
  position: relative;
  display: flex;

  align-items: center;
  justify-self: center;

  flex-direction: row;

  height: 100%;

  padding: 0 20px;

  font-size: 14px;
  font-weight: 600;

  opacity: 0.6;
  transition: 0.3s all ease-out;
}
.topbar .topbar-nav-item:hover a,
.topbar .topbar-nav-item.active a {
  opacity: 1;
}

.topbar .topbar-nav-item-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  gap: 5px;

  align-items: center;

  flex-direction: column;

  top: calc(100% - 5px);
  right: 0;

  padding: 20px 10px;

  border-radius: 8px;

  background: white;
  box-shadow: 0 3px 24px rgba(0, 0, 0, 0.1);
}
.topbar .topbar-nav-item:hover a ~ .topbar-nav-item-dropdown {
  display: flex;
}

.topbar .topbar-nav-item-dropdown > a {
  position: relative;
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: row;

  padding: 10px 20px;

  border-radius: 8px;

  color: rgba(0, 0, 0, 0.4);
  opacity: 1;
}
.topbar .topbar-nav-item-dropdown > a:hover {
  color: rgba(0, 0, 0, 1);
  background: rgba(0, 0, 0, 0.05);
}

@media (max-width: 850px) {
  .topbar .topbar-mobileaction {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    transition: 0.3s all ease-out;
    padding: 0.3em;
    border: 1px solid #c6c3c3 !important;
    border-radius: 50px !important;
    transition: 0.3s ease-out;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  @media (hover: hover) {
    .topbar .topbar-mobileactio:hover {
      border: 1px solid #ffcaa6;
      background: #ffcaa6;
    }
  }

  .topbar .topbar-mobileaction:hover,
  .topbar .topbar-mobileaction:active {
    border: 1px solid #ffcaa6;
    background: #ffcaa6;
  }

  .topbar .topbar-nav {
    position: absolute;
    display: flex;
    overflow: hidden;
    overflow-y: hidden;
    top: 70px;
    right: 0;
    left: 0;
    bottom: 0;
    flex-direction: column;
    scrollbar-width: 0;
    width: 100%;
    background: #ffffff99;
    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.8, 0.5, 0.5, 0.8);
    color: black;
    box-shadow: 0 3px 26px rgba(0, 0, 0, 0.1);
    height: 0;
  }

  .topbar .open {
    height: calc(30vh + 10px);
  }

  .topbar .topbar-nav-item a {
    padding-top: 20px;
    padding-bottom: 20px;
    transition: 0.3s all ease-out;
  }

  .topbar .topbar-nav-item-dropdown {
    position: relative;
    transition: 0.3s all ease-out;
    top: unset;
    right: unset;

    margin-bottom: 30px;
  }
}