.page_home {
    overflow-x: hidden;
}

/*==banner start==*/
.bannerWrap {
    overflow: hidden;
    width: 100%;
    height: auto;

    .bannerWrapInn {
        .banSlider {
            position: relative;
            height: 100vh;

            .slick-list {
                height: 100%;
            }

            .slick-track {
                height: 100%;
            }

            .slick-arrow {
                &.slick-prev {
                    display: none !important;
                }

                &.slick-next {
                    position: absolute;
                    right: 0;
                    top: 64%;
                    transform: translateY(-50%);
                    border: none;
                    font-size: 0;
                    width: 200px;
                    height: 360px;

                    &::after {
                        content: normal;
                    }
                }
            }

            .banSlide {
                &.slide_1 {
                    background-color: #950000;
                }

                &.slide_2 {
                    background-color: #e49703;
                }

                .banSlideInn {
                    position: relative;
                    overflow: hidden;
                    height: 100%;

                    .banSlideMainDiv {
                        width: 100%;
                        height: 100%;
                        position: relative;
                    }

                    .banCardTxt {
                        padding-top: 150px;

                        .banHead {
                            color: #FFF;
                            text-align: center;
                            font-family: 'Exo';
                            font-size: 125px;
                            font-style: normal;
                            font-weight: 800;
                            line-height: 135px;
                            letter-spacing: -1.25px;
                            text-transform: uppercase;
                        }
                    }

                    .banCardImg {
                        position: relative;
                        width: 620px;
                        height: auto;
                        margin: 0px auto;
                        margin-top: -100px;
                        transform: scale(0.3);
                        opacity: 0;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            position: relative;
                            z-index: 2;
                        }

                        video {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            position: relative;
                            z-index: 2;
                            display: none;
                        }

                        .banAbsImg {
                            position: absolute;
                            top: -70px;
                            left: 50%;
                            transform: translateX(-50%);
                            width: calc(100% + 220px);
                            height: calc(100% + 20px);
                            z-index: 1;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: contain;
                            }
                        }
                    }

                    .banLtBg {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: auto;
                        height: 550px;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }

                    .banLtWhole {
                        position: absolute;
                        left: -140px;
                        top: 40%;
                        transform: translateY(-50%);
                        width: 350px;
                        height: 300px;
                        animation: move 1.5s ease-in-out infinite;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }

                    .banRtBg {
                        position: absolute;
                        right: 0;
                        top: 0;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                    .banElement {
                        position: absolute;
                        top: 32%;
                        transform: translateY(-50%);
                        right: 150px;
                        width: 180px;
                        height: auto;
                        animation: lean 2s ease-in-out infinite;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }

                    .banBtnDiv {
                        width: 100%;
                        justify-content: flex-end;
                        position: absolute;
                        right: 0;
                        bottom: 40px;
                        display: flex;
                        z-index: 3;
                        gap: 20px;

                        .banBtn {
                            &:first-child {
                                width: calc(100% - 350px);

                                .banBtnLink {
                                    margin-left: auto;
                                }
                            }

                            &:last-child {
                                width: 350px;

                                .banBtnLink {
                                    margin-right: auto;
                                }

                            }

                            .banBtnLink {
                                background-color: #FFF;
                                width: 220px;
                                font-size: 20px;
                                border-radius: 35px;
                                position: relative;
                                z-index: 2;
                                color: #000;
                                padding: 10px 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                transition: all 0.5s;

                                .btnText {
                                    transition: transform 0.5s;
                                }

                                &::after {
                                    content: '';
                                    position: absolute;
                                    right: 6px;
                                    top: 50%;
                                    transform: translateY(-50%) scale(0.7);
                                    width: 40px;
                                    height: 40px;
                                    border-radius: 50%;
                                    background-image: url(../images/common/Arrow.png);
                                    background-repeat: no-repeat;
                                    background-size: 18px;
                                    background-position: center;
                                    background-color: #FFF;
                                    opacity: 0;
                                    visibility: hidden;
                                    transition: all 0.5s;
                                }

                                &:hover {
                                    width: 250px;
                                    background-color: #C19A63;
                                    color: #fff;
                                    justify-content: flex-start;

                                    .btnText {
                                        transform: translateX(10px);
                                    }

                                    &::after {
                                        opacity: 1;
                                        visibility: visible;
                                        transform: translateY(-50%) scale(1);
                                    }

                                }
                            }

                        }
                    }

                    .banNextProd {
                        position: absolute;
                        right: -150px;
                        top: 62%;
                        transform: translateY(-50%);
                        width: 400px;
                        height: 400px;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }
                }

                &.slick-current {
                    .banSlideInn {
                        .banAbsImg {
                            transform: translateX(-50%) scale(0);
                            animation: smoothSpread 1s ease-in-out forwards;
                            animation-delay: 0.25s;
                        }

                        .banCardImg {
                            animation: zoomIn 1s ease-out forwards;
                        }
                    }
                }
            }

        }
    }
}

