.about-table {
    width: 90%;
    max-width: 1400px;
     margin: 40px auto 0;
    padding: 0 1.5rem;
    box-sizing: border-box;
}
.services-list {
            width: 100%;
        }



        /* =====================================================
           TOP TOOLBAR
        ===================================================== */

        .services-toolbar {

            display: grid;

            grid-template-columns:
                2fr
                1.35fr
                1.35fr
                1.1fr;

            gap: 5px;

            margin-bottom: 36px;
        }



        /* =====================================================
           SEARCH
        ===================================================== */

        .service-search {

            height: 40px;

            display: flex;

            align-items: center;

            border: 1px solid #16828a;

            border-radius: 6px;

            background: #fff;
        }


        .service-search .search-icon {

            margin-left: 40px;

            margin-right: 18px;

            color: #147c84;

            font-size: 28px;

            line-height: 1;
        }


        .service-search input {

            width: 100%;

            height: 100%;

            padding-right: 15px;

            border: none;

            outline: none;

            background: transparent;

            font-family: inherit;

            font-size: 1.1rem;

            color: #222;
        }


        .service-search input::placeholder {

            color: #777;
        }



        /* =====================================================
           FILTER BOX
        ===================================================== */

        .service-filter {

            height: 40px;

            display: flex;

            align-items: center;

            border: 1px solid #16828a;

            border-radius: 6px;

            background: #fff;
        }


        .filter-icon {

            margin-left: 20px;

            margin-right: 16px;

            color: #147c84;

            font-size: 24px;

            line-height: 1;
        }


        .service-filter select {

            flex: 1;

            height: 100%;

            min-width: 0;

            padding: 0 15px 0 0;

            border: none;

            outline: none;

            background: #fff;

            font-family: inherit;

            font-size: 1.05rem;

            color: #111;

            cursor: pointer;
        }



        /* =====================================================
           TABLE HEADER
        ===================================================== */

        .services-header {

            display: grid;

            grid-template-columns:
              
            
                5fr
                1.5fr
                1.2fr;

            align-items: center;

            min-height: 60px;

            padding: 0 2rem;

            background: #a8d9dc;

            color: #075c63;

            font-size: 14px;

            font-weight: 700;

            letter-spacing: 0.04em;
        }



        /* =====================================================
           RECORD CONTAINER
        ===================================================== */

        #servicesData {
            width: 100%;
        }
