/* Menu for buttons below slider */
/* --- 1. Base Menu Structure & Layout (Responsiveness) --- */

/* Ensures the outer container respects screen width and adds padding */
#below-slider-nav .container {
    max-width: 1200px; /* Adjust max width as needed */
    margin: 0 auto;
    padding: 0 15px;
}

/* Style the primary menu wrapper (the <nav> element) */
.below-slider-menu-container {
    text-align: center; /* Center the entire menu block */
}

/* Style the <ul> element that holds the menu items */
.below-slider-menu-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Use Flexbox for horizontal layout */
    justify-content: center; /* Center the menu items horizontally */
    flex-wrap: wrap; /* Allow menu items to wrap to the next line on smaller screens */
}

/* Style the individual list item (li) */
.below-slider-menu-container ul li {
    margin: 5px; /* Space between the button-styled menu items */
}


/* --- 2. Link as Blue Button Styling --- */

/* Target the <a> element (the link) to style it as a button */
.below-slider-menu-container ul li a {
    /* Crucial for button styling: allows padding/margin/dimensions */
    display: block; 
    text-decoration: none; /* Remove underline */
    
    /* Button color and appearance */
    background-color: #134e8d; /* Bright blue color */
    color: #ffffff; /* White text for contrast */
    padding: 10px 18px; /* Button size */
    border-radius: 5px; /* Slightly rounded corners */
    font-size: 1em;
    font-weight: 600;
    white-space: nowrap; /* Prevents text inside the button from wrapping */
    transition: background-color 0.3s ease; /* Smooth hover transition */
}

/* Hover effect for the button */
.below-slider-menu-container ul li a:hover,
.below-slider-menu-container ul li a:focus {
    background-color: #134e8d; /* Darker blue on hover */
    color: #fff;
}


/* --- 3. Mobile Responsiveness (Ensuring Visibility) --- */

/* On smaller screens, the 'flex-wrap: wrap;' above ensures the items stack neatly. 
   We only need to adjust the padding/margins if necessary. */
@media (max-width: 600px) {
    /* Slightly increase margins for better spacing on mobile */
    .below-slider-menu-container ul li {
        margin: 7px 5px; 
    }
    
    /* Reduce padding on the links to allow more buttons to fit on one line */
    .below-slider-menu-container ul li a {
        padding: 8px 15px;
        font-size: 0.95em;
    }
}