@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Francois+One&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Francois+One&family=Freeman&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');


:root {
    --primary: #0c7b09;
    --heading: #032802;
    --text-color: #3c3c3c;
    --white-color: #ffffff;
    --border-color: #e5e5e5;
    --font-main: "Onest", sans-serif;


    /* new added presets */
    --section-heading: #111110;
    --section-para: #7C7C7C;
    --text-muted: #9E9E9E;

    --outline-border: #EEEEEE;

    --yellow-color: #F07C00;
    --blue-color: #008FB3;
    --red-color: #CC0000;
    --violet-color: #A401AC;
    --green-color: #0C7B09;
    --gray-color: #5C5C5C;


    --deals-primary: #954900;
    --primary-grad: linear-gradient(135deg,
            #0c7b09 0%,
            #3fae2a 30%,
            #6ccf3b 65%,
            #b8f15a 100%);
}

/* modal screen fix */
html,
body {
    width: 100%;
    overflow-x: hidden;
}

body.modal-open {
    padding-right: 0 !important;
}

.modal {
    padding-right: 0 !important;
}

.tilte-dark-g {
    color: #032802;
}

::selection {
    background: var(--green-color);
    color: var(--white-color);
}

.user-select-none {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.warning-outline-btn,
.warning-primary-btn,
.warning-yellow-btn,
.secondary-green-btn,
.primary-green-btn {
    padding: 10px 19px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    border: 0px;
}

.primary-green-btn {
    color: var(--white-color);
    background-color: var(--primary);
}

.secondary-green-btn {
    color: var(--primary);
    background-color: #ecf4eb;
}

.warning-yellow-btn {
    color: var(--yellow-color);
    background-color: #FEF5EB;
}

.warning-primary-btn {
    color: var(--white-color);
    background-color: var(--yellow-color);
}

.warning-outline-btn {
    color: var(--yellow-color);
    background-color: var(--white-color);
    border: 1px solid var(--yellow-color);
}

.disabled {
    color: #A0A09A;
    background-color: #D4D4CE;
    border-color: #D4D4CE;
}

.txt-primary {
    color: var(--primary);
}

.txt-lable {
    font-weight: 700;
    font-size: 16px;
    color: var(--section-heading);
    margin-bottom: 0px;
}

.txt-sub-lable {
    font-weight: 500;
    font-size: 14px;
    color: #9C9C9C;
    margin-bottom: 0px;
}

.txt-orange {
    color: #F07C00;
}

.txt-dark {
    color: #202020;
}

/* =========== My Order =============== */
.border-card {
    border: 1px solid var(--outline-border);
    border-radius: 12px;
        padding: 10px;
    background-color: var(--white-color);
}

.my-orders-main .user-profile {
    width: 68px;
    height: 68px;
    border-radius: 50px;
    overflow: hidden;
}

.my-orders-main .user-profile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.user-name-content h5 {
    font-size: 20px;
    font-weight: 700;
    color: var(--section-heading);
}

.user-name-content p {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Tab header */
.myorders-tab-header {
    width: 100%;
}

.myorders-tab-header .nav-item {
    width: 100%;
}

.myorders-tab-header .nav-link {
    width: 100%;
    border: 0;
    border-radius: 8px;
    padding: 16px 18px;
    font-size: 16px;
    font-weight: 500;
    color: var(--section-heading);
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    background: transparent;
}

.myorders-tab-header .nav-link i {
    font-size: 22px;
    line-height: 1;
}

.myorders-tab-header .nav-link.active {
    background: var(--primary);
    color: var(--white-color);
}


.myorders-tab-header .nav-link.active:hover {
    color: var(--white-color);
}

.myorders-tab-header .nav-link.active .order-tab-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(93%) saturate(0%) hue-rotate(201deg) brightness(106%) contrast(106%);
}

.tab-content-center {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ops-image-container {
    width: 150px;
    height: 140px;
}

.ops-image-container img {
    width: 100%;
    height: 100%;
}

.card-order-title,
.tab-order-title {
    color: var(--section-heading);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.card-order-title {
    font-size: 18px;
}

.card-order-para,
.tab-order-para {
    color: var(--section-para);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
}

/* common select width */
.select2-common {
    width: 150px;
}

.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 22px !important;
    display: flex;
    align-items: center;
    padding: 0 36px 0 14px;
    background: var(--white-color);
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-radius: 22px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--section-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    padding: 0;
}


.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 14px;
    height: 14px;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url('../images/icon/drop-arrow-down.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: translateY(-50%) rotate(180deg);
}

.select2-dropdown {
    margin-top: 6px;
    border: 1px solid var(--border-color);
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.select2-results__option {
    padding: 10px 14px;
    font-size: 14px;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #f3f8f3;
    color: var(--section-heading);
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: #eaf6ea;
    color: var(--primary);
}

.order-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}

.order-price-flex {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.order-card {
    /* width: 86px;
    height: 86px; */
    border-radius: 14px;
    background-color: #F5F5F5;
    padding: 5px;
}

/* .order-card-list{
    overflow-x: auto;
} */

.product-count {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-count h6 {
    color: #A0A09A;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 0px;
}

.order-status {
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    margin-bottom: 0px;
    padding: 7px 12px;
}

.order-yellow {
    color: var(--yellow-color);
    background-color: #FEF5EB;
}

.order-blue {
    color: var(--blue-color);
    background-color: #D5F7FF;
}

.order-red {
    color: var(--red-color);
    background-color: #F9EDED;
}

.order-violet {
    color: var(--violet-color);
    background-color: #FEECFF;
}

.order-green {
    color: var(--green-color);
    background-color: #EAF3EA;
}

.card-title-main {
    color: var(--section-heading);
    font-size: 18px;
    font-weight: 700;
}

.card-count-main {
    color: #868686;
    font-size: 14px;
    font-weight: 500;
}

.order-card-mini {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    background-color: #F5F5F5;
    padding: 5px;
}

.order-product-info h6 {
    font-size: 16px;
    font-weight: 600;
    color: var(--section-heading);
    margin-bottom: 5px;
}

.order-product-info p {
    font-size: 14px;
    font-weight: 400;
    color: var(--text-muted);
    margin-bottom: 0px;
}

.order-product-price {
    justify-content: end;
}

.order-product-price h6 {
    font-size: 18px;
    color: var(--section-heading);
}

.order-product-price p {
    font-size: 16px;
    color: var(--text-muted);
}

.bill-info-right,
.bill-info-left {
    font-size: 16px;
    font-weight: 500;
    color: var(--gray-color);
    margin-bottom: 0px;
}

.bill-info-right {
    text-align: end;
}

.txt-green {
    color: var(--green-color);
}

.txt-black {
    color: var(--section-heading);
}

/* Order track icon */
#Order-Cancelled,
#Delivered,
#Out-For-Delivery,
#Order-Confirmed,
#Order-Placed {
    border-radius: 6px;
    margin-bottom: 10px;
}

.stage-active#Order-Placed {
    background-color: #FEF5EB;
}

.stage-active#Order-Confirmed {
    background-color: #D5F7FF;
}

.stage-active#Out-For-Delivery {
    background-color: #FEECFF;
}

.stage-active#Delivered {
    background-color: #E8F5E8;
}


.active_icon {
    display: none;
}

.inactive_icon {
    display: block;
}

.stage-completed .inactive_icon,
.stage-active .inactive_icon {
    display: none;
}

.stage-completed .active_icon,
.stage-active .active_icon {
    display: block;
}

#Order-Cancelled h6,
#Delivered h6,
#Out-For-Delivery h6,
#Order-Confirmed h6,
#Order-Placed h6 {
    color: #6B7280;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.stage-active#Order-Placed h6,
.stage-completed#Order-Placed h6 {
    color: var(--yellow-color);
}

.stage-active#Order-Confirmed h6,
.stage-completed#Order-Confirmed h6 {
    color: var(--blue-color);
}

.stage-active#Out-For-Delivery h6,
.stage-completed#Out-For-Delivery h6 {
    color: var(--violet-color);
}

.stage-active#Delivered h6,
.stage-completed#Delivered h6 {
    color: var(--green-color);
}

.stage-active#Order-Cancelled h6,
.stage-completed#Order-Cancelled h6 {
    color: var(--red-color);
}

#Order-Cancelled p,
#Delivered p,
#Out-For-Delivery p,
#Order-Confirmed p,
#Order-Placed p {
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 0px;
}

.order_icons {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
}

.order_icons::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 90px;
    top: -88px;
    left: 50%;
    background: repeating-linear-gradient(to bottom,
            #b6b5b5,
            #b6b5b5 6px,
            transparent 6px,
            transparent 12px);
    z-index: 3;
}

.stage-completed#Order-Confirmed .order_icons::before,
.stage-active#Order-Confirmed .order_icons::before {
    background: #F07C0033;
}

.stage-completed#Out-For-Delivery .order_icons::before,
.stage-active#Out-For-Delivery .order_icons::before {
    background: #A401AC33;
}

.stage-active#Delivered .order_icons::before,
.stage-completed#Delivered .order_icons::before,
.stage-completed#Order-Placed .order_icons::before,
.stage-active#Order-Placed .order_icons::before {
    background: #0C7B0933;
}

.stage-completed#Order-Cancelled .order_icons::before,
.stage-active#Order-Cancelled .order_icons::before {
    background: #008FB333;
}

li:first-child .order_icons::before {
    display: none;
}


/* popup model */
.modal-title {
    font-size: 20px;
    font-weight: 500;
}

.modal-title,
.reason-box h6 {
    color: var(--section-heading);
}

.cancel-modal {
    border-radius: 12px;
    padding: 10px;
}

.reason-box {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 15px;
}

.form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

.form-check-input:focus {
    box-shadow: none;
}

.form-check-label {
    color: var(--gray-color);
}

#otherReasonBox textarea:focus {
    border: 1px solid var(--primary);
    box-shadow: none;
}

.footer-btn {
    display: flex;
    gap: 10px;
}

.footer-btn button {
    flex: 1;
}


/* Order success and reject model */
.order-success-dialog {
    /* max-width: 370px; */
}

.order-success-modal {
    border-radius: 12px;
    border: 0;
}

.order-success-modal .modal-body {
    padding: 28px 28px 24px;
}

.order-success-icon {
    width: 72px;
    height: 72px;
    background: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    position: relative;

    animation: pulse 1.8s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(11, 135, 11, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(11, 135, 11, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(11, 135, 11, 0);
    }
}

.order-success-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
    color: var(--section-heading);
}

.order-success-text {
    font-size: 14px;
    color: var(--gray-color);
    max-width: 320px;
    margin: 0 auto 20px;
    line-height: 1.5;
}

#orderSuccessModal .secondary-green-btn {
    border: 1px solid var(--primary);
    background-color: var(--white-color);
}

.order-summary-box {
    background: #f4fbf5;
    border: 1px solid #dcefe0;
    border-radius: 8px;
    padding: 14px;
}

.order-summary-box h6 {
    color: #111;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
}

.order-summary-box h6 i {
    color: #087b08;
    margin-right: 4px;
}

.summary-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--gray-color);
    margin-bottom: 11px;
}

.summary-flex:last-child {
    margin-bottom: 0px;
}

.summary-flex strong {
    color: var(--section-heading);
    font-weight: 700;
}

.model-view-details {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.order-cancelled-icon {
    width: 72px;
    height: 72px;
    background: var(--red-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    position: relative;

    animation: pulse-c 1.8s infinite;
}

@keyframes pulse-c {
    0% {
        box-shadow: 0 0 0 0 rgba(204, 0, 0, 0.425);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(250, 229, 229, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(250, 229, 229, 0);
    }
}

/* toast */
.order-custom-toast {
    background-color: #0AA437;
    color: var(--white-color);
    border-radius: 6px;
    font-size: 14px;
    padding: 6px 10px;
    width: fit-content;
}

.search-expand-wrap {
    position: relative;
    width: 38px;
    height: 38px;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-expand-wrap.active {
    width: 290px;
}

.expand-search-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0 44px 0 16px;
    border: 1px solid transparent;
    border-radius: 50px;
    background: #fff;
    font-size: 14px;
    outline: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s, border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.search-expand-wrap.active .expand-search-input {
    opacity: 1;
    pointer-events: all;
    border-color: var(--border-color);

}

/* Button */
.search-toggle,
.search-toggle:focus,
.search-toggle:active,
.search-toggle:focus-visible,
.search-toggle *,
.search-toggle *:focus,
.search-toggle *:active,
.search-toggle *:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.search-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border-radius: 50px;
    border: 1px solid transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s, border-color 0.2s;
}


.search-expand-wrap.active .search-toggle {
    border-color: var(--border-color) !important;
    color: var(--border-color);
}

/* =========== Address Flow ============ */
#My-Order-tab-first .nav-link {
    display: flex;
    flex-direction: column;
    justify-items: center;
    text-align: center;
}

#My-Order-tab-first.myorders-tab-header .nav-link.active {
    background: transparent;
    color: var(--section-heading);
    border: 1px solid var(--primary);
}

#My-Order-tab-first.myorders-tab-header .nav-link.active .order-tab-icon {
    filter: none;
}

#My-Order-tab-first.myorders-tab-header .nav-link {
    padding: 16px 0px;
}

.my-address-details .empty-card-center {
    border: 1px solid var(--outline-border);
    border-radius: 12px;
    background-color: var(--white-color);
    height: 70dvh;
}

.my-address-details .tab-lable {
    font-size: 16px;
    font-weight: 500;
    color: var(--section-heading);
    margin-bottom: 10px;
}

.saved-address-card {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: visible;
    background: var(--white-color);
    margin-bottom: 16px;
    position: relative;
}

.saved-address-header {
    background: #e6f5e6;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--section-heading);
}

.saved-address-body {
    padding: 14px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.saved-address-body h6 {
    color: var(--section-heading);
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 6px;
}

.saved-address-body p {
    font-size: 13px;
    color: var(--gray-color);
    margin-bottom: 0;
    line-height: 1.5;
}

.custom-dropdown {
    position: relative;
    display: inline-block;
}

.custom-dropdown .dropdown-toggle-btn {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease;
}

.custom-dropdown .dropdown-toggle-btn:hover {
    background: #f2fbf3;
}

.custom-dropdown .dropdown-toggle-btn i {
    font-size: 18px;
}

.custom-dropdown .custom-dropdown-menu {
    position: absolute;
    top: 42px;
    right: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    display: none;
    z-index: 999;
    animation: dropdownShow 0.2s ease;
}

.custom-dropdown.active .custom-dropdown-menu {
    display: block;
}

.custom-dropdown .dropdown-list {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s ease;
}

.custom-dropdown .dropdown-list:hover {
    background: #f5f5f5;
}

.custom-dropdown .dropdown-list.delete {
    color: #e53935;
}

.custom-dropdown .dropdown-list.delete:hover {
    background: #fff1f1;
}

@keyframes dropdownShow {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.membership-card {
    background-image: url('../images/img/membership-card.webp');
    background-position: center;
    background-size: cover;
    border-radius: 12px;
    overflow: hidden;
}

.membership-card-title {
    color: var(--white-color);
    font-size: 25px;
    font-weight: 400;
    font-family: Impact;
    margin-bottom: 0px;
}

.membership-card-btn {
    color: var(--section-heading);
    font-size: 14px;
    font-weight: 600;
    border: 0px;
    border-radius: 50px;
    padding: 5px 10px;
    background: linear-gradient(135deg,
            #f9dc4b 0%,
            #ffe978 18%,
            #f3c11c 35%,
            #fff3a1 50%,
            #dca600 68%,
            #f4cf2b 100%);
    display: flex;
    align-items: center;
}

.membership-card-btn img {
    transform: rotate(135deg);
}

.add-address-details-wrapper {
    background: #F3F5F7;
    padding: 10px;
    border-radius: 8px;
    /* max-width: 720px; */
}

.add-address-details-location-card,
.add-address-details-card {
    background: var(--white-color);
    border-radius: 8px;
    padding: 14px 16px;
}

.add-address-details-location-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.add-address-details-map-img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
}

.add-address-details-location-info {
    flex: 1;
}

.add-address-details-location-info h6 {
    color: var(--section-heading);
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.add-address-details-location-info p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #444441;
}

.add-address-details-edit-btn {
    border: 1px solid var(--primary);
    color: var(--primary);
    background: var(--white-color);
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    padding: 5px 13px;
}

.add-address-details-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--section-heading);
}

.add-address-details-tabs {
    gap: 10px;
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 14px;
}

.add-address-details-tab-btn {
    border: 1px solid #33333030;
    background: var(--white-color);
    color: #616A7B;
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.add-address-details-tab-btn.active {
    color: var(--primary);
    border-color: #0C7B0954;
    background: var(--white-color);
}

.add-address-details-tab-btn.active img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(1527%) hue-rotate(89deg) brightness(90%) contrast(93%);
}

.add-address-details-form {
    width: 100%;
    max-width: 370px;
}

.add-address-details-floating-group {
    position: relative;
    margin-bottom: 16px;
}

.add-address-details-floating-group input {
    width: 100%;
    height: 48px;
    border: 1px solid #EBEBEB;
    border-radius: 6px;
    padding: 18px 14px 8px;
    font-size: 14px;
    background: var(--white-color);
    outline: none;
    transition: 0.3s ease;
}

