/*------------------------------------*\
    #Carousel
\*------------------------------------*/
.owl-nav.disabled {
    display: none;
}

.carousel-dots {
    position: relative;

    button.owl-dot,
    button.owl-dot:focus {
        padding         : 0;
        background-color: transparent;
        border          : none;
        outline         : none;
        box-shadow      : none;
    }

    .owl-dots {
        display        : flex;
        justify-content: center;
        align-items    : flex-end;
        z-index        : 5;

        .owl-dot {
            margin-right: 10px;
            display     : inline-flex;

            &:last-child {
                margin-right: 0;
            }

            &.active {
                span {
                    background-color: var(--global--color-primary);
                    width           : 38px;
                }
            }

            span {
                display         : inline-block;
                width           : 20px;
                height          : 6px;
                border-radius   : 2px;
                background-color: #6b7475;
                transition      : 0.3s ease-in-out;
                margin-right    : 0;
                position        : relative;
                background-color: var(--global--color-heading);
            }
        }
    }

    &.carousel-dots-white {
        .owl-dots {
            .owl-dot {
                span {
                    background-color: rgba(255, 255, 255, 0.4);
                }

                &.active {
                    span {
                        background-color: var(--global--color-white);
                    }
                }
            }
        }
    }
}


.carousel-navs {
    position: relative;

    .owl-nav {
        span {
            font-size: 0;
        }

        @media #{$minLarge} {
            position: absolute;
            top     : -127px;
            right   : 0;
        }
    }

    .owl-next,
    .owl-prev {
        &:hover {
            &::before {
                color: var(--global--color-primary);
            }
        }

        &:before {
            font-family: 'carousel';
            font-size  : 43px;
            font-weight: 600;
            color      : #687596;
            ;
            transition: 0.3s ease-in-out;
        }
    }

    .owl-prev {
        margin-right: 50px;

        &:before {
            content: "\e990";
        }
    }

    .owl-next {
        &:before {
            content: "\e991";
        }
    }
}

.carousel-navs {
    .owl-dots {
        position: absolute;
        bottom  : 40px;
        width   : 100%;
    }
}