Алексей

Если совсем немного подправить песочницу из вопроса, то можно сделать как-то так:



Но, в целом реализация модальных окон это не пара строчек кода, а намного больше и чтобы сделать хорошо, нужно потратить больше 5-ти минут времени. В любом случае, можно взять готовую библиотеку и посмотреть из чего она состоит. Это в некоторых случаях может помочь и возможно упростит создание своего велосипеда.

1. Раз уж псевдо у вас имеет inline-block, то можно задать ему vertical-align: middle
2. Либо задайте для родителя флекс и align-items: center
3. Удалить псевдо и задать фон стрелкой прямо для кнопки и bg position

Добавьте к стили btn__card :

display: flex;
		justify-content: center;
		align-items: center;

Либо по старинке отслеживать событие scroll и вычислять положение нужного блока на экране, либо использовать Intersection Observer и смотреть момент пересечения нужного блока с вьюпортом.

// Тема письма
$mail->Subject = "Заявка с сайта" // <<<<<< точку запятую поставьте