.header {
  width: 100%;
  /* flex layout */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2%;
}
/* links */
.navbar li {
  display: inline-block;
  margin-right: "25px";
}

.navbar li span {
  position: relative !important;
  color: #999;
  transition: all 0.3s ease 0.1s;
}

.navbar li span:hover {
  /* color: #0088a9; */
  color: black;
}
nav ul li span::before,
nav ul li span::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 0;
  left: auto;
  width: 0;
  height: 3px;
}

nav ul li span::after {
  background-color: #f25757;
  transition: all 0.25s cubic-bezier(0.694, 0.048, 0.335, 1);
}

nav ul li span:hover::after,
nav ul li span:hover::before {
  width: 100%;
  left: 0;
}
/* //new header navbar */

.HeaderNavBar::before,
.HeaderNavBar::after {
  content: "";
  position: absolute;
  top: 46px;
  right: 0;
  left: auto;
  width: 0;
  height: 3px;
}

.activeNavBar {
  font-weight: 600 !important;
  height: 3px !important;
  border-bottom: 3px solid #f25757;
  padding-bottom: 5px !important;
  left: auto;
  width: 0;
  height: 3px;
}
.headerActiveNavBar {
  font-weight: 600;
  height: 3px;
  border-bottom: 3px solid #f25757;
  padding-bottom: 5px;
  left: auto;
  width: 0;
  height: 3px;
}

.ActiveHeader {
  font-weight: 600;
  height: 3px;
  border-bottom: 3px solid #f25757;
  padding-bottom: 5px;
  left: auto;
  width: 0;
  height: 3px;
}
.activeHeaderNavBar {
  font-weight: 600;
  height: 3px;
  border-bottom: 3px solid #f25757;
  padding-bottom: 5px;
  position: absolute;
  bottom: 30px;
  width: 100%;
  left: 0;
}
.newHeaderActiveNavBar {
  border-bottom: 3px solid #f25757;
  padding-bottom: 25px;
  bottom: 0px;
  right: 0;
  font-weight: 600;
  width: 0;
  height: 3px;
  color: black !important;
}
.newHeaderActiveNavBarNight {
  border-bottom: 3px solid #f25757;
  padding-bottom: 25px;
  bottom: 0px;
  right: 0;
  font-weight: 600;
  width: 0;
  height: 3px;
  color: white !important;
}
.newDesignersNavBar {
  border-bottom: 3px solid #f25757;
  padding-bottom: 25px;
  bottom: 0px;
  right: 0;
  font-weight: 600;
  height: 3px;
  color: black !important;
}
/* new nevbar */
.newHeaderNavBar::before,
.newHeaderNavBar::after {
  content: "";
  position: absolute;
  top: 54px;
  right: 0;
  left: auto;
  width: 0;
  height: 3px;
}
.HeaderActiveNavBar {
  border-bottom: 3px solid #f25757;
  padding-bottom: 33px;
  bottom: 0px;
  right: 0;
  width: 0;
  height: 3px;
  color: black !important;
}
.HeaderActiveNavBarNight {
  border-bottom: 3px solid #f25757;
  padding-bottom: 33px;
  bottom: 0px;
  right: 0;
  width: 0;
  height: 3px;
  color: white !important;
}

@media screen and (max-width: 900px) {
  .newHeaderActiveNavBar {
    padding-bottom: 29px;
  }
  .newHeaderActiveNavBarNight {
    padding-bottom: 29px;
  }
  .newDesignersNavBar {
    padding-bottom: 29px !important;
  }
  nav ul li span::after {
    background-color: #ffff;
    /* transition: all 0.25s cubic-bezier(0.694, 0.048, 0.335, 1); */
  }
}