.slick-dotted.slick-slider {
    margin-bottom: 0;
}
.slick-dots {
    display: inline-block !important;
    position: static;
    z-index: 2;
    margin-top: 20px;

    li button {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 7px;
        height: 7px;
        padding: 5px;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: transparent !important;
        border-radius: 50%;
        border: 2px solid $body-color;
    }
    li.slick-active button {
        background: $color-primary !important;
        border-color: $color-primary;
    }
}

.slick-gutter-15 {
    .slick-list {
        margin-left: -15px;
        margin-right: -15px;
    }
    .slick-slide {
        margin-left: 15px;
        margin-right: 15px;
    }
}
.slick-activation-01 {
    &.slick-gutter-15 {
        .slick-list {
            margin-left: 0;
            margin-right: 0;
        }
    }
}

button.slide-arrow {
    height: 50px;
    width: 50px;
    line-height: 48px;
    border-radius: 50%;
    position: absolute;
    z-index: 2;
    opacity: 0;
    transition: 0.3s;
    color: #fff;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.5) 0.29%,
        rgba(255, 255, 255, 0.1) 99.71%,
        rgba(0, 0, 0, 0.5) 99.71%
    );
    backdrop-filter: blur(40px);
    border: none;
    transform: translateY(-50%) scale(1);
    top: 50%;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(97.3deg, #ff512f 0%, #dd2476 100%);
        transition: 0.5s;
        z-index: -1;
        opacity: 0;
        border-radius: inherit;
    }
    &:hover {
        &::before {
            transition: 0.5s;
            opacity: 1;
        }
        i {
            z-index: 1;
        }
    }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    button.slide-arrow {
        opacity: 1;
    }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    button.slide-arrow {
        opacity: 1;
    }
}
@media only screen and (max-width: 767px) {
    button.slide-arrow {
        opacity: 1;
    }
}
button.slide-arrow i {
    font-size: 22px;
    color: #fff;
}
button.slide-arrow.slide-arrow {
    top: -85px !important;
    opacity: 1;
    border-radius: 50%;
}
button.slide-arrow.prev-arrow {
    right: 65px !important;
}
button.slide-arrow.next-arrow {
    right: 0 !important;
}

button.slide-arrow:hover.slide-arrow i {
    color: #fff !important;
}
.slick-dots li button:before {
    font-size: 0;
}
// slick top
.slick-arrow-top {
    button.slide-arrow.prev-arrow {
        right: 19% !important;
        @include lg-device {
            right: 14% !important;
        }
        @include md-device {
            right: 9% !important;
        }
    }
    button.slide-arrow.next-arrow {
        right: 15.7% !important;

        @include xl-device {
            right: 14.7% !important;
        }
        @include lg-device {
            right: 9% !important;
        }
    }
}
// slick center
.slick-arrow-between {
    position: relative;
}

.slick-arrow-between button.slide-arrow.prev-arrow {
    top: 50% !important;
    left: -20px !important;
}
.slick-arrow-between button.slide-arrow.next-arrow {
    top: 50% !important;
    right: -20px !important;
}
.slick-arrow-none {
    button.slide-arrow {
        display: none !important;
    }
}