Na verdade, o parágrafo mantem a fonte da mesma forma que o nav mantem a fonte também, o tamanho da tua fonte não é alterado com base na resolução da tela.
Se você quer que o texto presidente seja redimensionado com o texto que existe dentro do "Qualidade e Elegância", você precisa que o texto esteja inserido dentro da imagem.
Adicione o texto na imagem e retira esse parágrafo, vai resolver teu problema e o parágrafo nunca vai ficar fora da imagem.
Você deve ter separado o texto da imagem buscando o efeito do hover que percebi no teu site, para conseguir isso tu precisa utilizar de duas imagens, e ao invez de mudar as propriedades do parágrafo no :hover, troque a imagem para a outra, como por exemplo:
div {
background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Fonte: http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghoverhttps://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover
PS.: Você também pode adicionar uma transação para suavizar o efeito.