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

& nav {
  position: relative;
  z-index: 9;
}

section#ros__nav_3 {
  padding: 0 10px 0;
  box-shadow: 0 2px 16px #00000054;
  background: #ffff;

  & .nav__continer {
    max-width: var(--premary_width);
    display: flex;
    margin: 0 auto;
    justify-content: space-between;

    & .logo {
      display: flex;
      align-items: center;
      font-family: "Inria Sans";

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

    & .option {
      display: grid;
      gap: 6px;
      padding: 1rem 0 0;

      & .top {
        display: flex;
        align-items: center;
        gap: 10px;
        justify-content: flex-end;

        & form {
          max-width: 25rem;
          width: 25rem;
          border: 1px solid #00000047;
          padding: 4px 8px 2px 16px;
          border-radius: 100px;

          & * {
            border: none;
          }

          & input {
            width: 100%;
            outline: none;
            font-weight: bold;
            background: transparent;
            font-size: 11px;
          }

          & button {
            background: transparent;
          }
        }

        & ul {
          gap: 5px;

          & li {
            display: contents;
          }
        }
      }

      & .bottom {
        & ul {
          background: var(--sub_bg);

          & li {
            height: 100%;
            font-family: "Inria Sans";

            & .sub-menu {
              box-shadow: 2px 3px 0 #0000002e;
            }

            & a {
              font-size: 13px;
            }
          }
        }
      }
    }
  }
}

.nav__s_3 {
  background: black !important;
  --sub_color: #fff;
  --sub_bg: #000;

  & * {
    fill: #fff;
    color: #fff;
  }

  & .nav__continer {
    & .option {
      & .top {
        & form {
          border-color: #ffffff47 !important;
        }
      }
    }
  }
}

/*  */
@media (max-width: 577px) {
  section#ros__nav_3 {
    padding: 1rem 7px;

    & .nav__continer {
      gap: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;

      & .option {
        padding: 0;
        width: -webkit-fill-available;

        & .top {
          & form {
            width: 100%;
          }
        }

        & .bottom {
          display: none;
        }
      }
    }
  }
}

@media (min-width: 577px) and (max-width: 940px) {
  section#ros__nav_3 {
    padding: 1rem 7px;

    & .nav__continer {
      gap: 11px;

      & .option {
        padding: 0;

        & .top {
          width: 25rem;
        }

        & .bottom {
          display: none;
        }
      }
    }
  }
}