/* Reset básico para remover margens e paddings padrão do navegador */
body {
    margin: 0;
    padding: 0;
	background-color:#CCC;
    font-family: sans-serif;
}

html {
    scroll-behavior: smooth;
}




/*  barra divisória top fixa */
.divisoria-fixa {
    position: fixed; /* Fixa a barra na tela */
    top: 0; /* Alinha a barra no topo */
    left: 0; /* Alinha a barra na esquerda */
    width: 100%; /* Garante que a barra ocupe toda a largura */
    background-image:url(menu.jpg);
	shadow: 10px 10px 5px grey; /* Cor de fundo escura */
    color: white; /* Cor do texto */
    padding: 0px; /* Espaçamento interno */
    box-sizing: border-box; /* Garante que o padding não afete a largura total */

    z-index: 1000; /* Garante que a barra fique na frente de outros elementos */
    display: flex; /* Para alinhar o conteúdo */
 justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center;
}
	
/* Estilização dos links de navegação */
.divisoria-fixa a {
color: #f60; /* Cor do texto: Laranja */
            font-weight: bold; /* Deixa o texto em negrito */
            text-shadow: 1px 1px 1px #666; /* Adiciona a sombra */
    text-decoration: none;
    margin-left: 20px;
}
/* fim barra divisória top fixa */
	
	
	
	
	
/* logo */	
.h1{
		width:150px;
		height:150px;
		 align-items: center; 
background-image: url('logo1.png');

    /* Define a posição da imagem (centralizada) */
    background-position: center;

    /* Impede a repetição da imagem */
    background-repeat: no-repeat;

    /* Redimensiona a imagem para cobrir todo o espaço, mantendo a proporção */
    background-size: cover;

    /* Você também pode definir uma altura mínima para ver a imagem, se o conteúdo for pequeno */
    min-height: 50px;
}
	/* fim logo */	
	
	
	




/* divsoria dentro do menu */
.divisoria {
	height:5px;
	box-sizing: border-box;
	background-color:#f60;
}/* fim da divsoria dentro do menu */



.menu-horizontal {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #333; /* Cor de fundo do menu */
    display: flex; /* Transforma os itens em elementos flexíveis */
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
    
    /* Adiciona a sombra na parte de baixo do menu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid #F60;
}
}

/* Estiliza cada item da lista (li) */
.menu-horizontal li {
    padding: 0;
}

/* Estiliza os links (a) para parecerem botões */
.menu-horizontal a {
    display: block; /* Ocupa todo o espaço do li */
    padding: 30px 20px;
    color: white;
    font-weight: 10px; /* Deixa o texto em negrito */
    text-shadow: 1px 1px 1px #666; /* Adiciona a sombra */
    text-decoration: none; /* Remove o sublinhado */
    font-family: Arial, sans-serif;
    text-transform: uppercase;
}

/* Efeito ao passar o mouse (opcional) */
.menu-horizontal a:hover {
    background-color: #F60;
    color:#fff; 
}


/* Carrossel */
.carousel-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 500px;
}

.carousel-slide {
    display: flex;
    height: 100%;
    transition: transform 0.8s ease-in-out;
}

.slide {
    flex: 0 0 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
    text-align: center;
}

.slide-content {
    background-color: #000;
	color:#FFF;
	 flex: 3000px 300px 20%;
    padding: 5px;
	opacity:0.80;
	margin-top:400px;
    border-radius: 10px;
}

.slide-content h2 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.slide-content p {
    font-size: 1.2rem;
}/*fim  Carrossel */






.container-principal {
    display: flex;
    justify-content: center; /* Centraliza a divisória horizontalmente */
    align-items: center; /* Centraliza verticalmente (se precisar) */
    padding: 20px;
    /* Ocupa a altura total da tela para centralizar melhor */
}

/* Divisória Central (o contêiner Flexbox) */
.divisoria-central {
    display: flex; /* ATIVA o Flexbox */
    width: 100%; /* Define uma largura para o bloco central (expansível) */
    max-width: 100%; /* Limita a largura máxima em telas grandes */
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden; /* Garante que o conteúdo não saia para fora */
}

