body {
	margin:0;
	font-family: "Almarai", sans-serif;
	/*background-image: url(../img/fundo_linhas.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;*/
}
* {box-sizing: border-box;}

#backToTop {
    position: fixed; /* Posiciona o botão de forma fixa no rodapé da página */
    bottom: 20px; /* Distância do rodapé */
    right: 20px; /* Distância do lado direito */
    padding: 10px 15px; /* Espaçamento interno do botão */
    background-color: #fff; /* Cor de fundo do botão */
    border: solid 3px #15A9A6;
    color: #15A9A6; /* Cor do texto do botão */
    border-radius: 20%; /* Torna o botão arredondado */
    cursor: pointer; /* Muda o cursor para uma mão ao passar sobre o botão */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Adiciona sombra ao botão */
    display: none; /* Esconde o botão inicialmente */
    z-index: 1000; /* Garante que o botão esteja acima de outros elementos */
    font-size: 20px; /* Tamanho da fonte */
}

/* Estilo ao passar o mouse sobre o botão */
#backToTop:hover {
    background-color: #15A9A6; /* Cor de fundo ao passar o mouse */
    color: #fff;
}


#atendimento{
	display: flex;
	width: 100%;
	height: auto;
	padding: 20px;
	background-color: lightgray;
	justify-content: right;
}

#logotopo {
	width: 100%;
	height: auto;
	padding: 2.5em;
	background-color: #fff;
	background-image: url(../img/fundo_logotopo.png);
	background-repeat: no-repeat;
	background-position: top right;
	justify-content: center;
	text-align: center;
}

.logotipo {
	max-width: 400px;
	height: auto;
}

#topo{
	width: 100%;
	height: auto;
	border-bottom: white dashed thin;
}
.section {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;

}

.section_colunas {
	display: block;
	column-count: 1;
	column-gap: 80px;
	column-rule-style: dashed;
	column-rule-width: 1px;
	column-rule-color: lightgray;
	column-width: 33.3%;
	font-size: 24px;
}
#container {
	width: 100%;
	height: auto;
	/*border: white dashed 1px;*/
	/*padding-left: 0.5em;
	padding-right: 0.5em;*/
	/*background-color: #00b5ac;
	background-image: url(../img/fundo_PROVISORIO.png);
	background-position: left top;
	background-repeat: no-repeat;
	text-align: center middle;*/
	display: block;
    /*justify-content: center;
    align-items: center;*/
}
#banner {
	display: flex;
	/*max-width: 1640px;
	max-height: 640px;*/
	max-width: 1366px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 80px;
	/*border: black dashed thin;*/
}

#bannerfull {
	display: flex;
	/*max-width: 1640px;
	max-height: 640px;*/
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 
	0px;
	/*border: black dashed thin;*/
}

.bannerrounded {
	border-radius: 15px;
}

.banner_clientes {
	display: flex;
	max-width: 1024px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	justify-content: center;

}

#navegacao {
	width: 100%;
	height: auto;
	/*background-color: #fff;*/
	z-index: 999;
	position: fixed;
	padding: 0px;
    transition: 0.3s;
}
#divgeral {
	display: flex;
	max-width: 1640px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	/*border: red dashed thin;*/
	display: block;
	padding-left: 2em;
	padding-right: 2em;
}

#nossosprodutos {
	border: 1px yellow dashed;
	width: 100%;
	height: auto;
	align-items: center;
	justify-content: center;
	margin-right: auto;
	margin-left: auto;
	margin-top: 180px;
	display: block;
	padding-top: 1em;
	padding-bottom: 8em;
	padding-left: 3em;
	padding-right: 3em;
	/*border: red solid 2px;*/
	/*background-color: #15A9A6;*/
	background-image: linear-gradient(to top, #0b808e , #04b6ae);
}

