<style>
    /* --- Base & Mobile-First Styles (for screens < 768px) --- */

    /* General Styling */
    .footer-container {
        background-color: #fafafa;
        /* Use rem for responsive padding */
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .footer-container h4 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        border-bottom: 1px solid #e0e0e0;
        padding-bottom: 0.5rem;
    }

    /* Responsive Tables for Contact & Meetings */
    .info-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 1rem;
    }

    /* On mobile, stack all table elements */
    .info-table tbody,
    .info-table tr,
    .info-table td {
        display: block;
        line-height: 1.5;
    }

    .info-table tr {
        margin-bottom: 1.5rem;
    }

    .info-table td {
        padding: 4px 0;
    }

    .info-table i {
        margin-right: 10px;
        width: 1.2em; /* Aligns icons neatly */
        text-align: center;
    }

    /* Style the first cell in each row as a heading */
    .info-table td:first-child {
        font-weight: bold;
        margin-bottom: 0.5rem;
    }

    /* Staff List Section */
    #staffdropdown ul {
        list-style: none; /* Removed bullet points as requested */
        padding: 0;
        margin: 0;
    }

    #staffdropdown li {
        margin-bottom: 1.5rem;
    }

    .post-title {
        font-weight: bold;
        font-size: 1.2em;
    }

    /* Staff Name Grid Layout */
    .s-staff-members {
        margin-bottom: 20px;
        font-size: 1em;
    }
    .staff-members {
        display: grid;
        gap: 8px 16px; /* row-gap column-gap */
        justify-content: start;
        text-align: left;
        margin-bottom: 20px;
        font-size: 1em;
        line-height: 1.5;
        /* Mobile: 3 columns */
        grid-template-columns: repeat(3, 1fr);
    }
    .staff-member p {
        margin: 0;
    }

    /* Final Footer */
    .main-footer {
        text-align: center;
        padding: 20px;
        color: #666;
        background-color: #f8f9fa;
        border-top: 1px solid #e7e7e7;
    }

    /* --- Tablet Styles (screens >= 768px) --- */
    @media (min-width: 768px) {
        .footer-container {
            padding: 2.5rem;
        }

        /* Restore default table layout */
        .info-table {
            display: table;
        }
        .info-table tbody {
            display: table-row-group;
        }
        .info-table tr {
            display: table-row;
            margin-bottom: 0;
        }
        .info-table td {
            display: table-cell;
            vertical-align: top;
            padding: 8px 5px;
        }
        .info-table td:first-child {
            margin-bottom: 0;
        }

        /* Define column widths for contact table */
        .contact-info-table {
            table-layout: fixed;
        }
        .contact-info-table td:nth-child(1) {
            width: 10%;
        }
        .contact-info-table td:nth-child(2) {
            width: 38%;
        }
        .contact-info-table td:nth-child(3) {
            width: 26%;
        }
        .contact-info-table td:nth-child(4) {
            width: 26%;
        }

        /* Define column widths for meetings table */
        .meetings-table td:nth-child(1) {
            width: 12%;
        }
        .meetings-table td:nth-child(2) {
            width: 88%;
        }

        /* Tablet: 6 columns for staff grid */
        .staff-members {
            grid-template-columns: repeat(6, 1fr);
        }
    }

    /* --- Desktop Styles (screens >= 1200px) --- */
    @media (min-width: 1200px) {
        /* Desktop: 10 columns for staff grid looks balanced */
        .staff-members {
            grid-template-columns: repeat(10, 1fr);
        }
    }
</style>
