:root {
            --primary: #f95e3f;
            --primary-dark: #e63312;
            --secondary: #4ECDC4;
            --dark: #003c1f;
            --light: #F7FFF7;
            --accent: #FFE66D;
            --gray: #6C757D;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--dark);
            background-color: var(--light);
        }


    /* Bread crumbs*/
.my-breadcrumb {
  display: inline-block;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  box-shadow: 0 6px 20px rgba(14, 30, 37, 0.06);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

/* Remove default list styles and align items */
.my-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0; /* separators inserted via CSS */
}

/* Item base */
.my-breadcrumb__item {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* chevron separator between items (except first) */
.my-breadcrumb__item + .my-breadcrumb__item::before {
  content: "›";              /* single-character chevron */
  display: inline-block;
  margin: 0 12px;
  color: #9aa6b2;
  font-size: 16px;
  transform: translateY(1px);
  opacity: 0.9;
}

/* Link styling (non-active items) */
.my-breadcrumb__link {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  text-decoration: none;
  color:var(--primary);
  font-weight: 500;
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

/* Hover/focus for links */
.my-breadcrumb__link:hover,
.my-breadcrumb__link:focus {
  background: rgba(11, 99, 255, 0.08);
  box-shadow: 0 6px 18px rgba(11, 99, 255, 0.08);
  outline: none;
  transform: translateY(-1px);
}

/* Active (current) item styling */
.my-breadcrumb__item--active {
  color: #102030;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 10px;
  background: transparent;
  max-width: 34ch;           /* keep long names from overflowing layout */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Small-screen adjustments */
@media (max-width: 520px) {
  .my-breadcrumb {
    padding: 8px;
    font-size: 13px;
  }
  .my-breadcrumb__item + .my-breadcrumb__item::before {
    margin: 0 8px;
    font-size: 14px;
  }
  .my-breadcrumb__link, .my-breadcrumb__item--active {
    padding: 5px 8px;
    border-radius: 8px;
  }
}

/* Keyboard focus visible */
.my-breadcrumb__link:focus {
  box-shadow: 0 0 0 3px rgba(11,99,255,0.12);
}

/* Optional: subtle trailing glow to emphasize breadcrumb */
.my-breadcrumb::after {
  content: "";
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(11,99,255,0.06), rgba(11,99,255,0));
  width: 100%;
  pointer-events: none;
}