nav ul li a.active {
  color: var(--color-main-primary);
}

nav ul li a {
  position: relative;
  padding: 0 2px;
}

/* The line under the active link */
nav ul li a.active::before {
  transform: scale(1);
}

/* LTR default */
nav ul li a::before {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: -5px;
  background-color: var(--color-main-primary);
  height: 2px;
  border-radius: 1rem;
  transform-origin: center center;
  width: 100%;
  transform: scale(0);
  transition: transform 0.3s ease-out;
}

/* RTL support: set 'right' to 0 instead of 'left' */
html[dir="rtl"] nav ul li a::before {
  left: auto !important;
  right: 0 !important;
  /* Other properties remain the same */
}

/* Hover effect */
nav ul li a:hover::before {
  transform: scale(1);
}