.containerdir {
    margin-top: -130px; /* Espacio encima del breadcrumb */
    margin-bottom: 0px;
}

.breadcrumb-wrapperx {
margin-top: 87px; /* Espacio encima del breadcrumb */
  margin-bottom: 80px; /* Espacio debajo del breadcrumb */
  }
  
  .breadcrumb-wrapperx::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    content: "";
    /*color degradado encima imagen*/
    /*background-image: linear-gradient(270.07deg, #ffffff 0.07%, #00060C 99.95%);
    opacity: 0.75;*/
  }
  
  .breadcrumb-wrapperx .page-heading {
    position: relative;
    padding: 100px 0;   /*era 180 */
    text-align: center;
    z-index: 9;
  }
  
  @media (max-width: 1199px) {
    .breadcrumb-wrapperx .page-heading {
      padding: 140px 0;
    }
  }
  @media (max-width: 991px) {
    .breadcrumb-wrapperx .page-heading {
      padding: 120px 0;
    }
  }
  @media (max-width: 767px) {
    .breadcrumb-wrapperx .page-heading {
      padding: 100px 0;
    }
  }
  @media (max-width: 575px) {
    .breadcrumb-wrapperx .page-heading {
      padding: 80px 0;
    }
  }
  .breadcrumb-wrapperx .page-heading h1 {
    color: var(--white);
    font-size: 65px;
    position: relative;
    z-index: 9;
  }
  @media (max-width: 991px) {
    .breadcrumb-wrapperx .page-heading h1 {
      font-size: 52px;
    }
  }
  @media (max-width: 575px) {
    .breadcrumb-wrapperx .page-heading h1 {
      font-size: 42px;
    }
  }
  .breadcrumb-wrapperx .page-heading .breadcrumb-items {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 10px;
    justify-content: center;
  }
  @media (max-width: 575px) {
    .breadcrumb-wrapperx .page-heading .breadcrumb-items {
      margin-top: 15px;
    }
  }
  .breadcrumb-wrapperx .page-heading .breadcrumb-items li {
    color: var(--white);
    text-transform: capitalize;
    font-weight: 600;
  }
  .breadcrumb-wrapperx .page-heading .breadcrumb-items li a {
    color: var(--white);
    transition: all 0.4s ease-in-out;
  }
  .breadcrumb-wrapperx .page-heading .breadcrumb-items li a:hover {
    color: var(--theme);
  }
  .breadcrumb-wrapperx .page-heading .breadcrumb-items li i {
    color: var(--white);
  }
  .breadcrumb-wrapperx .border-shape {
    position: absolute;
    top: 20px;
    left: 0;
  }
  .breadcrumb-wrapperx .line-shape {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
  }
  .breadcrumb-wrapperx .line-shape img {
    width: 100%;
    height: 100%;
  }