@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=Nunito:wght@400;500;600;700&display=swap");
:root {
    --gold: #ffc83d;
    --brown: #5a2105;
    --orange: #b73a05;
    --cream: #fff9e8;
    --pack: #f1ecb5;
    --green: #00a651;
    --ink: #25160f;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}
body {
    overflow-x: hidden;
    background: var(--cream);
    color: var(--ink);
    font-family: "Nunito", sans-serif;
    font-size: 15px;
}
.topLogoImg{ width: 10rem;}
.shadow-lg nav{padding:10px 2rem;}
.shadow-lg nav .topLogoImg{width: 8rem;}
.brand-tagline {
    font-family: "Great Vibes", cursive;
    font-size: clamp(2.6rem, 5vw, 3.75rem);
    font-weight: 400;
    line-height: 1;
}
.pageContent{font-size:16px; line-height:25px;}
.pageContent p{margin-bottom: 15px;}
.pageContent ol, .pageContent ul{list-style-type: auto;list-style-position: outside;margin-left: 30px;}
.pageContent li{ margin-bottom: 10px;}
.hero-heading {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 600;
    line-height: 1.03;
}
.section-heading {
    font-size: clamp(2.35rem, 4.5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.08;
}
.sub-heading {
    font-size: clamp(1.12rem, 1.5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.3;
}
::selection {
    background: var(--gold);
    color: var(--brown);
}
a,
button,
input,
select,
textarea {
    outline-offset: 3px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--orange);
}
.pattern {
    background-image: radial-gradient(
        circle at 1px 1px,
        rgba(90, 33, 5, 0.1) 1.2px,
        transparent 0
    );
    background-size: 24px 24px;
}
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-radius: 999px;
    background: #fff2c7;
    padding: 0.45rem 0.9rem;
    color: var(--brown);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.section-tag:before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--orange);
}
.fs18{ font-size: 18px;}
.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 999px;
    padding: 0.9rem 1.35rem;
    font-weight: 700;
    transition: 0.25s ease;
    cursor: pointer;
}
.btn-primary {
    background: var(--gold);
    color: var(--brown);
    box-shadow: 0 10px 25px rgba(183, 58, 5, 0.18);
}
.btn-primary:hover {
    transform: translateY(-2px);
    background: #ffd35f;
}
.btn-dark {
    background: var(--brown);
    color: white;
}
.btn-dark:hover {
    transform: translateY(-2px);
    background: var(--orange);
}
.btn-outline {
    border: 1.5px solid var(--brown);
    color: var(--brown);
}
.btn-outline:hover {
    background: var(--brown);
    color: #fff;
}
.ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
    z-index: -1;
}
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}
.nav-link {
    position: relative;
    font-size: 15px;
}
.nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: left;
    transition: 0.25s;
}
.nav-link:hover:after,
.nav-link.active:after {
    transform: scaleX(1);
}
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    opacity: 0.72;
}
.product-shadow {
    filter: drop-shadow(0 28px 18px rgba(90, 33, 5, 0.22));
}
.hero-extra-images {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    z-index: 10;
    display: grid;
    width: min(76%, 420px);
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    transform: translateX(-50%);
}
.hero-extra-image {
    width: 100%;
    height: 94px;
    border: 4px solid rgba(255, 255, 255, 0.9);
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: 0 12px 28px rgba(90, 33, 5, 0.22);
}
.trust-pill {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    border: 1px solid rgba(90, 33, 5, 0.12);
    background: rgba(255, 255, 255, 0.72);
    padding: 0.7rem 0.9rem;
    border-radius: 1rem;
    font-size: 15px;
    font-weight: 600;
}
.card {
    border: 1px solid rgba(90, 33, 5, 0.1);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 55px rgba(90, 33, 5, 0.08);
    border-radius: 1.5rem;
    transition: 0.3s;
}
.card:hover {
    transform: translateY(-7px);
    box-shadow: 0 24px 65px rgba(90, 33, 5, 0.14);
}
.range-crop {
    position: relative;
    overflow: hidden;
    height: 210px;
    background: linear-gradient(145deg, #fff9e8, #f1ecb5);
}
.range-crop img {
    position: absolute;
    height: 172%;
    width: 520%;
    max-width: none;
    top: -35%;
    object-fit: cover;
}
.range-crop[data-index="0"] img {
    left: 0;
}
.range-crop[data-index="1"] img {
    left: -105%;
}
.range-crop[data-index="2"] img {
    left: -210%;
}
.range-crop[data-index="3"] img {
    left: -315%;
}
.range-crop[data-index="4"] img {
    left: -420%;
}
.veg {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 2px solid var(--green);
}
.veg:after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
}
.filter-btn {
    border: 1px solid rgba(90, 33, 5, 0.18);
    background: #fff;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: 0.2s;
}
.filter-btn.active,
.filter-btn:hover {
    background: var(--brown);
    color: #fff;
    border-color: var(--brown);
}
.field {
    width: 100%;
    border: 1px solid rgba(90, 33, 5, 0.18);
    background: #fff;
    border-radius: 0.9rem;
    padding: 0.8rem 0.95rem;
    transition: 0.2s;
}
.field:focus {
    border-color: var(--orange);
    box-shadow: 0 0 0 4px rgba(183, 58, 5, 0.08);
}
.error-text {
    display: none;
    color: #a51b0b;
    font-size: 0.75rem;
    margin-top: 0.3rem;
}
.invalid + .error-text {
    display: block;
}
.invalid {
    border-color: #a51b0b !important;
}
.modal-backdrop {
    background: rgba(37, 22, 15, 0.86);
    backdrop-filter: blur(8px);
}
.zoom-image {
    transform-origin: center;
    transition: 0.25s;
}
.zoom-image[data-zoom="50"] {
    transform: scale(0.5);
}
.zoom-image[data-zoom="75"] {
    transform: scale(0.75);
}
.zoom-image[data-zoom="100"] {
    transform: scale(1);
}
.zoom-image[data-zoom="125"] {
    transform: scale(1.25);
}
.zoom-image[data-zoom="150"] {
    transform: scale(1.5);
}
.zoom-image[data-zoom="175"] {
    transform: scale(1.75);
}
.zoom-image[data-zoom="200"] {
    transform: scale(2);
}
.zoom-image[data-zoom="225"] {
    transform: scale(2.25);
}
.zoom-image[data-zoom="250"] {
    transform: scale(2.5);
}
.swiper-pagination-bullet-active {
    background: var(--orange);
}
.swiper-button-next,
.swiper-button-prev {
    color: var(--brown);
    background: white;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(90, 33, 5, 0.14);
}
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 15px;
    font-weight: 800;
}
.toast {
    transform: translateY(130%);
    opacity: 0;
    transition: 0.3s;
}
.toast.show {
    transform: translateY(0);
    opacity: 1;
}
.backtop {
    transform: translateY(80px);
    opacity: 0;
    transition: 0.3s;
}
.backtop.show {
    transform: none;
    opacity: 1;
}
.mobile-drawer {
    transition: transform 0.3s ease;
}
.mobile-drawer.closed {
    transform: translateX(100%);
}
.range-family {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.range-family:after {
    content: "";
    position: absolute;
    right: -35px;
    bottom: -55px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: var(--family-accent, #ffc83d);
    opacity: 0.14;
    z-index: -1;
}
.product-world {
    background-color: var(--brown);
    background-image: radial-gradient(
            circle at 12% 18%,
            rgba(255, 200, 61, 0.14) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 82% 72%,
            rgba(255, 255, 255, 0.08) 0 2px,
            transparent 3px
        ),
        repeating-linear-gradient(
            135deg,
            transparent 0 34px,
            rgba(255, 255, 255, 0.025) 35px 36px
        );
    background-size: 42px 42px, 58px 58px, auto;
}
.dehydrated-fruit-photo {
    height: 210px;
    width: 100%;
    object-fit: cover;
}
.makhana-visual {
    background: linear-gradient(145deg, #fff1cb, #fff9e8);
}
.makhana-peri {
    background: linear-gradient(145deg, #f8c5b8, #fff9e8);
}
.makhana-pudina {
    background: linear-gradient(145deg, #cfe4c7, #fff9e8);
}
.makhana-chat {
    background: linear-gradient(145deg, #ebc99d, #fff9e8);
}
.makhana-onion {
    background: linear-gradient(145deg, #e7dfc6, #fff9e8);
}
.family-tone-1 {
    --family-accent: #ffc83d;
}
.family-tone-2 {
    --family-accent: #e55a36;
}
.family-tone-3 {
    --family-accent: #d96b4b;
}
.family-tone-4 {
    --family-accent: #75a861;
}
.family-tone-5 {
    --family-accent: #b6a439;
}
.family-tone-1 .family-icon {
    background: #ffc83d;
}
.family-tone-2 .family-icon {
    background: #e55a36;
}
.family-tone-3 .family-icon {
    background: #d96b4b;
}
.family-tone-4 .family-icon {
    background: #75a861;
}
.family-tone-5 .family-icon {
    background: #b6a439;
}
.quality-section {
    background: linear-gradient(135deg, #5a2105 0%, #8d3108 48%, #b73a05 100%);
}
.quality-card {
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    padding: 1rem;
    text-align: center;
    color: #fff;
    box-shadow: 0 12px 28px rgba(37, 22, 15, 0.16);
}
.quality-tone-1 {
    background: linear-gradient(
        145deg,
        rgba(255, 200, 61, 0.35),
        rgba(255, 255, 255, 0.08)
    );
}
.quality-tone-2 {
    background: linear-gradient(
        145deg,
        rgba(0, 166, 81, 0.28),
        rgba(255, 255, 255, 0.08)
    );
}
.quality-tone-3 {
    background: linear-gradient(
        145deg,
        rgba(241, 236, 181, 0.22),
        rgba(255, 200, 61, 0.12)
    );
}
.quality-icon {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.75rem;
    place-items: center;
    border-radius: 50%;
    background: var(--gold);
    color: var(--brown);
    font-size: 1.05rem;
}
.site-footer {
    background: linear-gradient(135deg, #fff3c4 0%, #ffd566 48%, #eca84c 100%);
}
.footer-brand-tagline {
    font-family: "Great Vibes", cursive;
    font-size: 35px;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 2px;
}
.fssai-logo-window {
    position: relative;
    width: 132px;
    height: 54px;
    overflow: hidden;
    border-radius: 0.5rem;
    background: #fff;
}
.fssai-logo-window img {
    position: absolute;
    top: -1805px;
    left: -675px;
    width: 1247px;
    max-width: none;
}
.site-header {
    top: 50px;
}
.promo-dismissed .site-header {
    top: 0;
}
.image-fallback {
    min-height: 80px;
}
@media (max-width: 767px) {
    .range-crop {
        height: 230px;
    }
    .hero-product {
        width: 118%;
        max-width: none;
        margin-left: -9%;
    }
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
    .qr-safe {
        max-width: 210px;
    }
}
@media (min-width: 1024px) {
    .mobile-drawer,
    #menuOverlay {
        display: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *:before,
    *:after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .hero-float {
        transform: none !important;
    }
}