/* 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 */
    margin-left: -1px;
}

#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;
}