:root{
--p0:1;
--p1:1;
--p2:0;
--c0:#3D6AF2;
--c1:#3D6AF2;
--c2:#3D6AF2;
}
.container{position:relative;width:900px;display:flex;justify-content:space-around;margin:auto}
.container .card{position:relative;width:250px;background:linear-gradient(0deg,#1b1b1b,#222,#1b1b1b);display:flex;justify-content:center;align-items:center;height:300px;border-radius:5px;text-align:center;overflow:hidden;transition:0.5s;}
.container .card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,0);}
.container .card:before{content:'';position:absolute;top:0;left:-50%;width:100%;height:100%;background:rgba(255,255,255,.03);pointer-events:none;z-index:1;}
.percent{position:relative;width:150px;height:150px;border-radius:50%;box-shadow:inset 0 0 50px #000;background:#222;z-index:1000}
.percent .number{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;border-radius:50%;}
.percent .number h2{color:#777;font-weight:700;font-size:40px;transition:0.5s;}
.card:hover .percent .number h2{color:#fff;font-size:50px;}
.percent .number h2 span{font-size:24px;color:#777;}
.text{position:relative;color:#777;font-weight:700;font-size:18px;letter-spacing:1px;transition:0.5s;}
svg{position:relative;width:150px;height:150px;z-index:1000;}
svg circle{width:100%;height:100%;fill:none;stroke:#333;stroke-width:10;stroke-linecap:round;transform:translate(5px,5px);}
svg circle:nth-child(2){stroke-dasharray:440;stroke-dashoffset:440;}
.card:nth-child(1) svg circle:nth-child(2){stroke-dashoffset: calc(440 - (440 * var(--p1)) / 100);stroke:var(--c1);}
.card:nth-child(2) svg circle:nth-child(2){stroke-dashoffset: calc(440 - (440 * var(--p0)) / 100);stroke:var(--c0);}
.card:nth-child(3) svg circle:nth-child(2){stroke-dashoffset: calc(440 - (440 * var(--p2)) / 100);stroke:var(--c2);}