Почему не работает :hover?

Question

Даниил Николаев @misataaaa

HTML
CSS

Почему не работает :hover?

html:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width = device-width, initial-scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Ресторан </title>
    <link rel="stylesheet" href='style.css'>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Urbanist:ital,wght@1,700&display=swap" rel="stylesheet">
</head>

<body>
    <header>
         <div class="container">
             <div class="header-line">
                 <div class="logo">
                    <img src='png/LOGO.png' </div>
                 </div>

                <nav class="menu">
                    <a class="nav-item" href="@">ГЛАВНАЯ</a>
                    <a class="nav-item" href="@">МЕНЮ</a>
                    <a class="nav-item" href="@">О НАС</a>
                    <a class="nav-item" href="@">БРОНЬ</a>
                </nav>
                <div class='cart'>
                    <a href="@">
                        <img class='cart-img' src="png/cart.png"
                    </a>
                </div>
                <div class="phone">
                    <div class="phone-holder">
                       <div class="phone-img">
                           <img src="png/phone.png">
                       </div>
                        <div class="number">
                            <a class='num'href="#">+999-888-76-54</a>
                        </div>
                    </div> 
                    <div class="text-phone">
                        Свяжитесь с нами для<br> бронирования
                    </div> 
                           
                </div>
                <div class="btn">
                    <a href="#" class="button">ЗАКАЗ СТОЛИКА</a>
                </div>
            </div>
        </div>
    </header>
</body>

</html>

css:

*{
    margin: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
}

.container {
    margin: 0px 166px;
}

header {
    background-image: url(png/bg.png);
    background-repeat: no-repeat;
    height: 100vh;
    background-size: cover;
}

.header-line {
    padding-top: 50px;
    display: flex;
    align-items: center;
    justify-content:space-around;
}

.nav-item {
    color:#fff;
    text-decoration: none;
    font-weight: 700;
    font-size:14px;
    margin-right: 25px;
    transition: color 0.3s linear;
}

.nav-item:hover {
    color:#d8ldld;
}

.cart{
    position: relative;
    border-right: 1px solid #FFFFFF;
    padding-right: 21px;
    height: 50px;    
}

.cart-img{
    position: absolute;
    top:18px;
    right: 7px;
}

.num{
    color:#FFF;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
}

.text-phone{
    color:#fff;
    font-weight: 400;
    font-size:14px;
}

.phone-holder{
    display: flex;
    align-items: center;
}

.button{
    background: #FF7400;
    padding: 14px 18px;
}

.button{
    text-decoration: none;
    color:white;
    font-size: 14px;
    font-weight: 700;
}