/* Estilização das divisórias internas (itens Flex) */
.divisoria-esquerda,
.divisoria-direita {
    flex: 1; /* Permite que as divisórias se expandam igualmente */
    padding: 20px;
	
}

/* Exemplo de cores para diferenciar as divisórias */
.divisoria-esquerda {
	
    background-color: #666;
	width:1000px; /* Azul claro */
}

.divisoria-direita {
    background-color: #fff; /* Lilás claro */
}

/* Adicione espaçamento entre as divisórias, se desejar */
.divisoria-esquerda {
    border-right: 1px solid #ccc; /* Linha divisória sutil */
}



/* Formulário */
.section-form {
    padding: 50px 0;
	 border: 1px solid var(--light-gray);
    border-radius: 5px;
    background-color: var(--secondary-color);
}

.section-form h2 {
    text-align: center;
	
    margin-bottom: 30px;
    font-size: 2.5rem;
}

.form-container {
    max-width: 70%;
    margin: 0 auto;
    background-color: var(--white);
    padding: CENTER;
	
    border-radius: 10px;

}

.form-group {
    margin-bottom: 20px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #000;
    border-radius: 5px;
    font-size: 1rem;
	background-color:#fff;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
	
}

.form-group button {
    width: 100%;
    padding: 15px;
    background-color:#FFF;
    color: var(--white);
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-group button:hover {
    background-color: #005aab;
}


.div1esquerda {
	background-color:#FFF;
	width:100%;
	text-align:center;
	color:#333;
	font-weight: 10px; /* Deixa o texto em negrito */
    text-shadow: 1px 1px 1px #FFF; /* Adiciona a sombra */
    text-decoration: none; /* Remove o sublinhado */
    font-family: Arial, sans-serif;
	
	height:30px;
	border-radius: 5px;
    
    /* Adiciona uma sombra em volta da div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	justify-content: center;
	padding-top:10px;}
	/* Container da galeria */


/* Estilos para o corpo da página */
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 40px;
    right: 84%;
	color:#fff;
    width: 50px;
	border-radius: 5px ;
    height: 50px;
    background-color: #f60;
    text-decoration: none;
}
.btn::after {
    content: "↑";
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    transition: margin-top 250ms;
}
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

/* Container da galeria (Agora ainda mais responsivo) */
.galeria-container {
    display: grid;
    /* Essa linha se adapta a telas de todos os tamanhos, usando a função minmax para criar as colunas.
       Em telas menores, o minmax vai criar apenas uma coluna que preenche a largura. */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Item individual da galeria */
.galeria-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de hover e zoom na imagem */
.galeria-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.galeria-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.galeria-item:hover img {
    transform: scale(1.05);
}

/* Legenda */
.legenda-imagem {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    box-sizing: border-box;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.galeria-item:hover .legenda-imagem {
    transform: translateY(0);
}

.legenda-imagem h3 {
    margin: 0;
    font-size: 1.2rem;
}

.legenda-imagem p {
    margin: 5px 0 0;
    font-size: 0.9rem;
}

.divisoria2 {
	height:100%;
	box-sizing: border-box;
	background-color:#333;
	text-align:center;
}/* fim da divsoria dentro do menu */
.divdentro {
	background-color:#CCC;
	width:100%;
	text-align:center;
	color:#333;
	font-weight: 10px; /* Deixa o texto em negrito */
    text-shadow: 1px 1px 1px #FFF; /* Adiciona a sombra */
    text-decoration: none; /* Remove o sublinhado */
    font-family: Arial, sans-serif;
	
	height:30px;
	
    
    /* Adiciona uma sombra em volta da div */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	justify-content: center;
	padding-top:10px;}
	
	
	
.rodape{
   ; /* Essa propriedade o mantém fixo na tela */
    bottom: 0;      /* Fixa-o na parte de baixo */
    width: 100%;    /* Garante que ele ocupe toda a largura */
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.5;
    z-index: 1000; /* Garante que ele fique sobre o conteúdo */
}