/** Shopify CDN: Minification failed

Line 17:15 Expected identifier but found whitespace
Line 17:17 Unexpected "{"
Line 17:27 Expected ":"
Line 18:17 Expected identifier but found whitespace
Line 18:19 Unexpected "{"
Line 18:29 Expected ":"
Line 19:15 Expected identifier but found whitespace
Line 19:17 Unexpected "{"
Line 19:27 Expected ":"
Line 20:13 Expected identifier but found whitespace
... and 2 more hidden warnings

**/
:root {
  --main-color: {{ settings.color_primary | default: '#308379' }};
  --accent-color: {{ settings.color_secondary | default: '#C3A458' }};
  --text-color: {{ settings.color_body_text | default: '#ffffff' }};
  --bg-color: {{ settings.color_background | default: '#002122' }};
}

.supplement-timeline {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: inherit;
}
.section-none-top { padding-top: 0 !important; }
.section-small-top { padding-top: 40px; }
.section-medium-top { padding-top: 80px; }
.section-large-top { padding-top: 120px; }
.section-none-bottom { padding-bottom: 0 !important; }
.section-small-bottom { padding-bottom: 40px; }
.section-medium-bottom { padding-bottom: 80px; }
.section-large-bottom { padding-bottom: 120px; }

.timeline-wrapper {
  max-width: 700px;
  margin: auto;
  position: relative;
  border-left: 4px solid var(--main-color);
  padding-left: 20px;
}
.timeline-progress {
  position: absolute;
  top: 0;
  left: -2px;
  width: 4px;
  background-color: var(--accent-color);
  height: 0;
  transition: height 0.3s ease-out;
  z-index: 0;
}
.timeline-title {
  text-align: center;
  font-size: 2em;
  margin-bottom: 60px;
  color: var(--accent-color);
}
.timeline-item {
  opacity: 0;
  transform: translateY(100px) scale(0.95);
  transition: all 0.8s ease-out;
  position: relative;
  padding-left: 40px;
  margin-bottom: 80px;
}
.timeline-marker {
  width: 16px;
  height: 16px;
  background-color: var(--main-color);
  border-radius: 50%;
  position: absolute;
  left: -9px;
  top: 0;
}
.timeline-content h3 {
  margin: 0 0 10px;
  font-size: 1.3em;
  color: var(--accent-color);
}
.timeline-content p {
  margin: 0;
  color: var(--text-color);
}
.timeline-item.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.timeline-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}