.skill2{
    width: 160px;
    height:160px;
 /*   background:blue;*/
    position: relative;
    margin-left:520px;
    margin-top: -300px;
    float: left;
    
}
.outer2{
    height: 230px;
    width: 230px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.7);
    padding: 57px;
  /*  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
    -6px -6px 10px -1px rgba(255,255,255,0.7)*/
}

.inner2{
    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);
*/
}
.number2{
    font-weight: 600px;
    
}
#circle2 {
    fill: none;
    stroke: #4CFFFF;
    stroke-width: 58px;
    stroke-dasharray:541;
    stroke-dashoffset:541;
    animation: animac 3s linear forwards;
     
}
#svg2{
    position:absolute ;
    top: 0;
    left: 0;
}
@keyframes animac {
    100%{
        stroke-dashoffset: 270;
    }
}
    
@media screen and (max-width:768px) {
    .skill2{
        width: 200px;
        height:200px;
        position: absolute;
        margin-left: 30px;
        margin-top: 30px;
        
    }
  
    
    .inner2{
        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);
    */
    }

   .outer2{    
        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)
     */   
   }
     .number2{
         font-weight: 600px;
         
     }
     #circle2 {
         fill: none;
         stroke:#4CFFFF;
         stroke-width: 58px;
         stroke-dasharray:541;
         stroke-dashoffset:541;
         animation: animac 6s linear forwards;
          
     }
     

    #svg2{
         position:absolute ;
         top: 0px;
         left: 0px;
     }    
     
     
     @keyframes animac {
        100%{
            stroke-dashoffset: 270;
        }
    }
     
}