@keyframes zoomIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }

    70% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes lean {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes move {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes smoothSpread {

    0% {
        transform: translateX(-50%) scale(0.3);
        opacity: 0;
    }

    100% {
        transform: translateX(-50%) scale(1.05);
        opacity: 1;
    }

}

/*==banner end==*/

/*== product start ==*/
.productSec {
    position: relative;
    overflow: hidden;

    &::before {
        content: '';
        position: absolute;
        left: -30px;
        top: 0;
        height: 100%;
        width: 400px;
        background-image: url(../images/home/product-left-bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        opacity: 0;
    }

    &::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        height: 460px;
        width: 500px;
        background-image: url(../images/home/product-right-bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        transform: translateY(100%);
        transition: transform 1.5s ease-out;
        opacity: 0;
    }

    &.active {
        &::before {
            animation: animOne 1s ease-in-out forwards;
        }

        &::after {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .productSecBtm {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
        row-gap: 40px;

        .prodCard {
            width: calc(20% - 16px);
            transform: scale(0.95);
            transition: all 0.5s;

            &:first-child {
                .prodTop {
                    background-color: #CBD6F2;
                }
            }

            &:nth-child(2),
            &:nth-child(11) {
                .prodTop {
                    background-color: #FAEFDE;
                }
            }

            &:nth-child(3),
            &:nth-child(8) {
                .prodTop {
                    background-color: #E5F0DA;
                }
            }

            &:nth-child(4),
            &:nth-child(9) {
                .prodTop {
                    background-color: #F3E8FA;
                }
            }

            &:nth-child(5),
            &:nth-child(10) {
                .prodTop {
                    background-color: #F0E0DA;
                }
            }

            &:nth-child(6) {
                .prodTop {
                    background-color: #FFDEEA;
                }
            }

            &:nth-child(7) {
                .prodTop {
                    background-color: #F5CACA;
                }
            }

            .prodTop {
                width: 100%;
                height: 200px;
                border-radius: 15px;
                position: relative;
                transition: all 0.5s;

                .prodImg {
                    width: 100%;
                    height: 100%;
                    transition: all 0.5s;

                    a {
                        display: block;
                        width: 100%;
                        height: 100%;
                        padding: 35px 20px;
                    }

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }

                .prodAbsImg {
                    position: absolute;
                    right: 0;
                    bottom: -20px;
                    z-index: 1;
                    width: 90px;
                    height: 60px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
            }

            .prodBtm {
                min-height: 60px;

                .prodName {
                    display: block;
                    width: 100%;
                    height: 100%;
                    text-align: center;
                    color: #000;
                    padding-top: 20px;
                    font-size: 18px;
                }
            }

            &:hover {
                transform: scale(1.05);

                .prodTop {
                    .prodImg {
                        transform: scale(1.15);
                    }
                }
            }
        }
    }
}

@keyframes animOne {

    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }

}

/*== product end ==*/

/*== popular products start ==*/
.popularSec {
    overflow: hidden;

    .popularSecBtm {
        .popularSlider {
            padding-top: 20px;

            .slick-arrow {
                position: absolute;
                top: -85px;
                right: calc((100% - 1360px)/2);

                &.slick-prev {
                    right: calc((100% - 1360px)/2 + 60px);
                }
            }

            .popularSlide {
                padding: 0px 10px;

                .popularCard {
                    pointer-events: none;

                    .popularCardTop {
                        width: 100%;
                        height: 500px;
                        position: relative;
                        margin-bottom: 20px;

                        .popularImg {
                            width: 100%;
                            height: 100%;
                            border-radius: 30px;
                            overflow: hidden;
                            border: 1px solid #3c3c3c30;
                            transition: all 0.5s;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                                transition: all 0.5s;
                            }
                        }

                        .popularHvrBtn {
                            position: absolute;
                            width: calc(100% - 20px);
                            bottom: 10px;
                            left: 50%;
                            transform: translateX(-50%);
                            opacity: 0;
                            visibility: hidden;
                            transition: all 0.5s;
                        }
                    }

                    .popularCardBtm {
                        text-align: center;

                        .popularHead {
                            color: #000;
                            text-align: center;
                            font-family: "Instrument_Sans";
                            font-size: 25px;
                            font-weight: 600;
                            margin-bottom: 10px;
                        }

                        .popularPara {
                            display: flex;
                            justify-content: center;
                            flex-wrap: wrap;

                            span {
                                position: relative;
                                padding: 0px 10px;

                                &:not(:last-child) {
                                    &::after {
                                        content: '|';
                                        position: absolute;
                                        right: -3px;
                                        top: 0;
                                    }
                                }
                            }
                        }

                        .popularHvrBtn {
                            display: none;
                        }
                    }

                    &:hover {
                        .popularCardTop {
                            .popularImg {
                                img {
                                    transform: scale(1.15);
                                }
                            }

                            .popularHvrBtn {
                                opacity: 1;
                                visibility: visible;
                            }
                        }
                    }
                }

                &.slick-active {
                    .popularCard {
                        pointer-events: auto;
                    }
                }
            }
        }
    }
}

/*== popular products start ==*/

/*== Recipe card start ==*/
.recipeSec {
    position: relative;
    z-index: 2;

    &::before {
        content: '';
        position: absolute;
        top: -40px;
        left: -90px;
        background-image: url(../images/common/chilli-bg.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 350px;
        height: 350px;
        z-index: 1;
        transform: translateY(-150%);
        transition: transform 1s cubic-bezier(.68, -0.6, .32, 1.6);
        opacity: 0;
    }

    &.active {
        &::before {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .recipeSecTop {
        position: relative;
        z-index: 2;
    }

    /* category filter chips */
    .recipeFilterBar {
        gap: 20px;
        z-index: 2;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        margin-bottom: 35px;
        justify-content: center;

        .recipeFilterChip {
            font-family: "Instrument_Sans";
            font-size: 17px;
            font-weight: 500;
            color: #3C3C3C;
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 85px;
            padding: 9px 24px;
            cursor: pointer;
            transition: all 0.4s;
            min-width: 150px;

            &:focus-visible {
                outline: none;
            }

            &:hover {
                border-color: #C19A63;
                color: #88401B;
            }

            &.active {
                background-color: #C19A63;
                border-color: #C19A63;
                color: #fff;
            }
        }
    }

    .recipeSecBtm {
        position: relative;
        z-index: 2;

        .recipeGrid {
            /* horizontal rectangular cards, two per row */
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;

            &.is-refresh {
                .recipeCard:not(.is-hidden) {
                    animation: recipeCardIn 0.5s cubic-bezier(.22, .61, .36, 1) both;
                    animation-delay: calc(var(--i, 0) * 0.05s);
                }
            }
        }

        .recipeNoResult {
            display: none;
            text-align: center;
            font-size: 20px;
            color: #3C3C3C;
            padding: 40px 0;
        }

        /* built by js, only used up to 1023px */
        .recipeAccordion {
            display: none;
        }

        &.is-empty {
            .recipeNoResult {
                display: block;
            }
        }
    }

    .recipeCard {
        /* horizontal rectangle: dish on one side, its ingredients around it */
        aspect-ratio: 16 / 9;

        /* hidden only once js has armed the scroll reveal */
        &.is-armed {
            opacity: 0;
            transform: translateY(45px);
            transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.22, .61, .36, 1);
            transition-delay: calc(var(--i, 0) * 0.09s);
        }

        &.is-hidden {
            display: none;
        }

        /* revealed per card on scroll (see custom-home.js) */
        &.is-in {
            opacity: 1;
            transform: none;
        }

        .recipeCardLink {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 25px;
            overflow: hidden;
            background-color: #EDE7DF;
            transition: transform 0.5s, box-shadow 0.5s;
        }

        .recipeCardMedia {
            position: absolute;
            inset: 0;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.8s cubic-bezier(.22, .61, .36, 1);
            }
        }

        .recipeCardShade {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.2) 52%, rgba(0, 0, 0, 0.8) 100%);
            transition: all 0.5s;
        }

        .recipeTagWrap {
            position: absolute;
            top: 18px;
            left: 20px;
            right: 20px;
            z-index: 2;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;

            .recipeTag {
                background-color: rgba(255, 255, 255, 0.92);
                color: #88401B;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: 0.5px;
                text-transform: uppercase;
                padding: 6px 15px;
                border-radius: 85px;
            }
        }

        .recipeCardContent {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 2;
            padding: 25px;
            transform: translateY(52px);
            transition: transform 0.5s cubic-bezier(.22, .61, .36, 1);

            .recipeCardTitle {
                color: #fff;
                font-family: "Nunito Sans", sans-serif;
                font-size: 26px;
                font-weight: 700;
                line-height: 1.25;
                margin-bottom: 10px;
            }

            .recipeCardMeta {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px 20px;

                .recipeMetaItem {
                    position: relative;
                    color: rgba(255, 255, 255, 0.85);
                    font-size: 15px;
                    font-weight: 500;
                    padding-left: 22px;

                    &::before {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 13px;
                        height: 13px;
                        border-radius: 50%;
                        border: 2px solid var(--yellow-color);
                    }
                }
            }

            .recipeCardCta {
                display: inline-flex;
                align-items: center;
                gap: 12px;
                margin-top: 18px;
                color: #fff;
                font-size: 17px;
                font-weight: 600;
                opacity: 0;
                transition: opacity 0.5s 0.05s;

                &::after {
                    content: '';
                    width: 34px;
                    height: 34px;
                    border-radius: 50%;
                    background-color: #fff;
                    background-image: url(../images/common/Arrow.png);
                    background-repeat: no-repeat;
                    background-size: 16px;
                    background-position: center;
                }
            }
        }

        &:hover {
            .recipeCardLink {
                transform: translateY(-6px);
                box-shadow: 0 24px 45px rgba(0, 0, 0, 0.18);
            }

            .recipeCardMedia {
                img {
                    transform: scale(1.08);
                }
            }

            .recipeCardShade {
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 15%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.86) 100%);
            }

            .recipeCardContent {
                transform: translateY(0);

                .recipeCardCta {
                    opacity: 1;
                }
            }
        }
    }

    .recipeResBtn {
        display: none;
    }
}

@keyframes recipeCardIn {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/*== Recipe card end ==*/

/* get in touch */
.page_home {
    .getInTouchSec {
        &::before {
            content: normal;
        }

        &::after {
            content: normal;
        }
    }

    .frosAbtSec {
        &::after {
            display: none;
        }
    }
}

/* responsive */
@media (max-width: 1768px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                .banSlide {
                    .banSlideInn {
                        .banCardImg {
                            width: 700px;
                        }

                        .banCardTxt {
                            .banHead {
                                font-size: 100px;
                                line-height: 115px;
                            }
                        }
                    }
                }
            }
        }
    }

    .productSec {
        &::before {
            left: -20px;
            width: 320px;
        }

        &::after {
            height: 400px;
            width: 400px;
        }
    }

    .recipeSec {
        &::before {
            top: -40px;
            left: -90px;
            width: 280px;
            height: 230px;
        }
    }
}

