.elementor-59 .elementor-element.elementor-element-56c0ca2{--display:flex;--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;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for shortcode, class: .elementor-element-5a3f069 *//* =================================================================== */
/* --- ESTILOS PARA O SLIDER PRINCIPAL (PROJETOS) [slider_projetos_custom] --- */
/* =================================================================== */

/* 1. ESTRUTURA PRINCIPAL DO SLIDER */
/* Define uma altura para o slider. A imagem vai se adaptar a esta altura. */
.hoch-slider-wrapper .meu-slider-container {
    height: 70vh; /* <<-- AJUSTE AQUI: 70% da altura da tela. Use um valor fixo como 500px se preferir. */
    width: 100%;
}

/* 2. O SLIDE E A IMAGEM DE FUNDO */
/* Esta é a regra mais importante. Ela estiliza o link que contém a imagem. */
.hoch-slider-wrapper .meu-slide-item {
    display: block;
    width: 100%;
    height: 100%;
    
    /* A propriedade mágica: faz a imagem cobrir todo o espaço, sem distorcer */
    background-size: cover;
    
    /* Centraliza a imagem de fundo, garantindo um bom recorte */
    background-position: center center;
    
    /* Garante que a imagem não se repita */
    background-repeat: no-repeat;
    
    position: relative; /* Necessário para o overlay */
}

/* 3. OVERLAY E TÍTULO DO PROJETO */
/* Cria uma camada escura sobre a imagem para dar contraste ao texto */
.hoch-slider-wrapper .meu-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Fundo preto com 40% de opacidade */
    transition: background-color 0.3s ease;
    
    /* Centraliza o título vertical e horizontalmente */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Efeito de clarear o overlay ao passar o mouse */
.hoch-slider-wrapper .meu-slide-item:hover .meu-slide-overlay {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Estilo do título do projeto */
.hoch-slider-wrapper .meu-slide-titulo {
    color: #fff;
    font-size: 2.5rem; /* Tamanho da fonte */
    text-align: center;
    padding: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    transform: translateY(15px); /* Efeito sutil de subir ao passar o mouse */
    transition: transform 0.3s ease;
}

.hoch-slider-wrapper .meu-slide-item:hover .meu-slide-titulo {
    transform: translateY(0);
}


/* 4. SETAS DE NAVEGAÇÃO */
.hoch-slider-wrapper .hoch-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background-color: #F7941D; /* Sua cor laranja */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
}

.hoch-slider-wrapper .hoch-arrow:hover {
    filter: brightness(1.1);
    transform: translateY(-50%) scale(1.1);
}

.hoch-slider-wrapper .hoch-arrow-prev {
    left: 20px;
}

.hoch-slider-wrapper .hoch-arrow-next {
    right: 20px;
}

/* 5. PAGINAÇÃO (BOLINHAS) */
.hoch-slider-wrapper .swiper-pagination-bullet {
    background-color: #F7941D; /* Sua cor laranja */
    opacity: 0.6;
}

.hoch-slider-wrapper .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}/* End custom CSS */