.timeline {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align items to the left side */
  margin-left: 18px; /* Space for the timeline */
  position: relative;
  padding-top: 20px; /* Space on top and bottom */
  padding-bottom: 0px;
}

.timeline-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  margin-right: 20px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 82px; /* Position the line to the left */
  top: 40px;
  bottom: 20px;
  border-left: 3px solid #5b87bc; /* The vertical line */
  z-index: 0; /* Lower z-index so it's behind the dot */
}

.entry {
  display: flex;
  align-items: center; /* Centers the items vertically */
  margin-bottom: 10px; /* Adjust the space between entries */
}

.timespan {
  margin-right: 10px; /* Space between the timespan and the logo */
  white-space: nowrap; /* Ensures the timespan does not wrap */
}

.ico {
  display: flex;
  align-items: center; /* Align the dot and the logo vertically */
  margin-right: 15px; /* Space between the logo and the description */
}

.entry-dot {
  width: 15px;
  height: 15px;
  background-color: #5b87bc;
  border-radius: 50%;
  margin-right: 10px; /* Space between the dot and the logo */
  border: 2px solid white;
  z-index: 1; /* Higher z-index so the dot is above the line */
}

.logo {
  /* No specific size here, adjust as needed */
}

.desc {
  flex: 1; /* Takes the remaining space */
}

img.rounded {
  border-radius: 8px; /* Adjust the px value to get the desired roundness */
}

img.rounded-shadow {
  border-radius: 15px; /* Adjust the px value to get the desired roundness */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adjust values for different shadow effects */
  transition: box-shadow 0.3s ease-in-out; /* Optional: Adds a smooth transition effect on hover */
}

img.shadow {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Adjust values for different shadow effects */
  transition: box-shadow 0.3s ease-in-out; /* Optional: Adds a smooth transition effect on hover */
}

.img-responsive {
  width: 100%; /* Default to full width */
  height: auto; /* Maintain aspect ratio */
}

@media (max-width: 1000px) { /* Adjusts for devices with screens up to 768px wide */
  .img-responsive {
      width: 45%; /* Reduce width to 50% on smaller screens */
      margin-bottom: 15px;
  }
}

.img-responsive-profile {
  width: 100%; /* Default to full width */
  height: auto; /* Maintain aspect ratio */
}

@media (max-width: 1000px) { /* Adjusts for devices with screens up to 768px wide */
  .img-responsive-profile {
      width: 35%; /* Reduce width to 50% on smaller screens */
      margin-bottom: 15px;
  }
}