.hh-video-banner-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.hh-video-wrapper {
    width: 100%;
    display: flex;

    video {
        width: 100%;
        height: 100%;
    }
}

.hh-video-title {
    position: absolute;
    bottom: 0;
    color: white;
    padding-bottom: 2rem;
    font-size: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: normal;
    gap: 2rem;
    font-weight: 500;

    span {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: 400;

        &::after {
            display: block;
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 50px;
            height: 50px;
            transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
            -o-transform: translateX(-50%);
            background: url(/upload/images/hakkimizda/arrow.png) no-repeat 50% 50%;
            transform: translate3d(-50%, 0, 0);
            animation: arrow-down infinite 1.5s;
        }
    }
}

@keyframes arrow-down {
    0% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
    30% {
        -webkit-transform: translate3d(-50%, 20%, 0);
        transform: translate3d(-50%, 20%, 0);
    }
    60% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}