@media (max-width: 1127px) {
  #mobile_logo {
    margin-inline: auto;
  }
  body {
    & #wrap {
      position: relative;
      width: auto;
      min-width: 320px;
      overflow: hidden;
    }
    #shifter {
      position: relative;
      width: 100%;
      left: 0;
      transition: left 0.4s ease;
      -webkit-transition: left 0.4s ease;
      background: var(--color-white);
    }
    & #close_menu {
      background-color: rgba(0, 0, 0, 0.01);
      position: fixed;
      top: 0;
      right: 0;
      z-index: 2147483647;
      width: 0;
      height: 100vh;
      display: block;
      transition:
        background-color 0.4s ease,
        right 0.4s ease;
      -webkit-transition:
        background-color 0.4s ease,
        right 0.4s ease;
    }
    & #header.sticky {
      transition: left 0.4s ease;
      -webkit-transition: left 0.4s ease;
    }
    &.menu_open {
      overflow: hidden;
      & #shifter {
        left: calc(-1 * min(90vw, 430px));
      }
      & #close_menu {
        display: block;
        background: rgba(0, 0, 0, 0.5);
        right: min(90vw, 430px);
        width: 100%;
      }
      & #header {
        &.sticky {
          left: calc(-1 * min(90vw, 430px));
          transition: left 0.4s ease;
          -webkit-transition: left 0.4s ease;
        }
        & .menu_content_container {
          left: calc(100% - min(90vw, 430px));
        }
      }
      & .menu_content_container {
        left: calc(100% - min(90vw, 430px));
      }
      &.show_menu_close {
        & #close_menu {
          background-color: rgba(0, 0, 0, 0.01);
          width: 100%;
          right: 0;
        }
        & #shifter {
          left: 0;
        }
        & #header {
          &.sticky {
            left: 0;
          }
          & .menu_content_container {
            left: 100%;
          }
        }
      }
    }
  }
  #header {
    &.header_dark,
    &.header_banner {
      & .menu_content_container {
        background: var(--color-dark-teal);
      }
      & .main_menu {
        background-color: hsl(from var(--color-white) h s l / 0.08);
        border: 1px solid hsl(from var(--color-white) h s l / 0.2);
        & li {
          & a {
            &:is(:hover, :focus) {
              background-color: hsl(from var(--color-white) h s l / 0.1);
            }
          }
          &.current-menu-item,
          &.current-page-ancestor {
            > a {
              background-color: hsl(from var(--color-white) h s l / 0.1);
            }
          }
        }
        & > li {
          &.menu-item-has-children {
            & ul {
              & li {
                list-style: none;
                & a {
                  &:is(:hover, :focus) {
                    background-color: hsl(from var(--color-white) h s l / 0.1);
                  }
                }
                &.current-menu-item {
                  > a {
                    background-color: hsl(from var(--color-white) h s l / 0.1);
                  }
                }
              }
            }
          }
        }
      }
    }
    & #mobile_menu_button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: calc(var(--gap-xs) * 2);
      gap: var(--gap-xxs);
      & > div {
        border: 2px solid var(--color-dark-teal);
        border-radius: var(--gap-xs);
      }
    }
    & .menu_content_container {
      display: flex;
      top: 0;
      left: 100%;
      width: min(90vw, 430px);
      z-index: 11;
      position: fixed;
      overflow-x: hidden;
      overflow-y: scroll;
      max-height: 100vh;
      -webkit-transition: left 0.4s ease;
      height: 100%;
      -ms-overflow-style: none; /* Internet Explorer 10+ */
      scrollbar-width: none; /* Firefox */
      box-sizing: border-box;
      padding: var(--gap-xs);
      background: var(--color-white);
      flex-direction: column;
      gap: var(--padding-xs);
      &::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
      }
    }
    & .main_menu {
      background-color: hsl(from var(--color-dark-teal) h s l / 0.05);
      border: 1px solid hsl(from var(--color-dark-teal) h s l / 0.2);
      border-radius: var(--border-radius-m);
      padding: 0;
      margin: 0;
      list-style: none;
      display: block;
      width: 100%;
      & li {
        & a {
          padding: var(--gap-xs);
          &:is(:hover, :focus) {
            background-color: hsl(from var(--color-dark-teal) h s l / 0.1);
          }
        }
        &.current-menu-item,
        &.current-page-ancestor {
          > a {
            background-color: hsl(from var(--color-dark-teal) h s l / 0.1);
          }
        }
      }
      & > li {
        position: relative;
        > a {
          padding-right: 55px;
        }
        &.menu-item-has-children {
          display: block;
          > a {
            transition: background-color 0.4s ease;
          }
          & ul {
            position: sticky;
            border-top: none;
            margin-top: 0;
            max-height: 0;
            transition: max-height 0.4s ease;
            overflow: hidden;
            & li,
            & .mega_menu_main_links,
            & .mega_menu_sub_links {
              & a {
                font-size: 16px;
                margin-left: var(--gap-xs);
                padding: var(--gap-xxs) var(--gap-xs);
                border-top-left-radius: var(--border-radius-m);
                border-bottom-left-radius: var(--border-radius-m);
                transition: color 0.4s ease;
                &:is(:hover, :focus) {
                  background-color: hsl(
                    from var(--color-dark-teal) h s l / 0.1
                  );
                }
                &.current-menu-item {
                  color: var(--color-light-green);
                }
              }
              &.current-menu-item {
                > a {
                  background-color: hsl(
                    from var(--color-dark-teal) h s l / 0.1
                  );
                }
              }
            }
            &.mega_menu {
              .mega_menu_title,
              .mega_menu_cta {
                display: none;
              }
            }
          }
          & > .expand_container {
            position: absolute;
            height: 55px;
            aspect-ratio: 1;
            right: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            & > .expand_btn {
              transition: transform 0.4s;
              display: block;
              width: 8px;
              height: 5px;
              background: center / contain no-repeat
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none' viewBox='0 0 8 5'%3E%3Cpath fill='%2382bf39' d='M4 3.7592 1.0387.6962a.242.242 0 0 0-.3508 0 .2633.2633 0 0 0 0 .363l3.1369 3.2446a.242.242 0 0 0 .3508 0l3.1365-3.2443A.26.26 0 0 0 7.3846.878a.26.26 0 0 0-.0725-.1813.242.242 0 0 0-.3508 0z'/%3E%3Cpath fill='%2382bf39' fill-rule='evenodd' d='M3.8248 4.3038a.242.242 0 0 0 .3508 0l3.1365-3.2443.0084-.0091a.26.26 0 0 0 .0641-.1725.26.26 0 0 0-.0725-.1813.242.242 0 0 0-.3508 0L4 3.7592 1.0387.6962a.242.242 0 0 0-.3508 0 .2634.2634 0 0 0 0 .363zM4 2.87 1.4792.2626A.8535.8535 0 0 0 .2466.2635c-.3288.3414-.3288.887 0 1.2284l3.1377 3.2455a.8535.8535 0 0 0 1.2318 0l3.1365-3.2442A.884.884 0 0 0 8 .8779.883.883 0 0 0 7.7526.263a.8535.8535 0 0 0-1.2318 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
            }
          }
        }
        &.active {
          & ul {
            margin-block: var(--gap-xxs);
            max-height: max-content;
            transition: max-height 0.4s ease;
          }
          & > .expand_container {
            & > span.expand_btn {
              transform: rotate(-180deg);
            }
          }
        }
        &.clicked {
          & > a:after {
            transform: rotate(-180deg);
          }
        }
      }
    }
    & .secondary_main_menu {
      & li {
        list-style: none;
        border-bottom: 1px solid var(--color-light-green);
        & a {
          padding: var(--gap-xs) 0;
        }
        &.current-menu-item,
        &.current-page-ancestor {
          > a {
            color: var(--color-light-green);
          }
        }
        &:last-of-type {
          border-bottom: none;
        }
      }
    }
  }
}