/*------------------------- Modern Portfolio Filter -------------------------*/
.portfolio-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.portfolio-filter .list-inline-item {
    margin: 0 !important;
    /* Override default margins */
}

.portfolio-filter a {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 50px;
    background: #f8f9fa;
    /* Light grey */
    color: #6c757d;
    /* Muted text */
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    text-decoration: none !important;
}

.portfolio-filter a:hover {
    background: #e9ecef;
    color: #495057;
}

.portfolio-filter a.active {
    background: #0bceaf !important;
    /* Teal Base Color */
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(11, 206, 175, 0.3);
}

@media (max-width: 991px) {
    .portfolio-filter {
        display: flex;
        flex-wrap: wrap;
        /* Allow wrapping to see all items */
        overflow-x: visible;
        justify-content: center;
        /* Center align */
        padding-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .portfolio-filter::-webkit-scrollbar {
        display: none;
    }

    .portfolio-filter a {
        white-space: normal;
        /* Allow text wrap if needed, or keep nowrap if preferred. Keeping normal is safer for long words? standard is pill so nowrap usually. */
        white-space: nowrap;
        margin-bottom: 5px;
    }
}