:root {
        --primary-blue: #2c3e50;
        --medical-blue: #3498db;
        --blood-red: #e74c3c;
        --med-orange: #e67e22;
        --lab-purple: #9b59b6;
        --light-bg: #f8fafb;
        --white: #ffffff;
    }

    .directory-wrapper {
        padding: 60px 5%;
        background: var(--light-bg);
    }

    .directory-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 30px;
    }

    /* Professional Card Design */
    .dir-card {
        background: var(--white);
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: 0.4s;
        border: 1px solid #edf2f7;
        display: flex;
        flex-direction: column;
    }

    .dir-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    }

    .card-banner {
        padding: 20px;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Colors for different categories */
    .bg-doc { background: linear-gradient(135deg, #3498db, #2980b9); }
    .bg-med { background: linear-gradient(135deg, #e67e22, #d35400); }
    .bg-blood { background: linear-gradient(135deg, #e74c3c, #c0392b); }
    .bg-lab { background: linear-gradient(135deg, #9b59b6, #8e44ad); }

    .card-body {
        padding: 20px;
        flex-grow: 1;
    }

    .list-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 15px 0;
        border-bottom: 1px solid #f1f1f1;
    }

    .list-item:last-child { border-bottom: none; }

    .icon-box {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

    .doc-icon-bg { background: #ebf5ff; color: var(--medical-blue); }
    .med-icon-bg { background: #fff4eb; color: var(--med-orange); }
    .blood-icon-bg { background: #fff0f0; color: var(--blood-red); }

    /* See More Button Styling */
    .see-more-footer {
        padding: 15px;
        text-align: center;
        background: #fdfdfd;
        border-top: 1px solid #f1f1f1;
    }

    .btn-see-more {
        background: none;
        border: 2px solid #edf2f7;
        padding: 8px 25px;
        border-radius: 50px;
        color: #718096;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        transition: 0.3s;
    }

    .btn-see-more:hover {
        background: var(--medical-blue);
        color: white;
        border-color: var(--medical-blue);
    }

    /* Badge styling */
    .badge {
        font-size: 0.7rem;
        padding: 2px 8px;
        border-radius: 4px;
        font-weight: bold;
        text-transform: uppercase;
    }
    .badge-success { background: #c6f6d5; color: #22543d; }
    .badge-danger { background: #fed7d7; color: #822727; }
.lab-test-section {
        padding: 60px 5%;
        background-color: #ffffff;
    }

    .test-table-container {
        margin-top: 30px;
        overflow-x: auto;
        border-radius: 15px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }

    .test-table {
        width: 100%;
        border-collapse: collapse;
        background: white;
        text-align: left;
    }

    .test-table th {
        background-color: var(--lab-purple);
        color: white;
        padding: 15px;
        font-weight: 600;
    }

    .test-table td {
        padding: 15px;
        border-bottom: 1px solid #eee;
        color: #444;
    }

    .test-table tr:hover {
        background-color: #f9f6ff;
    }

    .price-tag {
        font-weight: 700;
        color: #27ae60;
    }

    .hospital-name {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--primary-blue);
        font-weight: 600;
    }

    .hospital-name i {
        color: var(--medical-blue);
    }

    .filter-bar {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }

    .filter-bar input, .filter-bar select {
        padding: 10px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        outline: none;
    }