/* Parallel layering effect for hero section */
.md-hero__background .layer {
  position: absolute;
  width: 100%;
  top: 0; 
  left: 0;
  /* add transforms / translateZ as needed for depth */
}

/* Specific layer positioning for parallax effect */
.md-hero__background .layer-1 {
  transform: translateZ(-100px);
}

.md-hero__background .layer-2 {
  transform: translateZ(-80px);
}

.md-hero__background .layer-3 {
  transform: translateZ(-60px);
}

.md-hero__background .layer-4 {
  transform: translateZ(-40px);
}

.md-hero__background .layer-5 {
  transform: translateZ(-20px);
}

.md-hero__background .layer-6 {
  transform: translateZ(0px);
}

/* Hide and reclaim space from md-banner */
.md-banner {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Remove any extra margin/padding at the top of the main content if banner was present */
.md-main, .md-header {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Reduce space between logo and title in the header */
.md-logo {
  margin-right: 0.3rem !important;  /* Reduce as needed */
}

.md-header__title {
  margin-left: 0 !important;
  padding-left: 0 !important;
  display: flex;
  align-items: center;
}

/* Ensure homepage footer is above hero layers */
.homepage-footer {
  position: relative;
  z-index: 10;
  background: var(--md-default-bg-color, #fff);
}

/* Ensure hero content is above hero image layers */
.mdx-hero,
.mdx-hero__content {
  position: relative;
  z-index: 2;
}

/* Move hero content near the bottom of the hero section */
.mdx-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 76vh; /* Adjust as needed for screen coverage */
}

.mdx-hero__content {
  margin-bottom: -8rem; /* Space from the bottom, adjust as needed */
}