.header-bar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 1em;
      position: absolute;
      top: 1.2em;
      left: 2.1em;
      z-index: 99;
    }

    .header-logo {
      height: 150px;
      transition: filter 0.2s, height 0.18s;
    }

    @media (max-width: 600px) {
      .container {
        max-width: 98vw;
        padding: 18px 2vw;
      }
    }

    @media (max-width: 800px) {
      .header-bar {
        position: static;
        justify-content: flex-start;
        padding: 0.7em 1em 0.7em 0.7em;
        background: var(--bg);
        width: 100%;
      }
      .header-logo {
        height: 100px;
        max-width: 110px;
      }
    }

    @media (max-width: 480px) {
      .header-bar {
        padding: 0.3em 0.6em;
        gap: 0.55em;
        background: var(--bg);
      }
      .header-logo {
        height: 100px;
        max-width: 85px;
      }
    }