/* General Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0a0a0a;
}
.skills-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Responsive grid */
  gap: 20px;
  justify-items: center;
  padding: 20px;
}

/* Skills Item */
.skills-item {
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease-in-out;
}

/* Hover Effect */
.skills-item:hover {
  transform: scale(1.1);
}

/* Icon Styling */
.skills-item img {
  width: 60px; /* Decreased size for responsiveness */
  height: auto;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .skills-container {
    grid-template-columns: repeat(2, 1fr); /* 2 items per row on tablets */
  }
}

@media (max-width: 480px) {
  .skills-container {
    grid-template-columns: repeat(1, 1fr); /* 1 item per row on small screens */
  }

  .skills-item img {
    width: 50px; /* Further reduce size for mobile */
  }
}

/* Progress Bar Styling */
.progress-bar {
  width: 80%; /* Responsive width */
  max-width: 200px; /* Prevents excessive stretching */
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
  margin-top: 5px;
  overflow: hidden;
}

/* Progress Fill */
.progress {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease-in-out;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .progress-bar {
    width: 90%; /* Slightly wider on smaller screens */
    max-width: 180px;
  }
}

@media (max-width: 480px) {
  .progress-bar {
    width: 100%; /* Full width on very small screens */
    max-width: 150px;
  }
}


.html .progress { width: 90%; background-color: #f16529; } /* HTML */
.css .progress { width: 85%; background-color: #2965f1; } /* CSS */
.bootstrap .progress { width: 80%; background-color: #563d7c; } /* Bootstrap */
.js .progress { width: 75%; background-color: #f7df1e; } /* JavaScript */
.php .progress { width: 70%; background-color: #777bb4; } /* PHP */
.java .progress { width: 80%; background-color: #007396; } /* Java */
.react .progress { width: 85%; background-color: #61dafb; } /* React */
.c .progress { width: 75%; background-color: #00599c; } /* C */
.cpp .progress { width: 80%; background-color: #044F88; } /* C++ */
.node .progress { width: 80%; background-color: #68A063; } /* Node.js */
.mongodb .progress { width: 70%; background-color: #4DB33D; } /* MongoDB */
.flutter .progress { width: 85%; background-color: #02569B; } /* Flutter */
.springboot .progress { width: 75%; background-color: #6DB33F; } /* Spring Boot */
.skills-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
  color: #f1ecec;
}

.skills-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto;
}

.skills-item {
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  box-sizing: border-box;
  flex-direction: column; /* Stacks the progress bar and text vertically */
  position: relative; /* Ensures absolute positioning for skill-percentage */
}

/* Icon Styling */
.skill-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 10px; /* Space between the icon and the progress bar */
}

/* Progress Bar Styling */
.skill-progress-bg {
  background-color: #ddd;
  height: 10px;
  border-radius: 5px;
  width: 100%;
  margin-top: 5px;
  position: relative; /* Important for positioning the percentage */
  overflow: hidden;
}

/* Fill Styling */
.skill-progress-fill {
  height: 10px;
  border-radius: 5px;
  background-color: #007bff;
  position: relative;
}

/* Percentage Styling */
.skill-percentage {
  font-size: 16px;
  color: red; /* Set text color to red */
  position: absolute;
  top: -25px; /* Move it above the progress bar */
  left: 50%;
  transform: translateX(-50%);
  opacity: 1; /* Always visible */
  pointer-events: none; /* Prevent interaction */
}

/* Data Styling */
.title-wrapper {
  display: flex;
  align-items: center;
  flex-direction: column; /* Aligns icon and text vertically */
  text-align: center;
}

.h5 {
  font-size: 18px;
  margin: 0;
  color: #333;
}