/* General styles for the timeline */
.experience-list {
    position: relative;
    padding: 20px 0;
    max-width: 800px;
    margin: 0 auto;
    list-style: none;
    background: rgba(255, 255, 255, 0); /* White background with 90% opacity */
}

.company-name {
    font-weight: bold; /* Make the company name bold */
}

/* Timeline line */
.experience-list:before {
    margin-top: -10px;
    content: '';
    position: absolute;
    left: 50%;
    height: 100%;
    width: 2px;
    background-color: #ddd;
    top: 0;
    transform: translateX(-50%);
}

/* Style for each timeline item */
.timeline-item {
    position: absolute;
    display: flex;
    justify-content: flex-start;
    margin: 20px 0;
    position: relative;
    padding-left: 30px; /* Space for the dot */
    opacity: 0; /* Start hidden */
    transform: translateY(20px); /* Start with a slight downward offset */
    animation: fadeInUp 0.6s forwards; /* Apply animation */
    animation-delay: calc(var(--timeline-index) * 0.2s); /* Stagger animation */
}

/* Right-aligned timeline item */
.timeline-item.right {
    justify-content: flex-end;
    padding-right: 30px; /* Space for the dot */
}

/* Timeline item content */
.timeline-content {
    padding: 10px;
    background-color: #ffffff;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.5);
    max-width: 400px;
    width: calc(100% - 40px); /* Ensure it adjusts with padding or margins */
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s; /* Add transition for smooth effect */
    margin-top: -20px;
    margin-left: -20px;
}

@media (max-width: 962px) {
    .timeline-content {
        max-width: 45%; /* Make it smaller at this breakpoint */
        margin-left: 50px; /* Adjust margin for smaller screens */
    }
}

@media (min-width: 1024px) {
    .timeline-content {
        max-width: 400px; /* Restrict to a fixed max width on very large screens */
    }
}

.timeline-content:hover {
    transform: translateY(-10px) scale(1.05); /* Pop out effect */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
}

/* Left-aligned timeline item content */
.timeline-item.left .timeline-content {
    left: -80px; /* Move to the left of the dot */
}

/* Right-aligned timeline item content */
.timeline-item.right .timeline-content {
    left: 80px; /* Move to the right of the dot */
}

/* Style for the timeline dot */
.timeline-dot {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ff729f;
    border: 4px solid #fff; /* White border for the dot */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    top: 50%; /* Position the dot vertically */
    transform: translate(-50%, -50%); /* Center the dot */
    z-index: 2; /* Ensure the dot is above other elements */
}

/* Timeline item content */
.timeline-content::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -15px; /* Adjust to align with dot */
    width: 10px;
    height: 10px;
    background-color: #ffffff00;
    border-radius: 0%;
}

/* Style for the description list */
.timeline-content ul {
    padding-left: 20px;
    margin: 10px 0 0 0;
}

.timeline-content ul li {
    margin-bottom: 5px;
    color: #666;
}

/* Style for the timeline duration */
.timeline-duration {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    z-index: 1; /* Ensure the duration is above other elements */
}

.timeline-item.left .timeline-duration {
    left: calc(50% + 20px); /* Position to the right of the dot */
}

.timeline-item.right .timeline-duration {
    right: calc(50% + 20px); /* Position to the left of the dot */
}

.timeline-content ul li {
    font-size: 0.9em; /* Adjust font size as needed */
}

.name-title {
    font-size: 1em; /* Adjust font size as needed */
    color: #ff729f; /* Set the color for Rachel Pan */
    font-weight: bold; /* Make the text bold */
}

.animation-wrapper span {
    font-size: 1em; /* Adjust font size as needed */
}

.experience-title {
    color: #ff729f; /* Set the color for Rachel Pan */
    font-weight: bold; /* Make the text bold */
    margin-bottom: -10px;
    margin-top: 10px;
}

.experience-image {
    width: 40%; /* Make the image responsive */
    height: auto;
    border-radius: 8px 8px 0 0; /* Match the border-radius of the content */
    margin-top: 5px; /* Add space below the image */
    margin-bottom: -5px; /* Add space below the image */
}