/* Base styles for filter buttons */
.filter-btn {
    font-size: 20px;
    padding: 5px 10px;
    text-decoration: none;
    display: inline-block;
    /* margin: 0px; Reduced space between the buttons */
}


/* For mobile view (max-width 767px) */
@media (max-width: 767px) {
    .col-lg-8 {
        display: flex;
        flex-wrap: wrap; /* Wrap buttons to the next line */
        justify-content: space-between; /* Spread out the buttons across the screen */
        gap: 3px; /* Reduced gap between buttons */
    }

    /* The first 3 buttons (top row) */
    .filter-btn:nth-child(-n+3) {
        width: calc(33.333% - 6px); /* 3 buttons per row with small space between */
    }

    /* The last 2 buttons (bottom row) */
    .filter-btn:nth-child(n+4) {
        width: calc(50% - 2px); /* 2 buttons per row with small space between */
    }

    .filter-btn {
        font-size: 14px; /* Slightly smaller text for mobile */
        margin-bottom: 5px; /* Reduced space between rows */
        text-align: center; /* Center text inside each button */
    }
}






/* Container for portfolio items */
.portfolio-items {
    padding: 30px;
}

/* Ensure the portfolio container is responsive */
.portfolio-items .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the items in the row */
    gap: -30px; /* Reduced space between items */
}

/* Portfolio items styling */
.portfolio-item {
    width: calc(33.333% - 10px); /* Three items per row with a gap */
    padding: 15px;
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.3s ease; /* Smooth hover effect */
}

/* On hover, slightly scale the portfolio item for a visual effect */
.portfolio-item:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* For mobile view (max-width 767px) */
@media (max-width: 767px) {
    .portfolio-item {
        width: calc(50% - 10px); /* 2 items per row on mobile */
    }
}

/* For very small screens (max-width 480px) */
@media (max-width: 480px) {
    .portfolio-item {
        width: 100%; /* 1 item per row for very small screens */
    }
}