@include respond-to(up-md) {
.top-navbar {
  background-color: transparent;
  padding: 0;
  @include transition($transition-time);
  .navbar-brand {
    margin-right: 0;
    padding: 10px 0;
    img {
      max-width: 230px;
      max-height: 50px;
      @include transition($transition-time);
    }
    .small-logo{
      // display: none;
      max-height: 0;
    }
  }
  .navbar-nav {
    .nav-item {
      margin: 10px 12px;
      // position: static;
      &:last-child{
        margin-right: 0;
      }
      &.active{
        >.nav-link{
          color: $primary-color !important;
          background-color: $white;
          @include border-radius($radius-common);
        }
      }
      .nav-link {
        color: $white;
        text-transform: capitalize;
        // padding: 10px;
        font-size: 15px;
        line-height: 20px;
        &:hover {
          color: $primary-color !important;
          background-color: $white;
          @include border-radius($radius-common);
        }
        // &:hover {
        //   .nav-link {
        //     color: $secondary-color;
        //   }
        //   .dropdown-menu {
        //     display: block;
        //   }
        // }
        &.nav-button{
          background-color: $white;
          color: $primary-color;
          @include border-radius($radius-common);
          @include box-shadow(0 3px 6px rgba($black, 0.16));
          &:hover {
            color: $white !important;
            background-color: $primary-color;
          }
        }
      }
      &:hover {
        // color: $primary-color;
        // background-color: $white;
        // @include border-radius($radius-common);
        .nav-link {
          color: $primary-color;
          background-color: $white;
          @include border-radius($radius-common);
          &.nav-button{
              color: $white !important;
              background-color: $primary-color;
          }
        }
        .dropdown-menu {
          
          @media (min-width: 767px) {
            display: block;  
          }
        }
      }
      &.dropdown {
        .dropdown-menu {
          background-color: transparent !important;
          width: 210px;
          padding:10px 0 0 0;
          border: 0;
          margin: 0;
          @include border-radius(0);
          @include box-shadow(none);
          font-size: 15px;
          color: $base-color;
          ul{
            background-color: $white !important;
            @include border-radius($radius-common);
            @include box-shadow(0 3px 6px rgba($black, 0.16));
          }          
          li {
            margin: 0;
            &.active{
              >.nav-link{
                color: $primary-color;
                background-color: $light-gray;
              }
            }
            .nav-link {
              padding: 7.5px 15px;
              line-height: normal;
              color: $base-color;
              &:hover {
                color: $primary-color;
                background-color: $light-gray;
                @include border-radius(0px);
              }
              .pro-icon{
                width: 25px;
                margin-right: 0.5rem;
              }
            }
            &:first-child{
              .nav-link {
                  @include border-radius($radius-common $radius-common 0 0);
              }
            }
            &:last-child{
              .nav-link {
                  @include border-radius(0 0 $radius-common $radius-common);
              }
            }
          }
        }
      }
    }
  }
  
  &.sticky{
    background-color: $white;
    border-bottom: 1px solid $stroke-color;
    // height: 40px;
    .navbar-brand{
      .big-logo{
        // display: none;
        max-height: 0;
        max-width: 0;
      }
      .small-logo{
        // display: block;
        max-height: 40px;
      }
      img{
        max-height: 40px;
      }
    }
    .navbar-nav{
      .nav-item{
        .nav-link{
          // padding: 5px 10px;
          color: $base-color;
          // @include transition(none);
          line-height: 20px;
          &.nav-button{
            background-color: $primary-color;
            color: $white !important;
            &:hover {
              color: $primary-color !important;
              background-color: $white;
            }
          }
        }
        &:hover {
          .nav-link {
            &.nav-button{
              color: $primary-color !important;
              background-color: $white;
            }
          }
        }
      }
    }  
  }
}
.black-header{
  .sticky{
    .small-logo{
      max-height: 40px !important;
    }
    .black-logo{
      max-height: 0 !important;
    }
  }
  .top-navbar{
    .navbar-brand{
      .big-logo{
        display: none;
      }
      .black-logo{
        display: inherit;
        max-height: 50px;
      }
      .small-logo{
        max-height: 0;
      }
    }
    .navbar-nav{
      .nav-item{
        .nav-link{
          color: $base-color;         
        }
      }
    }
  }   
}
}