.centered-section {
  padding: 10px 0;
  text-align: center;
}

.columns-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
}

.columnCards {
  text-align: center;
  max-width: 300px;
  opacity: 0;
  transform: translate(0, 10vw); /* Start off the bottom of the viewport */
  transition: opacity 1s ease, transform 1s ease;
  /* Apply animation to this element */
  animation: example2 2s ease-out;
}

.image-container {
  position: relative;
  width: 250px;
  height: 250px;
  margin: 0 auto;
}

.image-container img {
  width: 100%;
  height: 100%;
  display: block;
}

.overlay-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 20px;
  color: var(--background-color);
  font-weight: bold;
  padding: 5px 0;
  font-family: "NeutraText-BookAlt", Sans-serif;
}

.description {
  font-size: 16px;
  color: #333333;
  margin-top: 20px;
  line-height: 1.5;
}

/* Animation classes */
.fly-in {
  opacity: 1;
  transform: translate(0, 0); /* Reset transform to the original position */
  transition: transform 1s ease, opacity 1s ease;
}

.fly-from-left {
  animation: leftAnim 2s ease;
}

.fly-from-right {
  animation: rightAnim 2s ease;
}

.fly-from-top {
  animation: topAnim 2s ease;
}

.fly-from-bottom {
  animation: bottomAnim 2s ease;
}
@keyframes rightAnim {
  0% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes leftAnim {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes topAnim {
  0% {
    transform: translateY(200%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes bottomAnim {
  0% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0%);
  }
}