.motto img,
    .mission_img img,
    .mission_area .blocktitle,
    .mission_area .mission_content {
      opacity: 0;
      transform: scale(0.8);
      transition: all 0.8s ease-out;
    }

    /* Initial transform for blocktitle and content */
    .mission_area .blocktitle,
    .mission_area .mission_content {
      transform: translateY(50px);
    }

    /* When the viewport is scrolled into view */
    .mission.in-view .motto img,
    .mission.in-view .mission_img img {
      opacity: 1;
      transform: scale(1);
    }

    .mission.in-view .mission_area .blocktitle {
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0.2s; /* Slight delay for blocktitle */
    }

    .mission.in-view .mission_area .mission_content {
      opacity: 1;
      transform: translateY(0);overflow-y: scroll;
  height: 200px;
      transition-delay: 0.4s; /* Content appears after blocktitle */
    }