.add-address-details-floating-group input:focus {
    border-color: #EBEBEB;
}

.add-address-details-floating-group label {
    position: absolute;
    left: 14px;
    top: 13px;
    font-size: 14px;
    color: #A0A09A;
    background: var(--white-color);
    padding: 0 4px;
    transition: 0.25s ease;
    pointer-events: none;
}

.add-address-details-floating-group label span {
    color: red;
}

.add-address-details-floating-group input:focus+label,
.add-address-details-floating-group input:not(:placeholder-shown)+label {
    top: -8px;
    left: 12px;
    font-size: 12px;
    color: #A2A2A2;
    z-index: 2;
}

/*=========== Deals Section================ */
.Deals-main .home-banner {
    padding: 60px 50px;
    margin-top: 130px;
    /* height: 100vh; */
    background: url('../images/deals-img/hero-img/hero-banner-bg.webp') no-repeat;
    background-size: cover;
}

.hero-banner-title {
    font-size: 80px;
    font-weight: 400;
    letter-spacing: -2px;
    text-transform: uppercase;
    line-height: 96px;
    font-family: "Archivo Black", sans-serif;
    color: var(--deals-primary);
}

.hero-banner-content {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -1%;
    line-height: 34px;
    color: #9D7E5E;
}

.hero-banner-btn:active,
.hero-banner-btn:hover,
.hero-banner-btn {
    font-size: 20px;
    font-weight: 700;
    color: var(--white-color);
    text-wrap: nowrap;
    background-color: #F07C00;
    border-radius: 8px;
    padding: 12px 25px;
}

.banner-card {
    background-color: var(--white-color);
    border-radius: 10px;
}

.banner-card-image {
    /* width: 80px; */
    height: 80px;
    background-color: #FFD9A0;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-card-image img {
    /* width: 60px; */
    /* height: 60px; */
    object-fit: contain;
}

.banner-card-title {
    color: var(--deals-primary);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -1%;
    line-height: 100%;
    margin-bottom: 10px;
}

.banner-card-text {
    color: #7D5F40;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -1%;
    line-height: 18px;
    margin-bottom: 0px;
}

.Deals-main .btn-list .text {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0px;
    color: var(--white-color);
}

.Deals-main .btn-list .btn-orange {
    width: auto;
}


/* left section */
.img-wrapper {
    width: 430px;
    height: 430px;
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.cart-img {
    width: 430px;
    height: 430px;
    object-fit: contain;
    position: relative;
    z-index: 11;
    transform: translateY(40px);
    z-index: 40;
}

.cart-products-img {
    object-fit: contain;
    position: absolute;
    z-index: 3;
    opacity: 1;
    transform: translate(0, 0) scale(1);
    transition:
        left 1s ease,
        top 1s ease,
        transform 0.7s ease
}

.img-wrapper:hover .cart-products-img {
    z-index: 10;
    transform: scale(1);
}

/* Start Position */
.img-wrapper .product-1 {
    left: -10px;
    top: 30px;
}

.img-wrapper .product-29 {
    left: 15px;
    top: 110px;
}

.img-wrapper .product-2 {
    left: 70px;
    top: 100px;
}

.img-wrapper .product-3 {
    left: 30px;
    top: 160px;
}

.img-wrapper .product-4 {
    left: 270px;
    top: 150px;
}

.img-wrapper .product-5 {
    left: 40px;
    top: 160px;
}

.img-wrapper .product-6 {
    left: 100px;
    top: 40px;
}

.img-wrapper .product-7 {
    left: 110px;
    top: 180px;
}

.img-wrapper .product-8 {
    left: 140px;
    top: 160px;
}

.img-wrapper .product-9 {
    left: 240px;
    top: 150px;
}

.img-wrapper .product-10 {
    left: 170px;
    top: 180px;
}

.img-wrapper .product-11 {
    left: 180px;
    top: 150px;
}

.img-wrapper .product-12 {
    left: 170px;
    top: 120px;
}

.img-wrapper .product-13 {
    left: 180px;
    top: 230px;
}

.img-wrapper .product-14 {
    left: 230px;
    top: 190px;
}

.img-wrapper .product-15 {
    left: 140px;
    top: 190px;
}

.img-wrapper .product-16 {
    left: 250px;
    top: 220px;
}

.img-wrapper .product-17 {
    left: 240px;
    top: 240px;
}

.img-wrapper .product-18 {
    left: 80px;
    top: 230px;
}

.img-wrapper .product-19 {
    left: 220px;
    top: 150px;
}

.img-wrapper .product-20 {
    left: 260px;
    top: 140px;
}

.img-wrapper .product-21 {
    left: 140px;
    top: 230px;
}

.img-wrapper .product-22 {
    left: 200px;
    top: 190px;
}

.img-wrapper .product-23 {
    left: 260px;
    top: 90px;
}

.img-wrapper .product-24 {
    left: 170px;
    top: 90px;
}

.img-wrapper .product-25 {
    left: 180px;
    top: 80px;
}

.img-wrapper .product-26 {
    left: 220px;
    top: 190px;
}

.img-wrapper .product-27 {
    left: 240px;
    top: 200px;
}

.img-wrapper .product-28 {
    left: 300px;
    top: 130px;
}

.img-wrapper .product-30 {
    left: 220px;
    top: 80px;
}

.img-wrapper .product-31 {
    left: 260px;
    top: 120px;
}

.img-wrapper .product-32 {
    left: 260px;
    top: 120px;
}


/* Hover Positions */
.img-wrapper:hover .product-1 {
    left: -50px;
    top: -40px;
}

.img-wrapper:hover .product-29 {
    left: -10px;
    top: 55px;
}

.img-wrapper:hover .product-2 {
    left: 70px;
    top: 35px;
}

.img-wrapper:hover .product-3 {
    left: 0px;
    top: 6px;
}

.img-wrapper:hover .product-4 {
    left: 300px;
    top: 0px;
}

.img-wrapper:hover .product-5 {
    left: 0px;
    top: 60px;
}

.img-wrapper:hover .product-6 {
    left: 60px;
    top: -60px;
}

.img-wrapper:hover .product-7 {
    left: 110px;
    top: 0px;
}

.img-wrapper:hover .product-8 {
    left: 140px;
    top: 70px;
}

.img-wrapper:hover .product-9 {
    left: 240px;
    top: 60px;
}

.img-wrapper:hover .product-10 {
    left: 170px;
    top: -40px;
}

.img-wrapper:hover .product-11 {
    left: 180px;
    top: 40px;
}

.img-wrapper:hover .product-12 {
    left: 180px;
    top: 10px;
}

.img-wrapper:hover .product-13 {
    left: 180px;
    top: 100px;
}

.img-wrapper:hover .product-14 {
    left: 230px;
    top: 20px;
}

.img-wrapper:hover .product-15 {
    left: 140px;
    top: 80px;
}

.img-wrapper:hover .product-16 {
    left: 290px;
    top: 80px;
}

.img-wrapper:hover .product-17 {
    left: 250px;
    top: 0px;
}

.img-wrapper:hover .product-18 {
    left: 80px;
    top: 100px;
}

.img-wrapper:hover .product-19 {
    left: 220px;
    top: 100px;
}

.img-wrapper:hover .product-20 {
    left: 260px;
    top: 30px;
}

.img-wrapper:hover .product-21 {
    left: 140px;
    top: 60px;
}

.img-wrapper:hover .product-22 {
    left: 200px;
    top: 70px;
}

.img-wrapper:hover .product-23 {
    left: 280px;
    top: 40px;
}

.img-wrapper:hover .product-24 {
    left: 120px;
    top: -80px;
}

.img-wrapper:hover .product-25 {
    left: 220px;
    top: -50px;
}

.img-wrapper:hover .product-26 {
    left: 240px;
    top: -30px;
}

.img-wrapper:hover .product-27 {
    left: 300px;
    top: -20px;
}

.img-wrapper:hover .product-28 {
    left: 340px;
    top: 60px;
}

.img-wrapper:hover .product-30 {
    left: 340px;
    top: 0px;
}

.img-wrapper:hover .product-31 {
    left: 260px;
    top: 0px;
}

.img-wrapper:hover .product-32 {
    left: 260px;
    top: 0px;
}

/* z-index */
.img-wrapper .product-1,
.img-wrapper:hover .product-1 {
    width: 140px;
    height: 174px;
    z-index: 12;
}

.img-wrapper .product-2,
.img-wrapper:hover .product-2 {
    width: 73px;
    height: 100px;
    z-index: 7;
}

.img-wrapper .product-3,
.img-wrapper:hover .product-3 {
    width: 77px;
    height: 87px;
    z-index: 24;
}

.img-wrapper .product-4,
.img-wrapper:hover .product-4 {
    width: 78px;
    height: 109px;
    z-index: 15;
}

.img-wrapper .product-5,
.img-wrapper:hover .product-5 {
    width: 87px;
    height: 108px;
    z-index: 33;
}

.img-wrapper .product-6,
.img-wrapper:hover .product-6 {
    width: 96px;
    height: 149px;
    z-index: 4;
}

.img-wrapper .product-7,
.img-wrapper:hover .product-7 {
    width: 82px;
    height: 92px;
    z-index: 27;
}

.img-wrapper .product-8,
.img-wrapper:hover .product-8 {
    width: 64px;
    height: 90px;
    z-index: 18;
}

.img-wrapper .product-9,
.img-wrapper:hover .product-9 {
    width: 73px;
    height: 96px;
    z-index: 9;
}

.img-wrapper .product-10,
.img-wrapper:hover .product-10 {
    width: 83px;
    height: 101px;
    z-index: 20;
}

.img-wrapper .product-11,
.img-wrapper:hover .product-11 {
    width: 71px;
    height: 60px;
    z-index: 32;
}

.img-wrapper .product-12,
.img-wrapper:hover .product-12 {
    width: 71px;
    height: 50px;
    z-index: 13;
}

.img-wrapper .product-13,
.img-wrapper:hover .product-13 {
    width: 71px;
    height: 50px;
    z-index: 28;
}

.img-wrapper .product-14,
.img-wrapper:hover .product-14 {
    width: 77px;
    height: 50px;
    z-index: 11;
}

.img-wrapper .product-15,
.img-wrapper:hover .product-15 {
    width: 64px;
    height: 49px;
    z-index: 30;
}

.img-wrapper .product-16,
.img-wrapper:hover .product-16 {
    width: 64px;
    height: 49px;
    z-index: 16;
}

.img-wrapper .product-17,
.img-wrapper:hover .product-17 {
    width: 81px;
    height: 50px;
    z-index: 29;
}

.img-wrapper .product-18,
.img-wrapper:hover .product-18 {
    width: 73px;
    height: 42px;
    z-index: 26;
}

.img-wrapper .product-19,
.img-wrapper:hover .product-19 {
    width: 66px;
    height: 56px;
    z-index: 5;
}

.img-wrapper .product-20,
.img-wrapper:hover .product-20 {
    width: 56px;
    height: 51px;
    z-index: 21;
}

.img-wrapper .product-21,
.img-wrapper:hover .product-21 {
    width: 77px;
    height: 36px;
    z-index: 10;
}

.img-wrapper .product-22,
.img-wrapper:hover .product-22 {
    width: 67px;
    height: 51px;
    z-index: 2;
}

.img-wrapper .product-23,
.img-wrapper:hover .product-23 {
    width: 77px;
    height: 55px;
    z-index: 25;
}

.img-wrapper .product-24,
.img-wrapper:hover .product-24 {
    width: 90px;
    height: 93px;
    z-index: 6;
}

.img-wrapper .product-25,
.img-wrapper:hover .product-25 {
    width: 65px;
    height: 55px;
    z-index: 17;
}

.img-wrapper .product-26,
.img-wrapper:hover .product-26 {
    width: 64px;
    height: 48px;
    z-index: 1;
}

.img-wrapper .product-27,
.img-wrapper:hover .product-27 {
    width: 69px;
    height: 48px;
    z-index: 23;
}

.img-wrapper .product-28,
.img-wrapper:hover .product-28 {
    width: 72px;
    height: 48px;
    z-index: 8;
}

.img-wrapper .product-29,
.img-wrapper:hover .product-29 {
    width: 81px;
    height: 85px;
    z-index: 31;
}

.img-wrapper .product-30,
.img-wrapper:hover .product-30 {
    width: 62px;
    height: 79px;
    z-index: 14;
}

.img-wrapper .product-31,
.img-wrapper:hover .product-31 {
    width: 61px;
    height: 79px;
    z-index: 3;
}

.img-wrapper .product-32,
.img-wrapper:hover .product-32 {
    width: 53px;
    height: 67px;
    z-index: 33;
}

.cart-float-icons-1 {
    width: 72px;
    height: 84px;
    position: absolute;
    top: -20px;
    left: -40px;
    z-index: 40;
    animation: floatingProduct 3s ease-in-out infinite;
}

.cart-float-icons-2 {
    width: 216px;
    height: 86px;
    position: absolute;
    top: -20px;
    right: -50px;
    z-index: 40;
    animation: floatingProduct 3s ease-in-out infinite;
}

.cart-float-icons-3 {
    width: 72px;
    height: 80px;
    position: absolute;
    bottom: 100px;
    right: 0px;
    z-index: 40;
    animation: floatingProduct 3s ease-in-out infinite;
}

.cart-float-icons-4 {
    width: 72px;
    height: 84px;
    position: absolute;
    bottom: 60px;
    left: -30px;
    z-index: 40;
    animation: floatingProduct 3s ease-in-out infinite;
}

@keyframes floatingProduct {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 768px) {

    .home-banner .img-wrapper {
        margin-top: 100px !important;
    }

}

/*======= salad-sec-details ====== */
.my-orders-main {
    margin-top: 140px;
}

.salad-sec-details {
    margin-top: 170px !important;
}

.tab-order-content .border-card {
    height: auto;
}

/* ====== Deals Section ======== */
.deals-cta-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background-image: url('../images/deals-img/deals-cta-bg.webp');
    background-size: cover;
    padding: 10px 20px;
}

.deals-cta-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.deals-cta-details,
.deals-cta-image {
    position: relative;
    z-index: 2;
}

.deals-cta-image img {
    width: 100%;
    object-fit: contain;
    transform: translateY(25px);
}

.deals-cta-title {
    font-size: 96px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2%;
    margin-bottom: 18px;
    text-transform: uppercase;
    color: #ffd21c;
    text-shadow:
        0 2px 0 #b67b00,
        0 4px 12px rgba(0, 0, 0, 0.25);
}

.deals-cta-title span {
    color: #fff;
}

.deals-cta-text {
    max-width: 700px;
    color: #F3DE8C;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    letter-spacing: -2%;
    margin-bottom: 24px;
}

.deals-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* min-width: 145px;
    height: 50px; */
    padding: 10 28px;
    border-radius: 10px;
    background: #FFD119;
    color: #744110;
    font-size: 20px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.deals-cta-btn:hover {
    background: #FFE15F;
    color: #2D1A00;
}

/*=========== Special Offer For You ========= */
.special-offer-main {
    overflow: hidden;
    background-image: url('../images/deals-img/deals-swipper-bg.webp');
    background-size: cover;
    padding: 10px 0px;
}

.special-offer-title {
    color: var(--section-heading);
    font-size: 64px;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -2%;
    margin-bottom: 14px;
}

.special-offer-text {
    color: #4A4A4A;
    font-size: 24px;
    font-weight: 500;
    line-height: 16px;
    letter-spacing: -1%;
    margin-bottom: 0px;
}

.specialOfferSwiper {
    height: 120px;
}

.specialOfferSwiper .swiper-wrapper {
    align-items: center;
}

.specialOfferSwiper .swiper-slide {
    width: 260px !important;
    height: 120px !important;
    display: flex;
}

/* .special-offer-card {
    width: 100%;
    height: 120px;
    border-radius: 12px;
    background: #fff;
} */

.offer-product-card {
    width: 260px;
    height: 120px;
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

.offer-badge {
    position: absolute;
    top: 0;
    left: 0;
    background: #ff6b00;
    color: #fff;
    font-size: 11px;
    padding: 4px 12px;
    border-bottom-right-radius: 14px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    z-index: 2;
}

.offer-img-box {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    border-radius: 12px;
    overflow: hidden;
    background: #f5f5f5;
}

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

.offer-product-details {
    flex: 1;
}

.offer-product-details h4 {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 3px;
    color: #222;
    letter-spacing: -1%;
    line-height: 16px;
}

.offer-product-details .offer-qty {
    font-size: 12px;
    margin-bottom: 5px;
    color: #5C5C5C;
}

.offer-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.offer-price-row h5 {
    color: var(--section-heading);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -1%;
    margin: 0;
}

.offer-price-row .offer-price {
    font-size: 12px;
    color: #5C5C5C;
    font-weight: 600;
    margin-bottom: 0px;
}

.offer-action {
    width: 76px;
    height: 38px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: width 0.35s ease;
    background: #0b7a22;
}

.offer-action.active {
    width: 82px;
}

.offer-add-btn,
.offer-counter {
    position: absolute;
    inset: 0;
    height: 100%;
    border: 0;
}

.offer-add-btn {
    width: 100%;
    background: #0b7a22;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.35s ease;
}

.offer-counter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 0 10px; */
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.35s ease;
    pointer-events: none;
}

