/* Override navbar background for both navbar-default and navbar-inverse */
.navbar-default, .navbar-inverse {
    background-color: white !important;  /* Set navbar background (dark grey) */
    border-color: #333 !important;      /* Set border color */
}

/* Navbar links */
.navbar-default .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a {
    color: black !important; /* Keep default text color (unchanged) */
    /* If you want to change text color, use:
       color: #fff !important;  (example for white text) */
    font-family: "Josefin Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    }

/* Navbar links on hover */
.navbar-default .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:hover {
    color: white !important; /* Keep default hover text color (unchanged) */
    /* If you want to change hover text color, use:
       color: #007bff !important;  (example for blue hover text) */
    background-color: #23678c !important; /* Remove default hover background */
}

/* Active navbar item (selected) */
.navbar-default .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a {
    color: inherit !important; /* Keep default active link text color (unchanged) */
    /* If you want to change active text color, use:
       color: #fff !important; */
    background-color: #555 !important; /* Active background (dark grey) */
}

/* Dropdown menu background and text */
.navbar-default .navbar-nav .dropdown-menu, .navbar-inverse .navbar-nav .dropdown-menu {
    background-color: #333 !important; /* Set background of dropdown menu */
    border-color: #333 !important;     /* Set border color of dropdown */
}

/* Dropdown menu links */
.navbar-default .navbar-nav .dropdown-menu > li > a, .navbar-inverse .navbar-nav .dropdown-menu > li > a {
    color: inherit !important; /* Keep default dropdown text color (unchanged) */
    /* If you want to change dropdown text color, use:
       color: #fff !important; */
}

/* Dropdown menu links on hover */
.navbar-default .navbar-nav .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .dropdown-menu > li > a:hover {
    color: inherit !important; /* Keep default hover text color (unchanged) */
    /* If you want to change hover color, use:
       color: #007bff !important; */
    background-color: #444 !important; /* Darker background on hover */
}

/* Active state for dropdown items */
.navbar-default .navbar-nav .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .dropdown-menu > .active > a {
    color: inherit !important; /* Keep default active dropdown text color (unchanged) */
    /* If you want to change active dropdown text color, use:
       color: #fff !important; */
    background-color: #555 !important; /* Active background for dropdown */
}

/* Navbar brand */
.navbar-default .navbar-brand, .navbar-inverse .navbar-brand {
    color: black !important; /* Keep default text color (unchanged) */
    /* If you want to change text color, use:
       color: #fff !important;  (example for white text) */
    font-family: "Josefin Sans", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Navbar brand on hover */
.navbar-default .navbar-brand:hover, .navbar-inverse .navbar-brand:hover {
    color: white !important; /* Keep default hover text color (unchanged) */
    /* If you want to change hover text color, use:
       color: #007bff !important; */
    background-color: #23678c !important; /* Remove default hover background */

}