/* :root {
  --total: 4;
  --offset-width: 10vw;
  --easing: cubic-bezier(0.8, 0, 0.2, 1);
  --duration: 0.5s;
} */
:root {
  --total: 4;
  --offset-width: 10vw;
  --easing: cubic-bezier(0.8, 0, 0.2, 1);
  --duration-hover: 0.6s; /* Duration when hovering */
  --duration-no-hover: 0.5s; /* Duration when not hovering */
}

.container-about-effect {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.nav-container {
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.nav-container .nav-lists {
  list-style-type: none;
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
}
/* .nav-container .nav-lists .nav-list {
  --tx: calc(-100% + var(--offset-width));
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: calc(var(--total) - var(--i));
  margin-left: calc(var(--i) * var(--offset-width));
  transform: translateX(var(--tx));
  transition: transform var(--duration) var(--easing);
  animation: slide-down 1s cubic-bezier(0.5, 0, 0.3, 1);
  animation-delay: calc(var(--i) * 0.15s);
  animation-fill-mode: backwards;
} */
.nav-container .nav-lists .nav-list {
  --tx: calc(-100% + var(--offset-width));
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: calc(var(--total) - var(--i));
  margin-left: calc(var(--i) * var(--offset-width));
  transform: translateX(var(--tx));
  transition: transform var(--duration-no-hover) var(--easing); /* Initial transition */
}
.nav-container .nav-lists .nav-list:hover {
  transition-duration: var(
    --duration-hover
  ); /* Transition duration when hovering */
}
@keyframes slide-down {
  from {
    transform: translateX(var(--tx)) translateY(-100%);
  }
  to {
    transform: translateX(var(--tx)) translateY(0);
  }
}
.nav-container .nav-lists .nav-list:hover {
  transform: translateX(-2vw);
}
.nav-container .nav-lists .nav-list:hover ~ .nav-list {
  transform: none;
}

.container-about-effect img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.effect-content-not-hover,
.effect-content {
  position: absolute;
}
.effect-content {
  opacity: 0;
}
.effect-content-not-hover {
  color: white;
  rotate: -90deg;
  top: 37%;
  left: 73%;
  transform: translateX(-14%);
  opacity: 1;
  transition: all 0.4s ease;
}
.effect-content-not-hover p {
  font-size: 18px !important;
  font-weight: bold;
  font-family: "Poppins";
}

.nav-container .nav-lists .nav-list:hover .effect-content-not-hover {
  opacity: 0;
  left: 0;
}
.nav-container .nav-lists .nav-list:hover .effect-content {
  opacity: 1;
}

.nav-container .nav-lists .nav-list .effect-content p {
  width: 100%;
  max-width: 20%;
  transition: all 1.2s linear;
  color: white !important;
}
.nav-container .nav-lists .nav-list:hover .effect-content p {
  padding: 1rem;
  color: white;
  font-weight: 600;
  width: 100%;
  max-width: 100%;
  height: 100%;
}