#logo,
#mobile_logo {
  background-position: center;
  background-size: clamp(172px, 109.091vw + -177.091px, 196px)
    clamp(38px, 22.727vw + -34.727px, 43px);
  background-repeat: no-repeat;
  background-color: var(--color-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 779 172'%3E%3Cpath fill='%2356ae31' d='M172 86A86 86 0 1 1 0 86a86 86 0 0 1 172 0'/%3E%3Cpath fill='%23000' d='M76 47H42V26h90v21H99v102H76zM257 91l-1-4-4-6-6-5-9-2q-9 0-15 6-6 5-8 11zm-43 16a21 21 0 0 0 7 16l8 4 8 1a32 32 0 0 0 18-5l5-4 3-3 18 10a45 45 0 0 1-16 15l-12 5a62 62 0 0 1-35-2 41 41 0 0 1-23-24 53 53 0 0 1 0-35 41 41 0 0 1 23-24q8-3 19-4 11 0 19 4t13 10 8 16 3 20zM294 60h22v11q4-7 11-10 7-4 16-4v22l-10 1-9 4-6 8-2 12v41h-22zM356 60h21v11h1q4-7 10-10 8-4 17-4v22l-11 1-8 4-7 8-2 12v41h-21zM470 102l-5 2-5 2-12 2-6 1-4 2-4 4-1 5q1 5 4 8 4 3 10 3l8-1 7-3 6-5 2-7zm21 29 1 10 3 4h-23l-2-3v-4a45 45 0 0 1-41 8q-5-2-9-6l-7-8-2-12 2-10q3-6 7-8l8-5q5-3 10-3l9-2 18-4 5-1v-3q0-6-5-8-4-3-12-3-9 0-13 3-3 4-3 10l-22-1q0-7 4-12 3-6 8-9l12-5 14-2 14 1 12 4q6 3 9 9t3 15z'/%3E%3Cpath fill='%2356ae31' d='M568 87q-2-5-7-8-6-4-15-5-7 0-12 3-4 2-4 6 0 3 4 5t10 3l27 6 10 8q4 5 4 12a27 27 0 0 1-12 23q-5 4-12 6l-15 2q-15 0-26-5t-17-11l16-12q4 5 11 8a40 40 0 0 0 22 2l5-3 4-3 1-4q0-3-4-5l-10-3-27-6-10-8q-3-4-4-13 0-8 3-12 3-6 9-9l12-5a66 66 0 0 1 29 0 44 44 0 0 1 23 14zM598 25h22v21h-22zm0 35h22v85h-22zM644 29h21v31h19v14h-19v44l2 8q2 3 8 2h5l4-1v17l-17 2q-12 1-18-5-5-6-5-15V74h-13V60h13zM756 91l-2-4-3-6-6-5-9-2q-10 0-16 6-6 5-7 11zm-43 16a21 21 0 0 0 7 16l7 4 9 1a32 32 0 0 0 18-5l4-4 3-3 18 10a45 45 0 0 1-15 15l-12 5a62 62 0 0 1-36-2 41 41 0 0 1-23-24 53 53 0 0 1 0-35 41 41 0 0 1 23-24q9-3 20-4 10 0 19 4 7 4 13 10 5 6 8 16l2 20z'/%3E%3C/svg%3E");
  width: 236px;
  height: 83px;
  display: block;
  padding: calc(var(--padding-xxs) / 2);
  border-radius: var(--border-radius-max);
  text-indent: -99999px;
  transition: background-color 0.4s ease;
  &:is(:hover, :focus) {
    background-color: var(--color-green-lightest);
  }
}

#mobile_logo {
  display: none;
}

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-s);
  padding: var(--gap-s) var(--width-header);
  &.sticky {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 9;
    left: 0;
    transition: all 0.4s ease;
  }
  & ul.main_menu {
    & li {
      & a {
        color: var(--color-black);
        text-decoration: none;
        transition: color 0.4s ease;
      }
      &.menu-item-has-children {
        & > .expand_container {
          transition: color 0.4s ease;
        }
      }
      &.current-menu-item,
      &.current-page-ancestor {
        & > a {
          color: var(--color-green);
        }
      }
      &:is(:hover, :focus) {
        > a {
          color: var(--color-green);
        }
        > .expand_container {
          @media (min-width: 1368px) {
            color: var(--color-green);
          }
        }
      }
    }
  }
  &.transparent {
    & #mobile_menu_button {
      & > div {
        border: 2px solid var(--color-white);
      }
    }
    & ul.main_menu {
      & li {
        & a {
          color: var(--color-white);
        }
        &.menu-item-has-children {
          & > .expand_container {
            @media (min-width: 1368px) {
              color: var(--color-white);
            }
          }
        }
        &:is(:hover, :focus) {
          > a {
            color: var(--color-green-light);
          }
          > .expand_container {
            @media (min-width: 1368px) {
              color: var(--color-green-light);
            }
          }
        }
      }
      @media (min-width: 1368px) {
        & > li {
          &.menu-item-has-children {
            & ul {
              border-top: 2px solid var(--color-green-light);
            }
            &.dt_active,
            &:hover {
              &:before {
                border-bottom-color: var(--color-green-light);
              }
            }
          }
        }
      }
    }
  }
  &.scrolled,
  &.scrolled.transparent {
    background: var(--color-white);
    box-shadow: var(--box-shadow);
    & #mobile_menu_button {
      & > div {
        border: 2px solid var(--color-black);
      }
    }
    & ul.main_menu {
      & li {
        & a {
          color: var(--color-black);
        }
        &.menu-item-has-children {
          & > .expand_container {
            @media (min-width: 1368px) {
              color: var(--color-black);
            }
          }
        }
        &:hover {
          > a {
            color: var(--color-green);
          }
          > .expand_container {
            @media (min-width: 1368px) {
              color: var(--color-green);
            }
          }
        }
      }
      @media (min-width: 1368px) {
        & > li {
          &.menu-item-has-children {
            & ul {
              border-top: 2px solid var(--color-green);
            }
            &.dt_active,
            &:hover {
              &:before {
                border-bottom-color: var(--color-green);
              }
            }
          }
        }
      }
    }
  }
}