.menu {
    background: linear-gradient(45deg, #3498db, #1abc9c); /* Gradient background */
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Distribute space between items */
    padding: 15px 20px; /* Increased padding for a spacious look */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Deeper shadow effect */
    position: sticky; /* Make it stick to the top when scrolling */
    top: 0; /* Stick to the top */
    z-index: 1000; /* Ensure it stays above other content */
    border-radius: 0px; /* Slightly rounded corners */
    width: 95%; /* Ensure the menu takes full width */
}

.menu-item {
    color: #fff;
    text-decoration: none;
    padding: 10px; /* Adjust padding for better spacing */
    margin: 0 5px; /* Less margin for better fitting */
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease; /* Added transform transition */
    font-size: 12px; /* Default font size */
    font-weight: bold; /* Bold font for emphasis */
    flex: 1; /* Make each menu item take equal space */
    text-align: center; /* Center text in the buttons */
}

.menu-item::after {
    content: ""; /* Pseudo-element for underline effect */
    position: absolute;
    width: 100%; /* Full width */
    height: 2px; /* Line thickness */
    background-color: #fff; /* Line color */
    bottom: 0; /* Align it to the bottom */
    left: 0; /* Align it to the left */
    transform: scaleX(0); /* Start hidden */
    transition: transform 0.3s ease; /* Smooth transition */
}

.menu-item:hover {
    background-color: #2980b9; /* Darker background on hover */
    transform: translateY(-2px); /* Lift effect */
}

.menu-item:hover::after {
    transform: scaleX(1); /* Show underline on hover */
}