.slide-product-custom .product-custom-slider {
    background-color: var(--bs-gray-200);
    padding: 3em 2em;
}

.slide-product-custom .product-custom-title {
    color: var(--primary-color);
}

.slide-product-custom .product-custom-title h2 {
    padding-left: 0.2em;
}

.card-more {
    /* padding-left: 0.2em; */
    cursor: pointer;
    min-height: 300px;
    align-items: center;


    --s: 43px;
    /* control the size*/
    --c1: #ffffff;
    --c2: #00173f;

    --c: #0000 75%, var(--c1) 0;
    --g1: conic-gradient(at 78% 3%, var(--c));
    --g2: conic-gradient(at 3% 78%, var(--c));
    background:
        var(--g1),
        var(--g1) var(--s) var(--s),
        var(--g1) calc(2*var(--s)) calc(2*var(--s)),
        var(--g1) calc(3*var(--s)) calc(3*var(--s)),
        var(--g2) 0 calc(3*var(--s)),
        var(--g2) var(--s) 0,
        var(--g2) calc(2*var(--s)) var(--s),
        var(--g2) calc(3*var(--s)) calc(2*var(--s)) var(--c2);
    background-size: calc(4*var(--s)) calc(4*var(--s));

}



.card-more:hover .card-more-overlay {
    background: rgba(var(--primary-color-rgb), 0.5);
    color: var(--accent-color);
}


.card-more-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--primary-color-rgb), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-direction: column;
}


.slide-product-custom .product-carousel {
    margin: 0 0.5em;
    /* box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18); */
    border: none;
    height: 100%;
}

.slide-product-custom .carousel-control-prev,
.slide-product-custom .carousel-control-next {
    background-color: var(--bs-gray-400);
    width: 3em;
    height: 3em;
    border-radius: 50%;
    top: 60%;
    transform: translateY(-50%);
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
}

/* @media (min-width: 576px) {
    .slide-product-custom .carousel-item {
        margin-right: 0;
        flex: 0 0 50%;
        display: block;
    }

    .slide-product-custom .carousel-inner {
        display: flex;
    }
} */

@media (min-width: 1000px) {

    .slide-product-custom .carousel-item {
        margin-right: 0;
        flex: 0 0 50%;
        display: block;
    }

    .slide-product-custom .carousel-inner {
        display: flex;
    }

    .slide-product-custom .carousel-inner {
        padding: 1em;
    }

    .slide-product-custom .carousel-control-prev,
    .slide-product-custom .carousel-control-next {
        width: 3em;
        height: 3em;
        position: absolute;
        left: 1em;
        top: 90%;
        opacity: 1;
    }

    .slide-product-custom .carousel-control-next {
        left: 4.5em;
    }

    .slide-product-custom .container-relative-slider {
        position: relative;
    }
}