@property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
  }


#circle{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 3px solid rgb(15, 4, 61);
    text-align: center; 
   
    
  }
  .circle-text{
    color: rgb(15, 4, 61);
    margin-top: 20%;
    font-size: 24px;
  }
  .circle-text-color{
    color: rgb(15, 4, 61);
  }
  .border-purple{
    border: 3px solid rgb(15, 4, 61);
  }

  .circular-progress {
    --size: 250px;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 35px;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
   
  }
  .circular-progress {
    animation: progress-animation 5s linear 0s 1 forwards;
  }
  
  .circular-progress circle {
    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: round;
  }
  
  .circular-progress circle.bg {
    stroke: #e7ba87;
  }
  
  .circular-progress circle.fg {
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    transition: stroke-dasharray 0.3s linear 0s;
    stroke: #eb8532;
  }
  .btn-report{
    border: 3px solid  rgb(15, 4, 61);
    width: 10em;
    height: 4em;
    color: rgb(15, 4, 61);
    margin-bottom: 1em;
 
  }
  .btn-report>h3{
    margin:0;
    padding:0;
  }
  
  .container22 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.container22>div {
    width: auto
}
.purple{
  color: rgb(15, 4, 61);
}
.team_name {
  margin-top: 1em;
  padding: 0;
  text-align: center;
}

.container22 .text-container {
    color: rgb(15, 4, 61);
    text-align: center;
}

.text-container h3,
.text-container h4{
    margin: 0;
    padding: 0;
}
.po {
  padding: 0;
}
.flex-and-content{
  display: flex;
  justify-content: space-between;
  margin-top: 3em;
}
@media (min-width:1025px) {
  .pos{
    position: relative;
    left:25%;
  } 

}