.respsocial {
	display: flex;
	max-width: 1640px;
	height: 500px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	padding-top: 3em;
	padding-bottom: 6em;
	border-top: dashed 1px #15A9A6;
	/*border-bottom: solid 1px #15A9A6;*/
	/*border: red dashed thin;*/
	/*column-count: 2;
	column-gap: 80px;
	column-rule-style: dashed;
	column-rule-width: 1px;
	column-rule-color: #15A9A6;*/
}
.imagem {
	margin: 2em;
}

#hp_principal {
	max-width: 1266px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	padding-left: 3em;
	padding-right: 3em;
	/*display: flex;*/
	display: flex;
	line-height: 2em;
	/*border: lightgray dashed 2px;
	*/
	column-count: 3;
	column-gap: 80px;
	column-rule-style: dashed;
	column-rule-width: 1px;
	column-rule-color: lightgray;
	column-width: 33.3%;
}


#hp_produtos {
	/*border: 1px yellow dashed;*/
	/*display: flex;*/
	max-width: 1366px;
	height: auto;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	/*display: flex;*/

    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    column-gap: 140px;
	
	line-height: 2em;
	/*border: yellow dashed 2px;*/
	/*column-count: 2;
	column-gap: 80px;*/
	/*column-rule-style: dotted;
	column-rule-width: 2px;
	column-rule-color: #033137;*/
	column-width: 50%;
	/*background-color: #15A9A6;*/
}
#conteudo_produtos {
	display: block;
	max-width: 1366px;
	height: auto;
	/*border: thin dashed lightgray;*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 6em;
	padding-left: 0em;
	padding-right: 0em;
}

/* GRID DE PRODUTOS */
#subcategoria {
	width: 90%;
	/*width: max-content;*/
	padding-top:0.5em;
	padding-bottom:0.5em;
	padding-left:0.5em;
	padding-right:0.5em;
	border-radius: 10px 10px 10px 10px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 2em;
	font-size: 24px;
	font-weight: 700;
	font-family: Almarai;
	color: white;
	text-align: center;
}

.azul {
	background-color: #0099cc;
}
.verde {
	background-color: #07565f;
}

.imgprod {
	float: left;
	margin-right: 10px;
	margin-left: 10px;
}

.grid-container {
  max-width: 1366px;
  display: grid;
  row-gap: 50px;
  gap: 50px;
  grid-template-columns: auto auto;

  padding: 20px;
  margin-left: auto;
  margin-right: auto;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px dashed rgba(0, 0, 0, 0.8);
  border-radius: 20px;
  padding: 20px;
  font-size: 18px;
  text-align: left;
}

@media screen and (max-width: 1266px) {
	.grid-container {
      display: block;
      }
     .grid-item {
  	  margin-bottom: 50px;
  }
}

/*Fim GRID PRODUTOS */

.verdeescuro {
	color: #07565f;
	font-weight: 700;
}

.verdeclaro {
	color: #15A9A6;
	font-weight: 700;
}


h4 {
	font-family: "Almarai", sans-serif;
    font-weight: 300;
    font-size: 1.3em;
    font-style: normal;
    line-height: 1.3em;
}


#quimicos {
	display: block;
	max-width: 1366px;
	height: auto;
	/*border: thin dashed lightgray;*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 6em;
	text-align: center;
	justify-content: center;
	padding-left: 20px;
	padding-right: 20px;
}

#soldas {
	display: block;
	max-width: 1366px;
	height: auto;
	/*border: thin dashed lightgray;*/
	margin-left: auto;
	margin-right: auto;
	margin-top: 6em;
	text-align: center;
	justify-content: center;
	padding-left: 20px;
	padding-right: 20px;
}

#prod_principal {
	max-width: 1366px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 100px;
	padding-left: 3em;
	padding-right: 3em;
	/*display: flex;*/
	display: block;
	line-height: 2em;
	/*border: lightgray dashed 2px;*/
	column-count: 3;
	column-gap: 80px;
	column-rule-style: dashed;
	column-rule-width: 1px;
	column-rule-color: lightgray;
	column-width: 33.3%;
}

