.sklls {
    height: 250px;
    width: 250px;
}

.outer_skill {
    padding: 25px;
    height: 250px;
    width: 250px;
    border-radius: 50%;
    box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15),
        -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
}

.inner_skill {
    height: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    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, 1),
        0.5px 0.5px 0px rgba(0, 0, 0, 0.15),
        0px 12px 10px -10px rgba(0, 0, 0, 0.02);
}

#number_per,
#number_per1,
#number_per2,
#number_per3,
#number_per4 {
    font-weight: 600px;
    color: #555;
}

.skill_parent_div {
    position: relative;
    height: 300px;
}

.skill_sg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.crcle {
    fill: none;
    stroke: url(#GradientColor);
    stroke-width: 25px;
    stroke-dasharray: 705;
    stroke-dashoffset: 705;
}

.cr_anim {
    animation: skilfill .8s linear forwards;
}

.cr_anim1 {
    animation: skilfill1 1s linear forwards;

}

.cr_anim2 {
    animation: skilfill2 1.4s linear forwards;

}

.cr_anim3 {
    animation: skilfill3 .5s linear forwards;

}

.cr_anim4 {
    animation: skilfill4 1.3s linear forwards;

}


@keyframes skilfill {
    100% {
        stroke-dashoffset: 458;
    }
}

@keyframes skilfill1 {
    100% {
        stroke-dashoffset: 387;
    }
}

@keyframes skilfill2 {
    100% {
        stroke-dashoffset: 246;
    }
}

@keyframes skilfill3 {
    100% {
        stroke-dashoffset: 564;
    }
}

@keyframes skilfill4 {
    100% {
        stroke-dashoffset: 282;
    }
}

p {
    padding: 0;
    margin: 0;
}

.skill_nam_child {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    margin: 0;
    font-weight: 600;
    color: #3183a8;
}