.story-timeline {
  position: relative;
}

/* Desktop timeline */
@media (min-width: 769px) {
  .story-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, #FFFF00, #FFD700, #FFFF00);
    transform: translateX(-50%);
    z-index: 1;
  }
  
  .story-left {
    margin-right: 52%;
  }
  
  .story-right {
    margin-left: 52%;
  }
}

.story-card {
  transition: all 0.5s ease;
  position: relative;
  z-index: 2;
}

.story-card:hover {
  transform: scale(1.02);
}

.hero-pattern {
  background-image: 
    radial-gradient(circle at 25% 25%, #FFFF00 2px, transparent 2px),
    radial-gradient(circle at 75% 75%, #FFFF00 2px, transparent 2px);
  background-size: 50px 50px;
  opacity: 0.1;
}

.floating-icon {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.gradient-text {
  background: linear-gradient(135deg, #FFFF00, #FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


@media (max-width: 768px) {
  .story-timeline {
    padding: 0;
  }
  
  .story-card {
    margin: 0 0 2rem 0 !important;
  }
  
  .story-card .bg-white,
  .story-card [class*="bg-gradient"] {
    margin: 0;
  }
  
  /* Only apply icon positioning to section headers, not buttons */
  .story-card .flex.items-center.mb-6 {
    flex-direction: row-reverse;
  }
  
  .story-card .flex.items-center.mb-6 > div:first-child {
    margin-right: 0;
    margin-left: 1.5rem;
    flex-shrink: 0;
  }
  
  .story-card .flex.items-center.mb-6 > div:last-child {
    text-align: left;
    flex-grow: 1;
  }
}