*
{
  margin:0;
  padding:0;
  font-family:'Roboto',sans-serif;
}
body
{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background:#101010
}
.container
{
  position:relative;
  width:900px;
  display:flex;
  justify-content:space-around;
}
.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:4px;
  text-align:center;
  overflow:hidden;
  transition:0.5s;
}
.container .card:hover
{
  transform:translateY(-10px);
  box-shadow:0 15px 35px rgba(0,0,0,.5);
}
.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 .num
{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
}
.percent .num h2
{
  color:#777;
  font-weight:700;
  font-size:40px;
  transition:0.5s;
}
.card:hover .percent .num h2
{
  color:#fff;
  font-size:60px;
}
.percent .num h2 span
{
  color:#777;
  font-size:24px;
  transition:0.5s;
}
.card:hover .percent .num h2 span
{
  color:#fff;
}
.text
{
  position:relative;
  color:#777;
  margin-top:20px;
  font-weight:700;
  font-size:18px;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:0.5s;
}
.card:hover .text
{
  color:#fff;
}
svg
{
  position:relative;
  width:150px;
  height:150px;
  z-index:1000;
}
svg circle
{
  width:100%;
  height:100%;
  fill:none;
  stroke:#191919;
  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 * 90) / 100);
  stroke:#00ff43;
}



@import url("https://fonts.googleapis.com/css?family=Rubik:700&display=swap");
* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "Rubik", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: #fff;
}

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
}
button.learn-more {
  font-weight: 600;
  color: #382b22;
  text-transform: uppercase;
  padding: 1.25em 2em;
  background: #fff0f0;
  border: 2px solid #b18597;
  border-radius: 0.75em;
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
}
button.learn-more::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #f9c4d2;
  border-radius: inherit;
  box-shadow: 0 0 0 2px #b18597, 0 0.625em 0 0 #ffe3e2;
  transform: translate3d(0, 0.75em, -1em);
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
button.learn-more:hover {
  background: #ffe9e9;
  transform: translate(0, 0.25em);
}
button.learn-more:hover::before {
  box-shadow: 0 0 0 2px #b18597, 0 0.5em 0 0 #ffe3e2;
  transform: translate3d(0, 0.5em, -1em);
}
button.learn-more:active {
  background: #ffe9e9;
  transform: translate(0em, 0.75em);
}
button.learn-more:active::before {
  box-shadow: 0 0 0 2px #b18597, 0 0 #ffe3e2;
  transform: translate3d(0, 0, -1em);
}