.elementor-5556 .elementor-element.elementor-element-1e8b5fb{padding:100px 0px 0px 0px;}.elementor-5556 .elementor-element.elementor-element-7131efd{text-align:center;}.elementor-5556 .elementor-element.elementor-element-7131efd .elementor-heading-title{font-size:29px;font-weight:600;line-height:30px;letter-spacing:1.2px;word-spacing:20px;color:#0073AA;}.elementor-5556 .elementor-element.elementor-element-98ef8e6{--grid-columns:3;}.elementor-5556 .elementor-element.elementor-element-98ef8e6 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-5556 .elementor-element.elementor-element-98ef8e6 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-5556 .elementor-element.elementor-element-98ef8e6 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-5556 .elementor-element.elementor-element-98ef8e6 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-5556 .elementor-element.elementor-element-98ef8e6 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}.elementor-5556 .elementor-element.elementor-element-444e2046:not(.elementor-motion-effects-element-type-background), .elementor-5556 .elementor-element.elementor-element-444e2046 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#132631;}.elementor-5556 .elementor-element.elementor-element-444e2046{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-5556 .elementor-element.elementor-element-444e2046 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-5556 .elementor-element.elementor-element-3318b4c7{--spacer-size:50px;}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-repeater-item-df60050.elementor-social-icon{background-color:var( --e-global-color-387a55d1 );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-repeater-item-df60050.elementor-social-icon i{color:var( --e-global-color-1af0797a );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-repeater-item-df60050.elementor-social-icon svg{fill:var( --e-global-color-1af0797a );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-repeater-item-0941144.elementor-social-icon{background-color:var( --e-global-color-387a55d1 );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-repeater-item-0941144.elementor-social-icon i{color:var( --e-global-color-1af0797a );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-repeater-item-0941144.elementor-social-icon svg{fill:var( --e-global-color-1af0797a );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-repeater-item-d5810a4.elementor-social-icon{background-color:var( --e-global-color-387a55d1 );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-repeater-item-d5810a4.elementor-social-icon i{color:var( --e-global-color-1af0797a );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-repeater-item-d5810a4.elementor-social-icon svg{fill:var( --e-global-color-1af0797a );}.elementor-5556 .elementor-element.elementor-global-5331{--grid-template-columns:repeat(0, auto);--icon-size:15px;--grid-column-gap:15px;}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-widget-container{text-align:center;}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-social-icon{background-color:var( --e-global-color-387a55d1 );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-social-icon i{color:var( --e-global-color-1af0797a );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-social-icon svg{fill:var( --e-global-color-1af0797a );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-social-icon:hover{background-color:#868686;}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-social-icon:hover i{color:var( --e-global-color-1af0797a );}.elementor-5556 .elementor-element.elementor-global-5331 .elementor-social-icon:hover svg{fill:var( --e-global-color-1af0797a );}.elementor-5556 .elementor-element.elementor-element-5326ddf2{color:#ffffff;}.elementor-5556 .elementor-element.elementor-element-56aba746{color:#ffffff;}@media(max-width:1024px){.elementor-5556 .elementor-element.elementor-element-98ef8e6{--grid-columns:2;}}@media(max-width:767px){.elementor-5556 .elementor-element.elementor-element-98ef8e6{--grid-columns:1;}}/* Start custom CSS for section, class: .elementor-element-1e8b5fb */.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 for section, class: .elementor-element-34fcbf7 *//* Font Awesome CDN (to be included in the <head> of your site) */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* Grid container */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
  font-family: 'Segoe UI', sans-serif;
}

/* Individual post card */
.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 image */
.post-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Post content */
.post-content {
  padding: 20px;
  position: relative;
}

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

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

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

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

/* Read more button with chart icon */
.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 Awesome chart-bar icon */
  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 */