header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  height: 72px;
  padding-left: 26px;
  padding-right: 24px;
  background-color: rgb(19, 19, 23);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 34px;
}

.logo-dropdown,
.distribute-dropdown {
  display: flex;
  align-items: center;
  gap: 6px;
}

.logo {
  width: 26px;
}

.dropdown-icon {
  width: 10px;
  padding-top: 2px;

  transition: filter 0.15s ease-out, transform 0.15s ease-in-out;
}

.logo-dropdown:hover .dropdown-icon,
.distribute-dropdown:hover .dropdown-icon {
  filter: brightness(0.8);
  transform: rotate(180deg);
}

.store {
  width: 54px;
  transition: filter 0.15s;
  padding-top: 4px;
}

.store:hover {
  filter: brightness(0.8);
}

.support {
  margin-left: 6px;
  transition: color 0.15s ease-out;
}

.support:hover {
  color: rgb(175, 175, 175);
}

.distribute-dropdown {
  cursor: pointer;
}

.distribute-dropdown:hover .distribute {
  color: rgb(175, 175, 175);
}

.distribute {
  transition: color 0.15s ease-out;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.signin-button {
  cursor: pointer;
  color: rgb(250, 250, 250);
  background-color: rgb(56, 56, 56);
  font-size: 15px;
  border: none;
  border-radius: 6px;
  padding: 6px 12px 7px;

  transition: background-color 0.15s;
}

.signin-button:hover {
  background-color: rgb(110, 110, 110);
}

.download-button {
  cursor: pointer;
  color: black;
  background-color: rgb(38, 186, 255);
  font-size: 15px;
  border: none;
  border-radius: 6px;
  padding: 6px 12px 7px;

  transition: background-color 0.15s;
}

.download-button:hover {
  background-color: rgb(114, 210, 255);
}

.language-icon {
  width: 22px;
  margin-right: 6px;
  padding-top: 4px;
}

.language-icon:hover {
  filter: brightness(0.8);
}

nav {
  position: sticky;
  top: 0;
  z-index: 10;

  display: flex;
  align-items: center;
  gap: 18px;

  height: 100px;
  padding: 0 190px;
  background-color: rgb(16, 16, 20);
}

.search-box {
  display: flex;
  align-items: center;
}

.search-icon {
  width: 14px;
  padding: 13px;
  background-color: rgb(32, 32, 36);
  border-radius: 30px 0 0 30px;

  margin-right: -1px;

  transition: background-color 0.15s ease-out;
}

.search-bar {
  color: rgb(250, 250, 250);
  background-color: rgb(32, 32, 36);
  border: none;
  outline: none;
  border-radius: 0 30px 30px 0px;

  width: 176px;
  height: 38px;
  padding-right: 14px;

  transition: background-color 0.15s ease-out;
}

.search-bar::placeholder {
  color: #b1b1b3;
  font-family: inter, arial;
}

.search-box:hover .search-icon,
.search-box:hover .search-bar,
.search-box:focus-within .search-icon,
.search-box:focus-within .search-bar {
  background-color: rgb(58, 58, 61);
}

.nav-item {
  color: rgb(157, 157, 158);
  padding: 10px;
  margin-right: 6px;

  transition: color 0.15s ease;
}

.nav-item:hover,
.nav-item:first-of-type {
  color: rgb(250, 250, 250);
}