.offer-counter button {
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 0px 10px;
    /* width: 28px;
    height: 28px;
    line-height: 1; */
}

.offer-counter button:focus,
.offer-counter button:hover {
    border: 0px !important;
    outline: 0px !important;
}

.offer-counter .count {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
    display: inline-block;
}

.offer-action.active .offer-add-btn {
    opacity: 0;
    transform: translateX(-40px);
    pointer-events: none;
}

.offer-action.active .offer-counter {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

/* ============= Fresh Section ============= */
.fresh-main .home-banner {
    padding: 60px 50px;
    margin-top: 130px;
    /* height: 100vh; */
    background: url('../images/fresh-img/fresh-hero-banner-bg.webp') no-repeat;
    background-size: cover;
}

.fresh-main .hero-banner-content,
.fresh-main .hero-banner-title {
    color: var(--white-color);
}

.fresh-main .hero-banner-title {
    font-family: "Montserrat";
    font-weight: 900;
    font-size: 96px;
}

.fresh-main .img-wrapper {
    width: 470px;
    height: 420px;
    position: relative;
    overflow: visible;
    isolation: isolate;
}

.hero-banner-img {
    width: 470px;
    height: 420px;
    object-fit: contain;
    position: relative;
    scale: 1.8;
    z-index: 11;
}

.fresh-main .btn-list .text {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
    color: var(--white-color);
}

.fresh-main .cart-float-icons-1 {
    width: 150px;
    height: 150px;
}

.fresh-main .cart-float-icons-2 {
    width: 277px;
    height: 100px;
}

.fresh-main .cart-float-icons-3 {
    width: 94px;
    height: 94px;
}

.fresh-main .cart-float-icons-4 {
    width: 127px;
    height: 127px;
}

/* ========== Every day Fresh Section ========== */
.every-day-fresh-wrapper {
    border-radius: 12px;
    background: url('../images/fresh-img/every-day-fresh-bg.webp') no-repeat;
    background-size: cover;
}

.fresh-cta-img-wrapper {
    width: 390px;
    height: 390px;
    object-position: center;
    padding: 10px 20px;

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

.fresh-cta-title {
    font-family: "Montserrat";
    font-size: 121px;
    font-weight: 900;
    line-height: 124px;
    letter-spacing: -1%;
    text-transform: uppercase;
    margin-bottom: 8px;
    background: linear-gradient(to right, #538A00, #44661A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fresh-cta-span {
    width: 137px;
    height: 137px;
    bottom: 0;
    right: 260px;
    /* transform: rotate(12deg); */
}

.fresh-cta-text {
    font-family: "Nunito";
    font-size: 40px;
    font-weight: 600;
    line-height: 100%;
    letter-spacing: -2%;
    color: #5A802D;
    margin-bottom: 0px;
}

.eat-fresh-wrapper {
    border-radius: 20px;
    background: url('../images/fresh-img/eat-fresh-bg.webp') no-repeat;
    background-size: cover;
}

.eat-freshimg-left-wrapper {
    width: 240px;
    height: 270px;
    object-fit: cover;
    object-position: center;
}

.eat-freshimg-left-wrapper img {
    width: 100%;
    height: 100%;
}

.eat-freshimg-right-wrapper {
    width: 270px;
    height: 245px;
    object-fit: cover;
    object-position: center;

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

.eat-freshimg-right-wrapper img {
    width: 100%;
    height: 100%;
}

.eat-freshimg-center {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.eat-freshimg-center h1 {
    font-family: "Francois One";
    color: var(--white-color);
    font-size: 96px;
    font-weight: 400;
    line-height: 96px;
    letter-spacing: -1%;
    text-transform: uppercase;
    margin-bottom: 0px;
}

.fresh-main .explore-categories.gro-category-section .category-card {
    background-color: #F4F8F1;
    border: 2.9px solid #ECF7E4;
}

html.loading,
body.loading {
    overflow: hidden !important;
    height: 100%;
}

html {
    scrollbar-gutter: stable;
}

.page-content {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}

.page-content.show-content {
    opacity: 1;
    visibility: visible;
}

.site-loader {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 99999;

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

    overflow: hidden;
    pointer-events: none;

    clip-path: circle(150% at 50% 50%);
    transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1);
    will-change: clip-path;
}

/* inward circle close animation */
.site-loader.hide-loader {
    clip-path: circle(0% at 50% 50%);
}

.loader-gif {
    width: clamp(90px, 10vw, 120px);
    height: clamp(90px, 10vw, 120px);
    object-fit: contain;
    position: relative;
    z-index: 2;
    animation: loaderFloat 2.5s ease-in-out infinite;
}

@keyframes loaderFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* --- */
.policy-section {
    padding: 50px 0;
    background: #fff;
    margin-top: 150px;
}

/* .policy-row {
    align-items: flex-start;
} */

.policy-header {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
}

.policy-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--section-heading);
    margin: 0;
}

.policy-updated {
    font-size: 13px;
    font-weight: 600;
    background: #30B325;
    padding: 8px 14px;
    border-radius: 6px;
    color: var(--white-color);
    white-space: nowrap;
}

.policy-desc {
    font-size: 15px;
    line-height: 1.8;
    color: var(--section-para);
    margin-bottom: 25px;
}

.policy-block {
    margin-bottom: 26px;
}

.policy-block h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--section-heading);
    margin-bottom: 10px;
}

.policy-block p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--section-para);
    margin-bottom: 10px;
}

.policy-block ul {
    padding-left: 0;
    margin: 0;
    list-style: none;
}

.policy-block li {
    position: relative;
    font-size: 14px;
    color: var(--section-para);
    margin-bottom: 8px;
    padding-left: 18px;
    line-height: 1.6;
}

.policy-block li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--green-color);
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}

.policy-block a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.policy-contact-card {
    background: url('../images/fresh-img/fresh-hero-banner-bg.webp') no-repeat;
    filter: hue-rotate(35deg) saturate(120%) brightness(95%);
    background-position: top;
    background-size: cover;
    border-radius: 12px;
    padding: 28px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.policy-contact-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--white-color);
}

.policy-contact-card p {
    font-size: 14px;
    color: var(--white-color);
    line-height: 1.6;
    margin-bottom: 22px;
}

.policy-contact-item {
    height: 100%;
}

.policy-contact-item strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--white-color);
    margin-bottom: 6px;
}

.policy-contact-item span {
    display: block;
    font-size: 14px;
    color: var(--white-color);
    line-height: 1.6;
}

/* ========== Limited time offer ====== */
.limited-offer-main {
    margin-top: 160px;
}

.limited-time-offer {
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 12px;
    background: linear-gradient(90deg, #FFA647 0%, #F07C00 100%);
}

.limited-offer-img-container {
    position: relative;
    height: 260px;
    background-image: url('../images/deals-img/limited-offer-layer-0.webp');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
    background-size: 110%;
}

.limited-offer-img-2 {
    position: absolute;
    top: -20px;
    width: 500px;
    height: 280px;
    object-fit: contain;
    opacity: 1;
}


.limited-time-offer-counter {
    height: 165px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: clamp(0px, 1vw, 22px);
    padding: 20px 30px;
}

.offer-time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.offer-time-box h3 {
    width: clamp(40px, 8vw, 100px);
    height: clamp(40px, 8vw, 100px);

    border-radius: 8px;
    background: #FFBA71;

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

    font-size: clamp(20px, 4vw, 56px);
    font-weight: 700;
    color: #321A00;

    margin-bottom: 10px;
}

.offer-time-box span {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.offer-dot {
    color: #FFBA71;
    font-size: 34px;
    font-weight: 800;
    margin-bottom: 20px;
}

.limited-time-products .section-title {
    color: #5C2D00;
}

.section-product-total {
    color: #444441;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -1%;
    margin-bottom: 0px;
}

.nav-inner a:nth-child(1).active {
    filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(1191%) hue-rotate(89deg) brightness(95%) contrast(93%);
}

.nav-inner a:nth-child(2).active {
    filter: brightness(0) saturate(100%) invert(45%) sepia(24%) saturate(5046%) hue-rotate(62deg) brightness(89%) contrast(91%);
}

.nav-inner a:nth-child(3).active {
    filter: brightness(0) saturate(100%) invert(25%) sepia(99%) saturate(1326%) hue-rotate(18deg) brightness(95%) contrast(102%);
}

.nav-inner a:nth-child(4).active {
    filter: brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(1191%) hue-rotate(89deg) brightness(95%) contrast(93%);
}

.nav-inner a:nth-child(5).active {
    filter: brightness(0) saturate(100%) invert(41%) sepia(98%) saturate(816%) hue-rotate(33deg) brightness(90%) contrast(102%);
}

.header-actions .hdr-btn.active {
    background-color: #F07C00;
}

.header-actions .hdr-btn.active img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(340deg) brightness(116%) contrast(103%);
}

.salad-inner-accordion .accordion-collapse {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .45s ease, opacity .25s ease;
}

.salad-inner-accordion .accordion-collapse>.accordion-body {
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    transition: padding .35s ease;
}

.salad-inner-accordion .accordion-collapse.open {
    grid-template-rows: 1fr;
    opacity: 1;
}

.salad-inner-accordion .accordion-collapse.open>.accordion-body {
    padding-top: 16px;
    padding-bottom: 16px;
}

.cart-added-wrapper {
    position: relative;
    display: inline-block;
}

.cart-added-box {
    position: absolute;
    top: calc(100% + 30px);
    right: -8px;
    width: 320px;
    background: var(--white-color);
    border-radius: 8px;
    padding: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.25s ease;
    z-index: 9999;
}

.cart-added-box::before {
    content: "";
    position: absolute;
    top: -10px;
    right: 28px;
    width: 24px;
    height: 24px;
    background: var(--white-color);
    transform: rotate(45deg);
    border-radius: 4px;
}


.cart-added-wrapper.cart-added-active .cart-added-box {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cart-added-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.cart-added-success {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.cart-added-close {
    display: flex;
    gap: 10px;
    align-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.cart-added-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 6px;
    margin: 12px 0;
}

.cart-added-item {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.cart-added-img {
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    border-radius: 5px;
    background: #f1f1f1;
    overflow: hidden;
}

.cart-added-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
}

.cart-added-info h6 {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.cart-added-info p {
    font-size: 10px;
    color: #777;
    margin: 2px 0 8px;
}

.cart-added-info .cart-added-price {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    padding: 2px 8px;
}

.cart-added-cart-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 11px;
    border: 1px solid var(--primary);
    border-radius: 6px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    position: relative;
    overflow: hidden;
    background: var(--white-color);
}

.cart-added-cart-btn:hover {
    background: var(--primary);
    color: var(--white-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(21, 151, 41, 0.25);
}

.cart-added-cart-btn:active {
    transform: scale(0.98);
}

@media (min-width: 992px) {
    .cart-added-list {
        max-height: 370px;
    }
}

@media (max-width: 575px) {
    .cart-added-box {
        position: fixed;
        left: 50%;
        right: auto;
        top: 90px;
        width: calc(100% - 34px);
        max-width: 320px;
        transform: translate(-50%, 10px);
    }

    .cart-added-wrapper:hover .cart-added-box {
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 10px);
    }

    .cart-added-wrapper.cart-added-active .cart-added-box {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .cart-added-box::before {
        display: none;
    }

    .cart-added-list {
        max-height: 220px;
    }
}

.view-salad-sec {
    margin-top: 110px;
}

.grocery-tab-sec .tab-panel {
    display: none;
}

.grocery-tab-sec .tab-panel.active {
    display: block;
}

.grocery-tab-sec .tab-panel.active .product-card {
    animation: cardReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
}

@keyframes cardReveal {
    from {
        opacity: 0;
        transform: translateY(35px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.fresh_farm_cta .cart-btn.border-0-5 {
    border: 0.5px solid var(--primary) !important;
}

.fresh_farm_cta .cta-products-list.product-section .product-card .cart-btn {
    height: 17px;
    width: 17px;
}

.fresh_farm_cta .cta-products-list.product-section .product-card .minus-btn,
.fresh_farm_cta .cta-products-list.product-section .product-card .count-val {
    font-size: 10px;
}

/* .fresh_farm_cta .cta-products-list.product-section .product-card {
    height: 110px;
}
.fresh_farm_cta .cta-products-list.product-section .product-card {
    height: 110px;
}
.fresh_farm_cta .cta-products-list.product-section .product-card .img-area {
    height: 70px;
}

.fresh_farm_cta .cta-products-list.product-section .product-card .img-area img {
    height: 55px;
} */
.fresh_farm_cta .cta-products-list.product-section .product-card .count-val {
    padding-left: 1rem;
}

.lang-dropdown {
    display: block;
}

.lang-dropdown.dd-close {
    display: none;
}

/* Language dropdown on mobile: the desktop rule anchors the 180px box at
   right:-80px. On phones the language button sits left-of-centre, so anchoring
   to its RIGHT pushed the box off the left edge (hidden) at 320px. Anchor it to
   the button's LEFT edge (extend rightward), cap the width to the viewport, and
   slightly narrow it so it always stays fully on-screen. */
@media (max-width: 767.98px) {
    .main-header .lang-dropdown {
        left: 0;
        right: auto;
        min-width: 160px;
        max-width: calc(100vw - 16px);
    }
}

.goog-te-gadget-icon,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.skiptranslate iframe {
    display: none !important;
}

/* .yt-vlogs-main .yt-vlogs-link {
  color: #6ca84f;
  text-decoration: none;
  font-weight: 600;
} */
/* .yt-vlogs-main .swiper-wrapper{
    height: fit-content;
} */

.yt-vlogs-main .yt-vlogs-swiper {
    width: 100%;
    height: auto !important;
    overflow: hidden;
}

.yt-vlogs-main .swiper-wrapper {
    align-items: stretch;
    height: auto !important;
    transition-timing-function: linear !important;
}

/* Homepage spacing: edit these two variables to adjust every section together. */
.home-section-spacing {
    --home-section-space: 42px;
    --home-section-space-mobile: 24px;
}

.home-section-spacing main > section {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: var(--home-section-space) !important;
    padding-bottom: var(--home-section-space) !important;
}

/* Dynamic home hero keeps the original banner spacing and background design. */
.home-section-spacing main > .home-dynamic-hero {
    /* margin-top: 130px !important; */
    padding: 60px 50px !important;
}

.home-hero-video-wrap {
    width: min(1180px, 100%);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    background: #000;
    box-shadow: 0 18px 45px rgba(3, 40, 2, 0.12);
}

.home-hero-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* All Essentials two-row slider: adjust these heights when card sizing changes. */
.home-section-spacing {
    --home-essentials-slider-height: 340px;
    --home-essentials-slider-height-mobile: 310px;
}

.all-essentials .home-essentials-swiper {
    height: var(--home-essentials-slider-height);
}

.all-essentials .home-essentials-swiper .swiper-wrapper {
    height: 100%;
}

.all-essentials .home-essentials-swiper.swiper-grid > .swiper-wrapper {
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .home-section-spacing main > section {
        padding-top: var(--home-section-space-mobile) !important;
        padding-bottom: var(--home-section-space-mobile) !important;
    }

    .all-essentials .home-essentials-swiper {
        height: var(--home-essentials-slider-height-mobile);
    }

    .home-section-spacing main > .home-dynamic-hero {
        /* Clear the mobile fixed header (logo + delivery location + search) */
        margin-top: 110px !important;
        padding: 40px 15px !important;
    }

    .home-hero-video-wrap {
        border-radius: 10px;
    }
}

.yt-vlogs-main .swiper-slide {
    height: auto !important;
    cursor: grab;
}

.yt-vlogs-main .swiper-slide:active {
    cursor: grabbing;
}

.yt-vlogs-main .yt-vlogs-card {
    position: relative;
    width: 100%;
    height: 89%;
    aspect-ratio: 8 / 16;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.yt-vlogs-main .yt-vlogs-card iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.vlog-swipe-overlay {
    display: none;
}

@media (max-width: 991px) {
    .vlog-swipe-overlay {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
        cursor: pointer;
        background: transparent;
    }
    .vlog-swipe-overlay.tapped {
        display: none;
    }
}

/* =============== About Section ================ */
.about-banner {
    position: relative;
    overflow: hidden;
    height: 100dvh;
}

.about-banner-title,
.about-banner-subtitle {
    position: relative;
    z-index: 2;
    transform-origin: center;
}

.about-banner-content {
    position: relative;
    z-index: 12;
    will-change: transform, opacity;
}

.tree-1,
.tree-leaf,
.cloud-1,
.cloud-2,
.cloud-bar {
    will-change: transform;
}

.about-banner {
    margin-top: 130px;
    background: url('../images/about-us/about-us-banner/about-banner-bg.webp') no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;

    height: 100dvh;
}

.about-banner-title {
    color: var(--white-color);
    font-size: 72px;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 1px;
    margin-bottom: 14px;
    transform-style: flat;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: subpixel-antialiased;
}

.about-title-zoom-letter {
    display: inline-block;
}

/* .about-banner-title{
    color: var(--white-color);
    font-family: "Freeman", sans-serif;
    font-size: 96px;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 0px;
    margin-bottom: 14px;
} */
.about-banner-subtitle {
    color: var(--white-color);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: 0px;

    width: 75%;
    margin: 0 auto;
}

.tree-1 {
    width: clamp(300px, 42vw, 600px);
    height: clamp(182px, 26vw, 370px);

    object-fit: contain;
    object-position: center;

    top: 0;
    left: 0;
    z-index: 1;
}

.tree-leaf {
    width: clamp(350px, 70vw, 900px);
    height: clamp(350px, 42vw, 540px);

    background: url('../images/about-us/about-us-banner/about-leaf.webp');
    background-repeat: repeat;
    background-position: 0 0;
    background-size: clamp(400px, 78vw, 1000px) auto;

    inset: 0;
    z-index: 1;
    position: absolute;

    animation: leafGroupFall 8s linear infinite;
}

@keyframes leafGroupFall {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 180px 220px;
    }
}

.cloud-2,
.cloud-1 {
    width: clamp(180px, 40vw, 530px);
    height: clamp(100px, 23vw, 300px);

    object-fit: contain;
    object-position: center;
    z-index: 3;
}

.cloud-1 {
    top: 15%;
    left: 35%;
    transform: translateX(-50%);

    animation: cloudMoveLeft 18s ease forwards;
}

.cloud-2 {
    top: 30%;
    right: -5%;
    transform: translateX(-50%);

    animation: cloudMoveRight 18s ease forwards;
}

/* @keyframes cloudMoveLeft{
    0%{
        transform: translateX(-50%) translateX(0);
    }

    100%{
        transform: translateX(-50%) translateX(-205px);
    }
}

@keyframes cloudMoveRight{
    0%{
        transform: translateX(-50%) translateX(0);
    }

    100%{
        transform: translateX(-50%) translateX(205px);
    }
} */

.cloud-bar {
    left: 0;
    bottom: -140px;
    transform: scale(1.3);
    width: 100%;
    height: 180px;
    pointer-events: none;

    background-color: white;

    filter: blur(35px);
}

.about-white-overlay {
    --about-wave-x: 50%;
    --about-wave-y: 50%;

    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    clip-path: circle(0 at var(--about-wave-x) var(--about-wave-y));
    will-change: opacity, clip-path;
}

/* ------------------------ */
.simple-section {
    position: relative;
    z-index: 2;
    height: 100vh;
    overflow: hidden;
    background: #fff;
}

.simple-text-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.simple-section-title {
    --fill-width: 0%;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;

    font-size: clamp(28px, 5vw, 64px);
    font-weight: 700;
    /* line-height: 1; */
    text-align: center;
    text-transform: uppercase;

    opacity: 0;
    z-index: 2;

    /* outline */
    color: transparent;
    -webkit-text-stroke: 1px var(--primary);

    /* solid primary fill */
    background:
        linear-gradient(to right,
            var(--primary) 0%,
            var(--primary) var(--fill-width),
            transparent var(--fill-width),
            transparent 100%);

    background-repeat: no-repeat;
    background-size: 100% 100%;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    will-change: transform, opacity;
}

.simple-img {
    width: clamp(38px, 5vw, 70px);
    height: clamp(38px, 5vw, 70px);
    position: absolute;
    object-fit: contain;
    object-position: center;
    z-index: 2;
    will-change: transform;
}

.simple-img-1 {
    top: clamp(-320px, -18vw, -90px);
    left: clamp(10px, 3vw, 20px);
    animation: floatOne 5s ease-in-out infinite alternate;
}

.simple-img-2 {
    top: clamp(-290px, -16vw, -80px);
    left: clamp(22%, 28vw, 350px);
    animation: floatTwo 6.5s ease-in-out infinite alternate;
}

.simple-img-3 {
    top: clamp(-350px, -20vw, -100px);
    left: clamp(55%, 62vw, 750px);
    animation: floatThree 5.8s ease-in-out infinite alternate;
}

.simple-img-4 {
    top: clamp(-290px, -16vw, -80px);
    right: clamp(10px, 3vw, 20px);
    animation: floatFour 7s ease-in-out infinite alternate;
}

.simple-img-5 {
    bottom: clamp(-350px, -20vw, -100px);
    left: clamp(8%, 10vw, 100px);
    animation: floatFive 6s ease-in-out infinite alternate;
}

.simple-img-6 {
    bottom: clamp(-380px, -22vw, -110px);
    left: clamp(45%, 50vw, 600px);
    animation: floatSix 7.5s ease-in-out infinite alternate;
}

.simple-img-7 {
    bottom: clamp(-320px, -18vw, -90px);
    right: clamp(10px, 6vw, 70px);
    animation: floatSeven 6.8s ease-in-out infinite alternate;
}

@keyframes floatOne {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(18px, -28px) rotate(5deg);
    }
}

@keyframes floatTwo {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-24px, 20px) rotate(-4deg);
    }
}

@keyframes floatThree {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(20px, -18px) rotate(6deg);
    }
}

@keyframes floatFour {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-22px, -30px) rotate(-5deg);
    }
}

@keyframes floatFive {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(28px, 16px) rotate(4deg);
    }
}

