:root {
  --sub_color: #fff;
  --sub_bg: #000;
}

nav:has(#ros__nav_5) {
  top: 0;
  background-color: var(--nav_1_style_5_b);
}

& nav {
  z-index: 9;
}

nav:has(#ros__nav_5.nav__s_2) {
  background: var(--sub_bg) !important;
  box-shadow: 0 1px 20px #00000059;

  --sub_color: #000;
  --sub_bg: #fff;

  #ros__nav_5.nav__s_2 {
    background: var(--sub_bg) !important;
    max-width: var(--premary_width);
    margin: 0 auto !important;

    & * {
      color: #000;
      fill: #000 !important;
    }
  }
}

section#ros__nav_5 {
  position: relative;
  height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--premary_width);
  margin: 0 auto;

  & * {
    color: var(--nav_1_style_5_c);
    fill: var(--nav_1_style_5_c);
    font-family: "Inria Sans", sans-serif;
  }

  .navbar-menu {
    & > li {
      .sub-menu {
        box-shadow: 2px 2px 4px #0000003b;
        background: var(--nav_1_style_5_b) !important;

        & li:hover {
          background: #00000012;
          transition: 0.5s;
        }
      }
    }
  }
  & .ros_top {
    gap: 5rem;
    height: 100%;

    & .logo {
      display: flex;
      align-items: center;

      & img {
        width: 10rem;
        object-fit: contain;
      }
    }
  }

  & > ul {
    gap: 11px;
  }
}

/* Search In Style 2 */
.Serch__Style {
  top: 35px !important;
  right: 0;

  & svg,
  & input {
    stroke: #000;
    color: #000;
  }

  &.Open__Serch {
    right: 1rem !important;
    top: 2rem;
  }
}

/*  */
@media (max-width: 576px) {
  section#ros__nav_5 {
    padding: 0 7px;

    & .ros_top ul {
      display: none;
    }
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  section#ros__nav_5 {
    padding: 0 10px;

    & #menu-navbar-menu {
      display: none;
    }
  }
}

@media (min-width: 768px) and (max-width: 950px) {
  section#ros__nav_5 {
    padding: 0 10px;

    & .ros_top {
      gap: 2rem !important;
    }
  }
}

@media (min-width: 1220px) {
  section#ros__nav_5 {
    padding: 0 7px;
  }
}