.elementor-1970 .elementor-element.elementor-element-69c16d2b{--display:flex;--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-1970 .elementor-element.elementor-element-1c54700b{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1970 .elementor-element.elementor-element-419f6ed2 > .elementor-widget-container{padding:0px 0px 0px 0px;}@media(max-width:767px){.elementor-1970 .elementor-element.elementor-element-69c16d2b{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(min-width:768px){.elementor-1970 .elementor-element.elementor-element-1c54700b{--width:100%;}}@media(max-width:1200px) and (min-width:768px){.elementor-1970 .elementor-element.elementor-element-1c54700b{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-419f6ed2 *//* CSS Existente (sem alterações nesta seção) */
.image-box-overlay-fade-out {
    position: relative;
    overflow: hidden;
}
.image-box-overlay-fade-out .elementor-image-box-img {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: block;
    margin: 0 auto;
    border-radius: 30px;
}
.image-box-overlay-fade-out .elementor-image-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.image-box-overlay-fade-out .elementor-image-box-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #08962D;
    opacity: 1;
    z-index: 2;
    transition: opacity 0.5s ease-in-out;
    border-radius: 30px;
}
.image-box-overlay-fade-out .elementor-image-box-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    z-index: 1.5;
    transition: opacity 0.5s ease-in-out;
    border-radius: 30px;
}
.image-box-overlay-fade-out:hover .elementor-image-box-img::before {
    opacity: 0;
}
.image-box-overlay-fade-out:hover .elementor-image-box-img::after {
    opacity: 1;
}
.image-box-overlay-fade-out .elementor-image-box-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: left;
    padding: 30px;
    box-sizing: border-box;
    z-index: 3;
    color: #FFFFFF;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.image-box-overlay-fade-out .elementor-image-box-title {
    margin-bottom: 5px;
    font-size: 1.8em;
    font-weight: bold;
}
.image-box-overlay-fade-out .elementor-image-box-description {
    font-size: 1em;
    line-height: 1.4;
}

/* Novo CSS para o conteúdo que aparece no hover (sem o pseudo-elemento ::before) */
.image-box-overlay-fade-out .hover-text-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: left;
    padding: 30px;
    box-sizing: border-box;
    z-index: 3;
    color: #FFFFFF;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}
.image-box-overlay-fade-out .hover-text-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.image-box-overlay-fade-out .hover-text-content ul li {
    margin-bottom: 8px;
    font-size: 0.95em;
    line-height: 1.3;
    /* Removido position: relative e padding-left, pois o ícone está agora dentro do HTML */
}

/* NOVO: Estilo para o ícone Font Awesome dentro do LI */
.image-box-overlay-fade-out .hover-text-content ul li .fas {
    margin-right: 10px; /* Espaço entre o ícone e o texto */
    color: #FFFFFF; /* Garante que a cor do ícone seja branca */
    font-size: 1.1em; /* Tamanho do ícone */
    vertical-align: middle; /* Ajuda a alinhar o ícone verticalmente com o texto */
}

/* Efeito de hover final: esconde o conteúdo original e mostra o novo */
.image-box-overlay-fade-out:hover .elementor-image-box-content {
    opacity: 0;
    visibility: hidden;
}
.image-box-overlay-fade-out:hover .hover-text-content {
    opacity: 1;
    visibility: visible;
}


@media(min-width: 768px) and (max-width: 1024px){
  .image-box-overlay-fade-out .hover-text-content ul li {
    margin-bottom: 5px;
    font-size: 13px !important;
    line-height: 1.3;
}}

/*MOBILE*/
@media(max-width: 767px){
  .image-box-overlay-fade-out .hover-text-content ul li {
    margin-bottom: 6px;
    font-size: 2.5vw !important;
    line-height: 1.3;
}}/* End custom CSS */