/* ... (previous general styles) ... */

/* Timeline Container (Remains mostly the same) */
.timeline-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Vertical Line (Remains the same, but now it will run through the year groups) */
.timeline-container::after {
  content: "";
  position: absolute;
  width: 4px;
  background-color: #666; /* Blue line */
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
}

/* New: Timeline Group Year */
.timeline-group-year {
  position: relative;
  padding-bottom: 50px; /* Space between year groups */
  /* AOS applies to this group as well if data-aos is on it */
}

/* Timeline Year (Adjusted positioning) */
.timeline-group-year > .timeline-year {
  /* Target the year directly inside the group */
  position: absolute;
  top: 0; /* Position at the top of its group */
  font-size: 2.2em; /* Slightly larger for a main heading */
  font-weight: bold;
  color: #2980b9;
  z-index: 2; /* Ensure it's above other elements */
  background-color: #f4f4f4; /* Match body background for a clean cut on the line */
  padding: 0 10px; /* Small padding to lift it from the line */
}

/* Position year left/right of the line based on odd/even group */
/* This assumes alternating year groups, or you can control it differently */
.timeline-group-year:nth-child(odd) > .timeline-year {
  right: 50%;
  margin-right: 20px; /* Space from the line */
  transform: translateX(50%); /* Center the text to the right of the line */
  text-align: right;
}

.timeline-content:last-child {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.timeline-year {
  text-align: center;
  background-color: #8ac5bc; /* Match body background for a clean cut on the line */
  color: #414141;
  font-size: 1.5rem;
  font-weight: 500;
  padding: 0.5rem;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  position: relative;
  font-weight: 500;
}

.timeline-group-year:nth-child(odd) .timeline-year:after {
  transform: translateY(-50%);
  border-right: none;
  border-left: 20px solid #8ac5bc;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  right: -15px;
  top: 53%;
  background-color: transparent;
}

.timeline-group-year:nth-child(even) > .timeline-year:before {
  left: 50%;
  margin-left: 20px; /* Space from the line */
  transform: translateX(-50%); /* Center the text to the left of the line */
  text-align: left;
}

.timeline-group-year:nth-child(even)  .timeline-year:after {
  transform: translateY(-50%) scale(-1);
  border-right: none;
  border-left: 20px solid #8ac5bc;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  left: -15px;
  top: 53%;
  background-color: transparent;
}

/* Circles for Years (New) */
.timeline-group-year::before {
  content: "";
  position: absolute;
  width: 20px; /* Larger circle for the year */
  height: 20px;
  border-radius: 50%;
  background-color: #3498db;
  border: 4px solid #ecf0f1;
  z-index: 3; /* On top of year text */
  top: 40px; /* Adjust to align with the year */
  left: 50%; /* Center the circle */
  margin-left: -10px; /* Half of width + border */
}

/* Timeline Item (Mainly the same, but now relative to the group) */
.timeline-item {
  padding: 20px 0;
  position: relative;
  width: 50%;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  margin-top: 50px; /* Space below the year and above the first item */
}

/* AOS specific styles (Remains the same) */
.timeline-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Positioning left and right items (Adjusted context) */
/* These now determine if the project content is left or right of the line */
.timeline-group-year:nth-child(odd) .timeline-item {
  /* Items in odd-numbered year groups go left */
  left: 0;
  padding-right: 40px;
}

.timeline-group-year:nth-child(even) .timeline-item {
  /* Items in even-numbered year groups go right */
  left: 50%;
  padding-left: 40px;
}

/* Circles on the line for individual items (adjusted positioning for left/right) */
.timeline-item::before {
  content: "";
  position: absolute;
  width: 14px; /* Smaller circle for individual projects */
  height: 14px;
  border-radius: 50%;
  background-color: #3498db;
  border: 3px solid #ecf0f1;
  z-index: 1;
  top: 36px; /* Adjust to center vertically */
  display: none;
}

/* Position individual item circles based on their parent group's left/right alignment */
.timeline-group-year:nth-child(odd) .timeline-item::before {
  right: -7px; /* Position for items on the left side of the line */
  left: auto; /* Ensure no conflict */
}

.timeline-group-year:nth-child(even) .timeline-item::before {
  left: -7px; /* Position for items on the right side of the line */
  right: auto; /* Ensure no conflict */
}

/* Timeline Content Card (Remains mostly the same) */
.timeline-content {
  background-color: #e5e5ea;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Arrow for the content card (adjusted context) */

/* Responsive Design (Needs careful re-evaluation for the new structure) */
@media screen and (max-width: 768px) {
  .timeline-container::after {
    left: 20px;
    margin-left: 0;
  }

  .timeline-group-year:nth-child(odd) .timeline-item {
    padding-right: 20px;
  }

  .timeline-group-year > .timeline-year {
    left: 20px; /* Align year with the left line */
    right: auto;
    margin-left: 20px; /* Space from the line */
    transform: none; /* Remove previous horizontal transforms */
    font-size: 1.8em; /* Adjust size */
    text-align: center;
    top: 0; /* Reset top */
  }

  .timeline-year:after {
    display: none;
  }

  .timeline-group-year::before {
    /* Circle for the year on mobile */
    left: 12px;
    margin-left: 0;
    top: 35px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 40px; /* Space for line and year */
    padding-right: 20px;
    left: 0 !important; /* Force all items to the left */
    margin-top: 30px; /* Reduce margin on mobile */
  }

  .timeline-item::before {
    left: 12px; /* Adjust circle position for all items */
    right: auto;
  }

  /* All arrows point from left on mobile */
  .timeline-group-year:nth-child(odd) .timeline-content::after,
  .timeline-group-year:nth-child(even) .timeline-content::after {
    left: 10px;
    right: auto;
    border-right: 10px solid #fff;
    border-left: none;
  }
}