* { box-sizing: border-box; }

    .timeline-container {
      position: relative;
      max-width: 1200px;
      margin: auto;
      padding: 40px 0;
    }

    .timeline-line {
      position: absolute;
      width: 6px;
      background-color: #caa971;
      top: 0;
      bottom: 0;
      left: 50%;
      margin-left: -3px;
    }

    .timeline-entry {
      padding: 20px 30px;
      position: relative;
      width: 50%;
    }

    .timeline-entry::after {
      content: "";
      position: absolute;
      width: 25px;
      height: 25px;
      right: -13px;
      background-color: #f4e664;
      border: 4px solid #0e0f0f;
      top: 15px;
      border-radius: 50%;
      z-index: 1;
    }

    .timeline-left {
      left: 0;
    }

    .timeline-right {
      left: 50%;
    }

    .timeline-right::after {
      left: -13px;
    }

    .timeline-content {
      background-color: white;
      position: relative;
      border-radius: 6px;
      padding: 20px;
      border-left: 4px solid #caa971;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .timeline-year {
      font-weight: bold;
      font-size: 1.2em;
      color: #caa971;
      margin-bottom: 5px;
    }

    .timeline-title {
      font-size: 1.5em;
      margin: 5px 0;
      color: #0e0f0f;
    }

    .timeline-text {
      color: #333;
    }

    .timeline-image {
      margin-top: 10px;
      max-width: 100%;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

    /* Responsive stacking */
    @media screen and (max-width: 768px) {
      .timeline-entry {
        width: 100%;
        left: 0 !important;
        padding-left: 70px;
        padding-right: 25px;
      }
      .timeline-line {
        left: 30px;
      }
      .timeline-right::after,
      .timeline-left::after {
        left: 17px;
      }
    }