@keyframes floatSix {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-20px, -26px) rotate(-6deg);
    }
}

@keyframes floatSeven {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(24px, -16px) rotate(5deg);
    }
}

/* ----------------------- */
.vision-products-section {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 100px 0;
}

.vision-title {
    color: #032802;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    line-height: 1.2;
}

.vision-para {
    color: #5C5C5C;
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
}

.vision-content {
    text-align: center;
    margin-bottom: 40px;
}

.vision-main-container {
    position: relative;
    width: min(100%, 900px);
    height: 520px;
    margin: 0 auto;
}

.vision-main-img {
    width: clamp(250px, 45vw, 570px);
    height: auto;
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 2;
}

.vision-bg {
    width: clamp(520px, 70vw, 990px);
    height: auto;
    position: absolute;
    left: 52%;
    top: 52%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 0;
    animation: visionRotate 38s linear infinite;
}

.vision-img-1,
.vision-img-2,
.vision-img-3,
.vision-img-4,
.vision-img-5,
.vision-img-6 {
    position: absolute;
    object-fit: contain;
    object-position: center;
    z-index: 3;
    cursor: pointer;
    will-change: transform;
    transition: filter 0.3s ease;
}

/* positions */
.vision-img-1 {
    width: clamp(70px, 12vw, 150px);
    top: clamp(12%, 20%, 20%);
    left: clamp(-2%, 0vw, 0%);
    animation: visionFloat1 5s ease-in-out infinite alternate;
}

.vision-img-2 {
    width: clamp(90px, 15vw, 190px);
    top: clamp(40%, 48%, 48%);
    left: clamp(-8%, -6vw, -15%);
    animation: visionFloat2 6.5s ease-in-out infinite alternate;
}

.vision-img-3 {
    width: clamp(90px, 14vw, 185px);
    bottom: clamp(4%, 8vw, 10%);
    left: clamp(-2%, 0vw, 0%);
    animation: visionFloat3 5.8s ease-in-out infinite alternate;
}

.vision-img-4 {
    width: clamp(70px, 11vw, 140px);
    top: clamp(12%, 20%, 20%);
    right: clamp(-2%, 0vw, 0%);
    animation: visionFloat4 6s ease-in-out infinite alternate;
}

.vision-img-5 {
    width: clamp(110px, 18vw, 250px);
    top: clamp(40%, 48%, 48%);
    right: clamp(-8%, -6vw, -15%);
    animation: visionFloat5 7s ease-in-out infinite alternate;
}

.vision-img-6 {
    width: clamp(85px, 14vw, 175px);
    bottom: clamp(3%, 7vw, 8%);
    right: clamp(-2%, 0vw, 0%);
    animation: visionFloat6 6.8s ease-in-out infinite alternate;
}

/* hover different animation */
.vision-img-1:hover,
.vision-img-2:hover,
.vision-img-3:hover,
.vision-img-4:hover,
.vision-img-5:hover,
.vision-img-6:hover {
    animation-play-state: paused;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

.vision-img-1:hover {
    transform: translateY(-12px) rotate(-4deg) scale(1.08);
}

.vision-img-2:hover {
    transform: translateX(14px) rotate(4deg) scale(1.08);
}

.vision-img-3:hover {
    transform: translateY(12px) rotate(-3deg) scale(1.08);
}

.vision-img-4:hover {
    transform: translateY(-14px) rotate(5deg) scale(1.08);
}

.vision-img-5:hover {
    transform: translateX(-16px) rotate(-4deg) scale(1.08);
}

.vision-img-6:hover {
    transform: translateY(14px) rotate(4deg) scale(1.08);
}

@keyframes visionRotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes visionFloat1 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(14px, -18px) rotate(3deg);
    }
}

@keyframes visionFloat2 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-18px, 14px) rotate(-3deg);
    }
}

@keyframes visionFloat3 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(20px, -12px) rotate(4deg);
    }
}

@keyframes visionFloat4 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-16px, -20px) rotate(-4deg);
    }
}

@keyframes visionFloat5 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(18px, 12px) rotate(3deg);
    }
}

@keyframes visionFloat6 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-18px, -14px) rotate(-4deg);
    }
}

@media (max-width: 768px) {
    .vision-main-container {
        height: 430px;
    }

    /* .vision-img-1,
    .vision-img-2,
    .vision-img-3,
    .vision-img-4,
    .vision-img-5,
    .vision-img-6 {
        width: 120px;
    } */

    /* .vision-img-5 {
        width: 160px;
        right: -2%;
    } */
}

/* ------------------------------ */
.why-chotekisan-section {
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    /* padding-bottom: 150px !important; */
}

.why-chotekisan-content {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    will-change: transform;
}

.why-chotekisan-title {
    --fill-width: 0%;

    font-size: clamp(52px, 8vw, 128px);
    font-weight: 700;
    /* line-height: 1.05; */
    text-align: center;

    color: transparent;
    -webkit-text-stroke: 3px var(--primary);

    background: linear-gradient(90deg,
            var(--primary) var(--fill-width),
            transparent var(--fill-width));
    -webkit-background-clip: text;
    background-clip: text;

    transform: scale(0.5);
    will-change: transform;
}

.why-black-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.28) 48%,
            rgba(0, 0, 0, 0.1) 78%,
            rgba(0, 0, 0, 0) 100%);
    filter: blur(10px);
    transform: scale(1.03);
    opacity: 0;
    z-index: 10;
    pointer-events: none;
}

.why-chotekisan-title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;

    color: var(--primary);
    -webkit-text-stroke: 0;

    clip-path: inset(0 calc(100% - var(--fill-width)) 0 0);
}

.why-chotekisan-content img {
    position: absolute;
    object-fit: contain;
    object-position: center;
    z-index: 3;
    cursor: pointer;
    will-change: transform;
    transform-style: preserve-3d;
}

/* random floating */
.why-ch-1 {
    animation: whyFloat1 5s ease-in-out infinite alternate;
}

.why-ch-2 {
    animation: whyFloat2 6.5s ease-in-out infinite alternate;
}

.why-ch-3 {
    animation: whyFloat3 5.8s ease-in-out infinite alternate;
}

.why-ch-4 {
    animation: whyFloat4 7s ease-in-out infinite alternate;
}

.why-ch-5 {
    animation: whyFloat5 6s ease-in-out infinite alternate;
}

.why-ch-6 {
    animation: whyFloat6 7.2s ease-in-out infinite alternate;
}

.why-ch-7 {
    animation: whyFloat7 6.8s ease-in-out infinite alternate;
}

/* hover flip */
.why-chotekisan-content img:hover {
    animation-play-state: paused;
    transform: rotateY(180deg) scale(1.15);
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.25));
    transition: transform 0.6s ease, filter 0.4s ease;
}

@keyframes whyFloat1 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(18px, -22px) rotate(5deg);
    }
}

@keyframes whyFloat2 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-20px, 18px) rotate(-4deg);
    }
}

@keyframes whyFloat3 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(22px, -18px) rotate(6deg);
    }
}

@keyframes whyFloat4 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-18px, -20px) rotate(-5deg);
    }
}

@keyframes whyFloat5 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(20px, 15px) rotate(4deg);
    }
}

@keyframes whyFloat6 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(-22px, -15px) rotate(-4deg);
    }
}

@keyframes whyFloat7 {
    from {
        transform: translate(0, 0) rotate(0deg);
    }

    to {
        transform: translate(18px, -20px) rotate(5deg);
    }
}

.why-ch-1 {
    width: clamp(45px, 6vw, 90px);
    height: clamp(45px, 6vw, 90px);
    top: clamp(5%, 10%, 10%);
    left: clamp(4%, 10%, 10%);
}

.why-ch-2 {
    width: clamp(42px, 5.5vw, 82px);
    height: clamp(42px, 5.5vw, 82px);
    top: clamp(10%, 20%, 20%);
    left: clamp(42%, 50%, 50%);
}

.why-ch-3 {
    width: clamp(46px, 6vw, 92px);
    height: clamp(46px, 6vw, 92px);
    top: clamp(5%, 10%, 10%);
    right: clamp(4%, 10%, 10%);
}

.why-ch-4 {
    width: clamp(46px, 6vw, 92px);
    height: clamp(46px, 6vw, 92px);
    bottom: clamp(5%, 10%, 10%);
    left: clamp(4%, 10%, 10%);
}

.why-ch-5 {
    width: clamp(36px, 4.5vw, 65px);
    height: clamp(36px, 4.5vw, 65px);
    bottom: clamp(10%, 20%, 20%);
    left: clamp(20%, 30%, 30%);
}

.why-ch-6 {
    width: clamp(36px, 4.5vw, 65px);
    height: clamp(36px, 4.5vw, 65px);
    bottom: clamp(5%, 10%, 10%);
    left: clamp(48%, 60%, 60%);
}

.why-ch-7 {
    width: clamp(40px, 5vw, 75px);
    height: clamp(40px, 5vw, 75px);
    bottom: clamp(10%, 20%, 20%);
    right: clamp(4%, 10%, 10%);
}

/* --------------------------- */
.why-farm-fresh-section {
    position: relative;
    background: url('../images/about-us/why-farm/why-farm-bg.webp') center/cover no-repeat;
    height: 100dvh;
    overflow: hidden;
}

/* Start fully dark like previous section */
.why-farm-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0.28;
    z-index: 10;
    pointer-events: none;
}

.why-farm-fresh-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.why-farm-logo {
    width: clamp(90px, 12vw, 145px);
    height: auto;
    margin-top: clamp(20px, 5vw, 50px);
    margin-bottom: clamp(10px, 8vw, 140px);
}

.why-farm-para p {
    text-align: center;
    color: #DDDDDD;
    font-size: clamp(14px, 1.6vw, 20px);
    font-weight: 500;
    line-height: 1.6;
}

.why-farm-para p span {
    color: #F0B97D;
}

.why-farm-card {
    position: relative;
    overflow: hidden;

    height: 100%;
    padding: 22px 16px;
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(14px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    transition: 0.45s ease;
}

.why-farm-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.38),
            transparent);

    transform: skewX(-20deg);
    transition: 0.65s ease;
}

.why-farm-card:hover {
    background: rgba(12, 123, 9, 0.38);
    border-color: rgba(120, 255, 110, 0.55);
    box-shadow: 0 20px 45px rgba(12, 123, 9, 0.25);
    transform: translateY(-10px) scale(1.03);
}

.why-farm-card:hover::before {
    left: 140%;
}

.why-farm-icon img {
    width: 45px;
    height: 45px;
}

.why-farm-card h6 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

/* --------------------------------- */


/* ---------- Responsive ----------- */
/* Mobile screen  */
@media (max-width: 320px) {

    .deals-cta-title,
    .hero-banner-title {
        font-size: 43px !important;
        letter-spacing: -2px;
        line-height: 62px;
    }

    .deals-cta-text,
    .hero-banner-content {
        font-size: 16px;
        line-height: 32px;
    }

    .deals-cta-btn,
    .Deals-main .btn-list .text {
        font-size: 16px;
    }

    .special-offer-title {
        font-size: 28px !important;
    }

    .policy-header {
        flex-direction: column !important;
        align-items: flex-start;
    }

    .policy-title {
        font-size: 22px !important;
    }

    .policy-contact-card {
        padding: 15px !important;
    }

    .limited-offer-img-container {
        display: none;
    }



}

@media (max-width: 430px) {
    .home-banner .img-wrapper {
        margin-top: 0px !important;
    }

    .img-wrapper {
        height: 330px;
    }

    .cart-float-icons-1 {
        width: 52px !important;
        height: 60px !important;
        top: 40px !important;
        left: 0px !important;
    }

    .cart-float-icons-2 {
        width: 160px !important;
        height: 64px !important;
        top: 50px !important;
        right: 0px !important;
    }

    .cart-float-icons-3 {
        width: 52px !important;
        height: 58px !important;
        bottom: 80px !important;
        right: 8px !important;
    }

    .cart-float-icons-4 {
        width: 52px !important;
        height: 60px !important;
        bottom: 45px !important;
        left: -6px !important;
    }

    .policy-header {
        flex-direction: column !important;
        align-items: flex-start;
    }

    .otp-box {
        gap: 7px;
    }


}

