/* Base styles for all timelines, ensuring no background */
.sofax-timeline {
    margin-top: 40px;
    --timeline-number-size: 60px;
    --timeline-icon-size: 50px;
    --timeline-line-width: 2px; /* For connecting lines */
    background: none !important; /* Explicitly remove any background */
  }
  
  /* Base list styles */
  .sofax-timeline-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  /* Base item styles */
  .sofax-timeline-item {
    position: relative;
    box-sizing: border-box; /* Prevent padding/margin accumulation */
    background: none !important; /* Ensure no background on items */
  }
  
  /* Icon styles */
  .sofax-timeline-icon {
    width: var(--timeline-icon-size);
    height: var(--timeline-icon-size);
    margin: 0;
    display: none; /* Hidden unless explicitly enabled */
  }
  
  .sofax-timeline-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  
  /* Number styles */
  .sofax-timeline-number {
    width: var(--timeline-number-size);
    height: var(--timeline-number-size);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px; /* Updated from 24px */
    font-weight: bold;
    margin: 0 0 20px 0;
    aspect-ratio: 1/1; /* Ensure perfect circle */
  }
  
  /* Content styles */
  .sofax-timeline-content {
    text-align: left; /* Default for vertical timelines */
  }
  
  .sofax-timeline-content h4 {
    margin-bottom: 10px;
  }
  
  .sofax-timeline-content p {
    color: var(--body-color, #3C3C3C);
  }
  
  .dark-bg .sofax-timeline-content h4 {
    color: var(--white-color, #fff);
  }
  
  .dark-bg .sofax-timeline-content p {
    color: var(--light-color, #EAEDF0);
  }
  
  /* Color classes for timeline lines and numbers only */
  .sofax-timeline.bg-primary {
    --timeline-line-color: #87ead3; /* Updated line color */
    background: none !important; /* Prevent any background */
  }
  .sofax-timeline.bg-primary .sofax-timeline-number {
    background: #87ead3; /* Updated number background */
    color: var(--heading-color, #0E0E0E); /* Updated number text color */
  }
  
  .sofax-timeline.bg-secondary {
    --timeline-line-color: #0c9347; /* Updated line color */
    background: none !important; /* Prevent any background */
  }
  .sofax-timeline.bg-secondary .sofax-timeline-number {
    background: #0c9347; /* Updated number background */
    color: var(--white-color, #fff); /* Updated number text color */
  }
  
  .sofax-timeline.bg-info {
    --timeline-line-color: #0C9347; /* Updated line color */
    background: none !important; /* Prevent any background */
  }
  .sofax-timeline.bg-info .sofax-timeline-number {
    background: #0C9347; /* Updated number background */
    color: var(--white-color, #fff); /* Updated number text color */
  }
  
  .sofax-timeline.bg-dark {
    --timeline-line-color: var(--dark-bg, #0E0E0E); /* Unchanged */
    background: none !important; /* Prevent any background */
  }
  .sofax-timeline.bg-dark .sofax-timeline-number {
    background: var(--dark-bg, #0E0E0E); /* Unchanged */
    color: var(--white-color, #fff); /* Unchanged */
  }
  
  /* Default color for timelines without bg-* classes */
  .sofax-timeline:not(.bg-primary):not(.bg-secondary):not(.bg-info):not(.bg-dark) {
    --timeline-line-color: var(--accent-color, #87ead3); /* Unchanged */
    background: none !important; /* Prevent any background */
  }
  .sofax-timeline:not(.bg-primary):not(.bg-secondary):not(.bg-info):not(.bg-dark) .sofax-timeline-number {
    background: var(--accent-color, #87ead3); /* Unchanged */
    color: var(--white-color, #fff); /* Unchanged */
  }
  
  /* Vertical timeline styles */
  .sofax-timeline--vertical .sofax-timeline-list {
    position: relative;
  }
  
  .sofax-timeline--vertical .sofax-timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
  }
  
  .sofax-timeline--vertical .sofax-timeline-number {
    margin-right: 20px;
    flex-shrink: 0;
  }
  
  .sofax-timeline--vertical .sofax-timeline-item::before {
    content: '';
    position: absolute;
    left: calc(var(--timeline-number-size) / 2);
    top: var(--timeline-number-size);
    bottom: -30px;
    width: var(--timeline-line-width);
    background: var(--timeline-line-color);
    z-index: -1;
  }
  
  .sofax-timeline--vertical .sofax-timeline-item:last-child::before {
    display: none;
  }
  
  @media (max-width: 767px) {
    .sofax-timeline--vertical .sofax-timeline-item {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }
    .sofax-timeline--vertical .sofax-timeline-number {
      margin-right: 0;
      margin-bottom: 15px;
    }
    .sofax-timeline--vertical .sofax-timeline-item::before {
      display: none; /* Hide connecting lines on small screens */
    }
  }
  
  /* Vertical timeline with icons */
  .sofax-timeline--vertical-icons .sofax-timeline-list {
    position: relative;
  }
  
  .sofax-timeline--vertical-icons .sofax-timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 30px;
    margin-left: 20px; /* Ensure consistent left alignment */
  }
  
  .sofax-timeline--vertical-icons .sofax-timeline-icon {
    display: block; /* Enable icons */
    margin-right: 20px;
    flex-shrink: 0;
    margin-left: 0; /* Align to left edge */
  }
  
  .sofax-timeline--vertical-icons .sofax-timeline-content {
    text-align: left; /* Strict left alignment */
    margin-left: 0; /* Prevent centering */
  }
  
  .sofax-timeline--vertical-icons .sofax-timeline-item::before {
    content: '';
    position: absolute;
    left: calc(var(--timeline-icon-size) / 2);
    top: var(--timeline-icon-size);
    bottom: -30px;
    width: var(--timeline-line-width);
    background: var(--timeline-line-color);
    z-index: -1;
  }
  
  .sofax-timeline--vertical-icons .sofax-timeline-item:last-child::before {
    display: none;
  }
  
  @media (max-width: 767px) {
    .sofax-timeline--vertical-icons .sofax-timeline-item {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      margin-left: 0; /* Reset margin for mobile */
    }
    .sofax-timeline--vertical-icons .sofax-timeline-icon {
      margin-right: 0;
      margin-bottom: 15px;
      margin-left: 0; /* Align to left edge */
    }
    .sofax-timeline--vertical-icons .sofax-timeline-content {
      margin-left: 0; /* Ensure no centering */
    }
    .sofax-timeline--vertical-icons .sofax-timeline-item::before {
      display: none; /* Hide connecting lines on small screens */
    }
  }
  
  /* Horizontal timeline styles (with icons and numbers) */
  .sofax-timeline--horizontal .sofax-timeline-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 20px;
    margin: 0 auto;
  }
  
  .sofax-timeline--horizontal .sofax-timeline-item {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    position: relative;
  }
  
  .sofax-timeline--horizontal .sofax-timeline-icon {
    display: block;
    margin-bottom: 5px; /* Spacing between icon and number */
  }
  
  .sofax-timeline--horizontal .sofax-timeline-number {
    margin: 0 0 20px 0;
  }
  
  .sofax-timeline--horizontal .sofax-timeline-content {
    text-align: center;
  }
  
  .sofax-timeline--horizontal .sofax-timeline-content h4 {
    min-height: 64px; /* Ensure space for two lines, prevent text jumping */
  }
  
  .sofax-timeline--horizontal .sofax-timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--timeline-icon-size) + var(--timeline-number-size) / 2 + 5px); /* Adjusted for icon margin */
    left: calc(100% - 15px);
    width: 30px;
    height: var(--timeline-line-width);
    background: var(--timeline-line-color);
    z-index: -1;
  }
  
  @media (max-width: 767px) {
    .sofax-timeline--horizontal .sofax-timeline-list {
      flex-direction: column;
      align-items: center;
      max-width: 300px;
      margin: 0 auto;
    }
    .sofax-timeline--horizontal .sofax-timeline-item {
      flex: 1 1 auto;
      margin-bottom: 30px;
      max-width: 300px;
    }
    .sofax-timeline--horizontal .sofax-timeline-item:not(:last-child)::after {
      display: none; /* Hide connecting lines on small screens */
    }
  }
  
  /* Horizontal timeline styles (icons only) */
  .sofax-timeline--horizontal-icons .sofax-timeline-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 20px;
    margin: 0 auto;
  }
  
  .sofax-timeline--horizontal-icons .sofax-timeline-item {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    position: relative;
  }
  
  .sofax-timeline--horizontal-icons .sofax-timeline-icon {
    display: block;
  }
  
  .sofax-timeline--horizontal-icons .sofax-timeline-content {
    text-align: center;
  }
  
  .sofax-timeline--horizontal-icons .sofax-timeline-content h4 {
    min-height: 64px; /* Ensure space for two lines, prevent text jumping */
  }
  
  .sofax-timeline--horizontal-icons .sofax-timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--timeline-icon-size) / 2);
    left: calc(100% - 15px);
    width: 30px;
    height: var(--timeline-line-width);
    background: var(--timeline-line-color);
    z-index: -1;
  }
  
  @media (max-width: 767px) {
    .sofax-timeline--horizontal-icons .sofax-timeline-list {
      flex-direction: column;
      align-items: center;
      max-width: 300px;
      margin: 0 auto;
    }
    .sofax-timeline--horizontal-icons .sofax-timeline-item {
      flex: 1 1 auto;
      margin-bottom: 30px;
      max-width: 300px;
    }
    .sofax-timeline--horizontal-icons .sofax-timeline-item:not(:last-child)::after {
      display: none; /* Hide connecting lines on small screens */
    }
  }
  
  /* Horizontal timeline styles (numbers only) */
  .sofax-timeline--horizontal-numbers .sofax-timeline-list {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 20px;
    margin: 0 auto;
  }
  
  .sofax-timeline--horizontal-numbers .sofax-timeline-item {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    position: relative;
  }
  
  .sofax-timeline--horizontal-numbers .sofax-timeline-number {
    margin: 0 0 20px 0;
  }
  
  .sofax-timeline--horizontal-numbers .sofax-timeline-content {
    text-align: center;
  }
  
  .sofax-timeline--horizontal-numbers .sofax-timeline-content h4 {
    min-height: 64px; /* Ensure space for two lines, prevent text jumping */
  }
  
  .sofax-timeline--horizontal-numbers .sofax-timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--timeline-number-size) / 2);
    left: calc(100% - 15px);
    width: 30px;
    height: var(--timeline-line-width);
    background: var(--timeline-line-color);
    z-index: -1;
  }
  
  @media (max-width: 767px) {
    .sofax-timeline--horizontal-numbers .sofax-timeline-list {
      flex-direction: column;
      align-items: center;
      max-width: 300px;
      margin: 0 auto;
    }
    .sofax-timeline--horizontal-numbers .sofax-timeline-item {
      flex: 1 1 auto;
      margin-bottom: 30px;
      max-width: 300px;
    }
    .sofax-timeline--horizontal-numbers .sofax-timeline-item:not(:last-child)::after {
      display: none; /* Hide connecting lines on small screens */
    }
  }