/* Back To Top Button */
#backToTopBtn {
  height: 100%; /* Remove fixed height */
  width: 100%; /* Remove fixed width */
  background-color: transparent; /* Keep background transparent */
  border: none;
  outline: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9999; /* Ensure it is on top of all other elements */
  position: absolute; /* Absolute inside the relative container */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Center within the parent container */
  
}

#backToTopBtn:hover {
  background-color: transparent; /* Keep background transparent on hover */
}

.arrow-icon {
  width: 100%; /* Use 100% to maintain the original size */
  height: auto; /* Maintain the aspect ratio of the image */
  max-width: 260px; /* Optional: Set a maximum width */
  max-height: 85px; /* Optional: Set a maximum height */
}

#scrollIndicatorSvg {
  transform: rotate(-90deg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 9998; /* Ensures it is just below the button */
  position: relative; /* Relative to maintain its context */
}

.position-fixed {
  z-index: 9997; /* Ensures this context is lower than both SVG and Button */
  position: fixed;
}

/* Optional: Style the Scroll Indicator Circle */
#scrollIndicatorBg {
  stroke: #eee; /* Background circle color */
}

#scrollIndicator {
  stroke: orange; /* Scroll progress color */
  stroke-dasharray: 157; /* Length of the stroke */
  stroke-dashoffset: 157; /* Start with hidden stroke */
  transition: stroke-dashoffset 0.3s ease; /* Smooth transition */
}

/* Showing the Back to Top Button and Scroll Indicator */
.show {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Large Screens (2560px and above) */
@media screen and (min-width: 2560px) {
  #backToTopBtn {
    max-width: 320px; /* Increase maximum width for larger screens */
    max-height: 100px; /* Increase maximum height for larger screens */
    top: 45%; /* Adjust vertical centering */
    left: 45%; /* Adjust horizontal centering */
  }

  .arrow-icon {
    max-width: 300px; /* Increase arrow icon size */
    max-height: 300px; /* Adjust the arrow icon height */
  }

  #scrollIndicatorSvg {
    transform: rotate(-90deg) scale(1.3); /* Increase the size of the scroll indicator */
    opacity: 1; /* Ensure better visibility */
    visibility: visible; /* Ensure it stays visible on large screens */
  }

  #scrollIndicator {
    stroke-dasharray: 200; /* Adjust stroke length for larger screens */
    stroke-dashoffset: 200; /* Adjust offset accordingly */
  }

  /* Increase the size of the progress circle */
  #scrollIndicatorSvg {
    width: 120px;
    height: 120px;
  }

  /* Optional adjustments for smoother interaction */
  .show {
    opacity: 1 !important;
    visibility: visible !important;
  }
}