.container-text-animate { 
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 410px;
  height: 50px;
}
@media (min-width: 768px) {
  .container-text-animate {
    margin: 0 auto;
    width: 100%;
    margin-bottom: 20px;
  }
}
.fixed-text {
  font-size: 38px;
  font-weight: 500;
  margin-right: 10px;
  color: var(--heading-white);
  font-family: var(--title-font);
}

[data-theme="light"] .fixed-text {
  color: #1e293b;
}

.text-wrapper {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
}

.animated-text {
  font-size: 33px;
  font-weight: 500;
  overflow: hidden;
  width: 0;
  animation: none;
  color: var(--main-color);
  font-family: var(--title-font);
  letter-spacing: .5px;
}

.pipe {
  display: inline-block;
  background-color: var(--main-color);
  width: var(--pipe-width, 2px);
  height: var(--pipe-height, 44px);
  margin-left: 5px;
}

@keyframes slideIn {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes slideOut {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}