@media (max-width: 580px) {

    .Deals-main .home-banner {
        padding: 60px 15px 30px;
        margin-top: 100px;
    }

    .view-salad-sec {
        margin-top: 140px;
    }

    .deals-cta-title,
    .hero-banner-title {
        font-size: 48px;
        letter-spacing: -2px;
        line-height: 62px;
    }

    .deals-cta-text,
    .hero-banner-content {
        font-size: 16px;
        line-height: 32px;
    }

    .deals-cta-btn,
    .Deals-main .btn-list .text {
        font-size: 16px;
    }

    .img-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .cart-products-img {
        position: absolute;
        left: 50%;
    }

    .cart-img {
        width: 350px;
        height: 300px;
        object-fit: contain;
        position: relative;
        z-index: 11;
        transform: translateY(40px);
        z-index: 40;
    }

    .img-wrapper {
        pointer-events: none;
    }

    .cart-float-icons-1 {
        width: 72px;
        height: 84px;
        top: 0px;
        left: -20px;
    }

    .cart-float-icons-2 {
        width: 216px;
        height: 86px;
        top: 0px;
        right: -30px;
    }

    .cart-float-icons-3 {
        width: 72px;
        height: 80px;
        bottom: 100px;
        right: 10px;
    }

    .cart-float-icons-4 {
        width: 72px;
        height: 84px;
        bottom: 60px;
        left: -10px;
    }

    .home-banner .img-wrapper {
        margin-top: 40px;
    }

    .deals-cta-wrapper {
        padding: 40px 10px;
    }

    .special-offer-title {
        font-size: 32px;
    }

    .special-offer-text {
        font-size: 16px;
    }

    .policy-header {
        flex-direction: column !important;
        align-items: flex-start;
    }

    .limited-offer-img-2 {
        transform: translateX(-70px);
    }

    .limited-time-offer-counter {
        padding: 0px 0px !important;
        justify-content: center !important;
    }

    .offer-time-box span {
        font-size: 10px !important;
    }

    .offer-dot {
        font-size: 20px !important;
    }

    .limited-time-offer-counter {
        height: 100px !important;
    }

    .limited-offer-main {
        margin-top: 130px !important;
    }

    .limited-time-offer {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    .farm-fresh-cta .cta-title {
        margin-bottom: 5px !important;
    }

    .farm-fresh-cta h4 {
        margin-bottom: 20px !important;
    }

    .search-expand-wrap {
        width: 100% !important;
    }

    .search-expand-wrap.active {
        width: 100% !important;
    }

    .select2-common {
        width: 100% !important;
        max-width: 100% !important;
    }

    .order_icons::before {
        height: 88px !important;
        top: -85px !important;
    }

    .tab-content-center {
        height: 100% !important;
    }

    .w-sm-50 {
        width: 70% !important;
    }

    .my-orders-main .user-profile {
        width: 58px;
        height: 58px;
    }

      .about-banner-title {
        font-size: 60px !important;
        max-width: 262px;
      }

    .about-banner-subtitle {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0px;
        width: 100%;
    }

    .cloud-1 {
        top: 30%;
        left: 30%;
        transform: translateX(-50%);

        animation: cloudMoveLeft 18s ease forwards;
    }

    .cloud-2 {
        top: 45%;
        right: -15%;
        transform: translateX(-50%);

        animation: cloudMoveRight 18s ease forwards;
    }

    .vision-content {
        margin-bottom: 0px !important;
    }
    .why-farm-fresh-section {
        height: 100dvh !important;
    }

    .how-works .about-section-content .title{
        font-size: 28px !important;
    }
    .how-works .about-section-content p{
        font-size: 14px !important;
    }

    /* .how-works-card img {
        height: 340px;
    } */

    .about-cta-content h2{
        font-size: 28px !important;
    }
    .our-instagram-sec .title,
    .our-clients-say .title,
    .how-works-card-title {
        font-size: 24px !important;
    }
    .about-cta-content p,
    .our-instagram-sec p,
    .our-clients-say p,
    .how-works-card p{
        font-size: 14px !important;
    }
    /* .about-banner {
        transform: translate(0px, -18px);
    } */

    .simple-img-1 {
        top: -200px;
    }

    .simple-img-2 {
        top: -160px;
    }

    .simple-img-3 {
        top: -240px;
    }

    .simple-img-4 {
        top: -120px;
    }

    .simple-img-5 {
        bottom: -180px;
    }

    .simple-img-6 {
        bottom: -150px;
    }

    .simple-img-7 {
        bottom: -190px;
    }
    .vision-products-section {
        /* Was min-height:100vh with vertically-centred content, which left a big
           empty band below the vision cards (looked like extra white space above
           "Why Chotekisan"). Let the section hug its content on mobile. */
        min-height: auto;
        overflow: hidden;
        position: relative;
        padding: 30px 0;
    }
    .about-cta-sec {
        padding: 40px 0 40px;
        overflow: hidden;
    }

}

/* laptop screen */
@media (max-width: 760px) {}

@media (max-width: 991px) {
    .policy-content {
        padding-right: 0;
    }

    .policy-contact-card {
        position: static;
        margin-top: 30px;
        background-position: right;
    }

    .policy-header {
        flex-direction: row;
        align-items: flex-start;
    }

    .policy-section {
        margin-top: 100px !important;
    }

    .limited-offer-img-2 {
        left: 80px !important;
    }

    .login-modal-content .login-left {
        height: 572px;
    }

    .login-modal-dialog {
        max-width: 750px !important;
    }

    /* .border-card {
        height: 100vh !important;
    } */
    #NotificationsPreferences.active {
        width: auto !important;
    }

    /* .yt-vlogs-main .yt-vlogs-swiper{
        height: 340px !important;
    } */
    .about-banner-title {
        font-size: 52px;
    }
    .why-farm-fresh-section {
        height: 120dvh;
    }

}

@media (max-width:1200px) {
    /* .farm-fresh-cta .cta-title {
        margin-bottom: 5px !important;
    }

    .farm-fresh-cta h4 {
        margin-bottom: 5px !important;
    } */

    .search-expand-wrap.active {
        width: 230px;
    }

    .order_icons::before {
        height: 65px;
        top: -65px;
    }

    .scroll-top-btn.show {
        scale: 0.8;
    }
    /* .about-banner-title {
        font-size: 72px;
    } */
     .about-cta-sec .about-cta-image img {
        transform: translateX(-70px) translateY(-130px);
    }

}

.how-works {
    padding: 80px 0;
    overflow: hidden;
}

/* .how-works .how-works-card {
    padding: 30px 70px;
    border-radius: 20px;
    margin-bottom: 40px;
} */
.how-works .how-works-card {
    padding: clamp(18px, 4vw, 30px) clamp(20px, 7vw, 70px);
    border-radius: clamp(12px, 2vw, 20px);
    margin-bottom: clamp(20px, 5vw, 40px);
}

.how-works .how-works-card.card-1 {
    background-color: #E4EFB3;
}

.how-works .how-works-card.card-2 {
    background-color: #FFE0C4;
}

.how-works .how-works-card.card-3 {
    background-color: #FFED8B;
}

.how-works .how-works-card.card-4 {
    background-color: #FFCC9F;
}

.about-section-content {
    margin-bottom: 50px;
}

.how-works-card-title {
    color: #2E3800;
    font-size: 32px;
    font-weight: bold;
}

/* .how-works-card img {
    height: 480px;
    object-fit: cover;
} */
 .how-works-card img {
    height: clamp(250px, 45vw, 480px);
    width: 100%;
    object-fit: contain;
}

.about-section-content .title {
    color: #032802;
    font-size: 40px;
}

/* .work-img-container {
    position: relative;
    width: 500px;
    height: 500px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
} */
 .work-img-container {
    position: relative;
    width: clamp(220px, 45vw, 500px);
    height: clamp(220px, 55vw, 500px);

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

.work-img-container .rotate-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: rotateShape 12s linear infinite;
}

.work-img-container .center-img {
    position: relative;
    width: clamp(160px, 32vw, 370px);
    height: auto;
    z-index: 2;
}

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

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

/* ===========================
   ABOUT FAQ SECTION
=========================== */

.about-faq .faq-image-container img {
    border-radius: 20px;
}

.about-faq .about-faq-content {
    padding-left: 25px;
}

.about-faq .about-faq-subtitle {
    margin-bottom: 15px;
}

.about-faq .about-faq-subtitle span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(21, 143, 21, 0.1);
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 50px;
}

.about-faq .about-faq-accordion .accordion-item {
    border: none;
    border-radius: 16px !important;
    overflow: hidden;
    margin-bottom: 18px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.about-faq .about-faq-accordion .accordion-button {
    background: #fff;
    color: #143814;
    font-size: 18px;
    font-weight: 600;
    padding: 18px 20px;
    box-shadow: none;
    border: none;
}

.about-faq .about-faq-accordion .accordion-button:not(.collapsed) {
    background: #0C7B091F;
    color: var(--primary);
    border-bottom: 1px solid #0C7B091F;
    box-shadow: 0px 5px 15px 0px #19213D0F;
}

.about-faq .about-faq-accordion .accordion-button::after {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--primary);
    color: var(--white-color);
    background-position: center;
    background-size: 14px;
    flex-shrink: 0;
}

.about-faq .about-faq-accordion .accordion-button::after {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--primary);

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 10.854a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 1 1-.708.708L8 5.207l-5.646 5.647a.5.5 0 0 1-.708 0z'/%3e%3c/svg%3e");

    background-position: center;
    background-repeat: no-repeat;
    background-size: 14px;
}

.about-faq .about-faq-accordion .accordion-body {
    background: #edf6ed;
    padding: 10px 10px 17px 24px;
    font-size: 15px;
    line-height: 1.8;
    color: #444;
}

.about-faq .about-faq-accordion .accordion-button:focus {
    box-shadow: none;
}

@media (max-width: 991px) {
    .about-faq .about-faq-content {
        padding-left: 0;
        margin-top: 40px;
    }

    .about-faq .about-faq-title {
        font-size: 32px;
    }

    .about-faq .about-faq-accordion .accordion-button {
        font-size: 17px;
        padding: 20px;
    }
}

@media (max-width: 575px) {
    .about-faq .about-faq-title {
        font-size: 28px;
    }

    .about-faq .about-faq-description {
        font-size: 15px;
    }

    .about-faq .about-faq-accordion .accordion-button {
        font-size: 16px;
    }
}

.our-clients-say {
    position: relative;
    overflow: visible;
    background: #fff;
    padding: 80px 0 80px;
}

.our-clients-say .testimonials-container {
    position: relative;
    width: min(1436px, 100%);
    height: 360px;
    margin: 20px auto 0;
    overflow: visible;
}

.our-clients-say .testimonials-container>svg,
.our-clients-say .testimonial-wave {
    position: absolute;
    inset: 8px 0 auto;
    width: 100%;
    height: 298px;
    z-index: 1;
    pointer-events: none;
}

.our-clients-say .customerSwiper,
.our-clients-say .swiper-wrapper,
.our-clients-say .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.our-clients-say .swiper-slide {
    position: relative;
    overflow: visible;
}

.our-clients-say .testimonial-fruit {
    --size: 96px;
    --bubble-bg: #f3f8e9;
    position: absolute;
    z-index: 5;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    /* background: var(--bubble-bg); */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .35s ease, box-shadow .35s ease;
}

.our-clients-say .testimonial-fruit::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: inherit;
    background: rgba(255, 255, 255, .35);
    z-index: -1;
}

.our-clients-say .testimonial-fruit img:first-child,
.our-clients-say .testimonial-produce {
    width: 76%;
    max-height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(45, 53, 33, .12));
}

.our-clients-say .testimonial-fruit:hover {
    transform: translateY(-2px);
    z-index: 99;
}

/* The active (shown) card must sit above every other fruit, otherwise a later
   fruit in the DOM (e.g. the eggplant) paints on top of the open card. */
.our-clients-say .testimonial-fruit.show-card {
    z-index: 99;
}

.our-clients-say .fruit-1 {
    --size: 110px;
    top: 30px;
    left: 12.2%;
}

.our-clients-say .fruit-2 {
    --size: 145px;
    top: 150px;
    left: 23.2%;
}

.our-clients-say .fruit-3 {
    --size: 110px;
    top: 15px;
    left: 35.8%;
}

.our-clients-say .fruit-4 {
    --size: 145px;
    top: 132px;
    left: 46%;
}

.our-clients-say .fruit-5 {
    --size: 110px;
    top: 15px;
    left: 60.4%;
}

.our-clients-say .fruit-6 {
    --size: 145px;
    top: 149px;
    left: 69.6%;
}

.our-clients-say .fruit-7 {
    --size: 110px;
    top: 22px;
    left: 81.5%;
}

