/* HEADER */

#header {

    padding: 4px 50px;

    background: transparent;

    box-shadow: inherit;

    z-index: 99999;

    position: relative;

}



.nav { display: flex; justify-content: space-between; align-items: center;}

nav ul li { list-style: none;}

.nav ul { margin-bottom: 0; padding-left: 0;    width: 90%;    align-items: center;}

.nav ul li.logo a{font-size: 36px; font-family: "Dancing Script", cursive; color: #fff; font-weight: 600; letter-spacing: 0.5px; text-decoration: none;}

.nav ul li.search  a{font-size: 30px;color: #fff; font-weight: 100; letter-spacing: 0.5px; text-decoration: none; margin-right:20px;}

.nav ul li a i { font-size:20px;}

.nav ul li.location a{font-size: 30px;color: #fff; font-weight: 100; letter-spacing: 0.5px; text-decoration: none;}

.nav ul li.logo a:focus-visible {outline: none;}

.scroll-header {

    position: fixed !important;

    top: 0;

    width: 100%;

    z-index: 9999999;

    left: 0;

    right: 0;

    transition: .3s;

}



/* MENU */

#menu {

  background: #000;

  height: 100%;

  left: 0;

  opacity: 0;

  overflow: hidden;

  position: fixed;

  text-align: center;

  top: 0;

  transition: all 0.9s ease-in-out;

  visibility: hidden;

  width: 100%;

  z-index: 1100;

}



/* Menu open state */

#menu.open {

  opacity: 1;

  visibility: visible;

}



#menu.open li {

  animation-duration: 1s;

  animation-fill-mode: both;

  animation-name: fadeInUp;

}



/* Animation delays for each menu item */

#menu.open li:nth-child(1) { animation-delay: 0.1s; }

#menu.open li:nth-child(2) { animation-delay: 0.2s; }

#menu.open li:nth-child(3) { animation-delay: 0.3s; }

#menu.open li:nth-child(4) { animation-delay: 0.4s; }

#menu.open li:nth-child(5) { animation-delay: 0.5s; }

#menu.open li:nth-child(6) { animation-delay: 0.6s; }

#menu.open li:nth-child(7) { animation-delay: 0.7s; }

#menu.open li:nth-child(8) { animation-delay: 0.8s; }

#menu.open li:nth-child(9) { animation-delay: 0.9s; }

#menu.open li:nth-child(10) { animation-delay: 1s; }



/* Hover opacity effect */

#menu ul:hover a {

  opacity: 0.5;

}



#menu ul a {

  transform: translateZ(0);

  transition: opacity 0.3s ease-in-out;

}



#menu ul a:hover {

  opacity: 1;

}



/* Main navigation styling */

#menu .main-nav {

  position: relative;

  top: 50%;

  transform: translateY(-50%);

}



#menu .main-nav ul {

  list-style: none;

  margin: 0;

  padding: 0;

}



#menu .main-nav a {

    color: #ffffff;

    display: block;

    font-size: 24px;

    font-weight: 300;

    padding: 1rem 1rem 1rem 3rem;

    text-decoration: none;

    text-transform: capitalize;

    text-align: left;

}



#menu .main-nav a:first-child {

  padding-top: 0;

}



/* Menu footer */

#menu .menu-footer {

  padding: 2rem;

  bottom: 0;

  left: 0;

  position: absolute;

  right: 0;

}



#menu .menu-footer ul {

  display: inline-block;

  list-style: none;

  margin: 0;

  padding: 0;

}



#menu .menu-footer ul li {

  display: inline;

  margin: 0 1rem;

}



#menu .menu-footer a {

  color: #ffffff;

  text-decoration: none;

  text-transform: uppercase;

}



/* TOGGLE BUTTON */

.toggle-menu {

  background-color: transparent;

  border: none;

  cursor: pointer;

  float: right;

  height: 50px;

  outline: none;

  padding: 0;

  pointer-events: initial;

  position: relative;

  vertical-align: middle;

  width: 100px;

  z-index: 1110;

  margin-left: auto;

display: flex;

justify-content: center;

align-items: center;

}

nav .menuText {

    color: #fff;

    margin-left: 70px;

    margin-top: 5px;    font-size: 15px;

}

nav .closeText { color: #fff; display: none; margin-left: 70px;

    margin-top: 5px;}

nav button { background: inherit; border: none;}

nav .toggle-menu.active .menuText { color: #fff; display: none;}

nav .toggle-menu.active .closeText { color: #fff; display: inline-block;    font-size: 15px;}

.toggle-menu span,

.toggle-menu span::before,

.toggle-menu span::after {

  background-color: #fff;

  content: "";

  display: block;

  height: 1.5px;

  position: absolute;

  width: 26px;

  left: calc(50% - 13px);

  transform-origin: 50% 50%;

  transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;

}

.toggle-menu span {



  width: 36px;

  left: calc(50% - 23px);

}

.toggle-menu span::before {



  width: 40px;

  left: calc(50% - 22px);

}

.toggle-menu span::after {

  width: 26px;

  left: calc(50% - 8px);

}



.toggle-menu.active span,

.toggle-menu.active span::before,

.toggle-menu.active span::after {

  width: 26px !important;

  left: calc(50% - 13px) !important;

}



.toggle-menu span {

  top: calc(50% - 1.5px);

}



.toggle-menu span::before {

  top: 7px;

}



.toggle-menu span::after {

  top: -7px;

}



/* Active (cross) state */

.toggle-menu.active span {

  background-color: transparent;

  transition: background 0.2s ease-out;

}



.toggle-menu.active span::before,

.toggle-menu.active span::after {

  transition: top 0.2s ease-out, transform 0.2s 0.2s ease-out;

}



.toggle-menu.active span::before {

  top: 0;

  transform: rotate(45deg);

}



.toggle-menu.active span::after {

  top: 0;

  transform: rotate(-45deg);

}



/* Fade-in animation */

@keyframes fadeInUp {

  0% {

    opacity: 0;

    transform: translateY(20px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



   

.searchpopUp {

  background: #748FB2;

  width: 100%;

  padding: 20px 0;

  position: absolute;

  top: -150%;

  left: 0;

  z-index: 9999999;

  height: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  border-bottom: solid 1px #f7f7f7;

  transition: all .3s cubic-bezier(0,0,.38,1);

  height: 54px;

}





 .searchpopUp .input-group{

  width: 550px;

}





.searchpopUp.searchpopUpOpen {

  top: 0px;

  transition: all .3s cubic-bezier(0,0,.38,1);

} 



.serachBoxeInput  {

  width: 100%;

  position: relative;

}



.serachBoxeInput input {

  border-radius: 0;

  height: 40px;

  padding: 3px 20px;

  border-radius: 25px;

}









.serachBoxeInput button[type="submit"] {

  position: absolute;

  right: 0;

  top: 0;

  background: #060C14;

  border: none;

  height: 100%;

  width: 40px;

  color: #FFF;

  border-radius: 0 25px 25px 0;

}





#closeSearch {

  position: absolute;

  right: 10px;

  top: 10px;

  color: #fff;

      text-decoration: none;

}





.serachBoxeInput button[type="submit"] img  {

  width: 20px;

}



.categories-in-view .scroll-header {background-color:#000 !important;}

@media (max-width:767px) {

    #header {

    padding: 10px 30px 10px 15px;

}





}



@media only screen and (max-width: 500px) {

    #searchpopUp form {

        width: 80%;

    }

        .searchpopUp .input-group {

        width: 100%;

    }

}