body {
  background-color: var(--Navy-Blue-100);
}
main {
  margin-bottom: -1px;
}
/* ================================================== */
/* ================= HER0 HAFLTONE  ================= */
/* ================================================== */

/* This wrapper just ensures proper positioning */
.hero-halftone-wrapper {
  width: 100%;
  height: 250px;
  position: relative;
}

/* This is the main element for the effect */
.hero-halftone-section {
  position: static;
  margin-top: -0.5rem;
}

/* This parent element is our "fading window" */
.hero-halftone {
  position: absolute;
  inset: 0;
  background: transparent;
  -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%)
}
.hero-halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* Sits on the bottom layer */

  /* The dots get the solid, transitioning color */
  background-color: var(--halftone-primary-color);

  /* These variables (from your footer code) now control the dot shape */
  --stop1: 0.18rem; /* Adjust for dot size */
  --stop2: 0.15rem; /* Adjust for dot softness/blur */

  /* This mask uses the footer's gradient logic to create the dot pattern */
  -webkit-mask-image: radial-gradient(
    circle at center,
    black var(--stop1),
    transparent var(--stop2)
  );
  mask-image: radial-gradient(
    circle at center,
    black var(--stop1),
    transparent var(--stop2)
  );

  -webkit-mask-size: 0.775rem 0.775rem;
  mask-size: 0.775rem 0.775rem;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;

  /* This transition makes the dot color change smooth */
  transition: background-color 0.7s ease-in-out;
}

.hero-halftone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2; /* Sits on top of the dots */

  /* This layer also gets the solid, transitioning color */
  background-color: var(--halftone-primary-color);

  /* This mask makes the layer solid at the top and then fades to transparent */
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black 10%,
    transparent 50%
  );
  mask-image: linear-gradient(to bottom, black 0%, black 10%, transparent 100%);
  /* This transition syncs the fade's color change */
  transition: background-color 0.7s ease-in-out;
}

/* ================================================== */
/* =================  SECTION TRANSITIONS =========== */
/* ================================================== */
#blue-gradient {
  display: flex;
  height: 157px;
  background: linear-gradient(to bottom, #fbfbfc 10%, #273370 65%);
}

.projects-feather-fade {
  /* Positions the div over the bottom of the projects section */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  /* The height of the fade effect */
  height: 25px;

  /* Creates a gradient from transparent to a slightly opaque page background color */
  background: linear-gradient(
    to bottom,
    transparent,
    /* Starts transparent at the top of the div */ #fbfbfc
      /* Fades to your page background color at the bottom */
  );

  /* Ensures it doesn't accidentally cover buttons */
  z-index: 5;
}
.main-feather-fade {
  position: relative;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25px;
  background: linear-gradient(to bottom, transparent, #fbfbfc);
  z-index: 5;
}