/* Importa o arquivo base.css */
@import url(base.css);

/* Estiliza o contêiner principal na index */
.container_index {
    border: var(--cor-principal) 1px solid; /* Borda com cor principal */
    width: 1000px; /* Largura fixa */
    border-radius: 10px; /* Bordas arredondadas */
    background-color: var(--cor-principal); /* Fundo com cor principal */
    color: black; /* Cor do texto */
    padding: 15px; /* Espaçamento interno */
}

/* Estiliza o carrossel */
.carrosel {
    width: 1000px; /* Largura fixa */
    margin: 0 auto; /* Centraliza o elemento horizontalmente */
}

/* Configura a seção de conteúdo */
.conteudo {
    display: flex; /* Usa flexbox */
    justify-content: center; /* Centraliza os elementos filhos */
    width: 100%; /* Largura total */
}

/* Estiliza os itens informativos */
.infoitens {
    border-radius: 15px; /* Bordas arredondadas */
    background-color: #dd9933; /* Cor de fundo */
}

.Infos{
    display: flex;
    padding: 0 10px;
    gap: 10px;
    justify-content: center;
}

/* Ajusta imagens dentro da classe Infos */
.Infos img {
    width: 100%; /* Imagem ocupa toda a largura do contêiner */
    border-radius: 15px; /* Bordas arredondadas */
    padding: 10px;

}

.infoImg{
    display: flex;
    align-items: center;
}



/* Estiliza os links para redirecionamento */
.Redirecionamento {
    display: block; /* Ocupa toda a largura disponível */
    text-decoration: none; /* Remove sublinhado do texto */
    color: black; /* Define cor do texto */
    border-radius: 15px; /* Bordas arredondadas */
}

/* Adiciona transição suave aos itens informativos */
.infoitens {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições de escala e sombra */
    padding: 4px;
    display: flex;
    flex-direction: column;
}

/* Efeito hover nos itens informativos */
.infoitens:hover {
    transform: scale(1.05); /* Aumenta levemente o tamanho */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adiciona sombra */
}

/* Adiciona transição de opacidade nas imagens */
.infoitens img {
    transition: opacity 0.3s ease; /* Transição suave de opacidade */
}

/* Reduz opacidade da imagem ao passar o mouse */
.infoitens:hover img {
    opacity: 0.95; /* Define opacidade */
}


/* Adiciona transição de cor para títulos e parágrafos */
.infoitens h5, .infoitens p {
    transition: color 0.3s ease; /* Transição suave de cor */
}

/* Muda cor do título ao passar o mouse */
.infoitens:hover h5 {
    color: #555; /* Nova cor do título */
}

/* Muda cor do parágrafo ao passar o mouse */
infoitens:hover p {
    color: #555; /* Nova cor do texto */
}

@media screen and (max-width: 1024px) {
    .Infos{
        flex-direction: column;
        width: 100%;
    }

    .container_index{
        width: 100%;
    }

    .carrosel{
        width: 100%;
    }
}