.ContainerNavbar {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.Navbar {
  margin: 0 auto;
  max-width: rem(1540px);
  padding: 0 rem(10px);
  height: rem(100px);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: rem(20px);

  @include iftablet {
    padding: 0 20px;
  }

  @include iflaptop {
    max-width: rem(1540px);
    padding: 0 28px;
    height: rem(100px);
    gap: rem(20px);
  }

  @include ifdesktop {
    padding: 0 40px;
  }

  .Logotype {
    width: rem(250px);
    height: auto;

    @include iflaptop{
      width: rem(250px);
      height: auto;
    }

    @include ifdesktop{
      width: rem(300px);
    }
  }

  .Nav {
    margin-left: auto;

    .Menu {
      display: none;

      @include iflaptop {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: rem(16px);
      }
      @include iflaptop {
        gap: rem(16px);
      }
      @include ifdesktop {
        gap: rem(32px);
      }
    }

    .Parent {
      display: block;
      position: relative;
      float: left;
      line-height: rem(40px);

      .Row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: rem(8px);
        cursor: default;

        @include ifdesktop {
          gap: rem(16px);
        }
      }

      & a {
        text-decoration: none;
      }

      & li {
        transition: background-color 0.2s ease-in-out;
      }

      &:hover > ul {
        display: block;
        position: absolute;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
      }
    }

    .Child {
      display: none;
      position: relative;
      z-index: 90;

      & li {
        padding: rem(4px) rem(16px);
        width: 100%;
        font-size: rem(14px);
        line-height: rem(40px);
        text-wrap: nowrap;

        background-color: #FFFFFF;
        transition: background-color 0.2s ease-in-out;

        & a {
          color: $color-text;
          display: block;
        }
      }

      & .Parent > .Row > .Expand {
        transform: rotateZ(0deg);
      }
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0px;
      min-width: 12em;
      font-family: $font-montseratt;
      font-weight: 500;
      font-size: rem(16px);
      line-height: 100%;
      color: $color-text;
    }

    ul ul ul {
      left: 100%;
      top: 0;
      margin-left: 1px;
    }

    li:hover {
      color: $color-link-hover;
    }

    .Parent li:hover {
      background-color: $color-link-hover; //#F0F0F0
      color: $color-white;

      & > a {
        color: $color-white;
      }

      & > .Expand {
        color: $color-white;
      }
    }

    .Expand {
      transform: rotateZ(90deg);
    }
  }

  .Invite {
    display: none;

    @include iflaptop {
      display: flex;
    }
  }

  .MobileNav{
    display: block;
    margin-right: rem(10px);
    @include iflaptop{
      display: none;
    }
  }
}