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-imghover

PS.: Você também pode adicionar uma transação para suavizar o efeito.