.breadcrumbs-container{
  padding-top: 20px;
}
.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  padding-left: 12px;
  overflow: hidden;              /* Ensures inner breadcrumb doesn't overflow container */
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-wrap: nowrap;
}

@media screen and (max-width: 767px) {
  .breadcrumb {
    padding-left: 0;
  }

  .site-header-title h1 {
    padding-top: 16px !important;
  }
}

.breadcrumb-item {
  color: #d3daf3;
}

.breadcrumb-item a {
  color: #d3daf3;
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #fff;
  overflow: hidden;             /* Applies ellipsis to the last breadcrumb */
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
}

.breadcrumb-item + .breadcrumb-item:before {
  content: ' > ';
  color: #d3daf3;
  padding: 0 4px;
}