<style>
/*
	.timeline {
	  position: relative;
	  margin: 20px 0;
	  padding-left: 20px;
	  border-left: 2px solid #007bff;
	}
*/
.timeline-section {
  position: relative; /* make the section the reference point */
}

	.timeline {
  position: relative; /* <-- this is the key line */
  margin: 20px 0;
  padding-left: 20px;
  border-left: 2px solid #007bff;
}

  .timeline::before {
    content: "";
    position: absolute;
    top: 5px; /* match the dot's top position */
    left: 50%;
    width: 2px;
    height: calc(100% - 10px); /* subtract same offset for bottom spacing */
    background: #007bff;
    transform: translateX(-50%);
  }

.timeline-item {
	  position: relative;
	  margin-bottom: 20px;
	}

.timeline-dot {
  position: relative;
  left: 50%;
  top: 5px;
  width: 14px;   /* slightly larger looks cleaner */
  height: 14px;
  background-color: #007bff;
  border-radius: 50%;
  transform: translate(-50%, 0);  /* center perfectly on the line */
  z-index: 1;
}
/*	.timeline-dot {
	  position: absolute;
	  left: -7px;
	  top: 5px;
	  width: 12px;
	  height: 12px;
	  background-color: #007bff;
	  border-radius: 50%;
	}
*/
	.timeline-content {
	  background: #f8f9fa;
	  border: 1px solid #ddd;
	  border-radius: 6px;
	  padding: 10px 15px;
	}

	.timeline-content h6 {
	  font-weight: 600;
	  margin-bottom: 5px;
	}


	@media (min-width: 768px) {
	  .timeline {
		border-left: none;
	  }

	  .timeline-item {
		display: flex;
		align-items: flex-start;
		position: relative;
	  }

	  .timeline-item:nth-child(even) .timeline-content {
		margin-left: auto;
	  }

	  .timeline::before {
		content: "";
		position: absolute;
		top: 0;
		left: 50%;
		width: 2px;
		height: 100%;
		background: #007bff;
		transform: translateX(-50%);
	  }

	  .timeline-dot {
		left: 50%;
		transform: translateX(-50%);
	  }

	  .timeline-content {
		width: 45%;
	  }
	}

  .customer-card {
  border: 1px solid #ddd;
  border-radius: 8px; /* ← adds rounded corners */
  transition: transform 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  background-color: #fafafa;
/*
    background-color: #f8f9fa;
*/
}

  .customer-logo {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border: 2px solid transparent;
    transition: border 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  .customer-logo:hover {
    border: 2px solid #0d6efd;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(13, 110, 253, 0.4);
  }

  .customer-col {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-center {
    justify-content: center;
  }

  /* Responsive layout */
  @media (max-width: 1200px) {
    .customer-col {
      flex: 0 0 25%;
      max-width: 25%;
    }
  }

  @media (max-width: 992px) {
    .customer-col {
      flex: 0 0 33.33%;
      max-width: 33.33%;
    }
  }

  @media (max-width: 768px) {
    .customer-col {
      flex: 0 0 50%;
      max-width: 50%;
    }
  }

  @media (max-width: 480px) {
    .customer-col {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

</style>
