#scrollToTopLink {
    position: fixed;
    bottom: 60px;
    right: 30px;
    width: 38px;
    height: 38px;
    background-color: rgba(255,255,255,0.7);
    border: solid 1px rgba(255,255,255,0.7);
    color: rgb(135, 135, 135);
    text-align: center;
    align-content: center;
    font-size: 24px;
    text-decoration: none;
    border-radius: 4px;
    display: block;
    opacity: 0;
    visibility: hidden;  /* Initially hidden */
    pointer-events: none;  /* Disable interaction until visible */
    transition: opacity 1s ease, visibility 1s ease, transform 1s ease, background-color 1s ease, color 1s ease, border-color 1s ease;
    z-index: 1500;
}

#scrollToTopLink.show {
    opacity: 1;
    visibility: visible;  /* Make it visible */
    pointer-events: auto;  /* Enable interaction */
    transform: scale(1);
}

#scrollToTopLink.hide {
    opacity: 0;
    visibility: hidden;  /* Hide it */
    pointer-events: none;
}

#scrollToTopLink:hover {
    background-color: rgba(255,250,255, 0.7);
    color: #FF6600;
    border-color: rgb(225,225,225);
}
@media (max-width: 767px) {
    #scrollToTopLink{
        display: none;
    }
}