/* Transparent Header Styling */
.navigation {
    background-color: transparent;
    transition: all 0.3s ease-in-out;
    padding: 20px 0;
    width: 100%;
    z-index: 999;
}

/* Ensure links are white on transparent background */
.navigation .navbar-light .navbar-nav .nav-item .nav-link {
    color: #fff;
    font-weight: 600;
}

/* Sticky Header (Scrolled State) */
.navigation.sticky-header {
    background-color: #ffffff !important;
    padding: 10px 0;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}

/* Change link color to dark on sticky header */
.navigation.sticky-header .navbar-light .navbar-nav .nav-item .nav-link {
    color: #333 !important;
}

/* Active link color in sticky header */
.navigation.sticky-header .navbar-light .navbar-nav .nav-item.active .nav-link {
    color: #28ABE3 !important;
}

/* Ensure Logo switches correctly */
.navigation .logo-default {
    display: none; /* Hide dark logo initially */
}
.navigation .logo-white {
    display: block; /* Show white logo initially */
}

/* When sticky, swap logos */
.navigation.sticky-header .logo-default {
    display: block;
}
.navigation.sticky-header .logo-white {
    display: none;
}

/* Dropdown menu background adjustments */
.navigation .dropdown-menu {
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.navigation .dropdown-item {
    color: #333;
}
.navigation .dropdown-item:hover {
    color: #28ABE3;
    background: transparent;
}

/* Mobile View Adjustments */
@media (max-width: 991px) {
    .navigation {
        background-color: #fff !important; /* White background on mobile */
        padding: 10px 0;
        position: relative; /* Avoid overlapping content on mobile */
    }
    .navigation .navbar-light .navbar-nav .nav-item .nav-link {
        color: #333 !important; /* Dark text on mobile */
    }
    .navigation .logo-default {
        display: block !important;
    }
    .navigation .logo-white {
        display: none !important;
    }
    /* Hide top bar on mobile as per existing classes, but ensure header handles it */
}