.elementor-5871 .elementor-element.elementor-element-4b3924f{padding:100px 0px 0px 0px;}.elementor-5871 .elementor-element.elementor-element-702d4d2:not(.elementor-motion-effects-element-type-background), .elementor-5871 .elementor-element.elementor-element-702d4d2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#eeeeee;}.elementor-5871 .elementor-element.elementor-element-702d4d2{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:100px 0px 100px 0px;}.elementor-5871 .elementor-element.elementor-element-702d4d2 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-5871 .elementor-element.elementor-element-5821b35d{text-align:center;}.elementor-5871 .elementor-element.elementor-element-5821b35d .elementor-heading-title{font-size:60px;color:#000000;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2{--grid-row-gap:35px;--grid-column-gap:30px;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 > .elementor-widget-container{margin:35px 0px 0px 0px;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 1 * 100% );}.elementor-5871 .elementor-element.elementor-element-5b2d72c2:after{content:"1";}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-post__thumbnail__link{width:100%;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:20px;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:20px;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:20px;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-post__title, .elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-post__title a{color:#000000;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-post__excerpt p{color:#000000;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-post__read-more{color:#00ce1b;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-pagination{text-align:center;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-pagination .page-numbers:not(.dots){color:#000000;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-pagination a.page-numbers:hover{color:#00ce1b;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-pagination .page-numbers.current{color:#00ce1b;}body:not(.rtl) .elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}@media(max-width:1024px){.elementor-5871 .elementor-element.elementor-element-702d4d2{padding:100px 25px 100px 25px;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-post__thumbnail__link{width:100%;}}@media(max-width:767px){.elementor-5871 .elementor-element.elementor-element-702d4d2{padding:50px 15px 50px 15px;}.elementor-5871 .elementor-element.elementor-element-5821b35d .elementor-heading-title{font-size:45px;}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-5871 .elementor-element.elementor-element-5b2d72c2:after{content:"0.5";}.elementor-5871 .elementor-element.elementor-element-5b2d72c2 .elementor-post__thumbnail__link{width:100%;}}/* Start custom CSS for section, class: .elementor-element-4b3924f */.post-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
  padding-bottom: 20px;
}

.post-card:hover {
  transform: translateY(-5px);
}

.post-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #002b5c;
  margin: 20px 0 10px;
  padding-left: 25px;
  position: relative;
}

.post-title::before {
  content: "\f15c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: #c9a43d;
}

.post-excerpt {
  font-size: 0.95rem;
  color: #666666;
  margin-bottom: 15px;
  line-height: 1.5;
  padding-left: 25px;
  position: relative;
}

.post-excerpt::before {
  content: "\f3cd";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: #c9a43d;
}

.read-more {
  display: inline-block;
  padding: 8px 16px;
  background-color: #c9a43d;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  font-size: 0.9rem;
  transition: background-color 0.3s ease;
  position: relative;
  padding-left: 30px;
}

.read-more::before {
  content: "\f080";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 10px;
  top: 8px;
  color: white;
}

.read-more:hover {
  background-color: #b38e2f;
}/* End custom CSS */
/* Start custom CSS */<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Grid de Posts</title>
  <style>
    body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #f9f9f9;
      margin: 0;
      padding: 20px;
    }
    .post-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 30px;
      max-width: 1200px;
      margin: auto;
    }
    .post-card {
      background: #ffffff;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      transition: transform 0.3s ease;
    }
    .post-card:hover {
      transform: translateY(-5px);
    }
    .post-card img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    .post-content {
      padding: 20px;
    }
    .post-title {
      font-size: 1.2rem;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 10px;
    }
    .post-excerpt {
      font-size: 0.95rem;
      color: #555;
      margin-bottom: 15px;
      line-height: 1.5;
    }
    .read-more {
      display: inline-block;
      padding: 8px 16px;
      background-color: #0073e6;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-size: 0.9rem;
      transition: background-color 0.3s ease;
    }
    .read-more:hover {
      background-color: #005bb5;
    }
  </style>
</head>
<body>
  <div class="post-grid">
    <div class="post-card">
      <img src="https://via.placeholder.com/400x200.png?text=Nota+Fiscal+F%C3%A1cil" alt="Imagem do post 1">
      <div class="post-content">
        <div class="post-title">Nota Fiscal Fácil: o que muda para o MEI com a Reforma Tributária</div>
        <div class="post-excerpt">Entenda como a nova legislação simplifica a emissão de notas fiscais para pequenos empreendedores. Saiba o que muda a partir de setembro de 2024.</div>
        <a href="#" class="read-more">Leia mais</a>
      </div>
    </div>
    <div class="post-card">
      <img src="https://via.placeholder.com/400x200.png?text=CFOP+e+CRT+para+MEI" alt="Imagem do post 2">
      <div class="post-content">
        <div class="post-title">CFOP e CRT 4: como o MEI deve se preparar</div>
        <div class="post-excerpt">A obrigatoriedade do uso do CRT 4 e dos CFOPs específicos para MEI começa em setembro de 2024. Veja como se adequar às novas exigências fiscais.</div>
        <a href="#" class="read-more">Leia mais</a>
      </div>
    </div>
    <div class="post-card">
      <img src="https://via.placeholder.com/400x200.png?text=App+NFF+para+MEI" alt="Imagem do post 3">
      <div class="post-content">
        <div class="post-title">Como usar o aplicativo Nota Fiscal Fácil</div>
        <div class="post-excerpt">Aprenda a emitir notas fiscais pelo celular, sem certificado digital, usando o app NFF. Um passo a passo para MEIs e pequenos empreendedores.</div>
        <a href="#" class="read-more">Leia mais</a>
      </div>
    </div>
  </div>
</body>
</html>


criando menus categorias


.filter-menu {
  text-align: center;
  margin-bottom: 20px;
}

.filtro-categoria {
  background-color: #c9a43d;
  color: white;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 5px;
  font-size: 1rem;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.filtro-categoria:hover {
  background-color: #b38e2f;
}

.filtro-categoria i {
  margin-right: 8px;
}



.filtro-categoria.ativo {
  background-color: #002b5c;
  color: white;
  font-weight: bold;
}/* End custom CSS */