/* Dropdown Button Styling */
.dropdown-toggle {
    background-color: #ffffff; /* White background */
    color: #0056b3; /* Blue text color similar to the 'FERIA' button */
    padding: 10px 20px; /* Spacing inside the button */
    border: 2px solid #0056b3; /* Blue border to match the button */
    border-radius: 5px; /* Rounded corners for the button */
    font-family: 'Lato', sans-serif; /* Font family from your site */
    font-weight: bold; /* Bold font weight */
    text-transform: uppercase; /* Capitalize text */
    font-size: 14px; /* Font size similar to other menu items */
    cursor: pointer; /* Change cursor to indicate button */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
    display: inline-block; /* Allows the button to sit inline with other elements */
    margin: 0; /* Reset margin */
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* Hover and Focus states for the button for interactivity */
.dropdown-toggle:hover,
.dropdown-toggle:focus {
    background-color: #e8f0fe; /* Light blue background on hover/focus */
    color: #003366; /* Darker blue text color on hover/focus */
    border-color: #003366; /* Darker blue border on hover/focus */
    outline: none; /* Removes the outline on focus */
    text-decoration: none; /* Ensures no underline appears */
}

/* Dropdown Menu Styling */
.dropdown-menu {
    background-color: #ffffff; /* White background for dropdown */
    border: 1px solid #ddd; /* Light grey border similar to other elements */
    border-radius: 5px; /* Rounded corners for the dropdown */
    box-shadow: 0px 8px 16px rgba(0,0,0,0.1); /* Shadow for a 3D effect */
    margin-top: 5px; /* Space between button and dropdown */
    z-index: 1000; /* Ensure dropdown appears above other content */
}

/* Dropdown link styling */
.dropdown-menu ul {
    list-style: none; /* Remove bullet points from list */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.dropdown-menu ul li {
    border-bottom: 1px solid #f0f0f0; /* Light border for each item */
}

.dropdown-menu ul li:last-child {
    border-bottom: none; /* No border for the last item */
}

.dropdown-menu ul li a {
    color: #0056b3; /* Blue text color for links */
    padding: 12px 20px; /* Padding for the links */
    display: block; /* Links take full width of the dropdown */
    text-decoration: none; /* No underline for links */
    transition: background-color 0.3s ease; /* Smooth background transition */
}

.dropdown-menu ul li a:hover {
    background-color: #e8f0fe; /* Light blue background on hover */
}

.click-dropdown{
    position: relative;
}

.click-dropdown {
    position: relative;
    display: inline-block;
}