.navbar {
  height: 72px;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  position: fixed;
  box-shadow: 0 8px 10px -6px rgba(59, 70, 126, 0.3);
  z-index: 10000;
}

.desktop-menu {
  display: none;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #6070ff;
  mix-blend-mode: multiply;
  position: fixed;
  z-index: 10000;
  backdrop-filter: blur(10px);
}

.mobile-menu-item {
  font-weight: 600;
  font-size: 32px;
  font-family: 'Poppins', Arial, Verdana, Tahoma, sans-serif;
  line-height: 44px;
  color: #fff;
  margin-left: 10%;
  margin-top: 5%;
}

.mobile-menu i {
  font-size: 30px;
  color: #fff;
  right: 0;
  margin-left: 87%;
  margin-top: 5%;
}

.mobile-menu > *:hover {
  cursor: pointer;
}

@media only screen and (min-width: 768px) {
  .menu-burger-icon {
    display: none !important;
  }

  .desktop-menu {
    animation-name: scale-navbar;
    animation-duration: 5s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 350px;
    margin-right: 50px;
    height: 100%;
  }

  .menu-item {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .menu-item:hover {
    cursor: pointer;
    border-bottom: 3px solid #99a1ea;
  }

  .active {
    border-bottom: 3px solid #6070ff;
  }
}

@keyframes scale-navbar {
  from {
    margin-left: 100%;
  }

  to {
    margin-left: 0%;
  }
}

.menu-item {
  font-family: 'Poppins', Arial, Verdana, Tahoma, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #344563;
}

.menu-burger-icon {
  margin-right: 36px;
}

.bar {
  margin: 5px 0;
  width: 20px;
  height: 2px;
  background-color: #6070ff;
  border-radius: 2px;
}

.logo {
  animation-name: scale-logo, rotate-logo;
  animation-duration: 1.5s, 1s;
  color: #6070ff;
  font-size: 1.3rem;
  margin-left: 24px;
  font-family: 'Poppins', Arial, Verdana, Tahoma, sans-serif;
  font-weight: bolder;
}

@keyframes rotate-logo {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes scale-logo {
  from {
    font-size: 0;
  }

  to {
    font-size: 1.3rem;
  }
}

.logo:hover {
  cursor: pointer;
}

.menu-burger-icon:hover {
  cursor: pointer;
}