/* Start custom CSS for html, class: .elementor-element-5a043be *//* ==========================================
   SETAS ANIMADAS - DIGNO
========================================== */


/* CONTAINER GERAL */

.dd-setas-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    gap: 32px;
}


/* ==========================================
   GRUPOS DE SETAS
========================================== */

.dd-setas-track {
    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 18px;

    flex: 1 1 0;

    min-width: 0;
}


/* ==========================================
   SETA INDIVIDUAL
========================================== */

.dd-seta {
    position: relative !important;

    width: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;

    height: 32px !important;
    min-height: 32px !important;

    flex: 0 0 26px !important;

    padding: 0 !important;
    margin: 0 !important;

    opacity: .15;

    animation:
        ddSetaEsquerda
        1s
        ease
        infinite;
}


/* SVG */

.dd-seta::before {

    content: "";

    position: absolute;

    inset: 0;

    width: 26px;
    height: 32px;

    background-image:
        url("https://hm.dignodesign.com.br/wp-content/themes/agenio/assets/images/cta/arrow-right.svg");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    pointer-events: none;
}


/* ==========================================
   ESQUERDA
========================================== */

.dd-setas-esquerda
.dd-seta:nth-child(1) {
    animation-delay: 0s;
}

.dd-setas-esquerda
.dd-seta:nth-child(2) {
    animation-delay: .2s;
}

.dd-setas-esquerda
.dd-seta:nth-child(3) {
    animation-delay: .4s;
}


/* ==========================================
   DIREITA
========================================== */

.dd-setas-direita
.dd-seta {

    animation-name: ddSetaDireita;
}


/* Espelha SVG */

.dd-setas-direita
.dd-seta::before {

    transform: rotate(180deg);
}


.dd-setas-direita
.dd-seta:nth-child(1) {

    animation-delay: .4s;
}

.dd-setas-direita
.dd-seta:nth-child(2) {

    animation-delay: .2s;
}

.dd-setas-direita
.dd-seta:nth-child(3) {

    animation-delay: 0s;
}


/* ==========================================
   ANIMAÇÃO ESQUERDA
========================================== */

@keyframes ddSetaEsquerda {

    0%,
    100% {

        opacity: .15;

        transform:
            translateX(0);
    }


    45% {

        opacity: 1;
    }


    60% {

        opacity: 1;

        transform:
            translateX(3px);
    }


    85% {

        opacity: .15;

        transform:
            translateX(0);
    }
}


/* ==========================================
   ANIMAÇÃO DIREITA
========================================== */

@keyframes ddSetaDireita {

    0%,
    100% {

        opacity: .15;

        transform:
            translateX(0);
    }


    45% {

        opacity: 1;
    }


    60% {

        opacity: 1;

        transform:
            translateX(-3px);
    }


    85% {

        opacity: .15;

        transform:
            translateX(0);
    }
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 1024px) {

    .dd-setas-wrapper {

        gap: 20px;
    }


    .dd-setas-track {

        gap: 12px;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

 

    .dd-setas-wrapper {

        justify-content: center !important;
    }
}/* End custom CSS */