.cirlce-content .circle-h3 {
    
    border: 10px solid transparent;
    border-radius: 50%;
    background-image: linear-gradient(#441e73, #441e73), linear-gradient(to top, red, orange);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.cirlce-content h3, .cirlce-content h6{
    font-weight: 900;
    color: #fff;
    font-size: 36px;
    text-align: center;
    padding: calc(50% - 24px) 0% ;
}
h3.h3120 {
    padding: calc(50% - 24px) 0% ;
}
h3.h31M {
    padding: calc(50% - 24px) 0% ;
}
    
.cirlce-content h4, .multiplayer .cirlce-content h5 {
    font-weight: 800;
    color: #441e73;
    font-size: 26px;
    text-align: center;
    font-family: "Open Sans", sans-serif;
}
section.circles {
  background-color: #eee;
    padding: 40px 0;
}
@media (max-width: 768px){
    section.circles {
        padding: 30px 0;
    }
}

@media (max-width: 767px) {
    .cirlce-content .circle-h3 {
    width: 140px;
    height: 140px;    
    margin-left: calc(50% - 70px);
}
    section.circles {
        background-color: #eee;
        padding: 30px 0;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .cirlce-content .circle-h3 {
        width: 106px;
        height: 106px; 
        margin-left: 0%;
    }
    .cirlce-content h3,.cirlce-content h6{
        padding: calc(50% - 15px) 0;
        font-size: 26px;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .cirlce-content .circle-h3 {
        margin-left: 12.50%;
        width: 140px;
        height: 140px;  
    }
}
@media (min-width: 1200px) {
    .cirlce-content .circle-h3 {
        width: 140px;
        height: 140px;    
        margin-left: 17.50%;
    }
}