/* start listing */
.spiceGuideListingSec {
    .spiceGuideListingWrap {
        margin-top: 50px;

        .eachspGdWrap {
            margin-bottom: 20px;

            .commonHvrBtn {
                min-width: auto;
                width: 190px;
                transition: all 0.5s;

                a {
                    border: 1px solid transparent;
                    font-size: 18px;
                    transition: all 0.5s;
                    padding: 6px 20px;

                    &::after {
                        width: 30px;
                        height: 30px;
                        background-size: 14px;
                    }
                }

                &:hover {

                    a {
                        border-color: #88401B;
                        background-color: #fff;
                        color: #000;

                        &::after {
                            background-color: #FFB92B;
                            transform: translateY(-50%) rotate(52deg);
                        }
                    }
                }
            }

            .commonListCard {
                background-color: #fff;

                .ListCardCont {
                    .ListCardContTp {
                        .ListCardContHead {
                            .ListCardContTitle {
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                            }
                        }
                    }
                }
            }
        }
    }
}

ul.spGdContDt {
    display: flex;
    margin-bottom: 15px;

    li {
        &:not(:last-child) {
            position: relative;
            padding-right: 30px;

            &::after {
                content: "";
                position: absolute;
                top: 50%;
                right: 15px;
                transform: translateY(-50%);
                width: 1px;
                height: 70%;
                background-color: #000;

            }
        }

        .pstTile {
            font-size: 16px;
        }
    }
}

.page-template-storage-frozen-listing,
.page-template-spice-usage-blending-guide-listing {
    .pagination {
        ul {
            &.page-numbers {
                width: 100% !important;
                height: auto !important;
                border: none !important;
                justify-content: center;
                gap: 10px;
                background-color: transparent !important;
            }
        }
    }
}

/* end listing */

/* start details */
.spiceGuideDtlCard {
    border: 1px solid #00000025;
    border-radius: 15px;
    height: 100%;
    width: 100%;
    max-width: 80%;
    margin: 0px auto;
    background-color: #fff;

    .spGdDtlCont {
        padding: 20px;
    }

    .spGdDtlImg {
        width: 100%;
        height: 400px;
        border-radius: 15px;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 15px;
        }
    }

    .eachspGdDtl {
        &:not(:last-child) {
            margin-bottom: 30px;
        }

        .spGdDtlTitle {
            font-size: 25px;
            font-weight: 600;
            color: #000;
            margin-bottom: 15px;
            line-height: 1.4;
        }
    }
}

/* end details */

.getInTouchSec {
    &::before {
        display: none;
    }
}

/* spice using */
.single-spice_using {
    .spiceGuideDtlCard {
        width: 90%;
        margin: 0 auto;
    }
}

/* Responsive */

@media (max-width: 1600px) {
    .spiceGuideListingSec {
        .spiceGuideListingWrap {
            .eachspGdWrap {
                .commonListCard {
                    .ListCardImg {
                        height: 320px;
                    }

                    .ListCardCont {
                        .ListCardContTp {
                            .ListCardContHead {
                                .ListCardContTitle {
                                    font-size: 20px;
                                }
                            }
                        }
                    }
                }

                .commonHvrBtn {
                    a {
                        font-size: 16px;
                    }
                }
            }
        }
    }

    ul.spGdContDt {
        li {
            .pstTile {
                font-size: 14px;
            }
        }
    }

    .spiceGuideDtlCard {
        .eachspGdDtl {
            .spGdDtlTitle {
                font-size: 20px;
                margin-bottom: 10px;
            }
        }
    }
}

@media (max-width: 1366px) {
    .spiceGuideListingSec {
        .spiceGuideListingWrap {
            .eachspGdWrap {
                .commonListCard {
                    .ListCardImg {
                        height: 280px;
                    }

                    .ListCardCont {
                        .ListCardContTp {
                            .ListCardContHead {
                                .ListCardContTitle {
                                    font-size: 18px;
                                }
                            }

                            .ListCardContDt {
                                li {
                                    .pstTile {
                                        font-size: 14px;
                                    }
                                }
                            }
                        }
                    }
                }

                .commonHvrBtn {
                    width: 160px;

                    a {
                        font-size: 15px;
                    }
                }
            }
        }
    }

    .spiceGuideDtlCard {
        .eachspGdDtl {
            .spGdDtlTitle {
                font-size: 18px;
            }
        }
    }
}

@media (max-width: 1199px) {
    .spiceGuideDtlCard {
        max-width: 100%;
    }
}

@media(max-width: 1024px) {

    .spiceGuideListingSec {
        .spiceGuideListingWrap {
            margin-top: 25px;
        }
    }

    /* spice using */
    .single-spice_using {
        .spiceGuideDtlCard {
            width: 100%;
        }
    }

}

@media (max-width: 991px) {
    .spiceGuideListingSec {
        .spiceGuideListingWrap {
            .eachspGdWrap {
                .commonListCard {
                    .ListCardImg {
                        height: auto;
                    }

                    .ListCardCont {
                        .ListCardContTp {
                            .ListCardContHead {
                                .ListCardContTitle {
                                    overflow: visible;
                                    text-overflow: unset;
                                    display: block;
                                    -webkit-box-orient: unset;
                                    -webkit-line-clamp: none;
                                }
                            }

                            .ListCardContDt {
                                margin-bottom: 10px;

                                li {
                                    &:not(:last-child) {
                                        padding-right: 20px;

                                        &::after {
                                            right: 10px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .spiceGuideDtlCard {
        .spGdDtlImg {
            height: auto;
        }
    }
}

@media (max-width: 768px) {

    .page-template-storage-frozen-listing,
    .page-template-spice-usage-blending-guide-listing {
        .pagination {
            margin-top: 0;
        }
    }

    .spiceGuideListingSec,
    .spiceGuideDtlSec {
        .headingWrap {
            .secH {
                br {
                    display: none;
                }
            }
        }
    }
}

@media(max-width: 767px) {
    .spiceGuideDtlCard {
        .eachspGdDtl {
            .spGdDtlTitle {
                font-size: 16px;
            }
        }
    }
}


@media (min-width: 1921px) {
    ul.spGdContDt {
        li {
            .pstTile {
                font-size: clamp(16px, 0.9vw, 20px);
            }
        }
    }
}