/* Header Carousel */
.border-header-carousel {
    border: 2px solid var(--secondary-darker);
    border-radius: 8px;
}

.slick-dots {
    bottom: 15px;
}

.slick-dots li button:before {
    font-size: 16px;
    line-height: 16px;
    opacity: 0.75;
    color: var(--primary-lightest);
}

.slick-dots li.slick-active button:before {
    opacity: 1;
    color: var(--primary-base);
}

.next-best-selling-product-container {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    cursor: pointer;
    position: absolute;
    right: 4%;
    top: 50%;
    border-radius: 50%;
}

.next-best-selling-product {
    width: 35px;
    height: 35px;
}

.next-new-product-container {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--white);
    cursor: pointer;
    position: absolute;
    right: 4%;
    top: 50%;
    border-radius: 50%;
}

.next-new-product {
    width: 35px;
    height: 35px;
}

.header-carousel-img {
    width: 100%;
    object-fit: cover;
}

.border-header-carousel .slick-dots {
    bottom: 0px !important;
}

/* Border */
.border-bottom-content {
    border: 1px solid var(--primary-darker);
}

/* Text */
.title-image-category {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media (max-width: 767.98px) {

    .content-header {
        padding-top: 2rem !important;
    }

    .category-card .card-body {
        height: 15vh;
        overflow-y: scroll;
    }

    .header-carousel-img {
        width: 100%;
        height: 240px;
    }

    .best-selling-product .slick-slide {
        width: 40vw;
    }

    .new-product .slick-slide {
        width: 35vw;
    }

    .category-gutter {
        margin-left: -12px;
        margin-right: -12px;
    }

    .category-gutter > [class^="col-"],
    .category-gutter > [class^="col-"] {
        padding-left: 12px;
        padding-right: 12px;
    }

    .others-gutter {
        margin-left: -12px;
        margin-right: -12px;
    }

    .others-gutter > [class^="col-"],
    .others-gutter > [class^=" col-"] {
        padding-left: 12px;
        padding-right: 12px;
    }

    .content-header .container,
    .content-wrapper .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .category-wrapper .img-fluid {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 997.98px) {
    .content-header .container,
    .content-wrapper .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .category-card .card-body {
        height: 15vh;
        overflow-y: scroll;
    }

    .header-carousel-img {
        width: 100%;
        height: 240px;
    }

    .category-gutter {
        margin-left: -12px;
        margin-right: -12px;
    }

    .category-gutter > [class^="col-"],
    .category-gutter > [class^="col-"] {
        padding-left: 12px;
        padding-right: 12px;
    }

    .others-gutter {
        margin-left: -12px;
        margin-right: -12px;
    }

    .others-gutter > [class^="col-"],
    .others-gutter > [class^=" col-"] {
        padding-left: 12px;
        padding-right: 12px;
    }
}