/* Skills Section */
#skills {
    padding: 0.938rem; /* Reduced from 1.25rem */
    text-align: center;
}

#skills-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.938rem; /* Reduced from 1.25rem */
    margin-top: 0.938rem; /* Reduced from 1.25rem */
}

/* Skill Card Styling */
.skill-card {
    background-color: var(--navbar-bg-color);
    border-radius: 0.703rem; /* Reduced from 0.938rem */
    width: 11.719rem; /* Reduced from 15.625rem */
    padding: 0.938rem; /* Reduced from 1.25rem */
    box-shadow: 0 0.188rem 0.375rem var(--shadow-color); /* Reduced from 0.25rem 0.5rem */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    color: var(--text-color);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Hover effect for skill card */
.skill-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0.281rem 0.563rem var(--shadow-color); /* Reduced from 0.375rem 0.75rem */
}

/* Skill Icon */
.skill-card i {
    font-size: 1.875rem; /* Reduced from 2.5rem */
    color: var(--secondary-color);
    margin-bottom: 0.703rem; /* Reduced from 0.938rem */
}

/* Skill Title */
.skill-card h3 {
    font-size: 0.938rem; /* Reduced from 1.25rem */
    color: var(--primary-color);
    margin-bottom: 0.469rem; /* Reduced from 0.625rem */
}

/* Skill Description */
.skill-card p {
    font-size: 0.656rem; /* Reduced from 0.875rem */
    color: #BBBBBB;
    margin-bottom: 0.938rem; /* Reduced from 1.25rem */
}

/* Progress Meter Styling */
.skill-card meter {
    width: 100%;
    height: 0.469rem; /* Reduced from 0.625rem */
    background-color: #444;
    border-radius: 0.234rem; /* Reduced from 0.313rem */
    border: none;
}

/* Meter filled portion (based on skill level) */
.skill-card meter::-webkit-meter-bar {
    background-color: var(--meter-bg-color);
    border-radius: 0.234rem; /* Reduced from 0.313rem */
}

.skill-card meter::-webkit-meter-optimum-value {
    background-color: var(--primary-color);
    border-radius: 0.234rem; /* Reduced from 0.313rem */
}

.skill-card meter::-moz-meter-bar {
    background-color: var(--primary-color);
    border-radius: 0.234rem; /* Reduced from 0.313rem */
}

/* Responsive design for smaller screens */
@media (max-width: 36rem) { /* Converted from 48rem */
    #skills-container {
        flex-direction: column;
        align-items: center;
    }

    .skill-card {
        width: 67.5%; /* Adjusted width for responsive layout */
    }
}