/* ---- Side navigation ---- */
.NavPhone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0dvh;
  background-color: #00000069;
  backdrop-filter: blur(10px);
  z-index: 1000;
  border: 0.2vh solid rgb(21, 21, 21);
  overflow: hidden;
  transition: 0.6s ease-in-out 0.4s;
  z-index: 2000;
}

.NavPhone.active {
  height: 110dvh;
  transition: 0.6s ease-in-out;
}

.NavContainer {
  display: flex;
  align-items: flex-start;
  margin-top: 25dvh;
  justify-content: flex-start;
  height: 61dvh;
  /* background-color: #262626; */
}

.NavContainer .leftNav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-transform: uppercase;
  width: 100%;
  padding: 0vh 3.5vh;
  opacity: 1;
}

.NavContainer .leftNav > * {
  transform: translateY(10px);
  z-index: 1;
  opacity: 0;
}

.NavContainer #ourRangeNav,
.NavContainer #ourManagmentNav {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-transform: uppercase;
  width: 100%;
  padding: 0vh 3.5vh;
  transform: translateY(10px);
}

.NavContainer #ourRangeNav > *,
.NavContainer #ourManagmentNav > * {
  position: relative;
  opacity: 0;
  z-index: 0;
}

.NavContainer #ourRangeNav .currentNav,
.NavContainer #ourManagmentNav .currentNav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1vh;
}

.NavContainer #ourRangeNav .currentNav .list,
.NavContainer #ourManagmentNav .currentNav .list {
  font-size: 2.5vh;
  color: var(--ThemeColor-);
  font-weight: 600;
}

.NavContainer #ourRangeNav .currentNav #closeNav,
.NavContainer #ourManagmentNav .currentNav #closeNav {
  width: 10vh;
  height: 3vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-right: 5vh;
  cursor: pointer;
}

.NavContainer #ourRangeNav .currentNav #closeNav span,
.NavContainer #ourManagmentNav .currentNav #closeNav span {
  position: absolute;
  width: 0.28vh;
  height: 2.3vh;
  background-color: var(--ThemeColor-);
  border-radius: 3vh;
}

.NavContainer #ourRangeNav .currentNav #closeNav span:nth-child(1),
.NavContainer #ourManagmentNav .currentNav #closeNav span:nth-child(1) {
  transform: rotate(45deg);
}
.NavContainer #ourRangeNav .currentNav #closeNav span:nth-child(2),
.NavContainer #ourManagmentNav .currentNav #closeNav span:nth-child(2) {
  transform: rotate(-45deg);
}

.NavContainer .leftNav a,
.NavContainer #ourRangeNav a,
.NavContainer #ourManagmentNav a {
  font-size: 2.5vh;
  padding: 0.6vh 0vh;
  position: relative;
  background-image: url(/img/default/icon/hoveraffect.svg);
  background-size: 200%;
  background-position: center center;
  background-clip: text;
  color: transparent;
  font-weight: 600;
  transition: 0.5s ease-in-out;
  animation: 0.4s ease-in-out alternate forwards HoverMenuAniBack;
}
.NavContainer .leftNav a:hover,
.NavContainer #ourRangeNav a:hover,
.NavContainer #ourManagmentNav a:hover {
  animation: 0.4s ease-in-out alternate forwards HoverMenuAni;
}

@keyframes HoverMenuAni {
  from {
    background-position: 100% center;
  }
  to {
    background-position: 200% center;
  }
}

@keyframes HoverMenuAniBack {
  from {
    background-position: 200% center;
  }
  to {
    background-position: 300% center;
  }
}

#ourRange,
#ourManagment {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4vh;
}

#ourRange .viewMore,
#ourManagment .viewMore {
  width: 2vh;
  height: 2vh;
  /* border: 0.3vh solid var(--ThemeColor-); */
  color: var(--ThemeColor-);
  border-radius: 1vh;
  cursor: pointer;
  background-image: url(/img/Icons/ArrowDown.svg);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
}

@media (max-width: 1050px) {
  .HeaderMain {
    justify-content: space-between;
  }

  .phoneMenu {
    display: flex !important;
  }

  .stable {
    display: flex !important;
  }

  .HeaderMain .CenterContainer .MainManu {
    display: none !important;
  }
}

.bottomInfo {
  height: 15dvh;
  width: 100%;
}

.bottomInfo .distributorBtn {
  text-transform: uppercase;
  font-size: 1.8vh;
  color: var(--ThemeColor-);
  font-weight: 600;
  margin-top: 1vh;
  padding: 1.2vh 2vh;
  border-radius: 1.4vh;
  border: 0.4vh solid var(--ThemeColor-);
  transition: 0.3s ease;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  margin: 0 3.5vh;
}

.bottomInfo .socialIcons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8dvh;
}

.bottomInfo .socialIcons .controlSocialMedia {
  height: 100%;
  margin-left: 3.5vh;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1vh;
}

.bottomInfo .socialIcons .controlSocialMedia a > * {
  height: 4.5vh;
  width: 4.5vh;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 1.4vh;
  border: 0.4vh solid var(--ThemeColor-);
  filter: brightness(0) invert(0.8);
  cursor: pointer;
  transform: translateX(-10px);
}
/* .bottomInfo .socialIcons .controlSocialMedia a > *:hover {
  filter: brightness(1) invert(0);
} */

.bottomInfo .socialIcons .shop {
  text-transform: uppercase;
  font-size: 1.8vh;
  color: rgb(221, 221, 221);
  font-weight: 600;
  padding: 1.2vh 1.2vh;
  border-radius: 1.4vh;
  border: 0.4vh solid rgb(221, 221, 221);
  transition: 0.3s ease;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  margin-right: 3.5vh;
}

.facebook {
  background-image: url(/img/nav-social-icons/facebook-app-symbol.png);
  background-size: 3vh;
  background-position: center center;
}
.bottomInfo .x {
  background-image: url(/img/nav-social-icons/twitter.png);
  background-size: 2.4vh;
  background-position: center center !important;
}

.instagram {
  background-image: url(/img/nav-social-icons/social-media.png);
  background-size: 3.5vh;
  background-position: center center !important;
}

.youtube {
  background-image: url(/img/nav-social-icons/youtube.png);
  background-size: 2.7vh;
  background-position: center center !important;
}

.linkdin {
  background-image: url(/img/nav-social-icons/linkedin.png);
  background-size: 3vh;
  background-position: center center !important;
}