#experience-circle {
    /* position: absolute; */
    position: fixed;    /* Fixes double scrollbar issue because:
                        * - 'absolute' positioning was causing the circle to extend the document height
                        * - This created an additional scrollable area when circle moved beyond viewport
                        * - 'fixed' positioning removes circle from document flow
                        * - Circle no longer affects document dimensions or scroll areas
                        * - Container height calculations are no longer needed*/
    width: 45vw; 
    height: 45vw; 
    max-width: 450px;
    max-height: 450px; 
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; 
    transition: opacity 0.3s ease, transform 0.3s ease; 
    pointer-events: none;
    z-index: 99; 
}

#experience-counter {
    position: absolute;
    font-size: 3vw; 
    font-weight: bold;
    opacity: 1; 
}

#experience-circle svg {
    position: absolute;
    width: 100%; 
    height: 100%; 
    transform-origin: center;
    animation: rotateText 20s linear infinite; 
}

@keyframes rotateText {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* Media query for screens smaller than 768px */
@media (max-width: 767px) {
    #experience-circle {
        width: 60vw;  /* Increase the size */
        height: 60vw; /* Increase the size */
        max-width: 300px;  /* Adjust max-width if needed */
        max-height: 300px; /* Adjust max-height if needed */
    }

    #experience-counter {
        font-size: 6vw; /* Increase font size */
    }
}