.side-menu {
  position: absolute;
  top: 28%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0;
  z-index: 214748364 !important;
}

body[lang="en"] {
  .side-menu {
    top: 28%;
    left: 96%;
  }
  @media (max-width: 768px) {
    .side-menu {
      top: 26.5%;
      left: unset !important;
      right: -3%;
    }
  }
  @media (max-width: 568px) {
    .side-menu {
      left: 30%;
    }
  }
  @media (max-width: 480px) {
    .side-menu {
      left: unset !important;
      right: 17%;
    }
    @media (max-width: 425px) {
      .side-menu {
        right: 13%;
      }
    }
  }
}
.circle {
  z-index: 999;
  border-radius: 50%;
  border: 4px solid #b2c0c7;
  display: inline-block;
  animation: pulse 1.5s infinite ease-in-out;
}

/* @keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
} */

.line-one {
  width: 4px;
  height: 100px;
  background-color: #abb7bd;
  border-radius: 2px;
  transform-origin: top; /* So it grows from the top */
  transform: scaleY(0);
  animation: drawLine 1s ease-out forwards;
}

.line-two {
  width: 4px;
  height: 45px;
  background-color: #abb7bd;
  border-radius: 2px;
  transform-origin: top; /* So it grows from the top */
  transform: scaleY(0);
  animation: drawLine 1s ease-out forwards;
  animation-delay: 2s;
}

@keyframes drawLine {
  to {
    transform: scaleY(1);
  }
}

/* Pop-in animation */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.hexagon {
  opacity: 0;
  transform: scale(0.5);
  animation: popIn 0.6s ease-out forwards;
  aspect-ratio: 1 / 1;
  background-color: #e2e2e2;
  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%);
  transition: 0.3s ease;
  margin: 50px auto;
}
.hexagon i {
  transition: 0.3s ease;
  color: #939393;
}

.hexagon:hover {
  background-color: #31544b;
}
.hexagon:hover i {
  color: white;
}

/* Staggered animation delays */
.hexagon1 {
  animation-delay: 1.1s;
}

.hexagon2 {
  animation-delay: 1.2s;
}

.hexagon3 {
  animation-delay: 1.3s;
}

.hexagon4 {
  animation-delay: 1.4s;
}

.hexagon5 {
  animation-delay: 1.5s;
}

.hexagon {
  width: 36px;
  height: 40px;
  position: relative;
  margin: 0px 0px;

  background-size: contain;
  background-repeat: no-repeat;
  transition: 0.3s ease;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hexagon img {
  height: 40%;
}

.hexagon.active .icon {
  color: white;
}

.english-button {
  background-color: #21333b;
  border-radius: 500px;
  color: #f1f5f8;
  outline: auto;
  border: 0px;
  width: 38px;
  height: 38px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 1025px) {
  .side-menu {
    top: 27%;
    left: -2%;
  }
}

@media (max-width: 768px) {
  .side-menu {
    top: 26.5%;
    left: -3%;
  }
}

@media (max-width: 568px) {
  .side-menu {
    top: -11% !important;
    left: 15%;
    gap: 2px;
    flex-direction: row-reverse;
  }
  .line-one {
    display: none;
  }
  .line-two {
    display: none;
  }
  .hexagon {
    width: 28px;
    height: 32px;
  }
  .hexagon img {
    height: 40%;
  }
  .circle {
    border-radius: 50%;
    border: 3px solid #b2c0c7;
  }
  .border-for-circle {
    margin: 4px;
    width: 33px;
    height: 33px;
  }
}

@media (max-width: 480px) {
  /* .side-menu {
  top: 30.5% !important;
  left: -3%;
} */
}