Sagrana

Потому что есть разрешение экрана в физических пикселях, а есть резрешение экрана браузера в логических пикселях. И то, что у вас экран 1920х1080 px совсем не значит, что сайт отображается на этом разрешении.
Есть куча сайтов, которые показывают эти параметры. Например, myresolutionis.ru.
А в высоте экрана надо учитывать, что на разных устройствах может быть разная высота панели инструментов, закладок и т.д.

У slick slider же есть режим «Center Mode». Это прям ваш пример, только там выводится по три сайда, а вам нужно 1. У центрального слайда класс slick-center, на него настраивайте сдвиг по оси и увеличение.

Вот хорошая статья на эту тему. Она правда довольно старая уже, и возможно сейчая это можно сделать проще/лучше.
Плавающий блок (sticky div)

Вот тут вариант на чистом js

Если все иконки должны быть просто чёрно-белые, то можно через css filter

Подключаете https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5...
Потом в js:

var animationData = /* содержимое json файла */;
var container = document.getElementById('elementID');
var params = {
    container: container,
    renderer: 'svg',
    loop: 3,
    autoplay: false,
    animationData: animationData
};

var anim;
anim = bodymovin.loadAnimation(params);

А потом вешаете отслеживание появления этого elementID во вьюпорте и просто anim.play(); и anim.stop();

background: url('img/safe_image.jpg') center/cover no-repeat;

У вас эти карточки лежат в блоке .owl-stage-outer, у которого стоит overflow: hidden;
Если вы уберете у этой карусели у .owl-carousel margin-bottom, и добавите padding-bottom нужного размера для .owl-stage-outer, то карточки не будут обрезаться.

Если у .block-extra-options убрать flex-basis: 100%; , то в Safari всё встает на место