.navigation {
  background-color: transparent;

  .navbar {
    border-bottom: 1px solid $border-color;
    padding: 25px 0;
    @include tablet {
      padding: 15px 0;
    }
  }

  .navbar-nav {
    flex-direction: row;
    @include desktop {
      flex-direction: column;
    }
    &:hover {
      .nav-item::after,
      .nav-link:not(:hover) {
        opacity: .5;
      }
      .dropdown:hover {
        .nav-link {
          opacity: 1;
        }
      }
    }
  }
  
  .nav-item {
    margin: 0;
    position: relative;
    &::after {
      position: absolute;
      content: "/";
      right: -2px;
      top: 50%;
      transform: translateY(-50%);
      @include desktop {
        display: none;
      }
    }
  
    .nav-link {
      font-size: 16px;
      font-weight: 500;
      font-family: $primary-font;
      text-transform: capitalize;
      line-height: 1;
      display: inline-block;
    }
  
    &:last-child {
      &::after {
        display: none;
      }
    }
  
    &.dropdown .nav-link {
      position: relative;
      padding-right: 38px !important;
      @include desktop {
        padding-right: 28px !important;
      }
    }
  
    &.dropdown .nav-link::after {
      display: none;
    }
  
    &.dropdown .nav-link::before {
      position: absolute;
      right: 24px;
      @include desktop {
        right: 13px;
      }
      top: calc(50% - 6px);
      display: inline-block;
      vertical-align: .255em;
      content: "";
      height: 8px;
      width: 8px;
      border: 2px solid;
      border-left: 0;
      border-top: 0;
      border-color: inherit;
      border-radius: 2px;
      transform: rotate(45deg);
      transition: 0s;
    }
  }  

  @media (min-width:991px) {
    .dropdown-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      width: 220px;
      transition: 0.2s;
      left: 50%;
      border-radius: 0;
      transform: translate(-50%, 6px);
    }

    .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      box-shadow: 0 10px 30px rgba(22, 28, 45, .10);
      transform: translate(-50%, -6px);
    }
  }

  .dropdown-menu {
    border: 0;
    padding: 0 25px;
    &:hover {
      .dropdown-item:not(:hover) {
        opacity: .5;
      }
    }
  }

  .dropdown-item {
    font-size: 16px;
    padding: 5px 0;
    font-weight: 500;
    &:first-child {
      padding-top: 15px;
      @include desktop {
        padding-top: 5px;
      }
    }
    &:last-child {
      padding-bottom: 15px;
      @include desktop {
        padding-bottom: 5px;
      }
    }
  }

  .dropdown-item.active,
  .dropdown-item:active,
  .dropdown-item:focus,
  .dropdown-item:hover {
    color: initial;
    background-color: transparent;
  }

  .navbar-light .navbar-toggler {
    border-color: transparent;
    padding: 0;
    font-size: 20px;
    color: $black;
    transition: .3s ease;
    .navbar-toggler-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }
  }

  .navbar-light .navbar-nav .nav-link {
    color: $text-color-dark;
    font-weight: 500;
    padding: 15px 20px;
    &:hover {
      color: $black;
    }
  }

  @include desktop {
    .navbar-nav {
      background-color: $white;
      padding: 15px 0;
      border-radius: 0;
    }
    .dropdown-menu {
      text-align: center;
    }
    .navbar-light .navbar-nav .nav-link {
      padding: 10px 20px;
    }
  }
  
  .search {
    max-width: 250px;
    @include tablet {
      width: 100%;
      max-width: initial;
      margin-top: 15px;
    }
    input {
      background: url(data:image/png;base64, ) 6px 5px no-repeat $white;
      width: 100%;
      border: none;
      padding: 11px 40px 11px 15px;
      border-radius: 0;
      background-size: 15px;
      background-position: calc(100% - 15px) center;
      border: 1px solid #ddd;
      &:focus{
        outline: 0;
      }
    }
  }
}

.navbar-footer{
  justify-content: center;
  flex-wrap: wrap;
  .nav-item{
    margin: 10px 0;
    .nav-link{
      color: $white;
    }
  }
}