.skill-section {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    cursor: pointer; /* Indicates the section is clickable */
}

.skill-bar-container {
    height: 30px;
    width: 0;
    margin: auto;
    background: #220a5e; /* Dark bar background */
    border: 2px solid #532ea8; /* Ornate border */
    position: relative;
    overflow: hidden; /* Ensures the skill bar doesn't overflow */
    opacity: 0; /* Starts hidden */
    transition: opacity 1s ease;
}

.skill-bar {
    height: 100%;
    width: 0; /* Will be animated */
    background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(89, 55, 218, 0.5) 100%); /* Gradient for glowing effect */
    box-shadow: 0 0 10px 1px #ffffff; /* Subtle glow */
    transition: width 2s ease;
}

/* Responsive breakpoints for different skill levels */
.skill-section[data-skill-level="1"] .skill-bar { width: 15%; }
.skill-section[data-skill-level="2"] .skill-bar { width: 30%; }
.skill-section[data-skill-level="3"] .skill-bar { width: 45%; }
.skill-section[data-skill-level="4"] .skill-bar { width: 60%; }
.skill-section[data-skill-level="5"] .skill-bar { width: 75%; }
.skill-section[data-skill-level="6"] .skill-bar { width: 90%; }
.skill-section[data-skill-level="7"] .skill-bar { width: 100%; }