.article-header {
  display: flex; /* Make the header container a flexbox */
  justify-content: space-between; /* Align items horizontally at opposite ends */
	background-color: white; /* Set background color to white */
}

.breadcrumb {
  display: flex;
  list-style: none;
	background-color:white 
}

.breadcrumb a,
.breadcrumb span {
  color: teal; /* Adjust color as needed */
  text-decoration: none;
  padding: 0 5px;  /* Adjust padding horizontally if needed */
}
 

.breadcrumb a:hover,  /* Target links only on hover */
.breadcrumb span:hover { /* Add hover effect for current page element (optional) */
  color: teal; /* Change to your desired hover color */
  background-color:yellow; 
  font-weight: bold; /* Make text bold on hover */
} 

.breadcrumb::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ddd; /* Adjust line color as needed */
  position: absolute;
  bottom: -1px;  /* Adjust line position relative to text */
}