.nav-button {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.box {
    float: left;
    width: 10%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pulse-r300 {
    display: block;
    width: 4px;
    height: 8px;
    border-radius: 50%;
    background: #ff0000;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(237,101,76, 0);
    animation: pulse-red 2s infinite;
}

.pulse-r300:hover {
    animation: none;
}

.pulse-r400 {
    margin-left: 8px; /* Adjust as necessary */
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff0000;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(218,59,28, 0);
    animation: pulse-red 2s infinite;
}

.pulse-r400:hover {
    animation: none;
}

@keyframes pulse-red {
    0% {
        box-shadow: 0 0 0 0 rgb(255, 0, 0);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(218,59,28, 0); /* Valor reduzido para 10px */
    }
    100% {
        box-shadow: 0 0 0 0 rgba(218,59,28, 0);
    }
}