/* arrow style and transition */
.arrow .arrow-black,
.arrow .arrow-white {
    width: 50%;
}

.arrow {
    width: 3.3vw;
    height: 3.3vw;
    border: 1px solid #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s all;
    overflow: hidden;
    position: relative;
}

.awesome-arrow-style:hover .arrow {
    background: #000000;
}

.arrow img {
    transition: 0.5s all;
    position: absolute;
}

.awesome-arrow-style:hover .arrow .arrow-black {
    transform: translate(100%, -85%);
}

.awesome-arrow-style .arrow .arrow-white {
    transform: translate(-85%, 100%);
}

.awesome-arrow-style:hover .arrow .arrow-white {
    display: block;
    transform: translate(0%, 0%);
}

/* limit text lines */

.limit-text-lines-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
}

.limit-text-lines-1 {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .arrow {
        width: 25px;
        height: 25px;
    }
}