.elementor-46 .elementor-element.elementor-element-0830f96{--display:flex;--min-height:500px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--margin-top:-5px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-46 .elementor-element.elementor-element-0830f96:not(.elementor-motion-effects-element-type-background), .elementor-46 .elementor-element.elementor-element-0830f96 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://unipack.projetosddwb.com.br/wp-content/uploads/2026/04/banner1-1.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-46 .elementor-element.elementor-element-1532c7b{text-align:center;}.elementor-46 .elementor-element.elementor-element-1532c7b .elementor-heading-title{font-family:"Outfit", Sans-serif;font-size:64px;font-weight:600;color:var( --e-global-color-3b2b7e4 );}.elementor-46 .elementor-element.elementor-element-6634c25{--display:flex;--padding-top:60px;--padding-bottom:60px;--padding-left:60px;--padding-right:60px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-46 .elementor-element.elementor-element-9d41ecf{text-align:center;font-family:"Outfit", Sans-serif;font-size:18px;font-weight:500;line-height:1.5em;color:var( --e-global-color-secondary );}.elementor-46 .elementor-element.elementor-element-9d41ecf a{color:var( --e-global-color-09c740f );}@media(max-width:767px){.elementor-46 .elementor-element.elementor-element-0830f96{--min-height:400px;--margin-top:60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-46 .elementor-element.elementor-element-1532c7b .elementor-heading-title{font-size:34px;}}/* Start custom CSS for container, class: .elementor-element-0830f96 *//* Configura as transições suaves para o efeito de fade */
.elementor-46 .elementor-element.elementor-element-0830f96 {
    transition: background-color 0.6s ease;
}

.elementor-46 .elementor-element.elementor-element-0830f96 .elementor-widget-heading {
    transition: filter 0.6s ease, color 0.6s ease;
}

/* 1. Escurece o fundo do container quando o botão (f46d460) recebe hover */
.elementor-46 .elementor-element.elementor-element-0830f96:has(.elementor-element-f46d460:hover) {
    background-color: #1a1a1a !important; /* Cor de fundo escura */
}

/* 2. Se você usa IMAGEM de fundo: aplica o efeito preto e branco apenas nela */
.elementor-46 .elementor-element.elementor-element-0830f96::before {
    content: "";
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: grayscale(0%);
    backdrop-filter: grayscale(0%);
    transition: backdrop-filter 0.6s ease, -webkit-backdrop-filter 0.6s ease;
    z-index: 0;
    pointer-events: none; /* Impede que essa camada bloqueie cliques */
}

.elementor-46 .elementor-element.elementor-element-0830f96:has(.elementor-element-f46d460:hover)::before {
    -webkit-backdrop-filter: grayscale(100%);
    backdrop-filter: grayscale(100%);
}

/* 3. Altera apenas os TÍTULOS (para não sumirem no fundo escuro) */
.elementor-46 .elementor-element.elementor-element-0830f96:has(.elementor-element-f46d460:hover) .elementor-widget-heading {
    color: #ffffff !important; /* Muda os textos para branco */
}

/* 4. Garante que os textos e o BOTÃO fiquem na frente do efeito de fundo */
.elementor-46 .elementor-element.elementor-element-0830f96 .e-con-inner {
    position: relative;
    z-index: 1;
}/* End custom CSS */