@media (max-width: 1600px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                .banSlide {
                    .banSlideInn {
                        .banLtWhole {
                            left: -90px;
                            width: 260px;
                            height: 260px;
                        }

                        .banLtBg {
                            height: 420px;
                        }

                        .banNextProd {
                            right: -110px;
                            width: 300px;
                            height: 300px;
                        }

                        .banElement {
                            right: 100px;
                            width: 130px;
                        }

                        .banCardImg {
                            width: 560px;
                            margin-top: -90px;

                            .banAbsImg {
                                top: -60px;
                                width: calc(100% + 160px);
                            }
                        }

                        .banCardTxt {
                            .banHead {
                                font-size: 85px;
                                line-height: 95px;
                            }
                        }

                        .banBtnDiv {
                            .banBtn {

                                &:first-child {
                                    width: calc(100% - 290px);
                                }

                                &:last-child {
                                    width: 290px;
                                }

                                .banBtnLink {
                                    width: 180px;
                                    font-size: 16px;

                                    &::after {
                                        width: 35px;
                                        height: 35px;
                                    }

                                    &:hover {
                                        width: 210px;
                                    }
                                }
                            }
                        }
                    }
                }

                .slick-arrow {
                    &.slick-next {
                        top: 62%;
                        width: 160px;
                        height: 260px;
                    }
                }
            }
        }
    }

    .productSec {
        &::before {
            left: -20px;
            width: 320px;
        }

        &::after {
            height: 300px;
            width: 300px;
        }
    }

    .popularSec {
        .popularSecBtm {
            .popularSlider {
                .popularSlide {
                    .popularCard {
                        .popularCardTop {
                            height: 380px;
                        }

                        .popularCardBtm {
                            .popularHead {
                                font-size: 22px;
                                margin-bottom: 8px;
                            }

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

    .recipeSec {
        &::before {
            top: -80px;
            left: -60px;
            width: 200px;
            height: 200px;
        }

        .recipeCard {
            .recipeCardContent {
                .recipeCardTitle {
                    font-size: 23px;
                }
            }
        }
    }
}

@media (max-width: 1480px) {
    .headerWrap {
        .container-max {
            padding: 0 40px;
        }
    }
}

@media (max-width: 1440px) {
    .productSec {
        &::before {
            width: 250px;
        }

        &::after {
            height: 250px;
            width: 250px;
        }

        .productSecBtm {
            .prodCard {
                .prodTop {
                    height: 170px;

                    .prodAbsImg {
                        width: 75px;
                        height: 50px;
                    }
                }

                .prodBtm {
                    .prodName {
                        padding-top: 15px;
                        font-size: 16px;
                    }
                }
            }
        }
    }

    .popularSec {
        .popularSecBtm {
            .popularSlider {
                .slick-arrow {
                    right: 50px;

                    &.slick-prev {
                        right: 110px;
                    }
                }

                .popularSlide {
                    .popularCard {
                        .popularCardTop {
                            height: 320px;
                        }

                        .popularCardBtm {
                            .popularHead {
                                font-size: 18px;
                            }
                        }
                    }
                }
            }
        }
    }

    .recipeSec {
        .recipeSecBtm {
            .recipeGrid {
                gap: 20px;
            }
        }
    }
}

@media (max-width: 1366px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                .banSlide {
                    .banSlideInn {
                        .banLtWhole {
                            left: -70px;
                            width: 200px;
                            height: 200px;
                        }

                        .banCardTxt {
                            padding-top: 110px;

                            .banHead {
                                font-size: 70px;
                                line-height: 80px;
                            }
                        }

                        .banCardImg {
                            width: 480px;
                            margin-top: -80px;

                            .banAbsImg {
                                top: -30px;
                                width: calc(100% + 50px);
                            }
                        }

                        .banRtBg {
                            width: 200px;
                            height: 300px;
                        }
                    }
                }
            }
        }
    }

    .productSec {
        .productSecBtm {
            row-gap: 20px;
        }
    }
}

/* Targets taller screens (960px+ height) at 1280px width */
@media screen and (max-width: 1280px) and (max-height: 960px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                height: 600px;
            }
        }
    }
}

