/* Style for the scroll-to-top button */
.scrollToTopBtn {
  position: fixed; /* Stays in the same place even when you scroll */
  bottom: 15px; /* Distance from the bottom of the screen */
  right: 20px; /* Distance from the right of the screen */
  opacity: 0; /* Initially hidden */
  z-index: 100; /* Ensures the button is on top of other elements */
  background-color: var(--active-color); /* Customize the background color */
  color: var(--primary-color); /* Text color */
  border: none; /* Remove border */
  border-radius: 50%; /* Make it circular */
  cursor: pointer; /* Change cursor on hover */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Add a shadow for better visibility */
  transform: translateY(100px);
  font-size: 18px;
  line-height: 48px;
  width: 50px;
  height: 50px;
  transition: transform 0.5s ease, opacity 0.5s ease;

  /* Add keyframes for bouncy effect */
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}


.showBtn {
  opacity: 0.5;
  transform: translateY(0);
}