.countdown {
        display: flex;
        gap: 2px; /* space between circles */
    }
    .circle {
        position: relative;
        width: 70px;   /* smaller size */
        height: 70px;  /* smaller size */
    }
    svg {
        transform: rotate(-90deg);
        width: 70px;   /* smaller size */
        height: 70px;  /* smaller size */
    }
    circle {
        fill: none;
        stroke-width: 2; /* thin border */
        stroke-linecap: round;
    }
    .bg {
        stroke: #00FFFF;
    }
    .progress {
        stroke: #2196F3;
        stroke-dasharray: 188; /* circumference for r=30 */
        stroke-dashoffset: 188;
        stroke-dasharray: 2 4; /* dotted effect */
    }
    .time {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
        font-size: 9px; /* smaller text */
        line-height: 1;
    }
    .time span {
        font-size: 19px; /* smaller number */
        font-weight: bold;
        display: block;
    }