/* Custom CSS to improve navigation visibility on slider */
.header-style-1 .navigation,
.header-style-2 .navigation {
    background-color: rgba(2, 13, 38, 0.9) !important; /* Dark background with opacity */
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.header-style-1 #navbar > ul > li > a,
.header-style-2 #navbar > ul > li > a {
    color: #ffffff !important; /* Ensure white text */
    padding: 20px 20px !important; /* Reduce padding to fit better */
}

/* Alternative: Add overlay to slider images to make nav more visible */
.hero-slider .slide-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3); /* Dark overlay */
    z-index: 0;
}

/* Make sure content stays on top of the overlay */
.hero-slider .slide-inner > * {
    position: relative;
    z-index: 2;
}

/* Adjust for dark background on navigation */
.site-header.header-style-1 .navbar-brand img,
.site-header.header-style-2 .navbar-brand img {
    filter: brightness(100);
}