@media screen and (max-width: 1440px) {
    .snackArrives .snackitems {
    margin-left: 142px;
}
}

@media screen and (max-width: 1366px) {
      .snackArrives .snackitems {
    margin-left: 90px;
}
}


@media screen and (max-width: 1240px) {
     .snackArrives .snackitems {
    margin-left: 42px;
}
}


@media screen and (max-width: 991px) {
    .header .navbar {
        height: 65px;
    }

    .header .logo {
        height: 20px;
    }

    .header .btn_blue {
        height: 34px;
        max-width: 160px;
    }

    .snackSmart .slick-dots {
        display: flex;
    }

    .header .btn_blue {
        padding: 0 16px;
    }
}


@media screen and (max-width: 768px) {
    :root {
        --fnt48: 26px;
        --fnt32: 22px;
        --fnt22: 18px;
        --fnt20: 18px;
        --fnt16: 16px;
        --fnt14: 10px;

        --ls4: 2px;
        --ls2: 1.5px;
        --ls15: 1px;
        --ls1: 1px;
    }

    .btn_blue,
    .btn_grey {
        height: 42px;
        font-size: 12px;
        padding: 0 16px;
    }

    .banner .contentPosition {
        top: inherit;
        transform: inherit;
        bottom: 24px;
    }

    .banner .mobileImg {
        min-height: 600px;
    }

    .banner .blueCard .fnt14 {
        margin: 8px auto 0 auto;
        max-width: 74px;
    }

    .prepackaged .afterLine:after {
        height: 1px;
        width: 272px;
        top: inherit;
        right: inherit;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #B1C7D6;
    }

    .prepackaged p {
        max-width: 100%;
        padding: 12px 0;
        font-weight: var(--fw300);
    }

    .prepackaged {
        padding: 76px 0;
    }

    .snack .imght559px {
        height: 350px;
        object-fit: cover;
    }

    .snack {
        padding: 16px 0 4px 0;
    }

    .snack .imght47px {
        height: 29px;
        width: 24px;
    }

    .snack p {
        font-weight: var(--fw300);
    }

    .snack .mb64px {
        margin-bottom: 32px;
    }

    .snack h2 {
        max-width: 322px;
    }

    .chooseSnack .nav-link {
        font-size: var(--fnt12);
        line-height: var(--lh120);
        padding: 16px 20px;
        max-width: 100%;
        width: 100%;
        color: var(--white);
        background-color: rgba(139, 170, 191, 1);
        margin-bottom: 32px;
        width: 100%;
    }

    .chooseSnack .tab-content .tab-pane {
        display: block;
        opacity: 1;
    }

    .chooseSnack .imght292px {
        height: 216px;
        object-fit: cover;
    }

    .chooseSnack h3 {
        font-size: var(--fnt16);
        line-height: var(--lh150);
        margin: 12px 0;
    }

    .chooseSnack .text {
        font-weight: var(--fw300);
        font-size: var(--fnt12);
    }

    .chooseSnack .tag {
        font-size: 10px;
        padding: 10px;
    }

    .chooseSnack h3 {
        line-height: var(--lh120);
        margin: 24px 0 10px 0;
    }

    .chooseSnack .maxwid267px {
        max-width: 200px;
    }

    .mobileDesign {
        padding: 80px 0 56px 0;
    }

    .mobileDesign .imght393px {
        height: 393px;
        object-fit: cover;
    }

    .freshDrop {
        padding: 0 0 80px 0;
    }

    .freshDrop h3 {
        font-size: var(--fnt22);
    }

    .freshDrop .imght64px {
        height: 32px;
        width: 32px;
    }

    .freshDrop .fnt14 {
        font-weight: var(--fw300);
        line-height: var(--lh120);
    }

    .firstFreshDrop {
        background-color: inherit;
        padding: 0;
    }

    .firstFreshDrop .imght558px {
        height: 330px;
        object-fit: cover;
    }

    .firstFreshDrop h2 {
        line-height: var(--lh150);
        text-align: center;
        margin: 24px 0;
        max-width: 297px;
    }

    .firstFreshDrop p {
        max-width: 196px;
        margin: 0 auto 24px auto;
    }

    .soulOfSnack {
        padding: 66px 0 0 0;
    }

    .soulOfSnack h2 {
        margin-bottom: 24px;
    }

    .soulOfSnack .imght593px {
        height: 290px;
        object-fit: cover;
    }

    .soulOfSnack .imgPosition {
        height: 53px;
        width: 49px;
    }

    .snackArrives {
        background: rgba(255, 248, 236, 1);
        padding: 70px 0 55px 0;
    }

    .snackArrives h2 {
        font-size: 18px;
        max-width: 310px;
    }

    .snackArrives .imght360px {
        height: 236px;
        object-fit: cover;
    }

    .snackArrives .slick-slide {
        padding: 0 4px;
    }

    .snackArrives h3 {
        font-size: var(--fnt16);
        margin: 12px 0;
    }

    .snackArrives p {
        font-weight: var(--fw300);
        font-size: var(--fnt12);
        line-height: var(--lh120);
    }

    .snackSmart {
        padding: 80px 0;
    }

    .snackSmart h2 {
        font-size: 18px;
    }

    .snackSmart .mt32px {
        margin-top: 24px;
    }

    .snackSmart h3 {
        font-size: 16px;
    }

    .snackSmart p {
        font-weight: var(--fw300);
        font-size: var(--fnt12);
        line-height: var(--lh120);
    }

    .snackSmart .creamCard {
        min-height: 280px;
    }

    .questions h2 {
        line-height: var(--lh150);
        max-width: 250px;
        margin: 0 auto 4px auto;
    }

    .questions .accordion-button {
        font-size: var(--fnt16);
    }

    .questions .accordion-item {
        padding: 10px;
    }

    .questions .accordion-body p {
        font-weight: var(--fw300);
        font-size: var(--fnt12);
        line-height: var(--lh120);
    }

    .questions {
        padding-bottom: 80px;
    }

    .availabilityDepends {
        padding: 32px 0;
    }

    .availabilityDepends h6 {
        line-height: var(--lh120);
        margin-bottom: 10px;
    }

    .availabilityDepends h3 {
        line-height: var(--lh120);
    }

    .availabilityDepends a {
        max-width: 328px;
        margin-bottom: 27px;

    }

    .availabilityDepends .blueCard {
        padding: 18px 0;
        max-width: 328px;
        margin: 0 auto;
    }

    .availabilityDepends .colorChange {
        font-size: var(--fnt14);
        line-height: var(--lh120);
    }

    .availabilityDepends .mb36px {
        margin-bottom: 28px;
    }

    .accessModal .modal-body .imght707px {
        height: 204px;
    }

    .accessModal .modal-body h2 {
        font-size: 18px;
    }

    .accessModal .modal-body h3 {
        font-weight: var(--fw300);
        font-size: var(--fnt12);
        margin-bottom: 24px;
    }

    .accessModal .btn-close {
        top: 18px;
        right: 18px;
        font-size: 12px;
    }

    .accessModal .modal-content {
        padding: 48px 30px;
    }

    .accessModal .form-control {
        font-size: 14px;
    }

    .footer {
        padding: 32px 0;
    }

    .footer .imght30px {
        margin-bottom: 24px;
    }

    .footer .title {
        font-size: 14px;
    }

    .footer .text {
        font-size: 14px;
    }

    .footer .underLine {
        margin-bottom: 4px;
    }

    .footer .pages li a {
        font-size: 14px;
    }

    .ritualModal.accessModal .modal-content {
        padding: 90px 16px 40px 16px;
        height: 520px;
        overflow-y: auto;
    }

    .ritualModal .modalContent h3 {
        margin: 32px 0 12px 0;
        font-size: var(--fnt16);
        font-weight: var(--fw400);
        line-height: var(--lh150);
    }

    .ritualModal .modalContent h6 {
        font-size: var(--fnt12);
        line-height: var(--lh120);
        margin-bottom: 48px;
    }

    .ritualModal .modalContent p {
        font-weight: var(--fw300);
    }

    .ritualModal .modalContent .form-check-label {
        padding: 16px;
        text-align: center;
    }

    .ritualModal .modalContent .form-check {
        margin-bottom: 5px;
    }

    .quantity-wrapper {
        padding: 15px 22px;
        margin-bottom: 20px;
    }

    .quantity-wrapper p {
        font-weight: var(--fw300);
    }

    .finalStep .imght216px {
        height: 216px;
        object-fit: cover;
    }

    .contentBG {
        padding: 12px;
    }

}


@media screen and (max-width: 425px) {}