/* scroll-button.css */

#scrollTopBtn {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 40px;
  right: 30px;
  z-index: 99;
  font-size: 1.5rem;
  border: none;
  outline: none;
  background-color: #F4691B;
  color: white;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: background-color 0.3s ease;
}

#scrollTopBtn:hover, .rightArrow:hover {
  background-color: white;
  border: #F4691B;
  color: #F4691B;
  box-shadow: 0 4px 8px #F4691B;
}

.rightArrow {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px; /* smaller & more balanced */
  background-color: #F4691B;
  color: white;
  /* oval shape, but not too round */
  border-radius: 20%; 
      text-decoration: none;
  font-size: 16px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  border: none;
  line-height: 1;
}

.rightArrow:hover {
  background-color: white;
  color: #F4691B;
  box-shadow: 0 4px 8px #F4691B;
}

    .scroll-down {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      font-size: 2rem;
      animation: bounce 2s infinite;
      cursor: pointer;
      z-index: 2;
    }

    @keyframes bounce {

      0%,
      20%,
      50%,
      80%,
      100% {
        transform: translateX(-50%) translateY(0);
      }

      40% {
        transform: translateX(-50%) translateY(-10px);
      }

      60% {
        transform: translateX(-50%) translateY(-5px);
      }
    }