.quote-strip {
  background-color: #333333;
  margin: 2%;
  color: #fcfcfc;
  padding: 15px 0;
  overflow: hidden;
  position: relative;
  width: 125%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  outline: none;
}

.quote-strip:focus .quote-container {
  animation-play-state: paused;
}


.quote-container {
  display: flex;
  animation: scroll 1000s linear infinite;
  animation-timing-function: linear;
}


.quote-item {
  display: flex;
  align-items: center;
  margin-right: 150px;
  white-space: nowrap;
}


.quote-text {
  font-size: 18px;
  color: #fcfcfc;
}


.quote-author {
  font-size: 18px;
  color: #ffa300;
  margin-left: 10px;
}


.quote-item:before {
  content: url('favicon.ico');
  margin-right: 10px;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}


.quote-strip:hover .quote-container {
  animation-play-state: paused;
}


.quote-indicators {
    display: none; 
}






@media (max-width: 768px) {
    .quote-strip {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        padding: 0px 0px;
        text-align: center; 
        position: relative; 
        height: 25vh; 
    }

    .quote-container {
        display: flex;
        flex-direction: column;
        justify-content: flex-start; 
        align-items: center; 
        height: auto; 
        padding-bottom: 180px; 
        margin: 0;
        animation: none;
    }

    .quote-item {
        display: none; 
        width: 100%;
        text-align: center;
        margin: 0; 
    }

    .quote-item.active {
        display: block;
        line-height: 1.4em; 
        max-height: 5.6em; 
        margin-top: 0; 
    }

    .quote-text {
        font-size: 4vw; 
        line-height: 1.4em; 
        overflow-wrap: break-word; 
        margin-bottom: 10px; 
        display: block; 
        width: 90%; 
        margin: 0 auto; 
        white-space: pre-line; 
    }

    .quote-author {
        font-size: 3.0vw; 
        text-align: center; 
        margin-top: 5px; 
    }

    .quote-indicators {
        display: flex; 
        justify-content: center; 
        position: absolute; 
        bottom: 10px; 
        width: 100%; 
        z-index: 0; 
    }

    .quote-indicator {
        width: 12px;
        height: 12px;
        background-color: #ccc;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        transition: background-color 0.3s;
    }

    .quote-indicator.active {
        background-color: #ffa300; 
    }
}