/*
          This style block makes the filter tabs responsive on smaller screens.
          - On tablets and smaller desktops (up to 991px), it uses Flexbox to wrap the tabs.
          - On mobile phones (up to 576px), it makes each tab take the full width for better readability and touch interaction.
        */
@media (max-width: 991px) {
    .meetings-page .filters ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        /* Adds a small space between wrapped items */
    }

    .meetings-page .filters ul li {
        margin: 0 !important;
        /* Resets negative margin from original CSS to prevent overlap */
    }
}

@media (max-width: 576px) {
    .meetings-page .filters ul {
        flex-direction: column;
        /* Stacks the tabs vertically */
        align-items: stretch;
        /* Makes all tabs have the same width */
    }
}