/* Skills Section */
.skills{
    padding: 80px 0;
    text-align: center;
    background: linear-gradient(45deg, #b6e8fc, #bda7fd);
}

.skills h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    font-weight: bold;
	
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 0 20px;
}

.skill {
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-align: left;
    position: relative;
}

.skill label {
    font-size: 1.2em;
    margin-bottom: 10px;
    display: block;
    font-weight: bold;
}

progress {
    width: 100%;
    height: 20px;
    border-radius: 25px;
    appearance: none;
    background: #e6e6e6;
    transition: background-color 0.3s ease;
}

progress::-webkit-progress-bar {
    background-color: #e6e6e6;
    border-radius: 25px;
}

progress::-webkit-progress-value {
    background-color: #2caefa;
    border-radius: 25px;
    transition: width 1s ease-in-out;
}

span {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
    color: #333;
}


/* Hover effect for skill bars */
.skill:hover progress::-webkit-progress-value {
    background: linear-gradient(45deg, #2bb6ff, #5617fb);
}

/* Animation to fill the progress bars */
@keyframes fillSkill {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

/* JavaScript animation control */
@keyframes fill-bar {
    0% {
        width: 0%;
    }
    100% {
        width: var(--progress-width);
    }
}

/* Applying the animation to the skill bars */
.skill progress {
    animation: fill-bar 2s ease-out forwards;
}

/* Responsive Design */
        @media (max-width: 1200px) {
            .skills .skill-bar .skill-name {
                font-size: 1.1em;
            }
        }

        @media (max-width: 900px) {
            .skills .skill-bar {
                flex-direction: column;
                align-items: flex-start;
            }
            .skills .skill-bar .bar-container {
                width: 100%;
            }
        }