.circle-border {
    position: relative;
    margin-top: 25px;
    margin-left: 25px;
    border: 3px solid #2C5AA8;
    border-radius: 50%;
    height: 250px;
    width: 250px
}

.feature-content {
    position: absolute;
    top: -25px;
    left: -25px;
    width: 300px;
    height: 300px
}

.circle-inner {
    border-radius: 50%;
    min-width: 80px;
    min-height: 80px;
    padding: 4px;
    background: #2c5aa8;
    box-shadow: 0 0 35px rgba(140,152,164,.2);
    text-align: center;
    line-height: 1;
    box-sizing: content-box;
    white-space: nowrap
}

.circle-inner::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    padding-top: 100%;
    height: 0
}

.circle-inner>div {
    display: inline-block;
    vertical-align: middle
}


@media(min-width: 992px) {
   
   
    .circle-border {
        height: 400px;
        width: 400px
    }

    .feature-content {
        top: -50px;
        left: -50px;
        width: 500px;
        height: 500px
    }

    .circle-inner {
        width: 100px;
        height: 100px;
        padding: 10px
    }

  
}


.dark .circle-inner {
    background: var(--bs-light);
    box-shadow: none
}

.dark .circle-border {
    border-color: rgba(255,255,255,.1)
}