.card-slider {
    max-width: 100%;
    margin: 0 auto;

    @media screen and (max-width: 1024px) {
        width: 100%;
    }

    .slick-prev-icon,
    .slick-next-icon {
        color: black;
    }

    .slick-slide {
        padding: 0 10px;
    }

    .card {
        position: relative;
        display: flex !important;
        flex-direction: column;
        height: 350px;
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, .2);
        background-color: white;
        text-decoration: none;
        color: rgba(0, 0, 0, .9);
        transition: all .1s linear;
    }

    /** Main link */
    .card .main-link {
        text-decoration: none;
        display: flex;
        flex-direction: column;
    }

    .card .main-link:focus {
        outline: none;
    }

    .card .main-link:focus .title {
        outline: 3px dashed orange;
        outline-offset: -4px;
        color: royalblue;
        text-decoration: underline;
    }

    /** Product title */
    .card .title {
        color: #000;
        margin: 0;
        padding: 10px 10px 5px 10px;
        font-size: 16px;
        font-weight: bold;
    }

    .card .title:hover {
        text-decoration: underline;
    }

    /** Product image */
    .card .image {
        /** Visually place the image above all other content (like the heading) in the parent flex container (.card). */
        order: -1;

        position: relative;
        height: 100px;
        padding: 2px;
        overflow: hidden;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card .image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: grayscale(.5);
        transition: all .3s ease-in-out;
    }

    .card .image:hover img {
        width: 110%;
        height: 110%;
    }

    /** Product description */
    .card .description {
        margin: 7px 10px 15px 10px;
        font-size: 14px;
        opacity: .8;
    }

    /** Floating "sale" badge */
    .card .badge {
        position: absolute;
        top: 2px;
        right: 2px;
        z-index: 1;

        padding: 5px 10px;

        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        color: white;
        background-color: rgb(200, 0, 0);
    }

    /** Price */
    .card .price {
        padding-left: 10px;
    }

    .card .price .new-price {
        font-weight: bold;
    }

    .card .price .original-price {
        margin-left: 5px;
        font-size: 14px;
        font-style: italic;
        opacity: .5;
        text-decoration: line-through;
    }

    /** Rating */
    .card .rating {
        margin: 10px 0 15px 10px;
        color: orange;
        font-size: 12px;
    }

    /** "30 reviews" link next to stars */
    .card .rating .reviews-link {
        color: rgba(0, 0, 0, .6);
        margin-left: 5px;
    }

    .card .rating .reviews-link:hover {
        color: black;
    }

    .card .rating .reviews-link:focus {
        color: royalblue;
        outline: 3px dotted royalblue;
        outline-offset: 2px;
    }

    /** Hover state = add box shadow, underline the title */
    .card:hover {
        border-color: rgba(0, 0, 0, .4);
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, .15);
    }

    .card:hover .image img,
    .card:focus .image img {
        filter: grayscale(0);
    }

    .card a:focus {
        outline: none;
    }
}


/**
    Demo only
  */
.note {
    text-align: center;
    font-size: 14px;
    max-width: 960px;
    padding: 40px 20px;
    margin: 0 auto;
    opacity: .8;

    a {
        color: black;
        font-weight: bold;

        &:hover,
        &:focus {
            color: royalblue;
        }
    }
}

.slick-prev {
    left: -12px !important;
}

.slick-next {
    right: -12px !important;
}


.packageShadow {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}


/* breadcrum css  */
.breadcrumb {
    background-color: #f5f5f5;
    padding: 8px 15px;
    margin-bottom: 0;
    list-style: none;
    border-radius: 4px;
}

.breadcrumb li {
    display: inline;
    font-size: 14px;
}

.breadcrumb li:not(:last-child):after {
    content: " / ";
    margin-left: 5px;
    margin-right: 5px;
    color: #777;
}

.breadcrumb li a {
    color: #337ab7;
    text-decoration: none;
}

.breadcrumb li a:hover {
    text-decoration: underline;
}

.card-wrapper {
    @apply flex flex-wrap w-full packageShadow transition duration-300 rounded-[8px] bg-white;
}