.timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: #6c757d;
    transform: translateX(-50%);
    z-index: 0;
  }

  .timeline-entry {
    position: relative;
    width: 90%;
    margin-left: 5%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4rem;
    min-height: 200px;

    /* Animation */
    opacity: 0;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
  }

  .timeline-entry.left {
    animation-name: fadeInLeft;
  }

  .timeline-entry.right {
    animation-name: fadeInRight;
  }

  .timeline-entry.left .text-box {
    order: 1;
    margin-right: auto;
    border-left: 12px solid #675287;
  }

  .timeline-entry.left .image-box {
    order: 2;
    margin-left: 2rem;
  }

  .timeline-entry.right .text-box {
    order: 2;
    margin-left: auto;
    border-right: 12px solid #675287;
  }

  .timeline-entry.right .image-box {
    order: 1;
    margin-right: 2rem;
  }

  .text-box {
    width: 45%;
    background: white;
    padding: 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    z-index: 2;
  }

  .image-box img {
    max-width: 460px;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
  }

  .timeline-entry::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 50%;
    width: 16px;
    height: 16px;
    background: #675287;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 3;
    animation: pulse 2s infinite;
  }

  .year-heading {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 3;
  }

  .year-heading .year-label {
    background: #675287;
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 20px 0px;
    display: inline-block;
    border: 2px solid white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  }

  /* Animations */
  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(172, 41, 37, 0.4);
    }
    70% {
      box-shadow: 0 0 0 20px rgba(172, 41, 37, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(172, 41, 37, 0);
    }
  }

  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      transform: translateX(-60px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fadeInRight {
    0% {
      opacity: 0;
      transform: translateX(60px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @media (max-width: 768px) {
    .timeline-line {
      left: 20px;
    }

    .timeline-entry {
      flex-direction: column;
      align-items: flex-start;
      margin-left: -3%;
    }

    .text-box, .image-box {
      width: 100%;
      margin: 0 0 1rem 40px !important;
    }

    .timeline-entry::before {
      left: 20px;
    }
  }