.carousel {
    margin: 100px auto;
    width: 90%;
    display: flex;
    overflow-x: auto;
}
.carousel::-webkit-scrollbar{
    display: none;
}

.group{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    animation: spin 20s infinite linear;
    padding-right: 1em;
}

.card {
    flex: 0 0 5em;
    height: 5em;
    padding: 1em;
    background:#d2f4f9;
    font-size: 3em;
    border-radius: .2em;    
    text-align: center;
    align-content: center;
    

}
.card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.typewriter {
  overflow: hidden;
  /* Keeps on a single line */
  white-space: nowrap;
  /* The cursor */
  border-right: 1px solid;
  /* steps = number of characters */
  animation: typing 3s steps(10) forwards, blink 1s 3s step-end infinite;
}

.custom-hide{
    opacity: 0;
    transition: all 1s;
}
.custom-show{
    opacity: 1;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 9ch;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

@keyframes spin {
    from {translate: 0;}
    to {translate: -100%;}
}