/* First, let's add the Font Awesome CSS link */
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

  .timeline {
      position: relative;
      padding: 20px 0;
  }

  .timeline-item {
      padding-left: 50px;
      position: relative;
      margin-bottom: 30px;
      opacity: 0;
      animation: fadeInUp 0.5s ease forwards;
  }

  .timeline-marker {
      position: absolute;
      left: 0;
      top: 0;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: var(--primary-color);
      box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--primary-color);
      transition: transform 0.3s ease;
  }

  .timeline-marker:hover {
      transform: scale(1.2);
  }

  .timeline-marker:before {
      content: "";
      position: absolute;
      left: 50%;
      top: 20px;
      bottom: -30px;
      width: 2px;
      margin-left: -1px;
      background: var(--primary-color);
  }

  .timeline-content {
      padding: 15px;
      border-radius: var(--border-radius);
      background: var(--background-color);
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
  }

  .timeline-content:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }

  .timeline-title {
      font-size: 1.2em;
      margin-bottom: 10px;
      color: var(--primary-color);
      display: flex;
      align-items: center;
  }

  /* Updated timeline-title with Font Awesome icon and animation */
  .timeline-title::before {
      content: "\f0a4";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      margin-right: 10px;
      animation: bounce 1s infinite;
  }

  .timeline-date {
      font-style: italic;
      color: var(--secondary-color);
      font-size: 0.9em;
  }

  .card {
      background: linear-gradient(145deg, #ffffff, #f3f3f3);
      border-radius: var(--border-radius);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
      overflow: hidden;
      opacity: 0;
      animation: fadeIn 0.5s ease forwards;
  }

  .card-header {
      background-color: var(--primary-color);
      color: #fff;
      padding: 15px;
      font-size: 1.2em;
      font-weight: bold;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  }

  .card-body {
      padding: 20px;
  }

  .table {
      width: 100%;
      border-collapse: collapse;
  }

  .table th, .table td {
      padding: 12px;
      text-align: left;
      border-bottom: 1px solid #dee2e6;
  }

  .table thead th {
      background-color: #f8f9fa;
      font-weight: bold;
  }

  /* Updated loading spinner with Font Awesome */
  .spinner {
      font-size: 40px;
      color: var(--primary-color);
      animation: fa-spin 2s infinite linear;
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
      }
      to {
          opacity: 1;
      }
  }

  @keyframes fadeInUp {
      from {
          transform: translateY(20px);
          opacity: 0;
      }
      to {
          transform: translateY(0);
          opacity: 1;
      }
  }

  /* New animation for the timeline title icon */
  @keyframes bounce {
      0%, 100% {
          transform: translateY(0);
      }
      50% {
          transform: translateY(-5px);
      }
  }

  /* Media Queries */
  @media (max-width: 768px) {
      .timeline-item {
          padding-left: 40px;
      }

      .timeline-marker {
          width: 15px;
          height: 15px;
      }

      .timeline-content {
          padding: 10px;
      }

      .table {
          font-size: 0.9em;
      }
  }

  @media (max-width: 480px) {
      .container {
          padding: 10px;
      }

      .timeline-item {
          padding-left: 30px;
      }

      .card-header h5 {
          font-size: 1.1em;
      }

      .table th, .table td {
          padding: 8px;
      }
  }