.our-clients-say .testimonial-card {
    --card-shift-x: 0px;
    position: absolute;
    top: calc(100% + -15px);
    left: 50%;
    width: min(420px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    padding: 18px 20px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(37, 47, 34, .14);
    opacity: 0;
    visibility: hidden;
    transform: translate(calc(-50% + var(--card-shift-x)), 12px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
    pointer-events: none;
    z-index: 50;
}

.our-clients-say .testimonial-fruit:hover .testimonial-card,
.our-clients-say .testimonial-fruit:focus .testimonial-card,
.our-clients-say .testimonial-fruit:focus-within .testimonial-card,
.our-clients-say .testimonial-fruit.show-card .testimonial-card {
    opacity: 1;
    visibility: visible;
    transform: translate(calc(-50% + var(--card-shift-x)), 0);
}

.our-clients-say .fruit-6 .testimonial-card,
.our-clients-say .fruit-7 .testimonial-card {
    left: 50%;
    right: auto;
    transform: translate(calc(-50% + var(--card-shift-x)), 12px);
}

.our-clients-say .fruit-6:hover .testimonial-card,
.our-clients-say .fruit-7:hover .testimonial-card,
.our-clients-say .fruit-6:focus .testimonial-card,
.our-clients-say .fruit-7:focus .testimonial-card,
.our-clients-say .fruit-6:focus-within .testimonial-card,
.our-clients-say .fruit-7:focus-within .testimonial-card {
    transform: translate(calc(-50% + var(--card-shift-x)), 0);
}

.our-clients-say .testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
    border-bottom: 1px solid #5C5C5C0D;
}

.our-clients-say .testimonial-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.our-clients-say .testimonial-user-img {
    width: 60px !important;
    height: 60px;
    max-height: none !important;
    border-radius: 50%;
    object-fit: contain;
    background: #f8f8f8;
    flex: 0 0 auto;
    filter: none;
}

.our-clients-say .client-name {
    margin: 0 0 7px;
    color: #2f2f2f;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}

.our-clients-say .testimonial-stars,
.our-clients-say .testimonial-rating {
    color: #fbbc04;
    font-size: 16px;
    letter-spacing: 3px;
    line-height: 1;
}

.our-clients-say .testimonial-quote {
    color: rgba(35, 150, 82, .12);
    font-size: 38px;
    line-height: 1;
}

.our-clients-say .review-text {
    margin: 0;
    color: #585858;
    font-size: 16px;
    line-height: 1.65;
}

@media (max-width: 991px) {
    .our-clients-say .testimonials-container {
        height: 560px;
    }

    .our-clients-say .testimonials-container>svg,
    .our-clients-say .testimonial-wave {
        inset: 26px -240px auto;
        width: 1500px;
        max-width: none;
        transform: scaleY(1.18);
        transform-origin: top left;
    }

    .our-clients-say .fruit-1 {
        top: 45px;
        left: 8%;
    }

    .our-clients-say .fruit-2 {
        top: 190px;
        left: 23%;
    }

    .our-clients-say .fruit-3 {
        top: 56px;
        left: 45%;
    }

    .our-clients-say .fruit-4 {
        top: 292px;
        left: 9%;
    }

    .our-clients-say .fruit-5 {
        top: 260px;
        left: 43%;
    }

    .our-clients-say .fruit-6 {
        top: 374px;
        left: 68%;
    }

    .our-clients-say .fruit-7 {
        top: 112px;
        left: 72%;
    }
}

@media (max-width: 575px) {
    .our-clients-say {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    .our-clients-say .testimonials-container {
        height: 650px;
    }

    .our-clients-say .testimonial-fruit {
        --size: 78px;
    }

    .our-clients-say .fruit-2,
    .our-clients-say .fruit-4,
    .our-clients-say .fruit-6 {
        --size: 94px;
    }

    .our-clients-say .fruit-1 {
        left: 6%;
    }

    .our-clients-say .fruit-2 {
        top: 154px;
        left: 38%;
    }

    .our-clients-say .fruit-3 {
        top: 282px;
        left: 9%;
    }

    .our-clients-say .fruit-4 {
        top: 360px;
        left: 52%;
    }

    .our-clients-say .fruit-5 {
        top: 480px;
        left: 15%;
    }

    .our-clients-say .fruit-6 {
        top: 506px;
        left: 62%;
    }

    .our-clients-say .fruit-7 {
        top: 70px;
        left: 70%;
    }

    .our-clients-say .testimonial-card {
        top: calc(100% + 4px);
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        padding: 14px 16px;
    }

    .our-clients-say .testimonial-header {
        gap: 10px;
        margin-bottom: 10px;
    }

    .our-clients-say .testimonial-user-img {
        width: 48px !important;
        height: 48px;
    }

    .our-clients-say .client-name {
        font-size: 15px;
    }

    .our-clients-say .testimonial-stars {
        font-size: 14px;
        letter-spacing: 2px;
    }

    .our-clients-say .testimonial-quote {
        font-size: 30px;
    }

    .our-clients-say .review-text {
        font-size: 14px;
        line-height: 1.5;
    }
}

.our-clients-say .testimonial-fruit {
    animation: fruitFloat 3s ease-in-out infinite;
}

.our-clients-say .fruit-2,
.our-clients-say .fruit-4,
.our-clients-say .fruit-6 {
    animation-delay: 1.5s;
}

@keyframes fruitFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

.about-cta-sec {
    padding: 40px 0 80px;
    overflow: hidden;
}

.about-cta-sec .about-cta-wrapper {
    position: relative;
    background: url(../images/about-us/about-cta.webp) no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 30px;
    overflow: hidden;
    min-height: 300px;
}

.about-cta-sec .about-cta-content {
    padding: 45px;
    position: relative;
    z-index: 2;
}

.about-cta-sec .about-cta-content h2 {
    font-size: 50px;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
    max-width: 500px;
}

.about-cta-sec .about-cta-content h2 span {
    color: #FFD400;
}

.about-cta-sec .about-cta-content p {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .95);
    max-width: 520px;
    margin-bottom: 35px;
}

.about-cta-sec .about-cta-btn-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.about-cta-sec .about-cta-btn-group img {
    height: 56px;
    transition: .3s;
}

/* IMAGE SECTION */

.about-cta-sec .about-cta-image {
    position: absolute;
    bottom: -265px;
    width: 55%;
    z-index: 2;
}

.about-cta-sec .about-cta-image img {
    width: 580px;
    display: block;
}

.our-instagram-sec {
    padding: 30px 0 60px;
}

.insta-container {
    position: relative;
}

.insta-container .icon {
    top: 50%;
    left: 50%;
    z-index: 2;
    opacity: 0;
    font-size: 40px;
    visibility: hidden;
    position: absolute;
    color: #ffffff;
    transform: translate(-50%, -50%);
    transition: all 0.4s ease-in-out;
}

.insta-container::before {
    content: "";
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: block;
    position: absolute;
    visibility: hidden;
    background: #0000003b;
    transition: all 0.4s ease-in-out;
}

.insta-container:hover .icon {
    opacity: 1;
    visibility: visible;
}

.insta-container:hover::before {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 575px) {
    .contact-page-banner {
        background-image: url("../images/contact-us/contact-mbl.png") !important;
        background-position: right bottom !important;
        background-repeat: no-repeat !important;
        background-size: 100% auto !important;
                   margin-top: 130px !important;
    }

.contact-page-banner p {
 font-size: 18px;
}
    .contact-page-banner h1 {
        font-size: 18px !important;
                margin-top: -6px !important;
    }
}


/* === Mobile product-card + category fixes (Keerthika) === */
/* Placed in style2.css (loads last) so these win the cascade and are not
   lost when main.css is re-saved from an editor buffer. */

/* (1) Pre-Order cards: lift the +/cart button ABOVE the orange Pre-Order tag
   on every page, and keep it on top of the tag via z-index. */
.product-card.is-preorder .cart-btn {
    /* keep the + at the bottom corner OVERLAPPING the Pre-Order tag, but on
       top of it (tag is z-index:4) so it's visible instead of hidden. */
    z-index: 6 !important;
}
.product-card.is-preorder .plus-icon {
    z-index: 6 !important;
}

/* (2) Quantity dropdown: keep the amount + unit ("12 Pack", "500 g") on ONE
   line, both in the toggle and the open menu. */
.product-card .product-variant-value,
.product-card .product-variant-option {
    white-space: nowrap !important;
}

@media (max-width: 767.98px) {
    /* slightly smaller so longer labels still fit one line on phones */
    .product-card .product-variant-toggle,
    .product-card .product-variant-value,
    .product-card .product-variant-option {
        font-size: 12px !important;
    }

    /* (3) Wishlist heart pinned to the top-right corner in a clear white
       circle so it no longer covers the product image. */
    .product-section .product-card .wishlist-btn,
    .frequent-sec .product-card .wishlist-btn {
        top: 4px !important;
        right: 4px !important;
        left: auto !important;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.92);
        border-radius: 50%;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.14);
    }
    .product-section .product-card .wishlist-btn .heart,
    .frequent-sec .product-card .wishlist-btn .heart {
        width: 13px;
        height: 12px;
    }

    /* (5) Mobile search bar: let the input shrink (min-width:0) so the
       enlarged mic icon stays INSIDE the bar instead of overflowing right. */
    .mobile-search-bar .search-bar input {
        min-width: 0 !important;
        padding-right: 6px !important;
    }
    .mobile-search-bar .search-bar .hdr-mic-btn {
        flex-shrink: 0 !important;
    }

    /* (4) Category page: the sticky category pills must clear the fixed
       header (initial position + sticky offset). */

      .horizontal-tab-strip {
  
        margin-top: 41px !important;
        top: 160px !important;
    }
    
}

/* Home category cards: keep a complete card in view on phones, preserve the
   description, and remove the decorative circle/shadow beneath the image. */
