#header .logo img,
#header .logo svg {
display: inherit;
height: 42px;
}

/* Override logo for scrolled page */
body.header-fixed.header-animated #header.scrolled .logo img,
body.header-fixed.header-animated #header.scrolled .logo svg {
height: 28px;
}


#header-id .header {
    background-color: #000000;
    background-image: -webkit-linear-gradient(#563f79, #6e519b);
    background-image: linear-gradient(#563f79, #6e519b);
    margin-top: -20px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    color: #f5f2f8;
}

ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
}

ul.topnav li {float: left; line-height: 60px;}

ul.topnav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover:not(.active) {opacity: 50%;
  transition: .5s ease;
  background-color:#808080; }

ul.topnav li a.active {background-color: white;}

ul.topnav li.right {float: right;}

/* Ensure the banner maintains its dimensions */
.topnav .banner-item img {
  /*width: 350px;
  height: 50px;*/
  display: block;
}

.topnav {
  display: flex;
  align-items: center;       /* Centers all items vertically */
  justify-content: space-between; /* Spreads left, middle, and right items evenly */
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.topnav li {
  display: flex;
  align-items: center;
}


/* Maintain banner image dimensions */
.topnav .banner-item img {
 /* width: 350px;
  height: 50px;*/
  display: block;
  border-radius: 3px;
}

@media screen and (max-width: 600px) {
  ul.topnav li.right, 
  ul.topnav li {float: none;}
}

.img-menu { 
  border: 1px solid #ccc;
	opacity: 50%;
  border-radius: 50%;
}

.navbar.navbar-default, .navbar {
    background-color: #ffffff !important; /* Replace with your hex color */
    background-image: none !important;    /* Removes default Bootstrap gradients */
}