/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
	z-index: 997;
	position: fixed;
	padding: 30px 0;
	top: 0;
	left: 0;
	right: 0;
	transition: all 0.5s;
}
.scroll-header {
	  background-color: #151515d4;
	  -moz-box-shadow: 0 10px 33px rgba(0, 0, 0, 0.1);
	  -webkit-box-shadow: 0 10px 33px rgba(0, 0, 0, 0.1);
	  box-shadow: 0 10px 33px rgba(0, 0, 0, 0.1);
  }
  .header .logo img {
	max-height: 40px;
	margin-right: 6px;
  }
  .black-logo {
	  display: none;
  }
/*--------------------------------------------------------------
# Desktop Navigation
--------------------------------------------------------------*/
@media (min-width: 1280px) {
	.menu-default-style {
	  padding: 0;
	}
  
	.menu-default-style ul {
	  margin: 0;
	  padding: 0;
	  display: flex;
	  list-style: none;
	  align-items: center;
	}
  
	.menu-default-style li {
	  position: relative;
	}
  
	.menu-default-style>ul>li {
	  white-space: nowrap;
	  padding: 10px 0 10px 28px;
	}
	.menu-default-style a,
	.menu-default-style a:focus {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 0 3px;
	  font-family: var(--font-primary);
	  font-size: var(--font-14);
	  font-weight: 500;
	  color: rgba(255, 255, 255, 1);
	  text-transform: uppercase;
	  white-space: nowrap;
	  transition: 0.3s;
	  position: relative;
	}
  
	.menu-default-style a i,
	.menu-default-style a:focus i {
	  font-size: var(--font-12);
	  line-height: 0;
	  margin-left: 5px;
	}
	#navbar ul li a.active {
		color: var(--main-color);
	}
	.menu-default-style>ul>li>a:before {
	  content: "";
	  position: absolute;
	  width: 100%;
	  height: 2px;
	  bottom: -6px;
	  left: 0;
	  /* background-color: var(--main-color); */
	  visibility: hidden;
	  width: 0px;
	  transition: all 0.3s ease-in-out 0s;
	}
  
	.menu-default-style a:hover:before,
	.menu-default-style li:hover>a:before,
	.menu-default-style .active:before {
	  visibility: visible;
	  width: 100%;
	}
  
	.menu-default-style a:hover,
	.menu-default-style .active,
	.menu-default-style .active:focus,
	.menu-default-style li:hover>a {
	  color: var(--main-color);
	}
  
	.menu-default-style .dropdown ul {
	  display: block;
	  position: absolute;
	  left: 28px;
	  top: calc(100% + 30px);
	  margin: 0;
	  padding: 10px 0;
	  z-index: 99;
	  opacity: 0;
	  visibility: hidden;
	  background: #151515d4;
	  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
	  transition: 0.3s;
	}
  
	.menu-default-style .dropdown ul li {
	  min-width: 200px;
	}
  
	.menu-default-style .dropdown ul a {
	  padding: 8px 20px;
	  font-size: var(--font-18);
	  text-transform: none;
	  color: var(--color-default);
	  font-weight: 400;
	}
  
	.menu-default-style .dropdown ul a i {
	  font-size: var(--font-12);
	}
  
	.menu-default-style .dropdown ul a:hover,
	.menu-default-style .dropdown ul .active:hover,
	.menu-default-style .dropdown ul li:hover>a {
	  color: var(--main-color);
	}
  
	.menu-default-style .dropdown:hover>ul {
	  opacity: 1;
	  top: 100%;
	  visibility: visible;
	}
  
	.menu-default-style .dropdown .dropdown ul {
	  top: 0;
	  left: calc(100% - 30px);
	  visibility: hidden;
	}
  
	.menu-default-style .dropdown .dropdown:hover>ul {
	  opacity: 1;
	  top: 0;
	  left: 100%;
	  visibility: visible;
	}
}
  
@media (min-width: 1280px) and (max-width: 1366px) {
	.menu-default-style .dropdown .dropdown ul {
	  left: -90%;
	}
  
	.menu-default-style .dropdown .dropdown:hover>ul {
	  left: -100%;
	}
}
  
@media (min-width: 1280px) {
  
	.mobile-nav-show,
	.mobile-nav-hide {
	  display: none;
	}
}
  
  /* Scrolling Effect */
  @media (min-width: 1280px) {
	  .menu-scrolling-style a,
	  .menu-scrolling-style a:focus {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 3px;
		font-family: var(--font-primary);
		font-size: var(--font-14);
		font-weight: 500;
		color: var(--white-color);
		text-transform: uppercase;
		white-space: nowrap;
		transition: 0.3s;
		position: relative;
	  }
	
	}
  
	
  /*--------------------------------------------------------------
  # Mobile Navigation
  --------------------------------------------------------------*/
@media (max-width: 1279px) {
	.navbar {
	  position: fixed;
	  top: 0;
	  right: -100%;
	  width: 100%;
	  max-width: 400px;
	  bottom: 0;
	  transition: 0.3s;
	  z-index: 9997;
	}
  
	.navbar ul {
	  position: absolute;
	  inset: 0;
	  padding: 50px 0 10px 0;
	  margin: 0;
	  background: rgba(0, 0, 0, 0.8);
	  overflow-y: auto;
	  transition: 0.3s;
	  z-index: 9998;
	}
  
	.navbar a,
	.navbar a:focus {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  padding: 10px 20px;
	  font-family: var(--font-primary);
	  font-size: var(--font-15);
	  font-weight: 500;
	  color: rgba(255, 255, 255, 1);
	  white-space: nowrap;
	  text-transform: uppercase;
	  transition: 0.3s;
	}
  
	.navbar a i,
	.navbar a:focus i {
	  font-size: var(--font-12);
	  line-height: 0;
	  margin-left: 5px;
	}
  
	.navbar a:hover,
	.navbar .active,
	.navbar .active:focus,
	.navbar li:hover>a {
	  color: #fff;
	}
  
	.navbar .dropdown ul,
	.navbar .dropdown .dropdown ul {
	  position: static;
	  display: none;
	  padding: 10px 0;
	  margin: 10px 20px;
	  transition: all 0.5s ease-in-out;
	  border: 1px solid #222428;
	}
  
	.navbar .dropdown>.dropdown-active,
	.navbar .dropdown .dropdown>.dropdown-active {
	  display: block;
	}
  
	.mobile-nav-show {
	  position: relative;
	  color: var(--main-color);
	  font-size: var(--font-28);
	  cursor: pointer;
	  line-height: 0;
	  transition: 0.5s;
	  z-index: 9999;
	  padding-right: 10px;
	}
  
	.mobile-nav-hide {
	  color: #fff;
	  font-size: var(--font-32);
	  cursor: pointer;
	  line-height: 0;
	  transition: 0.5s;
	  position: fixed;
	  right: 20px;
	  top: 20px;
	  z-index: 9999;
	}
  
	.mobile-nav-active {
	  overflow: hidden;
	}
  
	.mobile-nav-active .navbar {
	  right: 0;
	}
  
	.mobile-nav-active .navbar:before {
	  content: "";
	  position: fixed;
	  inset: 0;
	  background: rgba(0, 0, 0, 0.6);
	  z-index: 9996;
	}
}