@media (max-width: 767.98px) {
    .home-category-swiper .swiper-slide {
               width: 166px !important;
        margin-right: 20px !important;
    }

    .home-category-swiper .our-products-container {
        width: 100% !important;
        height: auto !important;
        min-height: 300px;
        padding: 22px 0 20px;
        background: linear-gradient(180deg, #fffaf2 0%, #ffe2af 100%);
        justify-content: flex-start;
    }

    .home-category-swiper .product-img-wrapper {
        margin: 20px auto 16px !important;
    }

    .home-category-swiper .product-content-wrapper {
        padding: 0 18px;
    }

    .home-category-swiper .product-img-wrapper,
    .home-category-swiper .product-img-wrapper::before {
        box-shadow: none !important;
    }

    .home-category-swiper .product-img-wrapper::before,
    .home-category-swiper .product-img-wrapper::after {
        display: none;
    }

    .home-category-swiper .sub-heading {
        display: block !important;
        line-height: 1.45;
        margin-top: 6px !important;
    }

    /* The fixed back-to-top control covers the card content on phones. */
    .scroll-top-btn {
        display: none !important;
    }

    .explore-our-products .slider-nav .prev:not(.active-nav),
    .explore-our-products .slider-nav .next:not(.active-nav) {
        pointer-events: none;
    }
}

/* === Product Details page – mobile polish (Keerthika) === */
/* See all -> match home page (bright green, same weight) */
.pro-cate-sec .navi-link,
.pro-cate-sec .navi-link i {
    color: #0aa537 !important;
}
.pro-cate-sec .navi-link {
    font-size: 18px !important;
    font-weight: 600 !important;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    /* (1) Kill the big gap between navbar and product image */
    .prod-details-sec {
        margin-top: 56px !important;
    }
    .prod-details-sec .breadcrumb-nav.pt-4 {
        padding-top: 10px !important;
    }

    /* (2) "Select Quantity: 5Kg" + badge on ONE row; arrows on next row, centered */
    .prod-details-sec .qty-header-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .prod-details-sec .qty-label-group {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }
    /* shrink so "Select Quantity: 5Kg" + badge fit on ONE line at 320px */
    .prod-details-sec .qty-section-label {
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    .prod-details-sec .qty-selected-tag {
        font-size: 9px !important;
        padding: 2px 8px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .prod-details-sec .qty-nav-actions {
        justify-content: center !important;
        width: 100%;
    }

    /* (2b) Price section — align the price box with the MRP / save column,
       give the green price box breathing room, and tidy the OFF badge */
    .prod-details-sec .price-row {
        align-items: center;
        gap: 12px;
        padding: 12px 0 !important;
        margin-bottom: 12px;
    }
    .prod-details-sec .price-now {
        margin-top: 0 !important;
        padding: 5px 10px !important;
        font-size: 22px;
        line-height: 1.1;
    }
    .prod-details-sec .price-mrp {
        font-size: 13px;
    }
    .prod-details-sec .save-tag {
        font-size: 12px;
    }
    .prod-details-sec .off-badge {
        margin-bottom: 16px;
    }

    /* (3) FBT title -> 21px */
    .pro-cate-sec .order-title {
        font-size: 21px !important;
    }
    /* See all mobile size to match home */
    .pro-cate-sec .navi-link {
        font-size: 15px !important;
    }

    /* (5) FBT cards match home format (3 per row) + tidy gutters so first row aligns */
    .pro-cate-sec .frequent-sec {
        --bs-gutter-x: 8px;
        row-gap: 14px;
    }
    .pro-cate-sec .frequent-sec > [class*="col-"] {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}

/* === FBT quantity -> green pill, exactly like home page cards (Keerthika) === */
/* Home cards show the qty as a green rounded "pill" (.product-variant-toggle:
   bg #f3faf2, text #167713, chevron). The Frequently-Bought cards used plain
   text which looked loose/too spacious. Match the home pill look here. */
.pro-cate-sec .frequent-sec .product-card .prod-qty {
    width: 100%;
    min-height: 34px;
    margin-top: 7px;
    padding: 5px 10px;
    border-radius: 7px;
    background: #f3faf2;
    color: #167713 !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pro-cate-sec .frequent-sec .product-card .prod-qty::after {
    content: "";
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin-right: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
@media (max-width: 767.98px) {
    .pro-cate-sec .frequent-sec .product-card .prod-qty {
        min-height: 30px;
        margin-top: 6px;
        padding: 4px 8px;
        font-size: 12px !important;
    }
    .pro-cate-sec .frequent-sec .product-card .prod-qty::after {
        width: 7px;
        height: 7px;
        flex-basis: 7px;
    }
}

/* === Cart page – kill blank space above breadcrumb on mobile (Keerthika) === */
/* Same fix as .prod-details-sec: base rule sets margin-top:140px!important which,
   on top of main's padding-top, leaves a big empty band under the navbar. */
@media (max-width: 767.98px) {
    .my-cart-page {
        margin-top: 56px !important;
    }
    .my-cart-page .breadcrumb-bar {
        padding-top: 10px !important;
    }
}

/* === Salad page – tab strip overflow at 320px (Keerthika) === */
/* .tab-toggle is width:fit-content with wide 28px button padding, so 3 tabs
   ("Salad / Pizza / Smoothies") run off the right edge on small phones.
   Shrink padding/font so they fit, and allow horizontal scroll if a store
   has more tabs than fit. */
@media (max-width: 767.98px) {
    .salad-sec .tab-toggle {
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 4px 5px;
    }
    .salad-sec .tab-toggle::-webkit-scrollbar {
        display: none;
    }
    .salad-sec .tab-toggle button {
        padding: 7px 16px;
        font-size: 13px;
        white-space: nowrap;
        flex: 0 0 auto;
    }
}

/* === Mobile search-bar icons: dial back oversized magnifier + mic (Keerthika) === */
/* Earlier they were bumped to 22px/24px which looks too big at 320px. */
@media (max-width: 767.98px) {
    .mobile-search-bar .search-bar svg,
    .mobile-search-bar .search-bar .icon {
        width: 18px !important;
        height: 18px !important;
    }
    .mobile-search-bar .search-bar .hdr-mic-btn img,
    .mobile-search-bar .search-bar .mic-btn img {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
    }
}

/* === Salad details page – remove big blank space above breadcrumb on mobile (Keerthika) === */
/* .salad-sec-details carries margin-top:170px (desktop header clearance); on
   phones that stacks with main's padding-top and leaves a big empty band. */
@media (max-width: 767.98px) {
    .salad-sec-details {
        margin-top: 56px !important;
    }
}

/* === Add-address / my-orders pages – tighten mobile spacing (Keerthika) === */
/* Removes the big blank band at top (140px margin + py-5) and the heavy
   px-5 side padding that squeezed the cards on small screens. */
@media (max-width: 767.98px) {
    section.my-orders-main {
        margin-top: 44px !important;
        padding-top: 10px !important;
        padding-bottom: 24px !important;
    }
    .my-orders-main > .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* trim oversized inner card paddings so content isn't stretched */
    .my-orders-main .tab-order-header {
        padding: 16px !important;
    }
    .my-orders-main .border-card-header {
        padding: 14px !important;
    }
}

/* === Add-address header: bigger title + compact neat button (Keerthika) === */
/* At 320px a readable "My Address" + the full "Add New Address" button can't
   fit on one row, so stack them: big title on top, compact right-aligned
   pill button below. */
@media (max-width: 767.98px) {
    .tab-order-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .tab-order-header .tab-order-title {
        font-size: 22px !important;
        white-space: nowrap;
    }
    .tab-order-header > div {
        text-align: right;
    }
    /* "Add New Address" – compact single-line pill instead of a tall block */
    .my-address-details .primary-green-btn,
    .tab-order-header .primary-green-btn {
        display: inline-flex !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
        gap: 6px !important;
        border-radius: 8px;
        line-height: 1.2;
    }
    .my-address-details .primary-green-btn img,
    .tab-order-header .primary-green-btn img {
        width: 14px !important;
        height: 14px !important;
    }
}

/* === Coupon page – remove blank space above breadcrumb on mobile (Keerthika) === */
@media (max-width: 767.98px) {
    .coupon-section {
        margin-top: 56px !important;
        padding-top: 6px !important;
    }
}

/* === Special page – remove blank space above content on mobile (Keerthika) === */
/* .special-section stacks margin-top:90px + padding-top:50px on phones (plus
   the header clearance), leaving a big empty band above the content. */
@media (max-width: 767.98px) {
    .special-section {
        margin-top: 56px !important;
        padding-top: 14px !important;
    }
}

/* === Grocery banner: Shop Now button + slider peek fix (Keerthika) === */
/* The intended swiper styles were written for ".grocery-bannner" (3 n's – a
   typo) so they never applied; images rendered at natural size and overflowed
   their slides, so slivers of the neighbouring images showed. Re-apply the
   styles on the correct class and clip each slide so only ONE image shows. */
.grocery-banner .swiper {
    width: 100%;
    overflow: hidden;
}
.grocery-banner .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: transparent;
    /* A global ".swiper-slide { margin-right:35px !important }" (style.css)
       bleeds in and adds a phantom gap to the slide stride, throwing off the
       loop translate so the active image sits off-centre / clipped. Zero it. */
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.grocery-banner .swiper-slide img {
    max-width: 78%;
    max-height: 320px;
    object-fit: contain;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    /* "Shop Now" – compact button instead of the big 180px block.
       banner-content is a flex column (align-items:stretch), so the button
       stretched full-width — align-self:flex-start makes it hug its text. */
    .grocery-banner .btn-shop {
        display: inline-flex;
        align-self: flex-start;
        width: auto;
        height: auto;
        padding: 9px 22px;
        font-size: 13px;
        border-radius: 8px;
    }
    .grocery-banner .swiper-slide img {
        max-width: 62%;
        max-height: 240px;
    }
}

/* === Grocery banner: blank space above on phones wider than 320px (Keerthika) === */
/* The small header-clearance margin (45px) was only defined at max-width:320px,
   so 321–767px fell back to the 120px base and showed a big empty band.
   Apply the small margin across all phones. */
@media (max-width: 767.98px) {
    .grocery-banner {
        margin-top: 45px !important;
    }
}

/* === Grocery section "See all" – match home page size/weight (Keerthika) === */
/* Home renders "See all" at 16px/600 green in every section. The grocery
   tab-section link only picked up the base .navi-link mobile size (13px/500),
   so normalise it to the home look. */
@media (max-width: 767.98px) {
    .grocery-tab-sec .navi-link,
    .gro-category-section .navi-link {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
}

/* === Grocery tab section: variant dropdown was clipped (Keerthika) === */
/* .cards-viewport had overflow:hidden (intended for a horizontal cards-row that
   this markup doesn't use), which cut off the open "5 kg" variant menu. */
.grocery-tab-sec .cards-viewport {
    overflow: visible !important;
}

/* === Home-style green "See all" — consistent 16px/600 on mobile (Keerthika) === */
/* .text-light-green marks the home-page "See all" link; the base .navi-link
   mobile size (13px/500) made it smaller than home (16px/600) on inner pages
   (best-seller "Order Again", etc). Enforce the home size wherever it's used. */
@media (max-width: 767.98px) {
    .navi-link.text-light-green {
        font-size: 16px !important;
        font-weight: 600 !important;
    }
}

/* === "See all" links: identical to the home page on EVERY page and breakpoint.
      The grocery page rendered them bigger (base 20px/500 on desktop) and with
      an olive (#878400) arrow instead of the home green. Normalise the link and
      its arrow to the home look — 16px / 600 / green (#0aa537). (Keerthika) === */
.navi-link.text-light-green {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0aa537 !important;
}
.navi-link.text-light-green i {
    color: #0aa537 !important;
}

/* === Contact-us page – blank space above banner on mobile (Keerthika) === */
/* .contact-page-banner had margin-top 85/110/130px across breakpoints; stacked
   on main's header clearance it left a big empty band above the green banner. */
@media (max-width: 767.98px) {
    .contact-page-banner {
        margin-top: 40px !important;
    }
}

/* === Shop by Price / grocery tab cards: un-clip the open variant menu (Keerthika) === */
/* The tab cards compute overflow:hidden (cardReveal animation card), which cut
   off the open quantity dropdown. When the menu is open, let it overflow. */
.shop-tab-sec .product-card.variant-menu-open,
.grocery-tab-sec .product-card.variant-menu-open {
    overflow: visible !important;
}

/* === Policy / offer / about / subscription pages – comfortable gap between
      the header and the title on mobile (~200px from top) (Keerthika) === */
@media (max-width: 767.98px) {
    /* privacy / terms / return / refund / cancellation policy */
    .policy-section {
        margin-top: 95px !important;
        padding-top: 16px !important;
    }
    /* limited-offer + deals-list */
    .limited-offer-main {
        margin-top: 95px !important;
    }
    /* subscription hero + about banner: sit tight under the header (these are
       hero/banner sections, not a title that needs a gap like the policy pages) */
    .subscription-section {
        margin-top: 15px !important;
        padding-top: 10px !important;
    }
    .about-banner {
        /* Header clearance is already handled by `main { padding-top: 52px }`
           on inner pages; the extra 40px only added a white gap above the hero. */
        margin-top: 0 !important;
    }
}

/* === Subscription plans: click-to-select (orange = selected) (Keerthika) === */
/* Any card can be the selected (orange) one; the rest stay white. The center
   card is selected by default (JS). Works for both the premium and simple
   card structures. */
.subscription-plan .plan-card {
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
}

/* --- Selected (orange) state — applies to ANY card --- */
.subscription-plan .plan-card.plan-selected {
    background: linear-gradient(180deg, #F28729 0%, #D12121 147.92%) !important;
    box-shadow: 0 0 25px rgba(242, 134, 41, .5) !important;
    border-color: transparent !important;
}
.subscription-plan .plan-card.plan-selected,
.subscription-plan .plan-card.plan-selected h6,
.subscription-plan .plan-card.plan-selected .plan-type,
.subscription-plan .plan-card.plan-selected .plan-type.basic,
.subscription-plan .plan-card.plan-selected .price,
.subscription-plan .plan-card.plan-selected .price span,
.subscription-plan .plan-card.plan-selected .desc,
.subscription-plan .plan-card.plan-selected .plan-p,
.subscription-plan .plan-card.plan-selected .features li,
.subscription-plan .plan-card.plan-selected .planlist1 {
    color: #fff !important;
}
.subscription-plan .plan-card.plan-selected hr {
    border-color: rgba(255, 255, 255, .35) !important;
}
.subscription-plan .plan-card.plan-selected .features li::before {
    color: #F28729 !important;
    background: #fff !important;
}
.subscription-plan .plan-card.plan-selected .btn {
    background: #fff !important;
    color: #F28729 !important;
    border-color: #fff !important;
}
.subscription-plan .plan-card.plan-selected .family-pack-badge {
    background: #fff !important;
    color: #F28729 !important;
}

/* --- Premium card when NOT selected -> render white like the simple cards --- */
.subscription-plan .plan-card.premium-card1:not(.plan-selected) {
    background: #fff !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .06) !important;
    border: 1px solid #8593a352 !important;
}
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .plan-p,
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .price,
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .price span,
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .planlist1 {
    color: #1f2937 !important;
}
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .plan-type.text-white {
    color: #F28729 !important;
}
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .features li::before {
    color: #fff !important;
    background: #F28729 !important;
}
.subscription-plan .plan-card.premium-card1:not(.plan-selected) .get-pre {
    background: #F28729 !important;
    color: #fff !important;
}

/* === Home subscription plans: click-to-select (green = active) (Keerthika) ===
   Mirrors the subscription-page pattern but green: the selected card gets the
   premium green look and its text turns white; every other card (including the
   static "premium"/Most-Popular one) renders white. JS toggles .plan-selected.
   Scoped with :not(.subscription-plan) so it never touches the subscription
   page (which shares the .saalad-plan class but must stay orange). */
.saalad-plan:not(.subscription-plan) .plan-card {
    cursor: pointer;
    transition: box-shadow .2s ease, transform .2s ease;
}

/* --- Selected (green) state — applies to ANY card --- */
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected {
    background: url(../images/home/preminum-plan.png) no-repeat !important;
    background-size: cover !important;
    box-shadow: 0px 8px 80px 0px rgba(5, 121, 107, 0.32) !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected,
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .plan-type,
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .price,
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .price span,
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .desc,
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .features li {
    color: #fff !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected hr {
    border-color: rgba(255, 255, 255, .35) !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .features li::before {
    color: var(--primary) !important;
    background: #fff !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.plan-selected .btn {
    background: #fff !important;
    color: var(--primary) !important;
    border-color: #fff !important;
}

/* --- "Most Popular" premium card when NOT selected -> white like the rest --- */
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) {
    background: #fff !important;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .plan-type {
    color: #05796b !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .price,
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .desc,
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .desc.text-white {
    color: #1f2937 !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .price span,
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) p,
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) li {
    color: #606060 !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .features li::before {
    color: #fff !important;
    background: var(--primary) !important;
}
.saalad-plan:not(.subscription-plan) .plan-card.premium:not(.plan-selected) .btn-white {
    background: #fff !important;
    color: var(--primary) !important;
    border: 1px solid #8593a352 !important;
}

/* === Inner-page header clearance restore (Keerthika) === */
/* The fixed header (logo row + search bar) covers ~147px on phones. A change
   dropped `main`'s padding-top to 52px, which tucked page content (salad tab,
   address card, breadcrumbs, banners…) behind the header. Restore the ~120px
   clearance the per-page top margins were designed around. */
@media (max-width: 767.98px) {
    body:not(.home-section-spacing) .body_wrap > main {
        padding-top: 120px !important;
    }
    /* shop-by-price used the smallest margin (20px) -> give it a touch more so
       its breadcrumb clears the header too */
    .shop-tab-sec {
        margin-top: 34px !important;
    }
}

/* === Home hero: buttons below the image on stacked (mobile/tablet) layout (Keerthika) === */
/* Desktop keeps text+buttons (col-lg-7) beside the image (col-lg-5). When the
   columns stack, the buttons sat above the image; promote col-lg-7's children
   into the row's flex flow and reorder: title -> image -> buttons. */
@media (max-width: 991.98px) {
    .home-dynamic-hero .row {
        flex-direction: column;
    }
    .home-dynamic-hero .col-lg-7 {
        display: contents;
    }
    .home-dynamic-hero .col-lg-7 > * {
        width: 100%;
    }
    .home-dynamic-hero .title {
        order: 1;
    }
    .home-dynamic-hero .col-lg-7 > p {
        order: 2;
    }
    .home-dynamic-hero .col-lg-5 {
        order: 3;
    }
    .home-dynamic-hero .btn-list {
        order: 4;
        margin-top: 30px;
    }
}

/* === Home hero: fit content height on mobile (was full-viewport 100vh, which
      left a big empty gap below the buttons before the next section) (Keerthika) === */
@media (max-width: 991.98px) {
    .home-dynamic-hero .home-hero-swiper,
    .home-dynamic-hero .home-hero-swiper .swiper-wrapper,
    .home-dynamic-hero .home-hero-slide,
    .home-dynamic-hero .home-hero-swiper .swiper-slide {
        height: auto !important;
        min-height: 0 !important;
    }
    .home-dynamic-hero .home-hero-slide {
        padding-bottom: 8px;
    }
}

/* === Explore Our Products slider: first card fully visible on large phones
      (480-767px) — was slidesPerView:1 (full-width slide, empty space) (Keerthika) === */
@media (min-width: 480px) and (max-width: 767.98px) {
    .home-category-swiper .swiper-slide {
        width: 280px !important;
        height: auto;
    }
    .home-category-swiper .our-products-container {
        width: 100% !important;
    }
}

/* === OTP modal: 4 input boxes overflowed on mobile (fixed 70px each ≈ 328px).
      Make them share the row so all four fit. (Keerthika) === */
@media (max-width: 767.98px) {
    .otp-box {
        gap: 10px;
        width: 100%;
        justify-content: space-between;
    }
    .otp-input {
        width: auto !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: 54px;
    }
}
@media (max-width: 360px) {
    .otp-box { gap: 8px; }
    .otp-input { height: 50px; }
}

/* === Cart page: responsive items + content-height card on mobile (Keerthika) === */
@media (max-width: 767.98px) {
    /* card grows with its items instead of a fixed 477px (kills the empty gap) */
    .my-cart-page .cart-items-scroll {
        height: auto !important;
        max-height: 62vh;
    }
    .my-cart-page .cart-item {
        padding: 10px 12px;
        margin: 10px;
    }
    /* single nowrap row so the qty control can't overlap the name/price */
    .my-cart-page .cart-item .row {
        flex-wrap: nowrap !important;
        align-items: center;
        --bs-gutter-x: 8px;
    }
    .my-cart-page .cart-item .row > [class*="col-"] {
        width: auto;
        flex: 0 0 auto;
        max-width: none;
    }
    .my-cart-page .cart-item .row > [class*="col-"]:nth-child(2) {
        flex: 1 1 auto;      /* info column fills the middle, name ellipsizes */
        min-width: 0;
    }
    /* smaller image */
    .my-cart-page .item-img {
        width: 56px;
        height: 56px;
        padding: 3px;
    }
    .my-cart-page .item-img img {
        width: 46px;
        height: 46px;
    }
    /* reduced fonts */
    .my-cart-page .item-name  { font-size: 14px; }
    .my-cart-page .item-price { font-size: 15px; }
    .my-cart-page .item-mrp   { font-size: 12px; }
    .my-cart-page .item-size  { font-size: 12px; }
    /* compact quantity control */
    .my-cart-page .qty-ctrl button {
        width: 30px;
        height: 28px;
        font-size: 12px;
    }
    .my-cart-page .qty-ctrl span {
        font-size: 13px;
        min-width: 16px;
    }
}
@media (max-width: 360px) {
    .my-cart-page .item-name  { font-size: 13px; }
    .my-cart-page .item-price { font-size: 14px; }
    .my-cart-page .qty-ctrl button { width: 26px; }
    .my-cart-page .item-img { width: 50px; height: 50px; }
}

/* === Cart page: smaller title + title & "N items" on one row on mobile (Keerthika) === */
@media (max-width: 767.98px) {
    .my-cart-page .cart-title {
        font-size: 20px;
    }
    /* wrapper holding the title + subtitle -> lay them side by side */
    .my-cart-page .cart-header > div {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 4px 8px;
    }
    .my-cart-page .cart-subtitle {
        margin-top: 0;
    }
}

/* === Home "Healthy Made Your Way": trim space above/below the title on mobile (Keerthika) === */
@media (max-width: 767.98px) {
    .health-made.space {
        padding-top: 18px !important;
        padding-bottom: 18px !important;
    }
    .health-made .row.my-4.mb-5 {
        margin-top: 6px !important;
        margin-bottom: 12px !important;
    }
}

/* also tighten the promo card's internal top space on mobile */
@media (max-width: 767.98px) {
    .health-made .top-banner.mt-5 {
        margin-top: 18px !important;
    }
}

/* === Mobile: hide Fresh & Healthy description; compact salad-subscription title (Keerthika) === */
@media (max-width: 767.98px) {
    /* Fresh and Healthy section: hide the description paragraph */
    .fresh-products .title-container p {
        display: none;
    }
    /* "Salad Subscription" title -> smaller, one line */
    .saalad-plan .title-container .section-title {
        font-size: 22px !important;
        white-space: nowrap;
    }
}

/* === Mobile: bolder section titles (Keerthika) === */
@media (max-width: 767.98px) {
    .title-container .section-title {
        font-weight: 700 !important;
    }
}

/* === Task 4: All Essentials — tighter item spacing on mobile (was wide columns
      with small centered items -> big gaps) (Keerthika) === */
@media (max-width: 767.98px) {
    .all-essentials .home-essentials-swiper .swiper-wrapper {
        grid-auto-columns: 104px !important;
        column-gap: 10px !important;
    }
}

/* === Task 1: home Salad Subscription plans — only the selected card is green,
      the rest white; click to select (mobile) (Keerthika) === */
@media (max-width: 767.98px) {
    .saalad-plan .plan-card { cursor: pointer; }
    /* green (premium) card rendered white unless it is the selected one */
    .saalad-plan .plan-card.premium:not(.plan-selected) {
        background: #fff !important;
        color: #1f2937 !important;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px !important;
    }
    .saalad-plan .plan-card.premium:not(.plan-selected) h6,
    .saalad-plan .plan-card.premium:not(.plan-selected) p,
    .saalad-plan .plan-card.premium:not(.plan-selected) li,
    .saalad-plan .plan-card.premium:not(.plan-selected) .plan-type,
    .saalad-plan .plan-card.premium:not(.plan-selected) .price,
    .saalad-plan .plan-card.premium:not(.plan-selected) .price span,
    .saalad-plan .plan-card.premium:not(.plan-selected) .plan1-text {
        color: #1f2937 !important;
    }
    .saalad-plan .plan-card.premium:not(.plan-selected) .features li::before {
        color: #fff !important;
        background: #05796b !important;
    }
    /* the selected card -> green premium look (works on any card) */
    .saalad-plan .plan-card.plan-selected {
        background: url(../images/home/preminum-plan.png) no-repeat !important;
        background-size: cover !important;
        color: #fff !important;
        box-shadow: 0px 8px 40px 0px rgba(5, 121, 107, 0.32) !important;
    }
    .saalad-plan .plan-card.plan-selected h6,
    .saalad-plan .plan-card.plan-selected p,
    .saalad-plan .plan-card.plan-selected li,
    .saalad-plan .plan-card.plan-selected .plan-type,
    .saalad-plan .plan-card.plan-selected .price,
    .saalad-plan .plan-card.plan-selected .price span,
    .saalad-plan .plan-card.plan-selected .plan1-text {
        color: #fff !important;
    }
}

/* === Product details FBT cards: keep struck price beside the current price (Keerthika) === */
@media (max-width: 767.98px) {
    .pro-cate-sec .frequent-sec .product-card .price-row {
        flex-wrap: nowrap !important;
        gap: 4px !important;
        white-space: nowrap;
    }
    .pro-cate-sec .frequent-sec .product-card .price-now {
        font-size: 13px !important;
    }
    .pro-cate-sec .frequent-sec .product-card .price-old {
        font-size: 11px !important;
        white-space: nowrap;
    }
}
@media (max-width: 360px) {
    .pro-cate-sec .frequent-sec .product-card .price-now { font-size: 12px !important; }
    .pro-cate-sec .frequent-sec .product-card .price-old { font-size: 10px !important; }
}

/* === Profile pages – mobile responsiveness (Keerthika) === */
@media (max-width: 767.98px) {
    /* 1. Your Salads tabs (Upcoming / Delivered / Paused) — fit 3 across */
    .salad-tabs {
        gap: 6px !important;
    }
    .salad-tabs .salad-tab {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        height: auto;
        min-height: 38px;
        font-size: 13px;
        padding: 8px 10px;
        line-height: 1.2;
        display: flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

    /* 2. Notification preference toggle — keep a proper pill switch */
    #NotificationsPreferences .custom-toggle {
        width: 46px !important;
        height: 26px !important;
        flex: 0 0 auto;
    }
    #NotificationsPreferences .slider:before {
        height: 18px !important;
        width: 18px !important;
        left: 4px !important;
        bottom: 4px !important;
    }
    #NotificationsPreferences input:checked + .slider:before {
        transform: translateX(20px) !important;
    }

    /* 3. Invite Friends — smaller fonts, less padding. The base .refer-header has
       a FIXED height:380px; on phones its content is taller, so the wallet summary
       overflowed down and overlapped the "My Referrals" section. Let it grow. */
    .refer-header {
        padding: 20px 14px !important;
        height: auto !important;
    }
    .refe-title {
        font-size: 20px !important;
    }
    .refer-link-container {
        padding: 8px !important;
    }
    .refer-link-container .fw-medium {
        font-size: 12px !important;
        word-break: break-all;
    }
    .ref-copy-sec {
        font-size: 12px !important;
        white-space: nowrap;
    }
    .refer-header .d-flex.gap-4 {
        gap: 16px !important;
    }

    /* 5. Need Help — smaller fonts, tighter padding */
    .faq-card-sec {
        padding: 14px !important;
        margin-bottom: 14px !important;
    }
    .faq-card-sec .fw-bold,
    .faq-card-sec .list-group-item {
        font-size: 14px !important;
    }
    .faq-card-sec .py-3 {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .tab-opt-title {
        font-size: 18px !important;
    }
}

/* ============================================================
   GROUP-GRID section ("ChoteKisan Collection" / "All Essentials")
   mobile fixes (Keerthika):
   1. TITLE + ARROWS OVERLAP — .slider-nav was position:absolute; top:-82px
      sitting on top of the title. Anchor it to the section's top-right so
      the title can wrap freely underneath without ever running into it.
   2. CARD CUTTING — force scroll-snap so the grid always rests on a full
      card (only the peeked next card is partially shown, never the first).
   (Arrow-sliding is wired in index.blade.php — native grid has no Swiper.)
   ============================================================ */
@media (max-width: 767.98px) {
    /* make the whole section the positioning context for the nav */
    .all-essentials {
        position: relative !important;
    }
    .all-essentials .products-slider-wrapper {
        position: static !important;
    }
    /* gap under the title row so the cards clear the title + arrows */
    .all-essentials .row.mb-5 {
        margin-bottom: 1.5rem !important;
    }

    /* pin the arrows to the top-right of the section (title band) */
    .all-essentials .slider-nav {
        position: absolute !important;
        top: 20px !important; /* vertically centre the arrows on the title line */
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        z-index: 6;
        gap: 8px;
    }
    .all-essentials .slider-nav .prev-1,
    .all-essentials .slider-nav .next-1 {
        width: 32px !important;
        height: 32px !important;
    }
    .all-essentials .slider-nav .prev-1 svg,
    .all-essentials .slider-nav .next-1 svg {
        width: 14px !important;
        height: 14px !important;
    }

    /* let the title wrap to a new line; reserve room so it never sits under
       the arrows (2 x 32px + gap ≈ 72px, pinned at right:12px) */
    .all-essentials .title-container {
        padding-right: 82px !important;
    }
    .all-essentials .title-container .section-title {
        font-size: 19px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        margin-bottom: 0 !important;
    }

    /* card cutting: snap so a full card is always the left-most view */
    .all-essentials .home-essentials-swiper .swiper-wrapper {
        scroll-snap-type: x mandatory !important;
        scroll-padding-left: 0 !important;
    }
}

/* ============================================================
   FOOTER credit: keep "Design & Developed by Cloudi5 Technologies"
   together so "Cloudi5" never drops onto its own line on mobile
   (was flex-direction:column stacking the link below). (Keerthika)
   ============================================================ */
.footer-bottom .footer-dev-credit,
.footer-bottom .footer-company {
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    .footer-bottom .footer-com-sec {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        text-align: center;
    }
    /* let the copyright wrap, but the credit span stays a single unit */
    .footer-bottom .footer-com-sec p {
        white-space: normal !important;
        text-align: center;
    }
    .footer-bottom .footer-dev-credit {
        white-space: nowrap !important;
    }
}

/* ============================================================
   SUBSCRIPTION PAGE mobile fixes (Keerthika)
   ============================================================ */
@media (max-width: 767.98px) {
    /* Task 3: the long plan title "Choose Your Perfect Plan for Salads" was
       forced onto one line by the shared .saalad-plan nowrap rule (meant for
       the home page's short "Salad Subscription"), so it ran off-screen.
       Allow it to wrap and give it the full row width. */
    .subscription-plan .title-container .section-title {
        white-space: normal !important;
        font-size: 21px !important;
        line-height: 1.3 !important;
    }
    .subscription-plan .row.my-4 > .col-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Task 4: "What You'll Get" title (h2 has mb-0) sat only ~15px above the
       first card image. Add breathing room under the heading block. */
    .subscription-cards .title-container h2 {
        margin-bottom: 6px !important;
    }
    .subscription-cards .row.align-items-center {
        margin-top: 24px !important;
    }
}

/* ============================================================
   SUBSCRIPTION PAGE mobile: cleaner, even sections (Keerthika)
   1. Hide the paragraph description under each section title
      (main title is enough on small screens).
   2. Reduce the large 80px gaps above/below the sections
      (esp. "How You'll Get") so the page reads evenly.
   ============================================================ */
@media (max-width: 767.98px) {
    /* 1. hide section descriptions (only descriptions live in .title-container p) */
    .subscription-plan .title-container p,
    .subscription-cards .title-container p,
    .subscription-work .title-container p,
    .subscription-faq .title-container p {
        display: none !important;
    }

    /* 2. tighter, even inter-section spacing */
    .subscription-cards {
        margin-top: 36px !important;
    }
    .subscription-work {
        margin-top: 36px !important;
    }
    .subscription-faq {
        margin-top: 36px !important;
    }
    /* internal gap between the "How You'll Get" title and its cards */
    .subscription-work .work-title {
        margin-bottom: 26px !important;
    }
}

/* === Explore Our Products nav arrows: match the smaller "All Essentials"
      arrow size on mobile (were 40px vs 32px). Desktop stays 40px. (Keerthika) === */
@media (max-width: 767.98px) {
    .explore-our-products .slider-nav .prev,
    .explore-our-products .slider-nav .next {
        width: 32px !important;
        height: 32px !important;
    }
}

/* === Deals hero (mobile/tablet): show the two feature cards BELOW the cart
      image. The cards live inside the left text column, so we flatten that
      column (display:contents) and re-order text → cart image → cards.
      Desktop (>= 992px) is untouched. (Keerthika) === */
@media (max-width: 991.98px) {
    .Deals-main .home-banner .row > .deals-hero-left {
        display: contents;
    }
    .Deals-main .home-banner .deals-hero-text {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
        padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
    }
    .Deals-main .home-banner .deals-hero-img {
        order: 2;
    }
    .Deals-main .home-banner .deals-hero-cards {
        order: 3;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

/* === "Healthy Made Your Way" cards on mobile (Keerthika) ===
   Keep each produce image ON its card, small, tucked into the TOP-RIGHT corner
   so it never covers the title (34px title leaves room on the right). The salad
   image was display:none — re-show it; and the salad card's text is left-aligned
   on mobile so its top-right image has clear space. */
@media (max-width: 767.98px) {
    .top-banner-container,
    .bottom-banner-container {
        position: relative;
    }
    .top-banner-container .img-box,
    .bottom-banner-container .img-box {
        position: absolute !important;
        top: 2px !important;
        right: 6px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 120px !important;
        margin: 0 !important;
        z-index: 3 !important;
    }
    /* both product images: visible (salad was display:none) and small; the
       max-height keeps the image inside the title band so it never drops onto
       the description text below, whatever the image's aspect ratio */
    .top-banner-container .img-box img,
    .bottom-banner-container .img-box .bottom-main-img,
    .img-box.left img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 92px !important;
        object-fit: contain !important;
    }
    /* salad card: left-align text so the top-right image never covers it */
    .bottom-banner-container .content {
        align-items: flex-start !important;
        text-align: left !important;
    }
    .bottom-banner .desc,
    .bottom-banner .title {
        text-align: left !important;
    }
    /* "Order Now!" badge: small, on the image's top-right corner */
    .top-banner-container .badge-circle,
    .bottom-banner-container .badge-circle {
        top: -6px !important;
        right: -6px !important;
        left: auto !important;
        bottom: auto !important;
        padding: 0 !important;
    }
    .top-banner-container .badge-circle img,
    .bottom-banner-container .badge-circle img,
    .bottom-banner-container .badge-circle .bottom-cir-img {
        width: 40px !important;
    }
}

/* === About-us app-download CTA on mobile (Keerthika) ===
   The store-badge buttons were oversized and the phone mock-up was absolutely
   positioned, so it got clipped by the wrapper and looked small. Shrink the
   badges and drop the phone into normal flow so it displays fully and larger. */
@media (max-width: 767.98px) {
    .about-cta-sec .about-cta-btn-group img {
        height: 40px;
    }
    .about-cta-sec .about-cta-image {
        position: static;
        width: 100%;
        text-align: center;
        margin-top: 6px;
    }
    .about-cta-sec .about-cta-image img {
        position: static;
        width: 90%;
        max-width: 420px;
        margin: 0 auto;
        transform: none;
    }
    .about-cta-sec .about-cta-wrapper {
        height: auto;
    }
}

/* === Home hero image on laptop/desktop (Keerthika) ===
   The right-side basket image was a fixed 460px wide, which on laptop screens
   grew too tall and got clipped at the top and bottom. Cap its height so it
   stays compact and fully visible; mobile keeps its own smaller sizes. */
@media (min-width: 992px) {
    .home-banner .img-container img {
        width: auto;
        max-width: 100%;
        max-height: 360px;
    }
}

/* === Quantity dropdown (.qty-dropdown): unify with the green-pill design used
   by .product-variant-dropdown, so the quantity selector looks identical on
   EVERY page (best-seller, cart, wishlist, limited-offer, product-details,
   profile…). Matches the reference: light-green pill toggle, white menu opening
   downward, dark-green selected item. (Keerthika) === */
.qty-dropdown {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 92px;
}
/* toggle → light-green pill */
.qty-dropdown .qty-selected {
    width: 100%;
    min-height: 34px;
    padding: 5px 8px 5px 12px;
    border: 0;
    border-radius: 7px;
    background: #f3faf2;
    color: #167713;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}
.qty-dropdown .qty-selected i {
    font-size: 11px;
    transition: transform 0.2s ease;
}
.qty-dropdown.active .qty-selected i {
    transform: rotate(180deg);
}
/* menu → white box BELOW the pill (was opening upward at -130px) */
.qty-dropdown .qty-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 5px);
    width: 100%;
    min-width: 110px;
    max-height: 180px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e1e8df;
    border-radius: 9px;
    box-shadow: 0 10px 28px rgba(24, 62, 22, 0.16);
    padding: 5px;
    margin: 0;
    list-style: none;
    display: none;
    z-index: 10;
}
.qty-dropdown.active .qty-menu {
    display: block;
}
.qty-dropdown .qty-menu li {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #394239;
    list-style: none;
}
.qty-dropdown .qty-menu li.active {
    background: #167713;
    color: #fff;
}
.qty-dropdown .qty-menu li:not(.active):hover {
    background: #edf7ec;
    color: #126b10;
}

/* === Filter offcanvas (mobile modal): the accordion group is capped at
   max-width:320px for the DESKTOP sidebar, which in the full-width modal left a
   big gap after the chevron. Let it fill the modal so the chevron sits flush at
   the right edge. (Keerthika) === */
.offcanvas .catalog-filter-form,
.offcanvas .drp-filter-group,
.offcanvas .filter-section {
    max-width: none !important;
    width: 100%;
}
.offcanvas .drp-filter-group summary {
    padding-right: 16px;
}
/* "Filter … Clear all" header: fill the modal so "Clear all" sits at the right end */
.offcanvas .filter-header {
    padding-right: 4px;
}

/* === Product-details "Frequently Bought Together" cards (Keerthika) ===
   Tighter, home-like cards: smaller image box so the image fills it (was gappy),
   compact spacing, and the quantity dropdown sits below the name in its own row
   OUTSIDE the card link (so tapping it opens instead of navigating). */
.pro-cate-sec .frequent-sec .product-card {
    padding: 8px 8px 12px;
}
.pro-cate-sec .frequent-sec .product-card .img-area {
    height: 120px;
}
.pro-cate-sec .frequent-sec .product-card .img-area img {
    width: 100%;
    height: 100%;
    padding: 8px;
}
.pro-cate-sec .frequent-sec .product-card .info {
    padding: 8px 2px 0;
}
.pro-cate-sec .frequent-sec .product-card .prod-name {
    margin: 3px 0 0;
    min-height: 0;
}
.pro-cate-sec .frequent-sec .fbt-variant {
    padding: 6px 2px 0;
}
.pro-cate-sec .frequent-sec .fbt-variant .qty-dropdown {
    width: 100%;
    min-width: 0;
}

/* === Coupon page: small breathing space above the breadcrumb on large screens
   (it was sitting tight against the top / header). Mobile already has its own
   tighter spacing. (Keerthika) === */
@media (min-width: 768px) {
    .coupon-section .custom-breadcrumb {
        margin-top: 16px;
    }
}

/* === Sticky cart indicator — compact pill (Keerthika) ===
   Small rounded box: the added product's image (white thumb) with a red item-count
   badge + "View Cart". Shrinks to its content (the old 420px width left a big blank
   right side) and stays visible on every page while the cart has items
   (window.updateCartBadge drives the count/visibility). */
.cart-toast-wrap.cart-sticky {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    cursor: pointer;
}
.cart-toast-wrap.cart-sticky .cart-toast {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 10px 18px 10px 10px;
    border-radius: 12px;
}
.cart-toast-wrap.cart-sticky .cart-sticky-thumb {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: #fff;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cart-toast-wrap.cart-sticky .cart-sticky-thumb img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: contain;
    border-radius: 9px;
}
.cart-toast-wrap.cart-sticky .cart-sticky-count {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 10px;
    background: #e11d1d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #0c7b09;
}
.cart-toast-wrap.cart-sticky .cart-sticky-label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* === Profile "Your Salads" tab (Keerthika) ===
   1. The heading carried margin-right:200px which pushed "Your Salads" into
      wrapping / overflowing the narrow profile tab — drop it, keep one line.
   2. The empty-state illustration had margin-left:80px, shoving it off-centre —
      centre it and cap its width. */
.my-salad-page .heading-salad {
    margin-right: 0 !important;
    white-space: nowrap;
}
.empty-delivered-inner img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    max-width: 100%;
}

/* ===================================================================
   Order tracking timeline — unified single-orange accent (design match).
   Overrides the older per-stage multi-colour scheme (blue/violet/green)
   so every reached step reads orange with a soft peach highlight, and
   upcoming steps stay clean hollow-grey. Appended last so it wins. */

/* Active step highlight box — peach for whichever stage is current */
.stage-active#Order-Placed,
.stage-active#Order-Confirmed,
.stage-active#Out-For-Delivery,
.stage-active#Delivered {
    background-color: #FEF5EB;
}

/* Reached-step labels: orange (was blue / violet / green per stage) */
.stage-active#Order-Placed h6,     .stage-completed#Order-Placed h6,
.stage-active#Order-Confirmed h6,  .stage-completed#Order-Confirmed h6,
.stage-active#Out-For-Delivery h6, .stage-completed#Out-For-Delivery h6,
.stage-active#Delivered h6,        .stage-completed#Delivered h6 {
    color: #F07C00;
}

/* Connector line: solid orange once a step is reached, dashed grey while
   upcoming (the base rule already renders the dashed-grey default). */
.stage-active#Order-Placed .order_icons::before,     .stage-completed#Order-Placed .order_icons::before,
.stage-active#Order-Confirmed .order_icons::before,  .stage-completed#Order-Confirmed .order_icons::before,
.stage-active#Out-For-Delivery .order_icons::before, .stage-completed#Out-For-Delivery .order_icons::before,
.stage-active#Delivered .order_icons::before,        .stage-completed#Delivered .order_icons::before {
    background: #F07C00 !important;
}

/* ===================================================================
   My Orders — empty state vertical centering.
   The orders card is min-vh-100, so the "No Orders Yet" illustration used
   to sit near the bottom. Give the empty wrapper a matching min-height and
   centre its content so it lands in the middle of the page. */
#Product_List_Empty {
    min-height: 78vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#Product_List_Empty .tab-content-center {
    height: auto;
}
/* the intro paragraph is width:50% inline — too narrow/awkward on phones */
#Product_List_Empty .tab-order-para {
    max-width: 420px;
    width: auto !important;
}

/* ===================================================================
   My Orders — responsive polish for the order-list cards. */
@media (max-width: 575.98px) {
    /* keep the status/date block and the price+arrow on one row but let it
       wrap gracefully instead of overflowing on very narrow screens */
    .order-card-header {
        flex-wrap: wrap;
        gap: 8px;
    }
    .order-price-flex {
        margin-left: auto;
    }
    /* "Order Again" full-width and easy to tap under the product thumbnails */
    .order-card-content .text-end .secondary-green-btn {
        display: block;
        width: 100%;
        text-align: center;
    }
    /* long addresses / values in the detail bill shouldn't overflow */
    .bill-info-left,
    .bill-info-right {
        word-break: break-word;
    }
    #Product_List_Empty {
        min-height: 70vh;
    }
}

