/* Pillar Animation CSS */
.pillar-image {
  position: relative;
  overflow: hidden;
}

.pillar-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: var(--font-script);
  font-size: 2rem;
  color: var(--text-color);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.pillar-card:hover .pillar-title {
  opacity: 1;
  transform: translateY(0);
}

/* Enhanced animation for alternating text */
.hero-subtitle-container {
  position: relative;
  height: 2em;
  margin-bottom: 2rem;
  overflow: hidden;
}

.hero-subtitle-static {
  display: inline-block;
  font-size: 1.5rem;
  color: var(--text-color);
}

.hero-subtitle-dynamic {
  display: inline-block;
  font-size: 1.5rem;
  color: var(--primary-color);
}