/* Modern card style inspired by campus/course section */
    .officer-card {
        font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(31,41,55,0.10);
        background: #fff;
        display: flex;
        flex-direction: column;
        height: 100%;
        border: 1px solid #f0f1f3;
        transition: box-shadow .18s, transform .18s;
    }
    .officer-card .photo.passport {
        height: 130px;
        width: 150px;
        margin: 12px auto 0 auto;
        background: #f7f8fa;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(31,41,55,0.08);
    }
    .officer-card .photo.passport img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        display: block;
        transition: transform .4s;
    }
    .office-title {
        font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: #1a2340;
        margin-bottom: 0.5rem;
        letter-spacing: 0.01em;
    }
    @media (max-width: 767px) {
        .officer-card .photo.passport { height: 110px; width: 80px; margin-top: 10px; }
    }
    .officer-card:hover {
        box-shadow: 0 16px 40px rgba(31,41,55,0.16);
        transform: translateY(-4px) scale(1.012);
    }
    .officer-card:hover .photo img { transform: scale(1.045); }
    .officer-card .info {
        padding: 10px 10px 10px 10px;
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex: 1 1 auto;
    }
    .officer-card h4 {
        margin: 0 0 2px 0;
        font-size: 19px;
        color: #1a2340;
        font-weight: 700;
        letter-spacing: 0.01em;
    }
    .officer-card h5 {
        margin: 0 0 4px 0;
        font-size: 15px;
        color: #0077b5;
        font-weight: 600;
        letter-spacing: 0.01em;
    }
    .officer-card p.small-contact {
        color: #6b7280;
        font-size: 13px;
        font-weight: 400;
        margin-bottom: 2px;
        margin-top: 0;
    }
    .officer-card .details-row {
        margin-top: 10px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .officer-card .btn-outline-primary {
        font-weight: 600;
        padding: 6px 16px;
        border-radius: 8px;
        font-size: 13px;
        letter-spacing: 0.01em;
    }
    .page-main-content .row > [class*="col-"] { display: flex; }
    .page-main-content .row > [class*="col-"] .officer-card { width: 100%; }
    @media (max-width: 767px) {
        .officer-card .photo { height: 140px; }
        .officer-card .info { padding: 14px 10px 12px 10px; }
    }