@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');
@import url('https://fonts.googleapis.com/css?family=Anton');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

/* CSS Document */
*{margin:0px; padding:0px; font-family:"Open Sans", sans-serif;}
a{text-decoration:none; color:#535353;}
img{border:0;}
ul{ list-style:none;}
.clear{clear:both;}
.center{text-align:center;}
.left{text-align:left;}
.right{text-align:right;}
.justify{text-align:justify;}
.no-padding{padding:0px;}
.float-left{float:left !important;}
.float-right{float:right !important;}

.radius{border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px;}
.transition{transition:all 0.5s; -moz-transition:all 0.5s; -ms-transition:all 0.5s; -o-transition:all 0.5s; -webkit-transition:all 0.5s;}
.gotop{width:50px; height:50px; position:fixed; bottom:0px; right:0px; font-size:20px; background:#242424; color:#fff; text-align:center; border:0; display:none;}

body{min-width:980px; max-width:100%; overflow-x:hidden; overflow-y:scroll; background:url(../imagens/bg_body.jpg) left top repeat;}
html, body {width:100%; height:100%; font-size:14px; font-weight:400;}

#anchor{width:1px; height:1px; position:absolute; z-index:-999; left:0px; bottom:0px;}
.anchor{width:1px; height:1px; position:absolute; z-index:-999; left:0px; top:-70px;}

.border_shadow{box-shadow:0px 0px 10px #ddd; -moz-box-shadow:0px 0px 10px #ddd; -ms-box-shadow:0px 0px 10px #ddd; -o-box-shadow:0px 0px 10px #ddd; -webkit-box-shadow:0px 0px 10px #ddd; background:#F8F8F8;}

.bg_top{width:100%; height:auto; position:relative; float:left; z-index:9; background:#fff;}
.bg_menu{width:100%; height:auto; position:relative; float:left; z-index:9; background:#00a335;}
.bg_banner{width:100%; height:auto; position:relative; float:left; z-index:0;}
.bg_conteudo{width:100%; height:auto; position:relative; float:left; z-index:0; padding: 50px 0;}
.bg_rodape{width:100%; height:auto; position:relative; float:left; z-index:0; background: #1fa231;}
.direitos{width:100%; height:auto; position:relative; float:left; z-index:0; background:#fff; padding:5px 0; font-size:12px; color:#535353; font-weight:600;}
.direitos a{color:#900;}

.bg_faixa .centralizar, .bg_rodape .centralizar, .direitos .centralizar{ background:none;}

.centralizar{width:1200px; height:auto; position:relative; left:50%; margin:0 0 0 -600px;}

/*Botão WhatsApp*/
.bt-whats { font-size: 1rem; margin-top: 10px; padding: 10px; position:fixed; right:15px; bottom:60px; width:auto; height: auto; background:#01b763; color:#fff; text-align:center; line-height:2.6; font-weight:500; z-index: 9999999999; font: 13px Helvetica,Arial,sans-serif; text-decoration: none; border-radius: 10px;}

/* Efeito Pulsar Botão WhatsApp */
.efeitoPulse { ursor: pointer; box-shadow: 0 0 0 rgba(1,183,99, 0.4); animation: pulse 1s infinite;}
.efeitoPulse:hover { animation: none; }

@-webkit-keyframes pulse {
  0% { -webkit-box-shadow: 0 0 0 0 rgba(1,183,99, 0.4); }
  70% { -webkit-box-shadow: 0 0 0 10px rgba(1,183,99, 0);}
  100% { -webkit-box-shadow: 0 0 0 0 rgba(1,183,99, 0); }
}
@keyframes pulse {
  0% { -moz-box-shadow: 0 0 0 0 rgba(1,83,99, 0.4); box-shadow: 0 0 0 0 rgba(1,83,99, 0.4);}
  70% { -moz-box-shadow: 0 0 0 10px rgba(1,83,99, 0); box-shadow: 0 0 0 10px rgba(1,83,99, 0);}
  100% { -moz-box-shadow: 0 0 0 0 rgba(1,83,99, 0); box-shadow: 0 0 0 0 rgba(1,83,99, 0);}
}

/*TOPO*/
.logo{width:360px; height:80px; position:relative; float: left; margin:10px 0;}
.logo img{max-width:100%; height: auto; display: block;}

.telefones, .whatsapp, .carrinho{position:relative; float: right; margin:20px 0 0 40px;}
.telefones i{position:relative; float: left; color: #00a335; font-size:30px; padding:10px;}
.telefones span{position:relative; float: left; color: #6cb024; font-size:18px;}
.telefones span b{color: #000;}

.whatsapp{background:#00a335; color:#fff; padding:5px 20px;}
.whatsapp span{color: #fff; font-size:14px; font-weight:300;}


/*CONTEUDO*/
.col1, .col2, .col3, .col4, .col6, .col12{position:relative; float:left;}

.col1{width:100%;}

.col2{width:49%; margin-left:2%;}
.col2:nth-child(2n+1){margin-left:0;}

.col3{width:32%; margin-left:2%; margin-bottom:2%;}
.col3:nth-child(3n+1){margin-left:0;}

.col4{width:21.5%; margin-left:2%; padding:1%;}
.col4:nth-child(4n+1){margin-left:0;}

.conteudo{width:100%; height:auto; position:relative; float:left;}
.conteudo .img{width: 100%; height: auto; display: block;}

.banner h2{font-size: 36px; color: #00a335; margin: 20px 0;}
.banner p{font-size: 20px; color: #242424; margin: 20px 0;}

.saibamais{width: auto; display: inline-block; background: #00a335; color: #fff; border-radius: 10px; padding: 20px; margin: 40px 0 0 0;}

.upper{text-transform: uppercase;}

.color1{color:#00a335;}
.color2{color:#242424;}
.color3{color:#fff;}

.text h2{font-size:24px; font-weight: bold; margin: 0 0 20px 0;}
.text h3{font-size:20px; font-weight: 600; margin: 20px 0 0 0;}
.text p{font-size:16px; font-weight:normal; margin: 20px 0 0 0;}
.text p strong{font-weight:bold;}
.line-height{line-height:28px;}

.container {
	display: flex;
	flex-wrap: wrap; /* Permite que as divs passem para a próxima linha */
	width: 100%; /* ou um valor fixo, se desejar */
}

.home{
	flex: 1 0 0; /* Cada item ocupa espaço igual e não encolhe */
	min-width: 0; /* Previne quebra de layout por conteúdo grande */
	display: inline-block;
	background: #fff;
	box-sizing: border-box;
	padding: 20px;
	margin: 20px;
}

.home i{ 
	padding: 30px 0;
}

.home:hover{
	box-shadow: 0px 0px 5px #00a335;
}

.container li{
width: 29.33%;
display: grid;
gap: 10px;
box-sizing: border-box;
padding: 10px;
margin: 2%;
background: #fff;
}

/*RODAPE*/
.bg_rodape ul{padding-top:20px; padding-bottom:40px;}
.bg_rodape ul li{width:100%; display:block; color:#fff; font-size: 13px;}
.bg_rodape ul li a{ color:#fff; font-size: 13px;}
.bg_rodape ul li a i{ font-size: 16px;}

/*TABLET*/
@media only screen and (max-width:995px) {
.bg_menu{padding:10px 0;}
.bt_menu, .bt_cmenu{display:block;}
.menu{width:100%; height:100%; position:fixed; top:0; left:-100%; background:#eee; overflow:scroll; z-index:9999; box-sizing:border-box;}
.menu li{width:100%; height:auto; box-sizing:border-box;}
.menu li a {width:100%; text-align:center; border-bottom-width: 1px; border-bottom-color:rgba(255,255,255,0.3); border-bottom-style: solid; box-sizing:border-box; padding:0px 10px; box-sizing:border-box; color:#00a335;}

.menu li ul{width:100%; height:auto; position:relative; float:left; top:0; left:0; background:#02601d; display:block;}
.menu li ul li a{color:#fff;}

.fm_busca{width:100%; box-sizing:border-box; padding:0 20px;}
.in_busca{width:60%;}
.bt_busca{width:40px; float:right;}

.titulo_lateral, .menu_lateral{display:none;}
.titulo_conteudo, .conteudo{width:100%; box-sizing:border-box; padding:10px;}
}

@media only screen and (min-width: 768px) and (max-width: 995px) {
body{min-width:768px;}
.centralizar{width:768px; margin:0 0 0 -384px;}

.logo{margin:10px 204px;}
.divisor{width:50%; height:auto; position:relative; float:left;}
.telefones, .whatsapp, .carrinho{width:48%; height:50px; padding:5px 10px; box-sizing:border-box; margin:10px 1%;}
.telefones i{ font-size:24px;}
.telefones span{font-size:16px;}
.carrinho{font-size:24px;}
}

/*MOBILE PAISAGEM*/
@media only screen and (max-width: 767px){
.col2, .col3, .col4, .col6, .col12{width:96%; margin:2% !important;}

.divisor{width:100%; height:auto; position:relative; float:left;}
.telefones, .whatsapp, .carrinho{width:48%; height:50px; padding:5px 10px; box-sizing:border-box; margin:10px 1%;}
.telefones i{ font-size:16px; padding:10px 5px;}
.telefones span{font-size:12px;}

.home{
	flex: auto;
	min-width: 100%;
	display: block;
	padding: 20px;
	margin: 20px 0;
}
.container li{
width: 100%;
display: block;
gap: 0px;
margin: 2% 0;
}
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
body{min-width:480px;}
.centralizar{width:480px; margin:0 0 0 -240px;}

.logo{margin:10px 60px;}

.bt_prod{width:420px;}
}
/*MOBILE RETRATO*/
@media only screen and (max-width: 479px) {
body{min-width:320px;}
.centralizar{width:320px; margin:0 0 0 -160px;}

.logo{width:300px; height:auto; margin:10px;}

.bt_prod{width:260px;}
}