/* ✅ Embossed navbar background */
.navbar {
    background: linear-gradient(145deg, #d6d6d6, #ffffff);
    box-shadow: inset 2px 2px 4px #b8b8b8, inset -2px -2px 4px #ffffff;
    border-radius: 10px;
    padding: 10px 20px;
}

/* ✅ Embossed menu links */
.nav-link {
    color: #333;
    font-weight: 600;
    background: linear-gradient(145deg, #f0f0f0, #d6d6d6);
    border-radius: 8px;
    padding: 8px 18px;
    margin: 0 5px;
    box-shadow: 3px 3px 6px #b8b8b8, -3px -3px 6px #ffffff;
    transition: all 0.2s ease-in-out;
}

/* ✅ Hover effect (pressed look) */
.nav-link:hover {
    box-shadow: inset 2px 2px 5px #b8b8b8, inset -2px -2px 5px #ffffff;
    background: linear-gradient(145deg, #d6d6d6, #f0f0f0);
    color: #007bff;
    text-decoration: none;
}

/* ✅ Active link (more pressed) */
.nav-link.active {
    box-shadow: inset 3px 3px 6px #b8b8b8, inset -3px -3px 6px #ffffff;
    background: #e0e0e0;
    color: #0d6efd;
}