body {
            background: #f6efec;
        }

        /* HERO */
        .inner-hero {
            background: linear-gradient(135deg, #002f4b, #9c0000);
            padding: 60px 15px;
            color: #fff;
            text-align: center;
        }

        .inner-hero h1 {
            font-size: 36px;
            font-weight: 700;
        }

        @media(max-width:768px) {
            .inner-hero h1 {
                font-size: 26px;
            }
        }

        /* WRAPPER */
        .staff-wrapper {
            background: #fff;
            padding: 20px;
            border: 1px solid #ddd;
        }

        /* LEFT MENU */
        .dept-menu {
            border: 1px solid #ddd;
        }

        .dept-menu a {
            display: block;
            padding: 12px 15px;
            text-decoration: none;
            color: #333;
            border-bottom: 1px solid #eee;
            font-weight: 500;
        }

        .dept-menu a:hover {
            background: #003459;
            color: #fff;
        }

        /* FACULTY CARD */
        .faculty-card {
            background: #fff;
            border: 1px solid #850005;
            text-align: center;
            padding: 20px;
            border-radius: 10px;
            transition: .3s;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
        }

        .faculty-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
        }

        .faculty-card img {
            width: 150px;
            height: 180px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #ddd;
            padding: 4px;
        }

        .faculty-card h5 {
            margin-top: 15px;
            font-weight: 600;
            color: #003459;
        }

        .faculty-card p {
            color: #777;
            font-size: 14px;
        }

        .mail-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #6c757d;
            color: #fff;
        }

        .faculty-card:hover .mail-icon {
            background: #003459;
        }

        /* ================= TAB LOGIC ================= */

        /* Hide all departments */
        .dept-content {
            display: none;
        }

        /* Show selected */
        .dept-content:target {
            display: block;
        }

        /* Default: show food ONLY when no tab clicked */
        body:not(:has(:target)) #food {
            display: block;
        }

        .designation {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 12px;
        }

        /* Action Row */
        .card-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
        }

        /* View More Button */
        .view-btn {
            font-size: 14px;
            padding: 6px 9px;
            border-radius: 20px;
            border: 1px solid #003459;
            color: #003459;
            text-decoration: none;
            font-weight: 500;
            transition: .3s;
        }

        .view-btn i {
            margin-left: 4px;
            transition: .3s;
        }

        .view-btn:hover {
            background: #003459;
            color: #fff;
        }

        .view-btn:hover i {
            transform: translateX(4px);
        }

        /* Mail Icon */
        /* Email pill with icon + text */
        .mail-icon-text {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 20px;
            color: #003459;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all .3s ease;
            border: 1px solid #003459;
        }

        /* Icon size */
        .mail-icon-text i {
            font-size: 14px;
        }

        /* Hover effect */
        .mail-icon-text:hover {
            background: #003459;
            color: #fff;
        }

        /* Optional: subtle shadow */
        .mail-icon-text {
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }

       
        /* Active left tab */
.dept-menu a.active{
    background:#003459;
    color:#fff;
    font-weight:600;
}