/* Slider Menu 1 */
.sliderManu__1 {
  position: fixed;
  top: 0;
  z-index: 100;

  & .Smoking_Style {
    background: transparent !important;
    box-shadow: 3px 3px 9px #00000017 !important;
  }

  & * {
    color: #ffffff !important;
  }

  & .ring_1 {
    width: 30rem;
    height: 100%;
    background: #000000e6;
    right: 5rem;
    z-index: 3;
    transition: 0.5s;
    transition-delay: 0.2s;
    overflow: hidden;
    display: flex;
    opacity: 0;
    justify-content: center;
    align-items: center;
    direction: ltr;
    padding-bottom: 1rem;

    & .logo {
      border-bottom: 1px dashed #ffffff29;
      padding-bottom: 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      z-index: 99;
      top: -17px;
      background: black;
      font-family: "Inria Sans";
      text-transform: uppercase;

      & img {
        width: 10rem;
      }

      & svg {
        cursor: pointer;
      }
    }

    & .rosContent {
      width: 95%;
      height: 91%;
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      overflow: auto;
      padding: 1rem 2rem;

      &::-webkit-scrollbar {
        display: none;
      }

      & .Name__title {
        width: 100%;
        border-bottom: 1px solid #ffffff21;

        & span {
          font-size: 16px;
          color: #fff !important;
        }
      }

      & .viewPort {
        transform: translateY(0px);
        opacity: 1;
        visibility: visible;
        transition: 1s;
      }

      & .marg {
        margin: 0;
      }
    }
  }

  & .ring_2 {
    width: 100rem;
    height: 100rem;
    background: #0808089e;
    top: -24rem;
    right: -38rem;
    z-index: 2;
    transition: 0.5s;
    transition-delay: 0.4s;
  }

  & .ring_3 {
    width: 150rem;
    height: 150rem;
    background: #08080878;
    top: -24rem;
    right: -9rem;
    z-index: 1;
    transition: 0.5s;
    transition-delay: 0.6s;
  }

  & .ring {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translate(5rem, 0rem);
  }

  & .viewRing_menu {
    transform: translate(0, 0);
    opacity: 1;
    visibility: visible;
  }
}

.open__slider {
  width: 100%;
  height: 100vh;
  opacity: 1 !important;
  visibility: visible !important;
}

/*  */
@media (max-width: 576px) {
  .sliderManu__1 {
    & .ring_1 {
      width: 100% !important;

      & .logo {
        height: unset !important;
        padding: 1rem 0 !important;
        background: #00000000 !important;
        backdrop-filter: blur(6px);
      }

      & .rosContent {
        height: 100% !important;
        padding: 0 !important;
      }
    }

    & .ring_2,
    & .ring_3 {
      display: none;
    }
  }
}