/* Tira as margens e os espaços padrões que o navegador coloca em tudo */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Faz com que o tamanho do elemento leve em conta as bordas e o padding */
  }
  
  /* Estilo geral do corpo da página */
  body {
    font-family: Arial, sans-serif; /* Fonte que vamos usar no site */
    background-color: #ffffff;     /* Fundo branco */
    color: #000000;                /* Letras pretas */
    padding: 20px;                 /* Um espacinho dentro da página */
  }
  
  /* Cabeçalho (topo da página) */
  header {
    text-align: center;            /* Centraliza o texto do topo */
    margin-bottom: 30px;          /* Dá um espaço depois do cabeçalho */
  }
  
  /* Título principal do site */
  header h1 {
    font-size: 2rem;               /* Tamanho da fonte do título */
    color: #1a1a1a;                /* Cor escura pro título */
  }
  
  /* Parte que segura todos os cards */
  .card-container {
    display: flex;                 /* Coloca os cards lado a lado */
    gap: 20px;                     /* Espaço entre eles */
    justify-content: center;      /* Centraliza os cards na tela */
    flex-wrap: wrap;              /* Em telas pequenas, os cards quebram pra baixo */
  }
  
  /* Estilo de cada card */
  .card {
    background-color: #ffffff;    /* Fundo branco do card */
    padding: 20px;                /* Espaço interno no card */
    border-radius: 12px;          /* Cantinhos arredondados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra pra dar destaque */
    flex: 1 1 300px;              /* O card cresce, mas nunca fica menor que 300px */
    max-width: 500px;             /* Mas também não passa de 500px */
  }
  
  /* Título dentro do card */
  .card h2 {
    font-size: 1.5rem;            /* Tamanho da fonte do subtítulo */
    margin-bottom: 10px;         /* Espaço depois do título */
    color: #000000;               /* Cor preta */
  }
  
  /* Texto dentro do card */
  .card p {
    font-size: 1rem;              /* Tamanho normal do texto */
    line-height: 1.6;             /* Deixa as linhas com mais espaço pra facilitar a leitura */
  }
  
  /* Estilo das imagens nos cards */
  .card img {
    width: 100%;                  /* A imagem ocupa toda a largura do card */
    height
  }