/* The actual timeline (the vertical ruler) */
    .timeline {
      position: relative;
      max-width: 100%;
      margin: 0 auto;
	  transform: scale(0.8); /* Redueix a un 90% de la mida original */
	  transform-origin: top left; /* Defineix l'origen de la transformació */
    }

    /* The vertical timeline line */
    .timeline::after {
      content: '';
      position: absolute;
      width: 6px;
	  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #767676, rgba(255, 255, 255, 0));
      top: -7%;
      bottom: -5%;
      left: 50%;
      margin-left: -3px;
      z-index: 0; /* Place the vertical line behind the circles */
    }

    /* container2 around content */
    .container2 {
      padding: 10px 40px;
      position: relative;
      background-color: inherit;
      width: 40%;
      opacity: 0; /* Initially hidden */
      transform: translateY(20px); /* Initial position (slight shift down) */
      transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Animation */
    }

    .container2.show {
      opacity: 1; /* Visible */
      transform: translateY(0); /* Slide to original position */
    }

    /* The circles on the timeline */
    .container2::after {
      content: '';
      position: absolute;
      width: 25px;
      height: 25px;
      right: -17px;
      background-color: #767676; /* Ensure the circles remain white */
      border: 4px solid #767676; /* Add the black border for the circles */
      top: 42%;
      border-radius: 50%;
      z-index: 1; /* Bring the circles in front of the line */
    }

    /* Place the container2 to the left */
    .left {
      left: 4%;
    }

    /* Place the container2 to the right */
    .right {
      left: 50%;
    }

    .right::after {
      left: -17px;
    }

    /* Add arrows to the left container2 (pointing right) */
    .left::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 46%;
      width: 0;
      z-index: 1;
      right: 30px;
      border: medium solid black;
      border-width: 10px 0 10px 10px;
      border-color: transparent transparent transparent #767676;
    }

    /* Add arrows to the right container2 (pointing left) */
    .right::before {
      content: " ";
      height: 0;
      position: absolute;
      top: 46%;
      width: 0;
      z-index: 1;
      left: 30px;
      border: medium solid #767676;
      border-width: 10px 10px 10px 0;
      border-color: transparent #767676 transparent transparent;
    }

    /* The actual content */
    .content {
      padding: 10px 30px;
      background-color: white;
      position: relative;
      border-radius: 6px;
      box-shadow: 0 10px 50px rgba(0, 0, 0, 0.4); /* Grey shadow with blur */
  	  border-radius: 16px; /* Add rounded corners */
    }

    /* Add YEAR for left side container2 */
    .container2.left .text-side {
      position: absolute;
	  left: 105%;
      top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      font-size: 24px;
      color: #767676;
    }

    /* Add YEAR for right side container2 */
    .container2.right .text-side {
      position: absolute;
	  left: -15%;
	  top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      font-size: 24px;
      color: #767676;
    }

    /* Media queries - Responsive timeline on screens less than 600px wide */
    @media screen and (max-width: 600px) {
      .timeline::after {
        left: 31px;
      }

      .container2 {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
      }

      .container2::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
      }

      .left::after, .right::after {
        left: -12px;
      }

      .right {
        left: 0%;
      }

      .container2 .text-side {
        display: none; /* Hide TEXT for small screens */
      }
    }