/* Progressbar About page - Responsive */
ul.skills-bar-container {
  list-style: none;
  width: 100%; /* Changed from 90% to 100% */
  max-width: 500px;
  padding: 0;
  margin: 0 auto; /* Center the container */
}

ul.skills-bar-container li {
  margin-bottom: 20px;
}

.progressbar-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  align-items: end;
  
}

.progressbar-title h3 {
  margin: 0;
  font-size: 1rem; /* Smaller font on mobile */
  line-height: 1.2;
}

.bar-container {
  background: #555;
  border-radius: 5px;
  height: 6px;
  position: relative;
  overflow: hidden;
  width: 100%; /* Ensure full width */
}

.progressbar {
  position: absolute;
  left: 0;
  height: 100%;
  width: 0;
  border-radius: 5px;
  transition: width 1.5s ease-out, background-color 0.3s;
}

/* Different colors for each bar */
#bar-1 { background-color: #FF9D00; }
#bar-2 { background-color: #00A8FF; }
#bar-3 { background-color: #9D00FF; }
#bar-4 { background-color: #FF0066; }

/* Responsive adjustments */
@media (min-width: 768px) {
  .progressbar-title h3 {
    font-size: 1.125rem; /* text-lg equivalent */
  }
  
  ul.skills-bar-container {
    max-width: 600px; /* Slightly larger on tablets */
  }
}

@media (min-width: 1024px) {
  ul.skills-bar-container {
    max-width: 700px; /* Larger on desktops */
  }
}


.background-img {
    background-image: linear-gradient(to right, #FFC583, #FF9D00), url('web/images/about/bg-call.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}



/* Carres page filter*/
   .filter-btn {
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background-color: transparent;
    transition: all 0.2s;
  }
  .filter-btn.active {
    background-color: #f99f38;
    color: white;
    font-weight: 600;
    border-color: #f99f38;
  }