.om-navigation {
  color: #fff;
  background-color: #111;
  z-index: 2;
  position: relative;

  .nav-container {
    height: 82px;
    padding: 0 104px 0 127px;
    max-width: 1440px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
  }
  .om-logo {
    height: 100%;
    width: 100%;
    max-width: 195px;
    margin-right: 67px;
    display: flex;
    align-items: center;

    a {
      display: inline-block;
    }
    img {
      width: 195px;
      height: auto;
    }
  }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .menu {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
    width: 100%;
  }
  .menu-item {
    white-space: nowrap;
    height: 100%;
    align-items: center;
    display: flex;
    padding: 24px;
    position: relative;
    --normal: #fff;

    &:has(> .nav-item.active) {
      background-color: #f4f7f7;
    }

    .nav-item {
      font-family: "Roboto", sans-serif;
      font-size: 18px;
      font-weight: bold;
      line-height: 1.78;
      color: var(--normal);
      padding: 0;
      border: none;
      border-bottom: 1px solid transparent;
      background: transparent;

      &:hover {
        border-bottom: 1px solid #6e8c96;
      }

      svg {
        fill: var(--normal);
        transform: rotate(180deg);
        transition: all ease;
      }

      &.active {
        color: #111;
        border-bottom: 1px solid #6e8c96;

        svg {
          fill: #111;
          transform: rotate(0);
        }
      }
    }
  }

  .a-svg {
    margin-left: 8px;
    fill: #111;
    display: inline-block;
    transform: translateY(1px);
  }

  .popup {
    display: none;
    position: absolute;
    top: 100%;
    min-width: 448px;
    left: 0;
    z-index: -1;
    background-color: #ffffff;
    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.16));
  }

  .panel-container {
    padding: 32px 24px;
    background-color: #f4f7f7;
    box-shadow: 0 20px 40px 0 rgba(0, 0, 0, 0.2);
  }
  .panel-title {
    font-family: "Roboto", sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.45;
    color: #111;
    text-align: left;

    img {
      width: 32px;
      height: auto;
      margin-right: 8px;
    }
    a:active {
      color: #003c4e;
    }
    a:hover {
      text-decoration: underline;
    }
  }
  .panel-links {
    margin: 16px 0 0 48px;
    display: flex;
    gap: clamp(16px, 5vw, 64px);
    padding-bottom: 24px;
  }

  .panel-list.with-link {
    margin-bottom: 32px;
  }

  .panel-item:last-child .panel-links {
    padding-bottom: 0;
    margin-top: 0;
  }

  ul.links-column {
    width: 208px;
    text-align: left;
    padding-bottom: 16px;

    li {
      margin-bottom: 16px;
    }

    a {
      font-family: "Roboto", sans-serif;
      font-size: 16px;
      line-height: 1;
      color: #444;

      &:active {
        text-decoration: underline;
        color: #003c4e;
      }

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .view-all-link {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    line-height: 1.33;
    text-align: left;
    color: #444;
    display: block;

    svg {
      fill: #444;
    }

    &:active {
      color: #003c4e;
      text-decoration: underline;
    }

    &:hover {
      text-decoration: underline;
    }
  }

  .search-item {
    display: flex;
    position: relative;
    margin-left: auto;
    align-items: center;
  }

  .search-toggle {
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    &:active {
      color: #fff;
    }

    &:hover {
      color: #ff6200;
    }

    svg {
      margin-top: 4px;
    }
  }

  .search-input-container {
    border-radius: 16px;
    border: solid 1px #fff;
    box-sizing: border-box;
    background-color: transparent;
    width: 208px;
    overflow: hidden;
    box-sizing: border-box;
    transition: width 0.5s ease, visibility 0s linear 0.5s;
    width: 0;
    visibility: hidden;
    form {
      display: flex;
      flex-direction: row;
    }
  }

  .search {
    border: none;
    outline: none;
    width: 128px;
    font-size: 16px;
    line-height: 1.25;
    padding: 4px 4px 4px 16px;
    flex-grow: 2;
    font-family: "Roboto", sans-serif;
    background-color: transparent;
    height: 32px;

    &:focus {
      color: #fff;
    }

    &::placeholder {
      color: #fff;
    }
  }

  .search-item.active .search-input-container {
    width: 208px;
    transition: width 0.5s ease;
    display: block;
    padding-right: 6px;
    visibility: visible;
  }

  .search-button,
  .close-button {
    cursor: pointer;
    display: none;
    padding: 0;
    border: 0;
    background: none;
    align-items: center;
  }

  .close-button {
    margin-right: 13px;
  }

  .search-button,
  .close-button {
    color: #fff;
    width: 32px;
    height: 32px;
  }

  .search-item.active .close-button,
  .search-item.active .search-button {
    display: flex;
  }

  @media (max-width: 1272px) {
    .popup {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .nav-cta {
    font-family: "Red Hat Display";
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
    line-height: 1.33;
    color: #fff;
    padding: 12px 16px;
    border: 3px solid #ff6200;
    border-radius: 40px;

    &.mobile {
      font-size: 14px;
      line-height: 1.43;
      padding: 10px 16px;
      margin-left: auto;
    }
  }

  .mobile-nav {
    display: none;
  }

  @media (max-width: 1199px) {
    .nav-container {
      padding: 0 24px 0 32px;
    }
  }

  @media (max-width: 992px) {
    &.mobile-open {
      height: 100%;
      display: flex;
      position: fixed;
      width: 100%;
      overflow: auto;
      background-color: #fff;
    }

    .nav-container {
      display: none;
    }
    .mobile-nav {
      display: block;
      background-color: #fff;
      position: relative;
      height: max-content;
      text-align: left;
      width: 100%;

      .mobile-nav-top {
        padding: 16px 4px 16px 24px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        background-color: #111;
      }

      .mobile-logo {
        display: flex;
        align-items: center;
      }

      .mobile-logo a {
        line-height: 0;
      }

      .mobile-logo img {
        height: 48px;
        width: auto;
      }

      .nav-toggle {
        line-height: 0px;
        padding: 0 16px;
        cursor: pointer;
        background: none;
        border: none;
      }

      .mobile-menu-items {
        display: none;
      }

      .close-icon {
        display: none;
      }

      .mobile-search {
        display: none;
      }

      &.open {
        .mobile-menu-items {
          display: block;
          list-style-type: none;
          margin: 0;
          padding: 0;
          border-top: solid 1px #ccc;
        }

        .mobile-menu-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .mobile-menu-item button {
          border: none;
          border-left: solid 8px #ccc;
          background-color: transparent;
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;
          border-bottom: solid 1px #ccc;

          &.open {
            background-color: #eee;
            border-left-color: #eee;

            svg {
              transform: rotate(0);
            }
          }
          svg {
            fill: #111;
            transform: rotate(180deg);
          }
        }

        .mobile-nav-item {
          padding: 0 24px;
          height: 56px;
          font-family: "Roboto", sans-serif;
          font-size: 18px;
          font-weight: bold;
          line-height: 1.78;
          color: #111;
          border-left: solid 8px #ccc;
          border-bottom: solid 1px #ccc;

          .open {
            background-color: #eee;
          }

          &.cleaner {
            border: none;
            border: 8px solid transparent;
            font-size: 16px;
            line-height: 1.25;
            font-weight: normal;
          }
        }

        .mobile-menu-item a {
          flex: 1;
          display: flex;
          align-items: center;
        }

        .mobile-nav-title {
          padding: 0 24px;
          font-family: "Roboto", sans-serif;
          font-size: 18px;
          font-weight: 500;
          line-height: 1.11;
          color: #111;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 56px;

          svg {
            transform: rotate(180deg);
          }

          &.open {
            background-color: #eee;

            svg {
              transform: rotate(0);
            }
          }

          &.link:active {
            background-color: #111;
            color: #fff;

            svg {
              fill: #fff;
            }
          }
          a {
            color: inherit;
          }

          &.sub a {
            pointer-events: none;
          }
          img {
            width: 16px;
            height: auto;
            margin-right: 8px;
          }

          .mobile-nav-title-icon {
            margin-left: auto;
          }
          svg {
            fill: #111;
          }

          .view-link svg {
            transform: unset;
          }
        }

        .close-icon {
          display: block;
          &:active {
            color: #0044ab;
          }
        }
        .hamburger {
          display: none;
        }
        .mobile-search {
          display: block;
        }
      }
      .mobile-panel-links {
        display: none;
      }

      .mobile-nav-title.open ~ .mobile-panel-links {
        display: block;
      }

      .back-button {
        background: none;
        border: none;
        font-size: 16px;
        cursor: pointer;
        width: 100%;
        display: flex;
        align-items: center;
        height: 64px;
        border-bottom: solid 1px #676656;
        color: #222222;
        font-family: "Red Hat Display";
        font-weight: bold;
        &:active {
          background-color: #f7f7f1;
          color: #584f4a;
        }
      }

      .submenu {
        display: none;
      }

      .mobile-links-column {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        a {
          font-family: "Roboto", sans-serif;
          font-size: 18px;
          line-height: 1.11;
          height: 56px;
          display: flex;
          align-items: center;
          padding-left: 48px;

          color: #111;
          &:active {
            color: #fff;
            background-color: #111;

            .a-svg {
              fill: #fff;
            }
          }
        }
      }

      .mobile-view-all {
        padding: 0 0 16px 16px;
        a {
          color: #0044ab;
          font-weight: 600;
          font-size: 16px;
          text-decoration: underline;

          &:active {
            text-decoration: none;
            color: #00086f;
          }
        }
      }

      .mobile-search {
        padding: 16px 24px;
        form {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          background-color: #fff;
          border-radius: 40px;
          border: solid 1px #ccc;
          padding: 6px 12px 6px 16px;
        }

        input {
          font-family: "Roboto", sans-serif;
          font-size: 18px;
          background-color: transparent;
          outline: none;
          border: none;
          border-radius: 32px;
          padding: 0;
          color: #222222;
          flex: 1;

          &:focus {
            background-color: #f7f7f1;
            color: #222222;
          }

          &::placeholder {
            color: #766d68;
          }
        }

        .mobile-search-button {
          line-height: 0;
          background-color: transparent;
          padding: 0;
          border: none;
          color: #fff;
          &:active {
            color: #444;
          }
        }
      }
    }

    /* swdc design */

    .show {
      display: block;
    }

    .hide {
      display: none;
    }

    .level-1 {
      display: flex;
      flex-flow: row wrap;
      background: #fff;

      ul {
        display: none;
      }

      div {
        width: 100%;
      }
      .mobile-sub-nav {
        width: 100%;

        .mobile-btn-style {
          border-left-color: #a0b9b9;
        }
      }

      .mobile-btn-style {
        position: relative;
        top: 0;
        font-family: "Roboto", sans-serif;
        font-size: 16px;
        line-height: 1.25;
        color: #111;
        justify-content: space-between;
        padding: 1rem 1.5rem;
        width: 100%;
        border: none;
        text-decoration: none;
        display: flex;
        background: transparent;
        align-items: center;
        text-align: left;
        cursor: pointer;
        height: auto;
        font-weight: inherit;
        border-left: 8px solid transparent;

        svg {
          width: 1.5rem;
          height: 0.75rem;
          margin-left: auto;
        }

        &.back-button {
          color: #006482;
          justify-content: flex-start;
          border-color: #d8e3e3;
          border-bottom: 1px solid #d8e3e3;

          svg {
            width: 1rem;
            height: 1rem;
            margin: unset;
            margin-right: 8px;
          }
        }

        &.mobile-title {
          font-weight: bold;
          border-bottom-color: #a0b9b9;
        }
      }
    }
  }

  @media (max-width: 420px) {
    .mobile-nav {
      .mobile-logo img {
        height: 32px;
      }
    }
  }

  @media (max-width: 360px) {
    .mobile-nav {
      .mobile-logo img {
        height: 22px;
      }
    }
  }
}

.om-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1;
}

.om-nav-overlay.active {
  display: block;
  @media (max-width: 992px) {
    display: none;
  }
}

.no-scroll {
  @media (max-width: 992px) {
    overflow: hidden;
  }
}

.om-eyebrow-nav {
  width: 100%;
  height: 2.5rem;
  margin: 0;
  background-color: #222;
  display: flex;
  justify-content: center;
  z-index: 4;
  position: relative;

  .nav-container {
    padding: 0 104px 0 127px;
    max-width: 1440px;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
  }

  @media (max-width: 1199px) {
    .nav-container {
      padding: 0 24px 0 32px;
    }
  }

  @media (max-width: 992px) {
    display: none;
  }
}

.om-eyebrow-nav {
  background-color: #222;
  .list-links {
    padding: 20px;
    background-color: #222;

    li {
      width: 100%;
      margin-bottom: 8px;
      text-align: left;
      padding: 0;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  button {
    padding: 0;
    border: none;
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    line-height: 1.5rem;
  }

  a {
    color: #eee;
    font-size: 1rem;
    line-height: 1.5rem;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    text-align: left;
    display: inline-block;
    width: fit-content;

    &:hover {
      border-bottom-color: #fff;
    }

    &:active {
      border-bottom-color: #fff;
    }
  }
}

.om-eyebrow-nav ul {
  display: flex;
  justify-content: flex-end;
  flex-flow: row nowrap;
  gap: 0 24px;
}

.om-eyebrow-nav ul.active {
  gap: 0 18px;
}

.om-eyebrow-nav ul li {
  display: flex;
  flex-flow: column;
  position: relative;
  padding: 7px 0 0;
}
.om-eyebrow-nav ul li .om-eyebrow-nav ul li a,
.om-eyebrow-nav ul li span,
.om-eyebrow-nav ul li button {
  color: #eee;
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  background: transparent;
  cursor: pointer;
}

.om-eyebrow-nav ul li a:hover,
.om-eyebrow-nav ul li.dropdown:hover > div > span,
.om-eyebrow-nav ul li.dropdown.active > div > span,
.om-eyebrow-nav ul li.dropdown:hover > div > button,
.om-eyebrow-nav ul li.dropdown.active > div > button {
  color: #fff;
  border-bottom: 1px solid #fff;
}

.om-eyebrow-nav ul li.dropdown > div {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.2rem;
}

.om-eyebrow-nav ul li.dropdown > div > span {
  cursor: pointer;
}

.om-eyebrow-nav ul li.dropdown > div > span::after,
.om-eyebrow-nav ul li.dropdown > div > button::after {
  background-image: url("data:image/svg+xml,%3Csvg width='11' height='7' viewBox='0 0 11 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9.743 2.496-3.7 3.726c-.187.173-.43.27-.684.274a.928.928 0 0 1-.66-.273L1 2.497a.894.894 0 0 1-.23-1.014.936.936 0 0 1 .864-.576h7.426a.932.932 0 0 1 .86.575.92.92 0 0 1-.176 1.014z' fill='%23FFF'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  width: 11px;
  height: 8px;
  margin-left: 14px;
  content: "";
  display: inline-block;
  position: relative;
  transition: transform 0.23s ease;
}

.om-eyebrow-nav ul li.dropdown svg {
  cursor: pointer;
  height: 18.4px;
  width: 18.4px;
  vertical-align: text-bottom;
}

.om-eyebrow-nav ul li.dropdown ul.dropdown-menu {
  display: none;
  width: auto;
  margin: 7px 0 0;
  border-radius: 8px;
  background-color: #222;
  position: absolute;
  top: 42px;
  left: -20px;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-right: -200px;
  z-index: 1;
}

.om-eyebrow-nav ul li.dropdown ul.dropdown-menu::before {
  display: block;
  content: "";
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid #222;
  width: 0;
  height: 0;
  position: absolute;
  top: -9.3px;
  left: 34px;
}

.om-eyebrow-nav ul li.dropdown.active ul.dropdown-menu {
  display: block;
}

.om-eyebrow-nav ul li.dropdown.language ul.dropdown-menu li a {
  display: inline-flex;
  gap: 0.5rem;
}

.om-eyebrow-nav ul li.dropdown.language ul.dropdown-menu li a:hover {
  border-bottom: none;
}

.om-eyebrow-nav ul li.dropdown.language ul.dropdown-menu li a:hover span {
  border-bottom: 1px solid #fff;
}

.om-eyebrow-nav ul li.dropdown.language ul.dropdown-menu li a img {
  height: 1.25rem;
}

.om-eyebrow-nav ul li.search {
  flex-flow: row nowrap;
}

.om-eyebrow-nav ul li.search input {
  width: 130px;
  display: none;
  border: none;
  background: transparent;
  position: relative;
  border-radius: 21.5px;
  transition: width 0.4s ease;
}

.om-eyebrow-nav ul li.search input::placeholder {
  color: #fff;
  opacity: 1;
}

.om-eyebrow-nav ul li.search.active input {
  display: block;
  border: 1px solid #ebefef;
  padding: 8px 55px 8px 16.6px;
  left: 35px;
  margin: -7px 0 -7px -35px;
  color: #fff;
}

li.search button {
  background: none;
  border: none;
}

.eyebrow ul li.search.active button.search-show {
  display: none;
}

.om-eyebrow-nav ul li.search .buttons {
  display: none;
  height: 20px;
}

.om-eyebrow-nav ul li.search.active .buttons {
  display: inline-flex;
  z-index: 1;
  position: relative;
  right: 1rem;
  gap: 0.2rem;
}

.om-eyebrow-nav ul li.search button svg,
.om-eyebrow-nav ul li.search .buttons svg {
  cursor: pointer;
  height: 20px;
  width: 20px;
}