body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: #f9f9f9;
    height: 100vh;
    margin: 0;
    font-family: "Inter", sans-serif;
    overflow-y: scroll; /* Allow scrolling */
  }
  
  .timeline-container {
    display: flex;
    align-items: flex-start;
    position: relative;
    height: 200vh; /* Set height for scrolling */
  }
  
  /* Centered Vertical Progress Bar Styles */
  .progress-bar {
    width: 15px; /* Width of the progress bar */
    background-color: #e0e0e0;
    border-radius: 5px;
    height: 90%; /* Full height of the container */
    position: fixed; /* Fixed position to stay visible during scroll */
    top: 2rem; /* Adjusted to position from the top */
    left: 50%; /* Center horizontally */
    bottom: 2rem;
    transform: translateX(-50%); /* Center adjustment */
    z-index: 999; /* Ensure it's on top */
  }
  
  .progress {
    height: 0%; /* Start at 0%, will be updated dynamically */
    background-color: #ffae00;
    border-radius: 5px;
    transition: height 1s; /* Smooth transition for height */
  }
  
  /* Container around content */
  .container {
    padding: 10px 20px;
    position: relative;
    background-color: inherit;
    width: 500px; /* Fixed width for content */
    height: 60vh; /* Adjusted height for visibility */
    margin: 20px 0; /* Space between timeline events */
    margin-left: 600px;

  }
  
  /* The circles on the timeline 
  .container::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    left: -20px; /* Position on the left 
    background-color: white;
    border: 4px solid #FF9F55;
    top: calc(var(--progress) * 100% - 12.5px); /* Link circle to progress 
    border-radius: 50%;
    z-index: 1;
  }*/
  
  /* The actual content */
  .content {
    padding: 20px 30px;
    background-color: rgba(255, 255, 255, 0.164); /* Slightly transparent white */
    backdrop-filter: blur(10px); /* Adjust blur strength as needed */
    position: relative;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: Add some shadow for depth */
  }
  
  
  /* Media queries - Responsive timeline on screens less than 600px wide */
  @media screen and (max-width: 500px) {
    /* Make containers full width */
    .container {
      width: 100%;
    }
  }
  
    .title {
        /*text-align: center;*/
        font-family: "Inter", cursive;
        font-size: 2em;
        color: #ffae00;
        margin-top: 30px;
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        padding-left: 20px;
    }

  .image-container {
        position: fixed; /* Keep it in a fixed position while scrolling */
        top: 0; /* Adjust as needed */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Centering fix */
        width: 100%; /* Full width */
        height: 100vh; /* Full height */
        overflow: hidden; /* Hide overflow */
        z-index: -1; /* Send it behind other elements */
    }

    .image-container img {
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        object-fit: cover; /* Maintain aspect ratio */
        opacity: 0; /* Start hidden */
        transition: opacity 1s ease; /* Smooth opacity transition over 1 second */
    }