/* Targets 1280 x 1024 specifically */
@media screen and (max-width: 1280px) and (max-height: 1024px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                height: 600px;
            }
        }
    }

}

@media (max-width: 1280px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                .banSlide {
                    .banSlideInn {
                        .banLtWhole {
                            left: -55px;
                            width: 160px;
                            height: 160px;
                        }

                        .banLtBg {
                            height: 300px;
                        }

                        .banRtBg {
                            width: 140px;
                            height: 250px;
                        }

                        .banElement {
                            right: 85px;
                            width: 90px;
                        }

                        .banCardTxt {
                            padding-top: 90px;

                            .banHead {
                                font-size: 56px;
                                line-height: 66px;
                            }
                        }

                        .banCardImg {
                            width: 400px;
                            margin-top: -50px;

                            .banAbsImg {
                                top: -30px;
                                width: calc(100% + 20px);
                            }
                        }

                        .banNextProd {
                            right: -70px;
                            width: 220px;
                            height: 220px;
                        }

                        .banBtnDiv {
                            bottom: 45px;

                            .banBtn {
                                &:first-child {
                                    width: 50%;
                                }

                                &:last-child {
                                    width: 50%;
                                }

                                .banBtnLink {
                                    width: 150px;
                                    font-size: 14px;

                                    &::after {
                                        width: 32px;
                                        height: 32px;
                                        background-size: 15px;
                                    }

                                    &:hover {
                                        width: 190px;
                                    }
                                }
                            }
                        }
                    }
                }

                .slick-arrow {
                    &.slick-next {
                        width: 140px;
                        height: 200px;
                    }
                }
            }
        }
    }

    .popularSec {
        .popularSecBtm {
            .popularSlider {
                .popularSlide {
                    .popularCard {
                        .popularCardTop {
                            height: 280px;
                        }
                    }
                }
            }
        }
    }

    .recipeSec {
        .recipeSecBtm {
            .recipeGrid {
                gap: 16px;
            }
        }
    }
}

