body {
    font-family: 'Lora', serif;
    font-size:18px;
}

.gradient-overlay-li {
    position: relative;
    overflow: hidden;
}

.gradient-overlay-li .tp-bgimg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 1;

}


.progress-container {
    position: fixed;
    opacity: 0;
    bottom: 36px; /* Adjusted from Tailwind's lg:bottom-12 */
    right: 20px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.2); /* bg-black/20 */
    border-radius: 50%;
    z-index: 9999;
    transition: opacity 0.1s ease-in;
}

.progress-container.visible {
    opacity: 1;
}

.progress-container .arrow {
    opacity: 1 !important; /* Ensure it is visible */
    transition: opacity 0.1s ease-in;
    position: absolute;
    width: 20px; /* Equivalent to Tailwind's w-5 */
    height: 20px; /* Equivalent to Tailwind's h-5 */
    color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.1s ease-in;
}

.progress-circle {
    transform: rotate(-90deg);
    transform-origin: center;
}

.progress-container svg {
    width: 48px;
    height: 48px;
    transform: rotate(270deg); /* Rotates the start to the top (0 degrees) */
}

.progress-container circle {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.progress-background {
    stroke: rgba(255, 255, 255, 0.2); /* stroke-white/20 */
}

.progress-bar {
    stroke: red;
    stroke-dasharray: 126; /* Circumference of the circle */
    stroke-dashoffset: 126; /* Full stroke (initially hidden) */
    transition: stroke-dashoffset 0.1s linear;
}

#app {
    overflow-y: auto;
    height: 100vh; /* Ensures it takes full height */
}