.breadcrumb-section {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #dee2e6;
  margin-top: 80px;
  min-height: 255px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 15px;
  z-index: 10;
}

/* Using a pseudo element for background */
.breadcrumb-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/login-img2.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;

  animation: zoomBackground 30s ease-in-out infinite;
}

@keyframes zoomBackground {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.breadcrumb-section .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.breadcrumb-section h2 {
  font-size: 29px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
}

.custom-breadcrumb {
  background: none;
  padding: 0;
  margin: 0;
  font-size: 29px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
}

.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: #ffffff;
  padding: 0 0.5rem;
  font-weight: bold;
}

.custom-breadcrumb .breadcrumb-item a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.custom-breadcrumb .breadcrumb-item a:hover {
  color: #dcdcdc;
}

.custom-breadcrumb .breadcrumb-item.active {
  color: #ffffff;
  cursor: default;
}

.row.min-vh-75 {
  min-height: 75vh;
}

/* Make the form column a flex container and vertically center the form */
.col-md-6.d-flex.align-items-center {
  /* align-items: center is already set by the class */
}

/* Optional: make the form take full width of its column */
form#w-100 {
  width: 100%;
}