#hp_titulo {
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 1640px;
	max-height: 640px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 80px;
	/*border: black dashed thin;*/
	padding-left: 2em;
	padding-right: 2em;
}
.hptitulo_rounded {
	width: auto;
	display: -webkit-flex;
	display: flex;
	box-sizing: border-box;
	flex-flow: row wrap;
	border-top: 3px dotted #07565f;
	border-bottom: 3px dotted #07565f;
}

.hp_aplicacoes {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 80px;
	display: inline-block;
	/*border: red solid 2px;*/
	background-color: lightgray;
}

/* Estilo para o Contêiner do Grid */
.gallery {
    display: grid; /* Define o elemento como um grid */
    grid-template-columns: repeat(3, 1fr); /* Cria 3 colunas de largura igual */
    gap: 10px; /* Espaçamento entre as imagens */
    padding: 10px; /* Espaçamento interno do contêiner */
}

/* Estilo para cada Item do Grid (Fotos) */
.gallery img {
    width: 100%; /* Faz com que a imagem ocupe 100% da largura do grid */
    height: auto; /* Mantém a proporção da imagem */
    border-radius: 5px; /* Arredonda os cantos das imagens */
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorção */
}


#logotopo {
	width: 100%;
	height: auto;
	padding: 2.5em;
	background-color: #fff;
	background-image: url(../img/fundo_logotopo.png);
	background-repeat: no-repeat;
	background-position: top right;
	justify-content: center;
	text-align: left;
}

#rodape {
	display: block;
	width: 100%;
	min-height: 300px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	bottom:0;
	/*border: black dashed thin;*/
	padding: 3em;
	column-count: 3;
	column-gap: 40px;
	column-rule-style: dashed;
	column-rule-width: 1px;
	column-rule-color: lightgray;
	column-width: 33.3%;
	text-align: center;
	justify-content: center;
	font-size: 22px;
	/*background-color: #d6f5f5;*/
	background-image: linear-gradient(to top, #0b808e , #04b6ae);
}

.button {
  border-radius: 10px;
  background-color: #15A9A6;
  border: none;
  color: #033137;
  text-align: center;
  font-size: 24px;
  padding: 8px;
  width: 170px;
  transition: all 0.2s;
  cursor: pointer;
  margin: 5px;
}

.button:hover {
	background-color: #033137;
	color: #fff;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;

}

.button span:after {
  content: '\002b';
  font-weight: 700;
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.1s;
  color: #15A9A6;
}

.button:hover span {
  padding-right: 25px;

}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

/*Classes de Colunas*/

.trescols {
	column-count: 3;
	column-gap: 40px;
	column-rule-style: solid;
	column-rule-width: 1px;
	column-rule-color: lightblue;
	column-width: 33.3%;
}

h3 {
	font-family: "Almarai", sans-serif;
    font-weight: 300;
    font-size: 1.5em;
    font-style: normal;
    line-height: 1.7em;
}

h5 {
    font-family: "Almarai", sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    font-style: normal;
}

h2 {
	/*column-span: all;*/
    font-family: "Almarai", sans-serif;
    font-weight: 300;
    font-size: 2em;
    font-style: normal;
}

h1 {
	column-span: all;
    font-family: "Almarai", sans-serif;
    font-weight: 300;
    font-size: 3.5em;
    font-style: normal;
    line-height: 1em;
}

p {
	/*break-inside:column;*/
	break-after:column;
}

/*CENTRALIZAR imagem*/
.centralizado {
	display: flex;
	justify-content: center;
	text-align: center;
}

