.need-to {
  width: 100%; /* or specify a specific width */
  height: auto; /* Set this later using JS if the image height needs to dictate it */
  overflow: hidden; /* Ensure the pseudo-element is contained within the parent */
  /* height: 90vh; */
  display: flex;
  justify-content: center;
  padding-bottom: 4rem;
  background-color: #d4ebf7;
}

/* Pseudo-element styling */
.need-to::before {
  content: "";
  position: absolute;
  background: white;
  width: 100%;
  height: 100px;
  /* top: 10rem; */
  left: 0;
  z-index: 2;
}

/* .need-to .container{
  padding-top: 9rem;
  padding-left: 3rem;
} */

.boxes-area {
  width: 100%;
  display: flex;
  justify-content: center;
}

.boxes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3rem;
}

.box-grid-item {
  width: 228px;
  height: 225px;
  text-align: center;
  align-items: center;
  background: white;
  border: 2px solid #d4ebf7;
  border-radius: 20px;
  justify-content: space-around;
  padding: 1rem 1rem;
}

.box-grid-item:hover {
  border: 3px solid #1b5c99;
}