.header {
  max-width: 100%;
  background-color: #0f0f0f;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(16px, 2vw, 32px);
  position: fixed;
  top: 0;
  left: 50%;
  transition: 0.6s ease;
  z-index: 1000;
  width: 100%;
  transform: translateX(-50%);
}

.header.scrolled {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1400px, 92%);
  padding: 18px 32px;
  background: rgba(15, 15, 15, 0.82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(199, 164, 106, 0.35);
  border-radius: 18px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
  animation: headerShow 0.5s ease;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

@keyframes headerShow {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.header.scrolled .logo a {
  font-size: clamp(24px, 2vw, 38px);
}

.header.scrolled .logo b {
  font-size: 12px;
}

.logo {
  justify-self: start;
  justify-content: center;
}

.logo a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #fff;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(32px, 3vw, 56px);
}

.logo a b {
  display: block;
  font-size: clamp(14px, 1vw, 20px);
  font-weight: 300;
  color: #c7a46a;
}

.div_nav_header {
  justify-self: center;
}

.nav_header {
  display: flex;
  gap: clamp(18px, 2vw, 40px);
  font-size: clamp(20px, 1.5vw, 32px);
}

.nav_header a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s;
}

.nav_header a:hover {
  color: gray;
}

.header_icon {
  justify-self: end;

  display: flex;
  gap: clamp(12px, 1vw, 24px);
}

.header_icon img {
  width: clamp(24px, 2vw, 38px);
  height: clamp(24px, 2vw, 38px);

  filter:
    brightness(0)
    saturate(100%)
    invert(69%)
    sepia(28%)
    saturate(600%)
    hue-rotate(357deg)
    brightness(88%)
    contrast(90%);

  opacity: 0.85;

  transition:
    filter 0.3s ease,
    opacity 0.3s ease,
    transform 0.3s ease;
}