/* EXPERIENCE SECTION */
.experience-section-container {
  padding: 80px 10%;
}

.timeline {
  position: relative;
  margin-top: 50px;
}

/* vertical line */
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #888;
  transform: translateX(-50%);
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}

/* LEFT SIDE */
.timeline-left {
  width: 40%;
  text-align: right;
  opacity: 0.7;
}

.company {
  font-size: 22px;
  font-weight: 600;
}

/* CENTER LINE */
.timeline-center {
  width: 10%;
  display: flex;
  justify-content: center;
  position: relative;
}

.circle {
  width: 14px;
  height: 14px;
  background: #7b5cff; /* matches your theme */
  border-radius: 50%;
  border: 3px solid #fff;
}

/* RIGHT SIDE */
.timeline-right {
  width: 40%;
}

.timeline-right .date {
  font-size: 14px;
  color: #aaa;
}

.timeline-right .role {
  color: #7b5cff;
  font-size: 20px;
  margin: 5px 0;
}

.timeline-right p {
  font-size: 14px;
  color: #ccc;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .timeline::before {
    left: 10px;
  }

  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-left,
  .timeline-right {
    width: 100%;
    text-align: left;
  }

  .timeline-center {
    position: absolute;
    left: 0;
  }

  .circle {
    margin-left: 3px;
  }
}


/* TIMELINE */
.timeline {
  position: relative;
  margin-top: 50px;
}

/* vertical line */
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #888;
  transform: translateX(-50%);
}

/* ITEM */
.timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 70px;
  position: relative;
}

/* LEFT */
.timeline-left {
  width: 40%;
  text-align: right;
}

/* RIGHT */
.timeline-right {
  width: 40%;
}

/* CENTER */
.timeline-center {
  width: 10%;
  display: flex;
  justify-content: center;
  position: relative;
}

.circle {
  width: 14px;
  height: 14px;
  background: #7b5cff;
  border-radius: 50%;
  border: 3px solid #fff;
  z-index: 2;
}

/* COMPANY BOX */
.company-box {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.company-logo {
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: 0.3s;
}

.company-box:hover .company-logo {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

/* TEXT */
.company {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.role {
  color: #7b5cff;
  font-size: 20px;
  margin: 5px 0;
}

.date {
  font-size: 14px;
  color: #aaa;
}

.timeline-right p {
  font-size: 14px;
  color: #ccc;
}

/* 🔥 REVERSE STYLE */
.timeline-item.reverse {
  flex-direction: row-reverse;
}

.timeline-item.reverse .timeline-left {
  text-align: left;
}

.timeline-item.reverse .company-box {
  justify-content: flex-start;
}


@media (max-width: 768px) {
  .timeline::before {
    left: 10px;
  }

  .timeline-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-item.reverse {
    flex-direction: column;
  }

  .timeline-left,
  .timeline-right {
    width: 100%;
    text-align: left;
  }

  .timeline-center {
    position: absolute;
    left: 0;
  }

  .company-box {
    justify-content: flex-start !important;
  }
}