.header {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 1000;
  transform: translateX(-50%);
  color: var(--main-text-color);
  width: 100%;
  max-width: 147rem;
  padding: 0rem 2.5rem 1rem;
}
.header-container {
  background: var(--main-background-color);
  display: flex;
  flex-direction: column;
  color: var(--main-text-color);
  border-radius: 16px;
  box-shadow: 0px 0px 24px 0px rgba(133,133,133,0.1);
}
@media (max-width: 1200px) {
  .header {
    min-height: 7.5rem;
  }
}

@media (max-width: 677px) {
  .header {
    padding: 0 1rem 1rem;
  }
}

@media (max-width: 500px) {
  .header {
    padding: 0 0 1rem;
    top: 0;
    border-radius: 0;
  }
  .header-container {
    border-radius: 0;
    box-shadow: 0px 0px 24px 0px rgba(133,133,133,0.1);
  }
  .header-center {
    justify-content: center;
  }
}