.nav_bar {
  background-color: rgb(27, 27, 27);
  position: relative;
  display: flex;
  transition: 0.4s;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px 15px;
  border-radius: 15px;
}

.bar1 {
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  width: 50px;
  margin-bottom: 15px;
  transition: 0.4s;
  height: 5px;
}

.bar2 {
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  width: 50px;
  position: absolute;
  transition: 0.4s;
  height: 5px;
}

.bar3_h {
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  width: 50px;
  transition: 0.4s;
  height: 5px;
}

.bar4 {
  border-radius: 30px;
  background-color: rgb(255, 255, 255);
  width: 50px;
  margin-top: 15px;
  transition: 0.4s;
  height: 5px;
}

.nav_bar:hover {
  border-radius: 50px;
}
.nav_bar:hover .bar3_h {
  transform: rotate(-45deg);
}
.nav_bar:hover .bar2 {
  transform: rotate(45deg);
}

.nav_bar:hover .bar1 {
  opacity: 0;
  width: 30px;
}
.nav_bar:hover .bar4 {
  opacity: 0;
  width: 30px;
}