.skill3{
    width: 200px;
    height:200px;
 /*   background:blue;*/
    position: relative;
    margin-left:1000px;
    margin-top: -280px;
    float: left;
    
}
.outer3{
    height: 230px;
    width: 230px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.7);
    padding: 56px;
  /*  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
    -6px -6px 10px -1px rgba(255,255,255,0.7)*/
}

.inner3{
    height: 120px;
    width: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
   /* box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
    inset 4px 4px 6px -1px rgba(255,255,255,0.7),
    -0.5px -0.5px 0px rgba(255,255,255,0.1),
    -0.5px -0.5px 0px rgba(0,0,0,0.15),
    0px 12px 10px -10px rgba(0,0,0,0.05);
*/
}
.number3{
    font-weight: 600px;
    
}
#circle3 {
    fill: none;
    stroke: #FFC04C;
    stroke-width: 54px;
    stroke-dasharray:541;
    stroke-dashoffset:541;
    animation: animaca 3s linear forwards;
     
}
#svg3{
    position:absolute ;
    top: 0;
    left: 0;
}
@keyframes animaca {
    100%{
        stroke-dashoffset: 189;
    }
}
@media screen and (max-width:768px) {
    .skill3{
        width: 200px;
        height:200px;
        position: absolute;
        margin-left: 270px;
        margin-top: 0px;        
    }  
    
    .inner3{
        height: 120px;
        width: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid white;
       /* box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
        inset 4px 4px 6px -1px rgba(255,255,255,0.7),
        -0.5px -0.5px 0px rgba(255,255,255,0.1),
        -0.5px -0.5px 0px rgba(0,0,0,0.15),
        0px 12px 10px -10px rgba(0,0,0,0.05);
    */
    }

   .outer3{    
        height: 230px;
        width: 230px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.7);
        padding: 54px;             
     /*   box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
        -6px -6px 10px -1px rgba(255,255,255,0.7)
     */   
   }
     .number3{
         font-weight: 600px;
         
     }
     #circle3 {
         fill: none;
         stroke:#FFC04C;
         stroke-width: 54px;
         stroke-dasharray:425;
         stroke-dashoffset:425;
         animation: animaca 6s linear forwards;
          
     }
    #svg3{
         position:absolute ;
         top: 0px;
         left: 0px;
     }    
     
     @keyframes animaca {
         100%{
             stroke-dashoffset: 149;
         }
     }
     
}