/* ═══ Profile & cart tweaks (Keerthika) ═══════════════════════════════ */

/* Content card: was min-vh-100, which left a large empty gap above the
   footer on short screens (empty subscription / salads / address). A more
   modest min-height keeps the panel substantial without the dead space. */
.profile-page .profile-content-card {
    min-height: 60vh;
}

/* Trim the extra bottom padding under the profile section so the footer
   sits closer to the content on every profile sub-screen. */
section.profile-page.py-5 {
    padding-bottom: 1.5rem !important;
}

@media (max-width: 767.98px) {
    .profile-page .profile-content-card {
        min-height: 50vh;
    }
    #Product_List_Empty {
        min-height: 50vh;
    }
}

/* Cart popup opens from the bottom-right, just above the scroll-to-top
   button, instead of dropping down from the header cart icon. */
.cart-added-wrapper.cart-added-active .cart-added-box {
    position: fixed;
    top: auto;
    left: auto;
    right: 25px;
    bottom: 95px;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.cart-added-box::before {
    display: none !important;
}

@media (max-width: 575px) {
    .cart-added-wrapper.cart-added-active .cart-added-box {
        right: 12px;
        bottom: 88px;
        width: calc(100% - 24px);
        max-width: 320px;
        transform: translateY(0);
    }
}