.portfolio-related-wrap .portfolio-related .owl-nav div {
    border-radius: 50%;
}

.portfolio-related-wrap .portfolio-related .portfolio-item {
    padding: 0 20px;

    @media (max-width: 1300px) {
        padding: 0 10px;
    }
}

.portfolio-related-wrap .portfolio-related .owl-nav .owl-prev {
    left: -20px;

    @media (max-width: 1300px) {
        display: none;
    }
}

.portfolio-related-wrap .portfolio-related .owl-nav .owl-next {
    right: -20px;

    @media (max-width: 1300px) {
        display: none;
    }
}

.portfolio-related-wrap .portfolio-related {
    margin-top: 20px;
    margin-bottom: 0;
}

.yolo-slick {
    .slick-arrow {
        height: 48px;
        opacity: 0;
        transition: all ease-in-out 0.3s;
        transition-delay: 0.2s;
        z-index: 99;

        &:before {
            font-size: 48px;
            font-family: 'Font Awesome 5 Free';
            font-weight: 900;
            color: var(--text_color_fade_60);
        }
    }

    .slick-prev {
        left: -60px;

        &:hover {
            &:before {
                color: var(--primary_color);
            }
        }
    }

    .slick-next {
        right: -60px;

        &:hover {
            &:before {
                color: var(--primary_color);
            }
        }
    }

    &:hover {

        .slick-prev {
            left: -35px;
            opacity: 1;
        }

        .slick-next {
            right: -35px;
            opacity: 1;
        }
    }

    .slick-next:before {
        content: "\f0da";
    }

    .slick-prev:before {
        content: "\f0d9";
    }

    .slick-dots li button::before {
        font-size: 10px;
        color: var(--primary_color_fade_70);
    }

    .slick-dots li.slick-active button:before {
        color: var(--primary_color);
    }
}



.yolo-data-slider {
    position: relative;
}

.owl-carousel {

    .owl-next,
    .owl-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 48px;
        color: var(--text_color_fade_60);
        opacity: 0;
        transition: all ease-in-out .3s;
        transition-delay: .2s;
        z-index: 99;

        @media (max-width: 1300px) {
            display: none;
        }
    }

    .owl-prev {
        left: -40px;

        &:hover {
            color: var(--primary_color);
        }
    }

    .owl-next {
        right: -40px;

        &:hover {
            color: var(--primary_color);
        }
    }

    &:hover {
        .owl-prev {
            left: -15px;
            opacity: 1;
        }

        .owl-next {
            right: -15px;
            opacity: 1;
        }
    }
    &.row {
        margin-left: 0;
        margin-right: 0;
    }
}

.swiper-pagination-bullet {
    background-color: var(--primary_color);
}
.owl-carousel.owl-loaded {
    .owl-nav .disabled {
        opacity: 0;
    }

    article.trainer-item-wrap .trainer-item {
        box-shadow: 0 5px 20px rgba(229, 229, 229, 0.8);
    }

    .owl-item {
        .loop-item-company {
            img {
                display: inline-block;
                max-width: 100px;
            }
        }
    }

    .owl-dots {
        text-align: center;
        margin-top: 0px;

        .owl-dot {
            display: inline-block;
            margin-left: 5px;
            margin-right: 5px;
            outline: 0;
            border: none;

            &.active,
            &:hover {
                span {
                    background-color: var(--primary_color_fade_70);
                }
            }

            span {
                background-color: darken(@border_color, 10%);
                display: block;
                margin: 4px;
                width: 48px;
                height: 2px;

                @media (max-width: 768px) {
                    height: 4px;
                    width: 4px;
                    border-radius: 50%;
                }

            }
        }
    }

    div.owl-nav {
        text-align: center;

        button {

            &.owl-prev,
            &.owl-next {
                height: 35px;
                display: inline-block;
                width: 35px;
                outline: none;
                transition: all 0.3s ease-in-out;
                .border-radius(50%);
                background-color: @white;
                position: absolute;
                top: 50%;
                border-radius: 0;

                &:hover {
                    background-color: var(--primary_color);
                    border-color: var(--primary_color);
                    color: @white;
                }
            }

            &.owl-prev {
                left: 0;
            }

            &.owl-next {
                right: 0;
            }
        }
    }
}