.split-wrap {
    display: flex;
    height: 100vh;
    width: 100%;
}

.split-side {
    width: 50%;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 40px;
    color: #fff;
    /* Transição base para o container principal (mantida em 0.3s) */
    transition: all 0.3s ease-in-out;
}

/* 1. Efeito de Escurecimento Rápido (Corrigido para usar background-color) */
.split-overlay {
    position: absolute;
    inset: 0;
    /* Transição de 0.3s aplicada especificamente ao background-color */
    transition: background-color 0.3s ease-in-out;
    z-index: 1; /* A sobreposição ficará abaixo dos outros filhos */
}

/* Estado de Hover: Aumenta a opacidade da cor de fundo suavemente */
.split-side:hover .split-overlay {
    background-color: rgba(0,0,0,0.55); 
}

/* 2. Ajuste para os filhos de .split-side (exceto .split-overlay) */
.split-side > *:not(.split-overlay) {
    position: relative;
    z-index: 2;
}

/* 3. Efeito de Aproximação Rápida do Logo */
.split-logo {
    max-width: 260px;
	max-height: 55px;
    /* Margem inicial maior para distanciar do texto */
    margin-bottom: 50px; 
    /* Transição de 0.3s para o movimento (margem) */
    transition: margin-bottom 0.3s ease-in-out;
	bottom: 300px;
	transition: 0.6s;
}

.split-side:hover .split-logo {
    /* Margem menor no hover para aproximar do texto */
    margin-bottom: 25px; 
	bottom: 100px;
	transition: 0.6s;
	max-width: 300px;
	max-height: 70px;
}

.split-title {
	font-family: "Poppins" !important;
		font-weight: 300 !important;
    font-size: 38px;
    margin-bottom: 25px;
	top: -100px;
}

/* 4. Efeito de Aparecer Rápido do Botão */
.split-btn {
    background: transparent;

    padding: 12px 32px;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    
    /* Inicialmente invisível e oculto */
    opacity: 0;
    visibility: hidden; 
    
    /* Transição de 0.3s para opacidade e visibilidade */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    
    margin-top: 15px; 
	bottom: -200px;
	transition: 0.6s;
	font-family: "Poppins" !important;
  font-weight: 300 !important;
}

div.split-side:nth-child(1) > a:nth-child(4) {
	border: 1px solid #78956c;
}
div.split-side:nth-child(2) > a:nth-child(4) {
	border: 1px solid #a64036;
}

.split-side:hover .split-btn {
    /* Fica visível no hover */
    opacity: 1;
    visibility: visible;
	bottom: 100px;
	transition: 0.6s;
}

.elementor-kit-8 a:hover {
	color: #fff !important;
}

@media (max-width: 768px) {
    
    /* Container Principal */
    .split-wrap {
        /* Altera a direção para coluna (empilha verticalmente) */
        flex-direction: column; 
        /* Agora, ele precisa ter a altura total do conteúdo (100% da altura da viewport) */
        /* Mas como cada lado terá 50% da altura, o wrap já se ajusta */
        height: 100vh; 
    }

    /* Cada Lado (Empilhamento) */
    .split-side {
        /* Ocupa a largura total (100%) da tela */
        width: 100%; 
        /* Ocupa metade da altura total da tela (100vh / 2) */
        height: 50vh; 
    }

    /* ********** DESABILITANDO O EFEITO DE HOVER NO MOBILE ********** */
    /* Isso geralmente é necessário porque o efeito "hover" no touch screen pode ser inconsistente */
    
    /* 1. Mantém o fundo em opacidade média/escura para melhor legibilidade */
    .split-side .split-overlay {
        background-color: rgba(0,0,0,0.55); 
    }

    /* 2. Remove o estado de hover para mobile */
    .split-side:hover .split-overlay {
        background-color: rgba(0,0,0,0.55); /* Mantém o valor do estado normal/móvel */
    }

    /* 3. Ajusta o Logo e remove a animação de aproximação */
    .split-logo {
        /* Margem final (mais próxima) */
        margin-bottom: 25px; 
        /* Remove o bottom e a transição indesejada no mobile */
        bottom: auto;
        transition: none;
    }
    
    .split-side:hover .split-logo,
	.split-logo{
        /* Desativa o efeito de hover no mobile */
        margin-bottom: 25px; 
        max-width: 180px; /* Volta ao tamanho padrão */
    }

    /* 4. Torna o Botão Sempre Visível e remove a animação */
    .split-btn {
        opacity: 1;
        visibility: visible;
        /* Remove o bottom e a transição indesejada no mobile */
        bottom: auto;
        transition: none;
    }
    
    .split-side:hover .split-btn {
        /* Desativa o efeito de hover no mobile */
        opacity: 1;
        visibility: visible;
        bottom: auto;
        transition: none;
    }
    
    /* 5. Centraliza o Título no Mobile (Se necessário) */
    .split-title {
        top: auto;
		font-size: 22px;
    }
	.split-side:hover .split-logo {
		bottom: 0;
	}
	html {
		margin: 0 !important;
	}
	
	div.split-side:nth-child(1) > div:nth-child(1) {
		border-bottom: 2px solid #a1a1a1;
	}
}