/*  
    template-name: shotgear;
    The owner of the template: ahmed samy;
    template-version: 1.0;
    Date created: 22/2/2020
*/
/*start header*/
header nav {
  /*nav in header*/
  z-index: 9998;
  background: #fff;
  color: #182028;
}

header nav .logo {
  /*logo in nav*/
  line-height: 75px;
}

header nav .logo img {
  /*img in logo*/
  cursor: pointer;
}

header nav .ul ul {
  /*ul in .ul in nav*/
  padding: 0;
  margin: 0;
  line-height: 80px;
}

header nav .ul ul li {
  /*li in ul*/
  display: inline-block;
  margin: 0 10px;
}

header nav .ul ul li a {
  /*a in li*/
  cursor: pointer;
}

header nav .ul ul li a::after, header nav .ul ul li a::before {
  /*after & before custom-anchor*/
  background: #FF4800;
}

header nav .ul ul li a:hover, header nav .ul ul li a.active {
  /*hover on custom-anchor*/
  color: #FF4800;
}

header nav .ul ul li.drop {
  /*drop li in ul*/
  position: relative;
}

header nav .ul ul li.drop .demo-icon {
  /*demo-icon in drop*/
  width: 0;
  height: 0;
}

header nav .ul ul li.drop .drop-down {
  /*drop-down in drop*/
  position: absolute;
  z-index: 9998;
  top: 102%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background: #FF4800;
  padding: 10px 0;
  line-height: 50px;
  opacity: 0;
  visibility: hidden;
  border-radius: 5px;
}

header nav .ul ul li.drop .drop-down li {
  /*li in drop-down*/
  color: #fff;
  margin: 0 20px;
}

header nav .ul ul li.drop .drop-down li a {
  /*custom-anchor drop-down*/
  color: inherit;
}

header nav .ul ul li.drop .drop-down li a:before, header nav .ul ul li.drop .drop-down li a::after {
  /*before & after custom-anchor drop-down*/
  background: #fff;
}

header nav .ul ul li.drop .drop-down::before {
  /*before drop-down*/
  content: "";
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  background: #FF4800;
}

header nav .ul ul li.drop:hover .drop-down {
  /*when hover on drop*/
  opacity: 1;
  visibility: visible;
}

header nav .menu-search {
  /*menu-search in nav*/
  line-height: 80px;
}

header nav .menu-search .demo-icon {
  /*demo-icon in menu-search*/
  font-size: 20px;
  cursor: pointer;
}

header nav .menu-search .demo-icon:hover {
  /*when hover on demo-icon*/
  color: #FF4800;
}

header nav .menu-search .demo-icon:first-of-type {
  /*first demo-icon in menu-search*/
  margin-right: 15px;
}

header nav .fixed-search {
  /*fixed-search in nav*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
  display: none;
}

header nav .fixed-search.open {
  /*when click on fixed-search*/
  top: 0;
  left: 0;
  pointer-events: all;
}

header nav .fixed-search .over-lay {
  /*parent over-lay fixed-search*/
  width: 100%;
  height: 100%;
  background: #182028;
  opacity: .97;
  padding: 30px 0 0;
}

header nav .fixed-search .over-lay form {
  /*form in over-lay*/
  margin-top: 200px;
  border-bottom: 1px solid #999;
}

header nav .fixed-search .over-lay form input.btn {
  /*input in form*/
  background: transparent;
  width: calc(100% - 40px);
  padding: 10px 10px;
  text-transform: capitalize;
  text-align: left;
  cursor: text;
  font-size: 22px;
  color: #fff;
}

header nav .fixed-search .over-lay form .demo-icon {
  /*demo-icon in form*/
  color: #fff;
  font-size: 26px;
  line-height: 50px;
  cursor: pointer;
}

header nav .fixed-search .over-lay form .demo-icon:hover {
  /*when hover on demo-icon*/
  color: #FF4800;
}

header nav .fixed-menu {
  /*fixed-menu in nav*/
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
  color: #fff;
  display: none;
}

header nav .fixed-menu.open {
  /*when click on fixed-menu*/
  top: 0;
  left: 0;
  pointer-events: all;
}

header nav .fixed-menu .over-lay {
  /*parent over-lay fixed-menu*/
  width: 100%;
  height: 100%;
  background: #182028;
  opacity: .97;
  padding: 30px 0 0;
}

header nav .fixed-menu .over-lay ul {
  /*ul in fixed-menu*/
  padding: 0;
  margin: 30px 0 0;
  line-height: 40px;
}

header nav .fixed-menu .over-lay ul li {
  /*li in ul fixed-menu*/
  display: block;
}

header nav .fixed-menu .over-lay ul li a {
  /*a in li fixed-menu*/
  cursor: pointer;
}

header nav .fixed-menu .over-lay ul li a::after, header nav .fixed-menu .over-lay ul li a::before {
  /*after & before custom-anchor fixed-menu*/
  background: #FF4800;
}

header nav .fixed-menu .over-lay ul li a:hover, header nav .fixed-menu .over-lay ul li a.active {
  /*hover a fixed-menu*/
  color: #FF4800;
}

header nav .fixed-menu .over-lay ul li.drop {
  /*drop fixed-menu*/
  position: relative;
}

header nav .fixed-menu .over-lay ul li.drop .demo-icon {
  /*demo-icon in drop fixed-menu*/
  width: 0;
  height: 0;
}

header nav .fixed-menu .over-lay ul li.drop .drop-down {
  /*drop-menu fixed-menu*/
  line-height: 40px;
  display: none;
}

header nav .fixed-menu .over-lay ul li.drop .drop-down li {
  /*li fixed-menu*/
  color: #fff;
}

header nav .fixed-menu .over-lay ul li.drop .drop-down li a {
  /*a fixed-menu*/
  color: inherit;
}

header nav .fixed-menu .over-lay ul li.drop .drop-down li a:before, header nav .fixed-menu .over-lay ul li.drop .drop-down li a::after {
  /*before & after custom-anchor fixed-menu*/
  background: #fff;
}

header nav.active {
  /*nav active when scroll > 200*/
  background: #FF4800;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

header nav.active .ul li a:hover {
  /*a when scroll > 200*/
  color: #182028;
}

header nav.active .ul li a:hover::after {
  /*a after when scroll > 200*/
  background: #182028;
}

header nav.active .ul li a:hover::before {
  /*a before when scroll > 200*/
  background: #182028;
}

header nav.active .ul li.drop .drop-down {
  /*drop-down in .ul when scroll > 200*/
  background: #182028;
}

header nav.active .ul li.drop .drop-down:before {
  background: #182028;
}

header nav.active .ul li.drop .drop-down li:hover {
  color: #fff;
}

header nav.active .menu-search .demo-icon:hover {
  /*demo-icon in menu-search when scroll > 200*/
  color: #182028;
}

header nav .ul ul li.drop .drop-down, header nav .menu-search .demo-icon, header nav .fixed-search .over-lay form .demo-icon {
  /*transition .3s*/
  -webkit-transition: .3s;
  transition: .3s;
}

/*end header*/