.box{
    position: relative;
    width: 300px;
    /*height: 400px;*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #07191d;
    margin-top: 40px;
    /*box-shadow: 0 30px 60px rgba(0,0,0,.2);*/
  }
  
  .box .percent{
    position: relative;
    width: 200px;
    height: 200px;
  }
  
  .box .percent svg{
    position: relative;
    width: 200px;
    height: 200px;
  }
  
  .box .percent svg circle{
    width: 200px;
    height: 200px;
    fill: none;
    stroke-width: 12;
    stroke: #000000;
    transform: translate(30px,10px);
    stroke-dasharray: 440;
    stroke-dashoffset: 440;
  }
  
  .box .percent svg circle:nth-child(1){
    stroke-dashoffset: 0;
    stroke: rgba(0,0,0,.85); 
  }
  
  .box .percent svg circle:nth-child(2){
    stroke-dashoffset: calc(440 - (440 * var(--percentage))/100);
    stroke: rgb(234, 111, 36); 
  }
  
  .box .percent .number {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #999999;
  }
  
  .text-title{
    font-size: large;
  }
  
  .box .percent .number .text-title{
    font-size: 48px;
  }
  
  .box .percent .number .text-title .text-body{
    font-size: 24px;
  }
  
  .box .text {
    padding: 10px 0 0;
    color: #999999;
    font-weight: 700;
    letter-spacing: 1px;
  }
  
  
  .carousel::before, .carousel::after{
    content: '';
      z-index: 1;
      background-color: transparent;
      background-size: 1.5rem 1.5rem;
      background-repeat: no-repeat;
      background-position: center center;
      color: #fff;
      font-size: 2.5rem;
      line-height: 4rem;
      text-align: center;
      pointer-events: none;
  }
  





.boxa{
  position: relative;
  width: 300px;
  /*height: 400px;*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* margin-top: 40px; */
  /*box-shadow: 0 30px 60px rgba(0,0,0,.2);*/
}

.boxa .percent{
  position: relative;
  width: 200px;
  height: 200px;
}


.boxa .percent svg{
  position: relative;
  width: 200px;
  height: 200px;
}

.boxa .percent svg circle{
  width: 200px;
  height: 200px;
  fill: none;
  stroke-width: 12;
  stroke: #000000;
  transform: translate(30px,10px);
  stroke-dasharray: 440;
  stroke-dashoffset: 440;
}

.boxa .percent svg circle:nth-child(1){
  stroke-dashoffset: 0;
  stroke: rgba(0,0,0,.85); 
}

.boxa .percent svg circle:nth-child(2){
  stroke-dashoffset: calc(440 - (440 * var(--percentage))/100);
  stroke: rgb(234, 111, 36); 
}

.boxa .percent .number {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999999;
}

.text-title{
  font-size: large;
}

.boxa .percent .number .text-title{
  font-size: 48px;
}

.boxa .percent .number .text-title .text-body{
  font-size: 24px;
}