/* --------------------------------------------------------------------------
   CIRCLE ICON COMPONENT
   -------------------------------------------------------------------------- */
.icon-glass-ring {
    width: clamp(90px, 10vw, 144px);
    min-width: clamp(90px, 10vw, 144px);
    height: clamp(90px, 10vw, 144px);
    background-color: var(--red-BF0D16);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(20px, 4vw, 50px);
    position: relative;
    overflow: visible;
    z-index: 2;
}
.icon-glass-ring.black-ring {
    background-color: var(--neutral-292929);
    margin-bottom: 20px;
}

.icon-glass-ring .glass-ring {
    position: absolute;
    inset: clamp(-16px, -1.2vw, -16px);
    border-radius: 50%;
    background: rgb(255 255 255 / 5%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(14px);
    z-index: 3;
}

.icon-glass-ring svg {
    width: clamp(40px, 5vw, 80px);
    height: clamp(40px, 5vw, 80px);
    color: #fff;
    position: relative;
    z-index: 4;
}
.icon-glass-ring.header-type {
    width: clamp(90px, 9vw, 144px);
    min-width: clamp(90px, 9vw, 144px);
    height: clamp(90px, 9vw, 144px);
    background-color: #bf0d16a6;
    box-shadow: 0px 0px 20px rgb(211 28 37);
    margin-bottom: 0;
}
    .icon-glass-ring.header-type .svg-icon-wrapper {
        width: 75%;
        height: 75%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, #d21019 0%, #d21019 55%, #d21019 100%);
        box-shadow: -1px 0px 0 #670003, -1px 11px 20px rgba(0, 0, 0, .28), inset 0 1px 2px rgb(255 255 255 / 1%), inset 0 -4px 7px rgba(80, 0, 0, .18);
        outline: 1px solid var(--red-D11019);
        z-index: 4;
    }
.icon-glass-ring.header-type .svg-icon-wrapper svg{
    width:50%;
    height:50%;
}

.icon-glass-ring.mini{
    width: clamp(60px, 5vw, 90px);
    min-width: clamp(60px, 5vw, 90px);
    height: clamp(60px, 5vw, 90px);
}
.icon-glass-ring.mini .glass-ring{
    inset: clamp(-10px, -.59vw, -4px);
}
.icon-glass-ring.mini svg{
    width: clamp(30px, 3.5vw, 45px);
    height: clamp(30px, 3.5vw, 45px);
}