.notification-icon {
        position: absolute;
        top: 4px;
        right: 6px;
        background-color: #d64045;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        z-index: 1;
        animation: pulse 2s infinite;  /* 2 seconds for a slow pulse */
}

/* Ensure the nav-link is positioned relative so that absolute children position correctly */
.nav-link {
        position: relative;
}

/* Notification menu icon style */
.notification-menu-icon {
        position: absolute;
        top: 40%;               /* Vertically center within the nav-link */
        right: 30px;            /* Adjust this value based on your design */
        transform: translateY(-50%);
        background-color: #d64045;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        border: 2px solid transparent;
        z-index: 1;
        animation: pulse 2s infinite; /* Reuse your pulsing animation */
}

.notification-dot-small {
        display: inline-block;
        background-color: #d64045;
        height: 4px;
        width: 4px;
        border-radius: 8px;
        margin-left: 5px; /* Adjust spacing as needed */
        border: 5px solid transparent;
        /*animation: pulse 2s infinite;*/
}

@keyframes pulse {
        0% {
                transform: scale(1);
                opacity: 1;
        }
        50% {
                transform: scale(1.3);  /* slightly larger */
                opacity: 0.9;           /* a little transparent */
        }
        100% {
                transform: scale(1);
                opacity: 1;
        }
}

/* Dark mode override */
[data-theme="dark"] .notification-icon {
        border: 2px solid #03A67C;
}