.masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Desktop */
    gap: 20px;
}

.masonry-item img {
    width: 100%;
    display: block;
    border-radius: 6px;
}

/* Tablet */
@media (max-width: 991px) {
    .masonry {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .masonry {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Tab Styling */
.gallery-tabs {
    margin-bottom: 30px;
    text-align: center;
}
.tab-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.tab-btn {
    padding: 10px 25px;
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    transition: all 0.3s ease;
    min-width: 120px;
}
.tab-btn.active-btn {
    background: #e6b15f;
    color: black;
    border-color: #e6b15f;
}
.masonry-item {
    display: none; /* Hidden by default */
}
.masonry-item.active {
    display: block;
}
/* Responsive adjustment */
@media (max-width: 768px) {
    .tab-btn {
        padding: 8px 15px;
        min-width: auto;
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .tab-buttons {
        display: flex;
        flex-wrap: nowrap;          /* keep in one row */
        overflow-x: auto;           /* enable scroll */
        -webkit-overflow-scrolling: touch;
        gap: 10px;
        padding: 0 15px 5px;        /* <-- fix: add left/right padding */
        box-sizing: border-box;
    }

    .tab-buttons::-webkit-scrollbar {
        display: none;              /* hide scrollbar */
    }

    .tab-btn {
        flex: 0 0 auto;             /* keep width fixed */
        padding: 8px 10px;
        font-size: 14px;
        white-space: nowrap;        /* avoid breaking */
    }
}