@media (max-width: 1199px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                height: 520px;

                .banSlide {
                    .banSlideInn {
                        .banCardTxt {
                            .banHead {
                                font-size: 50px;
                                line-height: 60px;
                            }
                        }

                        .banCardImg {
                            width: 300px;
                            margin-top: -30px;
                        }

                        .banBtnDiv {
                            bottom: 26px;
                        }
                    }
                }
            }
        }
    }

    .productSec {
        .productSecBtm {
            .prodCard {
                width: calc(19% - 10px);
            }
        }
    }

    .popularSec {
        .popularSecTop {
            .headingWrap {
                .secH {
                    text-align: center;
                    margin-bottom: 10px;
                }
            }
        }

        .popularSecBtm {
            .popularSlider {
                padding-bottom: 70px;

                .slick-arrow {
                    top: auto;
                    bottom: 0;

                    &.slick-prev {
                        right: auto;
                        left: calc(50% - 50px);
                    }

                    &.slick-next {
                        right: calc(50% - 50px);
                    }
                }
            }
        }
    }

    .recipeSec {
        /* two square tiles per row from here down */
        .recipeSecBtm {
            .recipeGrid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}

@media (max-width: 1100px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                height: 700px;

                .banSlide {
                    .banSlideInn {
                        width: 100%;
                        height: 100%;
                        position: relative;

                        .banSlideMainDiv {
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;

                            .banCardTxt {
                                padding-top: 0;
                            }

                            .banCardImg {
                                width: 400px;
                                height: 340px;
                                margin-top: 0;

                                .banAbsImg {
                                    top: 0;
                                    width: 300px;
                                    height: 300px;
                                }
                            }

                            .banBtnDiv {
                                position: relative;
                                z-index: 3;
                                width: 100%;
                                justify-content: center;
                                bottom: 0;

                                .banBtn {
                                    width: 50% !important;
                                }
                            }
                        }

                    }
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                height: 700px;

                .slick-arrow {
                    &.slick-prev {
                        width: 42px !important;
                        height: 42px !important;
                        border-radius: 50%;
                        border: 1px solid #fff;
                        font-size: 0;
                        background-color: transparent !important;
                        display: block !important;
                        position: absolute;
                        left: calc(50% - 50px);
                        top: auto;
                        bottom: 20px;
                        z-index: 2;

                        &::after {
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 25px;
                            height: 15px;
                            background-image: url(../images/common/slick-prev.png);
                            background-repeat: no-repeat;
                            background-size: contain;
                            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7411%) hue-rotate(30deg) brightness(116%) contrast(97%);
                        }
                    }

                    &.slick-next {
                        width: 42px !important;
                        height: 42px !important;
                        border-radius: 50%;
                        border: 1px solid #fff;
                        font-size: 0;
                        background-color: transparent !important;
                        display: block !important;
                        position: absolute;
                        top: auto;
                        bottom: 0;
                        z-index: 2;
                        left: auto;
                        right: calc(50% - 50px);

                        &::after {
                            content: '';
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            width: 25px;
                            height: 15px;
                            background-image: url(../images/common/slick-next.png);
                            background-repeat: no-repeat;
                            background-size: contain;
                            filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7411%) hue-rotate(30deg) brightness(116%) contrast(97%);
                        }
                    }
                }

                .banSlide {
                    .banSlideInn {
                        .banNextProd {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    .productSec {
        &.active {
            &::before {
                width: 150px;
                opacity: 0.5 !important;
            }

            &::after {
                opacity: 0.3;
            }
        }

        .productSecBtm {
            .prodCard {
                transform: scale(1);

                &:hover {
                    transform: scale(1);

                    & .prodTop {
                        .prodImg {
                            transform: scale(1);
                        }
                    }
                }
            }
        }
    }

    .popularSec {
        .popularSecBtm {
            .popularSlider {
                padding-left: 10px;
                padding-right: 10px;

                .popularSlide {
                    .popularCard {
                        .popularCardTop {
                            .popularHvrBtn {
                                opacity: 1;
                                visibility: visible;
                            }
                        }

                        /* .popularCardBtm{
                            .popularHvrBtn{
                                display: block;
                            }
                        } */
                    }
                }
            }
        }
    }

    /* no hover on touch devices - keep the card details open */
    .recipeSec {
        .recipeCard {
            .recipeCardContent {
                transform: none;

                .recipeCardCta {
                    opacity: 1;
                }
            }
        }
    }
}

/*== recipes as an accordion from 1023px down ==*/
@media (max-width: 1023px) {
    .recipeSec {
        .recipeFilterBar {
            display: none;
        }

        .recipeSecBtm {
            .recipeGrid {
                display: none;
            }

            .recipeAccordion {
                display: block;
            }
        }

        /* from here down the card is a plain stacked card in normal flow:
           photo on top, every bit of copy underneath it. the meal type badge
           is the only thing left sitting on the photo */
        .recipeCard {
            aspect-ratio: auto;
            display: flex;

            .recipeCardLink {
                display: flex;
                flex-direction: column;
                height: 100%;
                background-color: #fff;
                border: 1px solid rgba(0, 0, 0, 0.1);
                transition: transform 0.5s, box-shadow 0.5s, border-color 0.5s;
            }

            .recipeCardMedia {
                position: relative;
                inset: auto;
                flex: 0 0 auto;
                aspect-ratio: 16 / 9;
                overflow: hidden;
                background-color: #EDE7DF;
            }

            /* the gradient only existed to keep white copy readable on the
               photo, and the copy is no longer on the photo */
            .recipeCardShade {
                display: none;
            }

            .recipeTagWrap {
                .recipeTag {
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
                }
            }

            .recipeCardContent {
                position: relative;
                inset: auto;
                display: flex;
                flex-direction: column;
                flex: 1 1 auto;
                padding: 22px 25px 25px;
                transform: none;

                .recipeCardTitle {
                    color: #3C3C3C;
                }

                .recipeCardMeta {
                    .recipeMetaItem {
                        color: rgba(60, 60, 60, 0.75);
                    }
                }

                .recipeCardCta {
                    /* pinned to the foot so cards in a row line up */
                    margin-top: auto;
                    padding-top: 18px;
                    color: #88401B;
                    opacity: 1;

                    &::after {
                        flex: 0 0 auto;
                        background-color: var(--lt-yellow-color);
                    }
                }
            }

            /* tapping leaves a stuck :hover on touch, so no lift here */
            &:hover {
                .recipeCardLink {
                    transform: none;
                    box-shadow: none;
                }

                .recipeCardMedia {
                    img {
                        transform: none;
                    }
                }
            }
        }

        .recipeAcc {
            background-color: #fff;
            border: 1px solid rgba(0, 0, 0, 0.12);
            border-radius: 20px;
            transition: background-color 0.4s, border-color 0.4s;

            &:not(:last-child) {
                margin-bottom: 15px;
            }

            .accClick {
                position: relative;
                display: flex;
                align-items: center;
                gap: 12px;
                padding: 18px 60px 18px 22px;
                cursor: pointer;

                .accTitle {
                    font-family: "Nunito Sans", sans-serif;
                    font-size: 20px;
                    font-weight: 700;
                    color: #3C3C3C;
                    transition: color 0.4s;
                }

                .accCount {
                    min-width: 30px;
                    height: 26px;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 0 8px;
                    border-radius: 85px;
                    background-color: var(--lt-yellow-color);
                    color: #88401B;
                    font-size: 14px;
                    font-weight: 600;
                    transition: background-color 0.4s;
                }

                &::after {
                    content: '';
                    position: absolute;
                    right: 26px;
                    top: 50%;
                    width: 10px;
                    height: 10px;
                    border-right: 2px solid #88401B;
                    border-bottom: 2px solid #88401B;
                    transform: translateY(-75%) rotate(45deg);
                    transition: transform 0.4s;
                }
            }

            .accBox {
                /* opened / closed with slideDown() / slideUp(), so the panel
                   keeps its own inline display while it animates */
                display: none;
                padding: 0 15px 18px;

                .accBoxInn {
                    /* fallback layout, used until slick takes over */
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 15px;

                    &.slick-initialized {
                        /* --dotsSpace keeps the arrows centred on the cards
                           whether or not slick ends up drawing the dots */
                        --dotsSpace: 0px;
                        display: block;
                        position: relative;
                        margin: 0 -8px;
                        padding-bottom: var(--dotsSpace);

                        .recipeAccSlide {
                            padding: 0 8px;
                        }

                        &.slick-dotted {
                            --dotsSpace: 34px;
                        }
                    }

                    .recipeAccSlide {
                        min-width: 0;
                        display: flex;

                        .recipeCard {
                            width: 100%;
                        }
                    }

                    /* card heights vary with the title, so the slides are
                       stretched instead of floated to keep the row even */
                    .slick-track {
                        display: flex;
                        align-items: stretch;

                        /* slick's clearfix would sit in the flex row */
                        &::before,
                        &::after {
                            display: none;
                        }
                    }

                    .slick-slide {
                        flex: 0 0 auto;
                        height: auto;
                    }

                    .slick-arrow {
                        position: absolute;
                        top: calc((100% - var(--dotsSpace, 0px)) / 2);
                        transform: translateY(-50%);
                        z-index: 3;
                        background-color: rgba(255, 255, 255, 0.92);
                        border-color: rgba(0, 0, 0, 0.12);
                        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

                        &.slick-prev {
                            left: 0;
                        }

                        &.slick-next {
                            right: 0;
                        }
                    }

                    .slick-dots {
                        position: absolute;
                        left: 0;
                        right: 0;
                        bottom: 6px;
                        display: flex;
                        flex-wrap: wrap;
                        align-items: center;
                        justify-content: center;
                        gap: 8px;
                        margin: 0;
                        padding: 0;
                        list-style: none;

                        li {
                            line-height: 0;
                        }

                        button {
                            width: 9px;
                            height: 9px;
                            padding: 0;
                            border: none;
                            border-radius: 50%;
                            font-size: 0;
                            background-color: rgba(136, 64, 27, 0.28);
                            transition: all 0.4s;
                            cursor: pointer;
                        }

                        li.slick-active {
                            button {
                                width: 24px;
                                border-radius: 85px;
                                background-color: #88401B;
                            }
                        }
                    }
                }
            }

            .recipeCard {
                grid-column: auto;

                .recipeCardMedia {
                    aspect-ratio: 16 / 9;
                }

                .recipeCardContent {
                    .recipeCardTitle {
                        font-size: 21px;
                    }
                }
            }

            &.active {
                background-color: var(--lt-yellow-color);
                border-color: transparent;

                .accClick {
                    .accTitle {
                        color: #88401B;
                    }

                    .accCount {
                        background-color: #fff;
                    }

                    &::after {
                        transform: translateY(-25%) rotate(-135deg);
                    }
                }

                .accBox {
                    display: block;
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .productSec {
        &.active {
            &::after {
                opacity: 0.2;
            }
        }

        .productSecBtm {
            justify-content: center;

            .prodCard {
                width: calc(24% - 10px);

                .prodTop {
                    .prodAbsImg {
                        width: 56px;
                        height: 50px;
                    }
                }

                .prodBtm {
                    min-height: 50px;

                    .prodName {
                        font-size: 14px;
                    }
                }
            }
        }
    }

    .recipeSec {
        &::before {
            top: -60px;
            left: -40px;
            width: 140px;
            height: 140px;
        }

        .recipeSecTop {
            .headingWrap {
                .secH {
                    text-align: center;
                }
            }

            .recipeSecTopRt {
                display: none;
            }
        }

        .recipeFilterBar {
            justify-content: center;
            margin-bottom: 30px;

            .recipeFilterChip {
                font-size: 15px;
                padding: 8px 20px;
            }
        }

        .recipeResBtn {
            display: block;
            padding-top: 30px;

            .commonDetBtn {
                margin: 0px auto;
            }
        }
    }
}

@media (max-width: 768px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                height: 100vh;

                .banSlide {
                    .banSlideInn {
                        .banCardTxt {
                            .banHead {
                                font-size: 40px;
                                line-height: 50px;
                            }
                        }

                        .banLtBg {
                            height: 200px;
                        }

                        .banRtBg {
                            width: 100px;
                            height: 170px;
                        }

                        .banElement {
                            right: 40px;
                        }
                    }
                }
            }
        }
    }

    .productSec {
        .productSecBtm {
            .prodCard {
                width: calc(32% - 10px);
            }
        }

        &.active {
            &::before {
                width: 90px;
                height: 600px;
            }

            &::after {
                height: 150px;
                width: 150px;
            }
        }
    }

}

@media (max-width: 640px) {
    .popularSec {
        .popularSecBtm {
            .popularSlider {
                .popularSlide {
                    .popularCard {
                        .popularCardTop {
                            height: 230px;
                        }
                    }
                }
            }
        }
    }

    /* single column tiles */
    .recipeSec {
        .recipeSecBtm {
            .recipeGrid {
                gap: 18px;
                grid-template-columns: 1fr;
            }
        }

        .recipeCard {
            .recipeCardContent {
                padding: 20px;

                .recipeCardTitle {
                    font-size: 22px;
                }
            }
        }

        .recipeAcc {
            .accClick {
                padding: 16px 52px 16px 18px;

                .accTitle {
                    font-size: 18px;
                }

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

            .accBox {
                padding: 0 12px 15px;

                .accBoxInn {
                    grid-template-columns: 1fr;
                }
            }

            .recipeCard {
                .recipeCardMedia {
                    aspect-ratio: 16 / 9;
                }
            }
        }
    }
}

@media (max-width: 575px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                height: calc(100vh - 36px);

                .banSlide {
                    .banSlideInn {
                        .banCardTxt {
                            .banHead {
                                font-size: 32px;
                                line-height: 42px;
                                position: relative;
                                top: 15px;
                            }
                        }

                        .banSlideMainDiv {
                            .banCardImg {
                                width: 100%;
                                height: auto;
                            }
                        }

                        .banLtWhole {
                            left: -50px;
                            width: 130px;
                            height: 130px;
                        }

                        .banElement {
                            right: -10px;
                            width: 80px;
                        }
                    }
                }
            }
        }
    }

    .productSec {
        .productSecBtm {
            .prodCard {
                width: calc(50% - 10px);
            }
        }
    }

    .popularSec {
        .popularSecBtm {
            .popularSlider {
                .popularSlide {
                    .popularCard {
                        .popularCardTop {
                            height: 400px;
                        }
                    }
                }
            }
        }
    }

    .recipeSec {
        position: relative;

        &::after {
            content: '';
            position: absolute;
            bottom: -35px;
            right: 0;
            background-image: url(../images/common/paneer-bg.png);
            background-repeat: no-repeat;
            background-size: contain;
            width: 80px;
            height: 80px;
            z-index: -1;
        }

        .recipeCard {
            .recipeCardMedia {
                aspect-ratio: 3 / 2;
            }
        }
    }
}

@media (max-width: 480px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                .banSlide {
                    .banSlideInn {
                        .banSlideMainDiv {
                            .banBtnDiv {
                                padding: 15px 15px 0px;
                                flex-wrap: wrap;
                                gap: 15px;

                                .banBtn {
                                    width: 100% !important;

                                    .banBtnLink {
                                        width: 100%;
                                        margin: 0px auto !important;
                                    }

                                    &:hover {
                                        width: 100%;
                                    }
                                }
                            }

                            .banCardImg {
                                width: 100%;
                                height: 350px;

                                img {
                                    object-fit: cover;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 420px) {

    .popularSec {
        .popularSecBtm {
            .popularSlider {
                .popularSlide {
                    .popularCard {
                        .popularCardTop {
                            height: 300px;
                        }
                    }
                }
            }
        }
    }

    .recipeSec {
        .recipeCard {
            .recipeCardMedia {
                aspect-ratio: 3 / 2;
            }
        }
    }
}

/*==== min width ====*/
@media (min-width: 1921px) {
    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                height: 90vh;

                .banSlide {
                    .banSlideInn {
                        .banSlideMainDiv {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            text-align: center;
                            flex-direction: column;
                        }
                    }
                }
            }
        }
    }

    .productSec {
        .productSecBtm {
            .prodCard {
                .prodBtm {
                    .prodName {
                        font-size: clamp(18px, 0.9vw, 22px);
                    }
                }
            }
        }
    }

    .frosAbtSec {
        .frosAbtSlide {
            .frosAbtCard {
                .frosAbtHead {
                    font-size: clamp(22px, 0.9vw, 24px);
                }
            }
        }
    }
}

@media (min-width: 2400px) {

    .bannerWrap {
        .bannerWrapInn {
            .banSlider {
                height: 80vh;
            }
        }
    }

    .popularSec {
        .popularSecBtm {
            .popularSlider {
                .popularSlide {
                    .popularCard {
                        .popularCardTop {
                            height: 600px;
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 2880px) {
    .popularSec {
        .popularSecBtm {
            .popularSlider {
                .popularSlide {
                    .popularCard {
                        .popularCardTop {
                            height: 650px;
                        }
                    }
                }
            }
        }
    }
}

@media (min-width: 3840px) {
    .popularSec {
        .popularSecBtm {
            .popularSlider {
                .popularSlide {
                    .popularCard {
                        .popularCardTop {
                            height: 780px;
                        }
                    }
                }
            }
        }
    }
}