.skills-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem 5rem;
list-style: none;
padding: 0;
align-items: center;
justify-content: center;
max-width: 100%;
margin: 0;
}


.skill{
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 160px;
background-color: #b37f7f00;
position: relative;
}



.outer{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 160px;
  width: 160px;
  padding: 2px;
  box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 15), -6px -6px 10px -1px rgba(255, 255, 255, 0.505);
  border-radius: 50%;
}

.inner{
height: 120px;
width: 120px;
display: flex;
align-items: center;
justify-content: center;
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 -.5px 0px rgba(255, 255, 255, 0.08), 0.5px 0.5px 0px rgba(0,0,0,0.15), 0px 12px 10px -10px rgba(0,0,0,0.05);
border-radius: 50%;
}

#number{
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: #555;
}

.icon1 circle, .icon2 circle, .icon3 circle, .icon4 circle, .icon5 circle, .icon6 circle {
fill: none;
stroke: url(#GradientColor);
stroke-width: 11.9px;
stroke-dasharray: 276.32; 
stroke-dashoffset:276.32; 
transition: stroke-dashoffset 0.5s ease-out;
}

.skill:hover .icon1 circle  {
stroke-dashoffset: 69.8; 
}
.skill:hover .icon2 circle{
stroke-dashoffset: 82.89;
}
.skill:hover .icon3 circle  {
stroke-dashoffset: 55.264; 
}
.skill:hover .icon4 circle{
stroke-dashoffset: 90;
}
.skill:hover .icon5 circle  {
stroke-dashoffset: 98; 
}
.skill:hover .icon6 circle{
stroke-dashoffset: 82.89;
}


.skill svg{
  position:absolute;
  top: 0;
  left: 0;
}
.skill img{
height: 60px;
width: 60px;
filter: brightness(50%);
}
.skill:hover img{
  filter: brightness(100%);
}













/* Mobile-specific styles */
@media (max-width: 600px) {
  .skills-container {
      gap: 3rem; /* Reduce gap size */
      grid-template-columns: repeat(2, 1fr);
  }
  .skill svg {
    width: 100px; /* Smaller size for mobile */
    height: 100px;
}

.skill svg circle {
    r: 45; /* Smaller radius for the circle */
    stroke-width: 8px; /* Adjust stroke width */
}

  .skill {
      width: 100px; /* Reduce skill size for smaller screens */
      height: 100px;
  }

  .outer {
      height: 100px;
      width: 100px;
  }

  .inner {
      height: 80px;
      width: 80px;
  }

  .skill img {
      height: 40px; /* Adjust image size */
      width: 40px;
  }



  .icon1 circle, .icon2 circle, .icon3 circle, .icon4 circle, .icon5 circle, .icon6 circle {
    fill: none;
    stroke: url(#GradientColor);
    /* stroke-width: 19px; */
    stroke-dasharray: 282.857; 
    stroke-dashoffset:282.857; 
    transition: stroke-dashoffset 0.5s ease-out;
    }
    
    .skill:hover .icon1 circle  {
    stroke-dashoffset: 69.8; 
    }
    .skill:hover .icon2 circle{
    stroke-dashoffset: 82.89;
    }
    .skill:hover .icon3 circle  {
    stroke-dashoffset: 55.264; 
    }
    .skill:hover .icon4 circle{
    stroke-dashoffset: 90;
    }
    .skill:hover .icon5 circle  {
    stroke-dashoffset: 98; 
    }
    .skill:hover .icon6 circle{
    stroke-dashoffset: 82.89;
    }
}

/* Optionally, you can add another media query for slightly larger screens */
@media (min-width: 601px) and (max-width: 1024px) {

  


  
}