/* Progress Ring Container */
.progress-section {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
    min-height: 60px;
}

.progress-ring-container {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
}

/* SVG Progress Ring */
.progress-ring {
    width: 60px;
    height: 60px;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 15px rgba(102, 126, 234, 0.4));
}

.progress-ring-circle-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 8;
    cx: 100;
    cy: 100;
    r: 90;
}

.progress-ring-circle {
    fill: none;
    stroke: #667eea;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cx: 100;
    cy: 100;
    r: 90;
}

/* Icon Inside Progress Ring - FIXED POSITIONING */
.progress-ring-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

    .progress-ring-icon img {
        width: 60px;
        height: 60px;
        object-fit: contain;
        border-radius: 50%;
    }

    /* Alternative: If using Font Icon */
    .progress-ring-icon i,
    .progress-ring-icon svg {
        font-size: 50px;
        color: #667eea;
    }

/* Responsive Progress Ring */
@media (max-width: 768px) {
    .progress-section {
        min-height: 180px;
    }

    .progress-ring-container {
        width: 160px;
        height: 160px;
    }

    .progress-ring {
        width: 160px;
        height: 160px;
    }

    .progress-ring-circle-bg,
    .progress-ring-circle {
        cx: 80;
        cy: 80;
        r: 70;
        stroke-width: 6;
    }

    .progress-ring-icon {
        width: 65px;
        height: 65px;
    }

        .progress-ring-icon img {
            width: 48px;
            height: 48px;
        }
}

@media (max-width: 480px) {
    .progress-section {
        min-height: 150px;
        margin: 20px 0;
    }

    .progress-ring-container {
        width: 140px;
        height: 140px;
    }

    .progress-ring {
        width: 140px;
        height: 140px;
    }

    .progress-ring-circle-bg,
    .progress-ring-circle {
        cx: 70;
        cy: 70;
        r: 60;
        stroke-width: 5;
    }

    .progress-ring-icon {
        width: 55px;
        height: 55px;
    }

        .progress-ring-icon img {
            width: 40px;
            height: 40px;
        }
}

@media (max-width: 360px) {
    .progress-ring-container {
        width: 120px;
        height: 120px;
    }

    .progress-ring {
        width: 120px;
        height: 120px;
    }

    .progress-ring-circle-bg,
    .progress-ring-circle {
        cx: 60;
        cy: 60;
        r: 52;
        stroke-width: 4;
    }

    .progress-ring-icon {
        width: 48px;
        height: 48px;
    }

        .progress-ring-icon img {
            width: 35px;
            height: 35px;
        }
}