issue with hover on nth-child

He I am exploring the features of CSS 3 and I walked into some trouble:

Now I want to add a :hover effect where the element gets a slightly lighter color than its' default value. So the odd and dark-blue tiles get a slightly lighter color and the even and light-blue tiles get an even lighter blue color when this happens.

For a #SERVICE I have made this CSS:

#services:hover .card:nth-child(1) {
    background-color: #ff0084;
}

#services:hover .card:nth-child(2) {
    background-color: #21ff19;
}

#services:hover .card:nth-child(3) {
    background-color: #fffa08;
}

#services:hover .card:nth-child(4) {
    background-color: #1a1cff;
}

HTML

 <section id="services" class="text-white">
    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="pt-5 pb-3 text-center">
                    <i class="far fa-lightbulb fa-4x"></i>
                </div>
                <p class="text-center">Studio Design</p>
            </div>
        </div>
        //.....//
    </div>
 </section>