{{-- <div class="mb-4">
    <div class="rounded bg-white shadow-sm px-3 py-4">
        <h4 class="fw-bold text-muted mb-3">Doctors Directory</h4>

        <div class="vstack gap-0 mb-4">
            <div class="d-flex align-items-center gap-2">
                <i class="fa-solid fa-circle fs-list"></i>
                <span>See when your favorite doctor is in.</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <i class="fa-solid fa-circle fs-list"></i>
                <span>Choose a convenient appointment time.</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <i class="fa-solid fa-circle fs-list"></i>
                <span>Schedule your visit with ease.</span>
            </div>
        </div>

        <a href="" class="d-flex justify-content-center p-3 green shadow-sm text-decoration-none hover-white-opacity-80">VIEW DOCTORS</a>
    </div>
    <div class="rounded-5 bg-red pt-1"></div>
</div> 
<div class="mb-4">
    <div class="rounded bg-white shadow-sm px-3 py-4">
        <h4 class="fw-bold text-muted mb-3">Medical Department</h4>

        <div class="vstack gap-0 mb-4">
            <div class="d-flex align-items-center gap-2">
                <i class="fa-solid fa-circle fs-list"></i>
                <span>Clinical Department.</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <i class="fa-solid fa-circle fs-list"></i>
                <span>GMETO.</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <i class="fa-solid fa-circle fs-list"></i>
                <span>Health Information Management.</span>
            </div>
            <div class="d-flex align-items-center gap-2">
                <i class="fa-solid fa-circle fs-list"></i>
                <span>Infection Prevention and Control.</span>
            </div>
        </div>
    </div>
    <div class="rounded-5 bg-red pt-1"></div>
</div>
<div class="mb-4">
    <div class="rounded bg-white shadow-sm px-3 py-4">
        <h4 class="fw-bold text-muted mb-3">Training Programs</h4>

        <div class="vstack gap-0 mb-4">
            <ul>
                <li class="text-secondary">
                    Medical Residency Training Program
                </li>
                <li class="text-secondary">
                    Medical Post Graduate Internship
                </li>
                <li class="text-secondary">
                    Medical Clerkship
                </li>
                <li class="text-secondary">
                    Nursing Pre-Service Training
                </li>
                <li class="text-secondary">
                    Clinical Pastoral Education (CPE)
                </li>
                <li class="text-secondary">
                    Related Learning Experience/Practicum
                </li>
            </ul>
        </div>
    </div>
    <div class="rounded-5 bg-red pt-1"></div>
</div>--}}