.scroll-down-arrow {
  position: fixed; /* Zmiana na fixed, aby strzałka była zawsze na widoku */
  top: 30px; /* Przeniesienie na górę, pod menu */
  left: 50%;
  transform: translateX(-50%);
  width: 45px; /* Lekkie powiększenie */
  height: 45px;
  background: rgba(255, 255, 255, 0.7); /* Dopasowanie tła do przycisku powrotu */
  backdrop-filter: blur(10px); /* Dopasowanie rozmycia do przycisku powrotu */
  border: 1px solid rgba(0, 0, 0, 0.1); /* Dopasowanie ramki */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  z-index: 1001; /* Upewnienie się, że jest na odpowiedniej warstwie */
  transition: opacity 0.4s ease, transform 0.4s ease;
  opacity: 0; /* Domyślnie ukryta */
  pointer-events: none; /* Domyślnie nieklikalna */
}

.scroll-down-arrow.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}

.scroll-down-arrow:hover {
    background: var(--primary);
    transform: translateX(-50%) scale(1.1); /* Powiększenie przy najechaniu */
}

.scroll-down-arrow::before {
  content: '';
  width: 12px;
  height: 12px;
  border-bottom: 2px solid var(--text-dark); /* Dopasowanie koloru strzałki */
  border-right: 2px solid var(--text-dark);
  transform: rotate(45deg);
  animation: bounce 2s infinite;
}

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