html,
body {
    overflow-x: hidden;
}

/* Garantir que o widget ocupe 100% da largura */
.elementor-widget-dynamic_marquee_widget {
    width: 100%;
    transform-origin: center center !important;
    position: relative;
}

.carrossel {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
}

/* Suporte para modo cruzado */
.carrossel.mode-crossed {
    position: relative;
    height: 200px;
    /* Altura padrão, pode ser substituída pelo controle */
}

.carrossel li {
    white-space: nowrap;
}

/* Fixa o ponto de rotação no centro absoluto da tela */
.elementor-section-wrap {
    overflow: hidden;
    position: relative;
}

/* Estilos básicos para itens do marquee */
.carrossel li,
.carrossel .marquee-item {
    display: inline-flex;
    align-items: center;
    margin-right: 20px;
}

.marquee_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marquee_texto {
    display: inline-block;
    margin-left: 10px;
}

/* Efeito de fade nas laterais */
.fade-overlay {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.fade-left {
    left: 0;
}

.fade-right {
    right: 0;
}

/* Estilos para arrastar */
.carrossel.enable-drag .carrossel-ativo {
    cursor: grab;
}

.carrossel.enable-drag .carrossel-ativo.dragging {
    cursor: grabbing;
    user-select: none;
}

/* Carrossel no modo editor */
.carrossel-editor {
    display: flex;
    white-space: nowrap;
    overflow: visible;
}

/* Carrossel para a esquerda (animação: translateX de 0 a -50%) */
.carrossel.left .elementor-icon-list-items {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;

}

.carrossel.left .carrossel-ativo {
    display: flex;
    animation: carrossel 20s linear infinite;
    will-change: transform;
}

.carrossel.left .carrossel-ativo.dragging {
    animation: none !important;
}

@keyframes carrossel {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Carrossel para a direita (animação: translateX de -50% a 0) */
.carrossel.right .elementor-icon-list-items {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

.carrossel.right .carrossel-ativo {
    display: flex;
    animation: carrossel2 20s linear infinite;
    will-change: transform;
}

.carrossel.right .carrossel-ativo.dragging {
    animation: none !important;
}

@keyframes carrossel2 {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}

/* Estilo para marquees cruzados */
.cross-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.cross-marquee {
    position: absolute;
    width: 140%;
    /* Maior que 100% para garantir cobertura diagonal */
    left: -20%;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.cross-marquee.first {
    transform-origin: center center;
    z-index: 1;
}

.cross-marquee.second {
    transform-origin: center center;
    z-index: 2;
}

.cross-marquee .elementor-icon-list-items {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: relative;
}

/* Animação cruzada para a esquerda */
.cross-marquee.left .carrossel-ativo {
    display: flex;
    animation: cross-left 20s linear infinite;
    will-change: transform;
}

/* Animação cruzada para a direita */
.cross-marquee.right .carrossel-ativo {
    display: flex;
    animation: cross-right 20s linear infinite;
    will-change: transform;
}

@keyframes cross-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes cross-right {
    0% {
        transform: translateX(-50%);
    }

    100% {
        transform: translateX(0);
    }
}