/* Hide all city content by default */
.city-content {
    display: none;
}

/* Show city content when it has the active class */
.city-content.active {
    display: block;
}
.w3-hide {
    display: none;
}
.w3-container {
    margin-top: 10px;
    padding: 10px;
}
.info-button {
    background-color: #ec9c3f; /* Light gray */
    padding: 10px 20px; /* Padding for the button */
    text-align: left; /* Text aligned to the left */
    text-decoration: none;
    font-size: 16px;
    margin: 10px auto; /* Center the button horizontally */
    cursor: pointer;
    transition: all 0.3s ease; /* Smooth transition for all properties */
}
.info-button:hover {
    background-color: #c57921; /* Slightly darker gray on hover */
    border-color: #929191; /* Darker border color on hover */
}
.trip-button {
    background-color: #8aa2b0; /* Light gray */
    padding: 10px 20px; /* Padding for the button */
    text-align: left; /* Text aligned to the left */
    text-decoration: none;
    display: block;
    font-size: 16px;
    margin: 10px auto; /* Center the button horizontally */
    cursor: pointer;
    width: 100%; /* Width set to 100% */
    box-sizing: border-box; /* Ensures padding and border are included in the width */
    transition: all 0.3s ease; /* Smooth transition for all properties */
}

.trip-button:hover {
    background-color: #677e8b; /* Slightly darker gray on hover */
    border-color: #8aa2b0; /* Darker border color on hover */
}