.circle-container {
    width: 150px;
    height: 150px;
    position: relative
}

.text-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.flex-wrapper {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center
}

.single-chart {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-box {
    text-align: left;
    width: 100%;
    border: 2px solid lime;
    text-align: center;
}

.circular-chart {
    display: block;
    margin: 10px auto;
    width: 100px;
    height: 100px
}

.circle-bg {
    fill: none;
    stroke: #eeeeee;
    stroke-width: 3.8;
}

.circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

.circular-chart.green .circle {
    stroke: #00beb0;
}

.lang-title-group {
    margin-top: -20px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center
}

.lang-title-group h3 {
    text-align: center;
}