.elementor-kit-1399{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-1399 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Serviços do Cartório</title>

  <!-- Fontes e Ícones -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.4.0/css/all.css" crossorigin="anonymous" />

  <style>
    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #f5f7fb;
      margin: 0;
      padding: 0;
      overflow-x: hidden;
    }

    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
      padding: 40px 20px;
    }

    .servico-card-pequeno {
      width: 260px;
      height: 280px; /* altura fixa para todos os cards */
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
      padding: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all 0.3s ease;
      border: 1px solid #e6eaf0;
      overflow: hidden; /* impede que conteúdo estoure o tamanho */
    }

    .servico-card-pequeno:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
    }

    .icone-e-numero {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .icone-e-numero i {
      font-size: 28px;
      color: #f4c037;
    }

    .icone-e-numero .numero {
      font-size: 22px;
      color: #dee1e6;
      font-weight: 600;
    }

    .titulo-servico {
      font-size: 16px;
      font-weight: 600;
      margin-top: 12px;
      margin-bottom: 6px;
      color: #1e293b;
    }

    .lista-servico {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .lista-servico li {
      color: #475569;
      font-size: 14px;
      margin: 4px 0;
      position: relative;
      padding-left: 18px;
    }

    .lista-servico li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: #22c55e;
      font-weight: bold;
    }

    @media (max-width: 768px) {
      .container {
        flex-direction: column;
        align-items: center;
        padding: 20px;
      }

      .servico-card-pequeno {
        width: 90%;
        max-width: 320px;
      }
    }
  </style>
</head>

<body>
  <div class="container">

    <!-- Card 1 -->
    <div class="servico-card-pequeno">
      <div class="icone-e-numero">
        <i class="fa-solid fa-file-contract"></i>
        <div class="numero">01</div>
      </div>
      <div class="titulo-servico">+ de 40 mil escrituras</div>
      <ul class="lista-servico">
        <li>Escrituras públicas lavradas</li>
        <li>Segurança jurídica garantida</li>
      </ul>
    </div>

    <!-- Card 2 -->
    <div class="servico-card-pequeno">
      <div class="icone-e-numero">
        <i class="fa-solid fa-landmark"></i>
        <div class="numero">02</div>
      </div>
      <div class="titulo-servico">+ de 80 anos de história</div>
      <ul class="lista-servico">
        <li>Tradição e confiança</li>
        <li>Décadas de serviço à comunidade</li>
      </ul>
    </div>

    <!-- Card 3 -->
    <div class="servico-card-pequeno">
      <div class="icone-e-numero">
        <i class="fa-solid fa-pen-to-square"></i>
        <div class="numero">03</div>
      </div>
      <div class="titulo-servico">+ de 100 mil reconhecimentos</div>
      <ul class="lista-servico">
        <li>Firmas reconhecidas com precisão</li>
        <li>Agilidade e segurança no atendimento</li>
      </ul>
    </div>

    <!-- Card 4 -->
    <div class="servico-card-pequeno">
      <div class="icone-e-numero">
        <i class="fa-solid fa-user-check"></i>
        <div class="numero">04</div>
      </div>
      <div class="titulo-servico">+ de 10 mil firmas abertas</div>
      <ul class="lista-servico">
        <li>Cadastro atualizado de assinaturas</li>
        <li>Processo simples e seguro</li>
      </ul>
    </div>

  </div>
</body>
</html>/* End custom CSS */