/* ============================================================
   ANIMATION TEXTE
   ============================================================ */

.animation-container {
    margin: 2rem 0;
    display: block !important;
    width: 100%;
}

.animation-container h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    display: inline-block;
    margin: 0 0 2rem 0;
}

.animation-container .static-text {
    color: var(--text-color);
}

.animation-container .dynamic-text {
    position: relative;
    color: white;
    background-color: var(--main-color);
    padding: 0 8px;
    display: inline-block;
    height: 1.8rem;
    line-height: 1.8rem;
}

.dynamic-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: var(--bg-color);
    border-left: 2px solid var(--main-color);
    animation: typing 5s ease-in-out infinite;
}

@keyframes typing {
    0% {
        left: 0;
    }
    40% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

/* ============================================================
   RESPONSIVE - MOBILE
   ============================================================ */
@media (max-width: 768px) {
    .animation-container {
        display: none !important;
    }
}