/**=====================
    slider css start
==========================**/
.slick-slider {
    &.slick-slider {
        margin-bottom: -8px;
    }

    .slick-list {
        margin: 0 -12px;

        @media (max-width: 767px) {
            margin: 0 -8px;
        }

        .slick-slide {
            >div {
                margin: 0 12px;

                @media (max-width: 767px) {
                    margin: 0 8px;
                }
            }
        }
    }
}

.theme-card {
    position: relative;

    &.center-align {
        display: flex;
        height: 100%;
        align-items: center;

        .offer-slider {
            .product-box2 {
                .media {
                    .media-body {
                        margin-top: 0;
                    }
                }
            }
        }
    }

    &.card-border {
        border: 1px solid $white-dark;

        h5 {
            padding: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
            margin-top: 0;
            margin-bottom: 0;
        }

        .slick-prev,
        .slick-next {
            top: -40px;
        }

        .slick-next {
            right: 30px;
        }

        .slick-prev {
            right: 50px;
        }

        .offer-slider {
            padding: calc(15px + 5*(100vw - 320px) / 1600);

            .media {
                .media-body {
                    a {
                        h6 {
                            margin-right: 25px;
                        }
                    }
                }
            }
        }
    }

    h5 {
        font-weight: 600;
        text-transform: uppercase;
        padding-bottom: calc(5px + 5*(100vw - 320px) / 1600);
        margin-top: -5px;
        margin-bottom: calc(12px + 8*(100vw - 320px) / 1600);

        &.title-border {
            border-bottom: 1px solid $white-dark;
        }
    }

    .slick-prev,
    .slick-next {
        top: -35px;

        &:before {
            font: normal normal normal 30px/1 $font-awesome;
            color: $dark-font;
            opacity: 0.6;
        }
    }

    .slick-next {
        right: 0;

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

    .slick-prev {
        left: unset;
        right: 25px;

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

    .offer-slider {
        img {
            height: calc(100px + 20*(100vw - 320px) / 1600);
            margin-right: 10px;
            width: calc(100px + 20*(100vw - 320px) / 1600);
            object-fit: cover;
        }

        >div {
            .media {
                +.media {
                    margin-top: 20px;
                }
            }
        }

        .media {
            .media-body {
                a {
                    h6 {
                        margin-right: 0;
                        line-height: 1.4;
                        margin-top: 3px;
                        margin-bottom: 0;
                        font-size: calc(14px + 2 * (100vw - 320px) / 1600);
                        font-weight: 500;
                    }
                }

                h4 {
                    margin-top: 10px;
                    font-weight: 600;
                    color: $dark-font;
                    margin-bottom: 0;

                    del {
                        margin-left: 7px;
                    }
                }
            }
        }
    }
}

.offer-slider {
    .slick-slide {
        line-height: 1;
    }
}

.center-slider {
    .product-box {
        box-shadow: none;

        .img-wrapper {
            img {
                padding: 15px;
            }
        }
    }

    .slick-next,
    .slick-prev {
        &:before {
            box-shadow: 0 0 8px 0 $round-border;
        }
    }

    .title2 {
        .title-inner2 {
            margin-bottom: 0;
        }
    }

    &:hover {
        .product-box {
            box-shadow: none;
        }

        .slick-next {
            right: 20px;
            transform: scale(1.8);
        }

        .slick-prev {
            left: 20px;
            transform: scale(1.8);
        }
    }
}

.full-box {
    .theme-card {
        .offer-slider {
            .product-box2 {
                overflow: hidden;

                .title {
                    text-align: center;
                    color: black;
                    text-transform: capitalize;
                    font-weight: 600;
                    margin-bottom: 0;
                }

                .media {
                    img {
                        height: 300px;
                        transform: scale(1);
                        transition: all 0.5s ease;

                        &.h-cls {
                            height: 250px;
                        }
                    }

                    .media-body {
                        a {
                            h6 {
                                margin-right: 20px;
                            }
                        }

                        h4 {
                            font-size: 20px;
                            margin-top: 5px;
                        }
                    }
                }

                +.product-box2 {
                    border-top: 1px solid $border-grey;
                }

                &:hover {
                    .media {
                        img {
                            transform: scale(1.03);
                            transition: all 0.5s ease;
                        }
                    }
                }
            }
        }
    }
}

.box-product {
    .full-box {
        .theme-card {
            &.center-align {
                display: block;
            }

            .offer-slider {
                .product-box2 {
                    border: 1px solid #eee;
                    padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
                    background-color: #f8f8f8;
                    width: 100%;

                    .media {
                        img {
                            height: calc(120px + (152 - 120) * ((100vw - 320px) / (1920 - 320)));
                            padding: 0;
                            margin-bottom: 0;
                        }

                        .media-body {
                            z-index: 1;
                            margin-top: 0;

                            h4 {
                                font-size: 18px;
                                margin-top: 7px;
                            }
                        }
                    }

                    +.product-box2 {
                        border-top: none;
                        margin-top: 30px;
                    }

                    .cart-bottom {
                        border-top: 1px solid #ddd;
                        padding-top: 10px;
                        margin-top: 12px;

                        button {
                            border: none;
                            background-color: transparent;
                            padding: 0;
                        }

                        i {
                            color: $font-grey;
                            font-size: 16px;
                            padding-right: 7px;
                            transition: all 0.5s ease;

                            &:hover {
                                color: var(--theme-color);
                                transition: all 0.5s ease;
                            }
                        }
                    }
                }
            }
        }
    }
}

.product-parallax {
    .theme-card {
        .offer-slider {
            >div {
                .media {
                    background-color: $white;

                    &:first-child {
                        margin-bottom: 20px;
                    }

                    &:last-child {
                        img {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }

        &.card-border {
            border: none;

            .offer-slider {
                img {
                    padding: 15px 15px 15px 15px;
                }
            }
        }
    }
}

.multiple-slider {
    margin-bottom: -30px;

    >div {
        margin-bottom: 30px;
    }
}

.product-vertical {
    .full-banner {
        padding-top: 75px !important;
        padding-bottom: 75px !important;
    }

    .full-box {
        .theme-card {
            .offer-slider {
                background-color: $white;

                .product-box2 {
                    .media {
                        img {
                            height: 200px;
                        }
                    }
                }
            }
        }
    }

    .theme-card {
        .offer-slider {
            >div {
                .media {
                    &:last-child {
                        img {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }

        &.center-align {
            .offer-slider {
                .sec-1 {
                    @media (max-width: 767px) {
                        display: block;
                    }
                }

                .product-box2 {
                    .media {
                        padding: calc(10px + (15 - 10) * ((100vw - 320px) / (1920 - 320)));
                        gap: 15px;

                        @media (max-width: 1200px) {
                            gap: 0;
                        }

                        @media (max-width: 767px) {
                            display: grid;
                        }

                        img {
                            height: 140px;
                            margin: 0;
                            object-fit: cover;
                            padding-block: 0;

                            @media (max-width: 767px) {
                                padding: 0 0 10px;
                                width: 100%;
                                height: calc(160px + (230 - 160) * ((100vw - 320px) / (767 - 320)));
                            }
                        }

                        .media-body {
                            text-align: left;
                            padding-left: 20px;
                            padding: 0;

                            h4 {
                                font-size: calc(15px + (20 - 15) * ((100vw - 320px) / (1920 - 320)));
                                display: flex;
                                align-items: center;
                                gap: calc(4px + (7 - 4) * ((100vw - 320px) / (1920 - 320)));
                                flex-wrap: wrap;

                                del {
                                    margin: 0;
                                    font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.demo-card {
    &.theme-card {
        background-color: $top-header;
        padding: 20px;
        margin-top: 30px;
    }
}

.category-slider {
    .category-box {
        &:hover {
            background-color: var(--theme-color);

            img {
                filter: invert(1) brightness(100);
            }
        }

        img {
            filter: unset;
        }
    }
}

.thumbnail-image-slider {
    .slider-image {
        background-color: $top-header;

        figure {
            background-color: transparent;
            width: 100%;
            height: 100%;
        }

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

    .slider-nav {
        .slick-list {
            margin: 0 calc(-4px + (-8 - -4) * ((100vw - 320px) / (1920 - 320)));

            .slick-track {
                .slick-slide {
                    >div {
                        margin: 0 calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320)));
                    }
                }
            }
        }
    }
}

.image-outside-thumbnail {
    .slider-nav {
        .slick-list {
            margin: 0 calc(-4px + (-8 - -4) * ((100vw - 320px) / (1920 - 320)));

            .slick-track {
                .slick-slide {
                    >div {
                        margin: 0 calc(4px + (8 - 4) * ((100vw - 320px) / (1920 - 320)));
                    }
                }
            }
        }
    }
}

.brand-slider-box {
    .slick-slider {
        &.slick-slider {
            margin-bottom: 0;
        }

        .slick-list {
            margin: 0 -10px;

            .slick-slide {
                >div {
                    margin: 0 10px;
                }
            }
        }
    }
}

.product-slider-image {
    background-color: $top-header;
    border: 1px solid $white-dark;
}

.sticky-top-product {
    position: sticky;
    top: 0;
    z-index: 1;

    .four-image-sec {
        height: calc(240px + (326 - 240) * ((100vw - 320px) / (1920 - 320)));
    }
}

.main-product-box {
    .slick-slider {
        .slick-arrow {
            opacity: 1;
            position: absolute;
            top: 50%;
            border-radius: 100%;
            width: 30px;
            height: 30px;
            @include flex_common ($dis: flex, $align: center, $justify: center);
            color: #222222;
            background-color: #ffffff;
            transform: translateY(-50%);
            z-index: 1;
            transition: all 0.5s ease-in-out;
            box-shadow: 0 0 8px rgba(221, 221, 221, 0.6);
            margin: 0;
            line-height: 1;
            border: 1px solid #ececec;
            padding: 5px;

            &.slick-next {
                right: -14px;

                @media (max-width: 575px) {
                    right: 8px;
                }
            }

            &.slick-prev {
                left: -14px;

                @media (max-width: 575px) {
                    left: 8px;
                }
            }
        }

        .slick-list {
            height: 100% !important;
        }
    }
}

.view-image-slider {
    .slick-slider {
        .slick-arrow {
            opacity: 1;
            position: absolute;
            top: 50%;
            border-radius: 100%;
            width: 30px;
            height: 30px;
            @include flex_common ($dis: flex !important, $align: center, $justify: center);
            color: $dark-font;
            background-color: $white;
            transform: translateY(-50%);
            z-index: 1;
            transition: all 0.5s ease-in-out;
            box-shadow: 0 0 8px #dddddd99;
            padding: 0;
            margin: 0;
            line-height: 1;
            border: 1px solid #ececec;

            &::before {
                font-size: 20px;
                line-height: 1;
                opacity: 1;
                color: #222;
                @include font;
            }

            &.slick-next {
                right: -14px;

                @media (max-width: 576px) {
                    right: 6px;
                }

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

            &.slick-prev {
                left: -14px;

                @media (max-width: 576px) {
                    left: 6px;
                }

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