#servicesData-emp {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}



        /* =====================================================
           SERVICE ROW
        ===================================================== */

        .service-row {

            display: grid;

            grid-template-columns:
                
                4.5fr
                1.5fr
                1.2fr;

            align-items: center;

            margin-top: 8px;

            padding: 1.3rem 2rem;

            min-height: 125px;

            background: #fff;

            border: 1px solid #e2e2e2;

            border-radius: 10px;

            transition:
                box-shadow 0.2s ease,
                border-color 0.2s ease;
        }


        .service-row:hover {

            border-color: #a8d9dc;

            box-shadow:
                0 3px 12px
                rgba(0, 0, 0, 0.06);
        }



        /* =====================================================
           TITLE
        ===================================================== */

        .service-title {

            display: flex;

            align-items: flex-start;

            gap: 1rem;

            padding-right: 1.5rem;
        }


        .service-number {

            flex: 0 0 auto;

            display: flex;

            align-items: center;

            justify-content: center;

            width: 38px;

            height: 38px;

            border: 1px solid #176f76;

            border-radius: 50%;

            color: #176f76;

            font-size: 0.85rem;

            font-weight: 700;
        }


        .service-title h2 {

            margin: 0;

            font-size: 1.6rem;

            line-height: 1.45;

            font-weight: 500;

            color: #111;
        }



        /* =====================================================
           DESCRIPTION
        ===================================================== */

        .service-description {

            padding: 0 1.5rem;

            font-size: 14px;

            line-height: 1.55;

            color: #333;
        }


        .service-description p {

            margin: 0 0 0.6rem;
        }


        .service-description h3 {

            margin:
                0.4rem
                0
                0.3rem;

            color: #075c63;

            font-size: 0.9rem;

            font-weight: 700;
        }


        .service-description ul {

            margin: 0;

            padding-left: 1.2rem;
        }


        .service-description li {

            margin-bottom: 0.3rem;
        }



        /* =====================================================
           BUDGET
        ===================================================== */

        .service-budget {

            display: flex;

            flex-direction: column;

            gap: 5px;

            padding: 0 1rem;

            font-size: 0.85rem;
        }


        .service-budget strong {

            color: #075c63;

            font-size: 0.95rem;
        }


        .service-budget span {

            line-height: 1.4;
        }



        /* =====================================================
           VIEW BUTTON
        ===================================================== */

        .service-action {

            display: flex;

            justify-content: center;

            padding-left: 1rem;
        }


        .service-btn {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-width: 110px;

            height: 54px;

            padding: 0 1.3rem;

            background: #a8d9dc;

            color: #075c63;

            border-radius: 6px;

            text-decoration: none;

            font-size: 0.9rem;

            font-weight: 700;

            letter-spacing: 0.04em;

            transition: 0.2s ease;
        }


        .service-btn:hover {

            background: #8bcbd0;
        }



        /* =====================================================
           BOTTOM FOOTER
        ===================================================== */

        .services-footer {

            position: relative;

            display: flex;

            align-items: center;

            justify-content: center;

            min-height: 100px;

            margin-top: 15px;
        }



        /* =====================================================
           PAGINATION
        ===================================================== */

        .pagination {

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;
        }


        .page-number,
        .page-arrow {

            display: flex;

            align-items: center;

            justify-content: center;

            min-width: 38px;

            height: 38px;

            color: #075c63;

            text-decoration: none;

            font-size: 1rem;

            font-weight: 600;

            cursor: pointer;
        }


        .page-number:hover,
        .page-arrow:hover {

            color: #111;
        }


        .page-number.active {

            font-weight: 800;

            color: #075c63;
        }


        .page-arrow {

            font-size: 2rem;

            font-weight: 400;
        }


        .page-arrow.disabled {

            color: #ccc;

            pointer-events: none;

            cursor: default;
        }


        .page-dots {

            display: flex;

            align-items: center;

            justify-content: center;

            min-width: 30px;

            height: 38px;

            color: #111;

            font-size: 1rem;
        }



        /* =====================================================
           ARCHIVE BUTTON
        ===================================================== */

        .archive-btn {

            position: absolute;

            right: 0;

            top: 50%;

            transform: translateY(-50%);

            display: inline-flex;

            align-items: center;

            gap: 10px;

            height: 54px;

            padding: 0 1.4rem;

            background: #a8d9dc;

            color: #075c63;

            text-decoration: none;

            border-radius: 6px;

            font-size: 0.9rem;

            font-weight: 700;

            letter-spacing: 0.04em;

            transition: 0.2s ease;
        }


        .archive-btn:hover {

            background: #8bcbd0;
        }


        .archive-btn span {

            font-size: 1.4rem;
        }



        /* =====================================================
           NO RESULTS
        ===================================================== */

        .no-results {

            display: none;

            padding: 40px 20px;

            text-align: center;

            border:
                1px solid #e2e2e2;

            border-top: none;

            color: #666;

            font-size: 1rem;
        }



        /* =====================================================
           TABLET
        ===================================================== */

        @media (max-width: 1100px) {

            #maincontent {

                padding-left: 2rem;

                padding-right: 2rem;
            }


            .services-toolbar {

                grid-template-columns:
                    1fr
                    1fr;
            }


            .services-header {

                grid-template-columns:
                    
                    5fr
                    1.5fr
                    1fr;
            }


            .service-row {

                grid-template-columns:
                    
                    4.5fr
                    1.5fr
                    1fr;

                padding:
                    1.2rem;
            }


            .service-title h2 {

                font-size: 12px;
            }


            .service-description {

                padding:
                    0 0.8rem;
            }

        }



        /* =====================================================
           MOBILE
        ===================================================== */

        @media (max-width: 700px) {

            #maincontent {

                padding:
                    25px 1rem 50px;
            }


            .services-toolbar {

                grid-template-columns: 1fr;

                gap: 8px;

                margin-bottom: 20px;
            }


            .services-header {

                display: none;
            }


            .service-row {

                display: block;

                padding: 1.2rem;

                margin-top: 12px;
            }


            .service-title {

                margin-bottom: 1rem;

                padding: 0;
            }


            .service-title h2 {

                font-size: 1.1rem;
            }


            .service-description {

                padding: 0;

                margin-bottom: 1rem;
            }


            .service-budget {

                padding: 0;

                margin-bottom: 1rem;
            }


            .service-action {

                justify-content: flex-start;

                padding: 0;
            }


            .services-footer {

                min-height: 160px;

                align-items: flex-start;

                padding-top: 20px;
            }


            .pagination {

                width: 100%;
            }


            .archive-btn {

                position: static;

                transform: none;

                margin-top: 70px;
            }

        }
        .filter-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.service-filter input[type="date"] {
    padding: 10px 4px;
    border: none;
    outline: none;
    background: transparent;
    color: #333;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}

table.responsive {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c9d2d0;
    background: #ffffff;
    font-size: 15px;
}


/* -----------------------------------------------------
   TABLE HEADER
----------------------------------------------------- */

table.responsive thead th {
    background: var(--key);
    color: #ffffff;

    border: 1px solid #c9d2d0;

    padding: 13px 12px;

    text-align: center;
    vertical-align: middle;

    font-weight: 600;
    line-height: 1.4;
}


/* -----------------------------------------------------
   TABLE BODY
----------------------------------------------------- */

table.responsive tbody td {
    border: 1px solid #c9d2d0;

    padding: 12px 12px;

    vertical-align: top;

    line-height: 1.6;

    color: #333333;
}


/* Mineral name */

table.responsive tbody td:first-child {
    font-weight: 600;
    white-space: nowrap;
}


/* -----------------------------------------------------
   ALTERNATING ROWS
----------------------------------------------------- */

table.responsive tbody tr:nth-child(even) {
    background: #f7faf8;
}


/* -----------------------------------------------------
   HOVER
----------------------------------------------------- */

table.responsive tbody tr:hover {
    background: #eef5f2;
}


/* -----------------------------------------------------
   STRONG TEXT
----------------------------------------------------- */

table.responsive tbody td strong {
    color: #315f55;
}


/* -----------------------------------------------------
   ALIGN NUMERIC COLUMNS
----------------------------------------------------- */

table.responsive tbody td:nth-child(2),
table.responsive tbody td:nth-child(3),
table.responsive tbody td:nth-child(4),
table.responsive tbody td:nth-child(5) {
    text-align: center;
    white-space: nowrap;
}


/* =====================================================
   RESPONSIVE TABLE
===================================================== */

@media (max-width: 900px) {

    table.responsive {
        font-size: 14px;
    }

    table.responsive thead th,
    table.responsive tbody td {
        padding: 10px 8px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 700px) {

    table.responsive {
        border: 0;
    }

    table.responsive thead {
        display: none;
    }

    table.responsive tbody,
    table.responsive tr,
    table.responsive td {
        display: block;
        width: 100%;
    }

    table.responsive tbody tr {
        margin-bottom: 18px;
        border: 1px solid #c9d2d0;
        background: #ffffff;
    }

    table.responsive tbody td {
        position: relative;

        padding: 10px 12px 10px 45%;

        min-height: 42px;

        border: 0;
        border-bottom: 1px solid #dfe5e3;

        text-align: left !important;

        white-space: normal;
    }

    table.responsive tbody td:last-child {
        border-bottom: 0;
    }

    table.responsive tbody td::before {
        content: attr(data-label);

        position: absolute;
        left: 12px;
        top: 10px;

        width: 38%;

        font-weight: 600;
        color: #315f55;
    }

    /* Rows containing colspan */
    table.responsive tbody td[colspan] {
        padding-left: 12px;
    }

    table.responsive tbody td[colspan]::before {
        display: none;
    }

}
.table-min {
    width: 90%;
    margin: 30px auto;
    border-collapse: collapse;
    border: 1px solid #c9d2d0;
}

.table-rti {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #333;
    margin: 20px 0;
    font-family: Arial, sans-serif;
    font-size: 15px;
}

.table-rti th,
.table-rti td {
    border: 1px solid #333;
    padding: 10px;
    text-align: left;
    vertical-align: top;
}

.table-rti th {
    background-color: #4b8178;
    color: #fff;
    font-weight: bold;
}

.table-rti tbody tr:nth-child(even) {
    background-color: #f5f5f5;
}

.table-rti a {
    color: #075fc7;
    text-decoration: underline;
}