/*====================
12. Navbar css
======================*/

.navbar {
    /*background: var(--color-dark); /* --color-white */
    background: var(--color-dark);
    padding-top: 0px;
    padding-bottom: 0px;
	box-shadow: none; /*var(--box-shadow);*/
    z-index: 999;
  }
  
  .navbar.fixed-top {
    background: var(--color-dark); /* --color-white */
	box-shadow: none; /*var(--box-shadow2);*/
    animation: slide-down 0.7s;
  }
  
  
  @keyframes slide-down {
    0% {
      transform: translateY(-100%);
    }
  
    100% {
      transform: translateY(0);
    }
  }
  
  .navbar .navbar-brand .logo-display {
    display: block;
  }
  
  .navbar .navbar-brand .logo-scrolled {
    display: none;
  }
  
  .navbar.fixed-top .navbar-brand .logo-display {
    display: none;
  }
  
  .navbar.fixed-top .navbar-brand .logo-scrolled {
    display: block;
  }
  
  .navbar .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
  }
  
  .navbar-toggler-mobile-icon {
    display: inline-block;
    width: inherit;
    height: inherit;
  }
  
  .navbar-brand {
    margin-right: 0;
  }
  
  .navbar-brand img {
    width: 200px;
  }
  
  .navbar .dropdown-toggle::after {
    display: inline-block;
    margin-left: 5px;
    vertical-align: baseline;
    font-family: 'Font Awesome 6 Pro';
    content: "\f107";
    font-weight: 600;
    border: none;
    font-size: 14px;
  }
  
  @media all and (max-width: 1199px) {
    .nav-right {
      margin-left: 25px !important;
    }
  
    .navbar .nav-item .nav-link {
      margin-right: 15px;
    }
  
    .navbar .nav-right-btn {
      display: none;
    }
  }
  
  @media all and (min-width: 992px) {
    .navbar .nav-item .nav-link {
      margin-right: 22px;
      padding: 30px 0 30px 0;
      font-size: 17px;
      font-weight: 600;
      color:  var(--color-white); /*var(--color-white); /* --color-dark */
      text-transform: capitalize;
    }
  
    .navbar .nav-item:last-child .nav-link {
      margin-right: 0;
    }
  
    .navbar .nav-item .dropdown-menu {
      display: block;
      opacity: 0;
      visibility: hidden;
      transition: .3s;
      margin-top: 0;
      border: none;
      left: -15px;
      border-radius: 8px;
      background: var(--color-white); /* --color-white */
      width: 220px;
      box-shadow: var(--box-shadow);
    }
  
    .navbar .nav-item .dropdown-menu li {
      border-bottom: 1px solid var(--border-info-color);
    }
  
    .navbar .nav-item .dropdown-menu li:last-child {
      margin-bottom: 0;
      border-bottom: none;
    }
  
    .navbar .nav-item .dropdown-menu .dropdown-item {
      font-size: 16px;
      padding: 8px 25px;
      font-weight: 500;
      color:  var(--color-dark); /* --color-dark */
      position: relative;
      overflow: hidden;
      text-transform: capitalize;
      transition: all .3s ease-in-out;
    }
  
    .navbar .nav-item .dropdown-menu .dropdown-item:hover {
      background: transparent;
      color: var(--theme-color); /* --theme-color */
      padding-left: 32px;
    }
  
    .navbar .nav-item .dropdown-menu .dropdown-item::before {
      content: "//";
      position: absolute;
      left: 15px;
      top: 8px;
      color: var(--theme-color);
      opacity: 0;
      visibility: hidden;
      transition: var(--transition);
      z-index: -1;
    }
  
    .navbar .nav-item .dropdown-menu .dropdown-item:hover::before {
      opacity: 1;
      visibility: visible;
    }
  
    .navbar .nav-item .nav-link {
      position: relative;
    }
  
    .navbar .nav-item .nav-link.active,
    .navbar .nav-item:hover .nav-link {
      color: var(--color-white); /* --theme-color */
    }
  
    .navbar .nav-item:hover .dropdown-menu {
      transition: .3s;
      opacity: 1;
      visibility: visible;
      top: 100%;
      transform: rotateX(0deg);
    }
  
    .navbar .dropdown-menu-end {
      right: 0;
      left: auto;
    }
  
    .navbar .dropdown-menu.fade-down {
      top: 80%;
      transform: rotateX(-75deg);
      transform-origin: 0% 0%;
    }
  
    .navbar .dropdown-menu.fade-up {
      top: 140%;
    }
  
    .navbar #main_nav {
      justify-content: flex-end;
    }
  
    /* nav right */
    .nav-right {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-left: 45px;
    }
  
    .nav-right-link {
      position: relative;
      font-size: 20px;
      color:  var(--color-dark);
      transition: var(--transition);
    }
  
    .nav-right-link:hover {
      color: var(--theme-color) !important;
    }
  
    .nav-right .sidebar-btn .nav-right-link,
    .nav-right .search-btn .nav-right-link {
      border: none;
      background: transparent;
      color: var(--color-dark);
      font-size: 28px;
      padding-right: 0;
    }
  
    .nav-right .search-btn .nav-right-link {
      font-size: 20px;
      padding: 0;
    }
  
    .nav-right .cart-btn .nav-right-link {
      position: relative;
      font-size: 20px;
      padding: 0;
      margin-right: 15px;
    }
  
    .nav-right .cart-btn span{
      position: absolute;
      right: -9px;
      top: -2px;
      width: 15px;
      height: 15px;
      line-height: 15px;
      text-align: center;
      font-size: 12px;
      border-radius: 50px;
      background: var(--theme-color);
      color: var(--color-white);
    }
  
  }
  
  
  /* mobile menu */
  .mobile-menu-right {
    display: none;
  }
  
  @media all and (max-width: 991px) {
    .navbar {
      top: 0;
      right: 0;
      left: 0;
      position: fixed;
    }
    .navbar-brand {
      padding-left: 10px;
    }
  
    .navbar-brand img {
      width: 130px;
    }
  
    .navbar-collapse {
      max-height: 220px;
      overflow: hidden;
      overflow-y: auto;
      padding: 0 20px;
      background-color: var(--color-white);
    }
  
    .dropdown-toggle::after {
      float: right;
    }
  
    .navbar .nav-item .nav-link {
      color:  var(--color-dark);
      font-weight: 700;
      transition: var(--transition);
    }
  
    .navbar .nav-item .nav-link:hover {
      color: var(--theme-color) !important;
    }
  
    .navbar-toggler {
      padding: 0;
      border: none;
    }
  
    .mobile-menu-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }
  
    .mobile-menu-right .nav-right-link {
      background: transparent;
      border: none;
      font-size: 20px;
      color: var(--color-dark);
    }
  
    .mobile-menu-right .nav-right-link:hover{
      color: var(--theme-color);
    }
  
    .search-area.open{
      top: 50px !important;
    }
  
    .navbar-toggler-mobile-icon {
      font-size: 25px;
      color:  var(--color-dark);
      font-weight: 500;
    }
  
    .navbar .dropdown-menu {
      border-radius: 8px;
    }
  
    .nav-right {
      display: none;
    }
  
  }
  
  
  /*============================
  13. Multi level dropdown menu
  ==============================*/
  
  .navbar .nav-item .dropdown-submenu {
    position: relative;
  }
  
  .navbar .nav-item .dropdown-submenu .dropdown-menu::before {
    display: none;
  }
  
  .navbar .nav-item .dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 15px;
    top: 10px;
    font-weight: 600;
  }
  
  .navbar .nav-item .dropdown-submenu a:hover {
    background: transparent;
    color: var(--color-white);
  }
  
  .navbar .nav-item .dropdown-submenu .dropdown-menu {
    top: 120%;
    left: 100%;
    opacity: 0;
    visibility: hidden;
  }
  
  .navbar .nav-item .dropdown-submenu:hover .dropdown-menu {
    top: 0;
    opacity: 1;
    visibility: visible;
  }
  
  @media all and (max-width: 991px) {
    .navbar .nav-item .dropdown-submenu .dropdown-menu {
      margin: 0 17px;
    }
  
    .navbar .nav-item .dropdown-submenu .dropdown-menu {
      opacity: unset;
      visibility: unset;
    }
  
    .navbar .nav-item .dropdown-submenu a::after {
      top: 4px;
    }
  
    .navbar .nav-item .dropdown-submenu a:hover {
      color: var(--theme-color);
    }
  }