/* Keyframes for slide down animation */
@keyframes slideDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Initial state for the container */
.fifth-section-flex {
  opacity: 0;
  transform: translateY(-50px); /* Starting position */
  transition: opacity 1.5s, transform 1.5s; /* Duration of transition */
}

/* When the container is visible, apply the slide down animation */
.fifth-section-flex.visible {
  animation: slideDown 1.5s forwards; /* Apply keyframes */
}

/* Keyframes for fading in the boxes */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Initial state for the achievements */
.achievement {
  opacity: 0;
  transition: opacity 1s; /* Duration of transition */
}

/* When an achievement is visible, apply the fade in animation */
.achievement.visible {
  animation: fadeIn 1s forwards; /* Apply keyframes */
}

/* Hover state without delay */
.achievement:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease-in-out;
}