/* =========================

   PAGE HEADER – bandă albastră

   ========================= */

.heading {
  --page-text: #ffffff;

  --crumb-text: rgba(255, 255, 255, 0.88);

  background: radial-gradient(
    circle at left center,

    #387cff 20%,

    var(--page-secondary) 90%
  );

  color: var(--page-text);

  padding: 90px 20px !important;

  position: relative;

  z-index: 1;

  margin-bottom: 0;
}

.heading .breadcrumbs a,
.heading .breadcrumbs span {
  font-weight: 400 !important;

  font-size: 1.3rem;
}

/* containerul tău existent */

.heading > .container {
  margin: 0 auto;

  position: relative;

  z-index: 2;
}

/* =========================

   BREADCRUMBS

   ========================= */

.heading .breadcrumbs {
  display: flex;

  align-items: center;

  gap: 0.65rem;

  margin-bottom: 1.4rem;

  color: var(--crumb-text);

  font-size: 1rem;

  font-weight: 500;
}

.heading .breadcrumbs a {
  color: #fff;

  text-decoration: none;

  font-weight: 600;
}

.heading .breadcrumbs a:hover {
  text-decoration: underline;

  text-underline-offset: 2px;
}

/* separatorul ăla mic dintre “prima pagină” și titlul paginii */

.heading .breadcrumbs .glyphicon {
  display: inline-block;

  width: 9px;

  height: 9px;

  position: relative;
}

.heading .breadcrumbs .glyphicon:before {
  content: "";

  position: absolute;

  inset: 0;

  border-top: 2px solid rgba(255, 255, 255, 0.75);

  border-right: 2px solid rgba(255, 255, 255, 0.75);

  transform: rotate(45deg);
}

/* ultima bucățică de breadcrumb (span-ul simplu) */

.heading .breadcrumbs > span:last-child {
  color: #fff;

  font-weight: 700;
}

/* =========================

   TITLU

   ========================= */

.heading .heading-title {
  margin: 0;

  font-size: clamp(2.4rem, 4vw, 4.15rem);

  font-weight: 700;

  line-height: 1.05;

  color: #fff;

  position: relative;

  display: inline-block;
}

/* linia turcoaz de sub titlu */

.heading .heading-title::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -0.95rem;

  width: 210px;

  height: 7px;

  border-radius: 999px;

  background: #ffffff3d;
}

/* =========================

   RESPONSIVE

   ========================= */

@media (max-width: 768px) {
  .heading {
    padding: 5rem 0rem !important;
  }

  .heading .breadcrumbs {
    flex-wrap: wrap;

    gap: 0.45rem;
  }

  .heading .heading-title {
    font-size: 2.2rem;
  }

  .heading .heading-title::after {
    width: 150px;
  }
}