
nav{
    margin-left: 150px;
}

.counts11{
    min-height: 15vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(239, 249, 250);
}
.container11{
  position: relative;
  width:auto;
  display: flex;
  justify-content: space-around ;
  background: rgb(255, 102, 0);
}
.box1{
    position: relative;
    height: 250px;
    width: 250px;
    background: rgb(242,232,232);
    background: radial-gradient(circle, rgba(242,232,232,1) 0%, rgba(83,167,193,1) 100%);
    border-radius: 5px;
}
.box1 .shadow1{
    position: absolute;
    height: 100%;
    width: 50px;
}
.box1 svg{
    position: absolute;
    height: 160px;
    width: 160px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50px) 
}
.box1 svg  .color11{
    fill: transparent;
    stroke: #f03000;
    stroke-width: 10px;
    stroke-dasharray:500;
     stroke-dashoffset: 190;
     stroke-linecap: round;
}
.box1 svg  .color21{
    fill: transparent;
    stroke: #f03000;
    stroke-width: 10px;
    stroke-dasharray:500;
     stroke-dashoffset: 250;
     stroke-linecap: round;
}
.box1 svg  .color31{
    fill: transparent;
    stroke: #f03000;
    stroke-width: 10px;
    stroke-dasharray:500;
     stroke-dashoffset: 110;
     stroke-linecap: round;
}
.box1 .counter1{
    position: relative;
    top: 50%;
    left: 6px;
    transform: translate(-50,-50px);
    width: 100%;
    height: 50px;
    color: #fff;
    text-align: center;
  
}
.box1 .counter1 span{
    font-size: 28px;
    line-height: 50px;
     font-weight: bold;
     text-align: center;
}

.text{
    color: #fff;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 6%;
    letter-spacing: 1px;
}
.text1{
    color: #fff;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 6%;
    letter-spacing: 1px;
}
.box1 .counter1 .color11
{
  color: #f03000;
}
.box1 .counter1 .color21{
color: #f03000;
}
.box1 .counter1 .color31
{
color: #f03000;
}


.counts{
    min-height: 15vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(239, 249, 250);
 }
 .container2{
  position: relative;
  width: auto;
  display: flex;
  justify-content: space-around ;
 }
 .box2{
    position: relative;
    height: 250px;
    width: 250px;
    background: rgb(242,232,232);
    background: radial-gradient(circle, rgba(242,232,232,1) 0%, rgba(83,167,193,1) 100%);
    border-radius: 5px;
 }
 .box2 .shadow{
    position: absolute;
    height: 100%;
    width: 50px;
 }
 .box2 svg{
    position: absolute;
    height: 160px;
    width: 160px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50px) 
 }
 .box2 svg  .color12{
    fill: transparent;
    stroke: #f03000;
    stroke-width: 10px;
    stroke-dasharray:500;
     stroke-dashoffset: 250;
     stroke-linecap: round;
 }
 .box2 svg  .color22{
    fill: transparent;
    stroke: #f03000;
    stroke-width: 10px;
    stroke-dasharray:500;
     stroke-dashoffset: 420;
     stroke-linecap: round;
 }
 .box2 .counter{
    position: relative;
    top: 50%;
    left: 6px;
    transform: translate(-50,-50px);
    width: 100%;
    height: 50px;
    color: #fff;
    text-align: center;
  
 }
 .box2 .counter span{
    font-size: 28px;
    line-height: 50px;
     font-weight: bold;
     text-align: center;
 }
 
 .text{
    color: #fff;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 6%;
    letter-spacing: 1px;
 }
 .text1{
    color: #fff;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 6%;
    letter-spacing: 1px;
 }
 .box2 .counter .color12
 {
  color: #f03000;
 }
 .box2 .counter .color22{
 color: #f03000;
 }
 .box3{
    position: relative;
    height: 250px;
    width: 250px;
    background: rgb(242,232,232);
    background: radial-gradient(circle, rgba(242,232,232,1) 0%, rgba(83,167,193,1) 100%);
    border-radius: 5px;
 }
 .box3 .shadow{
    position: absolute;
    height: 100%;
    width: 50px;
 }
 .box3 svg{
    position: absolute;
    height: 160px;
    width: 160px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50px) 
 }
 .box3 svg  .color13{
    fill: transparent;
    stroke: #f03000;
    stroke-width: 10px;
    stroke-dasharray:500;
     stroke-dashoffset: 190;
     stroke-linecap: round;
 }
 .box3 svg  .color23{
    fill: transparent;
    stroke: #f03000;
    stroke-width: 10px;
    stroke-dasharray:500;
     stroke-dashoffset: 300;
     stroke-linecap: round;
 }
 .box3 .counter{
    position: relative;
    top: 50%;
    left: 6px;
    transform: translate(-50,-50px);
    width: 100%;
    height: 50px;
    color: #fff;
    text-align: center;
  
 }
 .box3 .counter span{
    font-size: 28px;
    line-height: 50px;
     font-weight: bold;
     text-align: center;
 }
 
 .text{
    color: #fff;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 6%;
    letter-spacing: 1px;
 }
 .text1{
    color: #fff;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 6%;
    letter-spacing: 1px;
 }
 .box3 .counter .color13
 {
  color: #f03000;
 }
 .box3 .counter .color23{
 color: #f03000;
 }



 