#navigationBar {
    background: var(--main-bg-color);
}

.home-page #navigationBar {
    position: absolute !important;
    background: transparent;
}

.btn-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #009ADB !important;
    --bs-btn-border-color: #009ADB !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #0083BA !important;
    --bs-btn-hover-border-color: #007AAE !important;
    --bs-btn-focus-shadow-rgb: 0, 154, 219 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #007AAE !important;
    --bs-btn-active-border-color: #0072A2 !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: #009ADB !important;
    --bs-btn-disabled-border-color: #009ADB !important;
}
  
.nav-link {
    --bs-nav-link-display: block !important;
    --bs-nav-link-padding-y: 0.5rem !important;
    --bs-nav-link-padding-x: 1rem !important;
    --bs-nav-link-font-size: 1rem !important;
    --bs-nav-link-font-weight: 400 !important;
    --bs-nav-link-color: #009ADB !important;
    --bs-nav-link-text-decoration: none !important;
    --bs-nav-link-background: transparent !important;
    --bs-nav-link-border: 0 !important;
    --bs-nav-link-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !important;
    --bs-nav-link-hover-color: #0083BA !important;
    --bs-nav-link-active-color: #007AAE !important;
    --bs-nav-link-disabled-color: #009ADB !important;
}

.nav-link {
    padding: 2px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
}
  
.nav-link:hover {
    color: var(--bs-nav-link-hover-color);
}
  
.nav-link:active, .nav-link.active {
    color: var(--bs-nav-link-color);
}
  
.nav-link:disabled, .nav-link.disabled {
    color: var(--bs-nav-link-color);
}

.navbar-toggler {
    box-shadow: none !important;
    border-color: transparent !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 154, 219, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Keep the active/expanded state the same color */
.navbar-toggler:active .navbar-toggler-icon,
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 154, 219, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

@media (max-width: 767.98px) {
    #navigationBar {
        text-align: right;
        background: var(--main-bg-color) !important;
    }
    
    .navbar-nav {
        display: inline-flex !important;
        flex-direction: column;
        align-items: flex-end !important;  /* Changed from flex-start to flex-end */
        width: 100%;  /* Ensure full width container */
    }
    
    .dropdown-menu {
        position: absolute !important;
        width: auto !important;
        min-width: 200px !important;
        right: 0 !important;  /* Align dropdown to the right */
        left: auto !important;  /* Override default left alignment */
    }
    
    .nav-item.dropdown {
        width: auto !important;
    }

    .nav-link {
        padding: 2px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}