/* horizontal menu bar */
    .worship-tab-btn {
        line-height: 1.5;
    }

    .filter-container {
        display: flex; /* <-- MODIFIED: Use Flexbox to make children same height */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 1px solid #eee;
        padding-bottom: 5px;
    }

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

    .filter-btn {
        background-color: #f1f1f1;
        border: none;
        color: #333;
        padding: 1rem 2rem;
        text-align: center;
        text-decoration: none;
        display: flex; /* <-- MODIFIED: To allow vertical centering */
        align-items: center; /* <-- ADDED: Vertically align text */
        justify-content: center; /* <-- ADDED: Horizontally align text */
        flex-shrink: 0; /* <-- ADDED: Prevent buttons from shrinking/squishing */
        font-size: 1rem;
        margin: 0.25rem 0.125rem;
        cursor: pointer;
    }
    .filter-btn.active {
        background-color: #333;
        color: #fff;
    }
    .item {
        display: none;
        padding: 20px;
        border: 1px solid #eee;
        margin: 10px 0;
        border-radius: 4px;
    }
    .item.show {
        display: block;
    }
    strong {
        font-weight: bold;
    }
    em {
        font-style: italic;
    }
    #news2 {
        margin-top: 40px;
    }
    #news2 .container .filter-container {
        overflow-x: auto; /* Enable horizontal scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling */
    }
    #news2 .container .filter-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar for a cleaner look */
    }
    #news2 .container .filter-btn {
        background-color: #f1f1f1;
        border: none;
        color: #333;
        padding: 1rem 2rem;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 1rem;
        margin: 0.25rem 0.125rem;
        cursor: pointer;
        white-space: nowrap;
    }
    #news2 .container .filter-btn.active {
        background-color: #333;
        color: #fff;
    }
    #news2 .container .item {
        display: none;
        padding: 20px;
        border: 0px solid #ccc;
        margin: 10px 0;
    }
    #news2 .container .item.show {
        display: block;
    }
    .bulletin-items {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem; /* Space between items */
        justify-content: flex-start; /* Left-align items */
    }
    .bulletin-item {
        display: none; /* Initially hidden, shown by JS */
        flex-direction: column; /* Ensure content stacks vertically */
        background-color: #fff;
        box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
        border-radius: 0;
        overflow: hidden;
        flex: 1 1 calc(33.333% - 1rem); /* Take up around 1/3 of the page width */
        max-width: calc(33.333% - 1rem); /* Ensure max width for desktop/iPad */
        box-sizing: border-box; /* Include padding and border in width calculations */
    }
    @media (max-width: 768px) {
        .bulletin-item {
            flex: 1 1 100%; /* Take up full width on mobile screens */
            max-width: 100%;
        }
    }
    .bulletin-item.show {
        display: flex; /* Use flex when shown */
    }
    .bulletin-title {
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5;
    }
    .bulletin-description {
        font-size: 1rem;
        line-height: 1.5;
        color: #000000;
        flex-grow: 1;
        word-wrap: break-word; /* prevent overflow with long unbroken strings */
        overflow-wrap: break-word;
    }
    .bulletin-description p {
        text-align: justify;
        font-size: 1rem;
        line-height: 1.5;
        color: #000000;
        margin-bottom: 0.9375rem;
        flex-grow: 1;
    }
    .bulletin-info {
        font-size: 1rem;
        color: #333;
        margin-bottom: 10px;
    }
    .bulletin-time {
        margin-right: 10px;
    }
    .tag {
        background-color: #f1f1f1;
        padding: 4px 8px;
        border-radius: 4px;
        margin-right: 5px;
    }
    .responsive-table {
        width: 100%;
        border-collapse: collapse;
    }
    .responsive-table td.left {
        width: 35%;
    }
    .responsive-table td.right {
        width: 65%;
    }
    .p.shifted {
        margin-left: 30px;
    }
    ol {
        list-style: decimal;
        list-style-position: outside;
        margin-left: 2.5rem;
        line-height: 1.5;
        margin-bottom: 0.9375rem;
    }
    ul {
        list-style: disc;
        list-style-position: outside;
        margin-left: 2.5rem;
        line-height: 1.5;
        margin-bottom: 0.9375rem;
    }

    p {
        text-align: justify;
        font-size: 1rem;
        line-height: 1.5;
        color: #000000;
        margin-bottom: 0.9375rem;
        flex-grow: 1;
    }

    @media (max-width: 540px) {
        /*horizontal scrollable menu bar*/
        .filter-container {
            display: flex;
            white-space: nowrap; /* Prevent line breaks */
            overflow-x: auto; /* Ensure it overflows on mobile */
            padding: 1rem 0;
            border-bottom: 0rem solid #ccc;
            -webkit-overflow-scrolling: touch; /* Smooth scrolling */
        }
        .filter-btn {
            min-width: 7.5rem; /* Ensure buttons have a minimum width */
            flex-shrink: 0; /* Prevent buttons from shrinking */
        }
        /*news item in filter cloud*/
        /* .bulletin-item {
            flex-direction: column; // Already default
        } */
        .bulletin-image {
            height: 180px;
        }
        .bulletin-content {
            padding: 0.9375rem;
        }
        .bulletin-title {
            font-size: 1.25rem;
        }
        .bulletin-description {
            font-size: 1rem;
        }
        .bulletin-info {
            font-size: 0.8rem;
        }
    }
    /* sharing news */
    .shareButton {
        background: #fff;
        color: #000;
        border: 0.03125rem #000 solid;
        border-radius: 0rem;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease; /* Added color transition */
    }
    .shareButton i {
        margin-left: 0.5rem; /* Changed to margin-left for icon after text */
    }
    .shareButton:hover {
        background: #000;
        color: #fff; /* Corrected color to #fff */
    }
    .post-btn {
        background-color: #3f004b;
        border: solid 1px #3f004b;
        color: #fff;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease; /* Added color transition */
        text-decoration: none;
    }
    .post-btn:hover {
        background-color: #fff;
        color: #3f004b;
    }