.header {
  position: relative;
  z-index: 12;
  padding-top: 20px;
}
.header_inner {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--body-bg);
  border-radius: 40px;
}
@media (min-width: 1200px) {
  .header_inner {
    column-gap: 40px;
    padding: 16px 40px;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .header_inner {
    padding: 10px 20px;
  }
}
@media (max-width: 739.98px) {
  .header_inner {
    column-gap: 12px;
    padding: 10px 12px;
  }
}
.header_logo {
  max-width: 180px;
}
@media (min-width: 1200px) {
  .header_logo {
    flex-shrink: 0;
  }
}
@media (max-width: 1199.98px) {
  .header_logo {
    margin-inline-end: auto;
  }
}
@media (min-width: 1200px) {
  .header_nav {
    margin-inline-end: auto;
  }
}
@media (max-width: 1199.98px) {
  .header_nav {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    z-index: 12;
    display: grid;
    grid-template-rows: auto 1fr;
    width: calc(100% + var(--container-padding) * 2);
    min-height: 280px;
    max-height: 100vh;
    max-height: 100dvh;
    margin-inline: calc(-1 * var(--container-padding));
    margin-top: -20px;
    visibility: hidden;
    background-color: var(--body-bg);
    opacity: 0;
    transition-timing-function: ease-in-out;
    transition-duration: 250ms;
    transition-property: opacity, visibility, transform;
    transform: translateY(-4px);
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .header_nav {
    row-gap: 20px;
    padding-bottom: 20px;
  }
}
@media (max-width: 739.98px) {
  .header_nav {
    row-gap: 14px;
    padding-bottom: 14px;
  }
}
.header_nav.show {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}
.header_nav_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 10px;
}
@media (min-width: 1200px) {
  .header_nav_top {
    display: none;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .header_nav_top {
    column-gap: 20px;
    padding-inline: var(--container-padding);
  }
}
@media (max-width: 739.98px) {
  .header_nav_top {
    column-gap: 8px;
    padding-inline: 20px;
  }
}
@media (max-width: 1199.98px) {
  .header_nav_inner {
    overflow: auto;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .header_nav_inner {
    padding-inline: 60px;
  }
}
@media (max-width: 739.98px) {
  .header_nav_inner {
    padding-inline: 24px;
  }
}
.header_end {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  margin-inline-start: auto;
}
@media (min-width: 1200px) {
  .header_end {
    column-gap: 10px;
  }
}
@media (min-width: 740px) and (max-width: 1199.98px) {
  .header_end {
    column-gap: 20px;
  }
}
@media (max-width: 739.98px) {
  .header_end {
    column-gap: 8px;
  }
}
.header_hamb {
  --size: 36px;
  --padding: 4px;
  --line-size: 3px;
  --space: 4px;
  position: relative;
  display: flex;
  align-items: center;
  width: var(--size);
  height: var(--size);
  padding: var(--padding);
  color: var(--black);
}
@media (min-width: 1200px) {
  .header_hamb {
    display: none;
  }
}
.header_hamb.active .header_hamb_icon {
  color: transparent;
}
.header_hamb.active .header_hamb_icon::before, .header_hamb.active .header_hamb_icon::after {
  top: 0;
  color: var(--black);
}
.header_hamb.active .header_hamb_icon::before {
  transform: rotate(-45deg);
}
.header_hamb.active .header_hamb_icon::after {
  transform: rotate(45deg);
}
.header_hamb_icon {
  top: calc(50% - var(--line-size) / 2);
  display: grid;
  place-content: center;
  width: calc(100% - 2 * var(--padding));
}
.header_hamb_icon, .header_hamb_icon::before, .header_hamb_icon::after {
  position: absolute;
  display: block;
  height: var(--line-size);
  content: "";
  background-color: currentColor;
  transition: all 250ms ease-in-out;
}
.header_hamb_icon::before, .header_hamb_icon::after {
  width: 100%;
}
.header_hamb_icon::before {
  top: calc((var(--space) + var(--line-size)) * -1);
}
.header_hamb_icon::after {
  top: calc(var(--space) + var(--line-size));
}