.header {
  height: 4.5rem;
  counter-reset: voice;
}

.header-bar {
  width: calc(100% - 8.333vw);
}

.header .logo-full,
.header #logo-flame {
  transition-property: opacity;
}

#top-banner {
  transition-property: height;
}

#top-banner span {
  transition-property: opacity;
}

.on-scrolling .header #logo-flame,
.on-scrolling #top-banner span {
  opacity: 0;
}

.on-scrolling .header .logo-full {
  opacity: 0;
}

.on-scrolling #top-banner {
  height: 0;
}

.on-scrolling .header .link,
.on-scrolling .header #company-link {
  opacity: 0;
  pointer-events: none;
  cursor: auto;
}

.header.open .logo-full {
  opacity: 1;
}

.white-flame {
  filter: grayscale(1) brightness(100);
}

.header.open .hamburger::before {
  width: 24px;
  margin-top: -1px;
  top: 50%;
  left: -15%;
  transform: rotate(45deg);
}

.header.open .hamburger::after {
  width: 24px;
  margin-bottom: -1px;
  bottom: 50%;
  left: -15%;
  transform: rotate(-45deg);
}

.header.open .hamburger:hover::before {
  transform: rotate(45deg) scale(1.3);
}

.header.open .hamburger:hover::after {
  transform: rotate(-45deg) scale(1.3);
}

.move-top {
  transform: scale(1.2) translateY(-10%);
}

.hamburger {
  width: 1.2rem;
  height: 1.2rem;
}

.hamburger-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hamburger::before {
  top: 0;
  right: 0;
}

.hamburger::after {
  bottom: 0;
  left: 0;
}

.hamburger::after,
.hamburger::before {
  content: "";
  transition-duration: 0.4s;
  position: absolute;
  width: 50%;
  height: 2px;
  background-color: #fff;
}

.hamburger > span {
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  transition-property: width, opacity;
  margin-top: -1px;
}

.voice-menu-parent {
  backface-visibility: hidden;
}

/* .voice-menu-parent::before {
  font-size: 0.875rem;
  margin-right: 1.25rem;
  counter-increment: voice;
  content: '0' counter(voice);
  color: #e1e2e7; /* dark-theme
} */
.voice-menu {
  color: #fff;
  /* dark-theme */
  clip-path: inset(0 0 0 0);
  transition-property: clip-path;
}

.voice-menu + span {
  color: #fff;
  /* dark-theme */
}

.header .header-overlay {
  /* top: 2rem;
  right: 2rem; */
  z-index: 40;
  transform: scale(0);
  transition-property: transform;
}

.header.open .header-overlay {
  transform: scale(150);
}

.header #logo-full-white {
  opacity: 0;
}

.header.open #logo-full-white {
  opacity: 1;
}

.header.open #logo-full,
.header.open #logo-flame {
  opacity: 0;
}

#header-menu > .container-flame {
  margin-top: -20vh;
  position: fixed;
}

.contact-info:nth-child(2) {
  display: none;
}

@media only screen and (min-width: 640px) {
  .on-scrolling .header #logo-flame {
    opacity: 1;
  }
}

@media screen and (min-width: 768px) {
  .header {
    height: 7.5rem;
  }

  .contact-info:nth-child(2) {
    display: flex;
  }
}

@media screen and (min-width: 1024px) {
  #header-menu > .container-flame {
    position: absolute;
  }
}

@media screen and (min-width: 1200px) {
  .hamburger:hover::after,
  .hamburger:hover::before {
    width: 100%;
  }

  .menu-list:hover .voice-menu {
    clip-path: inset(0 100% 0 0);
  }

  .voice-menu-parent:hover .voice-menu {
    clip-path: inset(0 0% 0 0);
  }
}

@media only screen and (max-width: 960px) and (max-height: 600px) and (orientation: landscape) {
  .header-static-wrapper {
    display: none !important;
  }

  .header .menu-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .header .menu-list > div {
    margin-right: 2rem;
  }
}

@media screen and (max-width: 768px) {
  .header-bar .link {
    display: none;
  }

  .header-bar .mr-10 {
    margin-right: 1rem;
  }
}