/* ideal para dividir em colunas de forma rápida e eficaz, o conteúdo*/
.container-grid {
    display: grid; /* Define o elemento como um grid */
    grid-template-columns: 1fr 1fr; /* Cria duas colunas de largura igual */
    column-gap: 20px; /* Espaçamento entre as colunas */
    padding: 20px; /* Espaçamento interno da div */
    margin-left: auto;
    margin-right: auto;
    max-width: 1366px;
}

.container-grid-foto{
    display: grid; /* Define o elemento como um grid */
    grid-template-columns: 1fr 1fr 1fr 1fr; /* Cria 4 colunas de largura igual */
    column-gap: 20px; /* Espaçamento entre as colunas */
    padding: 20px; /* Espaçamento interno da div */
    margin-left: auto;
    margin-right: auto;
    max-width: 1366px;
}

.diferenciais {
	max-width: 1266px;
	margin-right: auto;
	margin-left: auto;
    display: grid; /* Define o elemento como um grid */
    grid-template-columns: 1fr 1fr; /* Cria duas colunas de largura igual */
    column-gap: 20px; /* Espaçamento entre as colunas */
    padding: 20px; /* Espaçamento interno da div */
    border-top: dashed 1px #15A9A6;
}

.naocentralizado {
	display: flex;
    justify-content: center;
    align-items: left;
}

.borda_topo {
	border-top: 3px solid #089981;
	border-top-right-radius: 3em;
	border-top-left-radius: 3em;
	background-color: white; /* For browsers that do not support gradients */
    background-image: linear-gradient(#cefdf5, white);

}

.responsive {
  width: 100%;
  height: auto;
}
.responsive11 {
  width: 12.05%;
  height: auto;
}

.responsa {
  width:100%;
  display: flex;
  height: auto;
  float: left;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

#fotos_ap {
	position:relative;
	width:25%;
	float:left;
	margin:0;
}

.box {
	width: 750px;
	height: 250px;
	background-color: white;
	border-radius: 20px;
	text-align: center;
	padding: 20px;
}

#boxbanner {
	width: 750px;
	height: 250px;
	background-color: white;
	border-radius: 20px;
	text-align: center;
	padding: 15px;
	top: 550px;
	right: 150px;
	z-index: 999;
	position: absolute;
}


/*NAVEGAÇÃO
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 22px;
  font-family: "Almarai", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 2em;
  transition: 0.3s;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
  transition: 0.3s;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
*/

@media screen and (max-width: 768px) {

body {
	font-size: 20px;
}

#logotopo {
	width: 100%;
	height: auto;
	padding: 2.0em;
	background-color: #fff;
	background-image: url(../img/fundo_logotopo.png);
	background-repeat: no-repeat;
	background-position: top right;
	justify-content: center;
	text-align: center;
}

.logotipo {
	width: auto;
	height: auto;
}

.gallery {
    display: grid; /* Define o elemento como um grid */
    grid-template-columns: 1fr; /* Cria 3 colunas de largura igual */
    gap: 10px; /* Espaçamento entre as imagens */
    padding: 10px; /* Espaçamento interno do contêiner */
}


@media screen and (max-width: 1266px) {

#logotopo {
	max-width: 90%;
	height: auto;
	padding: 2.0em;
	background-color: #fff;
	background-image: url(../img/fundo_logotopo.png);
	background-repeat: no-repeat;
	background-position: top right;
	justify-content: center;
	text-align: center;
}

.imgprod {
	float: none;
	align-items: center;
	margin-right: 10px;
	margin-left: 10px;
}
.imagem {
	margin: 2em;
	float: none;
}
.section_colunas {
	display: flex;
	column-count: 1;
	column-gap: 80px;
	column-rule-style: dashed;
	column-rule-width: 1px;
	column-rule-color: lightgray;
	column-width: 50%;
	font-size: 24px;
}

#banner {
	display: block;
	/*max-width: 1640px;
	max-height: 640px;*/
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	/*border: black dashed thin;*/
}

#hp_principal {
	display: flex;
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	line-height: 2em;
	/*border: lightgray dashed 2px;*/
	column-count: auto;
	display: block;
}

