/* This is back-to-top arrow*/
#progress {
    position: fixed;
    bottom: 20px;
    right: 20px;
    height: 48px;
    width: 48px;
    display: none;
    place-items: center;
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), 0.2);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
}


#progress-value {
    display: grid;
    place-items: center;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background: linear-gradient(135deg, var(--bg-color), var(--bg-secondary));
    border-radius: 50%;
    font-size: 17px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

#progress:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3);
}

#progress:hover #progress-value {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    transform: scale(1.1);
}

#progress:active {
    transform: translateY(0) scale(1.02);
    transition: all 0.1s ease;
}







@media screen and (max-width: 1350px) {

    #progress{
        width: 46px;
        height: 46px;
    }

    #progress-value {
        font-size: 19px;
    }
}

@media screen and (max-width: 1200px) {

    #progress{
        width: 45px;
        height: 45px;
    }

    #progress-value {
        font-size: 18px;
    }
}

@media screen and (max-width: 1000px) {

    #progress{
        width: 44px;
        height: 44px;
    }
}

@media screen and (max-width: 750px) {

    #progress{
        width: 43px;
        height: 43px;
    }

    #progress-value {
        font-size: 17px;
    }
}