/* =====================================
   RESET
===================================== */


*{

box-sizing:border-box;

margin:0;

padding:0;

}



body{


font-family:'Poppins',Arial,sans-serif;


background:

linear-gradient(

135deg,

#032b16,

#008f45

);



color:white;


min-height:100vh;


}







/* =====================================
HEADER
===================================== */


.header{


height:80px;


position:fixed;


top:0;


left:0;


right:0;


z-index:1000;


display:flex;


align-items:center;


justify-content:space-between;


padding:0 25px;


background:

rgba(0,0,0,.25);



backdrop-filter:blur(15px);


}




.logo{


display:flex;


align-items:center;


gap:12px;


color:white;


}



.logo img{


width:50px;


height:50px;


border-radius:50%;


object-fit:cover;


}



.logo h1{


font-size:20px;


}



.logo p{


font-size:12px;


opacity:.8;


}




.menu-btn{


width:45px;


height:45px;


border:0;


border-radius:12px;


background:#00e676;


color:white;


font-size:22px;


cursor:pointer;


}







/* =====================================
MENU LATERAL
===================================== */


.menu{


position:fixed;


top:0;


left:-300px;


width:280px;


height:100vh;


background:#063b20;


z-index:2000;


padding:25px;


transition:.3s;


}



.menu.aberto{


left:0;


}




.menu-header{


display:flex;


justify-content:space-between;


align-items:center;


margin-bottom:30px;


}



.menu-header button{


background:none;


border:0;


color:white;


font-size:25px;


}





.menu a{


display:flex;


align-items:center;


gap:15px;


padding:15px;


margin-bottom:8px;


border-radius:12px;


color:white;


text-decoration:none;


transition:.3s;


}




.menu a:hover,


.menu a.ativo{


background:#00e676;


}








/* =====================================
OVERLAY
===================================== */


#overlay{


position:fixed;


inset:0;


background:rgba(0,0,0,.6);


display:none;


z-index:1500;


}



#overlay.mostrar{


display:block;


}









/* =====================================
CONTEÚDO
===================================== */


main{


padding-top:100px;


}



.hero{


text-align:center;


padding:50px 20px;


}



.hero h2{


font-size:38px;


margin-bottom:15px;


}



.hero p{


opacity:.9;


}









/* =====================================
FILTROS
===================================== */


.filtros{


display:flex;


justify-content:center;


flex-wrap:wrap;


gap:15px;


padding:20px;


}



.filtro{


border:0;


padding:12px 25px;


border-radius:30px;


background:rgba(255,255,255,.15);


color:white;


cursor:pointer;


font-weight:bold;


transition:.3s;


}




.filtro:hover,


.filtro.ativo{


background:#00e676;


}









/* =====================================
CARDS
===================================== */


.categorias-grid{


max-width:1200px;


margin:40px auto;


padding:20px;


display:grid;


grid-template-columns:repeat(4,1fr);


gap:25px;


}



.categoria-card{


background:

rgba(255,255,255,.12);


border:

1px solid rgba(255,255,255,.25);


border-radius:25px;


padding:30px;


text-align:center;


backdrop-filter:blur(10px);


transition:.3s;


}



.categoria-card:hover{


transform:translateY(-10px);


background:

rgba(255,255,255,.22);


}



.categoria-card i{


font-size:40px;


color:#00e676;


margin-bottom:20px;


}



.categoria-card h3{


font-size:22px;


margin-bottom:10px;


}



.categoria-card p{


opacity:.85;


}









/* =====================================
ESTATÍSTICAS
===================================== */


.estatisticas{


max-width:1200px;


margin:50px auto;


padding:20px;


display:grid;


grid-template-columns:repeat(4,1fr);


gap:20px;


}



.estatistica{


background:white;


color:#087a3c;


border-radius:20px;


padding:30px;


text-align:center;


}



.estatistica strong{


display:block;


font-size:35px;


}



.estatistica span{


font-weight:bold;


}








/* =====================================
NEWSLETTER
===================================== */


.newsletter{


max-width:900px;


margin:50px auto;


padding:40px;


text-align:center;


background:

rgba(255,255,255,.12);


border-radius:25px;


}



.newsletter h2{


margin-bottom:15px;


}



.newsletter-form{


margin-top:25px;


display:flex;


justify-content:center;


gap:15px;


}



.newsletter input{


padding:15px 20px;


border-radius:30px;


border:0;


width:350px;


}



.newsletter button{


border:0;


border-radius:30px;


padding:15px 30px;


background:#00e676;


color:white;


font-weight:bold;


cursor:pointer;


}









/* =====================================
FOOTER
===================================== */


footer{


margin-top:60px;


padding:40px 20px;


background:

rgba(0,0,0,.25);


text-align:center;


}



.footer-links{


display:flex;


justify-content:center;


gap:25px;


margin:25px 0;


}



.footer-links a{


color:white;


text-decoration:none;


}



.footer-social a{


color:#00e676;


font-size:25px;


margin:10px;


}



.copyright{


margin-top:25px;


opacity:.7;


}









/* =====================================
BOTÃO TOPO
===================================== */


.topo-btn{


position:fixed;


right:25px;


bottom:25px;


width:50px;


height:50px;


border:0;


border-radius:50%;


background:#00e676;


color:white;


font-size:20px;


cursor:pointer;


opacity:0;


pointer-events:none;


transition:.3s;


}



.topo-btn.mostrar{


opacity:1;


pointer-events:auto;


}









/* =====================================
RESPONSIVO
===================================== */


@media(max-width:900px){


.categorias-grid{


grid-template-columns:repeat(2,1fr);


}



.estatisticas{


grid-template-columns:repeat(2,1fr);


}


}






@media(max-width:600px){


.logo h1{


font-size:16px;


}



.hero h2{


font-size:28px;


}




.categorias-grid{


grid-template-columns:1fr;


}



.estatisticas{


grid-template-columns:1fr;


}




.newsletter-form{


flex-direction:column;


}



.newsletter input,


.newsletter button{


width:100%;


}



.footer-links{


flex-direction:column;


}



}