.elementor-7779 .elementor-element.elementor-element-48c4b68{--display:flex;--min-height:60px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-7779 .elementor-element.elementor-element-48c4b68:not(.elementor-motion-effects-element-type-background), .elementor-7779 .elementor-element.elementor-element-48c4b68 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:radial-gradient(at center center, var( --e-global-color-secondary ) 0%, var( --e-global-color-primary ) 100%);}.elementor-7779 .elementor-element.elementor-element-b74ae86 .elementor-heading-title{font-family:"Nunito", Sans-serif;font-size:22px;font-weight:900;text-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);color:var( --e-global-color-75690c5 );}/* Start custom CSS for container, class: .elementor-element-48c4b68 *//* Estilos para a faixa onde o texto vai se mover */
.faixa-dinamica {
    overflow: hidden; /* CRUCIAL: Esconde o texto que está fora da área visível da faixa */
    position: relative; /* Necessário para posicionar o conteúdo móvel */
    width: 100%; /* Garante que a faixa ocupe a largura total */
}

/* Estilos e animação para o texto que vai se mover */
.faixa-dinamica .conteudo-movel {
    display: inline-block; /* Permite que o elemento seja tão largo quanto seu conteúdo */
    white-space: nowrap; /* IMPEDE que o texto quebre a linha, mantendo-o em uma única linha horizontal */
    animation: moverTextoInfinito 20s linear infinite; /* Aplica a animação. Ajuste '20s' para a velocidade: menor = mais rápido, maior = mais lento. */
    /* IMPORTANTE: Com esta técnica, o padding-left: 100%; não é mais necessário. */
    /* O texto começa na posição 0, e a animação se encarrega de movê-lo. */
}

/* Definição da animação (como o texto se move) para loop infinito perfeito */
@keyframes moverTextoInfinito {
    0% {
        transform: translateX(0%); /* Posição inicial: o texto começa no lado esquerdo da faixa */
    }
    100% {
        transform: translateX(-50%); /* Move o texto exatamente pela metade de sua largura total.
                                      Isso cria a ilusão de loop contínuo, pois o final da primeira
                                      parte do seu conteúdo duplicado se alcontra com o início da segunda. */
    }
}

/* Opcional: Media Query para telas menores (smartphones, por exemplo) */
/* Isso ajuda a garantir que a faixa seja responsiva e mantenha uma boa aparência em diferentes dispositivos. */
@media (max-width: 767px) {
    .faixa-dinamica {
        height: 60px; /* Exemplo: Reduz a altura da faixa no celular para economizar espaço vertical */
    }
    .faixa-dinamica .conteudo-movel {
        font-size: 16px; /* Exemplo: Reduz o tamanho da fonte para melhor legibilidade em telas menores */
        animation-duration: 15s; /* Exemplo: Acelera a animação em telas menores, se desejar */
    }
}/* End custom CSS */