/* ✅ Mobile View Styling */
@media (max-width: 768px) {
    .title-area-left {
        text-align: left !important; /* Mobile par bhi left hi rakhega */
        padding-left: 15px !important; /* Mobile container ki side spacing ke sath align karne ke liye */
    }

    .title-area-left .title {
        font-size: 30px !important; /* Choti screen ke liye font size kam kiya gaya hai */
        margin-bottom: 15px !important;
    }
}

@media (max-width: 480px) {
    .title-area-left .title {
        font-size: 28px !important; /* Bohat chote phones ke liye mazeed adjustment */
    }
}
.bar--animated {
    display: none !important;
}
.bar-static {
    display: none !important;
}

.progress-circle-main-wrapper {
    display: flex;
    justify-content: space-between;
}

.single-progress-area {
    width: 25%;
    position: relative;
}

.single-progress-area:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60%;
    width: 1px;
    background: #ddd;
}


/* counter mobile view */
@media (max-width: 991px) {
    .progress-circle-main-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 35px; /* Thora gap kam kiya professional look ke liye */
        padding-left: 20px;
    }

    .single-progress-area {
        display: flex !important;
        flex-direction: row !important; 
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100%;
    }

    .single-progress-circle {
        /* Gap ko 20px se kam karke 12px-15px kiya */
        margin-right: 10px !important; 
        flex-shrink: 0;
        width: 75px; /* Size thora optimize kiya */
        height: 75px;
        position: relative;
    }

    .right-counter {
        text-align: left !important;
        display: flex;
        flex-direction: column;
    }

    .right-counter h2 {
        margin: 0 !important;
        font-size: 26px !important; 
        /* Font weight 800 se kam karke 700 ya 600 karein */
        font-weight: 700 !important; 
        line-height: 1.1;
        color: #1a1a1a; /* Professional dark shade */
    }

    .right-counter p {
        margin: 0 !important;
        font-size: 13px !important; /* Size thora kam kiya */
        font-weight: 500 !important; /* Text ko bhi thora light kiya */
        text-transform: uppercase;
        color: #666;
        letter-spacing: 0.5px;
    }
    
    .radial-progress {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}