.scroll-progress {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 1000;
}

.scroll-progress.visible {
    opacity: 1;
    visibility: visible;
}

.progress-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circle-bg {
    fill: none;
    stroke: #eee;
    stroke-width: 2;
}

.circle-fg {
    fill: none;
    stroke: #333;
    stroke-width: 2;
    stroke-linecap: round;
}

.arrow {
    fill: none;
    stroke: #333;
    stroke-width: 3;
    /* Bolder stroke */
    stroke-linecap: round;
    stroke-linejoin: round;
    /* Counteract the circle rotation for the arrow only */
    transform: rotate(90deg);
    transform-origin: center;


    /* Reset rotation for arrow 
        transform: rotate(0deg) translate(0, 0);*/
}

/* Hover effects */
.scroll-progress:hover {
    transform: scale(1.1);
    transition: transform 0.2s;
}

.scroll-progress:hover .circle-fg {
    stroke: #000;
}

.scroll-progress:hover .arrow {
    stroke: #000;
}