.btn:hover {
    background: rgb(200, 255, 0);
}

.cards {
    margin-top: 60px;
    width: 100%; 
    padding: 35px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    cursor: pointer;
}

/* Dark Mode Styles */
body.dark-mode .btn:hover {
    background: #ff3333; /* Slightly lighter red for better visibility in dark mode */
}

body.dark-mode .cards {
    background-color: #2c2c2c; /* Dark background for the cards container */
}