#hp_produtos {
	display: block;
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	align-items: center;
	justify-content: center;
	/*display: flex;*/
	line-height: 2em;
	/*border: lightgray dashed 2px;*/
	column-count: auto;
	border-radius: solid 1px red;
}
.respsocial {
	max-width: 1266px
	display: block;
	width: 100%;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	padding-left: 3em;
	padding-right: 6em;
	/*border-top: dashed 1px #15A9A6;*/
	text-align: center;
	/*border-bottom: solid 1px #15A9A6;*/
	/*border: red dashed thin;*/
	/*column-count: 2;
	column-gap: 80px;
	column-rule-style: dashed;
	column-rule-width: 1px;
	column-rule-color: #15A9A6;*/
}

.diferenciais {
	display: block; /* Define o elemento como um grid */
	width: 100%;
	margin-right: auto;
	margin-left: auto;
    padding: 3em; /* Espaçamento interno da div */
    border-top: dashed 1px #15A9A6;
}

.valores {
    display: grid; /* Define o elemento como um grid */
    grid-template-columns: 1fr 1fr; /* Cria duas colunas de largura igual */
    column-gap: 20px; /* Espaçamento entre as colunas */
    padding: 20px; /* Espaçamento interno da div */

}

.nossosprodutos {
	padding-left: 2em;
	padding-right: 2em;
	justify-content: center;
}

.reducao {
	width:60%;
}
#rodape {
	display: block;
	width: 100%
	height: auto;
	column-count: auto;
	border-radius: solid 1px red;
	border-radius: solid 1px red;
}


h3 {
	font-family: "Almarai", sans-serif;
    font-weight: 300;
    font-size: 1.5em;
    font-style: normal;
}

h2 {
	/*column-span: all;*/
    font-family: "Almarai", sans-serif;
    font-weight: 300;
    font-size: 1.5em;
    font-style: normal;
}

h1 {
	column-span: all;
    font-family: "Almarai", sans-serif;
    font-weight: 300;
    font-size: 2.5em;
    font-style: normal;
    line-height: 1em;

p {
	/*break-inside:column;*/
	break-after: avoid;
}

/* FIM NAVEGACAO */


/* IMAGENS DE FUNDO */

.kenburns-top-right {
	-webkit-animation: kenburns-top-right 5s ease-out both;
	        animation: kenburns-top-right 5s ease-out both;
}

/**
 * ----------------------------------------
 * animation kenburns-top-right
 * ----------------------------------------
 */
@-webkit-keyframes kenburns-top-right {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 16%;
            transform-origin: 84% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(20px, -15px);
            transform: scale(1.25) translate(20px, -15px);
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
}
@keyframes kenburns-top-right {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 16%;
            transform-origin: 84% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(20px, -15px);
            transform: scale(1.25) translate(20px, -15px);
    -webkit-transform-origin: right top;
            transform-origin: right top;
  }
}

/* FIM IMAGENS DE FUNDO */


.colunas {
	column-width:auto;	
	column-count:1;
	column-gap:2em;
	break-after:left;
	padding-bottom:20px;
	padding-top:20px;
  }

.rodape {
	background-image:url(../img/fundo_rodape.jpg);
	background-position:center top;
	background-repeat:no-repeat;
	background-size:100%;
	background-color:#5A2007;
	column-count:1;
	width:100%;
	height:400px;
	padding-left:30px;
	padding-right:30px;
	padding-bottom:30px;
	font-family:'almarai-regular', sans-serif;
	font-size:22px;
	font-weight:200;
	line-height:32px;
}

/*fonts*/

.almarai-light {
  font-family: "Almarai", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.almarai-regular {
  font-family: "Almarai", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.almarai-bold {
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.almarai-extrabold {
  font-family: "Almarai", sans-serif;
  font-weight: 800;
  font-style: normal;
}