.skill {
  position: relative;
  display: inline-block;
  margin: 15px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.skill:hover i {
  filter: blur(1.5px);
  color: black;
}

.skill .icon-wrapper {
  position: relative;
  display: inline-block;
  width: 80px;  /* Increase the width to give space for progress circle */
  height: 80px; /* Same as width to make it a perfect circle */
  border-radius: 50%;
  background-color: transparent;

}

.skill i {
  font-size: 70px;  /* Reduced icon size */
  color: var(--accent);

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.skill:hover{
  opacity: 1;
}

.circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 1;
  transform: rotate(-90deg); /* Rotate to start from top */
  opacity: 0; /* Hide the circle by default */
  transition: opacity 0.3s ease;
}

.circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;  /* Increased stroke width for better visibility */
  stroke-dasharray: 251.327; /* Adjusted circumference for the larger circle */
  stroke-dashoffset: 251.327; /* Full circle */
  transition: stroke-dashoffset 1s ease;
}

.skill .percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px; /* Slightly larger font size for visibility */
  color: #000; /* Gold color for visibility, change it to any color you prefer */

  font-weight: bold;
  z-index: 2; /* Ensure percentage is on top of the circle */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.skill:hover .percentage {
  opacity: 1;
}

.skill:hover i {
  color: black;
  filter: blur(1.5px);
  transition: all 0.3s ease;
}
.skill:hover [title] {
  filter: none; /* Ensure the title is not affected by the blur */
}
/* Make percentage text white on hover */
.skill:hover .percentage {
  color: white;
}
.skill i[title]:hover:after {
  content: attr(title);
  position: absolute;
  top: -25px; /* Adjust position above the icon */
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: white;
  padding: 5px;
  border-radius: 3px;
  font-size: 14px;
  z-index: 30;
  white-space: nowrap;
}
.skill img {
  width: 70px;  /* Icon size */
  height: 70px; /* Icon size */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.skill:hover img {
  filter: blur(1.5px); /* Apply blur on hover to the image */
}

@media (max-width: 768px) {
  .skill {
    flex: 0 1 100px;
  }

  .skill .icon-wrapper {
    width: 60px;
    height: 60px;
  }

  .skill i,
  .skill img {
    font-size: 40px;
    width: 40px;
    height: 40px;
  }

  .skill .percentage {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .skill {
    flex: 0 1 80px;
  }

  .skill .icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .skill i{
    font-size: 32px;
    width: 32px;
    height: 32px;
  }

  .skill .percentage {
    font-size: 12px;
  }
}
.skill:hover img {
  opacity: 0.1; 
  color: black;
  filter: blur(1.5px);
  transition: all 0.3s ease;
}