Меняется цвет сначала на черный, а потом на бирюзовый

Мне нужно сделать так, чтобы цвет пункта менялся на бирюзовый сразу, но сейчас он меняется на одну миллисекунду на черный, а потом только на бирюзовый.

<nav>
                        <ul class="menu d-flex">
                            <li class="menu__item"><a href="#">
                                Главная
                            </a></li>
                            <li class="menu__item"><a href="#">
                                Магазин
                            </a></li>
                            <li class="menu__item"><a href="#">
                                О бренде
                            </a></li>
                            <li class="menu__item"><a href="#">
                                Контакты
                            </a></li>
                        </ul>
   </nav>

CSS

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    color: #6E9C9F;
    text-decoration: none;
}

header {
    background: linear-gradient(to right, white 55%, #F1EADC 45%);
    height: 1000px;
}

.logo {
    display: block;
    margin-top: 51px;
}

.menu {
    margin-top: 56px;
}

.menu__item {
    font-size: 15px;
    line-height: 1.4em;
    letter-spacing: 0.02em;
    font-weight: 400;
    margin-right: 45px;
}

.menu__item a:hover {
    transition: all ease 0.5s;
    font-weight: 700;
}

.menu__item:last-of-type {
    margin-right: 0;
}