html {
  scroll-behavior: smooth;
}
body {
	font-family: 'Raleway', sans-serif;
	margin: 0;
	background-image: url(../imagens/fundo_site.jpg);
	background-size: 100%;
	background-repeat: no-repeat;
	background-attachment: fixed;
	}
a {
		text-decoration:none;
		color:#069;
	}
.barra {
	height: 10px;
	width: 100%;
	background-color: #0099CC;
	}
.site {
  display: grid;
  grid-template-columns: 1fr; 
  width: 1200px;
  grid-gap: 10px;
  margin:auto auto;
}
.grade_cabecalho {
  display: grid;
  grid-template-columns: 2fr 3fr 1fr; /* define 3 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.redes_sociais {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* define 3 colunas de tamanho igual */
  grid-gap: 4px; /* define o espaço entre as colunas */
  text-align:left;
  width:98%;
}
.conteudo {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.conteudo img {
	max-width:50%;
	float:left;
	padding:10px;
}
.cursos{
	display: grid;
	grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	grid-gap: 10px; /* define o espaço entre as colunas */
	border: 1px dashed #F96;
	border-radius:25px;
	margin:10px;
	padding:10px;
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(240,240,240,1) 100%);
}
.2colunas {
  display: grid;
  grid-template-columns: 1fr 1fr; /* define 3 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.grid-container1 {
  display: grid;
  grid-template-columns: 4fr 2fr 2fr; /* define 3 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.grid-container2 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* define 2 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.grid-container3 {
  display: grid;
  grid-template-columns: 1fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.colunas42 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.grid-rodape{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* define 1 colunas de tamanho igual */
  grid-gap: 10px; /* define o espaço entre as colunas */
}
.lista_documentos {
  display: grid;
  grid-template-columns: 1fr 7fr; /* define 1 colunas de tamanho igual */
  grid-gap: 5px; /* define o espaço entre as colunas */
}
.icone {
	border: 1px dashed #ccc;
	padding:10px;
	text-align:center;
}
.documento {
	border: 1px dashed #ccc;
	padding:10px;
}
h1 {
	color:#000;	
	 position: relative;
}
h1::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 20%;
  height: 10px;
  background: #f0f0f0;
  border-radius:5px;
}
h3 {
	color:#000;	
	 position: relative;
}
h3::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 20%;
  height: 3px;
  background: #f0f0f0;
  border-radius:5px;
}
.rodape {
	margin: auto auto;
	width:1200px;
}
footer {
	background-color:#e0e0e0;
	color:#000;
	padding:20px;
	width:100%;
	left: 0;
	bottom: 0;
}
.linkedin{
  color: #0077B5; /* cor do linkedin */
}

.facebook {
  color: #3B5998; /* cor do facebook */
}

.instagram {
  color: #C13584; /* cor do instagram */
}

.youtube{
  color: #FF0000; /* cor do youtube */
}
.btn-link {
	display: inline-block;
	padding: 5px 10px;
	border: none;
	background-color: #666666; /* cor do botão */
	color: #fff;
	transition: background-color 0.3s ease; /* transição suave */
}

.btn-link:hover {
	background-color: #006666; /* cor do botão quando o mouse passa sobre ele */
}
.btn-topo {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 16px;
  padding: 10px 12px;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

.btn-topo:hover {
  opacity: 0.8;
}
.slide-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; /* Para suportar rolagem suave no iOS */
}

.slide-item {
  flex-shrink: 0;
  scroll-snap-align: start;
  margin-right: 10px;
}

.slide-item img {
  width: 100%;
}
.logo {
	padding-top:10px;
}
.links_rodape a {
	display:block;
	margin:2px;
}
  button {
      background-color: #4CAF50;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
	  margin:5px;
    }

    button:hover {
      background-color: #45a049;
    }
	#slideshow {
            margin: 5px auto;
			position:relative;
            width: 300px;
			height:300px;
           overflow: hidden;
        }
        
        #slideshow img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        
        #slideshow img.active {
            opacity: 1;
        }
@media screen and (max-width: 600px) {
	body {
		background-image: url(../imagens/fundo_site_mobile.jpg);
	}
	.site {
		width:98%;
	}
	.logo {
	  text-align:center;
	}
	.grade_cabecalho {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
	.grid-container1 {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
	.grid-container2 {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
	.grid-container3 {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
		.colunas42 {
  display: grid;
  grid-template-columns: 1fr 1fr; /* define 3 colunas de tamanho igual */
	}
	.grid-rodape {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
	}
	.rodape {
		width:100%;
	}
	.redessociais {
		display:none;
	}
	.webmail {
		display:none;
	}
	.contatos {
		display:none;
	}
	.conteudo {
  display: grid;
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
}
.conteudo img {
	max-width:100%;
	padding:2px;
	float:none;
}
.2colunas {
  grid-template-columns: 1fr; /* define 3 colunas de tamanho igual */
}
#slideshow {
            width: 100%;
			max-height:100%;
        }
}